From ec45cd74e972bd106f4794f5629b9fe2d549049e Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 11 Jul 2021 09:31:47 +0200 Subject: [PATCH] fix: create store instance for every revue flow instance --- src/components/Edges/BezierEdge.tsx | 3 --- src/components/Handle/index.tsx | 21 +++++++++++---------- src/container/EdgeRenderer/utils.ts | 1 - src/container/RevueFlow/index.tsx | 28 +++++++++++++++++++++------- src/store/configure-store.ts | 4 ++-- src/store/index.ts | 5 ++--- 6 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index db107d09..925a7f32 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -35,13 +35,10 @@ export function getBezierPath({ let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`; if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) { - console.log('foo'); path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`; } else if (leftAndRight.includes(targetPosition)) { - console.log('bar'); path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`; } else if (leftAndRight.includes(sourcePosition)) { - console.log('baz'); path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`; } diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index a5f07f80..c345f879 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -1,6 +1,6 @@ import { Connection, ElementId, Position } from '../../types'; import { onMouseDown, ValidConnectionFunc } from './handler'; -import { defineComponent, inject, PropType } from 'vue'; +import { computed, defineComponent, inject, PropType } from 'vue'; import store from '../../store'; const alwaysValid = () => true; @@ -41,22 +41,23 @@ const Handle = defineComponent({ setup(props, { slots }) { const pinia = store(); const nodeId = inject('NodeIdContext') as ElementId; - const isTarget = props.type === 'target'; + const isTarget = computed(() => props.type === 'target'); + const onConnect = computed(() => pinia.onConnect); const onConnectExtended = (params: Connection) => { - pinia.onConnect?.(params); + onConnect.value?.(params); props.onConnect?.(params); }; const onMouseDownHandler = (event: MouseEvent) => { onMouseDown( event, - props.id || '', + props.id as string, nodeId, pinia.setConnectionNodeId, pinia.setConnectionPosition, onConnectExtended, - isTarget, + isTarget.value, props.isValidConnection, pinia.connectionMode, undefined, @@ -67,23 +68,23 @@ const Handle = defineComponent({ ); }; - const handleClasses = [ + const handleClasses = computed(() => [ 'revue-flow__handle', `revue-flow__handle-${props.position}`, 'nodrag', { - source: !isTarget, - target: isTarget, + source: !isTarget.value, + target: isTarget.value, connectable: props.isConnectable } - ]; + ]); return () => (
{slots.default ? slots.default() : ''} diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts index cff349cf..c070e82e 100644 --- a/src/container/EdgeRenderer/utils.ts +++ b/src/container/EdgeRenderer/utils.ts @@ -34,7 +34,6 @@ export function getHandlePosition(position: Position, node: Node, handle: any | const width = handle?.width || node.__rf.width; const height = handle?.height || node.__rf.height; - console.log(handle?.x, handle?.y); switch (position) { case Position.Top: return { diff --git a/src/container/RevueFlow/index.tsx b/src/container/RevueFlow/index.tsx index 91fa79cd..5a191305 100644 --- a/src/container/RevueFlow/index.tsx +++ b/src/container/RevueFlow/index.tsx @@ -1,4 +1,14 @@ -import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, onUpdated, PropType } from 'vue'; +import { + computed, + CSSProperties, + defineComponent, + HTMLAttributes, + onBeforeUnmount, + onMounted, + onUpdated, + PropType, + watch +} from 'vue'; import GraphView from '../GraphView'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; @@ -29,7 +39,8 @@ import { } from '../../types'; import '../../style.css'; import '../../theme-default.css'; -import store from '../../store'; +import { initialState } from '../../store'; +import configureStore from '../../store/configure-store'; const defaultNodeTypes = { input: InputNode, @@ -452,14 +463,17 @@ const RevueFlow = defineComponent({ } }, setup(props, { slots }) { - const pinia = store(); - pinia.setElements(props.elements); + const store = configureStore(initialState)(); + watch(props.elements, () => store.setElements(props.elements)); onUpdated(() => { - pinia.setElements(props.elements); + store.setElements(props.elements); + }); + onMounted(() => { + store.setElements(props.elements); }); - onBeforeUnmount(() => { - pinia.setElements([]); + store.$reset(); + store.setElements([]); }); const nodeTypesParsed = computed(() => props.nodeTypes && createNodeTypes(props.nodeTypes)); diff --git a/src/store/configure-store.ts b/src/store/configure-store.ts index f4197405..43301e3f 100644 --- a/src/store/configure-store.ts +++ b/src/store/configure-store.ts @@ -13,12 +13,12 @@ type NextElements = { export default function configureStore( preloadedState: ReactFlowState -): StoreDefinition<'revue-flow', ReactFlowState, any, RevueFlowActionsTree> { +): StoreDefinition { const pinia = inject(Symbol('pinia')) ?? createPinia(); setActivePinia(pinia); return defineStore({ - id: 'revue-flow', + id: 'revue-flow-' + pinia.state.value.length + 1, state: () => preloadedState, getters: {}, actions: { diff --git a/src/store/index.ts b/src/store/index.ts index a040ebdb..56fae12a 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,6 +1,6 @@ import configureStore from './configure-store'; -import { ReactFlowState, ConnectionMode, RevueFlowActionsTree } from '../types'; +import { ReactFlowState, ConnectionMode } from '../types'; export const initialState: ReactFlowState = { width: 0, @@ -58,6 +58,5 @@ export const initialState: ReactFlowState = { const store = configureStore(initialState); -export type RevueFlowDispatch = RevueFlowActionsTree; - +export type StoreType = typeof store; export default store;