cwl-svg - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

graph/app-node.js

@@ -12,2 +12,3 @@ "use strict";
 })();
+Object.defineProperty(exports, "__esModule", { value: true });
 var graph_node_1 = require("./graph-node");
@@ -14,0 +15,0 @@ var input_port_1 = require("./input-port");

graph/graph-node.d.ts

@@ -21,2 +21,3 @@ /// <reference types="snapsvg" />
         id: string;
+        label?: string;
     }, paper: Snap.Paper);
@@ -26,3 +27,3 @@ draw(): Snap.Element;
     create<T>(portType: new (...args: any[]) => T, options: any): T;
-    protected attachDragBehaviour(el: any): void;
+    protected attachEventListeners(el: any): void;
     addPort(port: OutputPort | InputPort): void;
@@ -41,2 +42,3 @@ /**
     private distributePorts();
+    protected drawInnerContent(): void;
 }

graph/graph-node.js

@@ -12,2 +12,3 @@ "use strict";
 })();
+Object.defineProperty(exports, "__esModule", { value: true });
 var input_port_1 = require("./input-port");
@@ -45,6 +46,16 @@ var io_port_1 = require("./io-port");
         var innerCircle = this.paper.circle(0, 0, this.radius * .8).addClass("inner");
-        this.name = this.paper.text(0, this.radius + 30, this.dataModel.id).addClass("label");
+        this.name = this.paper.text(0, this.radius + 30, this.dataModel.label || this.dataModel.id).addClass("label");
         this.circleGroup = this.paper.group(outerCircle, innerCircle).transform("").addClass("drag-handle");
         this.group.add(this.circleGroup, this.name);
-        this.attachDragBehaviour(this.circleGroup);
+        if (this.dataModel instanceof models_1.StepModel) {
+            var iconGroup = this.paper.group();
+            this.circleGroup.add(iconGroup);
+            if (this.dataModel.run.class == "CommandLineTool") {
+                iconGroup.add(this.paper.path("M 0 10 h 15"), this.paper.path("M -10 10 L 0 0 L -10 -10")).addClass("icon icon-tool");
+            }
+            else if (this.dataModel.run.class === "Workflow") {
+                iconGroup.add(this.paper.circle(-8, 10, 3), this.paper.circle(12, 0, 3), this.paper.circle(-8, -10, 3), this.paper.line(-8, 10, 12, 0), this.paper.line(-8, -10, 12, 0)).addClass("icon icon-workflow");
+            }
+        }
+        this.attachEventListeners(this.circleGroup);
         return this.group;
@@ -68,3 +79,3 @@ };
     };
-    GraphNode.prototype.attachDragBehaviour = function (el) {
+    GraphNode.prototype.attachEventListeners = function (el) {
         var _this = this;
@@ -77,2 +88,5 @@ var groupBBox;
         var scaleReverse;
+        el.hover(function () {
+            _this.group.toFront();
+        });
         el.drag(function (dx, dy) {
@@ -105,8 +119,5 @@ var moveX = dx * scaleReverse;
             });
-            _this.group.addClass("dragging");
-            _this.group.toFront();
         }, function (ev) {
             inputEdges.clear();
             outputEdges.clear();
-            _this.group.removeClass("dragging");
         });
@@ -124,2 +135,4 @@ };
         portStore.push(port);
+        // Ports should be sorted in reverse to comply with the SBG platform's coordinate positioning
+        portStore = portStore.sort(function (a, b) { return -a.portModel.id.localeCompare(b.portModel.id); });
         this.distributePorts();
@@ -176,2 +189,4 @@ if (portStore.length > 6 && portStore.length <= 20) {
     };
+    GraphNode.prototype.drawInnerContent = function () {
+    };
     return GraphNode;
@@ -178,0 +193,0 @@ }(shape_1.Shape));

graph/input-port.js

@@ -12,2 +12,3 @@ "use strict";
 })();
+Object.defineProperty(exports, "__esModule", { value: true });
 var io_port_1 = require("./io-port");
@@ -14,0 +15,0 @@ var InputPort = (function (_super) {

graph/io-port.js

@@ -12,2 +12,3 @@ "use strict";
 })();
+Object.defineProperty(exports, "__esModule", { value: true });
 var shape_1 = require("./shape");
@@ -41,6 +42,6 @@ var IOPort = (function (_super) {
         var _a = this.portModel.connectionId.split("/"), id = _a[2];
-        this.title = this.drawTitle(id).addClass("label unselectable");
+        this.title = this.drawTitle(this.portModel.label || id).addClass("label unselectable");
         this.drawingElements.circleGroup = this.handle;
         this.group = this.paper.group(this.drawingElements.circleGroup, this.title).addClass("port");
-        // this.attachDragBehaviour(this.drawingElements.circleGroup);
+        // this.attachEventListeners(this.drawingElements.circleGroup);
         // this.attachDrop();
@@ -122,3 +123,2 @@ return this.group;
         var otherRect = port.group.node.getBoundingClientRect();
-        console.log("Connecting", thisRect, "to", otherRect);
         this.connection = this.paper.path(this.makePathStringBetween(thisRect.left, thisRect.top, otherRect.left, otherRect.top)).attr({
@@ -125,0 +125,0 @@ fill: "none",

graph/output-port.js

@@ -12,2 +12,3 @@ "use strict";
 })();
+Object.defineProperty(exports, "__esModule", { value: true });
 var io_port_1 = require("./io-port");
@@ -14,0 +15,0 @@ var OutputPort = (function (_super) {

graph/shape.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var Shape = (function () {
@@ -3,0 +4,0 @@ function Shape() {

graph/workflow.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var event_hub_1 = require("../utils/event-hub");
@@ -23,6 +24,17 @@ var app_node_1 = require("./app-node");
         this.paper.node.addEventListener("mousewheel", function (ev) {
-            console.log("Delta", ev.deltaY);
-            _this.command("workflow.scale", _this.getScale() + ev.deltaY / 500);
+            var newScale = _this.getScale() + ev.deltaY / 500;
+            // Prevent scaling to unreasonable proportions.
+            if (newScale <= 0.15 || newScale > 3) {
+                return;
+            }
+            _this.command("workflow.scale", newScale);
             ev.stopPropagation();
         }, true);
+        this.paper.node.addEventListener("click", function (ev) {
+            var node = ev.path.find(function (el) { return el.classList && el.classList.contains("node"); });
+            if (!node) {
+                return;
+            }
+            console.log("Click on node", node);
+        });
         {
@@ -97,3 +109,4 @@ var originalMatrix_1;
                 in: [{
-                        connectionId: output.connectionId, isVisible: true
+                        connectionId: output.connectionId,
+                        isVisible: true
                     }]
@@ -117,3 +130,2 @@ }));
             if (!connection.isVisible || connection.source.type === "Step" || connection.destination.type === "Step") {
-                // console.warn("Skipping rendering of an invisible connection.", connection);
                 return;
@@ -149,8 +161,18 @@ }
             var hoverClass = "edge-hover";
-            pathGroup.hover(function () {
+            var connectionLabel;
+            pathGroup.hover(function (ev, x, y) {
                 sourceNode.addClass(hoverClass);
                 destNode.addClass(hoverClass);
+                var sourceLabel = sourceStepId === sourcePort ? sourcePort : sourceStepId + "/" + sourcePort;
+                var destLabel = destStepId === destPort ? destPort : destStepId + "/" + destPort;
+                connectionLabel = _this.paper
+                    .text(x, y - 16, sourceLabel + " \u2194 " + destLabel)
+                    .addClass("label label-edge");
+                pathGroup.add(connectionLabel);
+                pathGroup.toFront();
             }, function () {
                 sourceNode.removeClass(hoverClass);
                 destNode.removeClass(hoverClass);
+                connectionLabel.remove();
+                pathGroup.toBack();
             });
@@ -222,3 +244,2 @@ });
             _this.scale = c;
-            console.log("Scaling", c);
             var oldMatrix = _this.group.transform().localMatrix.split();
@@ -225,0 +246,0 @@ _this.group.transform(new Snap.Matrix().add(c, 0, 0, c, oldMatrix.dx, oldMatrix.dy));

index.js

@@ -5,3 +5,4 @@ "use strict";
 }
+Object.defineProperty(exports, "__esModule", { value: true });
 __export(require("./graph/workflow"));
 //# sourceMappingURL=index.js.map

package.json

@@ -10,3 +10,3 @@ {
   "description": "A library for generating an interactive SVG visualization of CWL workflows",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "dependencies": {
@@ -20,3 +20,4 @@ "core-js": "^2.4.1",
     "css-loader": "^0.26.1",
-    "cwlts": "^1.10.21",
+    "cwlts": "^1.11.16",
+    "json-loader": "0.5.4",
     "node-sass": "^4.5.0",
@@ -23,0 +24,0 @@ "sass-loader": "^5.0.1",

utils/event-hub.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var EventHub = (function () {
@@ -3,0 +4,0 @@ function EventHub(validEventList) {

utils/geometry.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var Geometry = (function () {
@@ -3,0 +4,0 @@ function Geometry() {

utils/perf.js

 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var Perf = (function () {
@@ -3,0 +4,0 @@ function Perf() {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

73634

decreased by-96.18%

Dev dependency count

13

increased by8.33%

Lines of code

928

decreased by-96.79%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes