diff --git a/src/components/Nodes/NodeWrapper.vue b/src/components/Nodes/NodeWrapper.vue index df4de14b..661f9eea 100644 --- a/src/components/Nodes/NodeWrapper.vue +++ b/src/components/Nodes/NodeWrapper.vue @@ -17,7 +17,6 @@ interface NodeWrapperProps { } const props = defineProps() - const store = useStore() provide(NodeId, props.node.id) @@ -149,7 +148,7 @@ export default { ]" :style="{ zIndex: selected ? 10 : 3, - transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`, + transform: `translate(${props.node.position.x}px,${props.node.position.y}px)`, pointerEvents: props.selectable || props.draggable ? 'all' : 'none', opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0, ...props.node.style, @@ -167,8 +166,8 @@ export default { id: props.node.id, data: props.node.data, type: props.node.type, - xPos: props.vf.position.x, - yPos: props.vf.position.y, + xPos: props.node.position.x, + yPos: props.node.position.y, selected, connectable: props.connectable, sourcePosition: props.node.sourcePosition, @@ -182,8 +181,8 @@ export default { id: props.node.id, data: props.node.data, type: props.node.type, - xPos: props.vf.position.x, - yPos: props.vf.position.y, + xPos: props.node.position.x, + yPos: props.node.position.y, selected, connectable: props.connectable, sourcePosition: props.node.sourcePosition, diff --git a/src/types/node.ts b/src/types/node.ts index 92324b47..0c257ef3 100644 --- a/src/types/node.ts +++ b/src/types/node.ts @@ -4,7 +4,6 @@ import { XYPosition, ElementId, Position, SnapGrid } from './flow' import { HandleElement } from './components' export interface VFInternals { - position: XYPosition isDragging?: boolean width: number height: number diff --git a/src/utils/edge.ts b/src/utils/edge.ts index b99677f7..7879172d 100644 --- a/src/utils/edge.ts +++ b/src/utils/edge.ts @@ -13,9 +13,9 @@ import { FlowElements, } from '~/types' -export function getHandlePosition(position: Position, node: GraphNode, handle: any | null = null): XYPosition { - const x = (handle?.x || 0) + node.__vf.position.x - const y = (handle?.y || 0) + node.__vf.position.y +export function getHandlePosition(position: Position, node: GraphNode, handle?: HandleElement): XYPosition { + const x = (handle?.x ?? 0) + node.position.x + const y = (handle?.y ?? 0) + node.position.y const width = handle?.width || node.__vf.width const height = handle?.height || node.__vf.height @@ -60,10 +60,10 @@ export function getHandle(bounds: HandleElement[], handleId?: ElementId): Handle export const getEdgePositions = ( sourceNode: GraphNode, - sourceHandle: HandleElement | unknown, + sourceHandle: HandleElement | undefined, sourcePosition: Position, targetNode: GraphNode, - targetHandle: HandleElement | unknown, + targetHandle: HandleElement | undefined, targetPosition: Position, ): EdgePositions => { const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle) diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 443891dc..fe8b239a 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -55,8 +55,9 @@ 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: FlowElement | Connection): element is GraphNode => isNode(element) && '__vf' in element -export const isGraphEdge = (element: FlowElement | Connection): element is GraphEdge => +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 const getConnectedElements = (node: GraphNode, elements: Elements, dir: 'source' | 'target') => { @@ -167,9 +168,8 @@ export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({ ...node, id: node.id.toString(), - type: node.type || 'default', + type: node.type ?? 'default', __vf: { - position: clampPosition(node.position, nodeExtent), width: 0, height: 0, handleBounds: { @@ -178,6 +178,7 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): GraphNode => ({ }, isDragging: false, }, + position: clampPosition(node.position, nodeExtent), }) export const parseEdge = (edge: Edge): Edge => ({ @@ -187,7 +188,7 @@ export const parseEdge = (edge: Edge): Edge => ({ sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined, targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined, id: edge.id.toString(), - type: edge.type || 'default', + type: edge.type ?? 'default', }) const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({ @@ -215,7 +216,7 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect) => boxToRect(getBound export const getRectOfNodes = (nodes: GraphNode[]) => { const box = nodes.reduce( - (currBox, { __vf: { position = { x: 0, y: 0 }, width = 0, height = 0 } = {} }) => + (currBox, { position = { x: 0, y: 0 }, __vf: { width = 0, height = 0 } = {} }) => getBoundsOfBoxes( currBox, rectToBox({ @@ -245,7 +246,10 @@ export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]: return nodes.filter((node) => { if (!node.__vf || node.selectable === false) return false - const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__vf + const { + position = { x: 0, y: 0 }, + __vf: { width = 0, height = 0, isDragging = false }, + } = node const nBox = rectToBox({ ...position, width, height } as any) const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x)) const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y)) diff --git a/src/utils/store.ts b/src/utils/store.ts index 6ecbbf7e..68fcad54 100644 --- a/src/utils/store.ts +++ b/src/utils/store.ts @@ -100,7 +100,7 @@ export const initialState = (): FlowState => ({ vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-', }) -export const parseElements = async (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => +export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) => new Promise((resolve) => { const { nextEdges, nextNodes }: NextElements = { nextNodes: [], @@ -115,12 +115,11 @@ export const parseElements = async (elements: Elements, nodes: Node[], edges: Ed ...storeNode, ...element, } as GraphNode - updatedNode.__vf!.position = element.position if (typeof element.type !== 'undefined' && element.type !== storeNode.type) { // we reset the elements dimensions here in order to force a re-calculation of the bounds. // When the type of a node changes it is possible that the number or positions of handles changes too. - updatedNode.__vf!.width = 0 + updatedNode.__vf.width = 0 } nextNodes.push(updatedNode)