refactor(core): rename core pkg dir to core

2022-10-10 21:33:44 +02:00
parent f7dd7f1803
commit 082050b164
87 changed files with 640 additions and 0 deletions
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { D3ZoomEvent } from 'd3-zoom'
+import Viewport from '../Viewport/Viewport.vue'
+import { useHooks } from '../../store'
+import { useVueFlow } from '../../composables'
+import type { FlowElements, FlowProps } from '../../types/flow'
+import { Slots } from '../../context'
+import type {
+  Connection,
+  EdgeChange,
+  EdgeMouseEvent,
+  EdgeUpdateEvent,
+  GraphEdge,
+  GraphNode,
+  NodeChange,
+  NodeDragEvent,
+  NodeMouseEvent,
+  OnConnectStartParams,
+  ViewpaneTransform,
+  VueFlowStore,
+} from '../../types'
+import useWatch from './watch'
+
+const props = withDefaults(defineProps<FlowProps>(), {
+  snapToGrid: undefined,
+  onlyRenderVisibleElements: undefined,
+  edgesUpdatable: undefined,
+  nodesConnectable: undefined,
+  nodesDraggable: undefined,
+  elementsSelectable: undefined,
+  selectNodesOnDrag: undefined,
+  preventScrolling: undefined,
+  zoomOnScroll: undefined,
+  zoomOnPinch: undefined,
+  zoomOnDoubleClick: undefined,
+  panOnScroll: undefined,
+  panOnDrag: undefined,
+  applyDefault: undefined,
+  fitViewOnInit: undefined,
+  connectOnClick: undefined,
+  connectionLineStyle: undefined,
+  autoConnect: undefined,
+  elevateEdgesOnSelect: undefined,
+})
+
+const emit = defineEmits<{
+  (event: 'nodesChange', changes: NodeChange[]): void
+  (event: 'edgesChange', changes: EdgeChange[]): void
+  (event: 'nodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'nodeClick', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'nodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'nodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'nodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'nodeContextMenu', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
+  (event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
+  (event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
+  (event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'miniMapNodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'miniMapNodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
+  (event: 'connect', connectionEvent: Connection): void
+  (
+    event: 'connectStart',
+    connectionEvent: {
+      event?: MouseEvent
+    } & OnConnectStartParams,
+  ): void
+  (event: 'connectEnd', connectionEvent?: MouseEvent): void
+  (event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
+  (event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
+  (event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
+  (event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
+  (event: 'selectionDrag', selectionEvent: NodeDragEvent): void
+  (event: 'selectionDragStop', selectionEvent: NodeDragEvent): void
+  (event: 'selectionContextMenu', selectionEvent: { event: MouseEvent; nodes: GraphNode[] }): void
+  (event: 'paneReady', paneEvent: VueFlowStore): void
+  (event: 'paneScroll', paneEvent: WheelEvent | undefined): void
+  (event: 'paneClick', paneEvent: MouseEvent): void
+  (event: 'paneContextMenu', paneEvent: MouseEvent): void
+  (event: 'paneMouseEnter', paneEvent: MouseEvent): void
+  (event: 'paneMouseMove', paneEvent: MouseEvent): void
+  (event: 'paneMouseLeave', paneEvent: MouseEvent): void
+  (event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'edgeUpdate', edgeUpdateEvent: EdgeUpdateEvent): void
+  (event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
+  (event: 'updateNodeInternals'): void
+
+  /** v-model event definitions */
+  (event: 'update:modelValue', value: FlowElements): void
+  (event: 'update:nodes', value: GraphNode[]): void
+  (event: 'update:edges', value: GraphEdge[]): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emit)
+const modelNodes = useVModel(props, 'nodes', emit)
+const modelEdges = useVModel(props, 'edges', emit)
+
+const { vueFlowRef, id, hooks, getNodeTypes, getEdgeTypes, $reset, ...rest } = useVueFlow({ id: props.id })
+
+const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
+  vueFlowRef,
+  id,
+  hooks,
+  getNodeTypes,
+  getEdgeTypes,
+  $reset,
+  ...rest,
+})
+
+const el = ref<HTMLDivElement>()
+
+onUnmounted(() => {
+  dispose()
+})
+
+onMounted(() => {
+  vueFlowRef.value = el.value!
+})
+
+useHooks(emit, hooks)
+
+provide(Slots, useSlots())
+
+defineExpose<VueFlowStore>({
+  vueFlowRef,
+  id,
+  hooks,
+  getNodeTypes,
+  getEdgeTypes,
+  $reset,
+  ...rest,
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'VueFlow',
+}
+</script>
+
+<template>
+  <div ref="el" class="vue-flow">
+    <Viewport>
+      <template #nodes>
+        <template v-for="nodeName of Object.keys(getNodeTypes)">
+          <slot :name="`node-${nodeName}`" />
+        </template>
+      </template>
+
+      <template #edges>
+        <template v-for="edgeName of Object.keys(getEdgeTypes)">
+          <slot :name="`edge-${edgeName}`" />
+        </template>
+      </template>
+
+      <template #connection-name>
+        <slot name="connection-line" />
+      </template>
+
+      <slot name="zoom-pane" />
+    </Viewport>
+
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,300 @@
+import type { ToRefs } from 'vue'
+import type { WatchPausableReturn } from '@vueuse/core'
+import { isFunction } from '@vueuse/core'
+import type { Connection, FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
+
+const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
+
+export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>, props: FlowProps, store: VueFlowStore) => {
+  const scope = effectScope()
+
+  scope.run(() => {
+    const watchModelValue = () => {
+      scope.run(() => {
+        let pauseModel: WatchPausableReturn
+        let pauseStore: WatchPausableReturn
+
+        // eslint-disable-next-line prefer-const
+        pauseModel = watchPausable(
+          [models.modelValue, () => models.modelValue?.value?.length],
+          ([v]) => {
+            if (v && Array.isArray(v)) {
+              if (pauseStore) pauseStore.pause()
+              if (pauseModel) pauseModel.pause()
+
+              store.setElements(v)
+
+              pauseStore = watchPausable(
+                [store.edges, store.nodes, () => store.edges.value.length, () => store.nodes.value.length],
+                ([e, n]) => {
+                  if (pauseModel) pauseModel.pause()
+                  const val = [...(n as GraphNode[]), ...(e as GraphEdge[])]
+                  if (val.length) models.modelValue!.value = val
+
+                  nextTick(() => {
+                    if (pauseModel) pauseModel.resume()
+                  })
+                },
+                { immediate: true },
+              )
+
+              nextTick(() => {
+                if (pauseStore) pauseStore.resume()
+                if (pauseModel) pauseModel.resume()
+              })
+            }
+          },
+          { immediate: !!(models.modelValue && models.modelValue.value) },
+        )
+      })
+    }
+
+    const watchNodesValue = () => {
+      scope.run(() => {
+        let pauseModel: WatchPausableReturn
+        let pauseStore: WatchPausableReturn
+
+        // eslint-disable-next-line prefer-const
+        pauseModel = watchPausable(
+          [models.nodes, () => models.nodes?.value?.length],
+          async ([v]) => {
+            if (v && Array.isArray(v)) {
+              if (pauseStore) pauseStore.pause()
+              if (pauseModel) pauseModel.pause()
+
+              store.setNodes(v)
+
+              pauseStore = watchPausable(
+                () => store.nodes.value.length,
+                () => {
+                  if (store.nodes.value.length) models.nodes!.value = [...store.nodes.value]
+                },
+                { immediate: true },
+              )
+
+              nextTick(() => {
+                if (pauseStore) pauseStore.resume()
+                if (pauseModel) pauseModel.resume()
+              })
+            }
+          },
+          { immediate: !!(models.nodes && models.nodes.value) },
+        )
+      })
+    }
+
+    const watchEdgesValue = () => {
+      scope.run(() => {
+        let pauseModel: WatchPausableReturn
+        let pauseStore: WatchPausableReturn
+
+        // eslint-disable-next-line prefer-const
+        pauseModel = watchPausable(
+          [models.edges, () => models.edges?.value?.length],
+          async ([v]) => {
+            if (v && Array.isArray(v)) {
+              if (pauseStore) pauseStore.pause()
+              if (pauseModel) pauseModel.pause()
+
+              store.setEdges(v)
+
+              pauseStore = watchPausable(
+                () => store.edges.value.length,
+                () => {
+                  if (store.edges.value.length) models.edges!.value = [...store.edges.value]
+                },
+                { immediate: true },
+              )
+
+              nextTick(() => {
+                if (pauseStore) pauseStore.resume()
+                if (pauseModel) pauseModel.resume()
+              })
+            }
+          },
+          { immediate: !!(models.edges && models.edges.value) },
+        )
+      })
+    }
+
+    const watchMaxZoom = () => {
+      scope.run(() => {
+        watch(
+          () => props.maxZoom,
+          () => {
+            if (props.maxZoom && isDef(props.maxZoom)) {
+              store.setMaxZoom(props.maxZoom)
+            }
+          },
+          { immediate: isDef(props.maxZoom) },
+        )
+      })
+    }
+
+    const watchMinZoom = () => {
+      scope.run(() => {
+        watch(
+          () => props.minZoom,
+          () => {
+            if (props.minZoom && isDef(props.minZoom)) {
+              store.setMinZoom(props.minZoom)
+            }
+          },
+          { immediate: isDef(props.minZoom) },
+        )
+      })
+    }
+
+    const watchTranslateExtent = () => {
+      scope.run(() => {
+        watch(
+          () => props.translateExtent,
+          () => {
+            if (props.translateExtent && isDef(props.translateExtent)) {
+              store.setTranslateExtent(props.translateExtent)
+            }
+          },
+          { immediate: isDef(props.translateExtent) },
+        )
+      })
+    }
+
+    const watchNodeExtent = () => {
+      scope.run(() => {
+        watch(
+          () => props.nodeExtent,
+          () => {
+            if (props.nodeExtent && isDef(props.nodeExtent)) {
+              store.setNodeExtent(props.nodeExtent)
+            }
+          },
+          { immediate: isDef(props.nodeExtent) },
+        )
+      })
+    }
+
+    const watchApplyDefault = () => {
+      scope.run(() => {
+        watch(
+          () => props.applyDefault,
+          () => {
+            if (isDef(props.applyDefault)) {
+              store.applyDefault.value = props.applyDefault
+            }
+          },
+          { immediate: isDef(props.applyDefault) },
+        )
+
+        watch(
+          store.applyDefault,
+          (_, __, onCleanup) => {
+            if (store.applyDefault.value) {
+              store.onNodesChange(store.applyNodeChanges)
+              store.onEdgesChange(store.applyEdgeChanges)
+            } else {
+              store.hooks.value.nodesChange.off(store.applyNodeChanges)
+              store.hooks.value.edgesChange.off(store.applyEdgeChanges)
+            }
+
+            onCleanup(() => {
+              store.hooks.value.nodesChange.off(store.applyNodeChanges)
+              store.hooks.value.edgesChange.off(store.applyEdgeChanges)
+            })
+          },
+          { immediate: true },
+        )
+      })
+    }
+
+    const watchAutoConnect = () => {
+      scope.run(() => {
+        const autoConnector = async (params: Connection) => {
+          let connection: boolean | Connection = params
+
+          if (isFunction(props.autoConnect)) {
+            connection = await props.autoConnect(params)
+          }
+
+          if (connection !== false) {
+            store.addEdges([connection])
+          }
+        }
+
+        watch(
+          () => props.autoConnect,
+          () => {
+            if (isDef(props.autoConnect)) {
+              store.autoConnect.value = props.autoConnect
+            }
+          },
+          { immediate: isDef(props.autoConnect) },
+        )
+
+        watch(
+          store.autoConnect,
+          (autoConnectEnabled, _, onCleanup) => {
+            if (autoConnectEnabled) {
+              store.onConnect(autoConnector)
+            } else {
+              store.hooks.value.connect.off(autoConnector)
+            }
+
+            onCleanup(() => {
+              store.hooks.value.connect.off(autoConnector)
+            })
+          },
+          { immediate: true },
+        )
+      })
+    }
+
+    const watchRest = () => {
+      const skip: (keyof typeof props)[] = [
+        'id',
+        'modelValue',
+        'translateExtent',
+        'nodeExtent',
+        'edges',
+        'nodes',
+        'maxZoom',
+        'minZoom',
+        'applyDefault',
+        'autoConnect',
+      ]
+
+      Object.keys(props).forEach((prop) => {
+        if (!skip.includes(prop as keyof typeof props)) {
+          const model = toRef(props, prop as keyof typeof props)
+          const storedValue = store[prop as keyof typeof store] as typeof model
+
+          scope.run(() => {
+            watch(
+              model,
+              () => {
+                if (isDef(model)) {
+                  storedValue.value = model.value
+                }
+              },
+              { immediate: isDef(model) },
+            )
+          })
+        }
+      })
+    }
+
+    ;[
+      watchModelValue,
+      watchNodesValue,
+      watchEdgesValue,
+      watchMinZoom,
+      watchMaxZoom,
+      watchTranslateExtent,
+      watchNodeExtent,
+      watchApplyDefault,
+      watchAutoConnect,
+      watchRest,
+    ].forEach((watch) => watch())
+  })
+
+  return () => scope.stop()
+}