feat: enhance drag functionality by storing initial drag state and coordinates (#96)

elonehoo · web-flow · commit 8bf34f064e08 · 2025-12-21T09:16:08.000+08:00
diff --git a/packages/components/splitter/src/connect.ts b/packages/components/splitter/src/connect.ts
@@ -105,7 +105,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
             event.preventDefault()
             return
           }
-          send({ type: 'POINTER_DOWN', id })
+          send({ type: 'POINTER_DOWN', id, point: { x: event.clientX, y: event.clientY } })
           event.currentTarget.setPointerCapture(event.pointerId)
           event.preventDefault()
           event.stopPropagation()
diff --git a/packages/components/splitter/src/machine.ts b/packages/components/splitter/src/machine.ts
@@ -1,5 +1,5 @@
 import type { MachineContext, MachineState, UserDefinedContext } from './types'
-import { getRelativePoint, raf, trackPointerMove } from '@destyler/dom'
+import { raf, trackPointerMove } from '@destyler/dom'
 import { compact } from '@destyler/utils'
 import { createMachine } from '@destyler/xstate'
 import { dom } from './dom'
@@ -21,6 +21,8 @@ export function machine(userContext: UserDefinedContext) {
           isAtMin: false,
           isAtMax: false,
         },
+        initialDragPoint: null,
+        initialDragSizes: null,
         ...ctx,
       },
 
@@ -121,7 +123,7 @@ export function machine(userContext: UserDefinedContext) {
 
         'dragging': {
           tags: ['focus'],
-          entry: 'focusResizeHandle',
+          entry: ['focusResizeHandle', 'storeInitialDragState'],
           activities: ['trackPointerMove'],
           on: {
             POINTER_MOVE: {
@@ -240,6 +242,17 @@ export function machine(userContext: UserDefinedContext) {
             dom.getActiveHandleEl(ctx)?.blur()
           })
         },
+        storeInitialDragState(ctx, evt) {
+          const panels = getHandlePanels(ctx)
+          if (!panels)
+            return
+          const { before, after } = panels
+          ctx.initialDragPoint = evt.point
+          ctx.initialDragSizes = {
+            before: before.size,
+            after: after.size,
+          }
+        },
         setPreviousPanels(ctx) {
           ctx.previousPanels = ctx.panels.slice()
         },
@@ -264,27 +277,48 @@ export function machine(userContext: UserDefinedContext) {
           if (!rootEl)
             return
 
-          const relativePoint = getRelativePoint(evt.point, rootEl)
-          const percentValue = relativePoint.getPercentValue({
-            dir: ctx.dir,
-            orientation: ctx.orientation,
-          })
+          if (!ctx.initialDragPoint || !ctx.initialDragSizes)
+            return
+
+          const { before, after } = panels
+
+          // Calculate relative movement from initial drag position
+          const rootSize = ctx.isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight
+          const currentPos = ctx.isHorizontal ? evt.point.x : evt.point.y
+          const initialPos = ctx.isHorizontal ? ctx.initialDragPoint.x : ctx.initialDragPoint.y
 
-          let pointValue = percentValue * 100
+          // Handle RTL for horizontal orientation
+          const isRtl = ctx.dir === 'rtl' && ctx.isHorizontal
+          const deltaPixels = isRtl ? (initialPos - currentPos) : (currentPos - initialPos)
+          const deltaPercent = (deltaPixels / rootSize) * 100
 
-          // update active resize state here because we use `previousPanels` in the calculations
+          // Calculate new sizes based on delta from initial sizes
+          let newBeforeSize = ctx.initialDragSizes.before + deltaPercent
+          let newAfterSize = ctx.initialDragSizes.after - deltaPercent
+
+          // Update active resize state
           ctx.activeResizeState = {
-            isAtMin: pointValue < bounds.min,
-            isAtMax: pointValue > bounds.max,
+            isAtMin: newBeforeSize <= before.minSize,
+            isAtMax: newBeforeSize >= before.maxSize,
           }
 
-          pointValue = clamp(pointValue, bounds.min, bounds.max)
+          // Apply constraints
+          newBeforeSize = clamp(newBeforeSize, before.minSize, before.maxSize)
+          newAfterSize = clamp(newAfterSize, after.minSize, after.maxSize)
 
-          const { before, after } = panels
+          // Ensure total doesn't exceed available space
+          const totalSize = ctx.initialDragSizes.before + ctx.initialDragSizes.after
+          if (newBeforeSize + newAfterSize > totalSize) {
+            if (deltaPercent > 0) {
+              newAfterSize = totalSize - newBeforeSize
+            }
+            else {
+              newBeforeSize = totalSize - newAfterSize
+            }
+          }
 
-          const offset = pointValue - before.end
-          ctx.size[before.index].size = before.size + offset
-          ctx.size[after.index].size = after.size - offset
+          ctx.size[before.index].size = newBeforeSize
+          ctx.size[after.index].size = newAfterSize
         },
       },
     },
diff --git a/packages/components/splitter/src/types.ts b/packages/components/splitter/src/types.ts
@@ -69,6 +69,8 @@ interface PrivateContext {
   previousPanels: NormalizedPanelData
   activeResizeState: { isAtMin: boolean, isAtMax: boolean }
   initialSize: Array<Required<Pick<PanelSizeData, 'id' | 'size'>>>
+  initialDragPoint: { x: number, y: number } | null
+  initialDragSizes: { before: number, after: number } | null
 }
 
 export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}

Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize`
`105`	`105`	`event.preventDefault()`
`106`	`106`	`return`
`107`	`107`	`}`
`108`		`- send({ type: 'POINTER_DOWN', id })`
	`108`	`+ send({ type: 'POINTER_DOWN', id, point: { x: event.clientX, y: event.clientY } })`
`109`	`109`	`event.currentTarget.setPointerCapture(event.pointerId)`
`110`	`110`	`event.preventDefault()`
`111`	`111`	`event.stopPropagation()`
Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,8 @@ interface PrivateContext {`
`69`	`69`	`previousPanels: NormalizedPanelData`
`70`	`70`	`activeResizeState: { isAtMin: boolean, isAtMax: boolean }`
`71`	`71`	`initialSize: Array<Required<Pick<PanelSizeData, 'id' \| 'size'>>>`
	`72`	`+ initialDragPoint: { x: number, y: number } \| null`
	`73`	`+ initialDragSizes: { before: number, after: number } \| null`
`72`	`74`	`}`
`73`	`75`
`74`	`76`	`export interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}`