feat(nodes,edges): Allow class or styles to be bound with function

* function param is current node
* makes it easier to add classes / styles if specific node is selected etc.

package/src/components/Edges/EdgeWrapper.vue

@@ -54,19 +54,25 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   )
 }
 
+const getClass = () => (edge.value.class instanceof Function ? edge.value.class(edge.value) : edge.value.class)
+const getStyle = () => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style)
+
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() =>
   store.connectionMode === ConnectionMode.Strict
     ? edge.value.targetNode.handleBounds.target
     : edge.value.targetNode.handleBounds.target ?? edge.value.targetNode.handleBounds.source,
 )
+
 const sourceHandle = controlledComputed(
   () => edge.value.sourceNode.handleBounds,
   () => getHandle(edge.value.sourceNode.handleBounds.source, edge.value.sourceHandle),
 )
+
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
+
 const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius)
 
 onMounted(() => {
@@ -118,7 +124,7 @@ export default {
         inactive: !props.selectable,
         updating,
       },
-      edge.class,
+      getClass(),
     ]"
     @click="onEdgeClick"
     @dblClick="onDoubleClick"

package/src/components/Nodes/NodeWrapper.vue

@@ -86,6 +86,9 @@ onMounted(() => {
   store.updateNodeDimensions([{ id: node.value.id, nodeElement: nodeElement.value }])
 })
 
+const getClass = () => (node.value.class instanceof Function ? node.value.class(node.value) : node.value.class)
+const getStyle = () => (node.value.style instanceof Function ? node.value.style(node.value) : node.value.style)
+
 const scale = controlledComputed(
   () => store.transform[2],
   () => store.transform[2],
@@ -140,7 +143,7 @@ export default {
           selected: node.selected,
           selectable: props.selectable,
         },
-        node.class,
+        getClass(),
       ]"
       :style="{
         zIndex: node.computedPosition.z,

package/src/types/flow.ts

@@ -6,8 +6,11 @@ import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
 import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
 /** an internal element  */
-export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
+export type FlowElement<Data = any> = GraphNode<Data> | GraphEdge<Data>
-export type FlowElements<N = any, E = any> = FlowElement<N, E>[]
+export type FlowElements<N = any, E = N> = (FlowElement<N> | FlowElement<E>)[]
+
+type ClassFunc<Data = any> = (element: FlowElement<Data>) => string
+type StyleFunc<Data = any> = (element: FlowElement<Data>) => CSSProperties
 
 /** base element props */
 export interface Element<Data = any> {
@@ -20,8 +23,8 @@ export interface Element<Data = any> {
       }
   type?: string
   data?: Data
-  class?: string
+  class?: string | ClassFunc
-  style?: CSSProperties
+  style?: CSSProperties | StyleFunc
   hidden?: boolean
 }
 export type Elements<N = any, E = any> = (Node<N> | Edge<E>)[]