feat: add path alias for src

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

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)