From 8b0ddc9be91fd1aabbac53b0d5bd0424647a282b Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 24 Nov 2021 15:07:12 +0100 Subject: [PATCH] refactor(types): Remove SourceTargetNode-type Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- src/components/Edges/EdgeWrapper.vue | 31 ++++++++++++++-------------- src/store/stateStore.ts | 8 +++---- src/types/edge.ts | 5 +++-- src/types/flow.ts | 4 ++-- src/types/node.ts | 7 +------ src/types/store.ts | 2 +- src/utils/edge.ts | 22 +++++++++----------- src/utils/graph.ts | 17 +++++++-------- src/utils/store.ts | 6 +++--- 9 files changed, 46 insertions(+), 56 deletions(-) diff --git a/src/components/Edges/EdgeWrapper.vue b/src/components/Edges/EdgeWrapper.vue index 07723241..693921d4 100644 --- a/src/components/Edges/EdgeWrapper.vue +++ b/src/components/Edges/EdgeWrapper.vue @@ -60,26 +60,23 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => { } // when connection type is loose we can define all handles as sources -const targetNodeHandles = controlledComputed( - () => props.edge.sourceTargetNodes, - () => - store.connectionMode === ConnectionMode.Strict - ? props.edge.sourceTargetNodes.targetNode.__vf.handleBounds.target - : props.edge.sourceTargetNodes.targetNode.__vf.handleBounds.target ?? - props.edge.sourceTargetNodes.targetNode.__vf.handleBounds.source, +const targetNodeHandles = computed(() => + store.connectionMode === ConnectionMode.Strict + ? props.edge.targetNode.__vf.handleBounds.target + : props.edge.targetNode.__vf.handleBounds.target ?? props.edge.targetNode.__vf.handleBounds.source, ) const sourceHandle = controlledComputed( - () => props.edge.sourceTargetNodes, + () => props.edge, () => { - if (props.edge.sourceTargetNodes.sourceNode && props.edge.sourceTargetNodes.sourceNode.__vf.handleBounds.source) - return getHandle(props.edge.sourceTargetNodes.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle) - else return null + if (props.edge.sourceNode && props.edge.sourceNode.__vf.handleBounds.source) + return getHandle(props.edge.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle) + else return undefined }, ) const targetHandle = computed(() => { if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle) - else return null + else return undefined }) const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom)) const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top)) @@ -90,10 +87,10 @@ const isSelected = controlledComputed( ) const edgePos = computed(() => getEdgePositions( - props.edge.sourceTargetNodes.sourceNode, + props.edge.sourceNode, sourceHandle.value, sourcePosition.value, - props.edge.sourceTargetNodes.targetNode, + props.edge.targetNode, targetHandle.value, targetPosition.value, ), @@ -140,7 +137,8 @@ export default { v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY" v-bind="{ id: props.edge.id, - sourceTargetNodes: props.edge.sourceTargetNodes, + sourceNode: props.edge.sourceNode, + targetNode: props.edge.targetNode, source: props.edge.source, target: props.edge.target, selected: isSelected, @@ -169,7 +167,8 @@ export default { :is="props.component ?? props.edge.type" v-bind="{ id: props.edge.id, - sourceTargetNodes: props.edge.sourceTargetNodes, + sourceNode: props.edge.sourceNode, + targetNode: props.edge.targetNode, source: props.edge.source, target: props.edge.target, selected: isSelected, diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts index dd44ac09..8fe8c6ee 100644 --- a/src/store/stateStore.ts +++ b/src/store/stateStore.ts @@ -70,13 +70,11 @@ export default (id: string, preloadedState: FlowState) => { return { ...edge, - sourceTargetNodes: { - sourceNode, - targetNode, - }, + sourceNode, + targetNode, } }) - .filter(({ sourceTargetNodes: { sourceNode, targetNode } }) => !!(sourceNode && targetNode)) ?? [] + .filter(({ sourceNode, targetNode }) => !!(sourceNode && targetNode)) ?? [] ) } return [] diff --git a/src/types/edge.ts b/src/types/edge.ts index d0f2980f..8aa4f148 100644 --- a/src/types/edge.ts +++ b/src/types/edge.ts @@ -1,7 +1,7 @@ import { Component, CSSProperties, DefineComponent } from 'vue' import { ArrowHeadType, ElementId, Position } from './flow' import { EdgeTextProps } from './components' -import { SourceTargetNode } from './node' +import { GraphNode } from './node' // eslint-disable-next-line no-use-before-define export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | 'step']: Component } @@ -38,7 +38,8 @@ export interface Edge { } export interface GraphEdge extends Edge { - sourceTargetNodes: SourceTargetNode + sourceNode: GraphNode + targetNode: GraphNode } export interface EdgeProps extends Edge { diff --git a/src/types/flow.ts b/src/types/flow.ts index db4427b3..81b951e1 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -1,11 +1,11 @@ import { CSSProperties } from 'vue' -import { Edge, EdgeTypes } from './edge' +import { Edge, EdgeTypes, GraphEdge } from './edge' import { NodeExtent, GraphNode, NodeTypes, TranslateExtent, Node } from './node' import { ConnectionLineType, ConnectionMode } from './connection' import { KeyCode, PanOnScrollMode } from './zoom' export type ElementId = string -export type FlowElement = GraphNode | Edge +export type FlowElement = GraphNode | GraphEdge export type FlowElements = FlowElement[] export type Elements = (Node | Edge)[] diff --git a/src/types/node.ts b/src/types/node.ts index ec03c99c..3c68ee47 100644 --- a/src/types/node.ts +++ b/src/types/node.ts @@ -8,7 +8,7 @@ export interface VFInternals { width: number height: number handleBounds: { - source?: HandleElement[] + source: HandleElement[] target?: HandleElement[] } } @@ -52,11 +52,6 @@ export interface GraphNode extends Node { __vf: VFInternals } -export type SourceTargetNode = { - sourceNode: GraphNode - targetNode: GraphNode -} - export type TranslateExtent = [[number, number], [number, number]] export type NodeExtent = TranslateExtent diff --git a/src/types/store.ts b/src/types/store.ts index c751dd42..288e6f4b 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -26,7 +26,7 @@ import { NodeComponent, NodeExtent, GraphNode, TranslateExtent } from './node' import { D3Selection, D3Zoom, D3ZoomHandler, InitD3ZoomPayload } from './zoom' import { FlowHooks } from './hooks' -export interface FlowState extends FlowOptions { +export interface FlowState extends Omit { hooks: FlowHooks instance?: FlowInstance diff --git a/src/utils/edge.ts b/src/utils/edge.ts index 7879172d..9843edfc 100644 --- a/src/utils/edge.ts +++ b/src/utils/edge.ts @@ -1,4 +1,4 @@ -import { rectToBox } from './graph' +import { isGraphNode, rectToBox } from './graph' import { Edge, EdgePositions, @@ -6,11 +6,10 @@ import { GraphNode, HandleElement, Position, - SourceTargetNode, Transform, XYPosition, - Elements, FlowElements, + GraphEdge, } from '~/types' export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition { @@ -115,18 +114,17 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform } return overlappingArea > 0 } -export const getSourceTargetNodes = (edge: Edge, elements: FlowElements | Elements): SourceTargetNode => { - let { sourceNode, targetNode }: any = { - sourceNode: null, - targetNode: null, - } +export const getSourceTargetNodes = (edge: GraphEdge | Edge, elements: FlowElements) => { + const nodes: GraphNode[] = [] for (const el of elements) { - if (!sourceNode || !targetNode) { - if (el.id === edge.source) sourceNode = el - if (el.id === edge.target) targetNode = el + if (!nodes[0] || !nodes[1]) { + if (isGraphNode(el)) { + if (el.id === edge.source) nodes[0] = el + if (el.id === edge.target) nodes[1] = el + } } else { break } } - return { sourceNode, targetNode } + return { sourceNode: nodes[0], targetNode: nodes[1] } } diff --git a/src/utils/graph.ts b/src/utils/graph.ts index fe8b239a..6ce4a40a 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -14,7 +14,6 @@ import { FlowStore, GraphNode, FlowElements, - FlowElement, GraphEdge, } from '~/types' import { useWindow } from '~/composables' @@ -55,10 +54,8 @@ export const isEdge = (element: Node | Edge | Connection): element is Edge => export const isNode = (element: Node | Edge | Connection): element is Node => 'id' in element && !('source' in element) && !('target' in element) -export const isGraphNode = (element: Node | FlowElement | Connection): element is GraphNode => - isNode(element) && '__vf' in element -export const isGraphEdge = (element: Edge | FlowElement | Connection): element is GraphEdge => - isEdge(element) && 'sourceTargetNodes' in element +export const isGraphNode = (element: any): element is GraphNode => isNode(element) && '__vf' in element +export const isGraphEdge = (element: any): element is GraphEdge => isEdge(element) && 'sourceTargetNodes' in element const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => { if (!isNode(node)) return [] @@ -173,15 +170,15 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({ width: 0, height: 0, handleBounds: { - source: undefined, - target: undefined, + source: [], + target: [], }, isDragging: false, }, position: clampPosition(node.position, nodeExtent), }) -export const parseEdge = (edge: Edge): Edge => ({ +export const parseEdge = (edge: Edge): GraphEdge => ({ ...edge, source: edge.source.toString(), target: edge.target.toString(), @@ -189,6 +186,8 @@ export const parseEdge = (edge: Edge): Edge => ({ targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined, id: edge.id.toString(), type: edge.type ?? 'default', + sourceNode: {} as any, + targetNode: {} as any, }) const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({ @@ -270,7 +269,7 @@ export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]: }) } -export const getConnectedEdges = (nodes: GraphNode[], edges: Edge[]) => { +export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => { const nodeIds = nodes.map((node) => node.id) return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target)) } diff --git a/src/utils/store.ts b/src/utils/store.ts index 2f0c12d4..df908400 100644 --- a/src/utils/store.ts +++ b/src/utils/store.ts @@ -8,7 +8,7 @@ import { PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, - Edge, + GraphEdge, } from '~/types' import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components' import { createHooks } from '~/composables' @@ -96,7 +96,7 @@ export const initialState = (): FlowState => ({ vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-', }) -export const parseElements = (elements: Elements, nodes: GraphNode[], edges: Edge[], nodeExtent: NodeExtent) => { +export const parseElements = (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) => { const parsedElements = [] for (const element of elements) { if (isNode(element)) { @@ -125,7 +125,7 @@ export const parseElements = (elements: Elements, nodes: GraphNode[], edges: Edg parsedElements.push({ ...storeEdge, ...element, - }) + } as GraphEdge) } else { parsedElements.push(parseEdge(element)) }