diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js index 154b64364..c6b33dbc7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js @@ -97,7 +97,10 @@ RED.sidebar.help = (function() { var pendingContentLoad; treeList.on('treelistselect', function(e,item) { pendingContentLoad = item; - if (item.nodeType) { + if (item.tour) { + RED.tourGuide.run(item.tour); + } + else if (item.nodeType) { showNodeTypeHelp(item.nodeType); } else if (item.content) { helpSection.empty(); @@ -198,15 +201,27 @@ RED.sidebar.help = (function() { label: RED._("sidebar.help.nodeHelp"), children: [], expanded: true - } + }; + var tours = RED.tourGuide.list().map(function (item) { + return { + icon: "fa fa-repeat", + label: item.label, + tour: item.path, + }; + }); var helpData = [ { id: 'changelog', label: "Node-RED v"+RED.settings.version, content: getChangelog }, - nodeHelp - ] + nodeHelp, + { + id: "tours", + label: "Tours", + children: tours + }, + ]; var subflows = RED.nodes.registry.getNodeTypes().filter(function(t) {return /subflow/.test(t)}); if (subflows.length > 0) { nodeHelp.children.push({ diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js index 31612cfeb..49b960402 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js @@ -433,9 +433,35 @@ RED.tourGuide = (function() { }) } + function listTour() { + return [ + { + id: "2_3", + label: "3.0.0-beta.3 (latest)", + path: "./tours/welcome.js" + }, + { + id: "2_2", + label: "2.2.0", + path: "./tours/2.2/welcome.js" + }, + { + id: "2_1", + label: "2.1.0", + path: "./tours/2.1/welcome.js" + }, + { + id: "first_flow", + label: "First flow", + path: "./tours/first-flow.js" + }, + ]; + } + return { load: loadTour, run: run, + list: listTour, reset: function() { RED.settings.set("editor.tours.welcome",''); } diff --git a/packages/node_modules/@node-red/editor-client/src/tours/2.1/welcome.js b/packages/node_modules/@node-red/editor-client/src/tours/2.1/welcome.js new file mode 100644 index 000000000..8a4565bab --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/tours/2.1/welcome.js @@ -0,0 +1,229 @@ +export default { + version: "2.1.0", + steps: [ + { + titleIcon: "fa fa-map-o", + title: { + "en-US": "Welcome to Node-RED 2.1!", + "ja": "Node-RED 2.1へようこそ!" + }, + description: { + "en-US": "Let's take a moment to discover the new features in this release.", + "ja": "本リリースの新機能を見つけてみましょう。" + } + }, + { + title: { + "en-US": "A new Tour Guide", + "ja": "新しいツアーガイド" + }, + description: { + "en-US": "
First, as you've already found, we now have this tour of new features. We'll only show the tour the first time you open the editor for each new version of Node-RED.
" + + "You can choose not to see this tour in the future by disabling it under the View tab of User Settings.
", + "ja": "最初に、既に見つけている様に、新機能の本ツアーがあります。本ツアーは、新バージョンのNode-REDフローエディタを初めて開いた時のみ表示されます。
" + + "ユーザ設定の表示タブの中で、この機能を無効化することで、本ツアーを表示しないようにすることもできます。
" + } + }, + { + title: { + "en-US": "New Edit menu", + "ja": "新しい編集メニュー" + }, + prepare() { + $("#red-ui-header-button-sidemenu").trigger("click"); + $("#menu-item-edit-menu").parent().addClass("open"); + }, + complete() { + $("#menu-item-edit-menu").parent().removeClass("open"); + }, + element: "#menu-item-edit-menu-submenu", + interactive: false, + direction: "left", + description: { + "en-US": "The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.
" + + "The menu now displays keyboard shortcuts for the options.
", + "ja": "メインメニューに「編集」セクションが追加されました。本セクションには、切り取り/貼り付けや、変更操作を戻す/やり直しの様な使い慣れたオプションが含まれています。
" + + "本メニューには、オプションのためのキーボードショートカットも表示されるようになりました。
" + } + }, + { + title: { + "en-US": "Arranging nodes", + "ja": "ノードの配置" + }, + prepare() { + $("#red-ui-header-button-sidemenu").trigger("click"); + $("#menu-item-arrange-menu").parent().addClass("open"); + }, + complete() { + $("#menu-item-arrange-menu").parent().removeClass("open"); + }, + element: "#menu-item-arrange-menu-submenu", + interactive: false, + direction: "left", + description: { + "en-US": "The new 'Arrange' section of the menu provides new options to help arrange your nodes. You can align them to a common edge, spread them out evenly or change their order.
", + "ja": "メニューの新しい「配置」セクションには、ノードの配置を助ける新しいオプションが提供されています。ノードの端を揃えたり、均等に配置したり、表示順序を変更したりできます。
" + } + }, + { + title: { + "en-US": "Hiding tabs", + "ja": "タブの非表示" + }, + element: "#red-ui-workspace-tabs > li.active", + description: { + "en-US": 'Tabs can now be hidden by clicking their icon.
The Info Sidebar will still list all of your tabs, and tell you which ones are currently hidden.', + "ja": '
アイコンをクリックすることで、タブを非表示にできます。
情報サイドバーには、全てのタブが一覧表示されており、現在非表示になっているタブを確認できます。' + }, + interactive: false, + prepare() { + $("#red-ui-workspace-tabs > li.active .red-ui-tab-close").css("display","block"); + }, + complete() { + $("#red-ui-workspace-tabs > li.active .red-ui-tab-close").css("display",""); + } + }, + { + title: { + "en-US": "Tab menu", + "ja": "タブメニュー" + }, + element: "#red-ui-workspace-tabs-menu", + description: { + "en-US": "
The new tab menu also provides lots of new options for your tabs.
", + "ja": "新しいタブメニューには、タブに関する沢山の新しいオプションが提供されています。
" + }, + interactive: false, + direction: "left", + prepare() { + $("#red-ui-workspace > .red-ui-tabs > .red-ui-tabs-menu a").trigger("click"); + }, + complete() { + $(document).trigger("click"); + } + }, + { + title: { + "en-US": "Flow and Group level environment variables", + "ja": "フローとグループの環境変数" + }, + element: "#red-ui-workspace-tabs > li.active", + interactive: false, + description: { + "en-US": "Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.
", + "ja": "フローとグループには、内部のノードから参照できる環境変数を設定できるようになりました。
" + } + }, + { + prepare(done) { + RED.editor.editFlow(RED.nodes.workspace(RED.workspaces.active()),"editor-tab-envProperties"); + setTimeout(done,700); + }, + element: "#red-ui-tab-editor-tab-envProperties-link-button", + description: { + "en-US": "Their edit dialogs have a new Environment Variables section.
", + "ja": "編集ダイアログに環境変数セクションが追加されました。
" + } + }, + { + element: ".node-input-env-container-row", + direction: "left", + description: { + "en-US": 'The environment variables are listed in this table and new ones can be added by clicking the button.
', + "ja": 'この表に環境変数が一覧表示されており、ボタンをクリックすることで新しい変数を追加できます。
' + }, + complete(done) { + $("#node-dialog-cancel").trigger("click"); + setTimeout(done,500); + } + }, + { + title: { + "en-US": "Link Call node added", + "ja": "Link Callノードを追加" + }, + prepare(done) { + this.paletteWasClosed = $("#red-ui-main-container").hasClass("red-ui-palette-closed"); + RED.actions.invoke("core:toggle-palette",true) + $('[data-palette-type="link call"]')[0].scrollIntoView({block:"center"}) + setTimeout(done,100); + }, + element: '[data-palette-type="link call"]', + direction: "right", + description: { + "en-US": "The Link Call
node lets you call another flow that begins with a Link In
node and get the result back when the message reaches a Link Out
node.
Link Call
ノードを用いることで、Link In
ノードから始まるフローを呼び出し、Link Out
ノードに到達した時に、結果を取得できます。
The MQTT
nodes now support creating their connections and subscriptions dynamically.
MQTT
ノードは、動的な接続や購読ができるようになりました。
The file nodes have been renamed to make it clearer which node does what.
", + "ja": "fileノードの名前が変更され、どのノードが何を行うかが明確になりました。
" + } + }, + { + title: { + "en-US": "Deep copy option on Change node", + "ja": "Changeノードのディープコピーオプション" + }, + prepare(done) { + var def = RED.nodes.getType('change'); + RED.editor.edit({id:"test",type:"change",rules:[{t:"set",p:"payload",pt:"msg", tot:"msg",to:"anotherProperty"}],_def:def, _:def._}); + setTimeout(done,700); + }, + complete(done) { + $("#node-dialog-cancel").trigger("click"); + setTimeout(done,500); + }, + element: function() { + return $(".node-input-rule-property-deepCopy").next(); + }, + description: { + "en-US": "The Set rule has a new option to create a deep copy of the value. This ensures a complete copy is made, rather than using a reference.
", + "ja": "値を代入に、値のディープコピーを作成するオプションが追加されました。これによって参照ではなく、完全なコピーが作成されます。
" + } + }, + { + title: { + "en-US": "And that's not all...", + "ja": "これが全てではありません..." + }, + description: { + "en-US": "There are many more smaller changes, including:
msg
TypedInput.msg.resetTimeout
in the Join
node.Delay
node's rate limiting mode.Delay
node for rate limited messages.以下の様な小さな変更が沢山あります:
msg
TypedInputの自動補完提案Join
ノードでmsg.resetTimeout
のサポートDelay
ノードの流量制御モードにおいて先頭メッセージをキューに追加Delay
ノードで流量制限されたメッセージ向けの任意の2つ目の出力The Search dialog now keeps a history of your searches, making it easier to go back to a previous search.
", + "ja": "検索ダイアログが検索履歴を保持するようになりました。これによって、過去の検索に戻りやすくなりました。
" + }, + element: "#red-ui-search .red-ui-searchBox-form", + prepare(done) { + RED.search.show(); + setTimeout(done,400); + }, + complete() { + RED.search.hide(); + }, + }, + { + title: { + "en-US": "Remembering Zoom & Position", + "ja": "拡大/縮小のレベルや位置を記憶" + }, + description: { + "en-US": "The editor has new options to restore the zoom level and scroll position when reloading the editor.
", + "ja": "エディタを再読み込みした時に、拡大/縮小のレベルやスクロール位置を復元するための新しいオプションを利用できます。
" + }, + element: function() { return $("#user-settings-view-store-position").parent()}, + prepare(done) { + RED.actions.invoke("core:show-user-settings") + setTimeout(done,400); + }, + complete(done) { + $("#node-dialog-ok").trigger("click"); + setTimeout(done,400); + }, + }, + { + title: { + "en-US": "New wiring actions", + "ja": "新しいワイヤー操作" + }, + // image: "images/", + description: { + "en-US": `A pair of new actions have been added to help with wiring nodes together:
+Wire Series Of Nodes
- adds a wire (if necessary) between each pair of nodes in the order they were selected.Wire Node To Multiple
- wires the first node selected to all of the other selected nodes.Actions can be accessed from the Action List in the main menu.
`, + "ja": `ノード接続を支援する2つの新しい操作が追加されました:
+Wire Series Of Nodes
- ノードを選択した順序で、各ノードのペアの間にワイヤーを(必要に応じて)追加します。Wire Node To Multiple
- 最初に選択したノードから、他の選択した全てのノードに対して、ワイヤーを追加します。メインメニュー内の動作一覧から、これらの操作を利用できます。
` + }, + }, + { + title: { + "en-US": "Deleting nodes and reconnecting wires", + "ja": "ノードの削除とワイヤーの再接続" + }, + image: "2.2/images/delete-repair.gif", + description: { + "en-US": `It is now possible to delete a selection of nodes and automatically repair the wiring behind them.
+This is really useful if you want to remove a node from the middle of the flow.
+Hold the Ctrl (or Cmd) key when you press Delete and the nodes will be gone and the wires repaired.
+ `, + "ja": `選択したノードを削除した後、その背後にあるワイヤーを自動的に修復できるようになりました。
+これは、フローの中からノードを削除する時に、とても便利に使えます。
+Ctrl (またはCmd)キーを押しながらDeleteキーを押すと、ノードがなくなり、ワイヤーが修復されます。
+ ` + } + }, + { + title: { + "en-US": "Detaching nodes from a flow", + "ja": "フローからノードの切り離し" + }, + image: "2.2/images/detach-repair.gif", + description: { + "en-US": `If you want to remove a node from a flow without deleting it,
+ you can use the Detach Selected Nodes
action.
The nodes will be removed from their flow, the wiring repaired behind them, and then attached to the mouse + so you can drop them wherever you want in the workspace.
+There isn't a default keyboard shortcut assigned for this new action, but + you can add your own via the Keyboard pane of the main Settings dialog.
`, + "ja": `ノードを削除することなく、フローからノードを除きたい場合は、Detach Selected Nodes
操作を利用できます。
フローからノードが除かれた後、背後のワイヤーが修復され、ノードはマウスポインタにつながります。そのため、ワークスペースの好きな所にノードを配置できます。
+この新しい操作に対して、デフォルトのキーボードショートカットは登録されていませんが、メイン設定ダイアログのキーボード設定から追加できます。
` + } + }, + { + title: { + "en-US": "More wiring tricks", + "ja": "その他のワイヤー操作" + }, + image: "2.2/images/slice.gif", + description: { + "en-US": `A couple more wiring tricks to share.
+You can now select multiple wires by holding the Ctrl (or Cmd) key + when clicking on a wire. This makes it easier to delete multiple wires in one go.
+If you hold the Ctrl (or Cmd) key, then click and drag with the right-hand mouse button, + you can slice through wires to remove them.
`, + "ja": `その他のいくつかのワイヤー操作
+Ctrl (またはCmd)キーを押しながらワイヤーをクリックすることで、複数のワイヤーを選択できるようになりました。これによって、複数のワイヤーを一度に削除することが簡単になりました。
+Ctrl (またはCmd)キーを押しながら、マウスの右ボタンを用いてドラッグすると、ワイヤーを切って削除できます。
` + } + }, + { + title: { + "en-US": "Subflow Output Labels", + "ja": "サブフローの出力ラベル" + }, + image: "2.2/images/subflow-labels.png", + description: { + "en-US": "If a subflow has labels set for its outputs, they now get shown on the ports within the subflow template view.
", + "ja": "サブフローの出力にラベルが設定されている場合、サブフローテンプレート画面内のポートにラベルが表示されるようになりました。
" + }, + }, + { + title: { + "en-US": "Node Updates", + "ja": "ノードの更新" + }, + // image: "images/", + description: { + "en-US": `