From f19e21044287f29f66d6f795fd84671b3063b748 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 7 Apr 2023 21:28:53 +0200 Subject: [PATCH] refactor(core): replace computed arg with getter fn Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com> --- .../core/src/components/Nodes/NodeWrapper.ts | 16 ++++---- packages/core/src/composables/useDrag.ts | 39 ++++++++++--------- packages/core/src/types/flow.ts | 1 + 3 files changed, 29 insertions(+), 27 deletions(-) diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index d7ece650..4ac0a144 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/packages/core/src/components/Nodes/NodeWrapper.ts @@ -60,16 +60,16 @@ const NodeWrapper = defineComponent({ const dragging = useDrag({ id: props.id, el: nodeElement, - disabled: computed(() => !props.draggable), - selectable: computed(() => props.selectable), - onStart(event, node, nodes) { - emit.dragStart({ event, node, nodes, intersections: getIntersectingNodes(node) }) + disabled: () => !props.draggable, + selectable: () => props.selectable, + onStart(args) { + emit.dragStart({ ...args, intersections: getIntersectingNodes(node) }) }, - onDrag(event, node, nodes) { - emit.drag({ event, node, nodes, intersections: getIntersectingNodes(node) }) + onDrag(args) { + emit.drag({ ...args, intersections: getIntersectingNodes(node) }) }, - onStop(event, node, nodes) { - emit.dragStop({ event, node, nodes, intersections: getIntersectingNodes(node) }) + onStop(args) { + emit.dragStop({ ...args, intersections: getIntersectingNodes(node) }) }, }) diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts index dbfb27e5..224a5ed4 100644 --- a/packages/core/src/composables/useDrag.ts +++ b/packages/core/src/composables/useDrag.ts @@ -1,25 +1,26 @@ import type { D3DragEvent, DragBehavior, SubjectPosition } from 'd3-drag' import { drag } from 'd3-drag' import { select } from 'd3-selection' -import type { ComputedRef, Ref } from 'vue' +import type { Ref } from 'vue' import type { NodeDragEvent, NodeDragItem, XYPosition } from '~/types' +import type { MaybeRefOrGetter } from '~/types/utils' export type UseDragEvent = D3DragEvent interface UseDragParams { - onStart: (event: NodeDragEvent['event'], currentNode: NodeDragEvent['node'], nodes: NodeDragEvent['nodes']) => void - onDrag: (event: NodeDragEvent['event'], currentNode: NodeDragEvent['node'], nodes: NodeDragEvent['nodes']) => void - onStop: (event: NodeDragEvent['event'], currentNode: NodeDragEvent['node'], nodes: NodeDragEvent['nodes']) => void + onStart: (args: Omit) => void + onDrag: (event: Omit) => void + onStop: (event: Omit) => void el: Ref - disabled?: ComputedRef - selectable?: ComputedRef + disabled?: MaybeRefOrGetter + selectable?: MaybeRefOrGetter id?: string } function useDrag(params: UseDragParams) { const scope = effectScope() - tryOnScopeDispose(() => scope.stop()) + tryOnScopeDispose(scope.stop) return scope.run(() => { const { @@ -43,7 +44,7 @@ function useDrag(params: UseDragParams) { emits, } = $(useVueFlow()) - const { onStart, onDrag, onStop, el, disabled, id, selectable } = $(params) + const { onStart, onDrag, onStop, el, disabled, id, selectable } = params const dragging = ref(false) @@ -64,9 +65,9 @@ function useDrag(params: UseDragParams) { const getPointerPosition = useGetPointerPosition() - watch([() => disabled, () => el], () => { - if (el) { - const selection = select(el) + watch([() => resolveUnref(disabled), el], ([isDisabled, nodeEl]) => { + if (nodeEl) { + const selection = select(nodeEl) const updateNodes = ({ x, y }: XYPosition) => { lastPos = { x, y } @@ -110,7 +111,7 @@ function useDrag(params: UseDragParams) { findNode, }) - onDrag(dragEvent, currentNode, nodes) + onDrag({ event: dragEvent, node: currentNode, nodes }) } } @@ -131,7 +132,7 @@ function useDrag(params: UseDragParams) { autoPanId = requestAnimationFrame(autoPan) } - if (disabled) { + if (isDisabled) { selection.on('.drag', null) } else { dragHandler = drag() @@ -143,7 +144,7 @@ function useDrag(params: UseDragParams) { } } - if (node && selectable && selectNodesOnDrag) { + if (node && resolveUnref(selectable) && selectNodesOnDrag) { handleNodeClick( node, multiSelectionActive, @@ -151,7 +152,7 @@ function useDrag(params: UseDragParams) { removeSelectedElements, $$(nodesSelectionActive), false, - el as HTMLDivElement, + nodeEl as HTMLDivElement, ) } @@ -166,7 +167,7 @@ function useDrag(params: UseDragParams) { findNode, }) - onStart(event.sourceEvent, currentNode, nodes) + onStart({ event: event.sourceEvent, node: currentNode, nodes }) } containerBounds = vueFlowRef?.getBoundingClientRect() || null @@ -202,7 +203,7 @@ function useDrag(params: UseDragParams) { findNode, }) - onStop(event.sourceEvent as MouseEvent, currentNode, nodes) + onStop({ event: event.sourceEvent, node: currentNode, nodes }) } }) .filter((event: D3DragEvent['sourceEvent']) => { @@ -210,8 +211,8 @@ function useDrag(params: UseDragParams) { return ( !event.button && (!noDragClassName || - (!hasSelector(target, `.${noDragClassName}`, el) && - (!node?.dragHandle || hasSelector(target, node.dragHandle, el)))) + (!hasSelector(target, `.${noDragClassName}`, nodeEl) && + (!node?.dragHandle || hasSelector(target, node.dragHandle, nodeEl)))) ) }) diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts index e25c66b6..4470b97c 100644 --- a/packages/core/src/types/flow.ts +++ b/packages/core/src/types/flow.ts @@ -183,4 +183,5 @@ export interface FlowProps { } } +// Todo: Remove in next major version export type FlowOptions = FlowProps