diff --git a/stanzas/force-graph/drawForceLayout.js b/stanzas/force-graph/drawForceLayout.js index 90d185ec..6b01be5a 100644 --- a/stanzas/force-graph/drawForceLayout.js +++ b/stanzas/force-graph/drawForceLayout.js @@ -246,44 +246,5 @@ export default function ( if (highlightAdjEdges) { addHighlightOnHover(symbols, nodes, nodeGroups, links); - // nodeGroups.on("mouseover", function (e, d) { - // if (isDragging) { - // return; - // } - // // highlight current node - // d3.select(this).classed("active", true); - // // fade out all other nodes, highlight a little connected ones - // nodeGroups - // .classed("fadeout", (p) => d !== p) - // .classed("half-active", (p) => { - // return ( - // p !== d && - // d[symbols.edgeSym].some( - // (edge) => - // edge[symbols.sourceNodeSym] === p || - // edge[symbols.targetNodeSym] === p - // ) - // ); - // }); - - // // fadeout not connected edges, highlight connected ones - // links - // .classed("fadeout", (p) => !d[symbols.edgeSym].includes(p)) - // .classed("active", (p) => d[symbols.edgeSym].includes(p)); - // }); - - // nodeGroups.on("mouseleave", function () { - // if (isDragging) { - // return; - // } - // links - // .classed("active", false) - // .classed("fadeout", false) - // .classed("half-active", false); - // nodeGroups - // .classed("active", false) - // .classed("fadeout", false) - // .classed("half-active", false); - // }); } } diff --git a/stanzas/force-graph/index.js b/stanzas/force-graph/index.js index b8ba92b3..68a44bcf 100644 --- a/stanzas/force-graph/index.js +++ b/stanzas/force-graph/index.js @@ -22,7 +22,7 @@ import { export default class ForceGraph extends MetaStanza { _graphArea; selectedEventParams = { - targetElementSelector: ".node-group", + targetElementSelector: ".node", selectedElementClassName: "-selected", selectedElementSelector: ".-selected", idPath: "id", @@ -175,25 +175,27 @@ export default class ForceGraph extends MetaStanza { symbols, }); - this._graphArea.selectAll("circle.node").on("click", (_, d) => { - toggleSelectIds({ - selectedIds: this.selectedIds, - targetId: d.id, - }); - updateSelectedElementClassNameForD3({ - drawing: this._graphArea, - selectedIds: this.selectedIds, - ...this.selectedEventParams, - }); - if (this.params["event-outgoing_change_selected_nodes"]) { - emitSelectedEvent({ - rootElement: this.element, + if (this.params["event-outgoing_change_selected_nodes"]) { + this._graphArea.selectAll(".node").on("click", (_, d) => { + toggleSelectIds({ + selectedIds: this.selectedIds, targetId: d.id, + }); + updateSelectedElementClassNameForD3({ + drawing: this._graphArea, selectedIds: this.selectedIds, - dataUrl: this.params["data-url"], + ...this.selectedEventParams, }); - } - }); + if (this.params["event-outgoing_change_selected_nodes"]) { + emitSelectedEvent({ + rootElement: this.element, + targetId: d.id, + selectedIds: this.selectedIds, + dataUrl: this.params["data-url"], + }); + } + }); + } }; handleApiError({ diff --git a/stanzas/force-graph/style.scss b/stanzas/force-graph/style.scss index 13ef32a6..1fcc16dd 100644 --- a/stanzas/force-graph/style.scss +++ b/stanzas/force-graph/style.scss @@ -1,10 +1,6 @@ // Load the repository-wide global style here. The actual file is located at ../common.scss for details. @use "@/common.scss"; -svg > defs > marker > path { - fill: var(--togostanza-edge-color); -} - .label, .node, .link, @@ -23,7 +19,6 @@ svg > defs > marker > path { fill: var(--togostanza-theme-series_0_color); stroke: var(--togostanza-border-color); stroke-width: var(--togostanza-border-width); - opacity: var(--togostanza-fadeout-opacity); cursor: pointer; &.-selected { @@ -48,15 +43,26 @@ svg > defs > marker > path { .link { stroke: var(--togostanza-edge-color); - opacity: calc( - var(--togostanza-edge-opacity) * var(--togostanza-fadeout-opacity) - ); - &.-active { - opacity: var(--togostanza-edge-opacity); - } + opacity: var(--togostanza-edge-opacity); + &.-fadeout { opacity: calc( var(--togostanza-fadeout-opacity) * var(--togostanza-edge-opacity) ); } } + +svg { + & > defs > marker > path { + fill: var(--togostanza-edge-color); + } + + &:has(.-selected) { + .node { + opacity: var(--togostanza-fadeout-opacity); + } + .link { + opacity: var(--togostanza-fadeout-opacity); + } + } +}