ablok-components 0.3.125 → 0.3.127

package/dist/composables/useCameraCapture.d.ts

@@ -0,0 +1,34 @@
+export interface CaptureOptions {
+    /** Target canvas dimensions; falls back to the source video dimensions. */
+    targetResolution?: {
+        width: number;
+        height: number;
+    } | undefined;
+    /** True when the target ratio was explicitly requested (else derive height from source ratio). */
+    hasExplicitRatio: boolean;
+    /** Crop to the target ratio (cover) instead of letterboxing (contain). */
+    enableCropImage: boolean;
+    /** Digital zoom factor (1 = none). */
+    zoom: number;
+    /** Front-camera mirroring — flip horizontally. */
+    mirror: boolean;
+    /** Portrait-upright correction rotation (0/90/180/270), from useOrientationCorrection. */
+    captureRotation: number;
+    /** Called with the resulting PNG data URL. */
+    onSave: (dataUrl: string) => void;
+}
+/**
+ * Captures the current video frame onto the canvas, honouring ratio cropping,
+ * zoom, mirroring and device-orientation rotation. Pure drawing logic — no
+ * reactivity, trivially unit-testable.
+ */
+export declare function captureFrame(canvas: HTMLCanvasElement, image: HTMLVideoElement, options: CaptureOptions): void;
+/** Runs the canvas-capture pipeline (drawing + optional post-filter) and returns the PNG data URL. */
+export declare function captureToDataUrl(canvas: HTMLCanvasElement, image: HTMLVideoElement, options: CaptureOptions, applyFilter?: (context: CanvasRenderingContext2D, width: number, height: number) => void): string;
+/** Converts a captured data URL into the emitted photo payload. */
+export declare function toPhotoPayload(dataUrl: string): {
+    name: string;
+    id: string;
+    blob: Blob;
+    size: number;
+};

package/dist/composables/useCameraCapture.js

@@ -0,0 +1,53 @@
+import { dataURItoBlob as e } from "../utilities/helpers.js";
+//#region src/composables/useCameraCapture.ts
+function t(e, t, n, r, i, a, o) {
+	let s = e.canvas.width, c = e.canvas.height;
+	e.translate(s / 2, c / 2), o && e.scale(-1, 1), e.rotate(n * Math.PI / 180);
+	let l = c, u = s, d = Math.max(l / r, u / i) * (a && a > 0 ? a : 1), f = r * d, p = i * d;
+	e.drawImage(t, -f / 2, -p / 2, f, p);
+}
+function n(e, n, r) {
+	let i = e.getContext("2d");
+	if (!i) return;
+	let a = n.srcObject instanceof MediaStream ? n.srcObject.getTracks() : [], { aspectRatio: o, width: s, height: c } = a.length ? a[0].getSettings() : {}, l = n?.videoWidth || s || 0, u = n?.videoHeight || c || 0, d = l && u ? l / u : o, f = r.targetResolution || {
+		width: l,
+		height: u
+	}, p = f?.width || l, m = r.hasExplicitRatio ? f?.height || u : Math.round(p / (d || 1)), h = p / m;
+	if (e.width = p, e.height = m, !l || !u || !d) return;
+	let g = r.zoom, _ = r.mirror;
+	if (i.save(), r.captureRotation === 90 || r.captureRotation === 270) {
+		t(i, n, r.captureRotation, l, u, g, _), i.restore();
+		return;
+	}
+	if (r.captureRotation === 180 && (i.translate(e.width, e.height), i.scale(-1, -1)), _ && (i.translate(e.width, 0), i.scale(-1, 1)), r.enableCropImage) {
+		let t = 0, r = 0, a = l, o = u;
+		if (d > h ? (a = u * h, t = (l - a) / 2) : d < h && (o = l / h, r = (u - o) / 2), g && g !== 1) {
+			let e = a / g, n = o / g;
+			t += (a - e) / 2, r += (o - n) / 2, a = e, o = n;
+		}
+		i.drawImage(n, t, r, a, o, 0, 0, e.width, e.height);
+	} else {
+		let t = e.width, r = e.height, a = 0, o = 0;
+		if (d > h ? (r = e.width / d, o = (e.height - r) / 2) : d < h && (t = e.height * d, a = (e.width - t) / 2), g && g !== 1) {
+			let s = l / g, c = u / g, d = (l - s) / 2, f = (u - c) / 2;
+			_ && (a = e.width - a - t), i.drawImage(n, d, f, s, c, a, o, t, r);
+		} else _ && (a = e.width - a - t), i.drawImage(n, 0, 0, l, u, a, o, t, r);
+	}
+	i.restore();
+}
+function r(e, t, r, i) {
+	n(e, t, r);
+	let a = e.getContext("2d");
+	return a && i && i(a, e.width, e.height), e.toDataURL("image/png");
+}
+function i(t) {
+	let n = e(t), r = `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`;
+	return {
+		name: r,
+		id: r,
+		blob: n,
+		size: n.size
+	};
+}
+//#endregion
+export { n as captureFrame, r as captureToDataUrl, i as toPhotoPayload };

package/dist/composables/useOrientationCorrection.d.ts

@@ -0,0 +1,27 @@
+import { ComputedRef, Ref } from '../../vue/dist/vue.esm-bundler.js';
+/**
+ * Device-orientation correction for rotation-locked pages.
+ *
+ * When the page is rotation-locked, the OS bakes a portrait-up OR portrait-down
+ * (0°/180°) orientation into the camera buffer based on gravity. That affects the
+ * preview AND the captured canvas identically. `orientationFlip` is true only while
+ * the device is actually held in landscape (in-plane gravity near ±90°), where the
+ * buffer arrives upside-down relative to the device frame; the preview counter-rotates
+ * with a 180° rotation. Portrait-up and portrait-down are left untouched. Hysteresis
+ * around the band edges prevents flicker.
+ *
+ * `previewReady` gates the preview until the correction is live (motion permission
+ * granted + first sensor reading applied). A safety timeout prevents the preview
+ * from being blocked forever if permission is denied or never granted.
+ */
+export declare function useOrientationCorrection(enabled: () => boolean): {
+    motionEnabled: Ref<boolean, boolean>;
+    orientationFlip: Ref<boolean>;
+    lastGravityAngle: Ref<number | null, number | null>;
+    orientationReady: Ref<boolean, boolean>;
+    requiresGate: ComputedRef<boolean>;
+    enableMotion: () => Promise<void>;
+    armGate: () => void;
+    getCaptureRotation: () => number;
+    dispose: () => void;
+};

package/dist/composables/useOrientationCorrection.js

@@ -0,0 +1,66 @@
+import { computed as e, ref as t } from "vue";
+//#region src/composables/useOrientationCorrection.ts
+function n(n) {
+	let r = t(!1), i = t(!1), a = t(null), o = t(!1), s, c, l = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), u = e(() => n() && l);
+	function d() {
+		c &&= (window.removeEventListener("pointerdown", c, !0), window.removeEventListener("touchend", c, !0), void 0);
+	}
+	function f() {
+		o.value = !0, s &&= (clearTimeout(s), void 0), d();
+	}
+	function p() {
+		c || (c = () => {
+			h();
+		}, window.addEventListener("pointerdown", c, !0), window.addEventListener("touchend", c, !0));
+	}
+	function m(e) {
+		let t = e.accelerationIncludingGravity;
+		if (!t || t.x == null || t.y == null) return;
+		let n = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
+		if (a.value = n, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait")) i.value = !1;
+		else {
+			let e = Math.abs(Math.abs(n) - 90);
+			!i.value && e < 40 ? i.value = !0 : i.value && e > 50 && (i.value = !1);
+		}
+		o.value || f();
+	}
+	async function h() {
+		if (!(!n() || r.value)) try {
+			let e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
+			if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
+				f();
+				return;
+			}
+			t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", m, !0), r.value = !0, d();
+		} catch (e) {
+			console.error(e, "enableMotion: failed"), f();
+		}
+	}
+	function g() {
+		if (!u.value) return;
+		s = setTimeout(f, 3e3);
+		let e = window.DeviceOrientationEvent;
+		e && typeof e.requestPermission == "function" ? p() : h();
+	}
+	function _() {
+		if (!n() || a.value == null) return 0;
+		let e = ((a.value - 180) % 360 + 360) % 360;
+		return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
+	}
+	function v() {
+		window.removeEventListener("devicemotion", m, !0), s && clearTimeout(s), d();
+	}
+	return {
+		motionEnabled: r,
+		orientationFlip: i,
+		lastGravityAngle: a,
+		orientationReady: o,
+		requiresGate: u,
+		enableMotion: h,
+		armGate: g,
+		getCaptureRotation: _,
+		dispose: v
+	};
+}
+//#endregion
+export { n as useOrientationCorrection };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.125",
+  "version": "0.3.127",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",