mirror of
https://github.com/fluxscape/fluxscape.git
synced 2026-01-12 23:32:55 +01:00
Initial commit
Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com> Co-Authored-By: Johan <4934465+joolsus@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>
This commit is contained in:
Michael Cartner
324
packages/noodl-viewer-react/src/nodes/navigation/navigate.js
Normal file
324
packages/noodl-viewer-react/src/nodes/navigation/navigate.js
Normal file
@@ -0,0 +1,324 @@
|
||||
const Transitions = require('./transitions');
|
||||
const NavigationHandler = require('./navigation-handler');
|
||||
|
||||
const Navigate = {
|
||||
name: 'PageStackNavigate',
|
||||
displayNodeName: 'Push Component To Stack',
|
||||
category: 'Navigation',
|
||||
docs: 'https://docs.noodl.net/nodes/component-stack/push-component',
|
||||
initialize: function () {
|
||||
this._internal.transitionParams = {};
|
||||
this._internal.pageParams = {};
|
||||
this._internal.backResults = {};
|
||||
},
|
||||
inputs: {
|
||||
stack: {
|
||||
type: { name: 'string', identifierOf: 'PackStack' },
|
||||
displayName: 'Stack',
|
||||
group: 'General',
|
||||
default: 'Main',
|
||||
set: function (value) {
|
||||
this._internal.stack = value;
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
type: {
|
||||
name: 'enum',
|
||||
enums: [
|
||||
{ label: 'Push', value: 'push' },
|
||||
{ label: 'Replace', value: 'replace' }
|
||||
]
|
||||
},
|
||||
displayName: 'Mode',
|
||||
default: 'push',
|
||||
group: 'General',
|
||||
set: function (value) {
|
||||
this._internal.navigationMode = value;
|
||||
}
|
||||
},
|
||||
navigate: {
|
||||
displayName: 'Navigate',
|
||||
group: 'Actions',
|
||||
valueChangedToTrue: function () {
|
||||
this.scheduleNavigate();
|
||||
}
|
||||
}
|
||||
},
|
||||
outputs: {
|
||||
navigated: {
|
||||
type: 'signal',
|
||||
displayName: 'Navigated',
|
||||
group: 'Events'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scheduleNavigate: function () {
|
||||
var _this = this;
|
||||
var internal = this._internal;
|
||||
if (!internal.hasScheduledNavigate) {
|
||||
internal.hasScheduledNavigate = true;
|
||||
this.scheduleAfterInputsHaveUpdated(function () {
|
||||
internal.hasScheduledNavigate = false;
|
||||
_this.navigate();
|
||||
});
|
||||
}
|
||||
},
|
||||
navigate() {
|
||||
if (this._internal.navigationMode === 'push' || this._internal.navigationMode === undefined) {
|
||||
NavigationHandler.instance.navigate(this._internal.stack, {
|
||||
target: this._internal.target,
|
||||
transition: { ...{ type: this._internal.transition }, ...this._internal.transitionParams },
|
||||
params: this._internal.pageParams,
|
||||
backCallback: (action, results) => {
|
||||
this._internal.backResults = results;
|
||||
|
||||
for (var key in results) {
|
||||
if (this.hasOutput('backResult-' + key)) this.flagOutputDirty('backResult-' + key);
|
||||
}
|
||||
|
||||
if (action !== undefined) this.sendSignalOnOutput(action);
|
||||
},
|
||||
hasNavigated: () => {
|
||||
this.sendSignalOnOutput('navigated');
|
||||
}
|
||||
});
|
||||
} else if (this._internal.navigationMode === 'replace') {
|
||||
NavigationHandler.instance.replace(this._internal.stack, {
|
||||
target: this._internal.target,
|
||||
params: this._internal.pageParams,
|
||||
hasNavigated: () => {
|
||||
this.scheduleAfterInputsHaveUpdated(() => {
|
||||
this.sendSignalOnOutput('navigated');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
setTransitionParam: function (param, value) {
|
||||
this._internal.transitionParams[param] = value;
|
||||
},
|
||||
setPageParam: function (param, value) {
|
||||
this._internal.pageParams[param] = value;
|
||||
},
|
||||
getBackResult: function (param, value) {
|
||||
return this._internal.backResults[param];
|
||||
},
|
||||
setTargetPageId: function (pageId) {
|
||||
this._internal.target = pageId;
|
||||
},
|
||||
setTransition: function (value) {
|
||||
this._internal.transition = value;
|
||||
},
|
||||
registerInputIfNeeded: function (name) {
|
||||
if (this.hasInput(name)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (name === 'target')
|
||||
return this.registerInput(name, {
|
||||
set: this.setTargetPageId.bind(this)
|
||||
});
|
||||
else if (name === 'transition')
|
||||
return this.registerInput(name, {
|
||||
set: this.setTransition.bind(this)
|
||||
});
|
||||
else if (name.startsWith('tr-'))
|
||||
return this.registerInput(name, {
|
||||
set: this.setTransitionParam.bind(this, name.substring('tr-'.length))
|
||||
});
|
||||
else if (name.startsWith('pm-'))
|
||||
return this.registerInput(name, {
|
||||
set: this.setPageParam.bind(this, name.substring('pm-'.length))
|
||||
});
|
||||
},
|
||||
registerOutputIfNeeded: function (name) {
|
||||
if (this.hasOutput(name)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (name.startsWith('backResult-'))
|
||||
return this.registerOutput(name, {
|
||||
getter: this.getBackResult.bind(this, name.substring('backResult-'.length))
|
||||
});
|
||||
else if (name.startsWith('backAction-'))
|
||||
return this.registerOutput(name, {
|
||||
getter: function () {
|
||||
/** No needed for signals */
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function setup(context, graphModel) {
|
||||
if (!context.editorConnection || !context.editorConnection.isRunningLocally()) {
|
||||
return;
|
||||
}
|
||||
|
||||
function _managePortsForNode(node) {
|
||||
function _updatePorts() {
|
||||
var ports = [];
|
||||
|
||||
// Only push mode have transition
|
||||
if (node.parameters['mode'] === 'push' || node.parameters['mode'] === undefined) {
|
||||
ports.push({
|
||||
name: 'transition',
|
||||
plug: 'input',
|
||||
type: { name: 'enum', enums: Object.keys(Transitions) },
|
||||
default: 'Push',
|
||||
displayName: 'Transition',
|
||||
group: 'Transition'
|
||||
});
|
||||
|
||||
var transition = node.parameters['transition'] || 'Push';
|
||||
if (Transitions[transition]) ports = ports.concat(Transitions[transition].ports(node.parameters));
|
||||
}
|
||||
|
||||
// if(node.parameters['stack'] !== undefined) {
|
||||
var pageStacks = graphModel.getNodesWithType('Page Stack');
|
||||
var pageStack = pageStacks.find(
|
||||
(ps) => (ps.parameters['name'] || 'Main') === (node.parameters['stack'] || 'Main')
|
||||
);
|
||||
|
||||
if (pageStack !== undefined) {
|
||||
var pages = pageStack.parameters['pages'];
|
||||
if (pages !== undefined && pages.length > 0) {
|
||||
ports.push({
|
||||
plug: 'input',
|
||||
type: { name: 'enum', enums: pages.map((p) => ({ label: p.label, value: p.id })), allowEditOnly: true },
|
||||
group: 'General',
|
||||
displayName: 'Target Page',
|
||||
name: 'target',
|
||||
default: pages[0].id
|
||||
});
|
||||
|
||||
// See if there is a target page with component
|
||||
var targetPageId = node.parameters['target'] || pages[0].id;
|
||||
var targetComponentName = pageStack.parameters['pageComp-' + targetPageId];
|
||||
if (targetComponentName !== undefined) {
|
||||
const component = graphModel.components[targetComponentName];
|
||||
|
||||
if (component !== undefined) {
|
||||
// Make all inputs of the component to inputs of this navigation node
|
||||
for (var inputName in component.inputPorts) {
|
||||
ports.push({
|
||||
name: 'pm-' + inputName,
|
||||
displayName: inputName,
|
||||
type: '*',
|
||||
plug: 'input',
|
||||
group: 'Parameters'
|
||||
});
|
||||
}
|
||||
|
||||
// Find all navigate back nodes and compile the back actions as
|
||||
// outputs of this node
|
||||
for (const backNode of component.getNodesWithType('PageStackNavigateBack')) {
|
||||
if (backNode.parameters['backActions'] !== undefined) {
|
||||
backNode.parameters['backActions'].split(',').forEach((a) => {
|
||||
if (ports.find((_p) => _p.name === 'backAction-' + a)) return;
|
||||
|
||||
ports.push({
|
||||
name: 'backAction-' + a,
|
||||
displayName: a,
|
||||
type: 'signal',
|
||||
plug: 'output',
|
||||
group: 'Back Actions'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (backNode.parameters['results']) {
|
||||
backNode.parameters['results'].split(',').forEach((p) => {
|
||||
if (ports.find((_p) => _p.name === 'backResult-' + p)) return;
|
||||
|
||||
ports.push({
|
||||
name: 'backResult-' + p,
|
||||
displayName: p,
|
||||
type: '*',
|
||||
plug: 'output',
|
||||
group: 'Back Results'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
context.editorConnection.sendDynamicPorts(node.id, ports);
|
||||
}
|
||||
|
||||
function _trackTargetComponent() {
|
||||
var pageStacks = graphModel.getNodesWithType('Page Stack');
|
||||
var pageStack = pageStacks.find((ps) => ps.parameters['name'] === node.parameters['stack']);
|
||||
if (pageStack === undefined) return;
|
||||
|
||||
var pages = pageStack.parameters['pages'];
|
||||
if (pages === undefined || pages.length === 0) return;
|
||||
|
||||
var targetCompoment = pageStack.parameters['pageComp-' + (node.parameters['target'] || pages[0].id)];
|
||||
if (targetCompoment === undefined) return;
|
||||
var c = graphModel.components[targetCompoment];
|
||||
if (c === undefined) return;
|
||||
|
||||
c.on('inputPortAdded', _updatePorts);
|
||||
c.on('inputPortRemoved', _updatePorts);
|
||||
|
||||
// Also track all back navigate for changes
|
||||
for (const _n of c.getNodesWithType('PageStackNavigateBack')) {
|
||||
_n.on('parameterUpdated', _updatePorts);
|
||||
}
|
||||
|
||||
// Track back navigate added and removed
|
||||
c.on('nodeAdded', (_n) => {
|
||||
if (_n.type === 'PageStackNavigateBack') {
|
||||
_n.on('parameterUpdated', _updatePorts);
|
||||
_updatePorts();
|
||||
}
|
||||
});
|
||||
|
||||
c.on('nodeWasRemoved', (_n) => {
|
||||
if (_n.type === 'PageStackNavigateBack') _updatePorts();
|
||||
});
|
||||
}
|
||||
|
||||
_updatePorts();
|
||||
_trackTargetComponent();
|
||||
node.on('parameterUpdated', function (ev) {
|
||||
if (ev.name === 'target') {
|
||||
_trackTargetComponent();
|
||||
_updatePorts();
|
||||
} else if (ev.name === 'stack' || ev.name === 'mode' || ev.name === 'transition' || ev.name.startsWith('tr-')) _updatePorts();
|
||||
});
|
||||
|
||||
// Track all page stacks for changes (if there are any changes to the pages of the name of a stack we might have to update)
|
||||
function _trackPageStack(node) {
|
||||
node.on('parameterUpdated', function (ev) {
|
||||
if (ev.name === 'pages' || ev.name === 'name') _updatePorts();
|
||||
});
|
||||
}
|
||||
graphModel.on('nodeAdded.Page Stack', _trackPageStack);
|
||||
graphModel.on('nodeWasRemoved.Page Stack', _updatePorts);
|
||||
|
||||
for (const node of graphModel.getNodesWithType('Page Stack')) {
|
||||
_trackPageStack(node);
|
||||
}
|
||||
}
|
||||
|
||||
graphModel.on('editorImportComplete', () => {
|
||||
graphModel.on('nodeAdded.PageStackNavigate', function (node) {
|
||||
_managePortsForNode(node);
|
||||
});
|
||||
|
||||
for (const node of graphModel.getNodesWithType('PageStackNavigate')) {
|
||||
_managePortsForNode(node);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
node: Navigate,
|
||||
setup: setup
|
||||
};
|
||||
Reference in New Issue
Block a user