refactor(nodes): use plugin to import prop interface

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

examples/Basic/Basic.vue

@@ -16,10 +16,10 @@ import {
 const onNodeDragStop = (e) => console.log('drag stop', e)
 const onElementClick = (e) => console.log('click', e)
 const nodes = ref<Elements>([
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
 ])
 const edges = ref<Elements>([])
 const vfInstance = ref<FlowInstance>()

src/components/Nodes/DefaultNode.vue

@@ -1,21 +1,13 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position, ValidConnectionFunc } from '../../types'
+import { Position } from '../../types'
+import type { NodeProps } from '../../types/node'
 
-interface DefaultNodeProps extends NodeProps {
-  data?: NodeProps['data']
-  connectable?: NodeProps['connectable']
-  targetPosition?: NodeProps['targetPosition']
-  sourcePosition?: NodeProps['sourcePosition']
-  isValidTargetPos?: ValidConnectionFunc
-  isValidSourcePos?: ValidConnectionFunc
-}
-
-const props = withDefaults(defineProps<DefaultNodeProps>(), {
+const props = withDefaults(defineProps<NodeProps>(), {
   data: () => {},
   connectable: false,
-  targetPosition: Position.Top,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
+  targetPosition: 'top' as Position,
 })
 </script>
 <script lang="ts">
@@ -32,8 +24,7 @@ export default {
     :is-valid-connection="props.isValidTargetPos"
   />
   <slot v-bind="props">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <span v-else v-html="props.data?.label"></span>
+    <span v-if="props.label" v-html="props.label" />
   </slot>
   <Handle
     type="source"

src/components/Nodes/InputNode.vue

@@ -1,18 +1,12 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position, ValidConnectionFunc } from '../../types'
+import { Position } from '../../types'
+import type { NodeProps } from '../../types/node'
 
-interface InputNodeProps extends NodeProps {
-  data?: NodeProps['data']
-  connectable?: NodeProps['connectable']
-  sourcePosition?: NodeProps['sourcePosition']
-  isValidSourcePos?: ValidConnectionFunc
-}
-
-const props = withDefaults(defineProps<InputNodeProps>(), {
+const props = withDefaults(defineProps<NodeProps>(), {
   data: () => {},
   connectable: false,
-  sourcePosition: Position.Bottom,
+  sourcePosition: 'bottom' as Position,
 })
 </script>
 <script lang="ts">
@@ -23,8 +17,7 @@ export default {
 </script>
 <template>
   <slot v-bind="props">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <span v-else v-html="props.data?.label"></span>
+    <span v-if="props.label" v-html="props.label" />
   </slot>
   <Handle
     type="source"

src/components/Nodes/NodeWrapper.vue

@@ -172,10 +172,6 @@ export default {
     >
       <slot
         v-bind="{
-          id: node.id,
-          data: node.data,
-          type: node.type,
-          position: node.position,
           selected,
           connectable: props.connectable,
           sourcePosition: node.sourcePosition,
@@ -183,15 +179,28 @@ export default {
           dragging: node.dragging,
           isValidTargetPos: node.isValidTargetPos,
           isValidSourcePos: node.isValidSourcePos,
+          label: node.label,
+          class: node.class,
+          style: node.style,
+          hidden: node.hidden,
+          id: node.id,
+          type: node.type,
+          data: node.data,
+          dragging: node.dragging,
+          handleBounds: node.handleBounds,
+          parentNode: node.parentNode,
+          isParent: node.isParent,
+          computedPosition: node.computedPosition,
+          position: node.position,
+          draggable: props.draggable,
+          selectable: props.selectable,
+          children: node.children,
+          dimensions: node.dimensions,
         }"
       >
         <component
           :is="props.component ?? node.type"
           v-bind="{
-            id: node.id,
-            data: node.data,
-            type: node.type,
-            position: node.position,
             selected,
             connectable: props.connectable,
             sourcePosition: node.sourcePosition,
@@ -199,6 +208,23 @@ export default {
             dragging: node.dragging,
             isValidTargetPos: node.isValidTargetPos,
             isValidSourcePos: node.isValidSourcePos,
+            label: node.label,
+            class: node.class,
+            style: node.style,
+            hidden: node.hidden,
+            id: node.id,
+            type: node.type,
+            data: node.data,
+            dragging: node.dragging,
+            handleBounds: node.handleBounds,
+            parentNode: node.parentNode,
+            isParent: node.isParent,
+            computedPosition: node.computedPosition,
+            position: node.position,
+            draggable: props.draggable,
+            selectable: props.selectable,
+            children: node.children,
+            dimensions: node.dimensions,
           }"
         />
       </slot>

src/components/Nodes/OutputNode.vue

@@ -1,18 +1,12 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position, ValidConnectionFunc } from '../../types'
+import { Position } from '../../types'
+import type { NodeProps } from '../../types/node'
 
-interface OutputNodeProps extends NodeProps {
-  data?: NodeProps['data']
-  connectable?: NodeProps['connectable']
-  targetPosition?: NodeProps['targetPosition']
-  isValidTargetPos?: ValidConnectionFunc
-}
-
-const props = withDefaults(defineProps<OutputNodeProps>(), {
+const props = withDefaults(defineProps<NodeProps>(), {
   data: () => {},
   connectable: false,
-  targetPosition: Position.Top,
+  targetPosition: 'top' as Position,
 })
 </script>
 <script lang="ts">
@@ -23,8 +17,7 @@ export default {
 </script>
 <template>
   <slot v-bind="props">
-    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-    <span v-else v-html="props.data?.label"></span>
+    <span v-if="props.label" v-html="props.label" />
   </slot>
   <Handle
     type="source"

src/types/node.ts

@@ -1,5 +1,6 @@
 import { XYPosition, Position, SnapGrid, Element, XYZPosition, Dimensions } from './flow'
 import { HandleElement, ValidConnectionFunc } from './components'
+import { CSSProperties } from 'vue'
 
 export type CoordinateExtent = [[number, number], [number, number]]
 
@@ -32,7 +33,11 @@ export interface GraphNode<T = any> extends Node<T> {
   dimensions: Dimensions
 }
 
-export interface NodeProps<T = any> extends GraphNode {
+export interface NodeProps<T = any> {
+  label?: string
+  class?: string
+  style?: CSSProperties
+  hidden?: boolean
   id: string
   type?: string
   data?: T
@@ -47,13 +52,13 @@ export interface NodeProps<T = any> extends GraphNode {
     source?: HandleElement[]
     target?: HandleElement[]
   }
-  parentNode?: GraphNode
+  // todo plugin not allowing for nested types currently
+  parentNode?: any
   isParent?: boolean
-  position: XYZPosition
-}
-
-export type NodeDimensionUpdate = {
-  id: string
-  nodeElement: HTMLDivElement
-  dimensions: Dimensions
+  computedPosition: XYZPosition
+  position: XYPosition
+  draggable?: boolean
+  selectable?: boolean
+  children?: any[]
+  dimensions?: Dimensions
 }