Fix css lint error & apply

togostanza · May 29, 2024 · ed64e70 · ed64e70
1 parent 71684c2
commit ed64e70
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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);
+    }
+  }
+}