cwl-svg - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

graph/graph-node.js

@@ -55,3 +55,3 @@ "use strict";
             .reduce(function (acc, tpl) { return acc + tpl; }, "");
-        return "\n            <g class=\"node " + dataModel.id + " " + nodeTypeClass + "\"\n               data-connection-id=\"" + dataModel.connectionId + "\"\n               transform=\"matrix(1, 0, 0, 1, " + x + ", " + y + ")\"\n               data-id=\"" + dataModel.id + "\">\n        \n                <g class=\"drag-handle\" transform=\"matrix(1, 0, 0, 1, 0, 0)\">\n                    <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius + "\" class=\"outer\"></circle>\n                    <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius * .8 + "\" class=\"inner\"></circle>\n                </g>\n                <text x=\"0\" y=\"" + (GraphNode.radius + 30) + "\" class=\"label\">" + (dataModel.label || dataModel.id) + "</text>\n                " + inputPortTemplates + "\n                " + outputPortTemplates + "\n            </g>\n        ";
+        return "\n            <g class=\"node " + dataModel.id + " " + nodeTypeClass + "\"\n               data-connection-id=\"" + dataModel.connectionId + "\"\n               transform=\"matrix(1, 0, 0, 1, " + x + ", " + y + ")\"\n               data-id=\"" + dataModel.id + "\">\n        \n                <g class=\"drag-handle\" transform=\"matrix(1, 0, 0, 1, 0, 0)\">\n                    <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius + "\" class=\"outer\"></circle>\n                    <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius * .75 + "\" class=\"inner\"></circle>\n                </g>\n                <text transform=\"matrix(1,0,0,1,0," + (GraphNode.radius + 30) + ")\" class=\"label\">" + (dataModel.label || dataModel.id) + "</text>\n                " + inputPortTemplates + "\n                " + outputPortTemplates + "\n            </g>\n        ";
     };
@@ -70,3 +70,3 @@ GraphNode.prototype.draw = function () {
         }
-        this.group.add(Snap.parse("\n            <g class=\"drag-handle\" transform=\"matrix(1, 0, 0, 1, 0, 0)\">\n                <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius + "\" class=\"outer\"></circle>\n                <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius * .8 + "\" class=\"inner\"></circle>\n                " + iconFragment + "\n            </g>\n            <text x=\"0\" y=\"" + (GraphNode.radius + 30) + "\" class=\"label\">" + (this.dataModel.label || this.dataModel.id) + "</text>\n        "));
+        this.group.add(Snap.parse("\n            <g class=\"drag-handle\" transform=\"matrix(1, 0, 0, 1, 0, 0)\">\n                <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius + "\" class=\"outer\"></circle>\n                <circle cx=\"0\" cy=\"0\" r=\"" + GraphNode.radius * .8 + "\" class=\"inner\"></circle>\n                " + iconFragment + "\n            </g>\n            <text transform=\"matrix(1,0,0,1,0," + (GraphNode.radius + 30) + ")\" class=\"label\">" + (this.dataModel.label || this.dataModel.id) + "</text>\n        "));
         // this.attachEventListeners(this.circleGroup);
@@ -79,3 +79,3 @@ return this.group;
         var label = port.label || port.id;
-        var template = "\n            <g class=\"port " + portClass + " " + port.id + "\" transform=\"" + (transform || 'matrix(1, 0, 0, 1, 0, 0)') + "\"\n               data-connection-id=\"" + port.connectionId + "\"\n               data-port-id=\"" + port.id + "\"\n            >\n                <g class=\"io-port " + port.id + "\">\n                    <circle cx=\"0\" cy=\"0\" r=\"5\" class=\"port-handle\"></circle>\n                </g>\n                <text x=\"0\" y=\"0\" class=\"label unselectable\">" + label + "</text>\n            </g>\n            \n        ";
+        var template = "\n            <g class=\"port " + portClass + " " + port.id + "\" transform=\"" + (transform || 'matrix(1, 0, 0, 1, 0, 0)') + "\"\n               data-connection-id=\"" + port.connectionId + "\"\n               data-port-id=\"" + port.id + "\"\n            >\n                <g class=\"io-port " + port.id + "\">\n                    <circle cx=\"0\" cy=\"0\" r=\"7\" class=\"port-handle\"></circle>\n                </g>\n                <text x=\"0\" y=\"0\" transform=\"matrix(1,0,0,1,0,0)\" class=\"label unselectable\">" + label + "</text>\n            </g>\n            \n        ";
         return template;
@@ -82,0 +82,0 @@ };

graph/io-port.js

@@ -18,3 +18,3 @@ "use strict";
         var _this = _super.call(this) || this;
-        _this.radius = 5;
+        _this.radius = 7;
         _this.connectionFormat = "M {x1} {y1}, C {bx1} {by1} {bx2} {by2} {x2} {y2}";
@@ -21,0 +21,0 @@ _this.paper = paper;

graph/workflow.d.ts

@@ -30,5 +30,8 @@ /// <reference types="snapsvg" />
     private attachEdgeHoverBehavior(el);
+    private attachSelectionDeletionBehavior();
     private attachPortDragBehavior();
     private findParent(el, parentClass);
     static setModelPosition(obj: any, x: any, y: any): void;
+    private clearCanvas();
+    private getOffsetFromCanvasCenter(x, y);
 }

graph/workflow.js

 "use strict";
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -37,3 +45,3 @@ require("snapsvg-cjs");
             }
-            _this.command("workflow.scale", newScale);
+            _this.command("workflow.scale", newScale, ev);
             ev.stopPropagation();
@@ -85,2 +93,5 @@ }, true);
         console.time("Graph Rendering");
+        var oldTransform = this.workflow.getAttribute("transform");
+        this.clearCanvas();
+        this.workflow.setAttribute("transform", "matrix(1,0,0,1,0,0)");
         var nodes = model.steps.concat(model.inputs, model.outputs).filter(function (n) { return n.isVisible; });
@@ -101,2 +112,4 @@ var nodesTpl = nodes.map(function (n) { return graph_node_1.GraphNode.patchModelPorts(n); })
         });
+        this.workflow.setAttribute("transform", oldTransform);
+        this.command("workflow.scale", this.scale);
         console.timeEnd("Ordering");
@@ -139,2 +152,5 @@ };
             _this.workflow.appendChild(el);
+            // Labels on this new step will not be scaled properly since they are custom-adjusted during scaling
+            // So let's trigger the scaling again
+            _this.command("workflow.scale", _this.scale);
         });
@@ -209,9 +225,14 @@ /**
          */
-        this.eventHub.on("workflow.scale", function (c) {
+        this.eventHub.on("workflow.scale", function (c, ev) {
             _this.scale = c;
-            var oldMatrix = _this.group.transform().localMatrix.split();
-            _this.group.transform(new Snap.Matrix().add(c, 0, 0, c, oldMatrix.dx, oldMatrix.dy));
+            var transform = _this.workflow.transform.baseVal;
+            var matrix = transform.getItem(0).matrix;
+            matrix.a = c;
+            matrix.d = c;
             var labelScale = 1 + (1 - c) / (c * 2);
-            _this.paper.node.querySelectorAll(".node .label").forEach(function (el) {
-                Snap(el).transform("s" + labelScale + "," + labelScale);
+            Array.from(_this.workflow.querySelectorAll(".node .label"))
+                .map(function (el) { return el.transform.baseVal.getItem(0).matrix; })
+                .forEach(function (m) {
+                m.a = labelScale;
+                m.d = labelScale;
             });
@@ -322,6 +343,5 @@ });
                 matrix_1.f = y_1 + dy;
-                pane_1.transform.baseVal.getItem(0).setMatrix(matrix_1);
             }, function (ev, el, root) {
                 pane_1 = root.querySelector(".workflow");
-                matrix_1 = pane_1.transform.baseVal.getItem(0).matrix.scale(1);
+                matrix_1 = pane_1.transform.baseVal.getItem(0).matrix;
                 x_1 = matrix_1.e;
@@ -359,2 +379,3 @@ y_1 = matrix_1.f;
         this.attachPortDragBehavior();
+        this.attachSelectionDeletionBehavior();
     };
@@ -433,2 +454,36 @@ Workflow.prototype.highlightEdge = function (el) {
     };
+    Workflow.prototype.attachSelectionDeletionBehavior = function () {
+        var _this = this;
+        this.domEvents.on("keyup", function (ev) {
+            var selection = Array.from(_this.workflow.querySelectorAll(".selected"));
+            if (ev.which !== 8 || selection.length === 0) {
+                return;
+            }
+            selection.forEach(function (el) {
+                if (el.classList.contains("step")) {
+                    _this.model.removeStep(el.getAttribute("data-connection-id"));
+                    _this.renderModel(_this.model);
+                }
+                else if (el.classList.contains("edge")) {
+                    var sourcePortID = el.getAttribute("data-source-connection");
+                    var destinationPortID = el.getAttribute("data-destination-connection");
+                    var sourcePort = _this.workflow.querySelector(".port[data-connection-id=\"" + sourcePortID + "\"]");
+                    var destinationPort = _this.workflow.querySelector(".port[data-connection-id=\"" + destinationPortID + "\"]");
+                    var sourceNode = _this.findParent(sourcePort, "node");
+                    var destinationNode = _this.findParent(destinationPort, "node");
+                    _this.model.disconnect(sourcePortID, destinationPortID);
+                    _this.renderModel(_this.model);
+                }
+                else if (el.classList.contains("input")) {
+                    _this.model.removeInput(el.getAttribute("data-connection-id"));
+                    _this.renderModel(_this.model);
+                }
+                else if (el.classList.contains("output")) {
+                    _this.model.removeOutput(el.getAttribute("data-connection-id"));
+                    _this.renderModel(_this.model);
+                }
+            });
+            console.log("Delete something", selection);
+        }, window);
+    };
     Workflow.prototype.attachPortDragBehavior = function () {
@@ -540,4 +595,4 @@ var _this = this;
                     var newEdge = edge_1.Edge.spawnBetweenConnectionIDs(_this.workflow, sourceID, destID);
+                    _this.attachEdgeHoverBehavior(newEdge);
                     _this.model.connect(sourceID, destID);
-                    _this.attachEdgeHoverBehavior(newEdge);
                 }
@@ -557,3 +612,4 @@ highlightedPort.classList.remove("highlighted");
                 Workflow.setModelPosition(newIO, mouseCoords.x, mouseCoords.y);
-                edge_1.Edge.spawnBetweenConnectionIDs(_this.workflow, portID, newIO.connectionId);
+                var edge_2 = edge_1.Edge.spawnBetweenConnectionIDs(_this.workflow, portID, newIO.connectionId);
+                _this.attachEdgeHoverBehavior(edge_2);
             }
@@ -593,2 +649,18 @@ _this.workflow.classList.remove("has-suggestion", "edge-dragging");
     };
+    Workflow.prototype.clearCanvas = function () {
+        this.domEvents.detachAll();
+        this.workflow.innerHTML = "";
+        this.workflow.setAttribute("class", "workflow");
+    };
+    Workflow.prototype.getOffsetFromCanvasCenter = function (x, y) {
+        var abs = {
+            x: x - this.svgRoot.clientWidth / 2,
+            y: y - this.svgRoot.clientHeight / 2,
+        };
+        var pc = {
+            pcx: abs.x / this.svgRoot.clientWidth,
+            pcy: abs.y / this.svgRoot.clientHeight
+        };
+        return __assign({}, abs, pc);
+    };
     return Workflow;
@@ -595,0 +667,0 @@ }());

package.json

@@ -10,5 +10,6 @@ {
   "description": "A library for generating an interactive SVG visualization of CWL workflows",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "dependencies": {
     "core-js": "^2.4.1",
+    "cwlts": "1.11.34",
     "snapsvg-cjs": "0.0.4"
@@ -20,3 +21,2 @@ },
     "css-loader": "^0.26.1",
-    "cwlts": "1.11.32",
     "json-loader": "0.5.4",
@@ -23,0 +23,0 @@ "node-sass": "^4.5.0",

utils/dom-events.d.ts

@@ -5,3 +5,4 @@ export declare class DomEvents {
     constructor(root: HTMLElement);
-    on(event: string, selector: string, handler: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any): () => void;
+    on(event: string, selector: string, handler: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any, root?: any): () => void;
+    keyup(): void;
     drag(selector: any, move: (dx: number, dy: number, UIEvent, target?: HTMLElement, root?: HTMLElement) => any, start: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any, end: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any): void;
@@ -8,0 +9,0 @@ hover(element: any, hover?: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any, enter?: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any, leave?: (UIEvent, target?: HTMLElement, root?: HTMLElement) => any): void;

utils/dom-events.js

@@ -6,22 +6,34 @@ "use strict";
         this.root = root;
-        this.handlers = {};
+        this.handlers = new Map();
     }
-    DomEvents.prototype.on = function (event, selector, handler) {
+    DomEvents.prototype.on = function (event, selector, handler, root) {
         var _this = this;
-        if (!this.handlers[event]) {
-            this.handlers[event] = [];
+        if (typeof selector === "function") {
+            root = handler;
+            handler = selector;
+            selector = undefined;
         }
+        var eventHolder = root || this.root;
+        if (!this.handlers.has(eventHolder)) {
+            this.handlers.set(eventHolder, {});
+        }
+        if (!this.handlers.get(eventHolder)[event]) {
+            this.handlers.get(eventHolder)[event] = [];
+        }
         var evListener = function (ev) {
-            var selected = Array.from(_this.root.querySelectorAll(selector));
-            var target = ev.target;
-            while (target) {
-                if (selected.find(function (el) { return el === target; })) {
-                    break;
+            var target;
+            if (selector) {
+                var selected = Array.from(_this.root.querySelectorAll(selector));
+                target = ev.target;
+                while (target) {
+                    if (selected.find(function (el) { return el === target; })) {
+                        break;
+                    }
+                    target = target.parentNode;
                 }
-                target = target.parentNode;
+                if (!target) {
+                    return;
+                }
             }
-            if (!target) {
-                return;
-            }
-            var handlerOutput = handler(ev, target, _this.root);
+            var handlerOutput = handler(ev, target || ev.target, _this.root);
             if (handlerOutput === false) {
@@ -32,8 +44,10 @@ return false;
         };
-        this.root.addEventListener(event, evListener);
-        this.handlers[event].push(evListener);
+        eventHolder.addEventListener(event, evListener);
+        this.handlers.get(eventHolder)[event].push(evListener);
         return function off() {
-            this.root.removeEventListener(event, evListener);
+            eventHolder.removeEventListener(event, evListener);
         };
     };
+    DomEvents.prototype.keyup = function () {
+    };
     DomEvents.prototype.drag = function (selector, move, start, end) {
@@ -118,12 +132,13 @@ var _this = this;
         var _this = this;
-        var _loop_1 = function (k) {
-            this_1.handlers[k].forEach(function (handler) {
-                _this.root.removeEventListener(k, handler);
-            });
-        };
-        var this_1 = this;
-        for (var k in this.handlers) {
-            _loop_1(k);
-        }
-        this.handlers = {};
+        this.handlers.forEach(function (root) {
+            var _loop_1 = function (eventType) {
+                root[eventType].forEach(function (handler) {
+                    root.removeEventListener(eventType, handler);
+                });
+            };
+            for (var eventType in _this.handlers[root]) {
+                _loop_1(eventType);
+            }
+        });
+        this.handlers.clear();
     };
@@ -130,0 +145,0 @@ return DomEvents;

No alert changes

Improved metrics

Total package byte prevSize

133355

increased by6.25%

Dev dependency count

12

decreased by-7.69%

Lines of code

1585

increased by6.09%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedcwlts@1.11.34

• + Addedcwlts@1.11.34(transitive)