@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/image-cropper/image-cropper.presentation.js

@@ -0,0 +1,536 @@
+import { isGesturing, roundedCrop } from "./image-cropper.state.js";
+import { imageCropper as imageCropper$1 } from "./image-cropper.machine.js";
+import { ariaBusy, ariaDescription, ariaHidden, ariaRoleDescription, dataAttr, defineComponent, isComposing, isRecord, sliderThumb } from "@spinjs/runtime";
+// src/image-cropper/image-cropper.presentation.ts
+/** A numeric prop: numbers pass, numeric strings parse, everything else
+* absent. Named once; transport owns the grammar. */
+const countOf = (raw) => {
+	if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+	if (typeof raw === "string" && raw.trim().length > 0) {
+		const n = Number(raw.trim());
+		return Number.isFinite(n) ? n : null;
+	}
+	return null;
+};
+const HANDLES = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+];
+/** The edge point each grip centers on, as selection-relative offsets. */
+const HANDLE_OFFSET = {
+	nw: {
+		left: "0%",
+		top: "0%"
+	},
+	n: {
+		left: "50%",
+		top: "0%"
+	},
+	ne: {
+		left: "100%",
+		top: "0%"
+	},
+	e: {
+		left: "100%",
+		top: "50%"
+	},
+	se: {
+		left: "100%",
+		top: "100%"
+	},
+	s: {
+		left: "50%",
+		top: "100%"
+	},
+	sw: {
+		left: "0%",
+		top: "100%"
+	},
+	w: {
+		left: "0%",
+		top: "50%"
+	}
+};
+/** A pointer point relative to the viewport node, measured through the
+* framework — defs never query the DOM. */
+const viewportPoint = (scope, clientX, clientY) => {
+	const rect = scope.measure("viewport");
+	if (rect === null) return null;
+	return {
+		x: clientX - rect.left,
+		y: clientY - rect.top
+	};
+};
+/** A press inside the selection belongs to the drag, not the pan: the
+* selection's own press stops there. Duck-typed — the target may be a stub. */
+const insideSelection = (scope, target) => {
+	if (!(target instanceof Element)) return false;
+	if (target.id === scope.id("selection")) return true;
+	if (typeof target.closest !== "function") return false;
+	return target.closest(`[id="${scope.id("selection")}"]`) !== null;
+};
+const HANDLE_NAMES = [
+	"n",
+	"s",
+	"e",
+	"w",
+	"ne",
+	"nw",
+	"se",
+	"sw"
+];
+const isHandle = (raw) => typeof raw === "string" && HANDLE_NAMES.includes(raw);
+/** The image's natural size off the load target: positive numbers
+* only. The constructor may not exist (linkedom) — read the shape. */
+const naturalSizeOf = (target) => {
+	if (!isRecord(target)) return null;
+	const width = target["naturalWidth"];
+	const height = target["naturalHeight"];
+	if (typeof width !== "number" || typeof height !== "number" || width === 0) return null;
+	return {
+		width,
+		height
+	};
+};
+const toHandle = (raw) => isHandle(raw) ? raw : null;
+/** A handle slot arg: the recipe's `{ position: row }` or a bare handle
+* name; anything else is the southeast handle. */
+const handleOf = (arg) => {
+	const direct = toHandle(arg);
+	if (direct !== null) return { position: direct };
+	if (isRecord(arg)) {
+		const position = toHandle(arg["position"]);
+		if (position !== null) return { position };
+	}
+	return { position: "se" };
+};
+const gridOf = (arg) => {
+	return { axis: (isRecord(arg) ? arg["axis"] : void 0) === "vertical" ? "vertical" : "horizontal" };
+};
+const nudgeStep = (event) => event.shiftKey ? 10 : 1;
+const onSelectionKeydown = (scope, event) => {
+	if (event.defaultPrevented) return;
+	if (isComposing(event)) return;
+	if (scope.context.disabled) return;
+	const ctx = scope.context;
+	const step = nudgeStep(event);
+	switch (event.key) {
+		case "+":
+		case "=":
+			event.preventDefault();
+			scope.send({
+				type: "ZOOM",
+				delta: scope.context.zoomStep ?? .1
+			});
+			return;
+		case "-":
+		case "_":
+			event.preventDefault();
+			scope.send({
+				type: "ZOOM",
+				delta: -(scope.context.zoomStep ?? .1)
+			});
+			return;
+		case "ArrowUp":
+		case "ArrowDown":
+		case "ArrowLeft":
+		case "ArrowRight": {
+			event.preventDefault();
+			const dx = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+			const dy = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+			if (ctx.fixedCropArea) {
+				scope.send({
+					type: "NUDGE_PAN",
+					dx,
+					dy
+				});
+				return;
+			}
+			if (event.altKey) {
+				const handle = event.key === "ArrowUp" || event.key === "ArrowDown" ? "s" : "e";
+				scope.send({
+					type: "NUDGE_RESIZE",
+					handlePosition: handle,
+					large: event.shiftKey
+				});
+				return;
+			}
+			scope.send({
+				type: "NUDGE_MOVE",
+				dx,
+				dy
+			});
+			return;
+		}
+		default: return;
+	}
+};
+const def = {
+	name: "image-cropper",
+	machine: (args, authored) => imageCropper$1(args, authored),
+	start: "idle",
+	parts: {
+		root: { attrs: (scope) => {
+			const crop = scope.context;
+			const rounded = roundedCrop(crop);
+			const measured = crop.viewportRect.width > 0 && crop.viewportRect.height > 0;
+			return {
+				role: "group",
+				dir: scope.context.dir,
+				...ariaRoleDescription("Image cropper"),
+				"aria-label": "Image cropper",
+				...ariaDescription(`Crop positioned at ${rounded.x}px from the left and ${rounded.y}px from the top with a size of ${rounded.width}px by ${rounded.height}px, ${crop.zoom.toFixed(2)}x zoom, ${Math.round(crop.rotation)} degrees rotation.`),
+				...ariaBusy(measured ? void 0 : "true"),
+				"data-shape": crop.cropShape,
+				"data-dragging": scope.attr(scope.state === "dragging"),
+				"data-panning": scope.attr(scope.state === "panning")
+			};
+		} },
+		viewport: { attrs: (scope) => {
+			const ctx = scope.context;
+			const measured = ctx.viewportRect.width > 0 && ctx.viewportRect.height > 0;
+			const disabled = scope.context.disabled;
+			return {
+				role: "presentation",
+				"data-measured": dataAttr(measured),
+				"use:resize-observer": { onResize: (size) => {
+					if (size.width === 0 || size.height === 0) return;
+					const current = scope.context.viewportRect;
+					if (current.width === size.width && current.height === size.height && current.x === 0 && current.y === 0) return;
+					scope.send({
+						type: "SET_VIEWPORT",
+						viewport: {
+							x: 0,
+							y: 0,
+							width: size.width,
+							height: size.height
+						}
+					});
+					scope.send({
+						type: "SET_DEFAULT_CROP",
+						viewport: {
+							x: 0,
+							y: 0,
+							width: size.width,
+							height: size.height
+						}
+					});
+				} },
+				"use:drag": {
+					enabled: !disabled,
+					preventDefault: false,
+					cancelOnEscape: false,
+					onStart: (press) => {
+						if (insideSelection(scope, press.target)) return;
+						const point = viewportPoint(scope, press.x, press.y);
+						if (point === null) return;
+						const rect = scope.measure("viewport");
+						if (rect !== null && rect.width !== 0 && rect.height !== 0) {
+							const current = scope.context.viewportRect;
+							if (!(current.width === rect.width && current.height === rect.height && current.x === 0 && current.y === 0)) {
+								scope.send({
+									type: "SET_VIEWPORT",
+									viewport: {
+										x: 0,
+										y: 0,
+										width: rect.width,
+										height: rect.height
+									}
+								});
+								scope.send({
+									type: "SET_DEFAULT_CROP",
+									viewport: {
+										x: 0,
+										y: 0,
+										width: rect.width,
+										height: rect.height
+									}
+								});
+							}
+						}
+						scope.send({
+							type: "PAN_POINTER_DOWN",
+							point
+						});
+					},
+					onMove: (delta) => {
+						if (scope.state !== "panning") return;
+						const point = viewportPoint(scope, delta.x, delta.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_MOVE",
+							point
+						});
+					},
+					onEnd: () => {
+						if (scope.state !== "panning") return;
+						scope.send({ type: "POINTER_UP" });
+					}
+				},
+				onWheel: (event) => {
+					if (disabled) return;
+					event.preventDefault();
+					const step = scope.context.zoomStep ?? .1;
+					const delta = event.deltaY > 0 ? -step : step;
+					scope.send({
+						type: "ZOOM",
+						delta
+					});
+				}
+			};
+		} },
+		image: { attrs: (scope) => {
+			const crop = scope.context;
+			const src = scope.context.src;
+			const alt = scope.context.alt;
+			const measured = crop.viewportRect.width > 0 && crop.viewportRect.height > 0;
+			return {
+				role: "presentation",
+				alt: alt.length > 0 ? alt : "",
+				...ariaHidden("true"),
+				draggable: "false",
+				src: src.length > 0 ? src : void 0,
+				"data-ready": dataAttr(measured),
+				style: { transform: `scale(${crop.zoom}) rotate(${crop.rotation}deg) translate(${crop.offset.x}px, ${crop.offset.y}px) scaleX(${crop.flipHorizontal ? -1 : 1}) scaleY(${crop.flipVertical ? -1 : 1})` },
+				onLoad: (event) => {
+					const size = naturalSizeOf(event.currentTarget);
+					if (size === null) return;
+					scope.send({
+						type: "SET_NATURAL_SIZE",
+						size
+					});
+				}
+			};
+		} },
+		selection: { attrs: (scope) => {
+			const ctx = scope.context;
+			const crop = roundedCrop(ctx);
+			const maxX = isGesturing(scope.state) ? Math.max(0, Math.round(ctx.viewportRect.width - ctx.crop.width)) : Math.max(crop.x, 0);
+			return {
+				role: "slider",
+				tabindex: "0",
+				"data-dragging": scope.attr(scope.state === "dragging"),
+				"aria-label": `Crop selection area (${ctx.cropShape === "circle" ? "circle" : "rectangle"})`,
+				...ariaRoleDescription("2d slider"),
+				...sliderThumb({
+					min: "0",
+					max: String(maxX),
+					now: String(crop.x),
+					text: `Position X ${crop.x}px, Y ${crop.y}px. Size ${crop.width}px by ${crop.height}px.`
+				}),
+				...ariaDescription("Use arrow keys to move the crop. Hold Alt with arrow keys to resize width or height. Press plus or minus to zoom."),
+				"data-disabled": dataAttr(ctx.fixedCropArea),
+				"data-shape": ctx.cropShape,
+				"data-measured": dataAttr(ctx.viewportRect.width > 0 && ctx.viewportRect.height > 0),
+				style: {
+					left: `${ctx.crop.x}px`,
+					top: `${ctx.crop.y}px`,
+					width: `${ctx.crop.width}px`,
+					height: `${ctx.crop.height}px`
+				},
+				"use:drag": {
+					enabled: !ctx.fixedCropArea,
+					preventDefault: false,
+					stopPropagation: true,
+					cancelOnEscape: false,
+					onStart: (press) => {
+						const point = viewportPoint(scope, press.x, press.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_DOWN",
+							point
+						});
+					},
+					onMove: (delta) => {
+						if (scope.state !== "dragging") return;
+						const point = viewportPoint(scope, delta.x, delta.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_MOVE",
+							point
+						});
+					},
+					onEnd: () => {
+						if (scope.state !== "dragging") return;
+						scope.send({ type: "POINTER_UP" });
+					}
+				},
+				onKeydown: (event) => onSelectionKeydown(scope, event)
+			};
+		} },
+		handle: { attrs: (scope, arg) => {
+			const slots = handleOf(arg);
+			const fixed = scope.context.fixedCropArea;
+			const at = HANDLE_OFFSET[slots.position];
+			return {
+				id: scope.id("handle", slots.position),
+				role: "presentation",
+				...ariaHidden("true"),
+				"data-position": slots.position,
+				"data-disabled": dataAttr(fixed),
+				style: {
+					left: at.left,
+					top: at.top,
+					translate: "-50% -50%"
+				},
+				"use:drag": {
+					enabled: !fixed,
+					preventDefault: false,
+					stopPropagation: true,
+					cancelOnEscape: false,
+					onStart: (press) => {
+						const point = viewportPoint(scope, press.x, press.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_DOWN",
+							point,
+							handlePosition: slots.position
+						});
+					},
+					onMove: (delta) => {
+						if (scope.state !== "dragging") return;
+						const point = viewportPoint(scope, delta.x, delta.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_MOVE",
+							point
+						});
+					},
+					onEnd: () => {
+						if (scope.state !== "dragging") return;
+						scope.send({ type: "POINTER_UP" });
+					}
+				}
+			};
+		} },
+		grid: { attrs: (scope, arg) => {
+			const slots = gridOf(arg);
+			return {
+				id: scope.id("grid", slots.axis),
+				...ariaHidden("true"),
+				"data-axis": slots.axis,
+				"data-dragging": scope.attr(scope.state === "dragging")
+			};
+		} }
+	},
+	commands: {
+		setZoom: { event: ([zoom]) => ({
+			type: "SET_ZOOM",
+			zoom
+		}) },
+		zoomBy: { event: ([delta], context) => ({
+			type: "SET_ZOOM",
+			zoom: context.zoom + delta
+		}) },
+		setRotation: { event: ([rotation]) => ({
+			type: "SET_ROTATION",
+			rotation
+		}) },
+		rotateBy: { event: ([degrees], context) => ({
+			type: "SET_ROTATION",
+			rotation: context.rotation + degrees
+		}) },
+		setFlip: { event: (args) => {
+			const flip = args[0];
+			if (!isRecord(flip)) return { type: "SET_FLIP" };
+			const horizontal = flip["horizontal"];
+			const vertical = flip["vertical"];
+			return {
+				type: "SET_FLIP",
+				...typeof horizontal === "boolean" ? { horizontal } : {},
+				...typeof vertical === "boolean" ? { vertical } : {}
+			};
+		} },
+		flipHorizontal: { event: (args, context) => {
+			const next = args[0];
+			return {
+				type: "SET_FLIP",
+				horizontal: typeof next === "boolean" ? next : !context.flipHorizontal
+			};
+		} },
+		flipVertical: { event: (args, context) => {
+			const next = args[0];
+			return {
+				type: "SET_FLIP",
+				vertical: typeof next === "boolean" ? next : !context.flipVertical
+			};
+		} },
+		resize: { event: (args) => {
+			const handlePosition = handleOf(args[0]).position;
+			const rawDelta = args[1];
+			const delta = typeof rawDelta === "number" ? rawDelta : countOf(rawDelta) ?? 0;
+			return {
+				type: "RESIZE_CROP",
+				handlePosition,
+				delta: {
+					x: handlePosition.includes("w") ? -delta : handlePosition.includes("e") ? delta : 0,
+					y: handlePosition.includes("n") ? -delta : handlePosition.includes("s") ? delta : 0
+				}
+			};
+		} },
+		reset: { event: () => ({ type: "RESET" }) }
+	},
+	readers: {
+		handles: { read: () => HANDLES },
+		crop: { read: (context) => ({ ...context.crop }) },
+		zoom: { read: (context) => context.zoom },
+		rotation: { read: (context) => context.rotation },
+		flip: { read: (context) => ({
+			horizontal: context.flipHorizontal,
+			vertical: context.flipVertical
+		}) },
+		dragging: { read: (_context, state) => state === "dragging" },
+		panning: { read: (_context, state) => state === "panning" },
+		measured: { read: (context) => context.viewportRect.width > 0 && context.viewportRect.height > 0 }
+	},
+	methods: { getCropData: { call: (context) => ({ ...roundedCrop(context) }) } },
+	events: {
+		"crop-change": {
+			prop: "onCropChange",
+			watch: (context) => {
+				const crop = context.crop;
+				return [
+					crop.x,
+					crop.y,
+					crop.width,
+					crop.height
+				];
+			},
+			detail: (_watched, _event, _props, context) => ({ crop: { ...context.crop } })
+		},
+		"zoom-change": {
+			prop: "onZoomChange",
+			watch: (context) => [context.zoom],
+			detail: (watched) => {
+				const zoom = watched[0];
+				return { zoom: typeof zoom === "number" ? zoom : 1 };
+			}
+		},
+		"rotation-change": {
+			prop: "onRotationChange",
+			watch: (context) => [context.rotation],
+			detail: (watched) => {
+				const rotation = watched[0];
+				return { rotation: typeof rotation === "number" ? rotation : 0 };
+			}
+		},
+		"flip-change": {
+			prop: "onFlipChange",
+			watch: (context) => [context.flipHorizontal, context.flipVertical],
+			detail: (watched) => ({
+				horizontal: watched[0] === true,
+				vertical: watched[1] === true
+			})
+		}
+	}
+};
+const imageCropper = defineComponent(def);
+export { def, imageCropper };
+
+//# sourceMappingURL=image-cropper.presentation.js.map

package/dist/image-cropper/image-cropper.state.d.ts

@@ -0,0 +1,94 @@
+import { clampPoint, getMaxBounds } from "./crop-geometry.js";
+export type ImageCropperState = "idle" | "dragging" | "panning";
+export interface CropRect {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+export interface CropPoint {
+  readonly x: number;
+  readonly y: number;
+}
+export interface CropSize {
+  readonly width: number;
+  readonly height: number;
+}
+export type CropHandle = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+export interface ImageCropperArgs {
+  cropShape?: string;
+  aspectRatio?: number;
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  fixedCropArea?: boolean;
+  zoom?: string | number;
+  rotation?: string | number;
+  flip?: {
+    readonly horizontal?: boolean;
+    readonly vertical?: boolean;
+  };
+  defaultFlip?: {
+    readonly horizontal?: boolean;
+    readonly vertical?: boolean;
+  };
+  disabled?: boolean;
+  dir?: string;
+  zoomStep?: string | number;
+  src?: string;
+  alt?: string;
+}
+export interface ImageCropperContext {
+  crop: CropRect;
+  viewportRect: CropRect;
+  naturalSize: CropSize;
+  offset: CropPoint;
+  zoom: number;
+  rotation: number;
+  flipHorizontal: boolean;
+  flipVertical: boolean;
+  pointerStart: CropPoint | null;
+  cropStart: CropRect | null;
+  offsetStart: CropPoint | null;
+  handlePosition: CropHandle | null;
+  cropShape: "rect" | "circle";
+  aspectRatio: number | null;
+  minWidth: number | null;
+  minHeight: number | null;
+  maxWidth: number | null;
+  maxHeight: number | null;
+  fixedCropArea: boolean;
+  disabled: boolean;
+  dir: string;
+  zoomStep: number;
+  src: string;
+  alt: string;
+}
+declare const asCount: (raw: unknown) => number | null;
+export declare function flipOf(raw: unknown): {
+  horizontal: boolean;
+  vertical: boolean;
+} | null;
+declare const zoomOf: (raw: unknown) => number | null;
+declare const rotationOf: (raw: unknown) => number | null;
+export declare function initial(args: ImageCropperArgs | undefined, authored: (name: string) => boolean): ImageCropperContext;
+export declare const isGesturing: (phase: string) => boolean;
+export declare const roundedCrop: (ctx: ImageCropperContext) => CropRect;
+export declare function limitsOf(ctx: ImageCropperContext, viewportRect: {
+  width: number;
+  height: number;
+}): {
+  minSize: {
+    width: number;
+    height: number;
+  };
+  maxSize: {
+    width: number;
+    height: number;
+  };
+};
+export declare const ratioOf: (ctx: ImageCropperContext) => number | null;
+export declare const defaultCropPatch: (ctx: ImageCropperContext, viewportRect: CropRect) => Partial<ImageCropperContext>;
+export { asCount, clampPoint, getMaxBounds, rotationOf, zoomOf };
+//# sourceMappingURL=image-cropper.state.d.ts.map