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.

", + "ja": "

Link Callノードを用いることで、Link Inノードから始まるフローを呼び出し、Link Outノードに到達した時に、結果を取得できます。

" + } + }, + { + title: { + "en-US": "MQTT nodes support dynamic connections", + "ja": "MQTTノードが動的接続をサポート" + }, + prepare(done) { + $('[data-palette-type="mqtt out"]')[0].scrollIntoView({block:"center"}) + setTimeout(done,100); + }, + element: '[data-palette-type="mqtt out"]', + direction: "right", + description: { + "en-US": '

The MQTT nodes now support creating their connections and subscriptions dynamically.

', + "ja": '

MQTTノードは、動的な接続や購読ができるようになりました。

' + }, + }, + { + title: { + "en-US": "File nodes renamed", + "ja": "ファイルノードの名前変更" + }, + prepare(done) { + $('[data-palette-type="file"]')[0].scrollIntoView({block:"center"}); + setTimeout(done,100); + }, + complete() { + if (this.paletteWasClosed) { + RED.actions.invoke("core:toggle-palette",false) + } + }, + element: '[data-palette-type="file"]', + direction: "right", + description: { + "en-US": "

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:

", + "ja": "

以下の様な小さな変更が沢山あります:

" + } + } + ] +} diff --git a/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/delete-repair.gif b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/delete-repair.gif new file mode 100644 index 000000000..c668dfdee Binary files /dev/null and b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/delete-repair.gif differ diff --git a/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/detach-repair.gif b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/detach-repair.gif new file mode 100644 index 000000000..14fe1a423 Binary files /dev/null and b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/detach-repair.gif differ diff --git a/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/slice.gif b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/slice.gif new file mode 100644 index 000000000..ebd691ba8 Binary files /dev/null and b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/slice.gif differ diff --git a/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/subflow-labels.png b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/subflow-labels.png new file mode 100644 index 000000000..80023be78 Binary files /dev/null and b/packages/node_modules/@node-red/editor-client/src/tours/2.2/images/subflow-labels.png differ diff --git a/packages/node_modules/@node-red/editor-client/src/tours/2.2/welcome.js b/packages/node_modules/@node-red/editor-client/src/tours/2.2/welcome.js new file mode 100644 index 000000000..f46ef3fbb --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/tours/2.2/welcome.js @@ -0,0 +1,156 @@ +export default { + version: "2.2.0", + steps: [ + { + titleIcon: "fa fa-map-o", + title: { + "en-US": "Welcome to Node-RED 2.2!", + "ja": "Node-RED 2.2へようこそ!" + }, + description: { + "en-US": "Let's take a moment to discover the new features in this release.", + "ja": "本リリースの新機能を見つけてみましょう。" + } + }, + { + title: { + "en-US": "Search history", + "ja": "検索履歴" + }, + description: { + "en-US": "

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:

+ +

Actions can be accessed from the Action List in the main menu.

`, + "ja": `

ノード接続を支援する2つの新しい操作が追加されました:

+ +

メインメニュー内の動作一覧から、これらの操作を利用できます。

` + }, + }, + { + 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": ``, + "ja": `` + } + } + ] +}