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

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

@@ -0,0 +1,108 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface ImageCropperEvents {
+  "SET_NATURAL_SIZE": {
+    size: {
+      width: number;
+      height: number;
+    };
+  };
+  "SET_DEFAULT_CROP": {
+    viewport: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  };
+  "SET_VIEWPORT": {
+    viewport: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  };
+  "POINTER_DOWN": {
+    point: {
+      x: number;
+      y: number;
+    };
+    handlePosition?: string;
+  };
+  "PAN_POINTER_DOWN": {
+    point: {
+      x: number;
+      y: number;
+    };
+  };
+  "POINTER_MOVE": {
+    point: {
+      x: number;
+      y: number;
+    };
+    shiftKey?: boolean;
+    altKey?: boolean;
+  };
+  "POINTER_UP": {};
+  "ZOOM": {
+    delta: number;
+    point?: {
+      x: number;
+      y: number;
+    };
+  };
+  "SET_ZOOM": {
+    zoom: number;
+  };
+  "SET_ROTATION": {
+    rotation: number;
+  };
+  "SET_FLIP": {
+    horizontal?: boolean;
+    vertical?: boolean;
+    flip?: {
+      readonly horizontal?: boolean;
+      readonly vertical?: boolean;
+    };
+  };
+  "NUDGE_RESIZE": {
+    handlePosition: string;
+    large?: boolean;
+  };
+  "NUDGE_MOVE": {
+    dx: number;
+    dy: number;
+  };
+  "NUDGE_PAN": {
+    dx: number;
+    dy: number;
+  };
+  "RESIZE_CROP": {
+    handlePosition: string;
+    delta: {
+      x: number;
+      y: number;
+    };
+  };
+  "RESET": {};
+}
+export type ImageCropperEvent = EventUnion<ImageCropperEvents>;
+export type ImageCropperCropChange = {
+  readonly crop: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+};
+export type ImageCropperZoomChange = {
+  readonly zoom: number;
+};
+export type ImageCropperRotationChange = {
+  readonly rotation: number;
+};
+export type ImageCropperFlipChange = {
+  readonly horizontal: boolean;
+  readonly vertical: boolean;
+};
+//# sourceMappingURL=image-cropper.events.d.ts.map

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { ImageCropperEvents } from "./image-cropper.events.js";
+import { ImageCropperArgs, ImageCropperContext, ImageCropperState } from "./image-cropper.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function imageCropper(args?: ImageCropperArgs, authored?: (name: string) => boolean): Machine<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
+//# sourceMappingURL=image-cropper.machine.d.ts.map

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

@@ -0,0 +1,231 @@
+import { centerRect, computeDefaultCropDimensions, computeMoveCrop, computeResizeCrop, isVisibleRect } from "./crop-geometry.js";
+import { defaultCropPatch, flipOf, initial, limitsOf, ratioOf, rotationOf, zoomOf } from "./image-cropper.state.js";
+import { clearOffsetStart, clearPointerStart, hasViewport, setPointerStart } from "./image-cropper.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/image-cropper/image-cropper.machine.ts
+function imageCropper(args = {}, authored = () => false) {
+	return createMachine({
+		id: "image-cropper",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			cropShape: {},
+			aspectRatio: {},
+			minWidth: {},
+			minHeight: {},
+			maxWidth: {},
+			maxHeight: {},
+			fixedCropArea: {},
+			disabled: {},
+			dir: {},
+			zoomStep: {},
+			src: {},
+			alt: {},
+			zoom: { event: "SET_ZOOM" },
+			rotation: { event: "SET_ROTATION" },
+			flip: { event: "SET_FLIP" }
+		},
+		on: {
+			SET_NATURAL_SIZE: { assign: (ctx, event) => {
+				const next = {
+					...ctx,
+					naturalSize: { ...event.size }
+				};
+				return {
+					naturalSize: { ...event.size },
+					...defaultCropPatch(next, ctx.viewportRect)
+				};
+			} },
+			SET_VIEWPORT: { assign: (_ctx, event) => ({ viewportRect: { ...event.viewport } }) },
+			SET_DEFAULT_CROP: { assign: (ctx, event) => {
+				const viewportRect = { ...event.viewport };
+				return {
+					viewportRect,
+					...defaultCropPatch(ctx, viewportRect)
+				};
+			} },
+			SET_ZOOM: { assign: (_ctx, event) => {
+				const zoom = zoomOf(event.zoom);
+				if (zoom === null) return {};
+				return { zoom };
+			} },
+			SET_ROTATION: { assign: (_ctx, event) => {
+				const rotation = rotationOf(event.rotation);
+				if (rotation === null) return {};
+				return { rotation };
+			} },
+			SET_FLIP: { assign: (ctx, event) => {
+				const host = event.flip === void 0 ? null : flipOf(event.flip);
+				return {
+					flipHorizontal: host !== null ? host.horizontal : event.horizontal ?? ctx.flipHorizontal,
+					flipVertical: host !== null ? host.vertical : event.vertical ?? ctx.flipVertical
+				};
+			} },
+			RESET: { assign: (ctx) => {
+				if (!isVisibleRect(ctx.viewportRect)) return {};
+				const aspectRatio = ratioOf(ctx);
+				const { minSize, maxSize } = limitsOf(ctx, ctx.viewportRect);
+				const defaultSize = computeDefaultCropDimensions(ctx.viewportRect, aspectRatio, ctx.fixedCropArea);
+				const clamped = computeResizeCrop({
+					cropStart: {
+						x: 0,
+						y: 0,
+						width: defaultSize.width,
+						height: defaultSize.height
+					},
+					handlePosition: "se",
+					delta: {
+						x: 0,
+						y: 0
+					},
+					viewportRect: ctx.viewportRect,
+					minSize,
+					maxSize,
+					aspectRatio
+				});
+				const at = centerRect({
+					width: clamped.width,
+					height: clamped.height
+				}, ctx.viewportRect);
+				return {
+					crop: {
+						x: at.x,
+						y: at.y,
+						width: clamped.width,
+						height: clamped.height
+					},
+					offset: {
+						x: 0,
+						y: 0
+					},
+					zoom: 1,
+					rotation: 0,
+					flipHorizontal: false,
+					flipVertical: false
+				};
+			} }
+		},
+		states: {
+			idle: { on: {
+				POINTER_DOWN: [{
+					cond: (ctx) => isVisibleRect(ctx.viewportRect) && !ctx.fixedCropArea,
+					target: "dragging",
+					assign: [
+						setPointerStart,
+						(ctx) => ({ cropStart: { ...ctx.crop } }),
+						(_ctx, event) => ({ handlePosition: event.handlePosition ?? null })
+					]
+				}],
+				PAN_POINTER_DOWN: [{
+					cond: (ctx) => isVisibleRect(ctx.naturalSize) && isVisibleRect(ctx.viewportRect),
+					target: "panning",
+					assign: [setPointerStart, (ctx) => ({ offsetStart: { ...ctx.offset } })]
+				}],
+				ZOOM: {
+					cond: hasViewport,
+					assign: (ctx, event) => {
+						return { zoom: Math.min(8, Math.max(.1, ctx.zoom + event.delta)) };
+					}
+				},
+				NUDGE_RESIZE: {
+					cond: hasViewport,
+					assign: (ctx, event) => {
+						const step = event.large === true ? 10 : 1;
+						const { minSize, maxSize } = limitsOf(ctx, ctx.viewportRect);
+						return { crop: { ...computeResizeCrop({
+							cropStart: { ...ctx.crop },
+							handlePosition: event.handlePosition,
+							delta: {
+								x: step,
+								y: step
+							},
+							viewportRect: ctx.viewportRect,
+							minSize,
+							maxSize,
+							aspectRatio: ratioOf(ctx)
+						}) } };
+					}
+				},
+				NUDGE_MOVE: {
+					cond: hasViewport,
+					assign: (ctx, event) => {
+						return { crop: { ...computeMoveCrop({ ...ctx.crop }, {
+							x: event.dx,
+							y: event.dy
+						}, ctx.viewportRect) } };
+					}
+				},
+				NUDGE_PAN: {
+					cond: hasViewport,
+					assign: (ctx, event) => ({ offset: {
+						x: ctx.offset.x + event.dx,
+						y: ctx.offset.y + event.dy
+					} })
+				},
+				RESIZE_CROP: {
+					cond: (ctx) => isVisibleRect(ctx.viewportRect) && !ctx.fixedCropArea,
+					assign: (ctx, event) => {
+						const { minSize, maxSize } = limitsOf(ctx, ctx.viewportRect);
+						return { crop: { ...computeResizeCrop({
+							cropStart: { ...ctx.crop },
+							handlePosition: event.handlePosition,
+							delta: { ...event.delta },
+							viewportRect: ctx.viewportRect,
+							minSize,
+							maxSize,
+							aspectRatio: ratioOf(ctx)
+						}) } };
+					}
+				}
+			} },
+			dragging: { on: {
+				POINTER_MOVE: { assign: (ctx, event) => {
+					const { pointerStart, cropStart, viewportRect, handlePosition } = ctx;
+					if (pointerStart === null || cropStart === null) return {};
+					const aspectRatio = ratioOf(ctx);
+					const { minSize, maxSize } = limitsOf(ctx, viewportRect);
+					const delta = {
+						x: (event.altKey === true ? 2 : 1) * (event.point.x - pointerStart.x),
+						y: (event.altKey === true ? 2 : 1) * (event.point.y - pointerStart.y)
+					};
+					if (handlePosition === null) return { crop: { ...computeMoveCrop({ ...cropStart }, delta, viewportRect) } };
+					return { crop: { ...computeResizeCrop({
+						cropStart: { ...cropStart },
+						handlePosition,
+						delta,
+						viewportRect,
+						minSize,
+						maxSize,
+						aspectRatio
+					}) } };
+				} },
+				POINTER_UP: {
+					target: "idle",
+					assign: [
+						clearPointerStart,
+						() => ({ cropStart: null }),
+						() => ({ handlePosition: null }),
+						clearOffsetStart
+					]
+				}
+			} },
+			panning: { on: {
+				POINTER_MOVE: { assign: (ctx, event) => {
+					const { pointerStart, offsetStart } = ctx;
+					if (pointerStart === null || offsetStart === null) return {};
+					return { offset: {
+						x: offsetStart.x + (event.point.x - pointerStart.x),
+						y: offsetStart.y + (event.point.y - pointerStart.y)
+					} };
+				} },
+				POINTER_UP: {
+					target: "idle",
+					assign: [clearPointerStart, clearOffsetStart]
+				}
+			} }
+		}
+	});
+}
+export { imageCropper };
+
+//# sourceMappingURL=image-cropper.machine.js.map

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

@@ -0,0 +1,295 @@
+import { ImageCropperEvents } from "./image-cropper.events.js";
+import { CropHandle, CropRect, ImageCropperArgs, ImageCropperContext, ImageCropperState } from "./image-cropper.state.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+/**
+ * Image-cropper definition: the DOM contract as data. The machine owns the
+ * three phases, the crop rect, the zoom/rotation/flip and the gesture
+ * starts; this file maps props to channels, parts to attribute bags,
+ * commands to sends, and crop/zoom/rotation/flip transitions to their
+ * events.
+ *
+ * Everything that needs a node lives here — the viewport and image
+ * measurement (reported in as events, because the machine never touches
+ * the DOM), the selection and handle drags (which compute their point
+ * against the viewport node and send it in), the keyboard map, and the
+ * wheel zoom.
+ *
+ * The crop geometry is CONTINUOUS — a drag lands between utilities — so
+ * the bags project it into their own style objects as concrete properties
+ * (`left`, `top`, `width`, `height`, `transform`); the markup names no
+ * var and no custom property carries the geometry.
+ */
+export interface HandleSlotProps {
+  readonly position: CropHandle;
+}
+export interface GridSlotProps {
+  readonly axis: "horizontal" | "vertical";
+}
+export interface ImageCropperCropChange {
+  readonly crop: CropRect;
+}
+export interface ImageCropperZoomChange {
+  readonly zoom: number;
+}
+export interface ImageCropperRotationChange {
+  readonly rotation: number;
+}
+export interface ImageCropperFlipChange {
+  readonly horizontal: boolean;
+  readonly vertical: boolean;
+}
+type ScopeLike = ViewFor<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
+export declare const def: {
+  name: string;
+  machine: (args: ImageCropperArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ImageCropperContext, ImageCropperEvents, ImageCropperState>;
+  start: "idle";
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        "data-shape": "rect" | "circle";
+        "data-dragging": string | undefined;
+        "data-panning": string | undefined;
+        "aria-label": string;
+        role: string;
+        dir: string;
+      };
+    };
+    viewport: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ImageCropperContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ImageCropperEvents>, ImageCropperState>) => {
+        role: string;
+        "data-measured": string | undefined;
+        "use:resize-observer": {
+          onResize: (size: {
+            width: number;
+            height: number;
+          }) => void;
+        };
+        "use:drag": {
+          enabled: boolean;
+          preventDefault: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+        onWheel: (event: WheelEvent) => void;
+      };
+    };
+    image: {
+      attrs: (scope: ScopeLike) => {
+        draggable: string;
+        src: string | undefined;
+        "data-ready": string | undefined;
+        style: {
+          transform: string;
+        };
+        onLoad: (event: Event) => void;
+        role: string;
+        alt: string;
+      };
+    };
+    selection: {
+      attrs: (scope: ScopeLike) => {
+        "data-disabled": string | undefined;
+        "data-shape": "rect" | "circle";
+        "data-measured": string | undefined;
+        style: {
+          left: string;
+          top: string;
+          width: string;
+          height: string;
+        };
+        "use:drag": {
+          enabled: boolean;
+          preventDefault: boolean;
+          stopPropagation: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+        onKeydown: (event: KeyboardEvent) => void;
+        role: string;
+        tabindex: string;
+        "data-dragging": string | undefined;
+        "aria-label": string;
+      };
+    };
+    handle: {
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-position": CropHandle;
+        "data-disabled": string | undefined;
+        style: {
+          left: string;
+          top: string;
+          translate: string;
+        };
+        "use:drag": {
+          enabled: boolean;
+          preventDefault: boolean;
+          stopPropagation: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+        id: string;
+        role: string;
+      };
+    };
+    grid: {
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-axis": "horizontal" | "vertical";
+        "data-dragging": string | undefined;
+        id: string;
+      };
+    };
+  };
+  commands: {
+    setZoom: {
+      event: ([zoom]: [zoom: number]) => {
+        type: "SET_ZOOM";
+        zoom: number;
+      };
+    };
+    zoomBy: {
+      event: ([delta]: [delta: number], context: ImageCropperContext) => {
+        type: "SET_ZOOM";
+        zoom: number;
+      };
+    };
+    setRotation: {
+      event: ([rotation]: [rotation: number]) => {
+        type: "SET_ROTATION";
+        rotation: number;
+      };
+    };
+    rotateBy: {
+      event: ([degrees]: [degrees: number], context: ImageCropperContext) => {
+        type: "SET_ROTATION";
+        rotation: number;
+      };
+    };
+    setFlip: {
+      event: (args: readonly unknown[]) => {
+        vertical?: boolean | undefined;
+        horizontal?: boolean | undefined;
+        type: "SET_FLIP";
+      };
+    };
+    flipHorizontal: {
+      event: (args: readonly unknown[], context: ImageCropperContext) => {
+        type: "SET_FLIP";
+        horizontal: boolean;
+      };
+    };
+    flipVertical: {
+      event: (args: readonly unknown[], context: ImageCropperContext) => {
+        type: "SET_FLIP";
+        vertical: boolean;
+      };
+    };
+    resize: {
+      event: (args: readonly unknown[]) => {
+        type: "RESIZE_CROP";
+        handlePosition: CropHandle;
+        delta: {
+          x: number;
+          y: number;
+        };
+      };
+    };
+    reset: {
+      event: () => {
+        type: "RESET";
+      };
+    };
+  };
+  readers: {
+    handles: {
+      read: () => readonly CropHandle[];
+    };
+    crop: {
+      read: (context: ImageCropperContext) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      };
+    };
+    zoom: {
+      read: (context: ImageCropperContext) => number;
+    };
+    rotation: {
+      read: (context: ImageCropperContext) => number;
+    };
+    flip: {
+      read: (context: ImageCropperContext) => {
+        horizontal: boolean;
+        vertical: boolean;
+      };
+    };
+    dragging: {
+      read: (_context: ImageCropperContext, state: ImageCropperState) => state is "dragging";
+    };
+    panning: {
+      read: (_context: ImageCropperContext, state: ImageCropperState) => state is "panning";
+    };
+    measured: {
+      read: (context: ImageCropperContext) => boolean;
+    };
+  };
+  methods: {
+    getCropData: {
+      call: (context: ImageCropperContext) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      };
+    };
+  };
+  events: {
+    "crop-change": {
+      prop: string;
+      watch: (context: ImageCropperContext) => number[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: ImageCropperContext) => {
+        crop: {
+          x: number;
+          y: number;
+          width: number;
+          height: number;
+        };
+      };
+    };
+    "zoom-change": {
+      prop: string;
+      watch: (context: ImageCropperContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        zoom: number;
+      };
+    };
+    "rotation-change": {
+      prop: string;
+      watch: (context: ImageCropperContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        rotation: number;
+      };
+    };
+    "flip-change": {
+      prop: string;
+      watch: (context: ImageCropperContext) => boolean[];
+      detail: (watched: readonly unknown[]) => {
+        horizontal: boolean;
+        vertical: boolean;
+      };
+    };
+  };
+};
+export type ImageCropperApi = ApiOf<typeof def>;
+export declare const imageCropper: import("@spinjs/runtime").DefinedComponent<ImageCropperApi, ImageCropperArgs>;
+export {};
+//# sourceMappingURL=image-cropper.presentation.d.ts.map