update: Pass down values as props instead of relying on store

* store values are passed down by main vue flow component
* store is only used to emit events or if really necessary in the component
* add keys with store id to elements
*

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

examples/Header.vue

@@ -10,7 +10,7 @@ const onChange = (event: any) => {
 </script>
 <template>
   <header>
-    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue VueFlow Dev </a>
+    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
     <select v-model="route.path" @change="onChange">
       <template v-for="r of routes" :key="r.path">
         <option v-if="r.path !== '/'" :value="r.path">

src/components/Nodes/NodeWrapper.vue

@@ -6,13 +6,14 @@ import { ElementId, FlowEvents, GraphNode, Position, SnapGrid, VFInternals, XYPo
 import { NodeId } from '../../context'
 
 interface NodeWrapperProps {
+  id: ElementId
+  position: XYPosition
   node: GraphNode
   vf: VFInternals
   selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
-  id: ElementId
-  position: XYPosition
   type?: string
+  component?: any
   class?: string
   style?: CSSProperties
   data?: any
@@ -23,6 +24,7 @@ interface NodeWrapperProps {
   selectable?: boolean
   connectable?: boolean
   dragHandle?: string
+  scale?: number
 }
 
 interface NodeEvents {
@@ -31,47 +33,61 @@ interface NodeEvents {
   (event: 'mouseLeave', data: FlowEvents['nodeMouseLeave']): void
   (event: 'contextMenu', data: FlowEvents['nodeContextMenu']): void
   (event: 'click', data: FlowEvents['nodeClick']): void
-  (event: 'click', data: FlowEvents['nodeClick']): void
+  (event: 'dblClick', data: FlowEvents['nodeDoubleClick']): void
+  (event: 'dragStart', data: FlowEvents['nodeDragStart']): void
+  (event: 'drag', data: FlowEvents['nodeDrag']): void
+  (event: 'dragStop', data: FlowEvents['nodeDragStop']): void
 }
 
-const props = withDefaults(defineProps<NodeWrapperProps>(), {
+const props = defineProps<NodeWrapperProps>()
-  selected: false,
+const emit = defineEmits<NodeEvents>()
-  selectNodesOnDrag: true,
-})
 
 const store = useStore()
 provide(NodeId, props.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const type = computed(() => {
-  const t = props.type ?? 'default'
-  let node = store.getNodeTypes[t]
-  if (!node) {
-    node = store.getNodeTypes.default
-    console.warn(`Node type "${t}" not found. Using fallback type "default".`)
-  }
-  return node
-})
-
 const selectable = computed(() => (typeof props.selectable === 'undefined' ? store.elementsSelectable : props.selectable))
 const draggable = computed(() => (typeof props.draggable === 'undefined' ? store.nodesDraggable : props.draggable))
 const connectable = computed(() => (typeof props.connectable === 'undefined' ? store.nodesConnectable : props.connectable))
-const scale = computed(() => store.transform[2])
+const scale = computed(() => props.scale)
 const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.id))
 
 const onMouseEnterHandler = () =>
-  props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.vf.isDragging &&
+  ((event: MouseEvent) => {
+    const data = { event, node: props.node }
+    emit('mouseEnter', data)
+    store.hooks.nodeMouseEnter.trigger(data)
+  })
 
 const onMouseMoveHandler = () =>
-  props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.vf.isDragging &&
+  ((event: MouseEvent) => {
+    const data = { event, node: props.node }
+    emit('mouseMove', data)
+    store.hooks.nodeMouseMove.trigger(data)
+  })
 
 const onMouseLeaveHandler = () =>
-  props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.vf.isDragging &&
+  ((event: MouseEvent) => {
+    const data = { event, node: props.node }
+    emit('mouseLeave', data)
+    store.hooks.nodeMouseLeave.trigger(data)
+  })
 
-const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
+const onContextMenuHandler = () => (event: MouseEvent) => {
+  const data = { event, node: props.node }
+  emit('contextMenu', data)
+  store.hooks.nodeContextMenu.trigger(data)
+}
 
-const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
+const onDoubleClick = () => (event: MouseEvent) => {
+  const data = { event, node: props.node }
+  emit('dblClick', data)
+  store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
+}
 
 const onSelectNodeHandler = (event: MouseEvent) => {
   const n = props.node
@@ -80,12 +96,14 @@ const onSelectNodeHandler = (event: MouseEvent) => {
       store.unsetNodesSelection()
       if (!selected.value) store.addSelectedElements([n])
     }
+    emit('click', { event, node: n })
     store.hooks.nodeClick.trigger({ event, node: n })
   }
 }
 
 const onDragStart: DraggableEventListener = ({ event }) => {
   const n = props.node
+  emit('dragStart', { event, node: n })
   store.hooks.nodeDragStart.trigger({ event, node: n })
 
   if (props.selectNodesOnDrag && selectable) {
@@ -102,6 +120,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
   const n = props.node
   n.position.x += data.deltaX
   n.position.y += data.deltaY
+  emit('drag', { event, node: n })
   store.hooks.nodeDrag.trigger({ event, node: n })
 
   store.updateNodePosDiff({
@@ -133,6 +152,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
     isDragging: false,
   })
 
+  emit('dragStop', { event, node: n })
   store.hooks.nodeDragStop.trigger({ event, node: n })
 }
 
@@ -221,7 +241,7 @@ export default {
         }"
       >
         <component
-          :is="type"
+          :is="props.component ?? props.type"
           v-bind="{
             id: props.id,
             data: props.data,

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,22 +1,40 @@
 <script lang="ts" setup>
-import { useStore } from '../../composables'
+import { GraphNode, NodeComponent, SnapGrid, Transform } from '../../types'
-import { SnapGrid } from '../../types'
+import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
-import Node from '../../components/Nodes/NodeWrapper.vue'
 
 interface NodeRendererProps {
+  nodes?: GraphNode[]
+  nodeTypes: Record<string, NodeComponent>
   selectNodesOnDrag?: boolean
   snapToGrid?: boolean
   snapGrid?: SnapGrid
+  transform: Transform
+  elementsSelectable?: boolean
+  nodesDraggable?: boolean
+  nodesConnectable?: boolean
 }
 
 const props = withDefaults(defineProps<NodeRendererProps>(), {
   selectNodesOnDrag: true,
+  nodesConnectable: true,
+  nodesDraggable: true,
+  elementsSelectable: true,
+  snapToGrid: false,
+  snapGrid: () => [15, 15],
 })
 
-const store = useStore()
+const getType = (type: string) => {
+  const t = type ?? 'default'
+  let nodeType = props.nodeTypes[t]
+  if (!nodeType) {
+    nodeType = props.nodeTypes.default
+    console.warn(`Node type "${type}" not found. Using fallback type "default".`)
+  }
+  return nodeType
+}
 
-const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
+const transform = computed(() => `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})`)
-const snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.snapGrid ?? store.snapGrid : undefined))
+const snapGrid = computed(() => (props.snapToGrid ? props.snapGrid : undefined))
 </script>
 <script lang="ts">
 export default {
@@ -25,30 +43,32 @@ export default {
 </script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
-    <Node
+    <NodeWrapper
-      v-for="node of store.getNodes"
+      v-for="(node, i) of props.nodes"
       :id="node.id"
-      :key="node.id"
+      :key="`${node.id}-${i}`"
       :node="node"
       :vf="node.__vf"
       :position="node.position"
       :type="node.type"
+      :component="getType(node.type)"
       :class="node.class"
       :style="node.style"
       :data="node.data"
       :target-position="node.targetPosition"
       :source-position="node.sourcePosition"
       :is-hidden="node.isHidden"
-      :draggable="node.draggable"
+      :draggable="typeof node.draggable === 'undefined' ? props.elementsSelectable : node.draggable"
-      :selectable="node.selectable"
+      :selectable="typeof node.selectable === 'undefined' ? props.elementsSelectable : node.selectable"
-      :connectable="node.connectable"
+      :connectable="typeof node.connectable === 'undefined' ? props.elementsSelectable : node.connectable"
       :drag-handle="node.dragHandle"
       :snap-grid="snapGrid"
       :select-nodes-on-drag="props.selectNodesOnDrag"
+      :scale="props.transform[2]"
     >
       <template #default="nodeProps">
         <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
       </template>
-    </Node>
+    </NodeWrapper>
   </div>
 </template>

src/container/SelectionPane/SelectionPane.vue

@@ -1,19 +1,25 @@
 <script lang="ts" setup>
-import { ElementId, FlowElement, KeyCode } from '../../types'
+import { Edge, ElementId, FlowElement, FlowElements, KeyCode } from '../../types'
 import { useStore, useKeyPress } from '../../composables'
+import { getConnectedEdges, isGraphNode } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
-import { getConnectedEdges, isGraphNode } from '../../utils'
 
 interface SelectionPaneProps {
+  edges: Edge[]
+  selectedElements: FlowElements
   selectionKeyCode?: KeyCode
   deleteKeyCode?: KeyCode
   multiSelectionKeyCode?: KeyCode
+  elementsSelectable?: boolean
+  nodesSelectionActive?: boolean
+  selectionActive?: boolean
 }
 const props = withDefaults(defineProps<SelectionPaneProps>(), {
   selectionKeyCode: 'Shift',
   deleteKeyCode: 'Backspace',
   multiSelectionKeyCode: 'Meta',
+  elementsSelectable: true,
 })
 
 const store = useStore()
@@ -28,14 +34,14 @@ const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger
 
 const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
 
-const selectionKeyPresed = ref(false)
+const userSelection = ref(false)
 
 onMounted(() => {
   useKeyPress(props.deleteKeyCode, (keyPressed) => {
-    if (keyPressed && store.selectedElements) {
+    if (keyPressed && props.selectedElements) {
-      const selectedNodes = store.selectedElements.filter(isGraphNode)
+      const selectedNodes = props.selectedElements.filter(isGraphNode)
-      const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
+      const connectedEdges = getConnectedEdges(selectedNodes, props.edges)
-      const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
+      const elementsToRemove = [...props.selectedElements, ...connectedEdges].reduce(
         (res, item) => res.set(item.id, item),
         new Map<ElementId, FlowElement>(),
       )
@@ -51,11 +57,9 @@ onMounted(() => {
   })
 
   useKeyPress(props.selectionKeyCode, (keyPressed) => {
-    selectionKeyPresed.value = keyPressed
+    userSelection.value = keyPressed && (props.selectionActive || props.elementsSelectable)
   })
 })
-const userSelection = computed(() => selectionKeyPresed.value && (store.selectionActive || store.elementsSelectable))
-const nodesSelectionActive = computed(() => store.nodesSelectionActive)
 </script>
 <script lang="ts">
 export default {
@@ -65,7 +69,7 @@ export default {
 </script>
 <template>
   <slot></slot>
-  <UserSelection v-if="userSelection" id="user-selection" />
+  <UserSelection v-if="userSelection" id="user-selection" :key="`user-selection-${store.$id}`" />
-  <NodesSelection v-if="nodesSelectionActive" id="nodes-selection" />
+  <NodesSelection v-if="props.nodesSelectionActive" id="nodes-selection" :key="`nodes-selction-${store.$id}`" />
-  <div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <div :key="`flow-pane-${store.$id}`" class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>

src/container/VueFlow/VueFlow.vue

@@ -177,11 +177,11 @@ const transitionName = computed(() => {
 </script>
 <template>
   <div class="vue-flow">
-    <Transition key="vue-flow-transition" :name="transitionName">
+    <Transition :key="`vue-flow-transition-${store.$id}`" :name="transitionName">
       <Suspense>
         <template #default>
           <ZoomPane
-            key="zoom-pane"
+            :key="`zoom-pane-${store.$id}`"
             :selection-key-code="store.selectionKeyCode"
             :zoom-activation-key-code="store.zoomActivationKeyCode"
             :default-zoom="store.defaultZoom"
@@ -196,17 +196,33 @@ const transitionName = computed(() => {
           >
             <template #default="zoomPaneProps">
               <SelectionPane
-                key="selection-pane"
+                :key="`selection-pane-${store.$id}`"
+                :edges="store.getEdges"
+                :selected-elements="store.selectedElements"
+                :selection-active="store.selectionActive"
+                :nodes-selection-active="store.nodesSelectionActive"
+                :elements-selectable="store.elementsSelectable"
                 :delete-key-code="store.deleteKeyCode"
                 :multi-selection-key-code="store.multiSelectionKeyCode"
                 :selection-key-code="store.selectionKeyCode"
               >
                 <slot name="node-renderer" v-bind="{ nodes: store.getNodes, nodeTypes: store.getNodeTypes }">
-                  <NodeRenderer key="node-renderer" :select-nodes-on-drag="store.selectNodesOnDrag">
+                  <NodeRenderer
+                    :key="`node-renderer-${store.$id}`"
+                    :nodes="store.getNodes"
+                    :node-types="store.getNodeTypes"
+                    :snap-to-grid="store.snapToGrid"
+                    :snap-grid="store.snapGrid"
+                    :select-nodes-on-drag="store.selectNodesOnDrag"
+                    :transform="store.transform"
+                    :elements-selectable="store.elementsSelectable"
+                    :nodes-draggable="store.nodesDraggable"
+                    :nodes-connectable="store.nodesConnectable"
+                  >
                     <template
                       v-for="nodeName of Object.keys(store.getNodeTypes)"
                       #[`node-${nodeName}`]="nodeProps"
-                      :key="`node-${nodeName}`"
+                      :key="`node-${nodeName}-${store.$id}`"
                     >
                       <slot :name="`node-${nodeName}`" v-bind="nodeProps"></slot>
                     </template>
@@ -214,7 +230,7 @@ const transitionName = computed(() => {
                 </slot>
                 <slot name="edge-renderer" v-bind="{ edges: store.getEdges, edgeTypes: store.getEdgeTypes }">
                   <EdgeRenderer
-                    key="edge-renderer"
+                    :key="`edge-renderer-${store.$id}`"
                     :connection-line-type="store.connectionLineType"
                     :connection-line-style="store.connectionLineStyle"
                     :arrow-head-color="store.arrowHeadColor"
@@ -223,12 +239,16 @@ const transitionName = computed(() => {
                     <template
                       v-for="edgeName of Object.keys(store.getEdgeTypes)"
                       #[`edge-${edgeName}`]="edgeProps"
-                      :key="`edge-${edgeName}`"
+                      :key="`edge-${edgeName}-${store.$id}`"
                     >
                       <slot :name="`edge-${edgeName}`" v-bind="edgeProps"></slot>
                     </template>
                     <template #custom-connection-line="customConnectionLineProps">
-                      <slot key="connection-line" name="custom-connection-line" v-bind="customConnectionLineProps"></slot>
+                      <slot
+                        :key="`connection-line-${store.$id}`"
+                        name="custom-connection-line"
+                        v-bind="customConnectionLineProps"
+                      ></slot>
                     </template>
                   </EdgeRenderer>
                 </slot>
@@ -238,8 +258,8 @@ const transitionName = computed(() => {
           </ZoomPane>
         </template>
         <template v-if="store.loading" #fallback>
-          <slot key="loading-indicator" name="loading-indicator">
+          <slot :key="`loading-indicator-${store.$id}`" name="loading-indicator">
-            <LoadingIndicator key="default-loading-indicator" v-bind="store.loading">
+            <LoadingIndicator :key="`default-loading-indicator-${store.$id}`" v-bind="store.loading">
               <slot name="loading-label" />
             </LoadingIndicator>
           </slot>