diff --git a/package/src/composables/useVueFlow.ts b/package/src/composables/useVueFlow.ts index a811feaf..8b5a8411 100644 --- a/package/src/composables/useVueFlow.ts +++ b/package/src/composables/useVueFlow.ts @@ -1,5 +1,5 @@ import { EffectScope } from 'vue' -import { ElementData, FlowHooksOn, FlowOptions, State, UseVueFlow } from '~/types' +import { FlowHooksOn, FlowOptions, State, UseVueFlow } from '~/types' import { VueFlow } from '~/context' import useState from '~/store/state' import useGetters from '~/store/getters' @@ -73,12 +73,10 @@ export class Storage { } } -type Injection = UseVueFlow | null | undefined +type Injection = UseVueFlow | null | undefined type Scope = (EffectScope & { vueFlowId: string }) | undefined -export default ( - options?: Partial, -): UseVueFlow => { +export default (options?: Partial): UseVueFlow => { const storage = Storage.getInstance() const scope = getCurrentScope() as Scope const vueFlowId = scope?.vueFlowId || options?.id diff --git a/package/src/container/EdgeRenderer/EdgeRenderer.vue b/package/src/container/EdgeRenderer/EdgeRenderer.vue index d9476571..26974e89 100644 --- a/package/src/container/EdgeRenderer/EdgeRenderer.vue +++ b/package/src/container/EdgeRenderer/EdgeRenderer.vue @@ -10,9 +10,11 @@ const { store } = useVueFlow() const sourceNode = controlledComputed( () => store.connectionNodeId, () => { - if (store.connectionNodeId) return store.getNodes[store.getNodes.map((n) => n.id).indexOf(store.connectionNodeId)] + if (store.connectionNodeId) return store.getNode(store.connectionNodeId) + return false }, ) + const connectionLineVisible = controlledComputed( () => store.connectionNodeId, () => @@ -47,7 +49,7 @@ export default { :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable" :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable" /> - + diff --git a/package/src/types/changes.ts b/package/src/types/changes.ts index 8ae463bf..cb58d50e 100644 --- a/package/src/types/changes.ts +++ b/package/src/types/changes.ts @@ -27,13 +27,13 @@ export type NodeRemoveChange = { type: 'remove' } -export type NodeAddChange = { - item: Node +export type NodeAddChange = { + item: Node type: 'add' } -export type NodeResetChange = { - item: Node +export type NodeResetChange = { + item: Node type: 'reset' } @@ -47,12 +47,12 @@ export type NodeChange = export type EdgeSelectionChange = NodeSelectionChange export type EdgeRemoveChange = NodeRemoveChange -export type EdgeAddChange = { - item: Edge +export type EdgeAddChange = { + item: Edge type: 'add' } -export type EdgeResetChange = { - item: Edge +export type EdgeResetChange = { + item: Edge type: 'reset' } export type EdgeChange = EdgeSelectionChange | EdgeRemoveChange | EdgeAddChange | EdgeResetChange diff --git a/package/src/types/connection.ts b/package/src/types/connection.ts index 96c00ff5..6d88aae8 100644 --- a/package/src/types/connection.ts +++ b/package/src/types/connection.ts @@ -39,7 +39,7 @@ export enum ConnectionMode { Loose = 'loose', } -export interface ConnectionLineProps { +export interface ConnectionLineProps { /** Source X position of the connection line */ sourceX: number /** Source Y position of the connection line */ @@ -57,9 +57,9 @@ export interface ConnectionLineProps { /** extra styles */ connectionLineStyle: CSSProperties /** All currently stored nodes */ - nodes: GraphNode[] + nodes: GraphNode[] /** The source node of the connection line */ - sourceNode: GraphNode + sourceNode: GraphNode /** The source handle element of the connection line */ sourceHandle: HandleElement } diff --git a/package/src/types/edge.ts b/package/src/types/edge.ts index 07ed768b..20f5a0f4 100644 --- a/package/src/types/edge.ts +++ b/package/src/types/edge.ts @@ -1,5 +1,5 @@ import { Component, CSSProperties, VNode } from 'vue' -import { Position, Element, ElementData } from './flow' +import { Position, BaseElement, ElementData } from './flow' import { GraphNode } from './node' import { EdgeComponent, EdgeTextProps } from './components' @@ -42,7 +42,7 @@ export interface MarkerProps { export type EdgeMarkerType = string | MarkerType | EdgeMarker -export interface Edge extends Element { +export interface Edge extends BaseElement { label?: string | VNode | Component /** Source node id */ source: string @@ -100,10 +100,10 @@ export type GraphEdge = Edge & { } & EdgePositions /** these props are passed to edge components */ -export interface EdgeProps { +export interface EdgeProps { id: string - sourceNode: GraphNode - targetNode: GraphNode + sourceNode: GraphNode + targetNode: GraphNode label?: string | VNode | Component | Object type?: string data?: Data @@ -132,11 +132,10 @@ export interface EdgeProps - extends EdgeProps { +export interface SmoothStepEdgeProps extends EdgeProps { id: string - sourceNode: GraphNode - targetNode: GraphNode + sourceNode: GraphNode + targetNode: GraphNode label?: string | VNode | Component | Object type?: string data?: Data diff --git a/package/src/types/flow.ts b/package/src/types/flow.ts index eb21cb19..8149014f 100644 --- a/package/src/types/flow.ts +++ b/package/src/types/flow.ts @@ -8,8 +8,8 @@ import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from export type ElementData = any /** an internal element */ -export type FlowElement = GraphNode | GraphEdge -export type FlowElements = (FlowElement | FlowElement)[] +export type FlowElement = GraphNode | GraphEdge +export type FlowElements = FlowElement[] export type CustomThemeVars = Record export type CSSVars = @@ -25,7 +25,7 @@ export type ClassFunc = (element: FlowElement) => stri export type StyleFunc = (element: FlowElement) => Styles | void /** base element props */ -export interface Element { +export interface BaseElement { id: string label?: string | VNode | Component type?: string @@ -34,7 +34,8 @@ export interface Element { style?: Styles | StyleFunc hidden?: boolean } -export type Elements = (Node | Edge)[] +export type Element = Node | Edge +export type Elements = Element[] /** Handle Positions */ export enum Position { @@ -92,11 +93,11 @@ interface Exports { export type FlowInstance = Exports & ViewportFuncs -export interface FlowProps { +export interface FlowProps { id?: string - modelValue?: Elements - nodes?: Node[] - edges?: Edge[] + modelValue?: Elements + nodes?: Node[] + edges?: Edge[] /** either use the edgeTypes prop to define your edge-types or use slots (