cwl-svg - npm Package Compare versions

Comparing version 0.0.40 to 0.0.41

graph/edge.d.ts

 import { Edge as ModelEdge } from "cwlts/models";
 export declare class Edge {
-    static makeTemplate(edge: ModelEdge, containerNode: SVGGElement): string;
+    static makeTemplate(edge: ModelEdge, containerNode: SVGGElement, connectionStates?: string): string;
     static spawn(pathStr?: string, connectionIDs?: {
@@ -5,0 +5,0 @@ source?: string;

graph/edge.js

@@ -8,3 +8,3 @@ "use strict";
     }
-    Edge.makeTemplate = function (edge, containerNode) {
+    Edge.makeTemplate = function (edge, containerNode, connectionStates) {
         if (!edge.isVisible || edge.source.type === "Step" || edge.destination.type === "Step") {
@@ -31,4 +31,5 @@ return "";
         var destCTM = destVertex.getCTM();
-        var pathStr = io_port_1.IOPort.makeConnectionPath(sourceCTM.e, sourceCTM.f, destCTM.e, destCTM.f);
-        return "\n            <g tabindex=\"-1\" class=\"edge\"\n               data-source-port=\"" + sourcePort + "\"\n               data-destination-port=\"" + destPort + "\"\n               data-source-node=\"" + sourceStepId + "\"\n               data-source-connection=\"" + edge.source.id + "\"\n               data-destination-connection=\"" + edge.destination.id + "\"\n               data-destination-node=\"" + destStepId + "\">\n                <path class=\"sub-edge outer\" d=\"" + pathStr + "\"></path>\n                <path class=\"sub-edge inner\" d=\"" + pathStr + "\"></path>\n            </g>\n        ";
+        var wfMatrix = containerNode.transform.baseVal[0].matrix;
+        var pathStr = io_port_1.IOPort.makeConnectionPath((sourceCTM.e - wfMatrix.e) / sourceCTM.a, (sourceCTM.f - wfMatrix.f) / sourceCTM.a, (destCTM.e - wfMatrix.e) / sourceCTM.a, (destCTM.f - wfMatrix.f) / sourceCTM.a);
+        return "\n            <g tabindex=\"-1\" class=\"edge " + connectionStates + "\"\n               data-source-port=\"" + sourcePort + "\"\n               data-destination-port=\"" + destPort + "\"\n               data-source-node=\"" + sourceStepId + "\"\n               data-source-connection=\"" + edge.source.id + "\"\n               data-destination-connection=\"" + edge.destination.id + "\"\n               data-destination-node=\"" + destStepId + "\">\n                <path class=\"sub-edge outer\" d=\"" + pathStr + "\"></path>\n                <path class=\"sub-edge inner\" d=\"" + pathStr + "\"></path>\n            </g>\n        ";
     };
@@ -35,0 +36,0 @@ Edge.spawn = function (pathStr, connectionIDs) {

graph/workflow.js

@@ -14,2 +14,3 @@ "use strict";
 var geometry_1 = require("../utils/geometry");
+var svg_utils_1 = require("../utils/svg-utils");
 var edge_1 = require("./edge");
@@ -19,3 +20,2 @@ var graph_node_1 = require("./graph-node");
 var template_parser_1 = require("./template-parser");
-var svg_utils_1 = require("../utils/svg-utils");
 var Workflow = (function () {
@@ -372,6 +372,18 @@ function Workflow(svgRoot, model) {
         var _this = this;
+        var edgeEls = this.model.connections.filter(function (el) { return el.isVisible; });
+        var highlightedEdges = new Set();
         Array.from(this.workflow.querySelectorAll(".edge")).forEach(function (el) {
+            if (el.classList.contains("highlighted")) {
+                var edgeID = el.attributes["data-source-connection"].value + el.attributes["data-destination-connection"].value;
+                highlightedEdges.add(edgeID);
+            }
             el.remove();
         });
-        var edgesTpl = this.model.connections.map(function (c) { return edge_1.Edge.makeTemplate(c, _this.workflow); }).reduce(function (acc, tpl) { return acc + tpl; }, "");
+        var edgesTpl = this.model.connections
+            .map(function (c) {
+            var edgeId = c.source.id + c.destination.id;
+            var edgeStates = highlightedEdges.has(edgeId) ? "highlighted" : "";
+            return edge_1.Edge.makeTemplate(c, _this.workflow, edgeStates);
+        })
+            .reduce(function (acc, tpl) { return acc + tpl; }, "");
         this.workflow.innerHTML = edgesTpl + this.workflow.innerHTML;
@@ -390,9 +402,23 @@ };
         this.workflow.setAttribute("transform", "matrix(1,0,0,1,0,0)");
+        // If there is a missing sbg:x or sbg:y property on any node model,
+        // the graph should be arranged to avoid random placement
+        var arrangeNecessary = false;
         var nodes = model.steps.concat(model.inputs, model.outputs).filter(function (n) { return n.isVisible; });
         var nodesTpl = nodes.map(function (n) { return graph_node_1.GraphNode.patchModelPorts(n); })
             .reduce(function (tpl, nodeModel) {
-            var x = typeof nodeModel.customProps["sbg:x"] !== "undefined" ? nodeModel.customProps["sbg:x"] :
-                Math.random() * 500;
-            var y = typeof nodeModel.customProps["sbg:y"] !== "undefined" ? nodeModel.customProps["sbg:y"] :
-                Math.random() * 500;
+            var x, y;
+            if (!isNaN(parseInt(nodeModel.customProps["sbg:x"]))) {
+                x = nodeModel.customProps["sbg:x"];
+            }
+            else {
+                x = 0;
+                arrangeNecessary = true;
+            }
+            if (!isNaN(parseInt(nodeModel.customProps["sbg:y"]))) {
+                y = nodeModel.customProps["sbg:y"];
+            }
+            else {
+                y = 0;
+                arrangeNecessary = true;
+            }
             return tpl + graph_node_1.GraphNode.makeTemplate(x, y, nodeModel);
@@ -410,3 +436,8 @@ }, "");
         console.timeEnd("Ordering");
-        this.scaleWorkflow(this.scale);
+        if (arrangeNecessary) {
+            this.arrange();
+        }
+        else {
+            this.scaleWorkflow(this.scale);
+        }
         // If we had a selection before, restore it
@@ -413,0 +444,0 @@ if (selectedItemConnectionID) {

package.json

@@ -10,3 +10,3 @@ {
   "description": "A library for generating an interactive SVG visualization of CWL workflows",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "scripts": {
@@ -13,0 +13,0 @@ "webpack:watch": "node_modules/.bin/webpack --watch"

No alert changes

Improved metrics

Total package byte prevSize

185466

increased by1.42%

Lines of code

2138

increased by1.52%

No dependency changes