@destyler/splitter 0.0.7-beta.7 → 0.1.0

package/dist/index.js

@@ -0,0 +1,666 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { createScope, dataAttr, getEventKey, getEventStep, getRelativePoint, queryAll, raf, trackPointerMove } from "@destyler/dom";
+import { compact, createSplitProps } from "@destyler/utils";
+import { createMachine } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+	getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
+	getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
+	getGlobalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
+	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+	getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
+	getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
+	getCursor(ctx) {
+		const x = ctx.isHorizontal;
+		let cursor = x ? "col-resize" : "row-resize";
+		if (ctx.activeResizeState.isAtMin) cursor = x ? "e-resize" : "s-resize";
+		if (ctx.activeResizeState.isAtMax) cursor = x ? "w-resize" : "n-resize";
+		return cursor;
+	},
+	getPanelStyle(ctx, id) {
+		const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0";
+		return {
+			flexBasis: 0,
+			flexGrow,
+			flexShrink: 1,
+			overflow: "hidden"
+		};
+	},
+	getActiveHandleEl(ctx) {
+		const activeId = ctx.activeResizeId;
+		if (activeId == null) return;
+		return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId));
+	},
+	getResizeTriggerEls(ctx) {
+		const ownerId = CSS.escape(dom.getRootId(ctx));
+		return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
+	},
+	setupGlobalCursor(ctx) {
+		const styleEl = dom.getById(ctx, dom.getGlobalCursorId(ctx));
+		const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
+		if (styleEl) styleEl.textContent = textContent;
+		else {
+			const style = dom.getDoc(ctx).createElement("style");
+			style.id = dom.getGlobalCursorId(ctx);
+			style.textContent = textContent;
+			dom.getDoc(ctx).head.appendChild(style);
+		}
+	},
+	removeGlobalCursor(ctx) {
+		dom.getById(ctx, dom.getGlobalCursorId(ctx))?.remove();
+	}
+});
+
+//#endregion
+//#region src/utils.ts
+function validateSize(key, size) {
+	if (Math.floor(size) > 100) throw new Error(`Total ${key} of panels cannot be greater than 100`);
+}
+function getNormalizedPanels(ctx) {
+	let numOfPanelsWithoutSize = 0;
+	let totalSize = 0;
+	let totalMinSize = 0;
+	const panels = ctx.size.map((panel) => {
+		const minSize = panel.minSize ?? 0;
+		const maxSize = panel.maxSize ?? 100;
+		totalMinSize += minSize;
+		if (panel.size == null) numOfPanelsWithoutSize++;
+		else totalSize += panel.size;
+		return {
+			...panel,
+			minSize,
+			maxSize
+		};
+	});
+	validateSize("minSize", totalMinSize);
+	validateSize("size", totalSize);
+	let end = 0;
+	let remainingSize = 0;
+	const result = panels.map((panel) => {
+		const start = end;
+		if (panel.size != null) {
+			end += panel.size;
+			remainingSize = panel.size - panel.minSize;
+			return {
+				...panel,
+				start,
+				end,
+				remainingSize
+			};
+		}
+		const size = (100 - totalSize) / numOfPanelsWithoutSize;
+		end += size;
+		remainingSize = size - panel.minSize;
+		return {
+			...panel,
+			size,
+			start,
+			end,
+			remainingSize
+		};
+	});
+	return result;
+}
+function getHandlePanels(ctx, id = ctx.activeResizeId) {
+	const [beforeId, afterId] = id?.split(":") ?? [];
+	if (!beforeId || !afterId) return;
+	const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
+	const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
+	if (beforeIndex === -1 || afterIndex === -1) return;
+	const before = ctx.previousPanels[beforeIndex];
+	const after = ctx.previousPanels[afterIndex];
+	return {
+		before: {
+			...before,
+			index: beforeIndex
+		},
+		after: {
+			...after,
+			index: afterIndex
+		}
+	};
+}
+function getHandleBounds(ctx, id = ctx.activeResizeId) {
+	const panels = getHandlePanels(ctx, id);
+	if (!panels) return;
+	const { before, after } = panels;
+	return {
+		min: Math.max(before.start + before.minSize, after.end - after.maxSize),
+		max: Math.min(after.end - after.minSize, before.maxSize + before.start)
+	};
+}
+function getPanelBounds(ctx, id) {
+	const bounds = getHandleBounds(ctx, id);
+	const panels = getHandlePanels(ctx, id);
+	if (!bounds || !panels) return;
+	const { before, after } = panels;
+	const beforeMin = Math.abs(before.start - bounds.min);
+	const afterMin = after.size + (before.size - beforeMin);
+	const beforeMax = Math.abs(before.start - bounds.max);
+	const afterMax = after.size - (beforeMax - before.size);
+	return {
+		before: {
+			index: before.index,
+			min: beforeMin,
+			max: beforeMax,
+			isAtMin: beforeMin === before.size,
+			isAtMax: beforeMax === before.size,
+			up(step) {
+				return Math.min(before.size + step, beforeMax);
+			},
+			down(step) {
+				return Math.max(before.size - step, beforeMin);
+			}
+		},
+		after: {
+			index: after.index,
+			min: afterMin,
+			max: afterMax,
+			isAtMin: afterMin === after.size,
+			isAtMax: afterMax === after.size,
+			up(step) {
+				return Math.min(after.size + step, afterMin);
+			},
+			down(step) {
+				return Math.max(after.size - step, afterMax);
+			}
+		}
+	};
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const horizontal = state.context.isHorizontal;
+	const focused = state.hasTag("focus");
+	const dragging = state.matches("dragging");
+	const panels = state.context.panels;
+	function getResizeTriggerState(props$1) {
+		const { id, disabled } = props$1;
+		const ids = id.split(":");
+		const panelIds = ids.map((id$1) => dom.getPanelId(state.context, id$1));
+		const panels$1 = getHandleBounds(state.context, id);
+		return {
+			disabled: !!disabled,
+			focused: state.context.activeResizeId === id && focused,
+			panelIds,
+			min: panels$1?.min,
+			max: panels$1?.max,
+			value: 0
+		};
+	}
+	return {
+		focused,
+		dragging,
+		getResizeTriggerState,
+		bounds: getHandleBounds(state.context),
+		setToMinSize(id) {
+			const panel = panels.find((panel$1) => panel$1.id === id);
+			send({
+				type: "SET_PANEL_SIZE",
+				id,
+				size: panel?.minSize,
+				src: "setToMinSize"
+			});
+		},
+		setToMaxSize(id) {
+			const panel = panels.find((panel$1) => panel$1.id === id);
+			send({
+				type: "SET_PANEL_SIZE",
+				id,
+				size: panel?.maxSize,
+				src: "setToMaxSize"
+			});
+		},
+		setSize(id, size) {
+			send({
+				type: "SET_PANEL_SIZE",
+				id,
+				size
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"data-orientation": state.context.orientation,
+				"id": dom.getRootId(state.context),
+				"dir": state.context.dir,
+				"style": {
+					display: "flex",
+					flexDirection: horizontal ? "row" : "column",
+					height: "100%",
+					width: "100%",
+					overflow: "hidden"
+				}
+			});
+		},
+		getPanelProps(props$1) {
+			const { id } = props$1;
+			return normalize.element({
+				...parts.panel.attrs,
+				"data-orientation": state.context.orientation,
+				"dir": state.context.dir,
+				"id": dom.getPanelId(state.context, id),
+				"data-ownedby": dom.getRootId(state.context),
+				"style": dom.getPanelStyle(state.context, id)
+			});
+		},
+		getResizeTriggerProps(props$1) {
+			const { id, disabled, step = 1 } = props$1;
+			const triggerState = getResizeTriggerState(props$1);
+			return normalize.element({
+				...parts.resizeTrigger.attrs,
+				"dir": state.context.dir,
+				"id": dom.getResizeTriggerId(state.context, id),
+				"role": "separator",
+				"data-ownedby": dom.getRootId(state.context),
+				"tabIndex": disabled ? void 0 : 0,
+				"aria-valuenow": triggerState.value,
+				"aria-valuemin": triggerState.min,
+				"aria-valuemax": triggerState.max,
+				"data-orientation": state.context.orientation,
+				"aria-orientation": state.context.orientation,
+				"aria-controls": triggerState.panelIds.join(" "),
+				"data-focus": dataAttr(triggerState.focused),
+				"data-disabled": dataAttr(disabled),
+				"style": {
+					touchAction: "none",
+					userSelect: "none",
+					WebkitUserSelect: "none",
+					flex: "0 0 auto",
+					pointerEvents: dragging && !triggerState.focused ? "none" : void 0,
+					cursor: horizontal ? "col-resize" : "row-resize",
+					[horizontal ? "minHeight" : "minWidth"]: "0"
+				},
+				onPointerDown(event) {
+					if (disabled) {
+						event.preventDefault();
+						return;
+					}
+					send({
+						type: "POINTER_DOWN",
+						id
+					});
+					event.currentTarget.setPointerCapture(event.pointerId);
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onPointerUp(event) {
+					if (disabled) return;
+					if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				onPointerOver() {
+					if (disabled) return;
+					send({
+						type: "POINTER_OVER",
+						id
+					});
+				},
+				onPointerLeave() {
+					if (disabled) return;
+					send({
+						type: "POINTER_LEAVE",
+						id
+					});
+				},
+				onBlur() {
+					send("BLUR");
+				},
+				onFocus() {
+					send({
+						type: "FOCUS",
+						id
+					});
+				},
+				onDoubleClick() {
+					if (disabled) return;
+					send({
+						type: "DOUBLE_CLICK",
+						id
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					const moveStep = getEventStep(event) * step;
+					const keyMap = {
+						Enter() {
+							send("ENTER");
+						},
+						ArrowUp() {
+							send({
+								type: "ARROW_UP",
+								step: moveStep
+							});
+						},
+						ArrowDown() {
+							send({
+								type: "ARROW_DOWN",
+								step: moveStep
+							});
+						},
+						ArrowLeft() {
+							send({
+								type: "ARROW_LEFT",
+								step: moveStep
+							});
+						},
+						ArrowRight() {
+							send({
+								type: "ARROW_RIGHT",
+								step: moveStep
+							});
+						},
+						Home() {
+							send("HOME");
+						},
+						End() {
+							send("END");
+						}
+					};
+					const key = getEventKey(event, state.context);
+					const exec = keyMap[key];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "splitter",
+		initial: "idle",
+		context: {
+			orientation: "horizontal",
+			activeResizeId: null,
+			previousPanels: [],
+			size: [],
+			initialSize: [],
+			activeResizeState: {
+				isAtMin: false,
+				isAtMax: false
+			},
+			...ctx
+		},
+		created: ["setPreviousPanels", "setInitialSize"],
+		watch: { size: ["setActiveResizeState"] },
+		computed: {
+			isHorizontal: (ctx$1) => ctx$1.orientation === "horizontal",
+			panels: (ctx$1) => getNormalizedPanels(ctx$1)
+		},
+		on: { SET_PANEL_SIZE: { actions: "setPanelSize" } },
+		states: {
+			"idle": {
+				entry: ["clearActiveHandleId"],
+				on: {
+					POINTER_OVER: {
+						target: "hover:temp",
+						actions: ["setActiveHandleId"]
+					},
+					FOCUS: {
+						target: "focused",
+						actions: ["setActiveHandleId"]
+					},
+					DOUBLE_CLICK: { actions: ["resetStartPanel", "setPreviousPanels"] }
+				}
+			},
+			"hover:temp": {
+				after: { HOVER_DELAY: "hover" },
+				on: {
+					POINTER_DOWN: {
+						target: "dragging",
+						actions: ["setActiveHandleId"]
+					},
+					POINTER_LEAVE: "idle"
+				}
+			},
+			"hover": {
+				tags: ["focus"],
+				on: {
+					POINTER_DOWN: "dragging",
+					POINTER_LEAVE: "idle"
+				}
+			},
+			"focused": {
+				tags: ["focus"],
+				on: {
+					BLUR: "idle",
+					POINTER_DOWN: {
+						target: "dragging",
+						actions: ["setActiveHandleId"]
+					},
+					ARROW_LEFT: {
+						guard: "isHorizontal",
+						actions: ["shrinkStartPanel", "setPreviousPanels"]
+					},
+					ARROW_RIGHT: {
+						guard: "isHorizontal",
+						actions: ["expandStartPanel", "setPreviousPanels"]
+					},
+					ARROW_UP: {
+						guard: "isVertical",
+						actions: ["shrinkStartPanel", "setPreviousPanels"]
+					},
+					ARROW_DOWN: {
+						guard: "isVertical",
+						actions: ["expandStartPanel", "setPreviousPanels"]
+					},
+					ENTER: [{
+						guard: "isStartPanelAtMax",
+						actions: ["setStartPanelToMin", "setPreviousPanels"]
+					}, { actions: ["setStartPanelToMax", "setPreviousPanels"] }],
+					HOME: { actions: ["setStartPanelToMin", "setPreviousPanels"] },
+					END: { actions: ["setStartPanelToMax", "setPreviousPanels"] }
+				}
+			},
+			"dragging": {
+				tags: ["focus"],
+				entry: "focusResizeHandle",
+				activities: ["trackPointerMove"],
+				on: {
+					POINTER_MOVE: { actions: [
+						"setPointerValue",
+						"setGlobalCursor",
+						"invokeOnResize"
+					] },
+					POINTER_UP: {
+						target: "focused",
+						actions: [
+							"setPreviousPanels",
+							"clearGlobalCursor",
+							"blurResizeHandle",
+							"invokeOnResizeEnd"
+						]
+					}
+				}
+			}
+		}
+	}, {
+		activities: { trackPointerMove: (ctx$1, _evt, { send }) => {
+			const doc = dom.getDoc(ctx$1);
+			return trackPointerMove(doc, {
+				onPointerMove(info) {
+					send({
+						type: "POINTER_MOVE",
+						point: info.point
+					});
+				},
+				onPointerUp() {
+					send("POINTER_UP");
+				}
+			});
+		} },
+		guards: {
+			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$1) {
+				dom.setupGlobalCursor(ctx$1);
+			},
+			clearGlobalCursor(ctx$1) {
+				dom.removeGlobalCursor(ctx$1);
+			},
+			invokeOnResize(ctx$1) {
+				ctx$1.onSizeChange?.({
+					size: Array.from(ctx$1.size),
+					activeHandleId: ctx$1.activeResizeId
+				});
+			},
+			invokeOnResizeEnd(ctx$1) {
+				ctx$1.onSizeChangeEnd?.({
+					size: Array.from(ctx$1.size),
+					activeHandleId: ctx$1.activeResizeId
+				});
+			},
+			setActiveHandleId(ctx$1, evt) {
+				ctx$1.activeResizeId = evt.id;
+			},
+			clearActiveHandleId(ctx$1) {
+				ctx$1.activeResizeId = null;
+			},
+			setInitialSize(ctx$1) {
+				ctx$1.initialSize = ctx$1.panels.slice().map((panel) => ({
+					id: panel.id,
+					size: panel.size
+				}));
+			},
+			setPanelSize(ctx$1, evt) {
+				const { id, size } = evt;
+				ctx$1.size = ctx$1.size.map((panel) => {
+					const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+					return panel.id === id ? {
+						...panel,
+						size: panelSize
+					} : panel;
+				});
+			},
+			setStartPanelToMin(ctx$1) {
+				const bounds = getPanelBounds(ctx$1);
+				if (!bounds) return;
+				const { before, after } = bounds;
+				ctx$1.size[before.index].size = before.min;
+				ctx$1.size[after.index].size = after.min;
+			},
+			setStartPanelToMax(ctx$1) {
+				const bounds = getPanelBounds(ctx$1);
+				if (!bounds) return;
+				const { before, after } = bounds;
+				ctx$1.size[before.index].size = before.max;
+				ctx$1.size[after.index].size = after.max;
+			},
+			expandStartPanel(ctx$1, evt) {
+				const bounds = getPanelBounds(ctx$1);
+				if (!bounds) return;
+				const { before, after } = bounds;
+				ctx$1.size[before.index].size = before.up(evt.step);
+				ctx$1.size[after.index].size = after.down(evt.step);
+			},
+			shrinkStartPanel(ctx$1, evt) {
+				const bounds = getPanelBounds(ctx$1);
+				if (!bounds) return;
+				const { before, after } = bounds;
+				ctx$1.size[before.index].size = before.down(evt.step);
+				ctx$1.size[after.index].size = after.up(evt.step);
+			},
+			resetStartPanel(ctx$1, evt) {
+				const bounds = getPanelBounds(ctx$1, evt.id);
+				if (!bounds) return;
+				const { before, after } = bounds;
+				ctx$1.size[before.index].size = ctx$1.initialSize[before.index].size;
+				ctx$1.size[after.index].size = ctx$1.initialSize[after.index].size;
+			},
+			focusResizeHandle(ctx$1) {
+				raf(() => {
+					dom.getActiveHandleEl(ctx$1)?.focus({ preventScroll: true });
+				});
+			},
+			blurResizeHandle(ctx$1) {
+				raf(() => {
+					dom.getActiveHandleEl(ctx$1)?.blur();
+				});
+			},
+			setPreviousPanels(ctx$1) {
+				ctx$1.previousPanels = ctx$1.panels.slice();
+			},
+			setActiveResizeState(ctx$1) {
+				const panels = getPanelBounds(ctx$1);
+				if (!panels) return;
+				const { before } = panels;
+				ctx$1.activeResizeState = {
+					isAtMin: before.isAtMin,
+					isAtMax: before.isAtMax
+				};
+			},
+			setPointerValue(ctx$1, evt) {
+				const panels = getHandlePanels(ctx$1);
+				const bounds = getHandleBounds(ctx$1);
+				if (!panels || !bounds) return;
+				const rootEl = dom.getRootEl(ctx$1);
+				if (!rootEl) return;
+				const relativePoint = getRelativePoint(evt.point, rootEl);
+				const percentValue = relativePoint.getPercentValue({
+					dir: ctx$1.dir,
+					orientation: ctx$1.orientation
+				});
+				let pointValue = percentValue * 100;
+				ctx$1.activeResizeState = {
+					isAtMin: pointValue < bounds.min,
+					isAtMax: pointValue > bounds.max
+				};
+				pointValue = clamp(pointValue, bounds.min, bounds.max);
+				const { before, after } = panels;
+				const offset = pointValue - before.end;
+				ctx$1.size[before.index].size = before.size + offset;
+				ctx$1.size[after.index].size = after.size - offset;
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"onSizeChange",
+	"onSizeChangeEnd",
+	"orientation",
+	"size"
+]);
+const splitProps = createSplitProps(props);
+const panelProps = createProps()(["id", "snapSize"]);
+const splitPanelProps = createSplitProps(panelProps);
+const resizeTriggerProps = createProps()([
+	"disabled",
+	"id",
+	"step"
+]);
+const splitResizeTriggerProps = createSplitProps(resizeTriggerProps);
+
+//#endregion
+export { anatomy, connect, machine, panelProps, props, resizeTriggerProps, splitPanelProps, splitProps, splitResizeTriggerProps };

package/package.json

@@ -1,37 +1,31 @@
 {
   "name": "@destyler/splitter",
   "type": "module",
-  "version": "0.0.7-beta.7",
+  "version": "0.1.0",
   "description": "A component that divides your layout into resizable sections.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dom-event": "^0.80.0",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/number-utils": "^0.80.0",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/anatomy": "0.1.0",
+    "@destyler/types": "0.1.0",
+    "@destyler/xstate": "0.1.0",
+    "@destyler/dom": "0.1.0",
+    "@destyler/utils": "0.1.0"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }