@destyler/splitter 0.2.6 → 0.2.9

package/dist/index.d.mts

@@ -30,9 +30,14 @@ interface PublicContext extends DirectionProperty, CommonProperties {
    */
   orientation: 'horizontal' | 'vertical';
   /**
-   * The size data of the panels
+   * The controlled size data of the panels
    */
-  size: PanelSizeData[];
+  size?: PanelSizeData[] | undefined;
+  /**
+   * The initial size data when it is not controlled.
+   * Prefer this over seeding with `size` for uncontrolled usage.
+   */
+  defaultSize?: PanelSizeData[] | undefined;
   /**
    * Function called when the splitter is resized.
    */
@@ -153,8 +158,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("id" | "orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "id" | "orientation" | "size" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "getRootNode">];
+declare const props: ("orientation" | "size" | "defaultSize" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "id" | "getRootNode")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "orientation" | "size" | "defaultSize" | "onSizeChange" | "onSizeChangeEnd" | "ids" | "dir" | "id" | "getRootNode">];
 declare const panelProps: (keyof PanelProps)[];
 declare const splitPanelProps: <Props extends PanelProps>(props: Props) => [PanelProps, Omit<Props, keyof PanelProps>];
 declare const resizeTriggerProps: (keyof ResizeTriggerProps)[];

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from "@destyler/anatomy";
 import { createScope, dataAttr, getEventKey, getEventStep, queryAll, raf, trackPointerMove } from "@destyler/dom";
-import { compact, createSplitProps } from "@destyler/utils";
+import { compact, createSplitProps, isControlled, isEqual, isPropUserProvided, resolveControllableProp, withControllableProvided } from "@destyler/utils";
 import { createMachine } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
 
@@ -381,7 +381,41 @@ function connect(state, send, normalize) {
 
 //#endregion
 //#region src/machine.ts
+function cloneSize(size) {
+	return size.map((panel) => ({ ...panel }));
+}
+const invoke = {
+	sizeChange(ctx, size) {
+		ctx.onSizeChange?.({
+			size: cloneSize(size),
+			activeHandleId: ctx.activeResizeId
+		});
+	},
+	sizeChangeEnd(ctx) {
+		ctx.onSizeChangeEnd?.({
+			size: cloneSize(ctx.size ?? []),
+			activeHandleId: ctx.activeResizeId
+		});
+	}
+};
+const set = { size(ctx, value) {
+	const next = cloneSize(value);
+	if (isEqual(ctx.size, next)) return;
+	if (isControlled(ctx, "size")) {
+		invoke.sizeChange(ctx, next);
+		return;
+	}
+	ctx.size = next;
+	invoke.sizeChange(ctx, ctx.size);
+} };
 function machine(userContext) {
+	const ctx = compact(withControllableProvided(userContext, ["size"]));
+	const { initial: initialSize } = resolveControllableProp({
+		value: ctx.size,
+		defaultValue: ctx.defaultSize,
+		valueProvided: isPropUserProvided(ctx, "size"),
+		fallback: []
+	});
 	return createMachine({
 		id: "splitter",
 		initial: "idle",
@@ -397,13 +431,14 @@ function machine(userContext) {
 			},
 			initialDragPoint: null,
 			initialDragSizes: null,
-			...compact(userContext)
+			...ctx,
+			size: cloneSize(initialSize)
 		},
 		created: ["setPreviousPanels", "setInitialSize"],
 		watch: { size: ["setActiveResizeState"] },
 		computed: {
-			isHorizontal: (ctx) => ctx.orientation === "horizontal",
-			panels: (ctx) => getNormalizedPanels(ctx)
+			isHorizontal: (ctx$1) => ctx$1.orientation === "horizontal",
+			panels: (ctx$1) => getNormalizedPanels(ctx$1)
 		},
 		on: { SET_PANEL_SIZE: { actions: "setPanelSize" } },
 		states: {
@@ -475,11 +510,7 @@ function machine(userContext) {
 				entry: ["focusResizeHandle", "storeInitialDragState"],
 				activities: ["trackPointerMove"],
 				on: {
-					POINTER_MOVE: { actions: [
-						"setPointerValue",
-						"setGlobalCursor",
-						"invokeOnResize"
-					] },
+					POINTER_MOVE: { actions: ["setPointerValue", "setGlobalCursor"] },
 					POINTER_UP: {
 						target: "focused",
 						actions: [
@@ -493,8 +524,8 @@ function machine(userContext) {
 			}
 		}
 	}, {
-		activities: { trackPointerMove: (ctx, _evt, { send }) => {
-			return trackPointerMove(dom.getDoc(ctx), {
+		activities: { trackPointerMove: (ctx$1, _evt, { send }) => {
+			return trackPointerMove(dom.getDoc(ctx$1), {
 				onPointerMove(info) {
 					send({
 						type: "POINTER_MOVE",
@@ -507,145 +538,187 @@ function machine(userContext) {
 			});
 		} },
 		guards: {
-			isStartPanelAtMin: (ctx) => ctx.activeResizeState.isAtMin,
-			isStartPanelAtMax: (ctx) => ctx.activeResizeState.isAtMax,
-			isHorizontal: (ctx) => ctx.isHorizontal,
-			isVertical: (ctx) => !ctx.isHorizontal
+			isStartPanelAtMin: (ctx$1) => ctx$1.activeResizeState.isAtMin,
+			isStartPanelAtMax: (ctx$1) => ctx$1.activeResizeState.isAtMax,
+			isHorizontal: (ctx$1) => ctx$1.isHorizontal,
+			isVertical: (ctx$1) => !ctx$1.isHorizontal
 		},
 		delays: { HOVER_DELAY: 250 },
 		actions: {
-			setGlobalCursor(ctx) {
-				dom.setupGlobalCursor(ctx);
+			setGlobalCursor(ctx$1) {
+				dom.setupGlobalCursor(ctx$1);
 			},
-			clearGlobalCursor(ctx) {
-				dom.removeGlobalCursor(ctx);
+			clearGlobalCursor(ctx$1) {
+				dom.removeGlobalCursor(ctx$1);
 			},
-			invokeOnResize(ctx) {
-				ctx.onSizeChange?.({
-					size: Array.from(ctx.size),
-					activeHandleId: ctx.activeResizeId
-				});
+			invokeOnResizeEnd(ctx$1) {
+				invoke.sizeChangeEnd(ctx$1);
 			},
-			invokeOnResizeEnd(ctx) {
-				ctx.onSizeChangeEnd?.({
-					size: Array.from(ctx.size),
-					activeHandleId: ctx.activeResizeId
-				});
-			},
-			setActiveHandleId(ctx, evt) {
-				ctx.activeResizeId = evt.id;
+			setActiveHandleId(ctx$1, evt) {
+				ctx$1.activeResizeId = evt.id;
 			},
-			clearActiveHandleId(ctx) {
-				ctx.activeResizeId = null;
+			clearActiveHandleId(ctx$1) {
+				ctx$1.activeResizeId = null;
 			},
-			setInitialSize(ctx) {
-				ctx.initialSize = ctx.panels.slice().map((panel) => ({
+			setInitialSize(ctx$1) {
+				ctx$1.initialSize = ctx$1.panels.slice().map((panel) => ({
 					id: panel.id,
 					size: panel.size
 				}));
 			},
-			setPanelSize(ctx, evt) {
+			setPanelSize(ctx$1, evt) {
 				const { id, size } = evt;
-				ctx.size = ctx.size.map((panel) => {
-					const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
-					return panel.id === id ? {
-						...panel,
-						size: panelSize
-					} : panel;
-				});
+				const next = cloneSize(ctx$1.size ?? []);
+				const index = next.findIndex((panel$1) => panel$1.id === id);
+				if (index === -1) return;
+				const panel = next[index];
+				const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+				next[index] = {
+					...panel,
+					size: panelSize
+				};
+				set.size(ctx$1, next);
 			},
-			setStartPanelToMin(ctx) {
-				const bounds = getPanelBounds(ctx);
+			setStartPanelToMin(ctx$1) {
+				const bounds = getPanelBounds(ctx$1);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx.size[before.index].size = before.min;
-				ctx.size[after.index].size = after.min;
+				const next = cloneSize(ctx$1.size ?? []);
+				next[before.index] = {
+					...next[before.index],
+					size: before.min
+				};
+				next[after.index] = {
+					...next[after.index],
+					size: after.min
+				};
+				set.size(ctx$1, next);
 			},
-			setStartPanelToMax(ctx) {
-				const bounds = getPanelBounds(ctx);
+			setStartPanelToMax(ctx$1) {
+				const bounds = getPanelBounds(ctx$1);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx.size[before.index].size = before.max;
-				ctx.size[after.index].size = after.max;
+				const next = cloneSize(ctx$1.size ?? []);
+				next[before.index] = {
+					...next[before.index],
+					size: before.max
+				};
+				next[after.index] = {
+					...next[after.index],
+					size: after.max
+				};
+				set.size(ctx$1, next);
 			},
-			expandStartPanel(ctx, evt) {
-				const bounds = getPanelBounds(ctx);
+			expandStartPanel(ctx$1, evt) {
+				const bounds = getPanelBounds(ctx$1);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx.size[before.index].size = before.up(evt.step);
-				ctx.size[after.index].size = after.down(evt.step);
+				const next = cloneSize(ctx$1.size ?? []);
+				next[before.index] = {
+					...next[before.index],
+					size: before.up(evt.step)
+				};
+				next[after.index] = {
+					...next[after.index],
+					size: after.down(evt.step)
+				};
+				set.size(ctx$1, next);
 			},
-			shrinkStartPanel(ctx, evt) {
-				const bounds = getPanelBounds(ctx);
+			shrinkStartPanel(ctx$1, evt) {
+				const bounds = getPanelBounds(ctx$1);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx.size[before.index].size = before.down(evt.step);
-				ctx.size[after.index].size = after.up(evt.step);
+				const next = cloneSize(ctx$1.size ?? []);
+				next[before.index] = {
+					...next[before.index],
+					size: before.down(evt.step)
+				};
+				next[after.index] = {
+					...next[after.index],
+					size: after.up(evt.step)
+				};
+				set.size(ctx$1, next);
 			},
-			resetStartPanel(ctx, evt) {
-				const bounds = getPanelBounds(ctx, evt.id);
+			resetStartPanel(ctx$1, evt) {
+				const bounds = getPanelBounds(ctx$1, evt.id);
 				if (!bounds) return;
 				const { before, after } = bounds;
-				ctx.size[before.index].size = ctx.initialSize[before.index].size;
-				ctx.size[after.index].size = ctx.initialSize[after.index].size;
+				const next = cloneSize(ctx$1.size ?? []);
+				next[before.index] = {
+					...next[before.index],
+					size: ctx$1.initialSize[before.index].size
+				};
+				next[after.index] = {
+					...next[after.index],
+					size: ctx$1.initialSize[after.index].size
+				};
+				set.size(ctx$1, next);
 			},
-			focusResizeHandle(ctx) {
+			focusResizeHandle(ctx$1) {
 				raf(() => {
-					dom.getActiveHandleEl(ctx)?.focus({ preventScroll: true });
+					dom.getActiveHandleEl(ctx$1)?.focus({ preventScroll: true });
 				});
 			},
-			blurResizeHandle(ctx) {
+			blurResizeHandle(ctx$1) {
 				raf(() => {
-					dom.getActiveHandleEl(ctx)?.blur();
+					dom.getActiveHandleEl(ctx$1)?.blur();
 				});
 			},
-			storeInitialDragState(ctx, evt) {
-				const panels = getHandlePanels(ctx);
+			storeInitialDragState(ctx$1, evt) {
+				const panels = getHandlePanels(ctx$1);
 				if (!panels) return;
 				const { before, after } = panels;
-				ctx.initialDragPoint = evt.point;
-				ctx.initialDragSizes = {
+				ctx$1.initialDragPoint = evt.point;
+				ctx$1.initialDragSizes = {
 					before: before.size,
 					after: after.size
 				};
 			},
-			setPreviousPanels(ctx) {
-				ctx.previousPanels = ctx.panels.slice();
+			setPreviousPanels(ctx$1) {
+				ctx$1.previousPanels = ctx$1.panels.slice();
 			},
-			setActiveResizeState(ctx) {
-				const panels = getPanelBounds(ctx);
+			setActiveResizeState(ctx$1) {
+				const panels = getPanelBounds(ctx$1);
 				if (!panels) return;
 				const { before } = panels;
-				ctx.activeResizeState = {
+				ctx$1.activeResizeState = {
 					isAtMin: before.isAtMin,
 					isAtMax: before.isAtMax
 				};
 			},
-			setPointerValue(ctx, evt) {
-				const panels = getHandlePanels(ctx);
-				const bounds = getHandleBounds(ctx);
+			setPointerValue(ctx$1, evt) {
+				const panels = getHandlePanels(ctx$1);
+				const bounds = getHandleBounds(ctx$1);
 				if (!panels || !bounds) return;
-				const rootEl = dom.getRootEl(ctx);
+				const rootEl = dom.getRootEl(ctx$1);
 				if (!rootEl) return;
-				if (!ctx.initialDragPoint || !ctx.initialDragSizes) return;
+				if (!ctx$1.initialDragPoint || !ctx$1.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 = {
+				const rootSize = ctx$1.isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;
+				const currentPos = ctx$1.isHorizontal ? evt.point.x : evt.point.y;
+				const initialPos = ctx$1.isHorizontal ? ctx$1.initialDragPoint.x : ctx$1.initialDragPoint.y;
+				const deltaPercent = (ctx$1.dir === "rtl" && ctx$1.isHorizontal ? initialPos - currentPos : currentPos - initialPos) / rootSize * 100;
+				let newBeforeSize = ctx$1.initialDragSizes.before + deltaPercent;
+				let newAfterSize = ctx$1.initialDragSizes.after - deltaPercent;
+				ctx$1.activeResizeState = {
 					isAtMin: newBeforeSize <= before.minSize,
 					isAtMax: newBeforeSize >= before.maxSize
 				};
 				newBeforeSize = clamp(newBeforeSize, before.minSize, before.maxSize);
 				newAfterSize = clamp(newAfterSize, after.minSize, after.maxSize);
-				const totalSize = ctx.initialDragSizes.before + ctx.initialDragSizes.after;
+				const totalSize = ctx$1.initialDragSizes.before + ctx$1.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;
+				const next = cloneSize(ctx$1.size ?? []);
+				next[before.index] = {
+					...next[before.index],
+					size: newBeforeSize
+				};
+				next[after.index] = {
+					...next[after.index],
+					size: newAfterSize
+				};
+				set.size(ctx$1, next);
 			}
 		}
 	});
@@ -654,6 +727,7 @@ function machine(userContext) {
 //#endregion
 //#region src/props.ts
 const props = createProps()([
+	"defaultSize",
 	"dir",
 	"getRootNode",
 	"id",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/splitter",
   "type": "module",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "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.6",
-    "@destyler/dom": "0.2.6",
-    "@destyler/types": "0.2.6",
-    "@destyler/utils": "0.2.6",
-    "@destyler/xstate": "0.2.6"
+    "@destyler/anatomy": "0.2.9",
+    "@destyler/dom": "0.2.9",
+    "@destyler/types": "0.2.9",
+    "@destyler/utils": "0.2.9",
+    "@destyler/xstate": "0.2.9"
   },
   "publishConfig": {
     "access": "public"