@kumologica/sdk 3.4.0 → 3.5.0-beta2

package/src/app/ui/editor-client/src/js/ui/view.js

@@ -86,14 +86,14 @@ RED.view = (function () {
     {
       title: 'Paste',
       shortcut: 'Ctrl+V',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         RED.actions.invoke('core:paste-from-internal-clipboard');
       }
     },
     {
       title: 'Search Node...',
       shortcut: 'Ctrl+F',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#btn-search').click();
         d3.event.stopPropagation();
       }
@@ -101,7 +101,7 @@ RED.view = (function () {
     { separator: true },
     {
       title: 'Clear All Breakpoints',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         await window.__kumologica.debugger.removeAllBreakpoints();
         await redrawBreakpoints();
         redraw();
@@ -111,7 +111,7 @@ RED.view = (function () {
     {
       title: 'Run TestCase',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#red-ui-tab-test-link-button').click();
         $('#test-sidebar-run-btn').click();
       }
@@ -119,7 +119,7 @@ RED.view = (function () {
     {
       title: 'Debug TestCase',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#red-ui-tab-test-link-button').click();
         $('#test-sidebar-debug-btn').click();
       }
@@ -128,14 +128,14 @@ RED.view = (function () {
     {
       title: 'Toggle Navigator',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         RED.view.navigator.toggle();
       }
-    }, 
+    },
     {
       title: 'Automatic Layout',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         applyLayout();
       }
     },
@@ -143,25 +143,25 @@ RED.view = (function () {
     {
       title: 'Open Node Library',
       shortcut: '',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         $('#launch-node-library').click()
       }
     },
     {
       title: 'Add Node...',
       shortcut: 'Ctrl+Click',
-      action: async function(elm, d, i) {
+      action: async function (elm, d, i) {
         d3.event.stopPropagation();
 
         let eventProps = {
-          ctrlKey: true, 
+          ctrlKey: true,
           metaKey: true,
           screenX: d3.event.screenX,
           screenY: d3.event.screenY,
           clientX: d3.event.clientX,
           clientY: d3.event.clientY,
           offsetX: d3.event.offsetX,
-          offsetY: d3.event.offsetY                
+          offsetY: d3.event.offsetY
         }
         mouse_mode = RED.state.DEFAULT;
 
@@ -281,8 +281,8 @@ RED.view = (function () {
             Math.max(
               0.3,
               scaleFactor +
-                Math.floor(moveTouchDistance * 100 - startTouchDistance * 100) /
-                  10000
+              Math.floor(moveTouchDistance * 100 - startTouchDistance * 100) /
+              10000
             )
           );
 
@@ -301,7 +301,7 @@ RED.view = (function () {
         }
       }
     })
-    
+
   vis.on('contextmenu', d3.contextMenu('canvas', menuCanvas, () => { zoomZero() }));
 
   var outer_background = vis
@@ -370,13 +370,13 @@ RED.view = (function () {
   var contextMenuLayer = vis.append('g');
   // add the context menu placeholder for the canvas
   contextMenuLayer
-  .append('foreignObject')
-  .attr('id', `d3-context-menu-canvas`)
-  .attr('class', `d3-context-menu-canvas d3-context-menu`)
-  .attr('width', 350)
-  .attr('height', 100)
-  .attr('x', 100)
-  .attr('y', 100)
+    .append('foreignObject')
+    .attr('id', `d3-context-menu-canvas`)
+    .attr('class', `d3-context-menu-canvas d3-context-menu`)
+    .attr('width', 350)
+    .attr('height', 100)
+    .attr('x', 100)
+    .attr('y', 100)
 
   var drag_lines = [];
 
@@ -501,7 +501,7 @@ RED.view = (function () {
       zoomIn();
     });
 
-    $('#btn-minimize-restore').click( ()=> {
+    $('#btn-minimize-restore').click(() => {
       if (scaleFactor === 1) {
         scaleFactor = 0.6;
       } else {
@@ -510,7 +510,7 @@ RED.view = (function () {
       zoomView(scaleFactor);
     });
 
-    $('#btn-layouter').click(function(){
+    $('#btn-layouter').click(function () {
       applyLayout();
     });
 
@@ -538,28 +538,28 @@ RED.view = (function () {
 
     // Handle dragging the workspace
     $('#chart')
-      .keydown(function(e){
-        if(e.keyCode == 32) {
+      .keydown(function (e) {
+        if (e.keyCode == 32) {
           e.preventDefault();
           if (!drag) {
             drag = true;
-            $('#chart').attr('style','cursor: grab !important')    
+            $('#chart').attr('style', 'cursor: grab !important')
           }
         }
       })
-      .keyup(function(e){
-      if(e.keyCode == 32 && drag){
-        e.preventDefault();
-        drag = false;
-        dragging = false;
-        $('#chart').attr('style','cursor: default !important')
-      }
+      .keyup(function (e) {
+        if (e.keyCode == 32 && drag) {
+          e.preventDefault();
+          drag = false;
+          dragging = false;
+          $('#chart').attr('style', 'cursor: default !important')
+        }
       })
-      .on("mousedown", function(e) {
+      .on("mousedown", function (e) {
         if (drag && !dragging) {
           e.preventDefault();
-          
-          $('#chart').attr('style','cursor: grabbing !important')
+
+          $('#chart').attr('style', 'cursor: grabbing !important')
           dragging = true;
           draggingPos = {
             // The current scroll
@@ -571,27 +571,27 @@ RED.view = (function () {
         }
       })
 
-      .on("mouseup", function(e) {
-        if (drag && dragging){
+      .on("mouseup", function (e) {
+        if (drag && dragging) {
           e.preventDefault();
           dragging = false;
           // console.log('Dragging off')
-          $('#chart').attr('style','cursor: grab !important')
+          $('#chart').attr('style', 'cursor: grab !important')
         }
-      
+
       })
 
-      .on("mousemove", function(e) {
-          if (drag && dragging){
-            e.preventDefault();
-            
-            // How far the mouse has been moved
-            const dx = e.clientX - draggingPos.x;
-            const dy = e.clientY - draggingPos.y;
-            
-            $("#chart").scrollLeft(draggingPos.left - dx);
-            $("#chart").scrollTop(draggingPos.top - dy);
-          }
+      .on("mousemove", function (e) {
+        if (drag && dragging) {
+          e.preventDefault();
+
+          // How far the mouse has been moved
+          const dx = e.clientX - draggingPos.x;
+          const dy = e.clientY - draggingPos.y;
+
+          $("#chart").scrollLeft(draggingPos.left - dx);
+          $("#chart").scrollTop(draggingPos.top - dy);
+        }
       });
 
 
@@ -741,10 +741,10 @@ RED.view = (function () {
       scale =
         0.4 -
         0.2 *
-          Math.max(
-            0,
-            (node_width - Math.min(Math.abs(dx), Math.abs(dy))) / node_width
-          );
+        Math.max(
+          0,
+          (node_width - Math.min(Math.abs(dx), Math.abs(dy))) / node_width
+        );
     }
     if (dx * sc > 0) {
       return (
@@ -1004,10 +1004,10 @@ RED.view = (function () {
           .attr(
             'transform',
             'translate(' +
-              (point[0] - node_width / 2) +
-              ',' +
-              (point[1] - node_height / 2) +
-              ')'
+            (point[0] - node_width / 2) +
+            ',' +
+            (point[1] - node_height / 2) +
+            ')'
           );
         ghostNode
           .append('rect')
@@ -1297,10 +1297,10 @@ RED.view = (function () {
               ghostNode.attr(
                 'transform',
                 'translate(' +
-                  (point[0] - node_width / 2) +
-                  ',' +
-                  (point[1] - node_height / 2) +
-                  ')'
+                (point[0] - node_width / 2) +
+                ',' +
+                (point[1] - node_height / 2) +
+                ')'
               );
               rebuildQuickAddLink();
             } else {
@@ -1315,7 +1315,7 @@ RED.view = (function () {
         redraw();
       }
     }
-    
+
     // console.log('[view] Create a lasso.... mouse_mode = ', mouse_mode);
     // console.log('[view] Create a lasso....d3.event.ctrlKey = ', d3.event.ctrlKey);
 
@@ -1988,27 +1988,27 @@ RED.view = (function () {
         }
         return value;
       });
-    
-    
-    if (ignoreEdit){
+
+
+    if (ignoreEdit) {
       // This is used during the hovering over the debug traces
       lastSelection = selectionJSON;
       // console.log('[view] the selection should not be edited');
-    }else{
+    } else {
       if (selectionJSON !== lastSelection) {
         lastSelection = selectionJSON;
         RED.editor.edit(selection);
-      }else{
+      } else {
         // User has clicked on the canvas or link
         // console.log('[view::updateSelection] Selection has not changed. Ignore');
-        
+
         // Just close the sidebar
         RED.editor.resetEditor();
       }
     }
   }
 
-  
+
   function editSelection() {
     // console.log('[view] editSelection invoked')
     if (moving_set.length > 0) {
@@ -2571,9 +2571,9 @@ RED.view = (function () {
       } catch (err) {
         console.log(
           'Definition error: ' +
-            node.type +
-            '.' +
-            (portType === PORT_TYPE_INPUT ? 'inputLabels' : 'outputLabels'),
+          node.type +
+          '.' +
+          (portType === PORT_TYPE_INPUT ? 'inputLabels' : 'outputLabels'),
           err
         );
         result = null;
@@ -2584,7 +2584,7 @@ RED.view = (function () {
     return result;
   }
   function showTooltip(x, y, content, direction) {
-    if (!content){
+    if (!content) {
       return;
     }
 
@@ -2686,7 +2686,7 @@ RED.view = (function () {
       (mouse_mode != RED.state.JOINING &&
         mouse_mode != RED.state.QUICK_JOINING) || // Not currently joining - all ports active
       (drag_lines.length > 0 && // Currently joining
-      drag_lines[0].portType !== portType && // INPUT->OUTPUT OUTPUT->INPUT
+        drag_lines[0].portType !== portType && // INPUT->OUTPUT OUTPUT->INPUT
         (!drag_lines[0].virtualLink || // Not a link wire
           (drag_lines[0].node.type === 'link in' && d.type === 'link out') ||
           (drag_lines[0].node.type === 'link out' && d.type === 'link in')));
@@ -2746,8 +2746,8 @@ RED.view = (function () {
         ? 1
         : 0
       : d.direction == 'in'
-      ? 0
-      : 1;
+        ? 0
+        : 1;
     var wasJoining = false;
     if (
       mouse_mode === RED.state.JOINING ||
@@ -3057,7 +3057,7 @@ RED.view = (function () {
     }
   }
 
-  async function redrawBreakpoint(node){
+  async function redrawBreakpoint(node) {
     let resp = await window.__kumologica.debugger.isBreakpointFound(node.id);
     let breakpointFound = resp.body;
     if (breakpointFound) {
@@ -3073,15 +3073,15 @@ RED.view = (function () {
     let bpids = resp.body;
 
     activeNodes
-    .filter(node => node.z === 'main.flow')
-    .forEach(node => {
-      node.dirty = true;
-      if (bpids.includes(node.id)) {
-        node.status = { fill: "red", shape: "dot" };
-      } else {
-        node.status = {};
-      }
-    });
+      .filter(node => node.z === 'main.flow')
+      .forEach(node => {
+        node.dirty = true;
+        if (bpids.includes(node.id)) {
+          node.status = { fill: "red", shape: "dot" };
+        } else {
+          node.status = {};
+        }
+      });
   }
 
   function redraw(focusActivated) {
@@ -3433,7 +3433,7 @@ RED.view = (function () {
 
           return d.id;
         });
-      
+
       node.exit().remove();
 
       var nodeEnter = node
@@ -3447,7 +3447,7 @@ RED.view = (function () {
           return d.type === 'link in' || d.type === 'link out';
         })
 
-        
+
       nodeEnter.each(function (d, i) {
         var node = d3.select(this);
         var isLink = d.type === 'link in' || d.type === 'link out';
@@ -3594,23 +3594,23 @@ RED.view = (function () {
         let infoTooltipTimeout;
         let infoTooltipHover;
         node
-        .on('mouseover', function(d){
-          infoTooltipTimeout = setTimeout(
-            ()=> {
-              var pos = getElementPosition(node.node());
-              infoTooltipHover = showTooltip(pos[0] + 46, pos[1] + 10, d.info, 'right')
-            }, 200
-          )
-        })
-        .on('mouseout', function (d) {
-          clearTimeout(infoTooltipTimeout);
-          if (infoTooltipHover) {
-            infoTooltipHover.remove();
-            infoTooltipHover = null;
-          }
-          let tooltipEl = d3.select(this);
-          tooltipEl.classed('port_hovered', false);
-        })
+          .on('mouseover', function (d) {
+            infoTooltipTimeout = setTimeout(
+              () => {
+                var pos = getElementPosition(node.node());
+                infoTooltipHover = showTooltip(pos[0] + 46, pos[1] + 10, d.info, 'right')
+              }, 200
+            )
+          })
+          .on('mouseout', function (d) {
+            clearTimeout(infoTooltipTimeout);
+            if (infoTooltipHover) {
+              infoTooltipHover.remove();
+              infoTooltipHover = null;
+            }
+            let tooltipEl = d3.select(this);
+            tooltipEl.classed('port_hovered', false);
+          })
 
 
         var selectionRect = node
@@ -3620,7 +3620,7 @@ RED.view = (function () {
           .attr('height', 100)
           .attr('height', 100)
           .attr('stroke', '#1890ff')
-          .attr('fill', '#e6f7ff') 
+          .attr('fill', '#e6f7ff')
           .attr('stroke-width', 2)
           .attr('opacity', 0.4)
           .attr('rx', 2)
@@ -3855,9 +3855,9 @@ RED.view = (function () {
           {
             title: 'Toggle Breakpoint',
             disabled: d._def.hasOwnProperty('disableToggleBreakpoint'),
-            action: async function(elm, d, i) {
-              let disabledFlagOn =  d._def.hasOwnProperty('disableToggleBreakpoint');
-              if (!disabledFlagOn || (disabledFlagOn && d._def.disableToggleBreakpoint === false)){
+            action: async function (elm, d, i) {
+              let disabledFlagOn = d._def.hasOwnProperty('disableToggleBreakpoint');
+              if (!disabledFlagOn || (disabledFlagOn && d._def.disableToggleBreakpoint === false)) {
                 await window.__kumologica.debugger.toggleBreakpoint(d.id);
                 await redrawBreakpoint(d);
                 redraw();
@@ -3868,13 +3868,13 @@ RED.view = (function () {
           {
             title: 'Cut',
             shortcut: 'Ctrl+X',
-            action: async function(elm, d, i, ctx) {
+            action: async function (elm, d, i, ctx) {
               if (ctx && ctx.nodes) {
                 RED.view.select(ctx.nodes.map(n => n.id));
               } else {
                 RED.view.select(d.id);
               }
-              
+
               copySelection();
               deleteSelection();
             }
@@ -3882,7 +3882,7 @@ RED.view = (function () {
           {
             title: 'Copy',
             shortcut: 'Ctrl+C',
-            action: async function(elm, d, i, ctx) {
+            action: async function (elm, d, i, ctx) {
               if (ctx && ctx.nodes) {
                 RED.view.select(ctx.nodes.map(n => n.id));
               } else {
@@ -3901,7 +3901,7 @@ RED.view = (function () {
           {
             title: 'Delete',
             shortcut: 'Del',
-            action: async function(elm, d, i, ctx) {
+            action: async function (elm, d, i, ctx) {
               if (ctx && ctx.nodes) {
                 RED.view.select(ctx.nodes.map(n => n.id));
               } else {
@@ -3914,20 +3914,20 @@ RED.view = (function () {
           { separator: true },
           {
             title: 'Copy Node ID',
-            action: async function(elm, d, i, ctx) {
-              if (ctx.nodes.length > 1){
+            action: async function (elm, d, i, ctx) {
+              if (ctx.nodes.length > 1) {
                 RED.notify('<strong>Error:</strong> This option requires selecing a single node', 'error');
                 return;
               } else {
                 RED.clipboard.copyText(d.id);
-                RED.notify(`Node ID [ <b>${d.id}</b> ] copied to clipboard`)              
+                RED.notify(`Node ID [ <b>${d.id}</b> ] copied to clipboard`)
               }
             }
           },
           {
             title: 'Settings...',
-            action: async function(elm, d, i, ctx) {
-              if (ctx.nodes.length > 1){
+            action: async function (elm, d, i, ctx) {
+              if (ctx.nodes.length > 1) {
                 RED.notify('<strong>Error:</strong> This options requires selecting a single node', 'error');
                 return;
               } else {
@@ -3940,15 +3940,15 @@ RED.view = (function () {
         // TODO Javier - prototype to support context menu extensions...
         // =============================================================
         // if there is special context menu for the element, attach it
-        if (d._def.hasOwnProperty('oncontextmenu')){
+        if (d._def.hasOwnProperty('oncontextmenu')) {
           let nodeContextMenu = d._def.oncontextmenu.call(this, window) || [];
           menu = [...nodeContextMenu, { separator: true }, ...menu];
         }
 
-       
+
 
         let nodeId = d.id.replace('.', '_');
-        node.on('contextmenu', d3.contextMenu(nodeId, menu, ()=> { 
+        node.on('contextmenu', d3.contextMenu(nodeId, menu, () => {
           console.log('[view] before context menu');
           console.log('[view] selection of nodes:', RED.view.selection());
           zoomZero()
@@ -3982,7 +3982,7 @@ RED.view = (function () {
           .attr('rx', 8)
           .attr('ry', 8)
           .attr('stroke-width', '2');
-        
+
         statusLabel = status
           .append('svg:text')
           .attr('class', 'node_status_label')
@@ -4056,17 +4056,17 @@ RED.view = (function () {
             const MEDIUM_HEIGHT = 100;
             const LARGE_HEIGHT = 110;
 
-            if (numberOfLinesDesc <= 1){
+            if (numberOfLinesDesc <= 1) {
               selectionHeight = SMALL_HEIGHT;
             } else if (numberOfLinesDesc === 2) {
               selectionHeight = MEDIUM_HEIGHT;
             } else {
               selectionHeight = LARGE_HEIGHT;
             }
-            
-            thisNode 
+
+            thisNode
               .selectAll('.selectionRect')
-              .classed('selection_shown', function (d){
+              .classed('selection_shown', function (d) {
                 return d.selected;
               })
               .attr('height', selectionHeight);
@@ -4424,7 +4424,7 @@ RED.view = (function () {
                 return (
                   'M ' +
                   ((!d._def.align && d.inputs !== 0 && d.outputs === 0) ||
-                  'right' === d._def.align
+                    'right' === d._def.align
                     ? 0
                     : 30) +
                   ' 1 l 0 ' +
@@ -4530,7 +4530,7 @@ RED.view = (function () {
             if (d && d.status && d.status.text) {
               if (typeof d.status.text == 'object') {
                 const err = d.status.text;
-                errTxt = err.message || err.error || err.errorMessage || JSON.stringify(d.status.text);       
+                errTxt = err.message || err.error || err.errorMessage || JSON.stringify(d.status.text);
               } else {
                 errTxt = d.status.text;
               }
@@ -4724,21 +4724,21 @@ RED.view = (function () {
             .attr(
               'd',
               'M ' +
-                stemLength +
-                ' 0 ' +
-                'C ' +
-                (stemLength + 1.7 * branchLength) +
-                ' ' +
-                0 +
-                ' ' +
-                (stemLength + 0.1 * branchLength) +
-                ' ' +
-                y +
-                ' ' +
-                (stemLength + branchLength * 1.5) +
-                ' ' +
-                y +
-                ' '
+              stemLength +
+              ' 0 ' +
+              'C ' +
+              (stemLength + 1.7 * branchLength) +
+              ' ' +
+              0 +
+              ' ' +
+              (stemLength + 0.1 * branchLength) +
+              ' ' +
+              y +
+              ' ' +
+              (stemLength + branchLength * 1.5) +
+              ' ' +
+              y +
+              ' '
             );
           linkG
             .append('svg:path')
@@ -4746,26 +4746,26 @@ RED.view = (function () {
             .attr(
               'd',
               'M ' +
-                (stemLength + branchLength * 1.5 + s * (linkWidth + 7)) +
-                ' ' +
-                (y - 12) +
-                ' ' +
-                'h ' +
-                -s * linkWidth +
-                ' ' +
-                'a 3 3 45 0 ' +
-                (s === 1 ? '0' : '1') +
-                ' ' +
-                s * -3 +
-                ' 3 ' +
-                'v 18 ' +
-                'a 3 3 45 0 ' +
-                (s === 1 ? '0' : '1') +
-                ' ' +
-                s * 3 +
-                ' 3 ' +
-                'h ' +
-                s * linkWidth
+              (stemLength + branchLength * 1.5 + s * (linkWidth + 7)) +
+              ' ' +
+              (y - 12) +
+              ' ' +
+              'h ' +
+              -s * linkWidth +
+              ' ' +
+              'a 3 3 45 0 ' +
+              (s === 1 ? '0' : '1') +
+              ' ' +
+              s * -3 +
+              ' 3 ' +
+              'v 18 ' +
+              'a 3 3 45 0 ' +
+              (s === 1 ? '0' : '1') +
+              ' ' +
+              s * 3 +
+              ' 3 ' +
+              'h ' +
+              s * linkWidth
             );
           linkG
             .append('svg:path')
@@ -4773,20 +4773,20 @@ RED.view = (function () {
             .attr(
               'd',
               'M ' +
-                (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
-                ' ' +
-                (y - 12) +
-                ' ' +
-                'h ' +
-                s * (linkWidth * 3) +
-                ' ' +
-                'M ' +
-                (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
-                ' ' +
-                (y + 12) +
-                ' ' +
-                'h ' +
-                s * (linkWidth * 3)
+              (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
+              ' ' +
+              (y - 12) +
+              ' ' +
+              'h ' +
+              s * (linkWidth * 3) +
+              ' ' +
+              'M ' +
+              (stemLength + branchLength * 1.5 + s * (linkWidth + 10)) +
+              ' ' +
+              (y + 12) +
+              ' ' +
+              'h ' +
+              s * (linkWidth * 3)
             )
             .style('stroke-dasharray', '12 3 8 4 3');
           linkG
@@ -4885,11 +4885,11 @@ RED.view = (function () {
     }
   }
 
-  function filterWorkspaces(newNodesStr){
+  function filterWorkspaces(newNodesStr) {
     try {
       let newNodes = JSON.parse(newNodesStr);
-      if (newNodes && Array.isArray(newNodes)){
-        return newNodes.filter( e => (e.hasOwnProperty('type') && (e.type !== 'tab')) );
+      if (newNodes && Array.isArray(newNodes)) {
+        return newNodes.filter(e => (e.hasOwnProperty('type') && (e.type !== 'tab')));
       } else {
         return newNodes;
       }
@@ -4907,7 +4907,6 @@ RED.view = (function () {
    *  - attached to mouse for placing - "IMPORT_DRAGGING"
    */
   function importNodes(newNodesStr, addNewFlow, touchImport) {
-    // Kumologica only has two flows: main and test, so never create a new flow
     addNewFlow = false;
     try {
       // Strip the newNodesStr from workspaces elements
@@ -5171,7 +5170,7 @@ RED.view = (function () {
 
   function applyLayout() {
     const NODE_SIZE = 45;
-    let ns = []; 
+    let ns = [];
 
     const dagre = window.__kumologica.libs.dagre;
     // Get all active nodes
@@ -5181,14 +5180,14 @@ RED.view = (function () {
     let g = new dagre.graphlib.Graph();
 
     // Set an object for the graph label
-    g.setGraph({rankdir: "LR", nodesep: 50, marginx: 50, marginy: 50 });
+    g.setGraph({ rankdir: "LR", nodesep: 50, marginx: 50, marginy: 50 });
 
     // Default to assigning a new object as a label for each new edge.
-    g.setDefaultEdgeLabel(function() { return {}; });
+    g.setDefaultEdgeLabel(function () { return {}; });
 
     // Create nodes for the graph
     nodes.forEach(n => {
-      g.setNode(n.id, {label: n.name, width: NODE_SIZE, height: NODE_SIZE })
+      g.setNode(n.id, { label: n.name, width: NODE_SIZE, height: NODE_SIZE })
     });
 
     // Create the edges
@@ -5200,7 +5199,7 @@ RED.view = (function () {
     dagre.layout(g);
 
     // Apply the coordinates
-    g.nodes().forEach(nid=> {
+    g.nodes().forEach(nid => {
       if (nid) {
         let node = nodes.find(n => n.id === nid);
         if (node) {
@@ -5251,7 +5250,7 @@ RED.view = (function () {
             if (node._def.category !== 'config' && node.z) {
               node.dirty = true;
               RED.workspaces.show(node.z);
-    
+
               var screenSize = [
                 chart.width() / scaleFactor,
                 chart.height() / scaleFactor,
@@ -5260,7 +5259,7 @@ RED.view = (function () {
                 chart.scrollLeft() / scaleFactor,
                 chart.scrollTop() / scaleFactor,
               ];
-    
+
               if (
                 node.x < scrollPos[0] ||
                 node.y < scrollPos[1] ||
@@ -5281,7 +5280,7 @@ RED.view = (function () {
               }
             }
           }
-            // ----
+          // ----
 
           if (selectedNode) {
             selectedNode.selected = true;
@@ -5291,21 +5290,21 @@ RED.view = (function () {
         }
         if (Array.isArray(selection)) {
           console.log('[view] selection pre=', selection);
-          let selectionNodes = 
-            (selection.length === 0)? 
-               RED.nodes.filterNodes({ z: 'main.flow'}): RED.nodes.filterNodes({ id: selection });
+          let selectionNodes =
+            (selection.length === 0) ?
+              RED.nodes.filterNodes({ z: 'main.flow' }) : RED.nodes.filterNodes({ id: selection });
 
           console.log('[view] selection nodes=', selectionNodes);
-          if (selectionNodes && Array.isArray(selectionNodes)){
+          if (selectionNodes && Array.isArray(selectionNodes)) {
             moving_set = [];
             selectionNodes.forEach(sn => {
               sn.selected = true;
               sn.dirty = true;
-              moving_set.push({n: sn})
+              moving_set.push({ n: sn })
             })
           }
-          
-          
+
+
         }
       } else {
         clearSelection();
@@ -5382,7 +5381,7 @@ RED.view = (function () {
               200
             );
           }
-   
+
           if (!node._flashing) {
             node._flashing = true;
             var flash = 22;
@@ -5416,10 +5415,10 @@ RED.view = (function () {
     getActiveNodes: function () {
       return activeNodes;
     },
-    getActiveLinks: function() {
+    getActiveLinks: function () {
       return activeLinks;
     },
     showTooltip: showTooltip,
-    applyLayout:applyLayout
+    applyLayout: applyLayout
   };
 })();