docs: use edge style function to style edges on node select

2022-06-23 23:25:47 +02:00
parent 097b859e26
commit c27c895f88
2 changed files with 9 additions and 7 deletions
@@ -30,12 +30,6 @@ const updatePos = () => {
    fitView({ duration: 1000, padding: 0.5 })
  })
 }
-
-onNodeClick(({ connectedEdges }) => {
-  connectedEdges.forEach((edge) => {
-    edge.style = { stroke: '#10b981', strokeWidth: 3 }
-  })
-})
 </script>

 <template>
@@ -17,7 +17,15 @@ export function getElements(xElements = 10, yElements = 10) {
      initialNodes.push(node)

      if (recentNodeId && nodeId <= xElements * yElements) {
-        initialEdges.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() })
+        initialEdges.push({
+          id: `${x}-${y}`,
+          source: recentNodeId.toString(),
+          target: nodeId.toString(),
+          style: (edge) => {
+            if (!edge.sourceNode.selected && !edge.targetNode.selected) return
+            return { stroke: '#10b981', strokeWidth: 3 }
+          },
+        })
      }

      recentNodeId = nodeId