feat: add path alias for src

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

src/additional-components/Background/Background.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { SVGAttributes } from 'vue'
-import { BackgroundVariant } from '../../types'
-import { useStore } from '../../composables'
+import { BackgroundVariant } from '~/types'
+import { useStore } from '~/composables'
 
 export interface BackgroundProps extends SVGAttributes {
   variant?: BackgroundVariant

src/additional-components/Controls/Controls.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import PlusIcon from '../../assets/icons/plus.svg'
-import MinusIcon from '../../assets/icons/minus.svg'
-import Fitview from '../../assets/icons/fitview.svg'
-import Lock from '../../assets/icons/lock.svg'
-import Unlock from '../../assets/icons/unlock.svg'
-import { FitViewParams } from '../../types'
-import { useZoomPanHelper, useStore } from '../../composables'
 import ControlButton from './ControlButton.vue'
+import PlusIcon from '~/assets/icons/plus.svg'
+import MinusIcon from '~/assets/icons/minus.svg'
+import Fitview from '~/assets/icons/fitview.svg'
+import Lock from '~/assets/icons/lock.svg'
+import Unlock from '~/assets/icons/unlock.svg'
+import { FitViewParams } from '~/types'
+import { useZoomPanHelper, useStore } from '~/composables'
 
 export interface ControlProps extends HTMLAttributes {
   showZoom?: boolean

src/additional-components/MiniMap/MiniMap.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { getBoundsofRects, getRectOfNodes } from '../../utils'
-import { Node } from '../../types'
-import { useStore, useWindow } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
+import { getBoundsofRects, getRectOfNodes } from '~/utils'
+import { Node } from '~/types'
+import { useStore, useWindow } from '~/composables'
 
 type StringFunc = (node: Node) => string
 type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { useStore } from '../../composables'
+import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
+import { useStore } from '~/composables'
 
 interface ConnectionLineProps {
   sourceNode: Node

src/components/Edges/BezierEdge.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 interface BezierEdgeProps {
   id: ElementId

src/components/Edges/Edge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'
-import { isEdge } from '../../utils'
-import { ConnectionMode, Edge, EdgeType, Position } from '../../types'
-import { useHandle, useHooks, useStore } from '../../composables'
 import EdgeAnchor from './EdgeAnchor.vue'
+import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
+import { isEdge } from '~/utils'
+import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
+import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType
@@ -97,14 +97,14 @@ const targetNodeHandles = computed(() =>
     : nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
 )
 
-const sourceHandle = computed(
-  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
-)
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
+const sourceHandle = computed(() => {
+  if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
+})
+const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 
-const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false)
+const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) ?? false)
 const edgePos = computed(() =>
   getEdgePositions(
     nodes.value.sourceNode,

src/components/Edges/EdgeAnchor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { Position } from '../../types'
+import { Position } from '~/types'
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift

src/components/Edges/SmoothStepEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 export interface EdgeSmoothStepProps {
   id: ElementId

src/components/Edges/StepEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 export interface EdgeStepProps {
   id: ElementId

src/components/Edges/StraightEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 interface StraightEdgeProps {
   id: ElementId

src/components/Edges/utils.ts

@@ -1,4 +1,4 @@
-import { ArrowHeadType, Position } from '../../types'
+import { ArrowHeadType, Position } from '~/types'
 
 export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {

src/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Position, ValidConnectionFunc } from '../../types'
-import { NodeIdContextKey } from '../../context'
-import { useHandle, useHooks, useStore } from '../../composables'
+import { Position, ValidConnectionFunc } from '~/types'
+import { NodeIdContextKey } from '~/context'
+import { useHandle, useHooks, useStore } from '~/composables'
 
 interface HandleProps {
   id?: string

src/components/Nodes/DefaultNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position } from '~/types'
 
 interface DefaultNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/InputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position } from '~/types'
 
 interface InputNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/Node.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
-import { Node, NodeType, SnapGrid } from '../../types'
-import { NodeIdContextKey } from '../../context'
-import { useHooks, useStore } from '../../composables'
+import { Node, NodeType, SnapGrid } from '~/types'
+import { NodeIdContextKey } from '~/context'
+import { useHooks, useStore } from '~/composables'
 
 interface NodeProps {
   node: Node
@@ -23,9 +23,9 @@ provide(NodeIdContextKey, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
-const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
-const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
+const selectable = props.node.selectable ?? store.elementsSelectable
+const draggable = props.node.draggable ?? store.nodesDraggable
+const connectable = props.node.connectable ?? store.nodesConnectable
 
 const onMouseEnterHandler = () =>
   props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -116,21 +116,18 @@ onMounted(() => {
       })
     }),
   )
-})
 
-watch(
-  () => props.node.type,
-  () => {
-    store.updateNodeDimensions({
-      id: props.node.id,
-      nodeElement: nodeElement.value,
-      forceUpdate: true,
-    })
-  },
-)
-watch(
-  () => props.node.sourcePosition && props.node.targetPosition,
-  () => {
+  watch(
+    () => props.node.type,
+    () => {
+      store.updateNodeDimensions({
+        id: props.node.id,
+        nodeElement: nodeElement.value,
+        forceUpdate: true,
+      })
+    },
+  )
+  watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
     nextTick(() => {
       store.updateNodeDimensions({
         id: props.node.id,
@@ -138,8 +135,8 @@ watch(
         forceUpdate: true,
       })
     })
-  },
-)
+  })
+})
 </script>
 
 <template>

src/components/Nodes/OutputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position } from '~/types'
 
 interface OutputNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/utils.ts

@@ -1,5 +1,5 @@
-import { HandleElement, Position } from '../../types'
-import { getDimensions } from '../../utils'
+import { HandleElement, Position } from '~/types'
+import { getDimensions } from '~/utils'
 
 export const getHandleBoundsByHandleType = (
   selector: string,

src/components/NodesSelection/NodesSelection.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
-import { Node } from '../../types'
-import { getRectOfNodes, isNode } from '../../utils'
-import { useHooks, useStore } from '../../composables'
+import { Node } from '~/types'
+import { getRectOfNodes, isNode } from '~/utils'
+import { useHooks, useStore } from '~/composables'
 
 const store = useStore()
 const hooks = useHooks()

src/components/UserSelection/UserSelection.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useStore } from '../../composables'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
+import { useStore } from '~/composables'
 
 const store = useStore()
 const el = templateRef('user-selection', null)

src/composables/useHandle.ts

@@ -1,7 +1,7 @@
-import { getHostForElement } from '../utils'
-import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '../types'
 import useStore from './useStore'
 import useHooks from './useHooks'
+import { getHostForElement } from '~/utils'
+import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
 
 type Result = {
   elementBelow: Element | null

src/composables/useHooks.ts

@@ -1,15 +1,5 @@
-import {
-  Connection,
-  Edge,
-  Elements,
-  EmitFunc,
-  FlowHooks,
-  FlowTransform,
-  Node,
-  OnConnectStartParams,
-  FlowInstance,
-} from '../types'
-import { Hooks } from '../context'
+import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '~/types'
+import { Hooks } from '~/context'
 
 // flow event hooks
 const hooks = (): FlowHooks => {

src/composables/useKeyPress.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
-import { KeyCode } from '../types'
 import useWindow from './useWindow'
+import { KeyCode } from '~/types'
 
 // todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {

src/composables/useStore.ts

@@ -1,6 +1,6 @@
-import { FlowOptions } from '../types'
-import { useFlowStore, initialState } from '../store'
-import { Store } from '../context'
+import { FlowOptions } from '~/types'
+import { useFlowStore, initialState } from '~/store'
+import { Store } from '~/context'
 
 export default (options?: Partial<FlowOptions>) => {
   let store = inject(Store)!

src/composables/useUpdateNodeInternals.ts

@@ -1,5 +1,5 @@
-import { ElementId, UpdateNodeInternals } from '../types'
 import useStore from './useStore'
+import { ElementId, UpdateNodeInternals } from '~/types'
 
 export default (store = useStore()): UpdateNodeInternals =>
   (id: ElementId) => {

src/composables/useZoomPanHelper.ts

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import { zoomIdentity } from 'd3-zoom'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils'
-import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '../types'
 import useStore from './useStore'
+import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
+import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { computed, CSSProperties } from 'vue'
-import Edge from '../../components/Edges/Edge.vue'
-import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
-import { ConnectionLineType, EdgeType } from '../../types'
-import { useStore } from '../../composables'
+import { CSSProperties } from 'vue'
 import MarkerDefinitions from './MarkerDefinitions.vue'
+import Edge from '~/components/Edges/Edge.vue'
+import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
+import { ConnectionLineType, EdgeType } from '~/types'
+import { useStore } from '~/composables'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>

src/container/EdgeRenderer/utils.ts

@@ -1,6 +1,6 @@
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { rectToBox } from '../../utils'
-import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '../../types'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { rectToBox } from '~/utils'
+import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
 
 export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
   const standardTypes: Record<string, EdgeType> = {

src/container/Flow/Flow.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
-import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
-import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
+import { createEdgeTypes } from '../EdgeRenderer/utils'
+import { createNodeTypes } from '../NodeRenderer/utils'
+import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
+import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
+import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
+import EdgeRenderer from '~/container/EdgeRenderer/EdgeRenderer.vue'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -15,12 +17,10 @@ import {
   TranslateExtent,
   NodeExtent,
   FlowOptions,
-} from '../../types'
-import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { createEdgeTypes } from '../EdgeRenderer/utils'
-import { createNodeTypes } from '../NodeRenderer/utils'
-import { useHooks, useStore, createHooks } from '../../composables'
+} from '~/types'
+import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { useHooks, useStore, createHooks } from '~/composables'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import Node from '../../components/Nodes/Node.vue'
-import { NodeType, Node as TNode } from '../../types'
-import { getNodesInside } from '../../utils'
-import { useStore } from '../../composables'
+import Node from '~/components/Nodes/Node.vue'
+import { NodeType, Node as TNode } from '~/types'
+import { getNodesInside } from '~/utils'
+import { useStore } from '~/composables'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>

src/container/NodeRenderer/utils.ts

@@ -1,5 +1,5 @@
-import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
-import { NodeType } from '../../types'
+import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { NodeType } from '~/types'
 
 export function createNodeTypes(nodeTypes: Record<string, NodeType>): Record<string, NodeType> {
   const standardTypes: Record<string, NodeType> = {

src/container/SelectionPane/SelectionPane.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ElementId, FlowElement, KeyCode } from '../../types'
-import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
-import UserSelection from '../../components/UserSelection/UserSelection.vue'
-import { getConnectedEdges, isNode } from '../../utils'
-import { useHooks, useStore, useKeyPress } from '../../composables'
+import { ElementId, FlowElement, KeyCode } from '~/types'
+import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
+import UserSelection from '~/components/UserSelection/UserSelection.vue'
+import { getConnectedEdges, isNode } from '~/utils'
+import { useHooks, useStore, useKeyPress } from '~/composables'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode

src/container/ZoomPane/ZoomPane.vue

@@ -2,9 +2,9 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
-import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '../../composables'
-import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
+import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
+import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '~/composables'
+import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode
@@ -190,24 +190,22 @@ watch(height, (val) => (store.dimensions.height = val))
 watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
-onMounted(() => {
-  watchOnce(
-    () => width.value && height.value,
-    () => {
-      hooks.load.trigger({
-        fitView: (params = { padding: 0.1 }) => fitView(params),
-        zoomIn,
-        zoomOut,
-        zoomTo,
-        setTransform,
-        updateNodeInternals: useUpdateNodeInternals(store),
-        project: onLoadProject(store),
-        getElements: onLoadGetElements(store),
-        toObject: onLoadToObject(store),
-      })
-    },
-  )
-})
+watchOnce(
+  () => width.value && height.value,
+  () => {
+    hooks.load.trigger({
+      fitView: (params = { padding: 0.1 }) => fitView(params),
+      zoomIn,
+      zoomOut,
+      zoomTo,
+      setTransform,
+      updateNodeInternals: useUpdateNodeInternals(store),
+      project: onLoadProject(store),
+      getElements: onLoadGetElements(store),
+      toObject: onLoadToObject(store),
+    })
+  },
+)
 </script>
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">

src/context/index.ts

@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue'
-import { ElementId, FlowHooks, FlowStore } from '../types'
+import { ElementId, FlowHooks, FlowStore } from '~/types'
 
 export const Store: InjectionKey<FlowStore> = Symbol('store')
 export const Hooks: InjectionKey<FlowHooks> = Symbol('hooks')

src/store/index.ts

@@ -1,4 +1,4 @@
-import { ConnectionMode, FlowState } from '../types'
+import { ConnectionMode, FlowState } from '~/types'
 
 export const initialState = (): FlowState => ({
   dimensions: {

src/store/useFlowStore.ts

@@ -1,6 +1,6 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import isEqual from 'fast-deep-equal'
-import { Edge, FlowState, Node, FlowActions } from '../types'
+import { Edge, FlowState, Node, FlowActions } from '~/types'
 import {
   clampPosition,
   getDimensions,
@@ -11,8 +11,8 @@ import {
   isNode,
   parseEdge,
   parseNode,
-} from '../utils'
-import { getHandleBounds } from '../components/Nodes/utils'
+} from '~/utils'
+import { getHandleBounds } from '~/components/Nodes/utils'
 
 type NextElements = {
   nextNodes: Node[]

src/utils/graph.ts

@@ -12,8 +12,8 @@ import {
   NodeExtent,
   Dimensions,
   FlowStore,
-} from '../types'
-import { useWindow } from '../composables'
+} from '~/types'
+import { useWindow } from '~/composables'
 
 export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
   const target = e.target as HTMLElement