@ptengine/inline-editor 0.0.0-stage → 0.1.0

package/dist/kernel/useMobileFit.js

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { measureDocument, observeDocumentSize, setStyleLayer } from './canvasCommands.js';
+import { hasCanvasCapability } from './canvasCapabilities.js';
+import { MOBILE_FIT_LAYER, MOBILE_FIT_ORDER, RENDER_FIXES_LAYER, RENDER_FIXES_ORDER, buildFitCss, buildRenderFixesCss, planMobileFit } from './mobileFit.js';
+const IDLE = { sessionId: null, scale: 1, naturalWidth: null, naturalHeight: null };
+async function refit(run, setState) {
+    let m = await measureDocument(run.sessionId, { excludeLayers: [MOBILE_FIT_LAYER] });
+    if (run.cancelled)
+        return;
+    const fixesCss = buildRenderFixesCss(m);
+    if (fixesCss !== run.fixesCss) {
+        await setStyleLayer(run.sessionId, RENDER_FIXES_LAYER, fixesCss, RENDER_FIXES_ORDER);
+        run.fixesCss = fixesCss;
+        if (run.cancelled)
+            return;
+        m = await measureDocument(run.sessionId, { excludeLayers: [MOBILE_FIT_LAYER] });
+        if (run.cancelled)
+            return;
+    }
+    const plan = planMobileFit(m);
+    await setStyleLayer(run.sessionId, MOBILE_FIT_LAYER, plan.css, MOBILE_FIT_ORDER);
+    if (run.cancelled)
+        return;
+    run.rawWidth = plan.rawWidth;
+    run.naturalWidth = plan.width;
+    run.naturalHeight = plan.height;
+    run.scale = plan.scale;
+    setState({
+        sessionId: run.sessionId,
+        scale: plan.scale,
+        naturalWidth: plan.width,
+        naturalHeight: plan.height
+    });
+}
+async function refitHeight(run, height, setState) {
+    run.naturalHeight = height;
+    if (run.scale >= 1)
+        return;
+    await setStyleLayer(run.sessionId, MOBILE_FIT_LAYER, buildFitCss(run.naturalWidth, height, run.scale), MOBILE_FIT_ORDER);
+    if (run.cancelled)
+        return;
+    setState({
+        sessionId: run.sessionId,
+        scale: run.scale,
+        naturalWidth: run.naturalWidth,
+        naturalHeight: height
+    });
+}
+function enqueue(run, step) {
+    run.chain = run.chain.then(step).catch(() => {
+    });
+}
+export function useMobileFit(input) {
+    const [settled, setState] = useState(IDLE);
+    const runRef = useRef(null);
+    const capsRef = useRef(input.capabilities);
+    capsRef.current = input.capabilities;
+    const active = input.domReady &&
+        input.device === 'mobile' &&
+        !!input.sessionId &&
+        hasCanvasCapability(input.capabilities, 'measureDocument') &&
+        hasCanvasCapability(input.capabilities, 'setStyleLayer');
+    const sessionId = input.sessionId;
+    useEffect(() => {
+        runRef.current = null;
+        if (!active || !sessionId)
+            return;
+        const run = {
+            sessionId,
+            cancelled: false,
+            chain: Promise.resolve(),
+            rawWidth: null,
+            naturalWidth: 0,
+            naturalHeight: 0,
+            scale: 1,
+            fixesCss: '',
+            seq: -1
+        };
+        runRef.current = run;
+        const guardedSetState = (s) => {
+            if (!run.cancelled)
+                setState(s);
+        };
+        enqueue(run, async () => {
+            try {
+                await refit(run, guardedSetState);
+            }
+            catch {
+                guardedSetState({ ...IDLE, sessionId });
+                return;
+            }
+            if (run.cancelled)
+                return;
+            if (!hasCanvasCapability(capsRef.current, 'observeDocumentSize'))
+                return;
+            await observeDocumentSize(sessionId, {
+                enabled: true,
+                excludeLayers: [MOBILE_FIT_LAYER]
+            });
+        });
+        return () => {
+            run.cancelled = true;
+        };
+    }, [active, sessionId]);
+    const onDocumentSize = useCallback((payload) => {
+        const run = runRef.current;
+        if (!run || run.cancelled)
+            return;
+        if (typeof payload.seq === 'number') {
+            if (payload.seq <= run.seq)
+                return;
+            run.seq = payload.seq;
+        }
+        if (run.rawWidth === null)
+            return;
+        const rawWidth = Math.max(payload.html.scrollWidth, payload.body?.scrollWidth ?? 0);
+        const height = Math.max(payload.html.scrollHeight, payload.body?.scrollHeight ?? 0);
+        const guardedSetState = (s) => {
+            if (!run.cancelled)
+                setState(s);
+        };
+        if (rawWidth !== run.rawWidth) {
+            enqueue(run, () => refit(run, guardedSetState));
+        }
+        else if (height !== run.naturalHeight) {
+            enqueue(run, () => refitHeight(run, height, guardedSetState));
+        }
+    }, []);
+    const pending = active && settled.sessionId !== sessionId;
+    const state = useMemo(() => settled.sessionId === sessionId
+        ? {
+            scale: settled.scale,
+            naturalWidth: settled.naturalWidth,
+            naturalHeight: settled.naturalHeight,
+            pending
+        }
+        : { scale: 1, naturalWidth: null, naturalHeight: null, pending }, [settled, sessionId, pending]);
+    return { state, onDocumentSize };
+}