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