refactor(types)!: change node and edge types to extend element

* element type provides intersection interface of nodes and edges
* rename isHidden to hidden

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

examples/Hidden/HiddenExample.vue

@@ -17,7 +17,7 @@ const onConnect = (params: Connection | Edge) => (elements.value = addEdge(param
 
 watchEffect(() => {
   elements.value = elements.value.map((e) => {
-    e.isHidden = isHidden.value
+    e.hidden = isHidden.value
     return e
   })
 })

examples/UpdateNode/UpdateNodeExample.vue

@@ -25,7 +25,7 @@ const updateNode = () => {
         label: opts.value.name,
       }
       el.style = { backgroundColor: opts.value.bg }
-      el.isHidden = opts.value.hidden
+      el.hidden = opts.value.hidden
     }
 
     return el

src/store/getters.ts

@@ -20,7 +20,7 @@ export default (state: FlowState): FlowGetters => {
 
   const getNodes = computed<GraphNode[]>(() => {
     if (state.isReady) {
-      const nodes = state.elements.filter((n) => isGraphNode(n) && !n.isHidden) as GraphNode[]
+      const nodes = state.elements.filter((n) => isGraphNode(n) && !n.hidden) as GraphNode[]
       return state.onlyRenderVisibleElements
         ? nodes &&
             getNodesInside(
@@ -40,7 +40,7 @@ export default (state: FlowState): FlowGetters => {
   })
 
   const getEdges = computed<GraphEdge[]>(() => {
-    const edges = state.elements.filter((e) => isEdge(e) && !e.isHidden) as GraphEdge[]
+    const edges = state.elements.filter((e) => isEdge(e) && !e.hidden) as GraphEdge[]
     if (state.isReady) {
       return (
         edges

src/types/edge.ts

@@ -1,36 +1,21 @@
-import { CSSProperties } from 'vue'
+import { ArrowHeadType, ElementId, Position, Element } from './flow'
-import { ArrowHeadType, ElementId, Position } from './flow'
-import { EdgeTextProps, EdgeTypes } from './components'
 import { GraphNode } from './node'
 
-export interface Edge<T = any> {
+export interface Edge<T = any> extends Element<T> {
-  id: ElementId
-  type?: EdgeTypes[number]
   source: ElementId
   target: ElementId
   sourceHandle?: ElementId
   targetHandle?: ElementId
-  selected?: boolean
   sourcePosition?: Position
   targetPosition?: Position
-  label?:
-    | string
-    | {
-        component: any
-        props?: Record<string, any> & Partial<EdgeTextProps>
-      }
   labelStyle?: any
   labelShowBg?: boolean
   labelBgStyle?: any
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
-  style?: CSSProperties | unknown
   animated?: boolean
   arrowHeadType?: ArrowHeadType
   markerEndId?: string
-  data?: T
-  class?: string
-  isHidden?: boolean
   updatable?: boolean
 }
 

src/types/flow.ts

@@ -8,6 +8,15 @@ import { EdgeTypes, NodeTypes } from './components'
 export type ElementId = string
 export type FlowElement<DataNode = any, DataEdge = any> = GraphNode<DataNode> | GraphEdge<DataEdge>
 export type FlowElements<DataNode = any, DataEdge = any> = FlowElement<DataNode, DataEdge>[]
+export interface Element<Data = any> {
+  id: ElementId
+  label?: string
+  type?: string
+  data?: Data
+  class?: string
+  style?: CSSProperties
+  hidden?: boolean
+}
 export type Elements<DataNode = any, DataEdge = any> = (Node<DataNode> | Edge<DataEdge>)[]
 
 export type NextElements = {

src/types/node.ts

@@ -1,7 +1,6 @@
-import { CSSProperties } from 'vue'
 import { DraggableOptions } from '@braks/revue-draggable'
-import { XYPosition, ElementId, Position, SnapGrid } from './flow'
+import { XYPosition, ElementId, Position, SnapGrid, Element } from './flow'
-import { HandleElement, NodeTypes, ValidConnectionFunc } from './components'
+import { HandleElement, ValidConnectionFunc } from './components'
 
 export interface VFInternals {
   isDragging?: boolean
@@ -15,16 +14,10 @@ export interface VFInternals {
 
 export type Draggable = Omit<DraggableOptions, 'scale' | 'grid' | 'enableUserSelectHack' | 'enableTransformFix'> | boolean
 
-export interface Node<T = any> {
+export interface Node<T = any> extends Element<T> {
-  id: ElementId
   position: XYPosition
-  type?: NodeTypes[number]
-  class?: string
-  style?: CSSProperties
-  data?: T
   targetPosition?: Position
   sourcePosition?: Position
-  isHidden?: boolean
   draggable?: Draggable
   selectable?: boolean
   connectable?: boolean