diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue index 2af47b33..e026368d 100644 --- a/examples/Stress/StressExample.vue +++ b/examples/Stress/StressExample.vue @@ -9,19 +9,8 @@ const onLoad = (flowInstance: FlowInstance) => { console.log(flowInstance.getNodes()) } -const { nodes, edges } = getElements(5, 5) +const { nodes, edges } = getElements(30, 30) - diff --git a/src/components/index.ts b/src/components/index.ts index 6e7fff9f..d605cd6c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,6 +2,5 @@ export * from './Nodes' export * from './Edges' export * from './ConnectionLine/ConnectionLine.vue' export * from './Handle/Handle.vue' -export * from './Loading/LoadingIndicator.vue' export * from './NodesSelection/NodesSelection.vue' export * from './UserSelection/UserSelection.vue' diff --git a/src/store/getters.ts b/src/store/getters.ts index 14a30136..32b9ec24 100644 --- a/src/store/getters.ts +++ b/src/store/getters.ts @@ -7,7 +7,8 @@ export default (state: FlowState): FlowGetters => { const edgeTypes: Record = { ...defaultEdgeTypes, } - state.edgeTypes?.forEach((n) => (edgeTypes[n] = n)) + const keys = Object.keys(edgeTypes) + state.edges?.forEach((e) => e.type && !keys.includes(e.type) && (edgeTypes[e.type] = e.type)) return edgeTypes }) @@ -15,7 +16,8 @@ export default (state: FlowState): FlowGetters => { const nodeTypes: Record = { ...defaultNodeTypes, } - state.nodeTypes?.forEach((n) => (nodeTypes[n] = n)) + const keys = Object.keys(nodeTypes) + state.nodes?.forEach((n) => n.type && !keys.includes(n.type) && (nodeTypes[n.type] = n.type)) return nodeTypes }) diff --git a/src/store/state.ts b/src/store/state.ts index 4a28f927..e9724b1a 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -19,8 +19,6 @@ export const initialState = (): FlowState => ({ elements: [], nodes: [], edges: [], - nodeTypes: [], - edgeTypes: [], isReady: false, instance: undefined, diff --git a/src/types/components.ts b/src/types/components.ts index e2ef1df2..6729dc81 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -1,15 +1,15 @@ import { Component, CSSProperties, DefineComponent } from 'vue' -import { BackgroundVariant, Dimensions, FitViewParams, Position, XYPosition } from './flow' +import { BackgroundVariant, Dimensions, Position, XYPosition } from './flow' import { Connection, ConnectionLineType } from './connection' import { GraphNode, Node, NodeProps } from './node' import { EdgeProps } from './edge' +import { FitViewParams } from './zoom' +type GlobalComponentName = string export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component } -export type EdgeTypes = (keyof DefaultEdgeTypes | string)[] -export type NodeComponent = Component | DefineComponent | string +export type NodeComponent = Component | DefineComponent | GlobalComponentName export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: Component } -export type NodeTypes = (keyof DefaultNodeTypes | string)[] -export type EdgeComponent = Component | DefineComponent | string +export type EdgeComponent = Component | DefineComponent | GlobalComponentName export type HandleType = 'source' | 'target' @@ -49,13 +49,13 @@ export interface ControlEvents { (event: 'interaction-change', active: boolean): void } -export type StringFunc = (node: Node | GraphNode) => string +export type StringFunc = (node: Node | GraphNode) => string export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined -export interface MiniMapProps { - nodeColor?: string | StringFunc - nodeStrokeColor?: string | StringFunc - nodeClassName?: string | StringFunc +export interface MiniMapProps { + nodeColor?: string | StringFunc + nodeStrokeColor?: string | StringFunc + nodeClassName?: string | StringFunc nodeBorderRadius?: number nodeStrokeWidth?: number maskColor?: string @@ -74,12 +74,7 @@ export interface MiniMapNodeProps { export interface EdgeTextProps { x: number y: number - label?: - | string - | { - component: any - props?: any - } + label?: string labelStyle?: CSSProperties labelShowBg?: boolean labelBgStyle?: any @@ -87,7 +82,7 @@ export interface EdgeTextProps { labelBgBorderRadius?: number } -export interface CustomConnectionLineProps { +export interface CustomConnectionLineProps { sourceX: number sourceY: number sourcePosition: Position @@ -96,7 +91,7 @@ export interface CustomConnectionLineProps { targetPosition: Position connectionLineType: ConnectionLineType connectionLineStyle: CSSProperties - nodes: GraphNode[] - sourceNode: GraphNode + nodes: GraphNode[] + sourceNode: GraphNode sourceHandle: HandleElement } diff --git a/src/types/flow.ts b/src/types/flow.ts index 5a7348ca..220a76da 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -3,7 +3,6 @@ import { GraphEdge, Edge } from './edge' import { GraphNode, CoordinateExtent, Node } from './node' import { ConnectionLineType, ConnectionMode } from './connection' import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom' -import { EdgeTypes, NodeTypes } from './components' export type FlowElement = GraphNode | GraphEdge export type FlowElements = FlowElement[] @@ -81,8 +80,6 @@ export interface FlowProps { edges?: Edge[] elements?: Elements id?: string - nodeTypes?: NodeTypes - edgeTypes?: EdgeTypes connectionMode?: ConnectionMode connectionLineType?: ConnectionLineType connectionLineStyle?: CSSProperties diff --git a/src/types/store.ts b/src/types/store.ts index 63b8b95f..424d2292 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -1,7 +1,7 @@ import { ComputedRef, ToRefs } from 'vue' import { UnwrapNestedRefs } from '@vue/reactivity' import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, Transform, XYPosition } from './flow' -import { HandleType, EdgeComponent, NodeComponent, NodeTypes, EdgeTypes } from './components' +import { HandleType, EdgeComponent, NodeComponent } from './components' import { ConnectionLineType, ConnectionMode, SetConnectionId } from './connection' import { Edge, GraphEdge } from './edge' import { GraphNode, CoordinateExtent, Node } from './node' @@ -15,8 +15,6 @@ export interface FlowState extends Omit, 'id'> elements: Elements nodes: GraphNode[] edges: GraphEdge[] - nodeTypes: NodeTypes - edgeTypes: EdgeTypes d3Zoom?: D3Zoom d3Selection?: D3Selection