Merge branch 'master' into use-css-variables

packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js

@@ -48,10 +48,10 @@ RED.contextMenu = (function() {
         const menuItems = [
             { onselect: 'core:show-action-list', onpostselect: function() {} },
             {
-                label: 'Insert',
+                label: RED._("contextMenu.insert"),
                 options: [
                     {
-                        label: 'Node',
+                        label: RED._("contextMenu.node"),
                         onselect: function() {
                             RED.view.showQuickAddDialog({
                                 position: [ options.x - offset.left, options.y - offset.top ],
@@ -62,12 +62,12 @@ RED.contextMenu = (function() {
                         }
                     },
                     {
-                        label: 'Junction',
+                        label: RED._("contextMenu.junction"),
                         onselect: 'core:split-wires-with-junctions',
                         disabled: hasSelection || !hasLinks
                     },
                     {
-                        label: 'Link Nodes',
+                        label: RED._("contextMenu.linkNodes"),
                         onselect: 'core:split-wire-with-link-nodes',
                         disabled: hasSelection || !hasLinks
                     }
@@ -170,6 +170,7 @@ RED.contextMenu = (function() {
     }
 
     return {
-        show: show
+        show: show,
+        hide: disposeMenu
     }
 })()

packages/node_modules/@node-red/editor-client/src/js/ui/editors/code-editor.js

@@ -21,7 +21,7 @@
 
     const MONACO = "monaco";
     const ACE = "ace";
-    const defaultEditor = ACE;
+    const defaultEditor = MONACO;
     const DEFAULT_SETTINGS = { lib: defaultEditor, options: {} };
     var selectedCodeEditor = null;
     var initialised = false;
@@ -48,12 +48,12 @@
     }
 
     function create(options) {
-        //TODO: (quandry - for consideration) 
+        //TODO: (quandry - for consideration)
         // Below, I had to create a hidden element if options.id || options.element is not in the DOM
-        // I have seen 1 node calling  `this.editor = RED.editor.createEditor()` with an 
+        // I have seen 1 node calling  `this.editor = RED.editor.createEditor()` with an
         // invalid (non existing html element selector) (e.g. node-red-contrib-components does this)
-        // This causes monaco to throw an error when attempting to hook up its events to the dom  & the rest of the 'oneditperapre' 
-        // code is thus skipped. 
+        // This causes monaco to throw an error when attempting to hook up its events to the dom  & the rest of the 'oneditperapre'
+        // code is thus skipped.
         // In ACE mode, creating an ACE editor (with an invalid ID) allows the editor to be created (but obviously there is no UI)
         // Because one (or more) contrib nodes have left this bad code in place, how would we handle this?
         // For compatibility, I have decided to create a hidden element so that at least an editor is created & errors do not occur.
@@ -79,7 +79,7 @@
             return this.editor.create(options);//fallback to ACE
         }
     }
- 
+
     return {
         init: init,
         /**
@@ -91,7 +91,7 @@
         },
         /**
          * Get user selected code editor
-         * @return {string} Returns 
+         * @return {string} Returns
          * @memberof RED.editor.codeEditor
          */
         get editor() {
@@ -104,4 +104,4 @@
          */
         create: create
     }
-})();
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/editors/panes/appearance.js

@@ -37,8 +37,7 @@
                 if (!node._def.defaults || !node._def.defaults.hasOwnProperty("icon")) {
                     var icon = $("#red-ui-editor-node-icon").val()||"";
                     if (!this.isDefaultIcon) {
-                        if ((icon !== node.icon) &&
-                            (icon !== "")) {
+                        if ((node.icon && icon !== node.icon) || (!node.icon && icon !== "")) {
                             editState.changes.icon = node.icon;
                             node.icon = icon;
                             editState.changed = true;

packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js

@@ -20,10 +20,8 @@ RED.sidebar.help = (function() {
     var helpSection;
     var panels;
     var panelRatio;
-    var helpTopics = [];
     var treeList;
     var tocPanel;
-    var helpIndex = {};
 
     function resizeStack() {
         var h = $(content).parent().height() - toolbar.outerHeight();
@@ -97,7 +95,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();
@@ -189,7 +190,6 @@ RED.sidebar.help = (function() {
     }
 
     function refreshHelpIndex() {
-        helpTopics = [];
         var modules = RED.nodes.registry.getModuleList();
         var moduleNames = Object.keys(modules);
         moduleNames.sort();
@@ -198,15 +198,32 @@ RED.sidebar.help = (function() {
             label: RED._("sidebar.help.nodeHelp"),
             children: [],
             expanded: true
-        }
+        };
+        var tours = RED.tourGuide.list().map(function (item) {
+            return {
+                icon: "fa fa-play-circle-o",
+                label: item.label,
+                tour: item.path,
+            };
+        });
         var helpData = [
             {
-                id: 'changelog',
-                label: "Node-RED v"+RED.settings.version,
-                content: getChangelog
+                label: "Node-RED",
+                children: [
+                    {
+                        id: 'changelog',
+                        label: RED._("sidebar.help.changeLog"),
+                        content: getChangelog
+                    },
+                    {
+                        label: RED._("tourGuide.welcomeTours"),
+                        children: tours
+                    }
+
+                ]
             },
             nodeHelp
-        ]
+        ];
         var subflows = RED.nodes.registry.getNodeTypes().filter(function(t) {return /subflow/.test(t)});
         if (subflows.length > 0) {
             nodeHelp.children.push({

packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js

@@ -433,9 +433,30 @@ RED.tourGuide = (function() {
         })
     }
 
+    function listTour() {
+        return [
+            {
+                id: "2_3",
+                label: "3.0.0-beta.3",
+                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"
+            }
+        ];
+    }
+
     return {
         load: loadTour,
         run: run,
+        list: listTour,
         reset: function() {
             RED.settings.set("editor.tours.welcome",'');
         }

packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js

@@ -979,13 +979,14 @@ RED.view.tools = (function() {
      *  - it uses `<paletteLabel> <N>` - where N is the next available integer that
      *    doesn't clash with any existing nodes of that type
      * @param {Object} node The node to set the name of - if not provided, uses current selection
+     * @param {{ renameBlank: boolean, renameClash: boolean, generateHistory: boolean }} options Possible options are `renameBlank`, `renameClash` and `generateHistory`
      */
     function generateNodeNames(node, options) {
-        options = options || {
+        options = Object.assign({
             renameBlank: true,
             renameClash: true,
             generateHistory: true
-        }
+        }, options)
         let nodes = node;
         if (node) {
             if (!Array.isArray(node)) {

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -988,6 +988,7 @@ RED.view = (function() {
         if (RED.view.DEBUG) {
             console.warn("canvasMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
         }
+        RED.contextMenu.hide();
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -1779,6 +1780,9 @@ RED.view = (function() {
         }
         var i;
         var historyEvent;
+        if (d3.event.button === 2) {
+            return
+        }
         if (mouse_mode === RED.state.PANNING) {
             resetMouseVars();
             return
@@ -2903,6 +2907,7 @@ RED.view = (function() {
 
     function portMouseDown(d,portType,portIndex, evt) {
         if (RED.view.DEBUG) { console.warn("portMouseDown", mouse_mode,d,portType,portIndex); }
+        RED.contextMenu.hide();
         evt = evt || d3.event;
         if (evt === 1) {
             return;
@@ -3411,6 +3416,7 @@ RED.view = (function() {
     function nodeMouseDown(d) {
         if (RED.view.DEBUG) { console.warn("nodeMouseDown", mouse_mode,d); }
         focusView();
+        RED.contextMenu.hide();
         if (d3.event.button === 1) {
             return;
         }
@@ -3793,6 +3799,7 @@ RED.view = (function() {
         if (RED.view.DEBUG) {
             console.warn("linkMouseDown", { mouse_mode, point: d3.mouse(this), event: d3.event });
         }
+        RED.contextMenu.hide();
         if (mouse_mode === RED.state.SELECTING_NODE) {
             d3.event.stopPropagation();
             return;
@@ -3852,6 +3859,9 @@ RED.view = (function() {
     }
 
     function groupMouseUp(g) {
+        if (RED.view.DEBUG) {
+            console.warn("groupMouseUp", { mouse_mode, event: d3.event });
+        }
         if (dblClickPrimed && mousedown_group == g && clickElapsed > 0 && clickElapsed < dblClickInterval) {
             mouse_mode = RED.state.DEFAULT;
             RED.editor.editGroup(g);
@@ -3867,6 +3877,10 @@ RED.view = (function() {
         //     return
         // }
 
+        if (RED.view.DEBUG) {
+            console.warn("groupMouseDown", { mouse_mode, point: mouse, event: d3.event });
+        }
+        RED.contextMenu.hide();
         focusView();
         if (d3.event.button === 1) {
             return;
@@ -5858,6 +5872,7 @@ RED.view = (function() {
      * @private
      */
      function createNode(type, x, y, z) {
+        const wasDirty = RED.nodes.dirty()
         var m = /^subflow:(.+)$/.exec(type);
         var activeSubflow = z ? RED.nodes.subflow(z) : null;
         if (activeSubflow && m) {
@@ -5916,7 +5931,7 @@ RED.view = (function() {
         var historyEvent = {
             t: "add",
             nodes: [nn.id],
-            dirty: RED.nodes.dirty()
+            dirty: wasDirty
         }
         if (activeSubflow) {
             var subflowRefresh = RED.subflow.refresh(true);

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -284,9 +284,22 @@ RED.workspaces = (function() {
                         onselect: "core:show-last-hidden-flow"
                     }
                 ]
-                if (hideStack.length > 0) {
+                let hiddenFlows = new Set()
+                for (let i = 0; i < hideStack.length; i++) {
+                    let ids = hideStack[i]
+                    if (!Array.isArray(ids)) {
+                        ids = [ids]
+                    }
+                    ids.forEach(id => {
+                        if (RED.nodes.workspace(id)) {
+                            hiddenFlows.add(id)
+                        }
+                    })
+                }
+                const flowCount = hiddenFlows.size;
+                if (flowCount > 0) {
                     menuItems.unshift({
-                        label: RED._("workspace.hiddenFlows",{count: hideStack.length}),
+                        label: RED._("workspace.hiddenFlows",{count: flowCount}),
                         onselect: "core:list-hidden-flows"
                     })
                 }

packages/node_modules/@node-red/editor-client/src/sass/search.scss

@@ -54,7 +54,7 @@
     }
     .red-ui-search-results-container {
         display: none;
-        height: 150px;
+        height: 195px;
         .red-ui-editableList-container {
             border: 1px dashed var(--red-ui-primary-border-color);
             border-top: 1px solid var(--red-ui-secondary-border-color);

packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss

@@ -37,7 +37,7 @@ ul.red-ui-sidebar-node-config-list {
     }
     .red-ui-palette-node {
         overflow: hidden;
-
+        cursor: default;
         &.selected {
             border-color: transparent;
             box-shadow: 0 0 0 2px var(--red-ui-node-selected-color);
@@ -68,6 +68,7 @@ ul.red-ui-sidebar-node-config-list {
             left: 0;
             right: 0;
             color: var(--red-ui-node-port-label-color);
+            cursor: pointer;
             &:hover {
                 text-decoration: none;
                 background: var(--red-ui-node-port-background-hover);

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": "<p>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.</p>" +
+                         "<p>You can choose not to see this tour in the future by disabling it under the View tab of User Settings.</p>",
+                "ja": "<p>最初に、既に見つけている様に、新機能の本ツアーがあります。本ツアーは、新バージョンのNode-REDフローエディタを初めて開いた時のみ表示されます。</p>" +
+                      "<p>ユーザ設定の表示タブの中で、この機能を無効化することで、本ツアーを表示しないようにすることもできます。</p>"
+            }
+        },
+        {
+            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": "<p>The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.</p>" +
+                         "<p>The menu now displays keyboard shortcuts for the options.</p>",
+                "ja": "<p>メインメニューに「編集」セクションが追加されました。本セクションには、切り取り/貼り付けや、変更操作を戻す/やり直しの様な使い慣れたオプションが含まれています。</p>" +
+                      "<p>本メニューには、オプションのためのキーボードショートカットも表示されるようになりました。</p>"
+            }
+        },
+        {
+            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": "<p>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.</p>",
+                "ja": "<p>メニューの新しい「配置」セクションには、ノードの配置を助ける新しいオプションが提供されています。ノードの端を揃えたり、均等に配置したり、表示順序を変更したりできます。</p>"
+            }
+        },
+        {
+            title: {
+                "en-US": "Hiding tabs",
+                "ja": "タブの非表示"
+            },
+            element: "#red-ui-workspace-tabs > li.active",
+            description: {
+                "en-US": '<p>Tabs can now be hidden by clicking their <i class="fa fa-eye-slash"></i> icon.</p><p>The Info Sidebar will still list all of your tabs, and tell you which ones are currently hidden.',
+                "ja": '<p><i class="fa fa-eye-slash"></i> アイコンをクリックすることで、タブを非表示にできます。</p><p>情報サイドバーには、全てのタブが一覧表示されており、現在非表示になっているタブを確認できます。'
+            },
+            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": "<p>The new tab menu also provides lots of new options for your tabs.</p>",
+                "ja": "<p>新しいタブメニューには、タブに関する沢山の新しいオプションが提供されています。</p>"
+            },
+            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": "<p>Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.</p>",
+                "ja": "<p>フローとグループには、内部のノードから参照できる環境変数を設定できるようになりました。</p>"
+            }
+        },
+        {
+            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": "<p>Their edit dialogs have a new Environment Variables section.</p>",
+                "ja": "<p>編集ダイアログに環境変数セクションが追加されました。</p>"
+            }
+        },
+        {
+            element: ".node-input-env-container-row",
+            direction: "left",
+            description: {
+                "en-US": '<p>The environment variables are listed in this table and new ones can be added by clicking the <i class="fa fa-plus"></i> button.</p>',
+                "ja": '<p>この表に環境変数が一覧表示されており、<i class="fa fa-plus"></i>ボタンをクリックすることで新しい変数を追加できます。</p>'
+            },
+            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": "<p>The <code>Link Call</code> node lets you call another flow that begins with a <code>Link In</code> node and get the result back when the message reaches a <code>Link Out</code> node.</p>",
+                "ja": "<p><code>Link Call</code>ノードを用いることで、<code>Link In</code>ノードから始まるフローを呼び出し、<code>Link Out</code>ノードに到達した時に、結果を取得できます。</p>"
+            }
+        },
+        {
+            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": '<p>The <code>MQTT</code> nodes now support creating their connections and subscriptions dynamically.</p>',
+              "ja": '<p><code>MQTT</code>ノードは、動的な接続や購読ができるようになりました。</p>'
+            },
+        },
+        {
+            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": "<p>The file nodes have been renamed to make it clearer which node does what.</p>",
+                "ja": "<p>fileノードの名前が変更され、どのノードが何を行うかが明確になりました。</p>"
+            }
+        },
+        {
+            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": "<p>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.</p>",
+                "ja": "<p>値を代入に、値のディープコピーを作成するオプションが追加されました。これによって参照ではなく、完全なコピーが作成されます。</p>"
+            }
+        },
+        {
+            title: {
+                "en-US": "And that's not all...",
+                "ja": "これが全てではありません..."
+            },
+            description: {
+                "en-US": "<p>There are many more smaller changes, including:</p><ul><li>Auto-complete suggestions in the <code>msg</code> TypedInput.</li><li>Support for <code>msg.resetTimeout</code> in the <code>Join</code> node.</li><li>Pushing messages to the front of the queue in the <code>Delay</code> node's rate limiting mode.</li><li>An optional second output on the <code>Delay</code> node for rate limited messages.</li></ul>",
+                "ja": "<p>以下の様な小さな変更が沢山あります:</p><ul><li><code>msg</code> TypedInputの自動補完提案</li><li><code>Join</code>ノードで<code>msg.resetTimeout</code>のサポート</li><li><code>Delay</code>ノードの流量制御モードにおいて先頭メッセージをキューに追加</li><li><code>Delay</code>ノードで流量制限されたメッセージ向けの任意の2つ目の出力</li></ul>"
+            }
+        }
+    ]
+}

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": "<p>The Search dialog now keeps a history of your searches, making it easier to go back to a previous search.</p>",
+                "ja": "<p>検索ダイアログが検索履歴を保持するようになりました。これによって、過去の検索に戻りやすくなりました。</p>"
+            },
+            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": "<p>The editor has new options to restore the zoom level and scroll position when reloading the editor.</p>",
+                "ja": "<p>エディタを再読み込みした時に、拡大/縮小のレベルやスクロール位置を復元するための新しいオプションを利用できます。</p>"
+            },
+            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": `<p>A pair of new actions have been added to help with wiring nodes together:</p>
+                          <ul>
+                          <li><b><code>Wire Series Of Nodes</code></b> - adds a wire (if necessary) between each pair of nodes in the order they were selected.</li>
+                          <li><b><code>Wire Node To Multiple</code></b> - wires the first node selected to all of the other selected nodes.</li>
+                          </ul>
+                          <p>Actions can be accessed from the Action List in the main menu.</p>`,
+                "ja": `<p>ノード接続を支援する2つの新しい操作が追加されました:</p>
+                       <ul>
+                       <li><b><code>Wire Series Of Nodes</code></b> - ノードを選択した順序で、各ノードのペアの間にワイヤーを(必要に応じて)追加します。</li>
+                       <li><b><code>Wire Node To Multiple</code></b> - 最初に選択したノードから、他の選択した全てのノードに対して、ワイヤーを追加します。</li>
+                       </ul>
+                       <p>メインメニュー内の動作一覧から、これらの操作を利用できます。</p>`
+            },
+        },
+        {
+            title: {
+                "en-US": "Deleting nodes and reconnecting wires",
+                "ja": "ノードの削除とワイヤーの再接続"
+            },
+            image: "2.2/images/delete-repair.gif",
+            description: {
+                "en-US": `<p>It is now possible to delete a selection of nodes and automatically repair the wiring behind them.</p>
+                          <p>This is really useful if you want to remove a node from the middle of the flow.</p>
+                          <p>Hold the Ctrl (or Cmd) key when you press Delete and the nodes will be gone and the wires repaired.</p>
+                          `,
+                "ja": `<p>選択したノードを削除した後、その背後にあるワイヤーを自動的に修復できるようになりました。</p>
+                       <p>これは、フローの中からノードを削除する時に、とても便利に使えます。</p>
+                       <p>Ctrl (またはCmd)キーを押しながらDeleteキーを押すと、ノードがなくなり、ワイヤーが修復されます。</p>
+                       `
+            }
+        },
+        {
+            title: {
+                "en-US": "Detaching nodes from a flow",
+                "ja": "フローからノードの切り離し"
+            },
+            image: "2.2/images/detach-repair.gif",
+            description: {
+                "en-US": `<p>If you want to remove a node from a flow without deleting it,
+                          you can use the <b><code>Detach Selected Nodes</code></b> action.</p>
+                          <p>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.</p>
+                          <p>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.</p>`,
+                "ja": `<p>ノードを削除することなく、フローからノードを除きたい場合は、<b><code>Detach Selected Nodes</code></b>操作を利用できます。</p>
+                       <p>フローからノードが除かれた後、背後のワイヤーが修復され、ノードはマウスポインタにつながります。そのため、ワークスペースの好きな所にノードを配置できます。</p>
+                       <p>この新しい操作に対して、デフォルトのキーボードショートカットは登録されていませんが、メイン設定ダイアログのキーボード設定から追加できます。</p>`
+            }
+        },
+        {
+            title: {
+                "en-US": "More wiring tricks",
+                "ja": "その他のワイヤー操作"
+            },
+            image: "2.2/images/slice.gif",
+            description: {
+                "en-US": `<p>A couple more wiring tricks to share.</p>
+                          <p>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.</p>
+                          <p>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.</p>`,
+                "ja": `<p>その他のいくつかのワイヤー操作</p>
+                       <p>Ctrl (またはCmd)キーを押しながらワイヤーをクリックすることで、複数のワイヤーを選択できるようになりました。これによって、複数のワイヤーを一度に削除することが簡単になりました。</p>
+                       <p>Ctrl (またはCmd)キーを押しながら、マウスの右ボタンを用いてドラッグすると、ワイヤーを切って削除できます。</p>`
+            }
+        },
+        {
+            title: {
+                "en-US": "Subflow Output Labels",
+                "ja": "サブフローの出力ラベル"
+            },
+            image: "2.2/images/subflow-labels.png",
+            description: {
+                "en-US": "<p>If a subflow has labels set for its outputs, they now get shown on the ports within the subflow template view.</p>",
+                "ja": "<p>サブフローの出力にラベルが設定されている場合、サブフローテンプレート画面内のポートにラベルが表示されるようになりました。</p>"
+            },
+        },
+        {
+            title: {
+                "en-US": "Node Updates",
+                "ja": "ノードの更新"
+            },
+            // image: "images/",
+            description: {
+                "en-US": `<ul>
+                            <li>The JSON node will now handle parsing Buffer payloads</li>
+                            <li>The TCP Client nodes support TLS connections</li>
+                            <li>The WebSocket node allows you to specify a sub-protocol when connecting</li>
+                          </ul>`,
+                "ja": `<ul>
+                         <li>JSONノードが、バッファ形式のペイロードを解析できるようになりました。</li>
+                         <li>TCPクライアントノードが、TLS接続をサポートしました。</li>
+                         <li>WebSocketノードで、接続時にサブプロトコルを指定できるようになりました。</li>
+                       </ul>`
+            }
+        }
+    ]
+}

packages/node_modules/@node-red/editor-client/src/tours/welcome.js

@@ -9,19 +9,22 @@ export default {
             },
             description: {
                 "en-US": "<p>This is the final beta release of Node-RED 3.0.</p><p>Let's take a moment to discover the new features in this release.</p>",
-                // "ja": "<p>これはNode-RED 3.0の最初のベータリリースです。これには、最終リリースで計画しているほぼ全ての機能が含まれています。</p><p>本リリースの新機能を見つけてみましょう。</p>"
+                "ja": "<p>これはNode-RED 3.0の最後のベータリリースです。</p><p>本リリースの新機能を見つけてみましょう。</p>"
             }
         },
         {
             title: {
-                "en-US": "Context Menu"
+                "en-US": "Context Menu",
+                "ja": "コンテキストメニュー"
             },
             image: 'images/context-menu.png',
             description: {
                 "en-US": `<p>The editor now has its own context menu when you
                           right-click in the workspace.</p>
                           <p>This makes many of the built-in actions much easier
-                          to access.</p>`
+                          to access.</p>`,
+                "ja": `<p>ワークスペースで右クリックすると、エディタに独自のコンテキストメニューが表示されるようになりました。</p>
+                       <p>これによって多くの組み込み動作を、より簡単に利用できます。</p>`
             }
         },
         {
@@ -34,10 +37,10 @@ export default {
                 "en-US": `<p>To make it easier to route wires around your flows,
                              it is now possible to add junction nodes that give
                              you more control.</p>
-                          <p>Junctions can be added to wires by holding the Alt key
+                          <p>Junctions can be added to wires by holding both the Alt key and the Shift key
                           then click and drag the mouse across the wires.</p>`,
-                // "ja": `<p>フローのワイヤーの経路をより制御しやすくするために、分岐点ノードを追加できるようになりました。</p>
-                //        <p>シフトキーを押しながら、マウスの右ボタンをクリックし、ワイヤーを横切るようにドラッグすることで、分岐点を追加できます。</p>`
+                "ja": `<p>フローのワイヤーの経路をより制御しやすくするために、分岐点ノードを追加できるようになりました。</p>
+                       <p>Altキーとシフトキーを押しながらマウスをクリックし、ワイヤーを横切るようにドラッグすることで、分岐点を追加できます。</p>`
             },
         },
         {