diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index e97e2e36e..43cb42b1d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -865,6 +865,39 @@ RED.view = (function() { RED.view.navigator.init(); RED.view.tools.init(); + RED.view.annotations.register("red-ui-flow-node-docs",{ + type: "badge", + class: "red-ui-flow-node-docs", + element: function(node) { + + const docsBadge = document.createElementNS("http://www.w3.org/2000/svg","g") + + const pageOutline = document.createElementNS("http://www.w3.org/2000/svg","rect"); + pageOutline.setAttribute("x",0); + pageOutline.setAttribute("y",0); + pageOutline.setAttribute("rx",2); + pageOutline.setAttribute("width",7); + pageOutline.setAttribute("height",10); + docsBadge.appendChild(pageOutline) + + const pageLines = document.createElementNS("http://www.w3.org/2000/svg","path"); + pageLines.setAttribute("d", "M 7 3 h -3 v -3 M 2 8 h 3 M 2 6 h 3 M 2 4 h 2") + docsBadge.appendChild(pageLines) + + $(docsBadge).on('click', function (evt) { + if (node.type === "subflow") { + RED.editor.editSubflow(activeSubflow, 'editor-tab-description'); + } else if (node.type === "group") { + RED.editor.editGroup(node, 'editor-tab-description'); + } else { + RED.editor.edit(node, 'editor-tab-description'); + } + }) + + return docsBadge; + }, + show: function(n) { return !!n.info } + }) RED.view.annotations.register("red-ui-flow-node-changed",{ type: "badge", diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss index 723e8ac79..c6ad12ae9 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss @@ -242,6 +242,18 @@ svg:not(.red-ui-workspace-lasso-active) { stroke-linecap: round; } +.red-ui-flow-node-docs { + stroke-width: 1px; + stroke-linejoin: round; + stroke-linecap: round; + stroke: var(--red-ui-node-border); + fill: none; + cursor: pointer; + rect { + fill: white; + } +} + g.red-ui-flow-node-selected { .red-ui-workspace-select-mode & { opacity: 1;