diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 47de2271..76b94ce4 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -43,6 +43,21 @@ export default (state: State, getters: ComputedGetters): Actions => { }) } + const nodeIds = $computed(() => state.nodes.map((n) => n.id)) + const edgeIds = $computed(() => state.edges.map((e) => e.id)) + + const findNode: Actions['findNode'] = (id) => { + if (state.nodes && !nodeIds.length) return state.nodes.find((node) => node.id === id) + + return state.nodes[nodeIds.indexOf(id)] + } + + const findEdge: Actions['findEdge'] = (id) => { + if (state.edges && !edgeIds.length) return state.edges.find((edge) => edge.id === id) + + return state.edges[edgeIds.indexOf(id)] + } + const updateNodePositions: Actions['updateNodePositions'] = (dragItems, changed, dragging) => { const changes: NodePositionChange[] = [] @@ -55,11 +70,10 @@ export default (state: State, getters: ComputedGetters): Actions => { } if (changed) { - change.computedPosition = node.position change.position = node.position if (node.parentNode) { - const parentNode = getters.getNode.value(node.parentNode) + const parentNode = findNode(node.parentNode) change.position = { x: change.position.x - (parentNode?.computedPosition?.x ?? 0), @@ -368,21 +382,6 @@ export default (state: State, getters: ComputedGetters): Actions => { state.hooks.edgesChange.trigger(changes) } - const nodeIds = $computed(() => state.nodes.map((n) => n.id)) - const edgeIds = $computed(() => state.edges.map((e) => e.id)) - - const findNode: Actions['findNode'] = (id) => { - if (state.nodes && !nodeIds.length) return state.nodes.find((node) => node.id === id) - - return state.nodes[nodeIds.indexOf(id)] - } - - const findEdge: Actions['findEdge'] = (id) => { - if (state.edges && !edgeIds.length) return state.edges.find((edge) => edge.id === id) - - return state.edges[edgeIds.indexOf(id)] - } - const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) => updateEdgeAction(oldEdge, newConnection, state.edges) const applyNodeChanges: Actions['applyNodeChanges'] = (changes) => applyChanges(changes, state.nodes) diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts index c4a8af12..a114ad34 100644 --- a/packages/core/src/utils/drag.ts +++ b/packages/core/src/utils/drag.ts @@ -1,5 +1,4 @@ import type { Ref } from 'vue' -import { clampPosition, isParentSelected } from './graph' import type { ComputedGetters, CoordinateExtent, Getters, GraphNode, NodeDragItem, SnapGrid, XYPosition } from '~/types' export function hasSelector(target: Element, selector: string, node: Ref): boolean { @@ -78,35 +77,35 @@ export function updatePosition( dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition + if (dragItem.extent === 'parent') console.log(dragItem.position) + return dragItem } export function applyExtent(item: T, extent?: CoordinateExtent, parent?: GraphNode) { - let currentExtent = item.extent || extent + const currentExtent = item.extent ?? extent + let nextExtent = currentExtent - if (item.extent === 'parent' && parent) { - if (item.parentNode && item.dimensions.width && item.dimensions.height) { - currentExtent = - parent.computedPosition && parent.dimensions.width && parent.dimensions.height - ? [ - [parent.computedPosition.x, parent.computedPosition.y], - [ - parent.computedPosition.x + parent.dimensions.width - item.dimensions.width, - parent.computedPosition.y + parent.dimensions.height - item.dimensions.height, - ], - ] - : currentExtent + if (currentExtent === 'parent' && parent) { + if (item.dimensions.width && item.dimensions.height) { + nextExtent = [ + [parent.computedPosition.x, parent.computedPosition.y], + [ + parent.computedPosition.x + parent.dimensions.width - item.dimensions.width, + parent.computedPosition.y + parent.dimensions.height - item.dimensions.height, + ], + ] } - } else if (item.extent && item.parentNode) { - const itemExtent = item.extent as CoordinateExtent - const parentX = parent?.computedPosition?.x ?? 0 - const parentY = parent?.computedPosition?.y ?? 0 + } else if (currentExtent !== 'parent' && currentExtent && parent) { + const itemExtent = currentExtent + const parentX = parent.computedPosition.x + const parentY = parent.computedPosition.y - currentExtent = [ + nextExtent = [ [itemExtent[0][0] + parentX, itemExtent[0][1] + parentY], [itemExtent[1][0] + parentX, itemExtent[1][1] + parentY], ] } - return currentExtent + return nextExtent as CoordinateExtent } diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index 5f214c3a..31f34f3c 100644 --- a/packages/core/src/utils/store.ts +++ b/packages/core/src/utils/store.ts @@ -1,4 +1,4 @@ -import { connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from './graph' +import { clampPosition, connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from './graph' import { warn } from './log' import type { Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types' @@ -66,6 +66,7 @@ export const createGraphNodes = ( parentNode: node.parentNode, }), ) + if (node.parentNode) { parentNodes[node.parentNode] = true }