@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

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

@@ -1,661 +0,0 @@
-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,
-  };
-})();