@kumologica/sdk 3.2.0-beta9 → 4.0.0-alpha2

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

@@ -1,169 +0,0 @@
-/**
- * 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

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