Skip to content

add support to connect nodes w/ each other #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add support to connect nodes w/ each other #141

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
784dbc3
add support to connect nodes w/ each other
eisber Nov 10, 2022
9a5e88e
fix dragging of canvas
eisber Nov 10, 2022
8e1e196
support external highlighting
eisber Nov 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 181 additions & 7 deletions content/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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++) {
Expand All @@ -356,6 +370,77 @@
return result;
}

function findNodeWithAttr(elem, attr) {
if (elem === null || elem === undefined)
return undefined;

if (elem.attributes !== undefined && elem.attributes[attr])
return elem;

return findNodeWithAttr(elem.parentElement, attr);
}

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<siblings.length;i++)
if (siblings[i] == elem)
break;

// check if any of the sibling is a non empty text node
for (;i<siblings.length;i++)
if (isNonEmptyTextNode(siblings[i]))
return siblings[i].textContent;

// recurse up
return findNextText(elem.parentElement);
}

function addArrowMarker() {
d3.select("svg").append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 1.5)
.attr("refY", 1.5)
.attr("markerWidth", 5)
.attr("markerHeight", 5)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 3 1.5 0 3 0.75 1.5")
.style("fill", "black");
}

// function findClosestFill(elem) {
// if (!elem)
// return undefined;

// if (elem.style && elem.style("fill"))
// return elem.style("fill");

// if (!elem.parentElement || !elem.parentElement.childNodes)
// return undefined;

// for (sibling in elem.parentElement.childNodes)
// if (sibling.style && sibling.style("fill"))
// return sibling.style("fill");

// return findClosestFill(elem.parentElement);
// }

$(document).ready(function () {
// this inits the graphviz object from jquery.grapviz.svg.js
$("#graph").graphviz({
Expand All @@ -365,11 +450,19 @@
shrink: null,
zoom: false,
ready: function () {
gv = this
gv = this;

// remove pointer-events attr to make sure events are hitting HTML elements
gv.nodes().each(function () {
$(this).removeAttr("pointer-events");
});

gv.nodes().click(function (event) {
const set = $();
set.push(this);

var node = findNodeWithAttr(event.target, 'data-name');

set.push(node);

var obj = {
set: set,
Expand All @@ -388,22 +481,30 @@
vscode.postMessage({
command: 'onClick', value: {
// I guess: TODO: report which node was clicked
node: DomToJsonAttribs(this),
node: DomToJsonAttribs(node),
href: DomToJsonAttribs(findNodeWithAttr(event.target, 'href')),
text: findNextText(event.target)
}
})
})
gv.nodes().dblclick(function () {
gv.nodes().dblclick(function (event) {
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(this),
node: DomToJsonAttribs(node),
href: DomToJsonAttribs(findNodeWithAttr(event.target, 'href')),
text: findNextText(event.target)
}
})
})

gv.clusters().click(function (event) {
const set = $();
set.push(this);
var node = findNodeWithAttr(event.target, 'data-name');

set.push(node);

var obj = {
set: set,
Expand All @@ -422,11 +523,84 @@
vscode.postMessage({
command: 'onClick', value: {
// I guess: TODO: report which node was clicked
node: DomToJsonAttribs(this),
node: DomToJsonAttribs(node),
href: DomToJsonAttribs(findNodeWithAttr(event.target, 'href'))
}
})
})


addArrowMarker();

// local state
var arrow = null;
var startNode = null;
var startText = null;

dragStart = function(evt) {
startNode = findNodeWithAttr(evt.sourceEvent.target, 'data-name');
startText = findNextText(evt.sourceEvent.target);

// find closest fill to use the same color for the line
// TODO: not optimal if it's white...
// var fill = findClosestFill(d3.select(evt.sourceEvent.target));
// if (!fill || fill == "white")
// fill = "black";

var fill = "black";

arrow = d3.select("svg").select("g").append('line')
.style("stroke", fill)
.style("opacity", 0.8)
.style("stroke-width", 2)
.style("opacity", 0.6)
.attr("x1", evt.x)
.attr("y1", evt.y)
.attr("x2", evt.x)
.attr("y2", evt.y);
}

dragEnd = function(evt) {
if (arrow) {
// reset local state
arrow.remove();
arrow = null;

var destNode = findNodeWithAttr(evt.sourceEvent.target, 'data-name');

vscode.postMessage({
command: 'onConnect', value: {
source: {
node: DomToJsonAttribs(startNode),
text: startText
},
destination: {
node: DomToJsonAttribs(destNode),
text: findNextText(evt.sourceEvent.target)
}
}
})
}
}

dragHandler = d3.drag()
.on("start", function(evt) { dragStart(evt); })
.on("end", function(evt) { dragEnd(evt); })
.on("drag", function (evt) {
if (arrow) {
if (Math.abs(arrow.attr("x1") - evt.x) > 5 ||
Math.abs(arrow.attr("y1") - evt.y) > 5)
arrow.attr("marker-end", "url(#triangle)");

arrow
.attr("x2", evt.x)
.attr("y2", evt.y);
}
});

// 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
if (evt.keyCode == 27) {
Expand Down