@ai-markdown/core 3.4.0 → 3.4.2

package/dist/components/index.cjs

@@ -696,9 +696,14 @@ function imageTransformStyle(transform) {
 	const { x, y, scale, rotate, flipX, flipY } = transform;
 	return `translate3d(${x}px, ${y}px, 0) scale3d(${flipX ? "-" : ""}${scale}, ${flipY ? "-" : ""}${scale}, 1) rotate(${rotate}deg)`;
 }
-function zoomImage(transform, ratio, geometry, centerX = geometry.viewportWidth / 2, centerY = geometry.viewportHeight / 2, touch = false) {
+const DEFAULT_SCALE_LIMITS = {
+	min: 1,
+	max: 50
+};
+function zoomImage(transform, ratio, geometry, centerX = geometry.viewportWidth / 2, centerY = geometry.viewportHeight / 2, touch = false, limits = DEFAULT_SCALE_LIMITS) {
 	if (!Number.isFinite(ratio) || ratio <= 0) return transform;
-	const scale = Math.min(50, touch ? Math.max(.01, transform.scale * ratio) : Math.max(1, transform.scale * ratio));
+	const floor = touch ? .01 : limits.min;
+	const scale = Math.min(limits.max, Math.max(floor, transform.scale * ratio));
 	const difference = scale / transform.scale - 1;
 	let x = transform.x - difference * (centerX - transform.x - geometry.left - geometry.width / 2);
 	let y = transform.y - difference * (centerY - transform.y - geometry.top - geometry.height / 2);
@@ -710,19 +715,19 @@ function zoomImage(transform, ratio, geometry, centerX = geometry.viewportWidth
 		scale
 	};
 }
-function imageWheelRatio(delta, mode = 0, pinch = false) {
+function imageWheelRatio(delta, mode = 0, pinch = false, step = .5) {
 	if (!Number.isFinite(delta) || delta === 0) return 1;
-	if (pinch) return Math.min(1.5, Math.max(1 / 1.5, Math.exp(-delta / 100)));
+	if (pinch) return Math.min(1 + step, Math.max(1 / (1 + step), Math.exp(-delta / 100)));
 	const pixels = mode === 1 ? delta * 100 / 3 : mode === 2 ? delta * 100 : delta;
-	const ratio = 1 + Math.min(Math.abs(pixels / 100), 1) * .5;
+	const ratio = 1 + Math.min(Math.abs(pixels / 100), 1) * step;
 	return pixels > 0 ? 1 / ratio : ratio;
 }
-function reboundImage(transform, geometry, bounds) {
-	if (transform.scale < 1) return {
+function reboundImage(transform, geometry, bounds, minScale = 1) {
+	if (transform.scale < minScale) return {
 		...transform,
 		x: 0,
 		y: 0,
-		scale: 1
+		scale: minScale
 	};
 	const rotated = transform.rotate % 180 !== 0;
 	const width = (rotated ? geometry.height : geometry.width) * transform.scale;
@@ -754,9 +759,8 @@ function imagePinchCenter(oldA, oldB, a, b) {
 		y: oldA.y + ratio * (oldB.y - oldA.y)
 	};
 }
-const ZOOM_STEP = 1.5;
-const MAX_SCALE = 50;
 const CLOSE_MS = 300;
+const positive = (value, fallback) => typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
 const closedState = Object.freeze({
 	phase: "closed",
 	items: Object.freeze([]),
@@ -765,19 +769,34 @@ const closedState = Object.freeze({
 	transform: initialImageTransform(),
 	status: "loading",
 	moving: false,
+	movable: true,
+	origin: void 0,
 	canPrevious: false,
 	canNext: false,
 	canZoomIn: false,
 	canZoomOut: false
 });
 function createImagePreviewController(host, publish, options = {}) {
+	const limits = {
+		min: positive(options.minScale, 1),
+		max: 0
+	};
+	limits.max = Math.max(limits.min, positive(options.maxScale, 50));
+	const baseScale = Math.min(limits.max, Math.max(limits.min, 1));
+	const scaleStep = positive(options.scaleStep, .5);
+	const movable = options.movable ?? true;
+	const wheelZoom = options.wheel ?? true;
 	let phase = "closed";
 	let items = [];
 	let selected;
 	let current = -1;
-	let transform = initialImageTransform();
+	let transform = {
+		...initialImageTransform(),
+		scale: baseScale
+	};
 	let status = "loading";
 	let moving = false;
+	let origin;
 	let unsubscribe;
 	let cancelPublish;
 	let cancelOpening;
@@ -796,23 +815,40 @@ function createImagePreviewController(host, publish, options = {}) {
 			transform,
 			status,
 			moving,
+			movable,
+			origin,
 			canPrevious: current > 0,
 			canNext: current < items.length - 1,
-			canZoomIn: ready && transform.scale < MAX_SCALE,
-			canZoomOut: ready && transform.scale > 1
+			canZoomIn: ready && transform.scale < limits.max,
+			canZoomOut: ready && transform.scale > limits.min
 		};
 	};
+	let reported;
+	const flush = () => {
+		publish(snapshot());
+		const action = reported;
+		reported = void 0;
+		if (action) options.onTransform?.({
+			transform,
+			action
+		});
+	};
 	const emit = () => {
 		cancelPublish?.();
 		cancelPublish = void 0;
-		publish(snapshot());
+		flush();
 	};
 	const emitNextFrame = () => {
 		cancelPublish ??= host.frame(() => {
 			cancelPublish = void 0;
-			publish(snapshot());
+			flush();
 		});
 	};
+	const apply = (next, action) => {
+		if (next.x === transform.x && next.y === transform.y && next.scale === transform.scale && next.rotate === transform.rotate && next.flipX === transform.flipX && next.flipY === transform.flipY) return;
+		transform = next;
+		reported = action;
+	};
 	const endGesture = () => {
 		pointers.clear();
 		grip = void 0;
@@ -820,22 +856,26 @@ function createImagePreviewController(host, publish, options = {}) {
 		moving = false;
 	};
 	const startImage = () => {
-		transform = initialImageTransform();
+		transform = {
+			...initialImageTransform(),
+			scale: baseScale
+		};
+		reported = void 0;
 		status = "loading";
 		endGesture();
 	};
-	const zoom = (ratio, x, y, touch = false) => {
+	const zoom = (action, ratio, x, y, touch = false) => {
 		const box = host.geometry();
-		if (box && status === "ready") transform = zoomImage(transform, ratio, box, x, y, touch);
+		if (box && status === "ready") apply(zoomImage(transform, ratio, box, x, y, touch, limits), action);
 	};
 	const rebound = () => {
-		if (transform.scale < 1) {
-			transform = {
+		if (transform.scale < limits.min) {
+			apply({
 				...transform,
 				x: 0,
 				y: 0,
-				scale: 1
-			};
+				scale: limits.min
+			}, "rebound");
 			return;
 		}
 		const box = host.geometry();
@@ -843,18 +883,28 @@ function createImagePreviewController(host, publish, options = {}) {
 		const turned = transform.rotate % 180 !== 0;
 		const width = (turned ? box.height : box.width) * transform.scale;
 		const height = (turned ? box.width : box.height) * transform.scale;
-		transform = reboundImage(transform, box, {
+		apply(reboundImage(transform, box, {
 			left: box.left + box.width / 2 + transform.x - width / 2,
 			top: box.top + box.height / 2 + transform.y - height / 2
-		});
+		}, limits.min), "rebound");
+	};
+	const anchorOf = (id) => {
+		const point = host.anchor?.(id);
+		return point && Number.isFinite(point.x) && Number.isFinite(point.y) ? {
+			x: point.x,
+			y: point.y
+		} : void 0;
 	};
 	const finishClosing = () => {
 		closeTimer = void 0;
 		phase = "closed";
 		items = [];
 		selected = void 0;
+		origin = void 0;
 		current = -1;
+		reported = void 0;
 		emit();
+		options.afterOpenChange?.(false);
 	};
 	const close = () => {
 		if (phase === "closed" || phase === "closing") return;
@@ -863,20 +913,36 @@ function createImagePreviewController(host, publish, options = {}) {
 		unsubscribe?.();
 		unsubscribe = void 0;
 		endGesture();
+		reported = void 0;
+		origin = selected ? anchorOf(selected) : void 0;
 		phase = "closing";
+		const info = {
+			current,
+			item: items[current]
+		};
 		const duration = typeof options.closeDuration === "function" ? options.closeDuration() : options.closeDuration ?? CLOSE_MS;
 		if (duration > 0) {
 			emit();
 			closeTimer = setTimeout(finishClosing, duration);
-		} else finishClosing();
+			options.onOpenChange?.(false, info);
+		} else try {
+			options.onOpenChange?.(false, info);
+		} finally {
+			if (phase === "closing") finishClosing();
+		}
 	};
 	const go = (delta) => {
 		const target = current + delta;
 		if (phase === "closed" || phase === "closing" || target < 0 || target >= items.length || target === current) return;
+		const previous = current;
+		const { x, y, scale, rotate, flipX, flipY } = transform;
+		const transformed = x !== 0 || y !== 0 || scale !== baseScale || rotate !== 0 || flipX || flipY;
 		current = target;
 		selected = items[target].id;
 		startImage();
+		if (transformed) reported = delta < 0 ? "prev" : "next";
 		emit();
+		options.onChange?.(current, previous);
 	};
 	const follow = (gallery) => {
 		const next = gallery.items();
@@ -900,6 +966,7 @@ function createImagePreviewController(host, publish, options = {}) {
 			items = list;
 			current = index;
 			selected = id;
+			origin = anchorOf(id);
 			startImage();
 			unsubscribe = gallery.subscribe(() => follow(gallery));
 			if (phase === "open") {
@@ -907,15 +974,26 @@ function createImagePreviewController(host, publish, options = {}) {
 				return true;
 			}
 			cancelOpening = void 0;
+			const starting = phase !== "opening";
 			phase = "opening";
 			emit();
 			cancelOpening = host.frame(() => {
+				const measured = selected ? anchorOf(selected) : void 0;
+				if (measured?.x !== origin?.x || measured?.y !== origin?.y) {
+					origin = measured;
+					emit();
+				}
 				cancelOpening = host.frame(() => {
 					cancelOpening = void 0;
 					phase = "open";
 					emit();
+					options.afterOpenChange?.(true);
 				});
 			});
+			if (starting) options.onOpenChange?.(true, {
+				current,
+				item: items[current]
+			});
 			return true;
 		},
 		close,
@@ -926,24 +1004,24 @@ function createImagePreviewController(host, publish, options = {}) {
 			if (name === "prev") return go(-1);
 			if (name === "next") return go(1);
 			if (status !== "ready") return;
-			if (name === "zoomIn") zoom(ZOOM_STEP);
-			else if (name === "zoomOut") zoom(1 / ZOOM_STEP);
-			else if (name === "rotateLeft") transform = {
+			if (name === "zoomIn") zoom(name, 1 + scaleStep);
+			else if (name === "zoomOut") zoom(name, 1 / (1 + scaleStep));
+			else if (name === "rotateLeft") apply({
 				...transform,
 				rotate: transform.rotate - 90
-			};
-			else if (name === "rotateRight") transform = {
+			}, name);
+			else if (name === "rotateRight") apply({
 				...transform,
 				rotate: transform.rotate + 90
-			};
-			else if (name === "flipX") transform = {
+			}, name);
+			else if (name === "flipX") apply({
 				...transform,
 				flipX: !transform.flipX
-			};
-			else if (name === "flipY") transform = {
+			}, name);
+			else if (name === "flipY") apply({
 				...transform,
 				flipY: !transform.flipY
-			};
+			}, name);
 			emit();
 		},
 		loaded() {
@@ -958,7 +1036,7 @@ function createImagePreviewController(host, publish, options = {}) {
 			emit();
 		},
 		pointerDown(pointer) {
-			if (phase !== "open" && phase !== "opening" || status !== "ready") return false;
+			if (!movable || phase !== "open" && phase !== "opening" || status !== "ready") return false;
 			if (pointer.button !== void 0 && pointer.button !== 0) return false;
 			if (pointers.size >= 2 && !pointers.has(pointer.id)) return false;
 			pointers.set(pointer.id, {
@@ -985,12 +1063,12 @@ function createImagePreviewController(host, publish, options = {}) {
 				const [a, b] = [...pointers.values()];
 				const span = Math.hypot(before[0].x - before[1].x, before[0].y - before[1].y);
 				const center = imagePinchCenter(before[0], before[1], a, b);
-				if (span > 0) zoom(Math.hypot(a.x - b.x, a.y - b.y) / span, center.x, center.y, true);
-			} else if (grip) transform = {
+				if (span > 0) zoom("pinch", Math.hypot(a.x - b.x, a.y - b.y) / span, center.x, center.y, true);
+			} else if (grip) apply({
 				...transform,
 				x: pointer.x - grip.x,
 				y: pointer.y - grip.y
-			};
+			}, "move");
 			displaced = true;
 			emitNextFrame();
 		},
@@ -1010,20 +1088,20 @@ function createImagePreviewController(host, publish, options = {}) {
 			emit();
 		},
 		wheel(input) {
-			if (phase !== "open" || status !== "ready" || !input.deltaY) return false;
-			zoom(imageWheelRatio(input.deltaY, input.mode, input.pinch), input.x, input.y);
+			if (!wheelZoom || phase !== "open" || status !== "ready" || !input.deltaY) return false;
+			zoom("wheel", imageWheelRatio(input.deltaY, input.mode, input.pinch, scaleStep), input.x, input.y);
 			emitNextFrame();
 			return true;
 		},
 		doubleClick(x, y) {
 			if (phase !== "open" || status !== "ready") return;
-			if (transform.scale !== 1) transform = {
+			if (transform.scale !== baseScale) apply({
 				...transform,
 				x: 0,
 				y: 0,
-				scale: 1
-			};
-			else zoom(ZOOM_STEP, x, y);
+				scale: baseScale
+			}, "doubleClick");
+			else zoom("doubleClick", 1 + scaleStep, x, y);
 			emit();
 		},
 		key(key) {
@@ -1043,7 +1121,9 @@ function createImagePreviewController(host, publish, options = {}) {
 			phase = "closed";
 			items = [];
 			selected = void 0;
+			origin = void 0;
 			current = -1;
+			reported = void 0;
 		}
 	};
 }