New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

cwl-svg

Package Overview
Dependencies
Maintainers
1
Versions
75
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cwl-svg - npm Package Compare versions

Comparing version 0.0.35 to 0.0.36

6

graph/edge.js

@@ -14,4 +14,4 @@ "use strict";

var _b = edge.destination.id.split("/"), destSide = _b[0], destStepId = _b[1], destPort = _b[2];
var sourceVertex = containerNode.querySelector("." + sourceStepId + " .output-port ." + sourcePort);
var destVertex = containerNode.querySelector("." + destStepId + " .input-port ." + destPort);
var sourceVertex = containerNode.querySelector(".node[data-id=\"" + sourceStepId + "\"] .output-port[data-port-id=\"" + sourcePort + "\"] .io-port");
var destVertex = containerNode.querySelector(".node[data-id=\"" + destStepId + "\"] .input-port[data-port-id=\"" + destPort + "\"] .io-port");
if (edge.source.type === edge.destination.type) {

@@ -32,3 +32,3 @@ console.error("Cant draw edge between nodes of the same type.", edge);

var pathStr = io_port_1.IOPort.makeConnectionPath(sourceCTM.e, sourceCTM.f, destCTM.e, destCTM.f);
return "\n <g tabindex=\"-1\" class=\"edge " + sourceStepId + " " + destStepId + "\"\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 ";
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 ";
};

@@ -35,0 +35,0 @@ Edge.spawn = function (pathStr, connectionIDs) {

16

graph/graph-node.js

@@ -57,3 +57,3 @@ "use strict";

.reduce(function (acc, tpl) { return acc + tpl; }, "");
return "\n <g tabindex=\"-1\" 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 <g class=\"drag-handle\" transform=\"matrix(1, 0, 0, 1, 0, 0)\">\n <circle cx=\"0\" cy=\"0\" r=\"" + radius + "\" class=\"outer\"></circle>\n <circle cx=\"0\" cy=\"0\" r=\"" + radius * .75 + "\" class=\"inner\"></circle>\n " + GraphNode.makeIconFragment(dataModel) + "\n </g>\n <text transform=\"matrix(1,0,0,1,0," + (radius + 30) + ")\" class=\"title label\">" + (dataModel.label || dataModel.id) + "</text>\n " + inputPortTemplates + "\n " + outputPortTemplates + "\n </g>\n ";
return "\n <g tabindex=\"-1\" class=\"node " + nodeTypeClass + "\"\n data-connection-id=\"" + dataModel.connectionId + "\"\n transform=\"matrix(1, 0, 0, 1, " + x + ", " + y + ")\"\n data-id=\"" + dataModel.id + "\">\n <g class=\"drag-handle\" transform=\"matrix(1, 0, 0, 1, 0, 0)\">\n <circle cx=\"0\" cy=\"0\" r=\"" + radius + "\" class=\"outer\"></circle>\n <circle cx=\"0\" cy=\"0\" r=\"" + radius * .75 + "\" class=\"inner\"></circle>\n " + GraphNode.makeIconFragment(dataModel) + "\n </g>\n <text transform=\"matrix(1,0,0,1,0," + (radius + 30) + ")\" class=\"title label\">" + (dataModel.label || dataModel.id) + "</text>\n " + inputPortTemplates + "\n " + outputPortTemplates + "\n </g>\n ";
};

@@ -64,3 +64,3 @@ GraphNode.makePortTemplate = function (port, type, transform) {

var label = port.label || port.id;
return "\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 "\n <g class=\"port " + portClass + "\" 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\">\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 ";
};

@@ -112,9 +112,9 @@ GraphNode.createPortMatrix = function (totalPortLength, portIndex, radius, type) {

*/
GraphNode.workflowIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" x="-9" y="-9" width="20" height="20"><title>workflow_new</title><circle cx="400.5" cy="249.5" r="99.5"/><circle cx="99.5" cy="99.5" r="99.5"/><circle cx="99.5" cy="400.5" r="99.5"/><g id="Layer_4" data-name="Layer 4"><line x1="99" y1="99" x2="400" y2="249" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px"/><line x1="99" y1="400" x2="400" y2="249" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px"/></g></svg>';
GraphNode.toolIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.07 500.24" x="-10" y="-10" width="20" height="20"><title>tool_new</title><rect x="284.07" y="450.07" width="216" height="50"/><rect x="-34.14" y="117.56" width="353.4" height="50" transform="translate(142.62 -58.98) rotate(45)"/><rect x="-34.15" y="332.53" width="353.47" height="50" transform="translate(496.28 509.58) rotate(135)"/></svg>';
GraphNode.fileInputIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 462.86" y="-10" x="-11" width="20" height="20"><title>file_input</title><g id="Layer_16" data-name="Layer 16"><polygon points="386.06 0 386.06 0 175 0 175 58.29 225 108.29 225 50 365.35 50 449 133.65 449 412.86 225 412.86 225 353.71 175 403.71 175 462.86 499 462.86 499 112.94 386.06 0"/></g><g id="Layer_7_copy" data-name="Layer 7 copy"><polyline points="498.78 138.76 362.93 138.38 362.81 138.38 362.81 1.06" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g><g id="Layer_11_copy" data-name="Layer 11 copy"><polyline points="159 327 255 231 160 136" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/><g id="Layer_9_copy_2" data-name="Layer 9 copy 2"><line y1="231" x2="255" y2="231" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g></g></svg>';
GraphNode.fileOutputIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.36 462.86" x="-9" y="-10" width="20" height="20"><title>file_output</title><g id="Layer_10" data-name="Layer 10"><g id="Layer_9_copy" data-name="Layer 9 copy"><polygon points="274 298.5 274 412.86 50 412.86 50 50 190.35 50 274 133.65 274 163.5 324 163.5 324 112.94 211.06 0 211.06 0 0 0 0 462.86 324 462.86 324 298.5 274 298.5"/></g></g><g id="Layer_7" data-name="Layer 7"><polyline points="323.78 138.76 187.93 138.38 187.81 138.38 187.81 1.06" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g><g id="Layer_11" data-name="Layer 11"><polyline points="376 327 472 231 377 136" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/><g id="Layer_9" data-name="Layer 9"><line x1="217" y1="231" x2="472" y2="231" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g></g></svg>';
GraphNode.inputIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 365" x="-11" y="-10" width="20" height="20"><title>type_input</title><g id="input"><path d="M316.5,68a181.72,181.72,0,0,0-114.12,40.09L238,143.72a132.5,132.5,0,1,1,1.16,214.39L203.48,393.8A182.5,182.5,0,1,0,316.5,68Z" transform="translate(0 -68)"/><g id="Layer_22" data-name="Layer 22"><g id="Layer_9_copy_4" data-name="Layer 9 copy 4"><polygon points="290.36 182 176.68 295.68 141.32 260.32 194.64 207 0 207 0 157 194.64 157 142.32 104.68 177.68 69.32 290.36 182"/></g></g></g></svg>';
GraphNode.outputIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.36 365" x="-9" y="-10" width="20" height="20"><title>type_output</title><g id="output"><path d="M291.95,325.23a134,134,0,0,1-15.76,19,132.5,132.5,0,1,1,0-187.38,133.9,133.9,0,0,1,16.16,19.55l35.81-35.81A182.5,182.5,0,1,0,327.73,361Z" transform="translate(0 -68)"/><g id="circle_source_copy" data-name="circle source copy"><g id="Layer_22_copy" data-name="Layer 22 copy"><g id="Layer_9_copy_5" data-name="Layer 9 copy 5"><polygon points="500.36 182 386.68 295.68 351.32 260.32 404.64 207 210 207 210 157 404.64 157 352.32 104.68 387.68 69.32 500.36 182"/></g></g></g></g></svg>';
GraphNode.workflowIconSvg = '<svg class="node-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" x="-9" y="-9" width="20" height="20"><title>workflow_new</title><circle cx="400.5" cy="249.5" r="99.5"/><circle cx="99.5" cy="99.5" r="99.5"/><circle cx="99.5" cy="400.5" r="99.5"/><g id="Layer_4" data-name="Layer 4"><line x1="99" y1="99" x2="400" y2="249" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px"/><line x1="99" y1="400" x2="400" y2="249" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:40px"/></g></svg>';
GraphNode.toolIconSvg = '<svg class="node-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.07 500.24" x="-10" y="-10" width="20" height="20"><title>tool_new</title><rect x="284.07" y="450.07" width="216" height="50"/><rect x="-34.14" y="117.56" width="353.4" height="50" transform="translate(142.62 -58.98) rotate(45)"/><rect x="-34.15" y="332.53" width="353.47" height="50" transform="translate(496.28 509.58) rotate(135)"/></svg>';
GraphNode.fileInputIconSvg = '<svg class="node-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 462.86" y="-10" x="-11" width="20" height="20"><title>file_input</title><g id="Layer_16" data-name="Layer 16"><polygon points="386.06 0 386.06 0 175 0 175 58.29 225 108.29 225 50 365.35 50 449 133.65 449 412.86 225 412.86 225 353.71 175 403.71 175 462.86 499 462.86 499 112.94 386.06 0"/></g><g id="Layer_7_copy" data-name="Layer 7 copy"><polyline points="498.78 138.76 362.93 138.38 362.81 138.38 362.81 1.06" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g><g id="Layer_11_copy" data-name="Layer 11 copy"><polyline points="159 327 255 231 160 136" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/><g id="Layer_9_copy_2" data-name="Layer 9 copy 2"><line y1="231" x2="255" y2="231" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g></g></svg>';
GraphNode.fileOutputIconSvg = '<svg class="node-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.36 462.86" x="-9" y="-10" width="20" height="20"><title>file_output</title><g id="Layer_10" data-name="Layer 10"><g id="Layer_9_copy" data-name="Layer 9 copy"><polygon points="274 298.5 274 412.86 50 412.86 50 50 190.35 50 274 133.65 274 163.5 324 163.5 324 112.94 211.06 0 211.06 0 0 0 0 462.86 324 462.86 324 298.5 274 298.5"/></g></g><g id="Layer_7" data-name="Layer 7"><polyline points="323.78 138.76 187.93 138.38 187.81 138.38 187.81 1.06" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g><g id="Layer_11" data-name="Layer 11"><polyline points="376 327 472 231 377 136" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/><g id="Layer_9" data-name="Layer 9"><line x1="217" y1="231" x2="472" y2="231" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:50px"/></g></g></svg>';
GraphNode.inputIconSvg = '<svg class="node-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 365" x="-11" y="-10" width="20" height="20"><title>type_input</title><g id="input"><path d="M316.5,68a181.72,181.72,0,0,0-114.12,40.09L238,143.72a132.5,132.5,0,1,1,1.16,214.39L203.48,393.8A182.5,182.5,0,1,0,316.5,68Z" transform="translate(0 -68)"/><g id="Layer_22" data-name="Layer 22"><g id="Layer_9_copy_4" data-name="Layer 9 copy 4"><polygon points="290.36 182 176.68 295.68 141.32 260.32 194.64 207 0 207 0 157 194.64 157 142.32 104.68 177.68 69.32 290.36 182"/></g></g></g></svg>';
GraphNode.outputIconSvg = '<svg class="node-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500.36 365" x="-9" y="-10" width="20" height="20"><title>type_output</title><g id="output"><path d="M291.95,325.23a134,134,0,0,1-15.76,19,132.5,132.5,0,1,1,0-187.38,133.9,133.9,0,0,1,16.16,19.55l35.81-35.81A182.5,182.5,0,1,0,327.73,361Z" transform="translate(0 -68)"/><g id="circle_source_copy" data-name="circle source copy"><g id="Layer_22_copy" data-name="Layer 22 copy"><g id="Layer_9_copy_5" data-name="Layer 9 copy 5"><polygon points="500.36 182 386.68 295.68 351.32 260.32 404.64 207 210 207 210 157 404.64 157 352.32 104.68 387.68 69.32 500.36 182"/></g></g></g></g></svg>';
exports.GraphNode = GraphNode;
//# sourceMappingURL=graph-node.js.map

2

graph/workflow.d.ts

@@ -38,3 +38,3 @@ import { WorkflowModel } from "cwlts/models";

private disableManipulations;
private handlersToBeDisabled;
private handlersThatCanBeDisabled;
constructor(svgRoot: SVGSVGElement, model: WorkflowModel);

@@ -41,0 +41,0 @@ command(event: string, ...data: any[]): void;

110

graph/workflow.js

@@ -55,3 +55,3 @@ "use strict";

this.disableManipulations = false;
this.handlersToBeDisabled = [];
this.handlersThatCanBeDisabled = [];
this.svgRoot = svgRoot;

@@ -232,12 +232,78 @@ this.model = model;

});
var danglingNodeKeys = Object.keys(danglingNodes).sort(function (a, b) {
var aIsInput = a.indexOf("out/") > -1;
var aIsOutput = a.indexOf("in/") > -1;
var bIsInput = b.indexOf("out/") > -1;
var bIsOutput = b.indexOf("in/") > -1;
if (aIsOutput) {
if (bIsOutput) {
return a.toLowerCase().localeCompare(b.toLowerCase());
}
else {
return 1;
}
}
else if (aIsInput) {
if (bIsOutput) {
return -1;
}
if (bIsInput) {
return a.toLowerCase().localeCompare(b.toLowerCase());
}
else {
return 1;
}
}
else {
if (!bIsOutput && !bIsInput) {
return a.toLowerCase().localeCompare(b.toLowerCase());
}
else {
return -1;
}
}
});
var danglingNodeMarginOffset = 30;
var danglingNodeSideLength = graph_node_1.GraphNode.radius * 5;
var danglingNodeCount = Object.keys(danglingNodes).length;
var danglingRowBreakpoint = Math.floor(distributionAreaWidth / danglingNodeSideLength);
Object.keys(danglingNodes).forEach(function (connectionID, index) {
var maxNodeHeightInRow = 0;
var row = 0;
var indexWidthMap = new Map();
var rowMaxHeightMap = new Map();
xOffset = 0;
var danglingRowAreaWidth = Math.max(distributionAreaWidth, danglingNodeSideLength * 3);
danglingNodeKeys.forEach(function (connectionID, index) {
var el = danglingNodes[connectionID];
var left = (index % danglingRowBreakpoint) * danglingNodeSideLength;
var top = maxYOffset
+ danglingNodeSideLength
+ ((index % 3) * danglingNodeSideLength / 3)
+ Math.floor(index / danglingRowBreakpoint);
var rect = el.firstElementChild.getBoundingClientRect();
indexWidthMap.set(index, rect.width);
if (xOffset === 0) {
xOffset -= rect.width / 2;
}
if (rect.height > maxNodeHeightInRow) {
maxNodeHeightInRow = rect.height;
}
xOffset += rect.width + danglingNodeMarginOffset + Math.max(150 - rect.width, 0);
if (xOffset >= danglingRowAreaWidth && index < danglingNodeKeys.length - 1) {
rowMaxHeightMap.set(row++, maxNodeHeightInRow);
maxNodeHeightInRow = 0;
xOffset = 0;
}
});
rowMaxHeightMap.set(row, maxNodeHeightInRow);
var colYOffset = maxYOffset;
xOffset = 0;
row = 0;
danglingNodeKeys.forEach(function (connectionID, index) {
var el = danglingNodes[connectionID];
var width = indexWidthMap.get(index);
var rowHeight = rowMaxHeightMap.get(row);
var left = xOffset + width / 2;
var top = colYOffset
+ danglingNodeMarginOffset
+ Math.ceil(rowHeight / 2)
+ ((xOffset === 0 ? 0 : left) / danglingRowAreaWidth) * danglingNodeSideLength;
if (xOffset === 0) {
left -= width / 2;
xOffset -= width / 2;
}
xOffset += width + danglingNodeMarginOffset + Math.max(150 - width, 0);
var matrix = svg_utils_1.SVGUtils.createMatrix().translate(left, top);

@@ -247,2 +313,8 @@ var modelEntry = _this.model.findById(el.getAttribute("data-connection-id"));

_this.setModelPosition(modelEntry, matrix.e, matrix.f, false);
if (xOffset >= danglingRowAreaWidth) {
colYOffset += Math.ceil(rowHeight) + danglingNodeMarginOffset;
xOffset = 0;
maxNodeHeightInRow = 0;
row++;
}
});

@@ -339,3 +411,3 @@ this.redrawEdges();

this.model.on("step.change", function (change) {
var title = _this.workflow.querySelector(".node.step." + change.connectionId + " .title");
var title = _this.workflow.querySelector(".node.step[data-id=\"" + change.connectionId + "\"] .title");
if (title) {

@@ -506,3 +578,3 @@ title.textContent = change.label;

var newY;
this.handlersToBeDisabled.push(this.domEvents.drag(".node .drag-handle", function (dx, dy, ev, handle) {
this.handlersThatCanBeDisabled.push(this.domEvents.drag(".node .drag-handle", function (dx, dy, ev, handle) {
var nodeEl = handle.parentNode;

@@ -718,4 +790,4 @@ var sdx, sdy;

var destPort = el.getAttribute("data-destination-port");
Array.from(this.workflow.querySelectorAll(".node." + sourceNode + " .output-port." + sourcePort + ", "
+ (".node." + destNode + " .input-port." + destPort))).forEach(function (el) {
Array.from(this.workflow.querySelectorAll(".node[data-id=\"" + sourceNode + "\"] .output-port[data-port-id=\"" + sourcePort + "\"], "
+ (".node[data-id=\"" + destNode + "\"] .input-port[data-port-id=\"" + destPort + "\"]"))).forEach(function (el) {
el.classList.add("highlighted");

@@ -789,3 +861,3 @@ });

var _this = this;
this.handlersToBeDisabled.push(this.domEvents.on("keyup", function (ev) {
this.handlersThatCanBeDisabled.push(this.domEvents.on("keyup", function (ev) {
if (!(ev.target instanceof SVGElement && ev.target.ownerSVGElement === _this.svgRoot)) {

@@ -850,3 +922,3 @@ return;

var portToOriginTransformation;
this.handlersToBeDisabled.push(this.domEvents.drag(".port", function (dx, dy, ev, target) {
this.handlersThatCanBeDisabled.push(this.domEvents.drag(".port", function (dx, dy, ev, target) {
// Gather the necessary positions that we need in order to draw a path

@@ -1158,7 +1230,7 @@ var ctm = target.getScreenCTM();

var nodeID = el.getAttribute("data-id");
Array.from(this.workflow.querySelectorAll(".edge." + nodeID)).forEach(function (edge) {
Array.from(this.workflow.querySelectorAll(".edge[data-source-node=\"" + nodeID + "\"], .edge[data-destination-node=\"" + nodeID + "\"]")).forEach(function (edge) {
edge.classList.add("highlighted");
var sourceNodeID = edge.getAttribute("data-source-node");
var destinationNodeID = edge.getAttribute("data-destination-node");
Array.from(_this.workflow.querySelectorAll(".node." + sourceNodeID + ", .node." + destinationNodeID))
Array.from(_this.workflow.querySelectorAll(".node[data-id=\"" + sourceNodeID + "\"], .node[data-id=\"" + destinationNodeID + "\"]"))
.forEach(function (el) { return el.classList.add("highlighted"); });

@@ -1174,4 +1246,4 @@ });

this.disableManipulations = true;
for (var i = 0; i < this.handlersToBeDisabled.length; i++) {
this.handlersToBeDisabled[i]();
for (var i = 0; i < this.handlersThatCanBeDisabled.length; i++) {
this.handlersThatCanBeDisabled[i]();
}

@@ -1178,0 +1250,0 @@ };

2

package.json

@@ -10,3 +10,3 @@ {

"description": "A library for generating an interactive SVG visualization of CWL workflows",
"version": "0.0.35",
"version": "0.0.36",
"scripts": {

@@ -13,0 +13,0 @@ "webpack:watch": "node_modules/.bin/webpack --watch"

1

utils/dom-events.d.ts

@@ -10,3 +10,4 @@ export declare class DomEvents {

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;
detachHandlers(evName: string, root?: any): EventListener[];
detachAll(): void;
}

34

utils/dom-events.js

@@ -63,2 +63,3 @@ "use strict";

var threshold = 3;
var mouseOverListeners;
var onMouseDown = function (ev, el, root) {

@@ -70,2 +71,3 @@ dragging = true;

ev.preventDefault();
mouseOverListeners = _this.detachHandlers("mouseover");
document.addEventListener("mousemove", moveHandler);

@@ -110,2 +112,7 @@ document.addEventListener("mouseup", upHandler);

document.removeEventListener("mousemove", moveHandler);
for (var i in mouseOverListeners) {
_this.root.addEventListener("mouseover", mouseOverListeners[i]);
_this.handlers.get(_this.root)["mouseover"] = [];
_this.handlers.get(_this.root)["mouseover"].push(mouseOverListeners[i]);
}
};

@@ -138,6 +145,17 @@ return off;

};
DomEvents.prototype.detachAll = function () {
DomEvents.prototype.detachHandlers = function (evName, root) {
root = root || this.root;
var eventListeners = [];
this.handlers.forEach(function (handlers, listenerRoot) {
if (listenerRoot.id !== root.id || listenerRoot !== root) {
return;
}
var _loop_1 = function (eventName) {
handlers[eventName].forEach(function (handler) { return listenerRoot.removeEventListener(eventName, handler); });
if (eventName !== evName) {
return "continue";
}
handlers[eventName].forEach(function (handler) {
eventListeners.push(handler);
listenerRoot.removeEventListener(eventName, handler);
});
};

@@ -148,2 +166,14 @@ for (var eventName in handlers) {

});
delete this.handlers.get(this.root)[evName];
return eventListeners;
};
DomEvents.prototype.detachAll = function () {
this.handlers.forEach(function (handlers, listenerRoot) {
var _loop_2 = function (eventName) {
handlers[eventName].forEach(function (handler) { return listenerRoot.removeEventListener(eventName, handler); });
};
for (var eventName in handlers) {
_loop_2(eventName);
}
});
this.handlers.clear();

@@ -150,0 +180,0 @@ };

assets/styles/style.scss

Sorry, the diff of this file is not supported yet

graph/edge.js.map

Sorry, the diff of this file is not supported yet

graph/graph-node.js.map

Sorry, the diff of this file is not supported yet

graph/workflow.js.map

Sorry, the diff of this file is not supported yet

utils/dom-events.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc