From 203b4815f89240287c4140523d843546be35e9f0 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 18 Jan 2023 19:57:21 +0100 Subject: [PATCH] chore(core): replace `getNode` with `findNode` Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- examples/vite/src/Nesting/Nesting.vue | 167 ++++++++---------- .../core/src/components/Nodes/NodeWrapper.vue | 4 +- packages/core/src/composables/useDrag.ts | 14 +- packages/core/src/composables/useHandle.ts | 24 +-- packages/core/src/store/actions.ts | 14 +- packages/core/src/utils/drag.ts | 26 +-- packages/core/src/utils/graph.ts | 8 +- packages/core/src/utils/store.ts | 8 +- 8 files changed, 114 insertions(+), 151 deletions(-) diff --git a/examples/vite/src/Nesting/Nesting.vue b/examples/vite/src/Nesting/Nesting.vue index c0207b34..62edb473 100644 --- a/examples/vite/src/Nesting/Nesting.vue +++ b/examples/vite/src/Nesting/Nesting.vue @@ -1,109 +1,86 @@ - + + diff --git a/packages/core/src/components/Nodes/NodeWrapper.vue b/packages/core/src/components/Nodes/NodeWrapper.vue index 60e13095..814e7428 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.vue +++ b/packages/core/src/components/Nodes/NodeWrapper.vue @@ -25,7 +25,7 @@ const { nodesSelectionActive, multiSelectionActive, emits, - getNode, + findNode, removeSelectedElements, addSelectedNodes, updateNodeDimensions, @@ -42,7 +42,7 @@ const updateNodePositions = useUpdateNodePositions() const node = $(useVModel(props, 'node')) -const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined)) +const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode) : undefined)) const connectedEdges = $computed(() => getConnectedEdges([node], edges)) diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts index acfbcc4e..f6b2f5ac 100644 --- a/packages/core/src/composables/useDrag.ts +++ b/packages/core/src/composables/useDrag.ts @@ -26,7 +26,7 @@ function useDrag(params: UseDragParams) { noDragClassName, nodes, nodeExtent, - getNode, + findNode, multiSelectionActive, nodesSelectionActive, selectNodesOnDrag, @@ -47,7 +47,7 @@ function useDrag(params: UseDragParams) { watch([() => disabled, () => el], () => { if (el) { const selection = select(el) - const node = id ? getNode(id) : undefined + const node = id ? findNode(id) : undefined if (disabled) { selection.on('.drag', null) @@ -65,13 +65,13 @@ function useDrag(params: UseDragParams) { } const mousePos = getPointerPosition(event, snapToGrid ? snapGrid : undefined) - dragItems = getDragItems(nodes, mousePos, getNode, id) + dragItems = getDragItems(nodes, mousePos, findNode, id) if (onStart && dragItems) { const [currentNode, nodes] = getEventHandlerParams({ id, dragItems, - getNode: $$(getNode), + findNode, }) onStart(event.sourceEvent, currentNode, nodes) } @@ -98,7 +98,7 @@ function useDrag(params: UseDragParams) { n, nextPosition, nodeExtent, - n.parentNode ? getNode(n.parentNode) : undefined, + n.parentNode ? findNode(n.parentNode) : undefined, ) // we want to make sure that we only fire a change event when there is a changes @@ -117,7 +117,7 @@ function useDrag(params: UseDragParams) { const [currentNode, nodes] = getEventHandlerParams({ id, dragItems, - getNode: $$(getNode), + findNode, }) dragging.value = true @@ -135,7 +135,7 @@ function useDrag(params: UseDragParams) { const [currentNode, nodes] = getEventHandlerParams({ id, dragItems, - getNode: $$(getNode), + findNode, }) dragging.value = false diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts index ccabe75c..85a7217a 100644 --- a/packages/core/src/composables/useHandle.ts +++ b/packages/core/src/composables/useHandle.ts @@ -1,6 +1,6 @@ import type { MaybeRef } from '@vueuse/core' import { isFunction } from '@vueuse/core' -import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types' +import type { Actions, Connection, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types' import { ConnectionMode } from '~/types' interface Result { @@ -30,7 +30,7 @@ export const checkElementBelowIsValid = ( isValidConnection: ValidConnectionFunc | undefined, doc: Document, edges: GraphEdge[], - getNode: Getters['getNode'], + findNode: Actions['findNode'], ) => { const clientX = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientX : (event as MouseEvent).clientX const clientY = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientY : (event as MouseEvent).clientY @@ -73,7 +73,7 @@ export const checkElementBelowIsValid = ( result.isValid = (isFunction(isValidConnection) - ? isValidConnection(connection, { edges, sourceNode: getNode(sourceId)!, targetNode: getNode(targetId)! }) + ? isValidConnection(connection, { edges, sourceNode: findNode(sourceId)!, targetNode: findNode(targetId)! }) : elementBelowNodeId !== nodeId || elementBelowHandleId !== handleId) || !result.connection.target || !result.connection.source @@ -113,7 +113,7 @@ export default function useHandle({ startConnection, updateConnection, endConnection, - getNode, + findNode, vueFlowRef, } = $(useVueFlow()) @@ -129,7 +129,7 @@ export default function useHandle({ let validConnectFunc = isValidConnection - const node = getNode(unref(nodeId)) + const node = findNode(unref(nodeId)) if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return @@ -175,7 +175,7 @@ export default function useHandle({ validConnectFunc, doc, edges, - getNode, + findNode, ) if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle) @@ -199,7 +199,7 @@ export default function useHandle({ validConnectFunc, doc, edges, - getNode, + findNode, ) const isOwnHandle = connection.source === connection.target @@ -234,7 +234,7 @@ export default function useHandle({ let validConnectFunc = isValidConnection - const node = getNode(unref(nodeId)) + const node = findNode(unref(nodeId)) if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return @@ -285,7 +285,7 @@ export default function useHandle({ validConnectFunc, doc, edges, - getNode, + findNode, ) if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle) @@ -309,7 +309,7 @@ export default function useHandle({ validConnectFunc, doc, edges, - getNode, + findNode, ) const isOwnHandle = connection.source === connection.target @@ -343,7 +343,7 @@ export default function useHandle({ } else { let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true) - const node = getNode(unref(nodeId)) + const node = findNode(unref(nodeId)) if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return @@ -362,7 +362,7 @@ export default function useHandle({ validConnectFunc, doc, edges, - getNode, + findNode, ) const isOwnHandle = connection.source === connection.target diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index a0be0c9d..fdf62379 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -124,7 +124,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions { } const changes: NodeDimensionChange[] = updates.reduce((res, update) => { - const node = getters.getNode.value(update.id) + const node = findNode(update.id) if (node) { const dimensions = getDimensions(update.nodeElement) @@ -285,7 +285,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions { if (!state.initialized && !nodes.length) return if (!state.nodes) state.nodes = [] const curr = nodes instanceof Function ? nodes(state.nodes) : nodes - state.nodes = createGraphNodes(curr, getters.getNode.value, state.nodes, extent ?? state.nodeExtent) + state.nodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent) } const setEdges: Actions['setEdges'] = (edges) => { @@ -293,8 +293,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions { const curr = edges instanceof Function ? edges(state.edges) : edges state.edges = curr.reduce((res, edge) => { - const sourceNode = getters.getNode.value(edge.source)! - const targetNode = getters.getNode.value(edge.target)! + const sourceNode = findNode(edge.source)! + const targetNode = findNode(edge.target)! const missingSource = !sourceNode || typeof sourceNode === 'undefined' const missingTarget = !targetNode || typeof targetNode === 'undefined' @@ -325,7 +325,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions { const addNodes: Actions['addNodes'] = (nodes, extent) => { const curr = nodes instanceof Function ? nodes(state.nodes) : nodes - const graphNodes = createGraphNodes(curr, getters.getNode.value, state.nodes, extent ?? state.nodeExtent) + const graphNodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent) const changes = graphNodes.map(createAdditionChange) if (changes.length) state.hooks.nodesChange.trigger(changes) @@ -343,8 +343,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions { state.edges, ) if (edge) { - const sourceNode = getters.getNode.value(edge.source)! - const targetNode = getters.getNode.value(edge.target)! + const sourceNode = findNode(edge.source)! + const targetNode = findNode(edge.target)! const missingSource = !sourceNode || typeof sourceNode === 'undefined' const missingTarget = !targetNode || typeof targetNode === 'undefined' diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts index c8236025..73b7ac22 100644 --- a/packages/core/src/utils/drag.ts +++ b/packages/core/src/utils/drag.ts @@ -1,14 +1,6 @@ import type { Ref } from 'vue' import { isNumber } from '@vueuse/shared' -import type { - ComputedGetters, - CoordinateExtent, - ExtendedParentExtent, - Getters, - GraphNode, - NodeDragItem, - XYPosition, -} from '~/types' +import type { Actions, CoordinateExtent, ExtendedParentExtent, GraphNode, NodeDragItem, XYPosition } from '~/types' export function hasSelector(target: Element, selector: string, node: Ref): boolean { let current = target @@ -26,11 +18,11 @@ export function hasSelector(target: Element, selector: string, node: Ref (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, getNode))) + .filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, findNode))) .map((n) => markRaw({ id: n.id, @@ -50,19 +42,13 @@ export function getDragItems( export function getEventHandlerParams({ id, dragItems, - getNode, + findNode, }: { id?: string dragItems: NodeDragItem[] - getNode: ComputedGetters['getNode'] + findNode: Actions['findNode'] }): [GraphNode, GraphNode[]] { - const extendedDragItems: GraphNode[] = dragItems.map((n) => { - const node = getNode.value(n.id)! - - return { - ...node, - } - }) + const extendedDragItems: GraphNode[] = dragItems.map((n) => findNode(n.id)!) return [id ? extendedDragItems.find((n) => n.id === id)! : extendedDragItems[0], extendedDragItems] } diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 11807265..113e98b8 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -1,5 +1,6 @@ import { isString } from '@vueuse/core' import type { + Actions, Box, Connection, CoordinateExtent, @@ -10,7 +11,6 @@ import type { ElementData, Elements, FlowElement, - Getters, GraphEdge, GraphNode, Node, @@ -354,12 +354,12 @@ export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition) } } -export const isParentSelected = (node: GraphNode, getNode: Getters['getNode']): boolean => { +export const isParentSelected = (node: GraphNode, findNode: Actions['findNode']): boolean => { if (!node.parentNode) return false - const parent = getNode(node.parentNode) + const parent = findNode(node.parentNode) if (!parent) return false if (parent.selected) return true - return isParentSelected(parent, getNode) + return isParentSelected(parent, findNode) } export const getMarkerId = (marker: EdgeMarkerType | undefined, vueFlowId?: string): string => { diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index a8fef0b3..954b9b45 100644 --- a/packages/core/src/utils/store.ts +++ b/packages/core/src/utils/store.ts @@ -1,4 +1,4 @@ -import type { Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types' +import type { Actions, Connection, CoordinateExtent, Edge, GraphEdge, GraphNode, Node } from '~/types' export const isDef = (val: T): val is NonNullable => typeof unref(val) !== 'undefined' @@ -51,7 +51,7 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg export const createGraphNodes = ( nodes: Node[], - getNode: Getters['getNode'], + findNode: Actions['findNode'], currGraphNodes: GraphNode[], extent: CoordinateExtent, ) => { @@ -59,7 +59,7 @@ export const createGraphNodes = ( const graphNodes = nodes.map((node) => { const parsed = parseNode(node, extent, { - ...getNode(node.id), + ...findNode(node.id), parentNode: node.parentNode, }) @@ -80,7 +80,7 @@ export const createGraphNodes = ( if (parentNodes[node.id]) { node.isParent = true } - const parent = node.parentNode ? getNode(node.parentNode) : undefined + const parent = node.parentNode ? findNode(node.parentNode) : undefined if (parent) parent.isParent = true } })