From 37fd017e37ab1e1fe9a77ea12cce453ae7042e34 Mon Sep 17 00:00:00 2001 From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 10 Jun 2022 17:02:00 +0200 Subject: [PATCH] refactor(nodes,edges): Remove `BaseElement` type # What's changed? * Remove `BaseElement` type * Merge base element props into `Node` and `Edge` types * Allow `ClassFunc` and `StyleFunc` types to specify what element type is used in callback --- packages/vue-flow/src/types/edge.ts | 20 +++++++++++++++----- packages/vue-flow/src/types/flow.ts | 25 ++++++++----------------- packages/vue-flow/src/types/node.ts | 16 ++++++++++++++-- 3 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/vue-flow/src/types/edge.ts b/packages/vue-flow/src/types/edge.ts index ddbae9a2..4fd54641 100644 --- a/packages/vue-flow/src/types/edge.ts +++ b/packages/vue-flow/src/types/edge.ts @@ -1,5 +1,5 @@ import type { CSSProperties, Component, VNode } from 'vue' -import type { BaseElement, ElementData, Position } from './flow' +import type { ClassFunc, ElementData, Position, StyleFunc, Styles } from './flow' import type { GraphNode } from './node' import type { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components' @@ -42,9 +42,12 @@ export interface MarkerProps { export type EdgeMarkerType = string | MarkerType | EdgeMarker -export interface Edge extends BaseElement { +export interface Edge { + /** Unique edge id */ + id: string + /** An edge label */ label?: string | VNode | Component - /** node type, can be a default type or a custom type */ + /** Edge type, can be a default type or a custom type */ type?: keyof DefaultEdgeTypes | string /** Source node id */ source: string @@ -78,9 +81,16 @@ export interface Edge extends BaseElement { updatable?: boolean /** Disable/enable selecting edge */ selectable?: boolean - - /** overwrites current edge type */ + /** Additional class names, can be a string or a callback returning a string (receives current flow element) */ + class?: string | ClassFunc> + /** Additional styles, can be an object or a callback returning an object (receives current flow element) */ + style?: Styles | StyleFunc> + /** Is edge hidden */ + hidden?: boolean + /** Overwrites current edge type */ template?: EdgeComponent + /** Additional data that is passed to your custom components */ + data?: Data } export type DefaultEdgeOptions = Omit< diff --git a/packages/vue-flow/src/types/flow.ts b/packages/vue-flow/src/types/flow.ts index 8ef0cc2f..7d3cc0f6 100644 --- a/packages/vue-flow/src/types/flow.ts +++ b/packages/vue-flow/src/types/flow.ts @@ -1,4 +1,4 @@ -import type { CSSProperties, Component, VNode } from 'vue' +import type { CSSProperties } from 'vue' import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge' import type { CoordinateExtent, GraphNode, Node } from './node' import type { ConnectionLineType, ConnectionMode } from './connection' @@ -7,10 +7,14 @@ import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } export type ElementData = any -/** an internal element */ +/** A flow element (after parsing into state) */ export type FlowElement = GraphNode | GraphEdge export type FlowElements = FlowElement[] +/** Initial elements (before parsing into state) */ +export type Element = Node | Edge +export type Elements = Element[] + export type CustomThemeVars = Record export type CSSVars = | '--vf-node-color' @@ -21,21 +25,8 @@ export type CSSVars = | '--vf-handle' export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] } export type Styles = CSSProperties & ThemeVars & CustomThemeVars -export type ClassFunc = (element: FlowElement) => string | void -export type StyleFunc = (element: FlowElement) => Styles | void - -/** base element props */ -export interface BaseElement { - id: string - label?: string | VNode | Component - type?: string - data?: Data - class?: string | ClassFunc - style?: Styles | StyleFunc - hidden?: boolean -} -export type Element = Node | Edge -export type Elements = Element[] +export type ClassFunc = (element: ElementType) => string | void +export type StyleFunc = (element: ElementType) => Styles | void /** Handle Positions */ export enum Position { diff --git a/packages/vue-flow/src/types/node.ts b/packages/vue-flow/src/types/node.ts index 7e5551ed..1fd95e41 100644 --- a/packages/vue-flow/src/types/node.ts +++ b/packages/vue-flow/src/types/node.ts @@ -1,5 +1,5 @@ import type { Component, VNode } from 'vue' -import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow' +import type { ClassFunc, Dimensions, ElementData, Position, SnapGrid, StyleFunc, Styles, XYPosition, XYZPosition } from './flow' import type { DefaultNodeTypes, NodeComponent } from './components' import type { HandleElement, ValidConnectionFunc } from './handle' @@ -16,7 +16,11 @@ type WidthFunc = (node: GraphNode) => number | string // eslint-disable-next-line no-use-before-define type HeightFunc = (node: GraphNode) => number | string | void -export interface Node extends BaseElement { +export interface Node { + /** Unique node id */ + id: string + /** A node label */ + label?: string | VNode | Component /** initial node position x, y */ position: XYPosition /** node type, can be a default type or a custom type */ @@ -56,8 +60,16 @@ export interface Node extends BaseElement { */ height?: number | string | HeightFunc + /** Additional class names, can be a string or a callback returning a string (receives current flow element) */ + class?: string | ClassFunc> + /** Additional styles, can be an object or a callback returning an object (receives current flow element) */ + style?: Styles | StyleFunc> + /** Is node hidden */ + hidden?: boolean /** overwrites current node type */ template?: NodeComponent + /** Additional data that is passed to your custom components */ + data?: Data } export interface GraphNode extends Node {