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/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),
-  }
-}