diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue index 5e3a189d..905bf40c 100644 --- a/src/container/ZoomPane/ZoomPane.vue +++ b/src/container/ZoomPane/ZoomPane.vue @@ -196,6 +196,7 @@ invoke(async () => { toObject: onLoadToObject(store), } store.hooks.load.trigger(instance) + store.isReady = true }) watch( diff --git a/src/index.ts b/src/index.ts index f825737d..a135ed25 100644 --- a/src/index.ts +++ b/src/index.ts @@ -22,6 +22,7 @@ export { default as useZoomPanHelper } from './composables/useZoomPanHelper' export { default as useVueFlow } from './composables/useVueFlow' export { default as useHandle } from './composables/useHandle' export { default as useKeyPress } from './composables/useKeyPress' +export { defaultEdgeTypes, defaultNodeTypes } from './store' export * from './additional-components' export * from './types' diff --git a/src/store/flowStore.ts b/src/store/flowStore.ts index b584f47d..eddf29c9 100644 --- a/src/store/flowStore.ts +++ b/src/store/flowStore.ts @@ -4,21 +4,7 @@ import { parseElements } from './utils' import { FlowState, Node, FlowActions, Elements, NodeType, EdgeType, FlowGetters, Edge } from '~/types' import { clampPosition, getDimensions, getConnectedEdges, getNodesInside, getRectOfNodes, isNode } from '~/utils' import { getHandleBounds } from '~/components/Nodes/utils' -import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes' -import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges' - -const defaultNodeTypes: Record = { - input: InputNode as NodeType, - default: DefaultNode as NodeType, - output: OutputNode as NodeType, -} - -const defaultEdgeTypes: Record = { - default: BezierEdge as EdgeType, - straight: StraightEdge as EdgeType, - step: StepEdge as EdgeType, - smoothstep: SmoothStepEdge as EdgeType, -} +import { defaultEdgeTypes, defaultNodeTypes } from '~/store/index' const pinia = createPinia() @@ -37,20 +23,14 @@ export default function flowStore( ...preloadedState, }), getters: { - getEdgeTypes() { - let edgeTypes = defaultEdgeTypes - if (Array.isArray(this.edgeTypes)) this.edgeTypes.forEach((type) => (edgeTypes[type] = true)) - else edgeTypes = { ...edgeTypes, ...this.edgeTypes } - return edgeTypes + getEdgeTypes(): Record { + return { ...defaultEdgeTypes, ...this.edgeTypes } }, - getNodeTypes() { - let nodeTypes = defaultNodeTypes - if (Array.isArray(this.nodeTypes)) this.nodeTypes.forEach((type) => (nodeTypes[type] = true)) - else nodeTypes = { ...nodeTypes, ...this.nodeTypes } - return nodeTypes + getNodeTypes(): Record { + return { ...defaultNodeTypes, ...this.nodeTypes } }, - getNodes() { - const n: Node[] = this.onlyRenderVisibleElements + getNodes(): Node[] { + const n = this.onlyRenderVisibleElements ? this.nodes && getNodesInside( this.nodes, diff --git a/src/store/index.ts b/src/store/index.ts index 3e6f0bde..0aaed1a7 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,5 +1,20 @@ -import { ConnectionMode, FlowState } from '~/types' +import { ConnectionMode, EdgeType, FlowState, NodeType } from '~/types' import { createHooks } from '~/composables' +import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes' +import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges' + +export const defaultNodeTypes: Record = { + input: InputNode as NodeType, + default: DefaultNode as NodeType, + output: OutputNode as NodeType, +} + +export const defaultEdgeTypes: Record = { + default: BezierEdge as EdgeType, + straight: StraightEdge as EdgeType, + step: StepEdge as EdgeType, + smoothstep: SmoothStepEdge as EdgeType, +} export const initialState = (): FlowState => ({ dimensions: { @@ -7,8 +22,8 @@ export const initialState = (): FlowState => ({ height: 0, }, transform: [0, 0, 1], - nodeTypes: [], - edgeTypes: [], + nodeTypes: defaultNodeTypes, + edgeTypes: defaultEdgeTypes, elements: [], nodes: [], edges: [],