refactor(core): add explicit imports and remove auto-imports

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2023-05-25 20:48:26 +02:00
parent 5a86c7cf1d
commit e3e6a03359
63 changed files with 328 additions and 508 deletions
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { ARIA_EDGE_DESC_KEY, ARIA_LIVE_MESSAGE, ARIA_NODE_DESC_KEY } from '../../utils/a11y'
+import { useVueFlow } from '../../composables'

 const { id, disableKeyboardA11y, ariaLiveMessage } = useVueFlow()

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { toRef } from '@vueuse/core'
 import type { GraphNode } from '../../types'
 import { ConnectionLineType, ConnectionMode, Position } from '../../types'
-import { getMarkerId } from '../../utils/graph'
+import { getHandlePosition, getMarkerId } from '../../utils'
+import { useVueFlow } from '../../composables'
+import { Slots } from '../../context'
+import { getBezierPath, getSimpleBezierPath, getSmoothStepPath, getStraightPath } from '../Edges/utils'

 const { sourceNode } = defineProps<{ sourceNode: GraphNode }>()

@@ -27,7 +32,7 @@ const oppositePosition = {

 const connectionLineComponent = inject(Slots)?.['connection-line']

-const handleId = connectionStartHandle.value!.handleId
+const startHandleId = connectionStartHandle.value!.handleId

 const type = connectionStartHandle.value!.type

@@ -36,9 +41,10 @@ const targetNode = computed(() => (connectionEndHandle.value?.handleId && findNo
 const sourceHandle = computed(
  () =>
    (connectionMode.value === ConnectionMode.Strict
-      ? sourceNode.handleBounds[type]?.find((d) => d.id === handleId)
-      : [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find((d) => d.id === handleId)) ||
-    sourceNode.handleBounds[type ?? 'source']?.[0],
+      ? sourceNode.handleBounds[type]?.find((d) => d.id === startHandleId)
+      : [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find(
+          (d) => d.id === startHandleId,
+        )) || sourceNode.handleBounds[type ?? 'source']?.[0],
 )

 const targetHandle = computed(() => {
@@ -72,7 +78,7 @@ const fromXY = computed(() => {
  }
 })

-const targetPosition = computed(() => (sourceHandle.value?.position ? oppositePosition[sourceHandle.value?.position] : undefined))
+const targetPosition = toRef(() => (sourceHandle.value?.position ? oppositePosition[sourceHandle.value?.position] : undefined))

 // todo: rename corresponding props
 const toX = computed(() => (connectionPosition.value.x - viewport.value.x) / viewport.value.zoom)
@@ -130,7 +136,7 @@ export default {
 <template>
  <g class="vue-flow__connection">
    <component
-      :is="connectionLineComponent"
+      :is="connectionLineComponent as any"
      v-if="connectionLineComponent"
      v-bind="{
        sourceX: fromXY.x,
@@ -1,6 +1,8 @@
 import type { Component, FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import EdgeText from './EdgeText.vue'
 import type { BaseEdgeProps } from '~/types'
+import { isNumber } from '~/utils'

 /**
 * The base edge is a simple wrapper for svg path
@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getBezierPath } from './utils'
 import type { BezierEdgeProps } from '~/types'
 import { Position } from '~/types'

@@ -1,4 +1,5 @@
 import type { FunctionalComponent, HTMLAttributes } from 'vue'
+import { h } from 'vue'
 import { Position } from '~/types'

 interface Props extends HTMLAttributes {
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
+import { toRef } from '@vueuse/core'
+import { useVueFlow } from '../../composables'
+
 const { viewportRef } = useVueFlow()

-const teleportTarget = computed(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
+const teleportTarget = toRef(() => viewportRef.value?.getElementsByClassName('vue-flow__edge-labels')[0])
 </script>

 <script lang="ts">
@@ -14,7 +17,7 @@ export default {
 <template>
  <svg>
    <foreignObject height="0" width="0">
-      <Teleport :to="teleportTarget" :disabled="!teleportTarget">
+      <Teleport :to="teleportTarget as any" :disabled="!teleportTarget">
        <slot />
      </Teleport>
    </foreignObject>
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue'
 import type { EdgeTextProps } from '../../types/components'
 import type { Rect as RectType } from '../../types'
-import { isString } from '../../utils/general'
+import { isString } from '../../utils'

 const {
  x,
@@ -14,25 +15,25 @@ const {
  labelBgBorderRadius = 2,
 } = defineProps<EdgeTextProps>()

-let box = $ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })
+const box = ref<RectType>({ x: 0, y: 0, width: 0, height: 0 })

-const el = $ref<SVGTextElement | null>(null)
+const el = ref<SVGTextElement | null>(null)

-const transform = computed(() => `translate(${x - box.width / 2} ${y - box.height / 2})`)
+const transform = computed(() => `translate(${x - box.value.width / 2} ${y - box.value.height / 2})`)

 onMounted(getBox)

-watch([() => x, () => y, $$(el), () => label], getBox)
+watch([() => x, () => y, el, () => label], getBox)

 function getBox() {
-  if (!el) {
+  if (!el.value) {
    return
  }

-  const nextBox = el.getBBox()
+  const nextBox = el.value.getBBox()

-  if (nextBox.width !== box.width || nextBox.height !== box.height) {
-    box = nextBox
+  if (nextBox.width !== box.value.width || nextBox.height !== box.value.height) {
+    box.value = nextBox
  }
 }
 </script>
@@ -1,6 +1,11 @@
+import { defineComponent, h, provide, ref } from 'vue'
+import { useVModel } from '@vueuse/core'
 import EdgeAnchor from './EdgeAnchor'
 import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType, MouseTouchEvent } from '~/types'
 import { ConnectionMode, Position } from '~/types'
+import { useEdgeHooks, useHandle, useVueFlow } from '~/composables'
+import { EdgeId, EdgeRef } from '~/context'
+import { ARIA_EDGE_DESC_KEY, elementSelectionKeys, getEdgePositions, getHandle, getMarkerId } from '~/utils'

 interface Props {
  id: string
@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getSimpleBezierPath } from './utils'
 import type { SimpleBezierEdgeProps } from '~/types'
 import { Position } from '~/types'

@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getSmoothStepPath } from './utils'
 import type { SmoothStepEdgeProps } from '~/types'
 import { Position } from '~/types'

@@ -1,4 +1,5 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
 import type { StepEdgeProps } from '~/types'

@@ -1,5 +1,7 @@
 import type { FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import BaseEdge from './BaseEdge'
+import { getStraightPath } from './utils'
 import type { StraightEdgeProps } from '~/types'

 const StraightEdge: FunctionalComponent<StraightEdgeProps> = function (props, { attrs }) {
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
-import { Position } from '../../types'
+import { toRef, until } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import type { HandleProps } from '../../types/handle'
+import { Position } from '../../types'
+import { useHandle, useNode, useVueFlow } from '../../composables'
+import { getDimensions, isDef, isFunction, isMouseEvent, isString } from '../../utils'

 const {
  position = Position.Top,
@@ -1,4 +1,5 @@
 import type { Component, FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '~/types'
 import { Position } from '~/types'
@@ -1,4 +1,5 @@
 import type { Component, FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '~/types'
 import { Position } from '~/types'
@@ -1,4 +1,18 @@
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
+import { toRef, until, useVModel } from '@vueuse/core'
 import type { GraphNode, HandleConnectable, NodeComponent } from '~/types'
+import { NodeId, NodeRef } from '~/context'
+import { isInputDOMNode, useDrag, useNodeHooks, useUpdateNodePositions, useVueFlow } from '~/composables'
+import {
+  ARIA_NODE_DESC_KEY,
+  arrowKeyDiffs,
+  calcNextPosition,
+  elementSelectionKeys,
+  getConnectedEdges,
+  getXYZPos,
+  handleNodeClick,
+  isNumber,
+} from '~/utils'

 interface Props {
  id: string
@@ -46,7 +60,7 @@ const NodeWrapper = defineComponent({

    const node = useVModel(props, 'node')

-    const parentNode = computed(() => findNode(node.value.parentNode))
+    const parentNode = toRef(() => findNode(node.value.parentNode))

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

@@ -1,4 +1,5 @@
 import type { Component, FunctionalComponent } from 'vue'
+import { h } from 'vue'
 import Handle from '../Handle/Handle.vue'
 import type { NodeProps } from '~/types'
 import { Position } from '~/types'
@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { useDrag, useUpdateNodePositions, useVueFlow } from '../../composables'
+import { arrowKeyDiffs, getRectOfNodes } from '~/utils'
+
 const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y, userSelectionActive } = $(useVueFlow())

 const updatePositions = useUpdateNodePositions()
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import type { PanelProps } from '../../types/panel'
+import { useVueFlow } from '../../composables'

 const props = defineProps<PanelProps>()

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { useVueFlow } from '../../composables'
+
 const { userSelectionRect } = useVueFlow()
 </script>