@kumologica/sdk 3.0.0

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

@@ -0,0 +1,240 @@
+RED.terminal = (function () {
+  const DEFAULT_HEIGHT = 180;
+  const MAX_HEIGHT = 900;
+
+  let activeTerminalID = 'terminal-output'; // default first tab
+  let activeTerminalHeight;
+  // Terminals
+  let terminals = [];
+
+  class TerminalWrapper {
+    constructor(id) {
+      const {
+        opts,
+        Terminal,
+        FitAddon,
+        eventEmitter,
+      } = window.__kumologica.editor.terminal;
+      this.id = id;
+      this.eventEmitter = eventEmitter;
+      this.fitAddon = new FitAddon();
+      this.term = new Terminal(opts);
+      // apply the addon
+      this.term.loadAddon(this.fitAddon);
+      this.term.open(this.getElement()[0]);
+      this.term.attachCustomKeyEventHandler(function (e) {
+        // Ctrl + Shift + C
+        if (e.ctrlKey && e.shiftKey && e.keyCode == 3) {
+          document.execCommand('copy');
+          return false;
+        }
+      });
+      this.hide();
+      this.subscribeEvents();
+    }
+    subscribeEvents() {
+      this.eventEmitter.on(`${this.id}`, (data) => {
+        // splitting data by new line character, terminal is not handling
+        // line break without cr (#13#10) (lf instead of crlf).
+        const lines = data.split('\n');
+        for (var i = 0; i < lines.length; i++) {
+          if (lines[i]) {
+            this.term.writeln(lines[i]);
+          }
+        }
+      });
+    }
+    getElement() {
+      return $(`#${this.id}`);
+    }
+    isVisible() {
+      return this.getElement().is(':visible');
+    }
+    show() {
+      this.getElement().show();
+      this.fitAddon.fit();
+    }
+    hide() {
+      this.getElement().hide();
+    }
+    clear() {
+      this.term.clear();
+    }
+    fit() {
+      this.fitAddon.fit();
+    }
+  }
+
+  function init() {
+    initHeader();
+    initTerminals();
+  }
+
+  function resetSelectionClasses(id) {
+    $(`#${id}`).removeClass('terminal-tab-unselected');
+    $(`#${id}`).removeClass('terminal-tab-selected');
+  }
+
+  function selectTabOutput() {
+    // reset
+    resetSelectionClasses('terminal-tab-output');
+    resetSelectionClasses('terminal-tab-cloud');
+    // attach the selection class
+    $('#terminal-tab-output').addClass('terminal-tab-selected');
+    $('#terminal-tab-cloud').addClass('terminal-tab-unselected');
+  }
+
+  function selectTabCloud() {
+    // reset
+    resetSelectionClasses('terminal-tab-output');
+    resetSelectionClasses('terminal-tab-cloud');
+    // attach the selection class
+    $('#terminal-tab-cloud').addClass('terminal-tab-selected');
+    $('#terminal-tab-output').addClass('terminal-tab-unselected');
+  }
+
+  function initHeader() {
+    // Tabs Section
+    // Select the first tab (output)
+    $('#terminal-tab-output').addClass('terminal-tab-selected');
+    $('#terminal-tab-cloud').addClass('terminal-tab-unselected');
+
+    // attach the click events to the headers
+    $('#terminal-tab-output').click((e) => {
+      e.preventDefault();
+      selectTabOutput();
+      showTerminal('terminal-output');
+    });
+
+    $('#terminal-tab-cloud').click((e) => {
+      e.preventDefault();
+      selectTabCloud();
+      showTerminal('terminal-cloud');
+    });
+
+    // Action Section
+    $('#btn-terminal-max').click((e) => {
+      var chartHeight = $('#chart').height();
+      var terminalHeight = $('#terminal-header').height();
+      var extraHeight = 50; // 6 separator, 10 margin
+
+      var deltaToGrow = chartHeight - terminalHeight + extraHeight;
+      var currentHeight = $(`#${activeTerminalID}`).height();
+
+      $(`#${activeTerminalID}`).height(currentHeight + deltaToGrow);
+
+      // update the height of the xterm-screen
+      activeTerminalHeight = MAX_HEIGHT;
+      findTerminalById(`${activeTerminalID}`).fit();
+      // Change the icon to minimize
+      $('#btn-terminal-max').hide();
+      $('#btn-terminal-min').show();
+    });
+
+    $('#btn-terminal-min').click((e) => {
+      $(`#${activeTerminalID}`).height(DEFAULT_HEIGHT);
+      // update the height of the xterm-screen
+      activeTerminalHeight = DEFAULT_HEIGHT;
+      findTerminalById(`${activeTerminalID}`).fit();
+      // Change the icon to minimize
+      $('#btn-terminal-min').hide();
+      $('#btn-terminal-max').show();
+    });
+
+    $('#btn-terminal-close').click((e) => {
+      toggleTerminal();
+    });
+
+    $('#btn-clear-logs').click((e) => {
+      e.preventDefault();
+      let terminal = findTerminalById(activeTerminalID);
+      terminal.clear();
+    });
+  }
+
+  function findTerminalById(id) {
+    for (let i = 0; i < terminals.length; i++) {
+      if (terminals[i].id === id) {
+        return terminals[i].terminal;
+      }
+    }
+    return undefined;
+  }
+
+  function toggleTerminal() {
+     // close terminal via shelve btn
+     $('#shelve-middle').click();
+  }
+
+  function initTerminals() {
+    // Initialize the separator
+    setupTerminalSeparator();
+
+    // Instantiate the terminal (xtermjs)
+    let termOutput = new TerminalWrapper('terminal-output');
+    terminals.push({ id: 'terminal-output', terminal: termOutput });
+
+    //let termCloud = new TerminalWrapper('terminal-cloud');
+    //terminals.push({ id: 'terminal-cloud', terminal: termCloud });
+
+    showTerminal();
+  }
+
+  function showTerminal(id) {
+    let idSelected = id || 'terminal-output';
+    // Show the respective terminal to the given tab
+    let terminalSelected = findTerminalById(idSelected);
+    if (terminalSelected) {
+      if (idSelected === activeTerminalID) {
+        findTerminalById(activeTerminalID).show();
+      } else {
+        let prevTerminalID = activeTerminalID;
+        activeTerminalID = idSelected;
+
+        findTerminalById(prevTerminalID).hide();
+        findTerminalById(activeTerminalID).show();
+      }
+      // set the height of the selected terminal like the previous one
+      console.log('[terminal] activeTerminalID=', activeTerminalID);
+      console.log('[terminal] activeTerminalHeight=', activeTerminalHeight);
+      if (!activeTerminalHeight){
+        activeTerminalHeight = DEFAULT_HEIGHT;
+      }
+
+      $(`#${activeTerminalID}`).height(`${activeTerminalHeight}`);
+      // $(`#${activeTerminalID}`).fit();
+    } else {
+      throw new Error(`Terminal not defined: ${id}`);
+    }
+  }
+
+  function setupTerminalSeparator() {
+    let newHeight;
+    $('#terminal-separator').draggable({
+      axis: 'y',
+      start: function (event, ui) {
+        activeTerminalHeight = $(`#${activeTerminalID}`).height();
+        //$('#terminal-separator').css('top', '4px');
+      },
+      drag: function (event, ui) {
+        // update the height of terminal window
+        newHeight = activeTerminalHeight - ui.position.top;
+        $(`#${activeTerminalID}`).height(newHeight);
+
+        // update the height of the xterm-screen
+        findTerminalById(`${activeTerminalID}`).fit();
+
+        // Keep the separator in his original place
+        ui.position.top = 0;
+      },
+      stop: function (event, ui) {
+        activeTerminalHeight = newHeight;
+        // $('#terminal-separator').css('top', '4px');
+      },
+    });
+  }
+
+  return {
+    init: init,
+  };
+})();

package/src/app/ui/editor-client/src/js/ui/touch/radialMenu.js

@@ -0,0 +1,170 @@
+ 
+
+RED.touch = RED.touch||{};
+RED.touch.radialMenu = (function() {
+    
+    
+    var touchMenu = null;
+    var isActive = false;
+    var isOutside = false;
+    var activeOption = null;
+
+    
+    function createRadial(obj,pos,options) {
+        isActive = true;
+        try {
+            var w = $("body").width();
+            var h = $("body").height();
+            
+            touchMenu = d3.select("body").append("div")
+                .style({
+                        position:"absolute",
+                        top: 0,
+                        left:0,
+                        bottom:0,
+                        right:0,
+                        "z-index": 1000
+                })
+                .on('touchstart',function() {
+                    hide();
+                    d3.event.preventDefault();
+                });
+                    
+            
+
+    
+            var menu = touchMenu.append("div")
+                .style({
+                        position: "absolute",
+                        top: (pos[1]-80)+"px",
+                        left:(pos[0]-80)+"px",
+                        "border-radius": "80px",
+                        width: "160px",
+                        height: "160px",
+                        background: "rgba(255,255,255,0.6)",
+                        border: "1px solid #666"
+                });
+                
+            var menuOpts = [];
+            var createMenuOpt = function(x,y,opt) {
+                opt.el = menu.append("div")
+                    .style({
+                        position: "absolute",
+                        top: (y+80-25)+"px",
+                        left:(x+80-25)+"px",
+                        "border-radius": "20px",
+                        width: "50px",
+                        height: "50px",
+                        background: "#fff",
+                        border: "2px solid #666",
+                        "text-align": "center",
+                        "line-height":"50px"
+                    });
+                    
+                opt.el.html(opt.name);
+                
+                if (opt.disabled) {
+                    opt.el.style({"border-color":"#ccc",color:"#ccc"});
+                }
+                opt.x = x;
+                opt.y = y;
+                menuOpts.push(opt);
+                
+                opt.el.on('touchstart',function() {
+                    opt.el.style("background","#999");
+                    d3.event.preventDefault();
+                    d3.event.stopPropagation();
+                });
+                opt.el.on('touchend',function() {
+                    hide();
+                    opt.onselect();
+                    d3.event.preventDefault();
+                    d3.event.stopPropagation();
+                });
+            }
+            
+            var n = options.length;
+            var dang = Math.max(Math.PI/(n-1),Math.PI/4);
+            var ang = Math.PI;
+            for (var i=0;i<n;i++) {
+                var x = Math.floor(Math.cos(ang)*80);
+                var y = Math.floor(Math.sin(ang)*80);
+                if (options[i].name) {
+                    createMenuOpt(x,y,options[i]);
+                }
+                ang += dang;
+            }
+            
+
+            var hide = function() {
+                isActive = false;
+                activeOption = null;
+                touchMenu.remove();
+                touchMenu = null;
+            }
+                    
+            obj.on('touchend.radial',function() {
+                    obj.on('touchend.radial',null);
+                    obj.on('touchmenu.radial',null);
+                    
+                    if (activeOption) {
+                        try {
+                            activeOption.onselect();
+                        } catch(err) {
+                            RED._debug(err);
+                        }
+                        hide();
+                    } else if (isOutside) {
+                        hide();
+                    }
+            });
+
+
+            
+            obj.on('touchmove.radial',function() {
+            try {
+                var touch0 = d3.event.touches.item(0);
+                var p = [touch0.pageX - pos[0],touch0.pageY-pos[1]];
+                for (var i=0;i<menuOpts.length;i++) {
+                    var opt = menuOpts[i];
+                    if (!opt.disabled) {
+                        if (p[0]>opt.x-30 && p[0]<opt.x+30 && p[1]>opt.y-30 && p[1]<opt.y+30) {
+                            if (opt !== activeOption) {
+                                opt.el.style("background","#999");
+                                activeOption = opt;
+                            }
+                        } else if (opt === activeOption) {
+                            opt.el.style("background","#fff");
+                            activeOption = null;
+                        } else {
+                            opt.el.style("background","#fff");
+                        }
+                    }
+                }
+                if (!activeOption) {
+                    var d = Math.abs((p[0]*p[0])+(p[1]*p[1]));
+                    isOutside = (d > 80*80);
+                }
+                
+            } catch(err) {
+                RED._debug(err);
+            }
+
+                
+            });
+            
+        } catch(err) {
+            RED._debug(err);
+        }
+    }    
+
+    
+    return {
+        show: createRadial,
+        active: function() {
+            return isActive;
+        }
+    }
+
+})();
+