update(dist): Remove rollup and use vite to build lib

* Remove custom tsconfig paths to avoid resolving issues on published package

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 } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
-import { getBoundsofRects, getRectOfNodes } from '~/utils'
-import { Node } from '~/types'
-import { useStore } from '~/composables'
 
 type StringFunc = (node: Node) => string
 type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined

src/assets/icons/fitview.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
+  <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
+</svg>

src/assets/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
+</svg>

src/assets/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
+  <path d="M0 0h32v4.2H0z"/>
+</svg>

src/assets/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"/>
+</svg>

src/assets/icons/unlock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+  <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
+</svg>

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 '~/components/Edges/utils'
-import { useStore } from '~/composables'
+import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
+import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
+import { useStore } from '../../composables'
 
 interface ConnectionLineProps {
   sourceNode: Node

src/components/Edges/BezierEdge.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { CSSProperties, VNode } from 'vue'
+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'
-import { getCenter, getMarkerEnd, getBezierPath } from '~/components/Edges/utils'
 
-interface BezierEdgeProps<T = any> {
+interface BezierEdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -30,7 +30,7 @@ interface BezierEdgeProps<T = any> {
   style?: CSSProperties
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   sourceHandleId?: ElementId
   targetHandleId?: 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/graph'
-import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
-import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType

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/EdgeText.vue

@@ -4,13 +4,7 @@ import { CSSProperties, HTMLAttributes } from 'vue'
 interface EdgeTextProps extends HTMLAttributes {
   x: number
   y: number
-  label?:
-    | string
-    | {
-        component: any
-        props?: any
-      }
-    | any
+  label?: any
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any

src/components/Edges/SmoothStepEdge.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { VNode } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
-import { getCenter, getMarkerEnd, getSmoothStepPath } from '~/components/Edges/utils'
+import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
 
-export interface EdgeSmoothStepProps<T = any> {
+export interface EdgeSmoothStepProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -30,7 +29,7 @@ export interface EdgeSmoothStepProps<T = any> {
   style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   borderRadius?: number
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null

src/components/Edges/StepEdge.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { VNode } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
 
-export interface EdgeStepProps<T = any> {
+export interface EdgeStepProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -29,7 +28,7 @@ export interface EdgeStepProps<T = any> {
   style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }

src/components/Edges/StraightEdge.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { VNode } from 'vue'
+import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, ElementId, Position } from '~/types'
-import { getMarkerEnd, getBezierPath } from '~/components/Edges/utils'
+import { getMarkerEnd, getBezierPath } from './utils'
 
-interface StraightEdgeProps<T = any> {
+interface StraightEdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -30,7 +29,7 @@ interface StraightEdgeProps<T = any> {
   style?: any
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
+  data?: any
   sourceHandleId?: ElementId | null
   targetHandleId?: ElementId | null
 }

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 '~/components/Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import Handle from '../Handle/Handle.vue'
+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 '~/components/Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import Handle from '../Handle/Handle.vue'
+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

src/components/Nodes/OutputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import Handle from '~/components/Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import Handle from '../Handle/Handle.vue'
+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 { DraggableEventListener } from '@braks/revue-draggable'
-import { Node } from '~/types'
-import { getRectOfNodes, isNode } from '~/utils/graph'
-import { useHooks, useStore } from '~/composables'
+import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
+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 '~/components/UserSelection/utils'
-import { useStore } from '~/composables'
+import { getMousePosition } from './utils'
 
 const store = useStore()
 const el = templateRef('user-selection', null)

src/components/UserSelection/utils.ts

@@ -1,4 +1,4 @@
-import { XYPosition } from '~/types'
+import { XYPosition } from '../../types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
   const flowNode = (event.target as Element).closest('.vue-flow')

src/composables/useHandle.ts

@@ -1,7 +1,7 @@
-import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
-import useStore from '~/composables/useStore'
-import useHooks from '~/composables/useHooks'
+import { getHostForElement } from '../utils'
+import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '../types'
+import useStore from './useStore'
+import useHooks from './useHooks'
 
 type Result = {
   elementBelow: Element | null
@@ -157,6 +157,7 @@ export default () => {
       hooks.connectEnd.trigger(event)
 
       if (elementEdgeUpdaterType) {
+        // todo fix missing edge
         hooks.edgeUpdateEnd.trigger({ event } as any)
       }
 

src/composables/useHooks.ts

@@ -1,5 +1,15 @@
-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,6 +1,6 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
-import { KeyCode } from '~/types'
+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,7 +1,6 @@
-import { FlowOptions } from '~/types'
-import useFlowStore from '~/store/useFlowStore'
-import { 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 '~/composables/useStore'
+import { ElementId, UpdateNodeInternals } from '../types'
+import useStore from './useStore'
 
 export default (store = useStore()): UpdateNodeInternals =>
   (id: ElementId) => {

src/composables/useZoom.ts

@@ -2,9 +2,11 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { Ref } from 'vue'
 import { get } from '@vueuse/core'
-import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '~/types'
-import { clamp } from '~/utils'
-import { useKeyPress, useHooks, useStore } from '~/composables'
+import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '../types'
+import { clamp } from '../utils'
+import useKeyPress from './useKeyPress'
+import useHooks from './useHooks'
+import useStore from './useStore'
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
   prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k

src/composables/useZoomPanHelper.ts

@@ -1,8 +1,8 @@
 // @ts-nocheck
 import { zoomIdentity } from 'd3-zoom'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils/graph'
-import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
-import useStore from '~/composables/useStore'
+import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils'
+import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '../types'
+import useStore from './useStore'
 
 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 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>
@@ -25,7 +25,7 @@ const store = useStore()
 
 const sourceNode = computed(() => store.nodes.find((n) => n.id === store.connectionNodeId))
 const connectionLineVisible = computed(
-  () => store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType,
+  () => !!(store.nodesConnectable && sourceNode.value && store.connectionNodeId && store.connectionHandleType),
 )
 const edges = computed(() => store.edges.filter((edge) => !edge.isHidden))
 </script>

src/container/EdgeRenderer/utils.ts

@@ -1,6 +1,6 @@
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
-import { rectToBox } from '~/utils/graph'
-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,11 +1,9 @@
 <script lang="ts" setup>
-import '~/style.css'
-import '~/theme-default.css'
 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 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,
@@ -17,12 +15,12 @@ import {
   TranslateExtent,
   NodeExtent,
   FlowOptions,
-} from '~/types'
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
-import { createEdgeTypes } from '~/container/EdgeRenderer/utils'
-import { createNodeTypes } from '~/container/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 { createEdgeTypes } from '../EdgeRenderer/utils'
+import { createNodeTypes } from '../NodeRenderer/utils'
+import { useHooks, useStore, createHooks } from '../../composables'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements
@@ -189,3 +187,7 @@ const edgeTypes = controlledComputed(
     <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>
+<style>
+@import '../../style.css';
+@import '../../theme-default.css';
+</style>

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,10 +1,9 @@
 <script lang="ts" setup>
-import useKeyPress from '~/composables/useKeyPress'
-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/graph'
-import { useHooks, useStore } 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

@@ -3,9 +3,9 @@ import { onMounted } from 'vue'
 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/graph'
+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

src/context/index.ts

@@ -1,6 +1,5 @@
-// @ts-nocheck
 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,9 +1,18 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import isEqual from 'fast-deep-equal'
-import { Edge, FlowState, Node, FlowActions } from '~/types'
-import { clampPosition, getDimensions } from '~/utils'
-import { getConnectedEdges, getNodesInside, getRectOfNodes, isEdge, isNode, parseEdge, parseNode } from '~/utils/graph'
-import { getHandleBounds } from '~/components/Nodes/utils'
+import { Edge, FlowState, Node, FlowActions } from '../types'
+import {
+  clampPosition,
+  getDimensions,
+  getConnectedEdges,
+  getNodesInside,
+  getRectOfNodes,
+  isEdge,
+  isNode,
+  parseEdge,
+  parseNode,
+} from '../utils'
+import { getHandleBounds } from '../components/Nodes/utils'
 
 type NextElements = {
   nextNodes: Node[]

src/types/composables.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'vue'
 import { ElementId, FlowTransform } from './types'
 import { D3Zoom, D3Selection, PanOnScrollMode, KeyCode } from './panel'
-import { Connection } from '@/src'
+import { Connection } from './connection'
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void
 

src/types/connection.ts

@@ -1,5 +1,5 @@
 import { ElementId, Position } from './types'
-import { HandleType } from '~/types/handle'
+import { HandleType } from './handle'
 
 export enum ConnectionLineType {
   Bezier = 'default',

src/types/edge.ts

@@ -1,4 +1,4 @@
-import { DefineComponent, VNode } from 'vue'
+import { DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './types'
 import { Connection } from './connection'
 
@@ -63,7 +63,7 @@ export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
   borderRadius?: number
 }
 
-export type EdgeType = DefineComponent<EdgeSmoothStepProps>
+export type EdgeType = DefineComponent<EdgeSmoothStepProps, any, any, any, any, any>
 
 export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
 

src/types/hooks.ts

@@ -1,5 +1,8 @@
 import { EventHook } from '@vueuse/core'
-import { Connection, Edge, Elements, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '../types'
+import { Elements, FlowTransform, FlowInstance } from './types'
+import { Edge } from './edge'
+import { Node } from './node'
+import { Connection, OnConnectStartParams } from './connection'
 
 export type FlowHook<T = any> = EventHook<T>
 

src/types/node.ts

@@ -1,6 +1,5 @@
 import { DefineComponent } from 'vue'
-import { XYPosition } from './types'
-import { ElementId, Position } from './index'
+import { XYPosition, ElementId, Position } from './types'
 
 export interface Node<T = any> {
   id: ElementId

src/types/store.ts

@@ -5,7 +5,7 @@ import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, On
 import { Edge } from './edge'
 import { Node, NodeExtent, TranslateExtent } from './node'
 import { FlowActions } from './actions'
-import { D3Selection, D3Zoom, D3ZoomHandler } from '~/types/panel'
+import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
 
 export interface FlowState {
   dimensions: Dimensions

src/types/types.ts

@@ -1,9 +1,8 @@
-// @ts-nocheck
 import { CSSProperties, HTMLAttributes } from 'vue'
 import { Edge, EdgeType } from './edge'
 import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
-import { ConnectionLineType, ConnectionMode } from '~/types/connection'
-import { KeyCode, PanOnScrollMode } from '~/types/panel'
+import { ConnectionLineType, ConnectionMode } from './connection'
+import { KeyCode, PanOnScrollMode } from './panel'
 
 export type ElementId = string
 

src/utils/graph.ts

@@ -12,7 +12,7 @@ import {
   NodeExtent,
   Dimensions,
   FlowStore,
-} from '~/types'
+} from '../types'
 
 export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
   const target = e.target as HTMLElement
@@ -34,7 +34,7 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
 export const getHostForElement = (element: HTMLElement): Document => {
   const doc = element.getRootNode() as Document
   if ('getElementFromPoint' in doc) return doc
-  else return false as any
+  else return window.document
 }
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>