@kumologica/sdk 3.0.0

package/src/app/ui/editor-client/src/js/ui/tab-info.js

@@ -0,0 +1,661 @@
+RED.sidebar.info = (function () {
+  /**
+   * Controlling the editor for the description field
+   */
+  class MarkdownEditor {
+    constructor(markdownEditorLib, node) {
+      this.editor = new markdownEditorLib({
+        element: $('#tab-info-md-editor')[0],
+        toolbar: [
+          'bold',
+          'italic',
+          'heading-bigger',
+          'heading-smaller',
+          '|',
+          'unordered-list',
+          'link',
+          '|',
+          'preview',
+        ],
+        status: false,
+        spellchecker: false,
+        placeholder: 'Type here to document your flow ...',
+      });
+      this.description = node.info || '';
+      this.initialized = false;
+      this.setValue(this.description);
+      this.saveButtonMarkup = `
+        <div id="saveDescriptionButton" style="display:flex; justify-content: flex-end; padding-top: 10px">
+            <a href="#" class="editor-button editor-button-small red-ui-editableList-addButton">
+                <i class="fa fa-save"></i> Save
+            </a>
+        </div>
+        `;
+      // $(this.saveButtonMarkup).appendTo(infoSection.content);
+
+      this.editButtonMarkup = `
+      <div id="editDescriptionButton" style="display:flex; justify-content: flex-end; padding-top: 10px">
+          <a href="#" class="editor-button editor-button-small red-ui-editableList-addButton">
+              <i class="fa fa-pencil"></i> Edit
+          </a>
+      </div>
+      `;
+
+      // $(this.editButtonMarkup).appendTo(infoSection.content);
+      $('#saveDescriptionButton').click((e) => {
+        e.preventDefault();
+        this.setPreviewMode();
+        node.info = this.editor.value();
+        RED.events.emit('nodes:change:save-immediate');
+      });
+
+      $('#editDescriptionButton').click((e) => {
+        e.preventDefault();
+        this.setEditorMode();
+      });
+
+      this.setPreviewMode();
+    }
+
+    setValue(newDescription) {
+      this.description = newDescription;
+      this.editor.value(this.description);
+    }
+    isPreviewMode() {
+      return !this.editorMode || !this.initialized;
+    }
+
+    isEditorMode() {
+      return this.editorMode || !this.initialized;
+    }
+
+    setPreviewMode() {
+      if (this.isEditorMode()) {
+        this.editor.togglePreview();
+        $('.editor-preview').addClass('editor-preview-active');
+        $('.editor-toolbar').hide();
+        $('#saveDescriptionButton').hide();
+        $('#editDescriptionButton').show();
+        this.editorMode = false;
+        this.initialized = true;
+      }
+    }
+    setEditorMode() {
+      // set it to edit mode, and it is in preview
+      if (this.isPreviewMode()) {
+        this.editor.togglePreview();
+        $('.editor-preview').removeClass('editor-preview-active');
+        $('.editor-toolbar').show();
+        $('#saveDescriptionButton').show();
+        $('#editDescriptionButton').hide();
+
+        this.editorMode = true;
+        this.initialized = true;
+
+        // place a save button
+      }
+    }
+  }
+
+  marked.setOptions({
+    renderer: new marked.Renderer(),
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: true,
+    smartLists: true,
+    smartypants: false,
+  });
+
+  var content;
+  var sections;
+  var propertiesSection;
+  var infoSection;
+  var helpSection;
+  var tipBox;
+
+  var expandedSections = {
+    property: true,
+  };
+
+  function init() {
+    content = document.createElement('div');
+    content.className = 'sidebar-node-info';
+
+    RED.actions.add('core:show-info-tab', show);
+
+    var stackContainer = $('<div>', {
+      class: 'sidebar-node-info-stack',
+    }).appendTo(content);
+
+    sections = RED.stack
+      .create({
+        container: stackContainer,
+      })
+      .hide();
+
+    propertiesSection = sections.add({
+      title: 'Properties',
+      collapsible: true,
+    });
+    propertiesSection.expand();
+
+    helpSection = sections.add({
+      title: 'Help',
+      collapsible: true,
+    });
+    helpSection.expand();
+    helpSection.content.css('padding', '6px');
+  }
+
+  function onchange(){
+    RED.actions.invoke('core:show-sidebar');
+  }
+
+  function onsame(){
+      RED.actions.invoke('core:hide-sidebar');
+  }
+
+
+  function show() {
+    RED.sidebar.show('info');
+  }
+
+  // TODO: DRY - projects.js
+  function addTargetToExternalLinks(el) {
+    $(el)
+      .find('a')
+      .each(function (el) {
+        var href = $(this).attr('href');
+        if (/^https?:/.test(href)) {
+          $(this).attr('target', '_blank');
+        }
+      });
+    return el;
+  }
+  function refresh(node) {
+    if (node === undefined) {
+      refreshSelection();
+      return;
+    }
+    sections.show();
+    $(propertiesSection.content).empty();
+    // $(infoSection.content).empty();
+    $(helpSection.content).empty();
+
+    var propRow;
+
+    var table = $('<table class="node-info"></table>').appendTo(
+      propertiesSection.content
+    );
+    var tableBody = $('<tbody>').appendTo(table);
+
+    var subflowNode;
+    var subflowUserCount;
+
+    var activeProject = RED.projects.getActiveProject();
+  
+    propertiesSection.container.show();
+    // infoSection.container.show();
+    helpSection.container.show();
+    if (node === null) {
+      return;
+    } else if (Array.isArray(node)) {
+      // Multiple things selected
+      // - hide help and info sections
+
+      var types = {
+        nodes: 0,
+        flows: 0,
+        subflows: 0,
+      };
+      node.forEach(function (n) {
+        if (n.type === 'tab') {
+          types.flows++;
+          types.nodes += RED.nodes.filterNodes({ z: n.id }).length;
+        } else if (n.type === 'subflow') {
+          types.subflows++;
+        } else {
+          types.nodes++;
+        }
+      });
+      helpSection.container.hide();
+      // infoSection.container.hide();
+      // - show the count of selected nodes
+      propRow = $(
+        '<tr class="node-info-node-row"><td>' +
+          'Selection' +
+          '</td><td></td></tr>'
+      ).appendTo(tableBody);
+
+      var counts = $('<div>').appendTo($(propRow.children()[1]));
+      if (types.flows > 0) {
+        $('<div>')
+          .text('Flows')
+          .appendTo(counts);
+      }
+      if (types.subflows > 0) {
+        $('<div>')
+          .text('Subflows')
+          .appendTo(counts);
+      }
+      if (types.nodes > 0) {
+        $('<div>')
+          .text('Node')
+          .appendTo(counts);
+      }
+    } else {
+      // A single 'thing' selected.
+
+      // Check to see if this is a subflow or subflow instance
+      var m = /^subflow(:(.+))?$/.exec(node.type);
+      if (m) {
+        if (m[2]) {
+          subflowNode = RED.nodes.subflow(m[2]);
+        } else {
+          subflowNode = node;
+        }
+
+        subflowUserCount = 0;
+        var subflowType = 'subflow:' + subflowNode.id;
+        RED.nodes.eachNode(function (n) {
+          if (n.type === subflowType) {
+            subflowUserCount++;
+          }
+        });
+      }
+      if (node.type === 'tab' || node.type === 'subflow') {
+        // If nothing is selected, but we're on a flow or subflow tab.
+
+        // ID
+        propRow = $(
+          `<tr class="node-info-node-row">
+            <td>Id</td>
+            <td></td>
+          </tr>`
+        ).appendTo(tableBody);
+        $(propRow.children()[1]).text(node.id);
+
+        // Type
+        let labelType = node.type === 'tab' ? 'Flow' : 'Subflow';
+        propRow = $(
+          `<tr class="node-info-node-row">
+            <td>Type</td>
+            <td>${labelType}</td>
+          </tr>`
+        ).appendTo(tableBody);
+
+        //RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
+        propRow = $(
+          '<tr class="node-info-node-row"><td>Workspace</td><td></td></tr>'
+        ).appendTo(tableBody);
+        $(propRow.children()[1]).text(node.label || node.name || '');
+        // if Node type is a tab
+        if (node.type === 'tab') {
+          propRow = $(
+            '<tr class="node-info-node-row"><td>Status</td><td></td></tr>'
+          ).appendTo(tableBody);
+          $(propRow.children()[1]).text(
+            !!!node.disabled
+              ? 'Enabled'
+              : 'Disabled'
+          );
+        }
+      } else {
+        // An actual node is selected in the editor - build up its properties table
+        // ID
+        propRow = $(
+          `<tr class="node-info-node-row">
+            <td>Id</td>
+            <td></td>
+          </tr>`
+        ).appendTo(tableBody);
+        $(propRow.children()[1]).text(node.id);
+
+        if (!m) {
+          // Type
+          propRow = $(
+            '<tr class="node-info-node-row"><td>' +
+              'Type' +
+              '</td><td></td></tr>'
+          ).appendTo(tableBody);
+          $(propRow.children()[1]).text(
+            node.type === 'unknown' ? node._orig.type : node.type
+          );
+          if (node.type === 'unknown') {
+            $(
+              '<span style="float: right; font-size: 0.8em"><i class="fa fa-warning"></i></span>'
+            ).prependTo($(propRow.children()[1]));
+          }
+        }
+
+        if (node.type !== 'subflow' && node.type !== 'unknown' && node.name) {
+          // Name
+          propRow = $(
+            '<tr class="node-info-node-row"><td>' +
+              'Name' +
+              '</td><td></td></tr>'
+          ).appendTo(tableBody);
+          $(
+            '<span class="bidiAware" dir="' +
+              RED.text.bidi.resolveBaseTextDir(node.name) +
+              '"></span>'
+          )
+            .text(node.name)
+            .appendTo(propRow.children()[1]);
+        }
+
+        var count = 0;
+        if (!m && node.type != 'subflow') {
+          var defaults;
+          if (node.type === 'unknown') {
+            defaults = {};
+            Object.keys(node._orig).forEach(function (k) {
+              if (k !== 'type') {
+                defaults[k] = {};
+              }
+            });
+          } else if (node._def) {
+            defaults = node._def.defaults;
+            propRow = $(
+              '<tr class="node-info-property-row' +
+                (expandedSections.property ? '' : ' hide') +
+                '"><td>' +
+                'Module' +
+                '</td><td></td></tr>'
+            ).appendTo(tableBody);
+            $(propRow.children()[1]).text(
+              // hide the fact is coming from kumologica-core, it may be confusing for users
+              // RED.nodes.getType(node.type).set.module
+              'core'
+            );
+            count++;
+          }
+          // $(
+          //   '<tr class="node-info-property-expand node-info-property-row blank' +
+          //     (expandedSections.property ? '' : ' hide') +
+          //     '"><td colspan="2"></td></tr>'
+          // ).appendTo(tableBody);
+
+          if (defaults) {
+            for (var n in defaults) {
+              if (n != 'name' && n != 'info' && defaults.hasOwnProperty(n)) {
+                var val = node[n];
+                var type = typeof val;
+                count++;
+                propRow = $(
+                  '<tr class="node-info-property-row' +
+                    (expandedSections.property ? '' : ' hide') +
+                    '"><td>' +
+                    n +
+                    '</td><td></td></tr>'
+                ).appendTo(tableBody);
+                if (defaults[n].type) {
+                  var configNode = RED.nodes.node(val);
+                  if (!configNode) {
+                    RED.utils
+                      .createObjectElement(undefined)
+                      .appendTo(propRow.children()[1]);
+                  } else {
+                    var configLabel = RED.utils.getNodeLabel(configNode, val);
+                    var container = propRow.children()[1];
+
+                    var div = $('<span>', { class: '' }).appendTo(container);
+                    var nodeDiv = $('<div>', {
+                      class: 'palette_node palette_node_small',
+                    }).appendTo(div);
+                    var colour = RED.utils.getNodeColor(
+                      configNode.type,
+                      configNode._def
+                    );
+                    var icon_url = RED.utils.getNodeIcon(configNode._def);
+                    nodeDiv.css({ backgroundColor: colour, cursor: 'pointer' });
+                    var iconContainer = $('<div/>', {
+                      class: 'palette_icon_container',
+                    }).appendTo(nodeDiv);
+                    $('<div/>', {
+                      class: 'palette_icon',
+                      style: 'background-image: url(' + icon_url + ')',
+                    }).appendTo(iconContainer);
+                    var nodeContainer = $('<span></span>')
+                      .css({ verticalAlign: 'top', marginLeft: '6px' })
+                      .text(configLabel)
+                      .appendTo(container);
+
+                    nodeDiv.on('dblclick', function () {
+                      RED.editor.editConfig('', configNode.type, configNode.id);
+                    });
+                  }
+                } else {
+                  RED.utils
+                    .createObjectElement(val)
+                    .appendTo(propRow.children()[1]);
+                }
+              }
+            }
+          }
+          if (count > 0) {
+            $(
+              '<tr class="node-info-property-expand blank"><td colspan="2"><a href="#" class=" node-info-property-header' +
+                (expandedSections.property ? ' expanded' : '') +
+                '"><span class="node-info-property-show-more">' +
+                'Show more' +
+                '</span><span class="node-info-property-show-less">' +
+                'Show less' +
+                '</span> <i class="fa fa-caret-down"></i></a></td></tr>'
+            ).appendTo(tableBody);
+          }
+        }
+        if (node.type !== 'tab') {
+          if (m) {
+            $(
+              '<tr class="blank"><th colspan="2">' +
+                'Subflow' +
+                '</th></tr>'
+            ).appendTo(tableBody);
+            $(
+              '<tr class="node-info-subflow-row"><td>' +
+                'Name' +
+                '</td><td><span class="bidiAware" dir="' +
+                RED.text.bidi.resolveBaseTextDir(subflowNode.name) +
+                '">' +
+                RED.utils.sanitize(subflowNode.name) +
+                '</span></td></tr>'
+            ).appendTo(tableBody);
+          }
+        }
+      }
+      if (m) {
+        propRow = $(
+          '<tr class="node-info-node-row"><td>' +
+            'Category' +
+            '</td><td></td></tr>'
+        ).appendTo(tableBody);
+        var category = subflowNode.category || 'subflows';
+        $(propRow.children()[1]).text('Category');
+        $(
+          '<tr class="node-info-subflow-row"><td>' +
+            'Instances' +
+            '</td><td>' +
+            subflowUserCount +
+            '</td></tr>'
+        ).appendTo(tableBody);
+      }
+
+      var helpText = '';
+      if (node.type === 'tab' || node.type === 'subflow') {
+        $(helpSection.container).hide();
+      } else {
+        $(helpSection.container).show();
+        if (subflowNode && node.type !== 'subflow') {
+          // Selected a subflow instance node.
+          // - The subflow template info goes into help
+          helpText =
+            marked(subflowNode.info || '') ||
+            '<span class="node-info-none">' +
+              'None' +
+              '</span>';
+        } else {
+          helpText =
+            $("script[data-help-name='" + node.type + "']").html() ||
+            '<span class="node-info-none">' +
+              'None' +
+              '</span>';
+
+          // We will detect if markdown is used if text starts with `#`
+          if (helpText && helpText.trim().startsWith('#')) {
+            helpText = marked(helpText);
+          } else {
+            // console.log(
+            //   `falling back to html because helpText="${helpText.trim()}"`
+            // );
+          }
+        }
+        setInfoText(helpText, helpSection.content);
+      }
+
+      var infoText = '';
+
+      if (node._def && node._def.info) {
+        var info = node._def.info;
+        var textInfo = typeof info === 'function' ? info.call(node) : info;
+        infoText = infoText + marked(textInfo);
+      }
+      if (node.info) {
+        //infoText = infoText + marked(node.info || '');
+        //console.log(`tab-info - infoText = ${infoText}`);
+        // $(`<textarea id="tab-info-md-editor"></textarea>`).appendTo(
+        //   infoSection.content
+        // );
+
+        
+        // var markdownEditor = new MarkdownEditor(
+        //   window.__kumologica.editor.MarkdownEditor,
+        //   node
+        // );
+
+        $('body').on('click', '.editor-preview a', (event) => {
+          event.stopImmediatePropagation();
+          event.preventDefault();
+          let link = event.target.href;
+          window.__kumologica.electron.shell.openExternal(link);
+        });
+      }
+      //setInfoText(infoText, infoSection.content);
+
+      $('.sidebar-node-info-stack').scrollTop(0);
+      // Get into edition mode when i get a click on the text area
+      $('.node-info-property-header').click(function (e) {
+        e.preventDefault();
+        expandedSections['property'] = !expandedSections['property'];
+        $(this).toggleClass('expanded', expandedSections['property']);
+        $('.node-info-property-row').toggle(expandedSections['property']);
+      });
+    }
+
+    // $('<tr class="blank"><th colspan="2"></th></tr>').appendTo(tableBody);
+    // propRow = $('<tr class="node-info-node-row"><td>Actions</td><td></td></tr>').appendTo(tableBody);
+    // var actionBar = $(propRow.children()[1]);
+    //
+    // // var actionBar = $('<div>',{style:"background: #fefefe; padding: 3px;"}).appendTo(propertiesSection.content);
+    // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+    // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+    // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+    // $('<button type="button" class="editor-button"><i class="fa fa-code"></i></button>').appendTo(actionBar);
+  }
+
+  function setInfoText(infoText, target) {
+    var info = addTargetToExternalLinks(
+      $(
+        '<div class="node-help"><span class="bidiAware" dir="' +
+          RED.text.bidi.resolveBaseTextDir(infoText) +
+          '">' +
+          infoText +
+          '</span></div>'
+      )
+    ).appendTo(target);
+    info
+      .find('.bidiAware')
+      .contents()
+      .filter(function () {
+        return this.nodeType === 3 && this.textContent.trim() !== '';
+      })
+      .wrap('<span></span>');
+    var foldingHeader = 'H3';
+    info
+      .find(foldingHeader)
+      .wrapInner('<a class="node-info-header expanded" href="#"></a>')
+      .find('a')
+      .prepend('<i class="fa fa-angle-right">')
+      .click(function (e) {
+        e.preventDefault();
+        var isExpanded = $(this).hasClass('expanded');
+        var el = $(this).parent().next();
+        while (el.length === 1 && el[0].nodeName !== foldingHeader) {
+          el.toggle(!isExpanded);
+          el = el.next();
+        }
+        $(this).toggleClass('expanded', !isExpanded);
+      });
+  }
+
+
+  function clear() {
+    // sections.hide();
+    refresh(null);
+  }
+
+  function set(html, title) {
+    refresh(null);
+    propertiesSection.container.hide();
+    helpSection.container.hide();
+    $('.sidebar-node-info-stack').scrollTop(0);
+  }
+
+  function refreshSelection(selection) {
+    console.log(`[tab-info] RefreshSelection: `, selection);
+    if (selection === undefined) {
+      selection = RED.view.selection();
+    }
+    if (selection.nodes) {
+      if (selection.nodes.length == 1) {
+        var node = selection.nodes[0];
+        if (node.type === 'subflow' && node.direction) {
+          refresh(RED.nodes.subflow(node.z));
+        } else {
+          refresh(node);
+        }
+      } else {
+        refresh(selection.nodes);
+      }
+    } else if (selection.flows || selection.subflows) {
+      refresh(selection.flows);
+    } else {
+      var activeWS = RED.workspaces.active();
+
+      var flow = RED.nodes.workspace(activeWS) || RED.nodes.subflow(activeWS);
+      if (flow) {
+        refresh(flow);
+      } else {
+        var workspace = RED.nodes.workspace(RED.workspaces.active());
+        if (workspace && workspace.info) {
+          refresh(workspace);
+        } else {
+          refresh(null);
+          // clear();
+        }
+      }
+    }
+  }
+
+  RED.events.on('view:selection-changed', refreshSelection);
+
+  return {
+    init: init,
+    show: show,
+    refresh: refresh,
+    clear: clear,
+    set: set,
+  };
+})();