diff --git a/src/core/contexts/NodeStore.ts b/src/core/contexts/NodeStore.ts index fe9d5c7..a8deef0 100644 --- 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((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 index f283502..e9e9e5b 100644 --- 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;