feat: merge store with props

* if options are passed to useVueFlow, we want to merge them with possibly passed props
* renamed flowStore to stateStore
* fix examples
* add store prop to pass an already existing store to flow

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Basic/Basic.vue

@@ -13,6 +13,7 @@ import {
   isNode,
   removeElements,
   Node,
+  useVueFlow,
 } from '~/index'
 
 const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
@@ -54,6 +55,7 @@ const toggleclasss = () => {
     return el
   })
 }
+useVueFlow()
 </script>
 <template>
   <VueFlow

examples/DragNDrop/DnD.vue

@@ -28,10 +28,7 @@ const onElementsRemove = (elementsToRemove: Elements) => (elements.value = remov
 const onLoad = (instance: FlowInstance) => (flowInstance.value = instance)
 
 const onDrop = (event: DragEvent) => {
-  event.preventDefault()
-
   if (flowInstance.value) {
-    console.log(event.dataTransfer?.getData('application/vueflow'))
     const type = event.dataTransfer?.getData('application/vueflow')
     const position = flowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
     const newNode = {
@@ -40,24 +37,13 @@ const onDrop = (event: DragEvent) => {
       position,
       data: { label: `${type} node` },
     } as Node
-
     elements.value.push(newNode)
   }
 }
 </script>
 <template>
-  <div class="dndflow">
-    <div class="vueflow-wrapper" @drop="onDrop">
-      <VueFlow
-        :elements="elements"
-        @elements-remove="onElementsRemove"
-        @load="onLoad"
-        @connect="onConnect"
-        @dragover="onDragOver"
-      >
-        <Controls />
-      </VueFlow>
-    </div>
+  <div class="dndflow" @drop="onDrop">
+    <VueFlow v-model="elements" @elements-remove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver" />
     <Sidebar />
   </div>
 </template>

examples/Empty/EmptyExample.vue

@@ -38,7 +38,7 @@ const addRandomNode = () => {
 </script>
 <template>
   <VueFlow
-    :elements="elements"
+    v-model="elements"
     @load="onLoad"
     @element-click="onElementClick"
     @elements-remove="onElementsRemove"

examples/Provider/Sidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useStore } from '~/index'
-const store = useStore()
+import { useVueFlow } from '~/index'
+const store = useVueFlow()
 
 const nodes = computed(() => store.nodes)
 const transform = computed(() => store.transform)

examples/RGBFlow/RGBFlow.vue

@@ -22,7 +22,7 @@ const elements = ref<Elements>([
 const el = templateRef<HTMLDivElement>('page', null)
 
 const onLoad = (flowInstance: FlowInstance) => {
-  flowInstance.setTransform({ x: el.value?.clientWidth / 2.2, y: el.value?.clientHeight / 3, zoom: 1.25 })
+  flowInstance.fitView({ padding: 1 })
 }
 const color = ref<Colors>({
   red: 100,
@@ -35,12 +35,15 @@ const store = useVueFlow({
     'rgb': true,
     'rgb-output': true,
   },
+  edgeTypes: {
+    pathfinding: true,
+  },
   zoomOnScroll: false,
 })
 </script>
 <template>
   <div ref="page" class="demo-flow">
-    <VueFlow :elements="elements" @load="onLoad">
+    <VueFlow v-model="elements" @load="onLoad">
       <template #node-rgb="props">
         <RGBNode v-bind="props" :amount="color" @change="onChange" />
       </template>

examples/RGBFlow/RGBOutputNode.vue

@@ -10,7 +10,7 @@ const props = defineProps<RBGOutputNodeProps>()
 <template>
   <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
     <div class="text-md uppercase">{{ props.rgb }}</div>
-    <Handle type="source" :position="Position.Left" />
+    <Handle type="target" :position="Position.Left" />
   </div>
 </template>
 <style>

postcss.config.js

@@ -1,4 +1,3 @@
 module.exports = {
-  inject: true,
   plugins: [require('autoprefixer'), require('postcss-nested')],
 }

src/components/ConnectionLine/ConnectionLine.vue

@@ -22,7 +22,7 @@ const sourceHandle =
     ? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
         (d: HandleElement) => d.id === store.connectionHandleId,
       )
-    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType][0]
+    : store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType ?? 'source'][0]
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf?.width as number) / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf?.height
 const sourceX = props.sourceNode.__rf?.position?.x + sourceHandleX

src/components/Edges/Edge.vue

@@ -20,6 +20,7 @@ const type = store.getEdgeTypes[edgeType] || store.getEdgeTypes.default
 if (!store.getEdgeTypes[edgeType]) {
   console.warn(`Edge type "${edgeType}" not found. Using fallback type "default".`)
 }
+const updating = ref<boolean>(false)
 
 const onEdgeClick = (event: MouseEvent) => {
   if (store.elementsSelectable) {
@@ -63,7 +64,6 @@ const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
   handleEdgeUpdater(event, false)
 }
 
-const updating = ref<boolean>(false)
 const onEdgeUpdaterMouseEnter = () => (updating.value = true)
 
 const onEdgeUpdaterMouseOut = () => (updating.value = false)

src/components/Handle/Handle.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<HandleProps>(), {
 })
 
 const store = useStore()
-const nodeId = inject(NodeId, '')!
+const nodeId = inject(NodeId, '')
 
 const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>

src/composables/useHandle.ts

@@ -67,10 +67,8 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
   hoveredHandle?.classList.remove('vue-flow__handle-connecting')
 }
 
-export default () => {
-  const store = useStore()
-
-  return (
+export default (store = useStore()) =>
+  (
     event: MouseEvent,
     handleId: ElementId,
     nodeId: ElementId,
@@ -93,7 +91,7 @@ export default () => {
 
     if (!flowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
 
-    const handleType = elementEdgeUpdaterType || (elementBelowIsTarget ? 'target' : 'source')
+    const handleType = elementEdgeUpdaterType ?? (elementBelowIsTarget ? 'target' : 'source')
     const containerBounds = flowNode.getBoundingClientRect()
     let recentHoveredHandle: Element
 
@@ -167,4 +165,3 @@ export default () => {
     doc.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject)
     doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
   }
-}

src/composables/useStore.ts

@@ -1,11 +1,11 @@
 import { FlowExportObject, FlowOptions } from '~/types'
-import { useFlowStore, initialState } from '~/store'
+import { useStateStore, initialState } from '~/store'
 import { Store } from '~/context'
 import { onLoadToObject } from '~/utils'
 
 let id = 0
 export default (options?: Partial<FlowOptions>) => {
-  let store = inject(Store, null)!
+  let store = inject(Store, null)
 
   if (!store) {
     const withStorage = options?.storageKey ?? false
@@ -25,7 +25,7 @@ export default (options?: Partial<FlowOptions>) => {
           preloadedState.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
       }
     }
-    store = useFlowStore(storageKey, preloadedState)()
+    store = useStateStore(storageKey, preloadedState)()
     if (withStorage && storageKey === store.$id) {
       const toObject = onLoadToObject(store)
       store.$subscribe(() => {

src/composables/useVueFlow.ts

@@ -1,15 +1,10 @@
-import useHooks from './useHooks'
 import useStore from './useStore'
+import useHooks from './useHooks'
 import { EmitFunc, FlowOptions, FlowStore } from '~/types'
 
-export const initFlow = (emit: EmitFunc, options: Partial<FlowOptions>) => {
-  const store = useStore(options)
-  const hooks = useHooks(store, emit)
-
-  return {
-    store,
-    hooks,
-  }
+export const initFlow = (emit: EmitFunc, store = useStore()) => {
+  useHooks(store, emit)
+  return store
 }
 
 export default (options?: Partial<FlowOptions>): FlowStore => useStore(options)

src/container/VueFlow/VueFlow.vue

@@ -12,6 +12,7 @@ import {
   FlowOptions,
   NodeTypes,
   EdgeTypes,
+  FlowStore,
 } from '../../types'
 import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
 import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
@@ -20,6 +21,8 @@ import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
 import { createHooks, initFlow } from '../../composables'
 
 export interface FlowProps extends Partial<FlowOptions> {
+  id?: string
+  store?: FlowStore
   modelValue?: Elements
   elements?: Elements
   nodeTypes?: NodeTypes
@@ -54,11 +57,11 @@ export interface FlowProps extends Partial<FlowOptions> {
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
-  edgeTypesId?: string
-  nodeTypesId?: string
   storageKey?: string
 }
 
+const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue'])
+
 const props = withDefaults(defineProps<FlowProps>(), {
   modelValue: () => [],
   elements: () => [],
@@ -96,23 +99,22 @@ const props = withDefaults(defineProps<FlowProps>(), {
   panOnScrollMode: PanOnScrollMode.Free,
   paneMoveable: true,
   edgeUpdaterRadius: 10,
-  edgeTypesId: '1',
-  nodeTypesId: '1',
 })
-const emit = defineEmits([...Object.keys(createHooks()), 'update:elements', 'update:modelValue'])
-
-const { store, hooks } = initFlow(emit, props)
+const store = initFlow(emit, props.store)
 const elements = useVModel(props, props.elements.length ? 'elements' : 'modelValue', emit)
 
+const options = Object.assign({}, props, store.$state)
+
 // if there are preloaded elements we overwrite the current elements with the stored ones
 if (store.elements.length) elements.value = store.elements
+
 const init = (opts: typeof props) => {
   for (const opt of Object.keys(opts)) {
     const val = opts[opt as keyof FlowProps]
     if (val && typeof val !== 'undefined') {
       if (typeof val === 'object' && !Array.isArray(val)) {
-        ;(store.$state as any)[opt] = { ...(store.$state as any)[opt], ...val }
-      } else (store.$state as any)[opt] = val
+        ;(store as any)[opt] = { ...(store.$state as any)[opt], ...val }
+      } else (store as any)[opt] = val
     }
   }
   store.setElements(elements.value)
@@ -123,18 +125,9 @@ const init = (opts: typeof props) => {
 }
 onBeforeUnmount(() => store?.$dispose())
 
-store.hooks.load.on(() => init(props))
 onMounted(() => {
-  watch(
-    elements,
-    (val, oldVal) => {
-      nextTick(() => {
-        const hasDiff = diff(val, oldVal)
-        if (hasDiff.length > 0) store.setElements(val)
-      })
-    },
-    { flush: 'pre', deep: true },
-  )
+  init(options)
+  watch(elements, (val) => store.setElements(val), { flush: 'post', deep: true })
   watch(
     () => store.elements,
     (val, oldVal) => {
@@ -143,13 +136,13 @@ onMounted(() => {
         if (hasDiff.length > 0) elements.value = val
       })
     },
-    { flush: 'pre', deep: true },
+    { flush: 'post', deep: true },
   )
   watch(
     () => props,
     (val, oldVal) => {
       const hasDiff = diff(val, oldVal)
-      if (hasDiff.length > 0) init(val)
+      if (hasDiff.length > 0) init({ ...options, ...val })
     },
     { flush: 'pre', deep: true },
   )
@@ -159,34 +152,34 @@ onMounted(() => {
   <div class="vue-flow">
     <Suspense>
       <ZoomPane
-        :selection-key-code="props.selectionKeyCode"
-        :zoom-activation-key-code="props.zoomActivationKeyCode"
-        :default-zoom="props.defaultZoom"
-        :default-position="props.defaultPosition"
-        :zoom-on-scroll="props.zoomOnScroll"
-        :zoom-on-pinch="props.zoomOnPinch"
-        :zoom-on-double-click="props.zoomOnDoubleClick"
-        :pan-on-scroll="props.panOnScroll"
-        :pan-on-scroll-speed="props.panOnScrollSpeed"
-        :pan-on-scroll-mode="props.panOnScrollMode"
-        :pane-moveable="props.paneMoveable"
+        :selection-key-code="store.selectionKeyCode"
+        :zoom-activation-key-code="store.zoomActivationKeyCode"
+        :default-zoom="store.defaultZoom"
+        :default-position="store.defaultPosition"
+        :zoom-on-scroll="store.zoomOnScroll"
+        :zoom-on-pinch="store.zoomOnPinch"
+        :zoom-on-double-click="store.zoomOnDoubleClick"
+        :pan-on-scroll="store.panOnScroll"
+        :pan-on-scroll-speed="store.panOnScrollSpeed"
+        :pan-on-scroll-mode="store.panOnScrollMode"
+        :pane-moveable="store.paneMoveable"
       >
         <template #default="zoomPaneProps">
           <SelectionPane
-            :delete-key-code="props.deleteKeyCode"
-            :multi-selection-key-code="props.multiSelectionKeyCode"
-            :selection-key-code="props.selectionKeyCode"
+            :delete-key-code="store.deleteKeyCode"
+            :multi-selection-key-code="store.multiSelectionKeyCode"
+            :selection-key-code="store.selectionKeyCode"
           >
-            <NodeRenderer :select-nodes-on-drag="props.selectNodesOnDrag">
+            <NodeRenderer :select-nodes-on-drag="store.selectNodesOnDrag">
               <template v-for="nodeName of Object.keys(store.getNodeTypes)" #[`node-${nodeName}`]="nodeProps">
                 <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
               </template>
             </NodeRenderer>
             <EdgeRenderer
-              :connection-line-type="props.connectionLineType"
-              :connection-line-style="props.connectionLineStyle"
-              :arrow-head-color="props.arrowHeadColor"
-              :marker-end-id="props.markerEndId"
+              :connection-line-type="store.connectionLineType"
+              :connection-line-style="store.connectionLineStyle"
+              :arrow-head-color="store.arrowHeadColor"
+              :marker-end-id="store.markerEndId"
             >
               <template v-for="edgeName of Object.keys(store.getEdgeTypes)" #[`edge-${edgeName}`]="edgeProps">
                 <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
@@ -200,7 +193,7 @@ onMounted(() => {
         </template>
       </ZoomPane>
     </Suspense>
-    <slot v-bind="{ ...props, store, hooks }"></slot>
+    <slot v-bind="{ ...props, store }"></slot>
   </div>
 </template>
 <style>

src/store/index.ts

@@ -1,4 +1,4 @@
-import { ConnectionMode, EdgeTypes, FlowState, NodeTypes } from '~/types'
+import { ConnectionMode, EdgeTypes, FlowState, NodeTypes, PanOnScrollMode } from '~/types'
 import { createHooks } from '~/composables'
 import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
@@ -22,8 +22,6 @@ export const initialState = (): FlowState => ({
     height: 0,
   },
   transform: [0, 0, 1],
-  nodeTypes: {},
-  edgeTypes: {},
   elements: [],
   nodes: [],
   edges: [],
@@ -44,6 +42,14 @@ export const initialState = (): FlowState => ({
     [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
     [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
   ],
+  zoomOnScroll: true,
+  zoomOnPinch: true,
+  zoomOnDoubleClick: true,
+  panOnScroll: false,
+  panOnScrollSpeed: 0.5,
+  panOnScrollMode: PanOnScrollMode.Free,
+  paneMoveable: true,
+  edgeUpdaterRadius: 10,
 
   nodesSelectionActive: false,
   selectionActive: false,
@@ -57,6 +63,8 @@ export const initialState = (): FlowState => ({
     height: 0,
     draw: false,
   },
+
+  arrowHeadColor: '#b1b1b7',
   connectionNodeId: undefined,
   connectionHandleId: undefined,
   connectionHandleType: 'source',
@@ -80,4 +88,4 @@ export const initialState = (): FlowState => ({
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })
 
-export { default as useFlowStore } from './flowStore'
+export { default as useStateStore } from './stateStore'

src/types/edge.ts

@@ -22,7 +22,7 @@ export interface Edge<T = any> {
   labelBgStyle?: any
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: CSSProperties
+  style?: CSSProperties | unknown
   animated?: boolean
   arrowHeadType?: ArrowHeadType
   markerEndId?: string

src/types/store.ts

@@ -24,9 +24,9 @@ export interface FlowState extends FlowOptions {
   transform: Transform
   elements: Elements
   nodes: Node[]
-  nodeTypes: NodeTypes
+  nodeTypes?: NodeTypes
   edges: Edge[]
-  edgeTypes: EdgeTypes
+  edgeTypes?: EdgeTypes
   selectedElements?: Elements
   selectedNodesBbox: Rect
 

src/types/types.ts

@@ -3,6 +3,7 @@ import { Edge, EdgeTypes } from './edge'
 import { Node, NodeExtent, NodeTypes, TranslateExtent } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode } from './panel'
+import { FlowStore } from './store'
 
 export type ElementId = string
 
@@ -89,7 +90,9 @@ export type FlowInstance<T = any> = {
 }
 
 export interface FlowOptions {
-  elements: Elements
+  id?: string
+  store?: FlowStore
+  elements?: Elements
   nodeTypes?: NodeTypes
   edgeTypes?: EdgeTypes
   connectionMode?: ConnectionMode
@@ -122,7 +125,5 @@ export interface FlowOptions {
   panOnScrollMode?: PanOnScrollMode
   zoomOnDoubleClick?: boolean
   edgeUpdaterRadius?: number
-  nodeTypesId?: string
-  edgeTypesId?: string
   storageKey?: string
 }