@kumologica/sdk 3.0.0

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

@@ -0,0 +1,169 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+ RED.view.navigator = (function() {
+
+     var nav_scale = 25;
+     var nav_width = 5000/nav_scale;
+     var nav_height = 5000/nav_scale;
+
+     var navContainer;
+     var navBox;
+     var navBorder;
+     var navVis;
+     var scrollPos;
+     var scaleFactor;
+     var chartSize;
+     var dimensions;
+     var isDragging;
+     var isShowing = false;
+
+     function refreshNodes() {
+         if (!isShowing) {
+             return;
+         }
+         var navNode = navVis.selectAll(".navnode").data(RED.view.getActiveNodes(),function(d){return d.id});
+         navNode.exit().remove();
+         navNode.enter().insert("rect")
+             .attr('class','navnode')
+             .attr("pointer-events", "none");
+         navNode.each(function(d) {
+             d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale })
+             .attr("y",function(d) { return (d.y-d.h/2)/nav_scale })
+             .attr("width",function(d) { return Math.max(9,d.w/nav_scale) })
+             .attr("height",function(d) { return Math.max(3,d.h/nav_scale) })
+             .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);})
+         });
+     }
+     function onScroll() {
+         if (!isDragging) {
+             resizeNavBorder();
+         }
+     }
+     function resizeNavBorder() {
+         if (navBorder) {
+             scaleFactor = RED.view.scale();
+             chartSize = [ $("#chart").width(), $("#chart").height()];
+             scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
+             navBorder.attr('x',scrollPos[0]/nav_scale)
+                      .attr('y',scrollPos[1]/nav_scale)
+                      .attr('width',chartSize[0]/nav_scale/scaleFactor)
+                      .attr('height',chartSize[1]/nav_scale/scaleFactor)
+         }
+     }
+     function toggle() {
+         if (!isShowing) {
+             isShowing = true;
+             $("#btn-navigate").addClass("selected");
+             resizeNavBorder();
+             refreshNodes();
+             $("#chart").on("scroll",onScroll);
+             navContainer.fadeIn(200);
+         } else {
+             isShowing = false;
+             navContainer.fadeOut(100);
+             $("#chart").off("scroll",onScroll);
+             $("#btn-navigate").removeClass("selected");
+         }
+     }
+
+     return {
+         init: function() {
+
+             $(window).resize(resizeNavBorder);
+             RED.events.on("sidebar:resize",resizeNavBorder);
+             RED.actions.add("core:toggle-navigator",toggle);
+             var hideTimeout;
+
+             navContainer = $('<div>').css({
+                 "position":"absolute",
+                 "bottom":$("#workspace-footer").height(),
+                 "right":0,
+                 zIndex: 1
+             }).appendTo("#workspace").hide();
+
+             navBox = d3.select(navContainer[0])
+                 .append("svg:svg")
+                 .attr("width", nav_width)
+                 .attr("height", nav_height)
+                 .attr("pointer-events", "all")
+                 .style({
+                     position: "absolute",
+                     bottom: 0,
+                     right:0,
+                     zIndex: 101,
+                     "border-left": "1px solid #ccc",
+                     "border-top": "1px solid #ccc",
+                     background: "rgba(245,245,245,0.8)",
+                     "box-shadow": "-1px 0 3px rgba(0,0,0,0.1)"
+                 });
+
+             navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
+                 fill:"none",
+                 stroke:"none",
+                 pointerEvents:"all"
+             }).on("mousedown", function() {
+                 // Update these in case they have changed
+                 scaleFactor = RED.view.scale();
+                 chartSize = [ $("#chart").width(), $("#chart").height()];
+                 dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor];
+                 var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
+                 var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
+                 navBorder.attr('x',newX).attr('y',newY);
+                 isDragging = true;
+                 $("#chart").scrollLeft(newX*nav_scale*scaleFactor);
+                 $("#chart").scrollTop(newY*nav_scale*scaleFactor);
+             }).on("mousemove", function() {
+                 if (!isDragging) { return }
+                 if (d3.event.buttons === 0) {
+                     isDragging = false;
+                     return;
+                 }
+                 var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]);
+                 var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]);
+                 navBorder.attr('x',newX).attr('y',newY);
+                 $("#chart").scrollLeft(newX*nav_scale*scaleFactor);
+                 $("#chart").scrollTop(newY*nav_scale*scaleFactor);
+             }).on("mouseup", function() {
+                 isDragging = false;
+             })
+
+             navBorder = navBox.append("rect")
+                 .attr("stroke-dasharray","5,5")
+                 .attr("pointer-events", "none")
+                 .style({
+                     stroke: "#999",
+                     strokeWidth: 1,
+                     fill: "white",
+                 });
+
+             navVis = navBox.append("svg:g")
+
+
+            $("#btn-navigate").click(function(evt) {
+                evt.preventDefault();
+                toggle();
+            })
+            RED.popover.tooltip($("#btn-navigate"), 'Toggle navigator','core:toggle-navigator');
+        },
+        refresh: refreshNodes,
+        resize: resizeNavBorder,
+        toggle: toggle
+    }
+
+
+})();

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

@@ -0,0 +1,123 @@
+ 
+
+RED.view.tools = (function() {
+
+
+    function alignToGrid() {
+        var selection = RED.view.selection();
+        if (selection.nodes) {
+            var changedNodes = [];
+            selection.nodes.forEach(function(n) {
+                var x = n.w/2 + Math.round((n.x-n.w/2)/RED.view.gridSize())*RED.view.gridSize();
+                var y = Math.round(n.y/RED.view.gridSize())*RED.view.gridSize();
+                if (n.x !== x || n.y !== y) {
+                    changedNodes.push({
+                        n:n,
+                        ox: n.x,
+                        oy: n.y,
+                        moved: n.moved
+                    });
+                    n.x = x;
+                    n.y = y;
+                    n.dirty = true;
+                    n.moved = true;
+                }
+            });
+            if (changedNodes.length > 0) {
+                RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()});
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+            }
+        }
+    }
+
+    var moving_set = null;
+    var endMoveSet = false;
+    function endKeyboardMove() {
+        endMoveSet = false;
+        if (moving_set.length > 0) {
+            var ns = [];
+            for (var i=0;i<moving_set.length;i++) {
+                ns.push({n:moving_set[i].n,ox:moving_set[i].ox,oy:moving_set[i].oy,moved:moving_set[i].moved});
+                moving_set[i].n.moved = true;
+                moving_set[i].n.dirty = true;
+                delete moving_set[i].ox;
+                delete moving_set[i].oy;
+            }
+            RED.view.redraw();
+            RED.history.push({t:"move",nodes:ns,dirty:RED.nodes.dirty()});
+            RED.nodes.dirty(true);
+            moving_set = null;
+        }
+    }
+
+    function moveSelection(dx,dy) {
+        if (moving_set === null) {
+            var selection = RED.view.selection();
+            if (selection.nodes) {
+                moving_set = selection.nodes.map(function(n) { return {n:n}});
+            }
+        }
+        if (moving_set && moving_set.length > 0) {
+            if (!endMoveSet) {
+                $(document).one('keyup',endKeyboardMove);
+                endMoveSet = true;
+            }
+            var minX = 0;
+            var minY = 0;
+            var node;
+
+            for (var i=0;i<moving_set.length;i++) {
+                node = moving_set[i];
+                if (node.ox == null && node.oy == null) {
+                    node.ox = node.n.x;
+                    node.oy = node.n.y;
+                    node.moved = node.n.moved;
+                }
+                node.n.moved = true;
+                node.n.dirty = true;
+                node.n.x += dx;
+                node.n.y += dy;
+                node.n.dirty = true;
+                minX = Math.min(node.n.x-node.n.w/2-5,minX);
+                minY = Math.min(node.n.y-node.n.h/2-5,minY);
+            }
+
+            if (minX !== 0 || minY !== 0) {
+                for (var n = 0; n<moving_set.length; n++) {
+                    node = moving_set[n];
+                    node.n.x -= minX;
+                    node.n.y -= minY;
+                }
+            }
+            RED.view.redraw();
+        }
+    }
+
+    return {
+        init: function() {
+            RED.actions.add("core:align-selection-to-grid", alignToGrid);
+
+            RED.actions.add("core:move-selection-up", function() { moveSelection(0,-1);});
+            RED.actions.add("core:move-selection-right", function() { moveSelection(1,0);});
+            RED.actions.add("core:move-selection-down", function() { moveSelection(0,1);});
+            RED.actions.add("core:move-selection-left", function() { moveSelection(-1,0);});
+
+            RED.actions.add("core:step-selection-up", function() { moveSelection(0,-RED.view.gridSize());});
+            RED.actions.add("core:step-selection-right", function() { moveSelection(RED.view.gridSize(),0);});
+            RED.actions.add("core:step-selection-down", function() { moveSelection(0,RED.view.gridSize());});
+            RED.actions.add("core:step-selection-left", function() { moveSelection(-RED.view.gridSize(),0);});
+        },
+        /**
+         * Aligns all selected nodes to the current grid
+         */
+        alignSelectionToGrid: alignToGrid,
+        /**
+         * Moves all of the selected nodes by the specified amount
+         * @param  {Number} dx
+         * @param  {Number} dy
+         */
+        moveSelection: moveSelection
+    }
+
+})();