Skip to content

Commit 4c516f5

Browse files
bcakmakoglubcakmakoglu
authored
refactor(core,utils): replace exported utils with @xyflow/system exports (#1551)
* refactor(core): replace `clamp` Signed-off-by: braks <[email protected]> * refactor(core): replace `clampPosition` Signed-off-by: braks <[email protected]> * refactor(core): replace `getDimensions` Signed-off-by: braks <[email protected]> * refactor(core): replace `getHostForElement` Signed-off-by: braks <[email protected]> * refactor(core): replace `getOverlappingArea` Signed-off-by: braks <[email protected]> * refactor(core): replace `boxToRect` & `rectToBox` Signed-off-by: braks <[email protected]> * refactor(core): replace `getBoundsOfRects` & `getBoundsOfBoxe` & `rendererPointToPoint` Signed-off-by: braks <[email protected]> * refactor(minimap): update import of `getBoundsOfRects` Signed-off-by: braks <[email protected]> * refactor(core): replace `getMarkerId` Signed-off-by: braks <[email protected]> * refactor(core): replace `isRect` & `isNumeric` Signed-off-by: braks <[email protected]> * refactor(core): replace `calcAutoPan` Signed-off-by: braks <[email protected]> * refactor(core): replace `isMouseEvent` Signed-off-by: braks <[email protected]> * refactor(core): replace `getEventPosition` Signed-off-by: braks <[email protected]> * refactor(core): remove `isMacOS` Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> * chore(core): cleanup Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
1 parent dc474ed commit 4c516f5

File tree

24 files changed

+71
-198
lines changed

24 files changed

+71
-198
lines changed

‎.changeset/fifty-rockets-report.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@vue-flow/minimap": patch
3+
---
4+
5+
Update import of `getBoundsOfRects`

‎.changeset/fluffy-tables-wash.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
"@vue-flow/core": minor
3+
---
4+
5+
Replace existing graph utils exports with those already provided by `@xyflow/system`:
6+
7+
- Replace utils
8+
- `clamp`
9+
- `clampPosition`
10+
- `getDimensions`
11+
- `getHostForElement`
12+
- `getOverlappingArea`
13+
- `rectToBox`
14+
- `boxToRect`
15+
- `getBoundsofRects`
16+
- `getBoundsOfBoxes`
17+
- `rendererPointToPoint`
18+
- `getMarkerId`
19+
- `isRect`
20+
- `isNumeric`
21+
- `calcAutoPan`
22+
- `isMouseEvent`
23+
- `getEventPosition`
24+
25+
-Remove utils
26+
- `isMacOS`

‎packages/core/src/components/ConnectionLine/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { computed, defineComponent, h, inject } from 'vue'
2-
import { getBezierPath, getSmoothStepPath } from '@xyflow/system'
2+
import { getBezierPath, getMarkerId, getSmoothStepPath } from '@xyflow/system'
33
import type { HandleElement } from '../../types'
44
import { ConnectionLineType, ConnectionMode, Position } from '../../types'
5-
import { getHandlePosition, getMarkerId } from '../../utils'
5+
import { getHandlePosition } from '../../utils'
66
import { useVueFlow } from '../../composables'
77
import { Slots } from '../../context'
88
import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'

‎packages/core/src/components/Edges/EdgeWrapper.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
2+
import { getMarkerId } from '@xyflow/system'
23
import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
34
import { ConnectionMode, Position } from '../../types'
45
import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
56
import { EdgeId, EdgeRef, Slots } from '../../context'
6-
import {
7-
ARIA_EDGE_DESC_KEY,
8-
ErrorCode,
9-
VueFlowError,
10-
elementSelectionKeys,
11-
getHandle,
12-
getHandlePosition,
13-
getMarkerId,
14-
} from '../../utils'
7+
import { ARIA_EDGE_DESC_KEY, ErrorCode, VueFlowError, elementSelectionKeys, getHandle, getHandlePosition } from '../../utils'
158
import EdgeAnchor from './EdgeAnchor'
169

1710
interface Props {

‎packages/core/src/components/Handle/Handle.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts" setup>
22
import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
3+
import { getDimensions, isMouseEvent } from '@xyflow/system'
34
import type { HandleProps } from '../../types'
45
import { Position } from '../../types'
56
import { useHandle, useNode, useVueFlow } from '../../composables'
6-
import { getDimensions, isDef, isMouseEvent } from '../../utils'
7+
import { isDef } from '../../utils'
78
89
const {
910
position = Position.Top,

‎packages/core/src/composables/useDrag.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,9 @@ import { drag } from 'd3-drag'
33
import { select } from 'd3-selection'
44
import type { MaybeRefOrGetter, Ref } from 'vue'
55
import { ref, toValue, watch } from 'vue'
6+
import { calcAutoPan, getEventPosition } from '@xyflow/system'
67
import type { NodeDragEvent, NodeDragItem, XYPosition } from '../types'
7-
import {
8-
calcAutoPan,
9-
calcNextPosition,
10-
getDragItems,
11-
getEventHandlerParams,
12-
getEventPosition,
13-
handleNodeClick,
14-
hasSelector,
15-
} from '../utils'
8+
import { calcNextPosition, getDragItems, getEventHandlerParams, handleNodeClick, hasSelector } from '../utils'
169
import { useGetPointerPosition, useVueFlow } from '.'
1710

1811
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>

‎packages/core/src/composables/useHandle.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import type { MaybeRefOrGetter } from 'vue'
22
import { toValue } from 'vue'
3+
import { calcAutoPan, getEventPosition, getHostForElement, isMouseEvent, rendererPointToPoint } from '@xyflow/system'
34
import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
45
import {
5-
calcAutoPan,
66
getClosestHandle,
77
getConnectionStatus,
8-
getEventPosition,
98
getHandleLookup,
109
getHandleType,
11-
getHostForElement,
12-
isMouseEvent,
1310
isValidHandle,
1411
pointToRendererPoint,
15-
rendererPointToPoint,
1612
resetRecentHandle,
1713
} from '../utils'
1814
import { Position } from '../types'
@@ -142,7 +138,8 @@ export function useHandle({
142138

143139
emits.connectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId), handleType })
144140

145-
function onPointerMove(event: MouseTouchEvent) {
141+
function onPointerMove(_event: Event) {
142+
const event = _event as MouseTouchEvent
146143
connectionPosition = getEventPosition(event, containerBounds)
147144

148145
const { handle, validHandleResult } = getClosestHandle(
@@ -199,7 +196,7 @@ export function useHandle({
199196
x: closestHandle.x,
200197
y: closestHandle.y,
201198
},
202-
viewport.value,
199+
[viewport.value.x, viewport.value.y, viewport.value.zoom],
203200
)
204201
: connectionPosition,
205202
validHandleResult.endHandle,
@@ -225,7 +222,8 @@ export function useHandle({
225222
}
226223
}
227224

228-
function onPointerUp(event: MouseTouchEvent) {
225+
function onPointerUp(_event: Event) {
226+
const event = _event as MouseTouchEvent
229227
if ((closestHandle || handleDomNode) && connection && isValid) {
230228
if (!onEdgeUpdate) {
231229
emits.connect(connection)

‎packages/core/src/composables/useResizeHandler.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Ref } from 'vue'
22
import { onBeforeUnmount, onMounted } from 'vue'
3-
import { ErrorCode, VueFlowError, getDimensions } from '../utils'
3+
import { getDimensions } from '@xyflow/system'
4+
import { ErrorCode, VueFlowError } from '../utils'
45
import { useVueFlow } from './useVueFlow'
56

67
/**

‎packages/core/src/composables/useViewportHelper.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { zoomIdentity } from 'd3-zoom'
22
import { computed } from 'vue'
3+
import { clampPosition, rendererPointToPoint } from '@xyflow/system'
34
import type { D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types'
4-
import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
5+
import { getRectOfNodes, getTransformForBounds, pointToRendererPoint, warn } from '../utils'
56

67
export interface ViewportHelper extends ViewportFunctions {
78
viewportInitialized: boolean
@@ -203,7 +204,7 @@ export function useViewportHelper(state: State) {
203204
y: position.y + domY,
204205
}
205206

206-
return rendererPointToPoint(correctedPosition, state.viewport)
207+
return rendererPointToPoint(correctedPosition, [state.viewport.x, state.viewport.y, state.viewport.zoom])
207208
}
208209

209210
return { x: 0, y: 0 }

‎packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts" setup>
22
import { computed } from 'vue'
3+
import { getMarkerId } from '@xyflow/system'
34
import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types'
45
import { useVueFlow } from '../../composables'
5-
import { getMarkerId } from '../../utils'
66
import MarkerSymbols from './MarkerSymbols.vue'
77
88
const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = useVueFlow()

0 commit comments

Comments
 (0)