@kumologica/sdk 3.3.0-beta8 → 3.4.0-beta2

package/src/app/ui/editor-client/public/vendor/vendor.css

@@ -47,6 +47,9 @@ ul.jqtree-tree {
 
     ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left {
             margin-right: 0.5em;
+            margin-left: 1em;
+            color: grey;
+            font-size: smaller;
         }
 
     ul.jqtree-tree .jqtree-toggler.jqtree-toggler-right {
@@ -68,10 +71,27 @@ ul.jqtree-tree {
     ul.jqtree-tree .jqtree-title-button-left {
         margin-left: 1.5em;
     }
-
+    .jqtree-title-emptyfolder {
+        width: 100%;
+        margin-left: 2.5em !important;
+        color: #605d5d !important;
+        text-transform: uppercase;
+        font-weight: bold;
+        letter-spacing: 0.02em;
+        font-size: smaller;
+        overflow: hidden;
+        user-select: none;
+    }
     ul.jqtree-tree .jqtree-title-button-left.jqtree-title-folder {
         width: 100%;
         margin-left: 0;
+        color: #605d5d;
+        text-transform: uppercase;
+        font-weight: bold;
+        letter-spacing: 0.02em;
+        font-size: smaller;
+        overflow: hidden;
+        user-select: none;
     }
 
     ul.jqtree-tree li.jqtree-folder {

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

@@ -625,7 +625,7 @@ var RED = (function () {
     RED.library.init();
     RED.keyboard.init();
     RED.palette.init();
-    RED.palette.navigator.init();
+    RED.palette.explorer.init();
     RED.palette.nodes.init();
     RED.eventLog.init();
     if (RED.settings.theme('palette.editable') !== false) {

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

@@ -74,9 +74,15 @@
                 },
                 close: function(e) {
                     if (popover) {
+                        console.log(popover);
                         popover.close(true);
                         currentPopoverError = null;
                     }
+                    // Otherwise for some fucking reason the screen gets moved to the top...
+                    $('#main-container').hide();
+                    window.setTimeout(()=> { 
+                        $('#main-container').show() 
+                    }, 10);
                 }
             });
 
@@ -218,6 +224,8 @@
         if (disabled) {
             return;
         }
+        RED.actions.invoke('core:search:close');
+
         dialogContainer.empty();
         dialogContainer.append($(importNodesDialog));
         dialogContainer.i18n();

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

@@ -125,65 +125,27 @@ RED.header = (function () {
     initImportExport();
     initShelvesFromHeader();
     initSettingsButtonFromHeader();
-    initSearchBtn();
     initDeployBtn();
     initProjectIndicator();
   }
 
   function initProjectIndicator() {
     $('#projectIndicator').click((e) => {
-      e.preventDefault();
-      if ($('#red-ui-project-info').is(':visible')) {
-        RED.actions.invoke('core:project-info:close');
-      } else {
-        RED.actions.invoke('core:project-info');
-      }
-    });
-    $('#projectInfoExpand').click((e) => {
-      e.preventDefault();
-      if ($('#red-ui-project-info').is(':visible')) {
-        RED.actions.invoke('core:project-info:close');
-      } else {
-        RED.actions.invoke('core:project-info');
-      }
-    });
-    $('#projectIndicator').hover(
-      () => {
-        $('#projectInfoExpand').css('color', '#999');
-      },
-      () => {
-        $('#projectInfoExpand').css('color', '#ecebeb');
-      }
-    );
-    $('#projectInfoExpand').hover(
-      () => {
-        $('#projectInfoExpand').css('color', '#999');
-      },
-      () => {
-        $('#projectInfoExpand').css('color', '#ecebeb');
-      }
-    );
-  }
-
-  function initSearchBtn() {
-    $('#btn-search').click((e) => {
       e.preventDefault();
       if ($('#red-ui-search').is(':visible')) {
-        console.log('[header] closing search panel')
         RED.actions.invoke('core:search:close');
       } else {
-        console.log('[header] opening search panel')
         RED.actions.invoke('core:search');
       }
     });
   }
 
-
   function initDeployBtn() {
     RED.actions.add('core:deploy', deployFlow);
 
     $('#btn-deploy').click((e) => {
-     RED.actions.invoke('core:deploy');
+      e.stopPropagation();
+      RED.actions.invoke('core:deploy');
     });
 
     // RED.popover.tooltip($('#btn-deploy'), 'Save & Deploy');

package/src/app/ui/editor-client/src/js/ui/palette-explorer.js

@@ -0,0 +1,328 @@
+RED.palette.explorer = (function () {
+  let workspacePreferences = window.__kumologica.settings.workspacePreferenceStore;
+  let path = window.__kumologica.libs.path;
+
+  const openProject = (projectLocation) => {
+    window.__kumologica.main.dispatch('modal-home:open-project-in-editor', { 
+      payload: { 
+        projectLocation 
+      } 
+    });
+  }
+  
+  const initCurrentProject = () => {
+     // Add Tab button
+     let addTabBtn = `<div id="createTab" class="header-btn2"><i class="icofont-plus"></i></div>`;
+     $(addTabBtn).appendTo($('#exp-open-project-createTab'));
+     RED.popover.tooltip($('#exp-open-project-createTab'), 'Create Tab...');
+
+     $('#createTab').on('click', event => {
+       event.stopPropagation();
+       window.__kumologica.main.dispatch('navigator:open-new-tab-dialog', null);
+     })
+ 
+     // Initialize the palette explorer with folder only
+     let data = [
+       {   id: '__root__',
+           name: 'OPEN PROJECT',
+           children: []
+       }
+     ];
+ 
+     try{
+       $('#exp-open-project').tree({
+         data:data,
+         autoOpen: true,
+         selectable: true,
+         onCanSelectNode: function(node) {
+           if (node.id === '__root__'){
+             $('#exp-open-project').tree('toggle', node);
+             return false;
+           } else { 
+             return true;
+           }
+           
+         },
+         usecontextmenu: true,
+         closedIcon: $('<i class="icofont-rounded-right"></i>'),
+         openedIcon: $('<i class="icofont-rounded-down"></i>'),
+         onCreateLi: function(node, $li) { }
+       });
+ 
+       // Add the context menu
+       $('#exp-open-project').jqTreeContextMenu({
+         menu: '#palette-explorer-context-menu',
+         onContextMenuItem: function(e, node, $el){
+           let operation = $el.data("item");
+           switch(operation) {
+             case "open": 
+               RED.workspaces.showSafe(node.id);
+               break;
+             case "delete": {
+               RED.actions.invoke('core:deploy');
+               RED.workspaces.remove(node.id);
+               RED.actions.invoke('core:deploy'); // save it so we can persist the tab straight away.
+               refresh();
+               break;
+             }
+             default: {}
+           }
+           
+         }
+       });
+     }catch(err) {
+       // HACK: case where a modal is using this module, which it has no biz on tree
+     }
+ 
+     let ipcRenderer = window.__kumologica.electron.ipcRenderer;
+     ipcRenderer.on('create-new-tab', (event, payload)=> {
+       let tabName = payload.tabName;
+       if (tabName){
+         createTabFn(tabName.toLowerCase());
+       }
+       
+     });
+ 
+     // On select tab option
+     $('#exp-open-project').on(
+       'tree.select',
+       function(event) {
+           event.stopImmediatePropagation();
+           if (event.node) {
+               // console.log(`[palette-navigator] Select Tab=(${event.node.id})`);
+               // node was selected
+               var node = event.node;
+               if (node.id){
+                 RED.workspaces.showSafe(node.id);
+               }
+           }
+           else {
+             var prevNode = event.previous_node
+             if (prevNode.id){
+               RED.workspaces.showSafe(prevNode.id);
+               selectTab(prevNode.id);
+             }
+           }
+       }
+     );
+    
+     refresh();
+  }
+
+  const initWorkspaceProjects = () => {
+    // Add Tab button
+    let addProjectToWorkspaceBtn = `<div id="addProjectToWorkspace" class="header-btn2"><i class="icofont-plus"></i></div>`;
+    $(addProjectToWorkspaceBtn).appendTo($('#exp-workspace-addFolder'));
+    RED.popover.tooltip($('#exp-workspace-addFolder'), 'Add Project to Workspace...');
+    
+    // Add action to the add button
+    $('#addProjectToWorkspace').click((event) => {
+      console.log('[palette-explorer] addProjectToWorkspaceBtn clicked');
+
+      let currentWindow = window.__kumologica.electron.remote.getCurrentWindow()
+      let dialog = window.__kumologica.electron.remote.dialog;
+      let options = {
+        title: 'Select Projects to add to Workspace...',
+        properties: ['openDirectory', 'multiSelections'],
+      };
+      dialog.showOpenDialog(currentWindow, options).then((result) => {
+        if (!result.canceled){
+          let projects = result.filePaths;
+          console.log('[palette-explorer] projects=', projects);
+          projects.forEach(project => {
+            let valid = window.__kumologica.libs.findKumologicaFlowInDir(project); 
+            if (valid) {
+              workspacePreferences.addProjectToWorkspace(project);
+            } else {
+              RED.notifications.notify(`<b>Invalid Kumologica project directory:</b> ${project}`, 'error', undefined, 3000);
+            }
+          });
+          refreshWorkspaceProjects();
+        }
+        console.log('[palette-explorer] result=', result);
+      });
+    });
+
+     // Initialize the projects in workspace
+     let data = [
+      {   id: '__root__',
+          name: 'WORKSPACE PROJECTS',
+          children: []
+      }
+    ];
+
+    try{
+      $('#exp-workspace').tree({
+        data:data,
+        autoOpen: true,
+        selectable: true,
+        onCanSelectNode: function(node) {
+          if (node.id === '__root__'){
+            $('#exp-workspace').tree('toggle', node);
+            return false;
+          } else { 
+            const el = $(node.element);
+            const selectionRequired = !el.hasClass('jqtree-selected');
+            // Deselect all nodes
+            $('#exp-workspace').find('.jqtree-selected').removeClass('jqtree-selected');
+
+            if (selectionRequired) {
+              el.addClass('jqtree-selected');
+            }
+            
+            return false;
+          }
+          
+        },
+        usecontextmenu: true,
+        closedIcon: $('<i class="icofont-rounded-right"></i>'),
+        openedIcon: $('<i class="icofont-rounded-down"></i>'),
+        onCreateLi: function(node, $li) {
+          if (node.id !== '__root__'){
+            RED.popover.tooltip(
+              $li.find('.jqtree-title'),
+              node.path
+            );
+            $li.find('.jqtree-title').before('<span class="icon" style="position: relative; left: 14px; font-size: 13px; color: #8b3ff8"><i class="fa fa-folder"></i></span>');
+          }
+        }
+      });
+
+      // Add the context menu
+      $('#exp-workspace').jqTreeContextMenu({
+        menu: '#palette-workspace-context-menu',
+        onContextMenuItem: function(e, node, $el){
+          
+          let operation = $el.data("item");
+          let projectLocation = node.path;
+
+          switch(operation) {
+            case "open": 
+              openProject(projectLocation);
+              break;
+            case "openLocation":
+              window.__kumologica.libs.openFolder(projectLocation);
+              break;
+            case "removeFromWorkspace": {
+              workspacePreferences.removeProjectFromWorkspace(projectLocation);
+              refreshWorkspaceProjects();
+              break;
+            }
+            default: {}
+          }
+          
+        }
+      });
+    }catch(err) {
+      // HACK: case where a modal is using this module, which it has no biz on tree
+    }
+
+    // On double click project ...
+    // On select tab option
+    $('#exp-workspace').on(
+      'tree.dblclick',
+      function(event) {
+          event.stopImmediatePropagation();
+          if (event.node && event.node.path) {
+                openProject(event.node.path)
+          }
+      }
+    );
+
+  }
+
+
+
+  const init = () => {
+    initCurrentProject();
+    initWorkspaceProjects();
+  }
+
+  const createTabFn = (newTabName) => {
+    try{
+      // RED.actions.invoke('core:deploy');
+      RED.workspaces.add(undefined,  undefined, undefined, newTabName);
+      RED.actions.invoke('core:deploy'); // save it so we can persist the tab straight away.
+      refresh();
+    } catch(err){
+      RED.notify(`<strong>Error</strong>: "${newTabName}" tab already exists.`, 'error');
+    }
+    
+  }
+
+  const selectTab = (nodeId) => {
+    const tnode = $('#exp-open-project').tree('getNodeById', nodeId);
+    $('#exp-open-project').tree('selectNode', tnode);
+    // Hack to maintain the focus on the selected tab
+    $('#workspace-tabs').addClass('workspace-focussed');
+  }
+
+  const refreshTabs = () => {
+    if (!RED.workspaces.tabs() || RED.workspaces.tabs().length === 0) return;
+    
+    const tabs = RED.nodes.listWorkspaces();
+    const currentProjectName = RED.projectInfo.getWorkspaceInfo()[0].name;
+    let data = [
+      {
+          id: '__root__',
+          name: currentProjectName,
+          children: []
+      }
+    ];
+
+    for (const key in tabs) {
+      data[0].children.push({ id: tabs[key].id, name: tabs[key].label })
+    }
+
+    $('#exp-open-project').tree('loadData', data);
+  }
+
+  const refreshWorkspaceProjects = () => {  
+    let projects = workspacePreferences.getWorkspaceProjects();
+
+    // Initialize the tree with empty data
+    let data = [
+      {
+          id: '__root__',
+          name: 'WORKSPACE PROJECTS',
+          children: []
+      }
+    ];
+    
+    
+    // Update the data with info from workspace preferences
+    if (projects){
+      projects.forEach((project, index) => {
+        let projectName = path.basename(project);
+        data[0].children.push({ id: name, name: projectName, path: project });
+      })
+    }
+    
+    // Render the tree
+    $('#exp-workspace').tree('loadData', data);
+
+    // Hack to add style to the title if no projects are added. As this element is not considered a folder
+    if (!projects || projects.length === 0){
+      const elements = $('.jqtree-title-button-left');
+      const maxElements = elements.length;
+      for(let i = 0; i < maxElements; i++){
+        if ($(elements[i]).text() === 'WORKSPACE PROJECTS'){
+          $(elements[i]).addClass('jqtree-title-emptyfolder');
+          break;
+        }
+      }
+    }
+  }
+
+  const refresh = () => {
+   refreshTabs();
+   refreshWorkspaceProjects();
+  }
+
+  return {
+    init,
+    refresh,
+    selectTab
+  };
+  
+})();

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

@@ -7,11 +7,11 @@ RED.palette = (function () {
         RED.palette.nodes.collapseAllPalette() 
       }
     },
-    navigator: {
-      header: 'palette-option-projectnav-a',
-      panel: 'palette-projectnav',
+    explorer: {
+      header: 'palette-option-explorer-a',
+      panel: 'palette-explorer',
       onSelect: () => {
-        RED.palette.navigator.refresh()
+        RED.palette.explorer.refresh()
       }
     }
   }
@@ -21,15 +21,17 @@ RED.palette = (function () {
       deselectAll();
       select(options.nodes);
     });
-    $(`#${options.navigator.header}`).click(e=> {
+
+    $(`#${options.explorer.header}`).click(e=> {
       deselectAll();
-      select(options.navigator);
+      select(options.explorer);
     });
   }
 
   const deselectAll = () => {
     deselect(options.nodes);
-    deselect(options.navigator);
+    deselect(options.explorer);
+
   }
 
   const deselect = (option) => {
@@ -48,7 +50,7 @@ RED.palette = (function () {
 
   const init = () => {
     // Preselection
-    deselect(options.navigator);
+    deselect(options.explorer);
     select(options.nodes);
 
     // Handle the click events

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

@@ -132,11 +132,6 @@ RED.projectInfo = (function () {
       hide();
     });
 
-    // Hint to how to close the search panel
-    $(`
-    <div style="text-align:center; padding: 11px 0 11px 0">Press <span class="escape-key">Esc</span> to close</div>
-    `).appendTo(dialog);
-
     if (config) {
       setValues(config);
     }
@@ -178,6 +173,12 @@ RED.projectInfo = (function () {
     RED.view.reveal(node.id);
   }
 
+  function getWorkspaceInfo() {
+    return [
+      { name: projectName, path: projectDir }
+    ]
+  }
+
   function show(v) {
     // Disable the search dialog if opened
     RED.actions.invoke('core:search:close');
@@ -227,8 +228,9 @@ RED.projectInfo = (function () {
   }
 
   return {
-    init: init,
-    show: show,
-    hide: hide,
+    init,
+    show,
+    hide,
+    getWorkspaceInfo
   };
 })();