frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add initial tour-guide feature

Browse Source
This commit is contained in:
Nick O'Leary
2021-09-08 22:57:35 +01:00
parent adadf38b08
commit 48baac916c
7 changed files with 651 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/node_modules/@node-red/editor-client/src/tours/first-flow.js vendored Normal file
View File

@@ -0,0 +1,80 @@
export default {
steps: [
{
title: "Create your first flow",
width: 400,
description: 'This tutorial will guide you through creating your first flow',
nextButton: 'start'
},
{
element: "#red-ui-workspace .red-ui-tab-button.red-ui-tabs-add",
description: 'To add a new tab, click the <i class="fa fa-plus"></i> button',
wait: {
type: "dom-event",
event: "click",
element: "#red-ui-workspace .red-ui-tab-button.red-ui-tabs-add a"
},
},
{
element: '.red-ui-palette-node[data-palette-type="inject"]',
direction: 'right',
description: 'The palette lists all of the nodes available to use. Drag a new Inject node into the workspace.',
fallback: 'inset-bottom-right',
wait: {
type: "nr-event",
event: "nodes:add",
filter: function(event) {
if (event.type === "inject") {
this.injectNode = event;
return true;
}
return false
}
},
complete: function() {
$('.red-ui-palette-node[data-palette-type="inject"]').css("z-index","auto");
}
},
{
element: '.red-ui-palette-node[data-palette-type="debug"]',
direction: 'right',
description: 'Next, drag a new Debug node into the workspace.',
fallback: 'inset-bottom-right',
wait: {
type: "nr-event",
event: "nodes:add",
filter: function(event) {
if (event.type === "debug") {
this.debugNode = event;
return true;
}
return false
}
},
complete: function() {
$('.red-ui-palette-node[data-palette-type="debug"]').css("z-index","auto");
},
},
{
element: function() { return $("#"+this.injectNode.id+" .red-ui-flow-port") },
description: 'Add a wire from the output of the Inject node to the input of the Debug node',
fallback: 'inset-bottom-right',
wait: {
type: "nr-event",
event: "links:add",
filter: function(event) {
return event.source.id === this.injectNode.id && event.target.id === this.debugNode.id;
}
},
},
{
element: "#red-ui-header-button-deploy",
description: 'Deploy your changes so the flow is active in the runtime',
width: 200,
wait: {
type: "dom-event",
event: "click"
},
}
]
}