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>
2021-11-22 12:25:32 +01:00
parent c35673c622
commit 6059b02e44
5 changed files with 125 additions and 61 deletions
@@ -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">
@@ -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>(), {
-  selected: false,
-  selectNodesOnDrag: true,
-})
+const props = defineProps<NodeWrapperProps>()
+const emit = defineEmits<NodeEvents>()

 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,
@@ -1,22 +1,40 @@
 <script lang="ts" setup>
-import { useStore } from '../../composables'
-import { SnapGrid } from '../../types'
-import Node from '../../components/Nodes/NodeWrapper.vue'
+import { GraphNode, NodeComponent, SnapGrid, Transform } from '../../types'
+import NodeWrapper 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 snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.snapGrid ?? store.snapGrid : undefined))
+const transform = computed(() => `translate(${props.transform[0]}px,${props.transform[1]}px) scale(${props.transform[2]})`)
+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
-      v-for="node of store.getNodes"
+    <NodeWrapper
+      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"
-      :selectable="node.selectable"
-      :connectable="node.connectable"
+      :draggable="typeof node.draggable === 'undefined' ? props.elementsSelectable : node.draggable"
+      :selectable="typeof node.selectable === 'undefined' ? props.elementsSelectable : node.selectable"
+      :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>
@@ -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) {
-      const selectedNodes = store.selectedElements.filter(isGraphNode)
-      const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
-      const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
+    if (keyPressed && props.selectedElements) {
+      const selectedNodes = props.selectedElements.filter(isGraphNode)
+      const connectedEdges = getConnectedEdges(selectedNodes, props.edges)
+      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" />
-  <NodesSelection v-if="nodesSelectionActive" id="nodes-selection" />
-  <div class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
+  <UserSelection v-if="userSelection" id="user-selection" :key="`user-selection-${store.$id}`" />
+  <NodesSelection v-if="props.nodesSelectionActive" id="nodes-selection" :key="`nodes-selction-${store.$id}`" />
+  <div :key="`flow-pane-${store.$id}`" class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>
@@ -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">
-            <LoadingIndicator key="default-loading-indicator" v-bind="store.loading">
+          <slot :key="`loading-indicator-${store.$id}`" name="loading-indicator">
+            <LoadingIndicator :key="`default-loading-indicator-${store.$id}`" v-bind="store.loading">
              <slot name="loading-label" />
            </LoadingIndicator>
          </slot>