From fe0eeaeae998a703750109e7e43985b3cbc96d0e Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Dec 2021 17:41:19 +0100
Subject: [PATCH] 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         |  2 +-
 examples/UpdateNode/UpdateNodeExample.vue |  2 +-
 src/store/getters.ts                      |  4 ++--
 src/types/edge.ts                         | 19 ++-----------------
 src/types/flow.ts                         |  9 +++++++++
 src/types/node.ts                         | 13 +++----------
 6 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index cb84d297..a8b3372d 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/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
   })
 })
diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
index 16787a60..52bd5b91 100644
--- a/examples/UpdateNode/UpdateNodeExample.vue
+++ b/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
diff --git a/src/store/getters.ts b/src/store/getters.ts
index cfcac746..e9c3392c 100644
--- a/src/store/getters.ts
+++ b/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
diff --git a/src/types/edge.ts b/src/types/edge.ts
index 283a472b..da03004b 100644
--- a/src/types/edge.ts
+++ b/src/types/edge.ts
@@ -1,36 +1,21 @@
-import { CSSProperties } from 'vue'
-import { ArrowHeadType, ElementId, Position } from './flow'
-import { EdgeTextProps, EdgeTypes } from './components'
+import { ArrowHeadType, ElementId, Position, Element } from './flow'
 import { GraphNode } from './node'
 
-export interface Edge<T = any> {
-  id: ElementId
-  type?: EdgeTypes[number]
+export interface Edge<T = any> extends Element<T> {
   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
 }
 
diff --git a/src/types/flow.ts b/src/types/flow.ts
index ac57e118..7500a9b7 100644
--- a/src/types/flow.ts
+++ b/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 = {
diff --git a/src/types/node.ts b/src/types/node.ts
index c8feb588..9b30047e 100644
--- a/src/types/node.ts
+++ b/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 { HandleElement, NodeTypes, ValidConnectionFunc } from './components'
+import { XYPosition, ElementId, Position, SnapGrid, Element } from './flow'
+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> {
-  id: ElementId
+export interface Node<T = any> extends Element<T> {
   position: XYPosition
-  type?: NodeTypes[number]
-  class?: string
-  style?: CSSProperties
-  data?: T
   targetPosition?: Position
   sourcePosition?: Position
-  isHidden?: boolean
   draggable?: Draggable
   selectable?: boolean
   connectable?: boolean