@destyler/splitter 0.2.3-beta.7 → 0.2.3

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, Required, RequiredBy } from "@destyler/types";
 
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "panel" | "resizeTrigger">;
+declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "resizeTrigger" | "panel">;
 //#endregion
 //#region src/types.d.ts
 type PanelId = string | number;
@@ -74,6 +74,14 @@ interface PrivateContext {
     isAtMax: boolean;
   };
   initialSize: Array<Required<Pick<PanelSizeData, 'id' | 'size'>>>;
+  initialDragPoint: {
+    x: number;
+    y: number;
+  } | null;
+  initialDragSizes: {
+    before: number;
+    after: number;
+  } | null;
 }
 interface MachineContext extends PublicContext, ComputedContext, PrivateContext {}
 interface MachineState {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createAnatomy } from "@destyler/anatomy";
-import { createScope, dataAttr, getEventKey, getEventStep, getRelativePoint, queryAll, raf, trackPointerMove } from "@destyler/dom";
+import { createScope, dataAttr, getEventKey, getEventStep, queryAll, raf, trackPointerMove } from "@destyler/dom";
 import { compact, createSplitProps } from "@destyler/utils";
 import { createMachine } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
@@ -286,7 +286,11 @@ function connect(state, send, normalize) {
 					}
 					send({
 						type: "POINTER_DOWN",
-						id
+						id,
+						point: {
+							x: event.clientX,
+							y: event.clientY
+						}
 					});
 					event.currentTarget.setPointerCapture(event.pointerId);
 					event.preventDefault();
@@ -391,6 +395,8 @@ function machine(userContext) {
 				isAtMin: false,
 				isAtMax: false
 			},
+			initialDragPoint: null,
+			initialDragSizes: null,
 			...compact(userContext)
 		},
 		created: ["setPreviousPanels", "setInitialSize"],
@@ -466,7 +472,7 @@ function machine(userContext) {
 			},
 			"dragging": {
 				tags: ["focus"],
-				entry: "focusResizeHandle",
+				entry: ["focusResizeHandle", "storeInitialDragState"],
 				activities: ["trackPointerMove"],
 				on: {
 					POINTER_MOVE: { actions: [
@@ -593,6 +599,16 @@ function machine(userContext) {
 					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();
 			},
@@ -611,19 +627,25 @@ function machine(userContext) {
 				if (!panels || !bounds) return;
 				const rootEl = dom.getRootEl(ctx);
 				if (!rootEl) return;
-				let pointValue = getRelativePoint(evt.point, rootEl).getPercentValue({
-					dir: ctx.dir,
-					orientation: ctx.orientation
-				}) * 100;
+				if (!ctx.initialDragPoint || !ctx.initialDragSizes) return;
+				const { before, after } = panels;
+				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;
+				const deltaPercent = (ctx.dir === "rtl" && ctx.isHorizontal ? initialPos - currentPos : currentPos - initialPos) / rootSize * 100;
+				let newBeforeSize = ctx.initialDragSizes.before + deltaPercent;
+				let newAfterSize = ctx.initialDragSizes.after - deltaPercent;
 				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);
-				const { before, after } = panels;
-				const offset = pointValue - before.end;
-				ctx.size[before.index].size = before.size + offset;
-				ctx.size[after.index].size = after.size - offset;
+				newBeforeSize = clamp(newBeforeSize, before.minSize, before.maxSize);
+				newAfterSize = clamp(newAfterSize, after.minSize, after.maxSize);
+				const totalSize = ctx.initialDragSizes.before + ctx.initialDragSizes.after;
+				if (newBeforeSize + newAfterSize > totalSize) if (deltaPercent > 0) newAfterSize = totalSize - newBeforeSize;
+				else newBeforeSize = totalSize - newAfterSize;
+				ctx.size[before.index].size = newBeforeSize;
+				ctx.size[after.index].size = newAfterSize;
 			}
 		}
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/splitter",
   "type": "module",
-  "version": "0.2.3-beta.7",
+  "version": "0.2.3",
   "description": "A component that divides your layout into resizable sections.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/anatomy": "0.2.3-beta.7",
-    "@destyler/dom": "0.2.3-beta.7",
-    "@destyler/utils": "0.2.3-beta.7",
-    "@destyler/xstate": "0.2.3-beta.7",
-    "@destyler/types": "0.2.3-beta.7"
+    "@destyler/anatomy": "0.2.3",
+    "@destyler/dom": "0.2.3",
+    "@destyler/types": "0.2.3",
+    "@destyler/utils": "0.2.3",
+    "@destyler/xstate": "0.2.3"
   },
   "publishConfig": {
     "access": "public"