enable highlighting layered graph text

stanzas/layered-graph/index.js

@@ -20,6 +20,8 @@ import {
 } from "togostanza-utils";
 
 export default class ForceGraph extends Stanza {
+  _graphArea;
+
   menu() {
     return [
       downloadSvgMenuItem(this, "graph-3d-circle"),
@@ -251,6 +253,8 @@ export default class ForceGraph extends Stanza {
       )
       .append("g");
 
+    this._graphArea = svgG;
+
     var mx, my, mouseX, mouseY;
 
     const point3d = _3d()
@@ -704,6 +708,21 @@ export default class ForceGraph extends Stanza {
       });
       this.tooltip.setup(el.querySelectorAll("[data-tooltip]"));
     }
+
+    if (this.params["event-outgoing_change_selected_nodes"]) {
+      const nodeGroups = this._graphArea.selectAll(".node-g");
+      nodeGroups.on("click", (_, d) => {
+        const clickedNode = prepNodes.find(({ id }) => id === d.id);
+        console.log(clickedNode);
+        return emitSelectedEvent.apply(null, [this, clickedNode.id]);
+      });
+    }
+  }
+
+  handleEvent(event) {
+    if (this.params["event-incoming_change_selected_nodes"]) {
+      changeSelectedStyle.apply(null, [this, event.detail]);
+    }
   }
 }
 
@@ -742,3 +761,29 @@ function getMarginsFromCSSString(str) {
 
   return res;
 }
+
+function emitSelectedEvent(graph, id) {
+  console.log(graph, id);
+  const nodeGroups = graph._graphArea.selectAll(".node-g");
+  const filteredNodes = nodeGroups.filter(".-selected");
+  const ids = filteredNodes.data().map((datum) => datum.id);
+  if (!ids.includes(id)) {
+    ids.push(id);
+  } else {
+    ids.splice(ids.indexOf(id), 1);
+  }
+
+  // dispatch event
+  graph.element.dispatchEvent(
+    new CustomEvent("changeSelectedNodes", {
+      detail: ids,
+    })
+  );
+}
+
+function changeSelectedStyle(graph, ids) {
+  const nodeGroups = graph._graphArea.selectAll("g.node-g");
+  nodeGroups.classed("-selected", (d) => {
+    return ids.includes(d.id);
+  });
+}

stanzas/layered-graph/style.scss

@@ -36,6 +36,11 @@ g.node-g {
       stroke-width: calc(var(--togostanza-border-width) * 2.5px);
     }
   }
+  &.-selected {
+    text {
+      fill: var(--togostanza-theme-selected_border_color);
+    }
+  }
   &.half-active {
     > .node-label {
       stroke-opacity: 0.5;