animar node clicado

Piemontez · May 21, 2024 · a1bd689 · a1bd689
1 parent 151ad8c
commit a1bd689
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/core/contexts/NodeStore.ts b/src/core/contexts/NodeStore.ts
@@ -10,7 +10,7 @@ import nodeStoreToJson from '../utils/nodeStoreToJson';
 import { CustomNodeType } from '../types/custom-node-type';
 import { useNotificationStore } from '../../ide/components/Notification/store';
 import { create } from 'zustand';
-import { STORAGE_NODESTORE_ID } from '../../ide/commons/consts';
+import { EDGE_IN_COLOR, EDGE_OUT_COLOR, STORAGE_NODESTORE_ID } from '../../ide/commons/consts';
 import { useRunnerStore } from './RunnerStore';
 
 const uuidv5Hash = 'c54ab9bc-e083-56f2-9d1e-3eec4bcc93ad';
@@ -303,7 +303,29 @@ export const useNodeStore = create<NodeState>((set, get) => ({
   },
 
   onNodeClick: (_: MouseEvent, node: CVFNode) => {
-    set({ currentElement: node });
+    // Retira animação do antigo nó clicado
+    const edges = get().edges;
+    if (get().currentElement) {
+      edges
+        .filter((edge) => [edge.source, edge.target].includes(get().currentElement!.id))
+        .forEach((edge) => {
+          edge.animated = false;
+          edge.style = undefined;
+        });
+    }
+    // Inicia animação do nó clicado
+    edges
+      .filter((edge) => [edge.source, edge.target].includes(node.id))
+      .forEach((edge) => {
+        edge.animated = true;
+        edge.style = {
+          //
+          stroke: edge.target === node.id ? EDGE_IN_COLOR : EDGE_OUT_COLOR,
+          strokeWidth: 2,
+        };
+      });
+
+    set({ currentElement: node, edges: [...edges] });
   },
 
   refreshCurrentElement: () => {

diff --git a/src/ide/commons/consts.ts b/src/ide/commons/consts.ts
@@ -1,3 +1,5 @@
+export const EDGE_IN_COLOR = '#f48fb1';
+export const EDGE_OUT_COLOR = '#0CEAC5';
 export const STORAGE_NODESTORE_ID = 'NodeStore';
 export const STORAGE_DARK_MODE = 'color_mode';
 export const ZOOM_BOX_SIZE = 50;