From 784dbc3037536b056a101eb3e40dee1b238df2c7 Mon Sep 17 00:00:00 2001 From: Markus Cozowicz Date: Thu, 10 Nov 2022 11:38:46 +0100 Subject: [PATCH 1/3] add support to connect nodes w/ each other - also supports HTML nodes --- content/index.html | 170 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 163 insertions(+), 7 deletions(-) diff --git a/content/index.html b/content/index.html index db56337..708da53 100644 --- a/content/index.html +++ b/content/index.html @@ -356,6 +356,77 @@ return result; } + function findDataNode(elem) { + if (!elem) + return undefined; + + if (elem.attributes && elem.attributes['data-name']) + return elem; + + return findDataNode(elem.parentElement); + } + + function isNonEmptyTextNode(elem) { + return elem.nodeName && + (elem.nodeName == "#text" || elem.nodeName == "text") && + elem.textContent && + elem.textContent.trim().length > 0 ; + } + + function findNextText(elem) { + if (isNonEmptyTextNode(elem)) + return elem.textContent; + + if (!elem.parentElement) + return undefined; + + siblings = elem.parentElement.childNodes; + + // skip until we find the originating node + i = 0; + for (;i 5 || + Math.abs(arrow.attr("y1") - evt.y) > 5) + arrow.attr("marker-end", "url(#triangle)"); + + arrow + .attr("x2", evt.x) + .attr("y2", evt.y); + } + }); + + dragHandler(d3.select("svg").select("g")); + $(document).keydown(function (evt) { // press escape to cancel highlight if (evt.keyCode == 27) { From 9a5e88e33fccb60c82ac384af2cce3e4be10f717 Mon Sep 17 00:00:00 2001 From: Markus Cozowicz Date: Thu, 10 Nov 2022 18:46:43 +0100 Subject: [PATCH 2/3] fix dragging of canvas --- content/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/content/index.html b/content/index.html index 708da53..c3982fc 100644 --- a/content/index.html +++ b/content/index.html @@ -532,7 +532,7 @@ var fill = "black"; - arrow = d3.select("svg").append('line') + arrow = d3.select("svg").select("g").append('line') .style("stroke", fill) .style("opacity", 0.8) .style("stroke-width", 2) @@ -581,7 +581,8 @@ } }); - dragHandler(d3.select("svg").select("g")); + // skip the first level to allow drag of the canvas + dragHandler(d3.select("svg").select("g").selectAll("g")); $(document).keydown(function (evt) { // press escape to cancel highlight From 8e1e196a19368295d668795a5df3e310b0ee2cfd Mon Sep 17 00:00:00 2001 From: Markus Cozowicz Date: Wed, 23 Nov 2022 08:35:26 +0100 Subject: [PATCH 3/3] support external highlighting --- content/index.html | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/content/index.html b/content/index.html index c3982fc..feca92b 100644 --- a/content/index.html +++ b/content/index.html @@ -339,6 +339,17 @@ else $("#graph").removeClass("vscodeTheme"); break; + case 'highlight': + // TODO: I'm sure this can be done in one line?! + const plainNodes = gv.nodesByName(); + const nodesSelected = Array(); + for (n of message.value) { + nodesSelected.push(plainNodes[n]); + } + const nodes = $(nodesSelected); + + gv.highlight(nodes, true) + break; } }, false); @@ -347,6 +358,9 @@ }; function DomToJsonAttribs(element) { + if (element === null || element === undefined || element.attributes === undefined) + return; + var result = {} const attribs = element.attributes; for (let i = 0; i < attribs.length; i++) { @@ -356,14 +370,14 @@ return result; } - function findDataNode(elem) { - if (!elem) + function findNodeWithAttr(elem, attr) { + if (elem === null || elem === undefined) return undefined; - if (elem.attributes && elem.attributes['data-name']) + if (elem.attributes !== undefined && elem.attributes[attr]) return elem; - return findDataNode(elem.parentElement); + return findNodeWithAttr(elem.parentElement, attr); } function isNonEmptyTextNode(elem) { @@ -446,7 +460,7 @@ gv.nodes().click(function (event) { const set = $(); - var node = findDataNode(event.target); + var node = findNodeWithAttr(event.target, 'data-name'); set.push(node); @@ -468,17 +482,19 @@ command: 'onClick', value: { // I guess: TODO: report which node was clicked node: DomToJsonAttribs(node), + href: DomToJsonAttribs(findNodeWithAttr(event.target, 'href')), text: findNextText(event.target) } }) }) gv.nodes().dblclick(function (event) { - var node = findDataNode(event.target); + var node = findNodeWithAttr(event.target, 'data-name'); vscode.postMessage({ command: 'onDblClick', value: { // I guess: TODO: report which node was clicked, to show the code? node: DomToJsonAttribs(node), + href: DomToJsonAttribs(findNodeWithAttr(event.target, 'href')), text: findNextText(event.target) } }) @@ -486,7 +502,7 @@ gv.clusters().click(function (event) { const set = $(); - var node = findDataNode(event.target); + var node = findNodeWithAttr(event.target, 'data-name'); set.push(node); @@ -508,6 +524,7 @@ command: 'onClick', value: { // I guess: TODO: report which node was clicked node: DomToJsonAttribs(node), + href: DomToJsonAttribs(findNodeWithAttr(event.target, 'href')) } }) }) @@ -521,7 +538,7 @@ var startText = null; dragStart = function(evt) { - startNode = findDataNode(evt.sourceEvent.target); + startNode = findNodeWithAttr(evt.sourceEvent.target, 'data-name'); startText = findNextText(evt.sourceEvent.target); // find closest fill to use the same color for the line @@ -549,7 +566,7 @@ arrow.remove(); arrow = null; - var destNode = findDataNode(evt.sourceEvent.target); + var destNode = findNodeWithAttr(evt.sourceEvent.target, 'data-name'); vscode.postMessage({ command: 'onConnect', value: {