chore(core): replace getNode with findNode

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2023-01-18 19:57:21 +01:00
parent 73de601f79
commit 203b4815f8
8 changed files with 114 additions and 151 deletions
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,109 +1,86 @@
-<script lang="ts" setup>
-import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background } from '@vue-flow/background'
+<script setup lang="ts">
 import { Controls } from '@vue-flow/controls'
-import { MiniMap } from '@vue-flow/minimap'
+import { Background } from '@vue-flow/background'
+import { PanelPosition, VueFlow, useVueFlow } from '@vue-flow/core'
+import DiagramCustomNode from './DiagramCustomNode.vue'
+import DiagramCustomParentNode from './DiagramCustomParentNode.vue'
+import data from './data.json'

-const { onConnect, addEdges, addNodes, findNode } = useVueFlow({
-  fitViewOnInit: true,
-  connectionMode: ConnectionMode.Loose,
-  nodes: [
-    { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-    {
-      id: '2',
-      label: 'Node 2',
-      position: { x: 100, y: 100 },
-      class: 'light',
-      style: { backgroundColor: 'rgba(255, 0, 0, 0.8)' },
-    },
-    {
-      id: '2a',
-      label: 'Node 2a',
-      position: { x: 10, y: 50 },
-      parentNode: '2',
-    },
-    { id: '3', label: 'Node 3', position: { x: 320, y: 100 }, class: 'light' },
-    {
-      id: '4',
-      label: 'Node 4',
-      position: { x: 320, y: 200 },
-      class: 'light',
-      style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: '300px', height: '300px' },
-    },
-    {
-      id: '4a',
-      label: 'Node 4a',
-      position: { x: 15, y: 65 },
-      class: 'light',
-      extent: 'parent',
-      parentNode: '4',
-    },
-    {
-      id: '4b',
-      label: 'Node 4b',
-      position: { x: 15, y: 120 },
-      class: 'light',
-      style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: '150px', width: '270px' },
-      parentNode: '4',
-    },
-    {
-      id: '4b1',
-      label: 'Node 4b1',
-      position: { x: 20, y: 40 },
-      class: 'light',
-      parentNode: '4b',
-    },
-    {
-      id: '4b2',
-      label: 'Node 4b2',
-      position: { x: 100, y: 100 },
-      class: 'light',
-      parentNode: '4b',
-    },
-  ],
-  edges: [
-    { id: 'e1-2', source: '1', target: '2', animated: true },
-    { id: 'e1-3', source: '1', target: '3' },
-    { id: 'e2a-4a', source: '2a', target: '4a' },
-    { id: 'e3-4', source: '3', target: '4' },
-    { id: 'e3-4b', source: '3', target: '4b' },
-    { id: 'e4a-4b1', source: '4a', target: '4b1' },
-    { id: 'e4a-4b2', source: '4a', target: '4b2' },
-    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  ],
+const elements = ref<any[]>([])
+
+setTimeout(() => {
+  elements.value = data
+}, 1000)
+
+const {
+  fitView,
+  setInteractive,
+  nodesConnectable,
+  nodesDraggable,
+  onNodesChange,
+  onEdgesChange,
+  applyNodeChanges,
+  applyEdgeChanges,
+  getNodesInitialized,
+  onNodesInitialized,
+} = useVueFlow()
+
+function onPaneReady() {
+  fitView({
+    minZoom: 1,
+    maxZoom: 1,
+  })
+  setInteractive(false)
+
+  nodesConnectable.value = false
+  nodesDraggable.value = true
+}
+
+onNodesChange((changes) => {
+  const validChanges = changes.filter((change) => change.type !== 'remove')
+  applyNodeChanges(validChanges)
 })

-onConnect((params) => addEdges([params]))
+onEdgesChange((changes) => {
+  const validChanges = changes.filter((change) => change.type !== 'remove')
+  applyEdgeChanges(validChanges)
+})

-onMounted(() => {
-  // add nodes to parent
-  addNodes([
-    {
-      id: '999',
-      type: 'input',
-      label: 'Added after mount',
-      position: { x: 20, y: 100 },
-      class: 'light',
-      expandParent: true,
-      parentNode: '2',
-    },
-  ])
-
-  setTimeout(() => {
-    const node = findNode('999')!
-    node.expandParent = false
-    node.extent = {
-      range: 'parent',
-      padding: [10],
+onNodesInitialized((nodesInitialized) => {
+  console.log(nodesInitialized)
+  nodesInitialized.forEach((node) => {
+    if (node.expandParent) {
+      node.expandParent = false
+      node.extent = {
+        range: 'parent',
+        padding: [48, 24, 24, 24],
+      }
    }
  })
 })
 </script>

 <template>
-  <VueFlow>
-    <MiniMap />
-    <Controls />
+  <VueFlow
+    v-model="elements"
+    class="panel"
+    :nodes-connectable="false"
+    :apply-default="false"
+    elevate-edges-on-select
+    @pane-ready="onPaneReady"
+  >
+    <template #node-custom="props">
+      <DiagramCustomNode :data="props.data" />
+    </template>
+
+    <template #node-custom-parent="props">
+      <DiagramCustomParentNode :data="props.data" />
+    </template>
+
+    <Controls :show-interactive="false" :position="PanelPosition.BottomRight" />
+
    <Background />
  </VueFlow>
 </template>
+
+<style src="./CustomDiagram.css"></style>
--- a/packages/core/src/components/Nodes/NodeWrapper.vue
+++ b/packages/core/src/components/Nodes/NodeWrapper.vue
@@ -25,7 +25,7 @@ const {
  nodesSelectionActive,
  multiSelectionActive,
  emits,
-  getNode,
+  findNode,
  removeSelectedElements,
  addSelectedNodes,
  updateNodeDimensions,
@@ -42,7 +42,7 @@ const updateNodePositions = useUpdateNodePositions()

 const node = $(useVModel(props, 'node'))

-const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
+const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode) : undefined))

 const connectedEdges = $computed(() => getConnectedEdges([node], edges))

--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -26,7 +26,7 @@ function useDrag(params: UseDragParams) {
      noDragClassName,
      nodes,
      nodeExtent,
-      getNode,
+      findNode,
      multiSelectionActive,
      nodesSelectionActive,
      selectNodesOnDrag,
@@ -47,7 +47,7 @@ function useDrag(params: UseDragParams) {
    watch([() => disabled, () => el], () => {
      if (el) {
        const selection = select(el)
-        const node = id ? getNode(id) : undefined
+        const node = id ? findNode(id) : undefined

        if (disabled) {
          selection.on('.drag', null)
@@ -65,13 +65,13 @@ function useDrag(params: UseDragParams) {
              }

              const mousePos = getPointerPosition(event, snapToGrid ? snapGrid : undefined)
-              dragItems = getDragItems(nodes, mousePos, getNode, id)
+              dragItems = getDragItems(nodes, mousePos, findNode, id)

              if (onStart && dragItems) {
                const [currentNode, nodes] = getEventHandlerParams({
                  id,
                  dragItems,
-                  getNode: $$(getNode),
+                  findNode,
                })
                onStart(event.sourceEvent, currentNode, nodes)
              }
@@ -98,7 +98,7 @@ function useDrag(params: UseDragParams) {
                    n,
                    nextPosition,
                    nodeExtent,
-                    n.parentNode ? getNode(n.parentNode) : undefined,
+                    n.parentNode ? findNode(n.parentNode) : undefined,
                  )

                  // we want to make sure that we only fire a change event when there is a changes
@@ -117,7 +117,7 @@ function useDrag(params: UseDragParams) {
                  const [currentNode, nodes] = getEventHandlerParams({
                    id,
                    dragItems,
-                    getNode: $$(getNode),
+                    findNode,
                  })

                  dragging.value = true
@@ -135,7 +135,7 @@ function useDrag(params: UseDragParams) {
                  const [currentNode, nodes] = getEventHandlerParams({
                    id,
                    dragItems,
-                    getNode: $$(getNode),
+                    findNode,
                  })

                  dragging.value = false
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
 import { isFunction } from '@vueuse/core'
-import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types'
+import type { Actions, Connection, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types'
 import { ConnectionMode } from '~/types'

 interface Result {
@@ -30,7 +30,7 @@ export const checkElementBelowIsValid = (
  isValidConnection: ValidConnectionFunc | undefined,
  doc: Document,
  edges: GraphEdge[],
-  getNode: Getters['getNode'],
+  findNode: Actions['findNode'],
 ) => {
  const clientX = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientX : (event as MouseEvent).clientX
  const clientY = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientY : (event as MouseEvent).clientY
@@ -73,7 +73,7 @@ export const checkElementBelowIsValid = (

      result.isValid =
        (isFunction(isValidConnection)
-          ? isValidConnection(connection, { edges, sourceNode: getNode(sourceId)!, targetNode: getNode(targetId)! })
+          ? isValidConnection(connection, { edges, sourceNode: findNode(sourceId)!, targetNode: findNode(targetId)! })
          : elementBelowNodeId !== nodeId || elementBelowHandleId !== handleId) ||
        !result.connection.target ||
        !result.connection.source
@@ -113,7 +113,7 @@ export default function useHandle({
    startConnection,
    updateConnection,
    endConnection,
-    getNode,
+    findNode,
    vueFlowRef,
  } = $(useVueFlow())

@@ -129,7 +129,7 @@ export default function useHandle({

    let validConnectFunc = isValidConnection

-    const node = getNode(unref(nodeId))
+    const node = findNode(unref(nodeId))

    if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return

@@ -175,7 +175,7 @@ export default function useHandle({
        validConnectFunc,
        doc,
        edges,
-        getNode,
+        findNode,
      )

      if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
@@ -199,7 +199,7 @@ export default function useHandle({
        validConnectFunc,
        doc,
        edges,
-        getNode,
+        findNode,
      )

      const isOwnHandle = connection.source === connection.target
@@ -234,7 +234,7 @@ export default function useHandle({

    let validConnectFunc = isValidConnection

-    const node = getNode(unref(nodeId))
+    const node = findNode(unref(nodeId))

    if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return

@@ -285,7 +285,7 @@ export default function useHandle({
        validConnectFunc,
        doc,
        edges,
-        getNode,
+        findNode,
      )

      if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
@@ -309,7 +309,7 @@ export default function useHandle({
        validConnectFunc,
        doc,
        edges,
-        getNode,
+        findNode,
      )

      const isOwnHandle = connection.source === connection.target
@@ -343,7 +343,7 @@ export default function useHandle({
    } else {
      let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)

-      const node = getNode(unref(nodeId))
+      const node = findNode(unref(nodeId))

      if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return

@@ -362,7 +362,7 @@ export default function useHandle({
        validConnectFunc,
        doc,
        edges,
-        getNode,
+        findNode,
      )

      const isOwnHandle = connection.source === connection.target
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -124,7 +124,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
    }

    const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
-      const node = getters.getNode.value(update.id)
+      const node = findNode(update.id)

      if (node) {
        const dimensions = getDimensions(update.nodeElement)
@@ -285,7 +285,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
    if (!state.initialized && !nodes.length) return
    if (!state.nodes) state.nodes = []
    const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
-    state.nodes = createGraphNodes(curr, getters.getNode.value, state.nodes, extent ?? state.nodeExtent)
+    state.nodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent)
  }

  const setEdges: Actions['setEdges'] = (edges) => {
@@ -293,8 +293,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
    const curr = edges instanceof Function ? edges(state.edges) : edges

    state.edges = curr.reduce<GraphEdge[]>((res, edge) => {
-      const sourceNode = getters.getNode.value(edge.source)!
-      const targetNode = getters.getNode.value(edge.target)!
+      const sourceNode = findNode(edge.source)!
+      const targetNode = findNode(edge.target)!

      const missingSource = !sourceNode || typeof sourceNode === 'undefined'
      const missingTarget = !targetNode || typeof targetNode === 'undefined'
@@ -325,7 +325,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
  const addNodes: Actions['addNodes'] = (nodes, extent) => {
    const curr = nodes instanceof Function ? nodes(state.nodes) : nodes

-    const graphNodes = createGraphNodes(curr, getters.getNode.value, state.nodes, extent ?? state.nodeExtent)
+    const graphNodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent)
    const changes = graphNodes.map(createAdditionChange)

    if (changes.length) state.hooks.nodesChange.trigger(changes)
@@ -343,8 +343,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
        state.edges,
      )
      if (edge) {
-        const sourceNode = getters.getNode.value(edge.source)!
-        const targetNode = getters.getNode.value(edge.target)!
+        const sourceNode = findNode(edge.source)!
+        const targetNode = findNode(edge.target)!

        const missingSource = !sourceNode || typeof sourceNode === 'undefined'
        const missingTarget = !targetNode || typeof targetNode === 'undefined'
--- a/packages/core/src/utils/drag.ts
+++ b/packages/core/src/utils/drag.ts
@@ -1,14 +1,6 @@
 import type { Ref } from 'vue'
 import { isNumber } from '@vueuse/shared'
-import type {
-  ComputedGetters,
-  CoordinateExtent,
-  ExtendedParentExtent,
-  Getters,
-  GraphNode,
-  NodeDragItem,
-  XYPosition,
-} from '~/types'
+import type { Actions, CoordinateExtent, ExtendedParentExtent, GraphNode, NodeDragItem, XYPosition } from '~/types'

 export function hasSelector(target: Element, selector: string, node: Ref<Element>): boolean {
  let current = target
@@ -26,11 +18,11 @@ export function hasSelector(target: Element, selector: string, node: Ref<Element
 export function getDragItems(
  nodes: GraphNode[],
  mousePos: XYPosition,
-  getNode: Getters['getNode'],
+  findNode: Actions['findNode'],
  nodeId?: string,
 ): NodeDragItem[] {
  return nodes
-    .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, getNode)))
+    .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, findNode)))
    .map((n) =>
      markRaw({
        id: n.id,
@@ -50,19 +42,13 @@ export function getDragItems(
 export function getEventHandlerParams({
  id,
  dragItems,
-  getNode,
+  findNode,
 }: {
  id?: string
  dragItems: NodeDragItem[]
-  getNode: ComputedGetters['getNode']
+  findNode: Actions['findNode']
 }): [GraphNode, GraphNode[]] {
-  const extendedDragItems: GraphNode[] = dragItems.map((n) => {
-    const node = getNode.value(n.id)!
-
-    return {
-      ...node,
-    }
-  })
+  const extendedDragItems: GraphNode[] = dragItems.map((n) => findNode(n.id)!)

  return [id ? extendedDragItems.find((n) => n.id === id)! : extendedDragItems[0], extendedDragItems]
 }
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -1,5 +1,6 @@
 import { isString } from '@vueuse/core'
 import type {
+  Actions,
  Box,
  Connection,
  CoordinateExtent,
@@ -10,7 +11,6 @@ import type {
  ElementData,
  Elements,
  FlowElement,
-  Getters,
  GraphEdge,
  GraphNode,
  Node,
@@ -354,12 +354,12 @@ export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition)
  }
 }

-export const isParentSelected = (node: GraphNode, getNode: Getters['getNode']): boolean => {
+export const isParentSelected = (node: GraphNode, findNode: Actions['findNode']): boolean => {
  if (!node.parentNode) return false
-  const parent = getNode(node.parentNode)
+  const parent = findNode(node.parentNode)
  if (!parent) return false
  if (parent.selected) return true
-  return isParentSelected(parent, getNode)
+  return isParentSelected(parent, findNode)
 }

 export const getMarkerId = (marker: EdgeMarkerType | undefined, vueFlowId?: string): string => {
--- a/packages/core/src/utils/store.ts
+++ b/packages/core/src/utils/store.ts
@@ -1,4 +1,4 @@
-import type { Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types'
+import type { Actions, Connection, CoordinateExtent, Edge, GraphEdge, GraphNode, Node } from '~/types'

 export const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'

@@ -51,7 +51,7 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg

 export const createGraphNodes = (
  nodes: Node[],
-  getNode: Getters['getNode'],
+  findNode: Actions['findNode'],
  currGraphNodes: GraphNode[],
  extent: CoordinateExtent,
 ) => {
@@ -59,7 +59,7 @@ export const createGraphNodes = (

  const graphNodes = nodes.map((node) => {
    const parsed = parseNode(node, extent, {
-      ...getNode(node.id),
+      ...findNode(node.id),
      parentNode: node.parentNode,
    })

@@ -80,7 +80,7 @@ export const createGraphNodes = (
      if (parentNodes[node.id]) {
        node.isParent = true
      }
-      const parent = node.parentNode ? getNode(node.parentNode) : undefined
+      const parent = node.parentNode ? findNode(node.parentNode) : undefined
      if (parent) parent.isParent = true
    }
  })