update!: graphnode and node typing

* graphnode is a node containing internal Vue Flow data
* move util files to util directory
* move flow actions type into store file
* rename panel type file to zoom
* rename types file to flow
* Rename Node to NodeWrapper
* Rename Edge to EdgeWrapper

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

src/components/ConnectionLine/ConnectionLine.vue

@@ -2,10 +2,10 @@
 import { CSSProperties } from 'vue'
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
 import { useStore } from '../../composables'
-import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
+import { ConnectionLineType, HandleElement, GraphNode, Position } from '../../types'
 
 interface ConnectionLineProps {
-  sourceNode: Node
+  sourceNode: GraphNode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
 }
@@ -19,29 +19,29 @@ const store = useStore()
 
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
-    ? props.sourceNode.__vf?.handleBounds[store.connectionHandleType].find(
+    ? props.sourceNode.__vf.handleBounds[store.connectionHandleType]?.find(
         (d: HandleElement) => d.id === store.connectionHandleId,
       )
-    : store.connectionHandleType && props.sourceNode.__vf?.handleBounds[store.connectionHandleType ?? 'source'][0]
+    : store.connectionHandleType && props.sourceNode.__vf.handleBounds[store.connectionHandleType ?? 'source']?.[0]
 const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__vf?.width as number) / 2
 const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__vf?.height
 const sourceX = props.sourceNode.__vf?.position?.x + sourceHandleX
 const sourceY = props.sourceNode.__vf?.position?.y + sourceHandleY
 
-const isRightOrLeft = sourceHandle.position === Position.Left || sourceHandle.position === Position.Right
+const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
 
 const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2])
 const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2])
 
 const dAttr = computed(() => {
-  let path = `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`
+  let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
   switch (props.connectionLineType) {
     case ConnectionLineType.Bezier:
       path = getBezierPath({
         sourceX,
         sourceY,
-        sourcePosition: sourceHandle.position,
+        sourcePosition: sourceHandle?.position,
         targetX: targetX.value,
         targetY: targetY.value,
         targetPosition,
@@ -51,7 +51,7 @@ const dAttr = computed(() => {
       path = getSmoothStepPath({
         sourceX,
         sourceY,
-        sourcePosition: sourceHandle.position,
+        sourcePosition: sourceHandle?.position,
         targetX: targetX.value,
         targetY: targetY.value,
         targetPosition,
@@ -62,7 +62,7 @@ const dAttr = computed(() => {
       path = getSmoothStepPath({
         sourceX,
         sourceY,
-        sourcePosition: sourceHandle.position,
+        sourcePosition: sourceHandle?.position,
         targetX: targetX.value,
         targetY: targetY.value,
         targetPosition,
@@ -78,7 +78,7 @@ const dAttr = computed(() => {
       v-bind="{
         sourceX,
         sourceY,
-        sourcePosition: sourceHandle.position,
+        sourcePosition: sourceHandle?.position,
         targetX,
         targetY,
         targetPosition,

src/components/Edges/EdgeWrapper.vue

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import { useHandle, useStore } from '../../composables'
 import { ConnectionMode, Edge, EdgePositions, Position } from '../../types'
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'
-import { isEdge } from '../../utils'
+import { isEdge, getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
-interface EdgeProps {
+interface EdgeWrapper {
   edge: Edge
   markerEndId?: string
   edgeUpdaterRadius?: number
 }
 
-const props = withDefaults(defineProps<EdgeProps>(), {})
+const props = withDefaults(defineProps<EdgeWrapper>(), {})
 
 const store = useStore()
 

src/components/Edges/index.ts

@@ -4,4 +4,4 @@ export { default as SmoothStepEdge } from './SmoothStepEdge.vue'
 export { default as StraightEdge } from './StraightEdge.vue'
 export { default as EdgeAnchor } from './EdgeAnchor.vue'
 export { default as EdgeText } from './EdgeText.vue'
-export { default as EdgeWrapper } from './Edge.vue'
+export { default as EdgeWrapper } from './EdgeWrapper.vue'

src/components/Nodes/NodeWrapper.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { Node, SnapGrid } from '../../types'
+import { GraphNode, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 
-interface NodeProps {
-  node: Node
+interface NodeWrapperProps {
+  node: GraphNode
   selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
 }
 
-const props = withDefaults(defineProps<NodeProps>(), {
+const props = withDefaults(defineProps<NodeWrapperProps>(), {
   selected: false,
   selectNodesOnDrag: true,
 })

src/components/Nodes/index.ts

@@ -1,4 +1,4 @@
 export { default as DefaultNode } from './DefaultNode.vue'
 export { default as InputNode } from './InputNode.vue'
 export { default as OutputNode } from './OutputNode.vue'
-export { default as NodeWrapper } from './Node.vue'
+export { default as NodeWrapper } from './NodeWrapper.vue'

src/components/Nodes/utils.ts

@@ -1,41 +0,0 @@
-import { HandleElement, Position } from '~/types'
-import { getDimensions } from '~/utils'
-
-export const getHandleBoundsByHandleType = (
-  selector: string,
-  nodeElement: HTMLDivElement,
-  parentBounds: ClientRect | DOMRect,
-  k: number,
-): HandleElement[] | null => {
-  const handles = nodeElement.querySelectorAll(selector)
-
-  if (!handles || !handles.length) {
-    return null
-  }
-
-  const handlesArray = Array.from(handles) as HTMLDivElement[]
-
-  return handlesArray.map((handle): HandleElement => {
-    const bounds = handle.getBoundingClientRect()
-    const dimensions = getDimensions(handle)
-    const handleId = handle.getAttribute('data-handleid')
-    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position
-
-    return {
-      id: handleId,
-      position: handlePosition,
-      x: (bounds.left - parentBounds.left) / k,
-      y: (bounds.top - parentBounds.top) / k,
-      ...dimensions,
-    }
-  })
-}
-
-export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
-  const bounds = nodeElement.getBoundingClientRect()
-
-  return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
-  }
-}

src/components/NodesSelection/NodesSelection.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { Node } from '../../types'
-import { getRectOfNodes, isNode } from '../../utils'
+import { GraphNode } from '../../types'
+import { getRectOfNodes, isGraphNode } from '../../utils'
 
 const store = useStore()
 
-const selectedNodes = store.selectedElements
-  ? store.selectedElements.filter(isNode).map((selectedNode) => {
+const selectedNodes: GraphNode[] = store.selectedElements
+  ? store.selectedElements.filter(isGraphNode).map((selectedNode) => {
       const matchingNode = store.nodes.find((node) => node.id === selectedNode.id)
 
       return {
         ...matchingNode,
         position: matchingNode?.__vf?.position,
-      } as Node
+      } as GraphNode
     })
   : []
 

src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './Nodes'
+export * from './Edges'
+export * from './ConnectionLine/ConnectionLine.vue'
+export * from './Handle/Handle.vue'
+export * from './Loading/LoadingIndicator.vue'
+export * from './NodesSelection/NodesSelection.vue'
+export * from './UserSelection/UserSelection.vue'