@pallasoft/ps-file-components 1.2.4 → 1.4.0

package/dist/esm/constants/ps-file-picker-labels.js

@@ -1,5 +1,6 @@
 export const PsFilePickerLabels = {
     browse: 'or click to browse your files',
+    browseTouch: 'or tap to choose from your device',
     dropActive: 'Drop to upload',
     formats: 'Accepted formats:',
     invalidType: 'is not a supported file type.',

package/dist/esm/constants/ps-scan-camera-status.js

@@ -0,0 +1,6 @@
+export const PsScanCameraStatus = {
+    Denied: 'denied',
+    Ready: 'ready',
+    Starting: 'starting',
+    Unavailable: 'unavailable',
+};

package/dist/esm/constants/ps-scan-config.js

@@ -0,0 +1,31 @@
+export const PsScanConfig = {
+    adaptiveRatio: 0.92,
+    adaptiveWindowDivisor: 16,
+    adaptiveWindowMin: 15,
+    capturedJpegQuality: 0.92,
+    cornerNudge: 0.005,
+    cornerNudgeLarge: 0.025,
+    decodeMaxDimension: 3000,
+    defaultFileName: 'scan',
+    defaultJpegQuality: 0.82,
+    defaultMaxDimension: 2000,
+    defaultMaxPages: 30,
+    detectDilations: 2,
+    detectMaxDimension: 320,
+    detectMinAreaRatio: 0.12,
+    detectMaxAreaRatio: 0.995,
+    detectMinEdgeStrength: 24,
+    detectMinHullFill: 0.85,
+    detectPercentile: 0.98,
+    detectRelativeStrength: 0.3,
+    hullCandidateLimit: 18,
+    levelHighPercentile: 0.99,
+    levelLowPercentile: 0.01,
+    minCornerGap: 0.02,
+    pdfDpi: 150,
+    pdfPointsPerInch: 72,
+    previewDebounceMs: 120,
+    previewMaxDimension: 1400,
+    thumbnailHeight: 56,
+    torchConstraint: 'torch',
+};

package/dist/esm/constants/ps-scan-corner-order.js

@@ -0,0 +1 @@
+export const PsScanCornerOrder = ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'];

package/dist/esm/constants/ps-scan-filter.js

@@ -0,0 +1,6 @@
+export const PsScanFilter = {
+    Colour: 'colour',
+    Document: 'document',
+    Greyscale: 'greyscale',
+    Original: 'original',
+};

package/dist/esm/constants/ps-scan-output-format.js

@@ -0,0 +1,4 @@
+export const PsScanOutputFormat = {
+    Jpeg: 'jpeg',
+    Pdf: 'pdf',
+};

package/dist/esm/constants/ps-scan-step.js

@@ -0,0 +1,5 @@
+export const PsScanStep = {
+    Camera: 'camera',
+    Crop: 'crop',
+    Review: 'review',
+};

package/dist/esm/hooks/use-ps-focus-trap.js

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+export const usePsFocusTrap = (ref, isActive, onEscape) => {
+    useEffect(() => {
+        if (!isActive || ref.current === null)
+            return;
+        const dialog = ref.current.closest('[role="dialog"]');
+        const root = dialog === null ? ref.current : dialog;
+        const focusable = () => Array.from(root.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((element) => element.offsetParent !== null || element === document.activeElement);
+        if (!root.contains(document.activeElement)) {
+            root.setAttribute('tabindex', '-1');
+            root.focus({ preventScroll: true });
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                onEscape();
+                return;
+            }
+            if (event.key !== 'Tab')
+                return;
+            const items = focusable();
+            if (items.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const current = document.activeElement;
+            if (!root.contains(current)) {
+                event.preventDefault();
+                first.focus();
+            }
+            else if (event.shiftKey && (current === first || current === root)) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && current === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+    }, [isActive, onEscape]);
+};

package/dist/esm/hooks/use-ps-scan-camera.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
+import { PsScanConfig } from '../constants/ps-scan-config';
+import { PsScanCameraService } from '../services/ps-scan-camera-service';
+import { PsScanCanvasService } from '../services/ps-scan-canvas-service';
+export const usePsScanCamera = (isActive) => {
+    const videoRef = useRef(null);
+    const sessionRef = useRef(null);
+    const [status, setStatus] = useState(PsScanCameraStatus.Starting);
+    const [canTorch, setCanTorch] = useState(false);
+    const [isTorchOn, setIsTorchOn] = useState(false);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        let isCancelled = false;
+        setIsTorchOn(false);
+        if (!PsScanCameraService.isSupported()) {
+            setStatus(PsScanCameraStatus.Unavailable);
+            return;
+        }
+        setStatus(PsScanCameraStatus.Starting);
+        PsScanCameraService.open()
+            .then(async (session) => {
+            if (isCancelled) {
+                PsScanCameraService.stop(session.stream);
+                return;
+            }
+            sessionRef.current = session;
+            setCanTorch(session.canTorch);
+            const video = videoRef.current;
+            if (video !== null) {
+                video.srcObject = session.stream;
+                await video.play().catch(() => undefined);
+            }
+            setStatus(PsScanCameraStatus.Ready);
+        })
+            .catch((error) => {
+            if (!isCancelled)
+                setStatus(PsScanCameraService.classify(error));
+        });
+        return () => {
+            isCancelled = true;
+            PsScanCameraService.stop(sessionRef.current === null ? null : sessionRef.current.stream);
+            sessionRef.current = null;
+            if (videoRef.current !== null)
+                videoRef.current.srcObject = null;
+        };
+    }, [isActive]);
+    const toggleTorch = useCallback(async () => {
+        const session = sessionRef.current;
+        if (session === null)
+            return;
+        setIsTorchOn(await PsScanCameraService.setTorch(session.track, !isTorchOn));
+    }, [isTorchOn]);
+    const capture = useCallback(async () => {
+        const video = videoRef.current;
+        if (video === null || video.videoWidth === 0)
+            return null;
+        return await PsScanCanvasService.fromVideo(video, PsScanConfig.capturedJpegQuality);
+    }, []);
+    return { canTorch, capture, isTorchOn, status, toggleTorch, videoRef };
+};

package/dist/esm/hooks/use-ps-scan-pages.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsScanFilter } from '../constants/ps-scan-filter';
+import { PsScanOrderService } from '../services/ps-scan-order-service';
+import { PsScanPipelineService } from '../services/ps-scan-pipeline-service';
+export const usePsScanPages = () => {
+    const [pages, setPages] = useState([]);
+    const urls = useRef(new Set());
+    const counter = useRef(0);
+    useEffect(() => () => {
+        urls.current.forEach((url) => URL.revokeObjectURL(url));
+        urls.current.clear();
+    }, []);
+    const build = useCallback(async (source) => {
+        const prepared = await PsScanPipelineService.prepare(source);
+        const sourceUrl = URL.createObjectURL(source);
+        counter.current += 1;
+        urls.current.add(sourceUrl);
+        return {
+            isDetected: prepared.isDetected,
+            page: {
+                corners: prepared.corners,
+                filter: PsScanFilter.Document,
+                height: prepared.height,
+                id: `scan-page-${counter.current}`,
+                rotation: 0,
+                source,
+                sourceUrl,
+                width: prepared.width,
+            },
+        };
+    }, []);
+    const add = useCallback(async (sources) => {
+        const built = [];
+        for (const source of sources)
+            built.push(await build(source));
+        setPages((current) => [...current, ...built.map((item) => item.page)]);
+        return built;
+    }, [build]);
+    const replace = useCallback(async (id, source) => {
+        const built = await build(source);
+        setPages((current) => current.map((page) => {
+            if (page.id !== id)
+                return page;
+            URL.revokeObjectURL(page.sourceUrl);
+            urls.current.delete(page.sourceUrl);
+            return { ...built.page, filter: page.filter, id: page.id };
+        }));
+        return built;
+    }, [build]);
+    const update = useCallback((id, patch) => setPages((current) => current.map((page) => (page.id === id ? { ...page, ...patch } : page))), []);
+    const setCorners = useCallback((id, corners) => update(id, { corners }), [update]);
+    const remove = useCallback((id) => setPages((current) => {
+        const target = current.find((page) => page.id === id);
+        if (target !== undefined) {
+            URL.revokeObjectURL(target.sourceUrl);
+            urls.current.delete(target.sourceUrl);
+        }
+        return current.filter((page) => page.id !== id);
+    }), []);
+    const move = useCallback((from, to) => setPages((current) => PsScanOrderService.move(current, from, to)), []);
+    return { add, move, pages, remove, replace, setCorners, update };
+};

package/dist/esm/hooks/use-ps-scan-previews.js

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import { PsScanConfig } from '../constants/ps-scan-config';
+import { PsScanCanvasService } from '../services/ps-scan-canvas-service';
+import { PsScanPipelineService } from '../services/ps-scan-pipeline-service';
+export const usePsScanPreviews = (pages) => {
+    const rasters = useRef(new Map());
+    const urls = useRef(new Map());
+    const [previews, setPreviews] = useState({});
+    const signature = pages
+        .map((page) => `${page.id}:${page.filter}:${page.rotation}:${page.corners.map((point) => `${point.x.toFixed(4)},${point.y.toFixed(4)}`).join(';')}`)
+        .join('|');
+    useEffect(() => {
+        let isCancelled = false;
+        const timer = setTimeout(async () => {
+            const stale = [];
+            for (const page of pages) {
+                if (isCancelled)
+                    return;
+                let raster = rasters.current.get(page.id);
+                if (raster === undefined) {
+                    raster = await PsScanPipelineService.measure(page.source);
+                    rasters.current.set(page.id, raster);
+                }
+                const processed = PsScanPipelineService.process(page, raster, PsScanConfig.previewMaxDimension);
+                const blob = await PsScanCanvasService.encode(processed, PsScanConfig.defaultJpegQuality);
+                if (isCancelled)
+                    return;
+                const previous = urls.current.get(page.id);
+                if (previous !== undefined)
+                    stale.push(previous);
+                urls.current.set(page.id, URL.createObjectURL(blob));
+            }
+            if (isCancelled)
+                return;
+            const ids = new Set(pages.map((page) => page.id));
+            urls.current.forEach((url, id) => {
+                if (ids.has(id))
+                    return;
+                stale.push(url);
+                urls.current.delete(id);
+                rasters.current.delete(id);
+            });
+            setPreviews(Object.fromEntries(urls.current));
+            setTimeout(() => stale.forEach((url) => URL.revokeObjectURL(url)), 1000);
+        }, PsScanConfig.previewDebounceMs);
+        return () => {
+            isCancelled = true;
+            clearTimeout(timer);
+        };
+    }, [signature]);
+    useEffect(() => () => {
+        urls.current.forEach((url) => URL.revokeObjectURL(url));
+        urls.current.clear();
+        rasters.current.clear();
+    }, []);
+    return previews;
+};

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export * from './components/ps-file-list';
 export * from './components/ps-file-picker';
 export * from './components/ps-file-viewer-button';
 export * from './components/ps-file-viewer-content';
+export * from './components/ps-file-viewer-pane';
 export * from './components/ps-file-viewer';
 export * from './components/ps-highlighted-text';
 export * from './components/ps-image-viewer';
@@ -39,6 +40,7 @@ export * from './models/ps-file-selection';
 export * from './models/ps-file-text-state';
 export * from './models/ps-file-viewer-button-tone';
 export * from './models/ps-file-viewer-content-props';
+export * from './models/ps-file-viewer-pane-props';
 export * from './models/ps-label-set';
 export * from './models/ps-page-size';
 export * from './models/ps-pdf-match';
@@ -67,3 +69,8 @@ export * from './hooks/use-ps-active-match-scroll';
 export * from './hooks/use-ps-file-text';
 export * from './hooks/use-ps-in-view';
 export * from './hooks/use-ps-upload-queue';
+export * from './components/ps-document-scanner';
+export * from './constants/ps-document-scanner-labels';
+export * from './constants/ps-scan-filter';
+export * from './constants/ps-scan-output-format';
+export * from './models/ps-document-scanner-props';

package/dist/esm/models/ps-document-scanner-props.js

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

package/dist/esm/models/ps-document-scanner-sheet-props.js

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

package/dist/esm/models/ps-file-viewer-pane-props.js

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

package/dist/esm/models/ps-scan-added-page.js

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

package/dist/esm/models/ps-scan-camera-session.js

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

package/dist/esm/models/ps-scan-decoded-image.js

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

package/dist/esm/models/ps-scan-levels.js

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

package/dist/esm/models/ps-scan-output-options.js

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

package/dist/esm/models/ps-scan-page.js

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

package/dist/esm/models/ps-scan-pdf-page.js

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

package/dist/esm/models/ps-scan-prepared.js

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

package/dist/esm/models/ps-scan-quad.js

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

package/dist/esm/models/ps-scan-raster.js

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

package/dist/esm/models/ps-scan-rendered-page.js

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

package/dist/esm/services/ps-scan-camera-service.js

@@ -0,0 +1,50 @@
+import { PsScanCameraStatus } from '../constants/ps-scan-camera-status';
+import { PsScanConfig } from '../constants/ps-scan-config';
+export class PsScanCameraService {
+    static classify(error) {
+        const name = typeof error === 'object' && error !== null && 'name' in error ? String(error.name) : '';
+        return name === 'NotAllowedError' ||
+            name === 'SecurityError' ||
+            name === 'PermissionDeniedError'
+            ? PsScanCameraStatus.Denied
+            : PsScanCameraStatus.Unavailable;
+    }
+    static isSupported() {
+        return (typeof navigator !== 'undefined' &&
+            typeof navigator.mediaDevices !== 'undefined' &&
+            typeof navigator.mediaDevices.getUserMedia === 'function');
+    }
+    static async open() {
+        const stream = await navigator.mediaDevices.getUserMedia({
+            audio: false,
+            video: {
+                facingMode: { ideal: 'environment' },
+                height: { ideal: 1440 },
+                width: { ideal: 1920 },
+            },
+        });
+        const track = stream.getVideoTracks()[0];
+        return { canTorch: PsScanCameraService.supportsTorch(track), stream, track };
+    }
+    static async setTorch(track, isOn) {
+        try {
+            await track.applyConstraints({
+                advanced: [{ [PsScanConfig.torchConstraint]: isOn }],
+            });
+            return isOn;
+        }
+        catch {
+            return false;
+        }
+    }
+    static stop(stream) {
+        if (stream === null)
+            return;
+        stream.getTracks().forEach((track) => track.stop());
+    }
+    static supportsTorch(track) {
+        if (track === undefined || typeof track.getCapabilities !== 'function')
+            return false;
+        return PsScanConfig.torchConstraint in track.getCapabilities();
+    }
+}

package/dist/esm/services/ps-scan-canvas-service.js

@@ -0,0 +1,46 @@
+import { PsScanGeometryService } from './ps-scan-geometry-service';
+export class PsScanCanvasService {
+    static async decode(blob, maxDimension) {
+        const bitmap = await createImageBitmap(blob, { imageOrientation: 'from-image' });
+        const size = PsScanGeometryService.fitWithin({ height: bitmap.height, width: bitmap.width }, maxDimension);
+        const context = PsScanCanvasService.context(size.width, size.height);
+        context.drawImage(bitmap, 0, 0, size.width, size.height);
+        const naturalHeight = bitmap.height;
+        const naturalWidth = bitmap.width;
+        bitmap.close();
+        return {
+            naturalHeight,
+            naturalWidth,
+            raster: context.getImageData(0, 0, size.width, size.height),
+        };
+    }
+    static async encode(raster, quality) {
+        const context = PsScanCanvasService.context(raster.width, raster.height);
+        context.putImageData(new ImageData(raster.data, raster.width, raster.height), 0, 0);
+        const canvas = context.canvas;
+        if (canvas instanceof HTMLCanvasElement)
+            return await new Promise((resolve, reject) => canvas.toBlob((blob) => (blob === null ? reject(new Error('encode')) : resolve(blob)), 'image/jpeg', quality));
+        return await canvas.convertToBlob({ quality, type: 'image/jpeg' });
+    }
+    static async fromVideo(video, quality) {
+        const context = PsScanCanvasService.context(video.videoWidth, video.videoHeight);
+        context.drawImage(video, 0, 0);
+        return await PsScanCanvasService.encode(context.getImageData(0, 0, video.videoWidth, video.videoHeight), quality);
+    }
+    static context(width, height) {
+        if (typeof OffscreenCanvas !== 'undefined') {
+            const context = new OffscreenCanvas(width, height).getContext('2d', {
+                willReadFrequently: true,
+            });
+            if (context !== null)
+                return context;
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        if (context === null)
+            throw new Error('canvas');
+        return context;
+    }
+}

package/dist/esm/services/ps-scan-edge-service.js

@@ -0,0 +1,156 @@
+import { PsScanConfig } from '../constants/ps-scan-config';
+import { PsScanGeometryService } from './ps-scan-geometry-service';
+import { PsScanHullService } from './ps-scan-hull-service';
+import { PsScanImageFilterService } from './ps-scan-image-filter-service';
+import { PsScanRasterService } from './ps-scan-raster-service';
+export class PsScanEdgeService {
+    static detect(source) {
+        const scale = Math.min(1, PsScanConfig.detectMaxDimension / Math.max(source.width, source.height));
+        const width = Math.max(8, Math.round(source.width * scale));
+        const height = Math.max(8, Math.round(source.height * scale));
+        const raster = PsScanRasterService.resize(source, width, height);
+        const gray = PsScanImageFilterService.blur(PsScanImageFilterService.grayscale(raster), width, height);
+        const edges = PsScanImageFilterService.sobel(gray, width, height);
+        let mask = PsScanEdgeService.threshold(edges);
+        for (let step = 0; step < PsScanConfig.detectDilations; step += 1)
+            mask = PsScanEdgeService.dilate(mask, width, height);
+        const foreground = PsScanEdgeService.foreground(mask, width, height);
+        const component = PsScanEdgeService.largestComponent(foreground, width, height);
+        if (component.length < 8)
+            return null;
+        const hull = PsScanHullService.convexHull(component);
+        if (hull.length < 4)
+            return null;
+        const quad = PsScanGeometryService.order(PsScanHullService.bestQuad(hull));
+        const imageArea = width * height;
+        const quadArea = PsScanGeometryService.area(quad);
+        const hullArea = PsScanGeometryService.area(hull);
+        if (quadArea / imageArea < PsScanConfig.detectMinAreaRatio)
+            return null;
+        if (quadArea / imageArea > PsScanConfig.detectMaxAreaRatio)
+            return null;
+        if (hullArea > 0 && quadArea / hullArea < PsScanConfig.detectMinHullFill)
+            return null;
+        if (!PsScanGeometryService.isConvex(quad))
+            return null;
+        return quad.map((point) => ({
+            x: Math.min(1, Math.max(0, point.x / (width - 1))),
+            y: Math.min(1, Math.max(0, point.y / (height - 1))),
+        }));
+    }
+    static dilate(mask, width, height) {
+        const out = new Uint8Array(mask.length);
+        for (let y = 0; y < height; y += 1)
+            for (let x = 0; x < width; x += 1) {
+                if (mask[y * width + x] === 0)
+                    continue;
+                for (let dy = -1; dy <= 1; dy += 1)
+                    for (let dx = -1; dx <= 1; dx += 1) {
+                        const nx = x + dx;
+                        const ny = y + dy;
+                        if (nx >= 0 && ny >= 0 && nx < width && ny < height)
+                            out[ny * width + nx] = 1;
+                    }
+            }
+        return out;
+    }
+    static foreground(mask, width, height) {
+        const background = new Uint8Array(mask.length);
+        const stack = [];
+        const seed = (index) => {
+            if (mask[index] === 0 && background[index] === 0) {
+                background[index] = 1;
+                stack.push(index);
+            }
+        };
+        for (let x = 0; x < width; x += 1) {
+            seed(x);
+            seed((height - 1) * width + x);
+        }
+        for (let y = 0; y < height; y += 1) {
+            seed(y * width);
+            seed(y * width + width - 1);
+        }
+        while (stack.length > 0) {
+            const index = stack.pop();
+            if (index === undefined)
+                break;
+            const x = index % width;
+            const y = (index - x) / width;
+            if (x > 0)
+                seed(index - 1);
+            if (x < width - 1)
+                seed(index + 1);
+            if (y > 0)
+                seed(index - width);
+            if (y < height - 1)
+                seed(index + width);
+        }
+        return background.map((value) => 1 - value);
+    }
+    static largestComponent(mask, width, height) {
+        const seen = new Uint8Array(mask.length);
+        let best = [];
+        let bestSize = 0;
+        for (let start = 0; start < mask.length; start += 1) {
+            if (mask[start] === 0 || seen[start] === 1)
+                continue;
+            const members = [];
+            const stack = [start];
+            let size = 0;
+            seen[start] = 1;
+            while (stack.length > 0) {
+                const index = stack.pop();
+                if (index === undefined)
+                    break;
+                const x = index % width;
+                const y = (index - x) / width;
+                let isBoundary = false;
+                size += 1;
+                for (let dy = -1; dy <= 1; dy += 1)
+                    for (let dx = -1; dx <= 1; dx += 1) {
+                        if (dx === 0 && dy === 0)
+                            continue;
+                        const nx = x + dx;
+                        const ny = y + dy;
+                        if (nx < 0 || ny < 0 || nx >= width || ny >= height) {
+                            isBoundary = true;
+                            continue;
+                        }
+                        const next = ny * width + nx;
+                        if (mask[next] === 0)
+                            isBoundary = true;
+                        else if (seen[next] === 0) {
+                            seen[next] = 1;
+                            stack.push(next);
+                        }
+                    }
+                if (isBoundary)
+                    members.push({ x, y });
+            }
+            if (size > bestSize) {
+                bestSize = size;
+                best = members;
+            }
+        }
+        return best;
+    }
+    static threshold(edges) {
+        const bins = new Uint32Array(512);
+        edges.forEach((value) => {
+            bins[Math.min(511, value)] += 1;
+        });
+        const target = edges.length * PsScanConfig.detectPercentile;
+        let cumulative = 0;
+        let high = 0;
+        for (let bin = 0; bin < bins.length; bin += 1) {
+            cumulative += bins[bin];
+            if (cumulative >= target) {
+                high = bin;
+                break;
+            }
+        }
+        const limit = Math.max(PsScanConfig.detectMinEdgeStrength, high * PsScanConfig.detectRelativeStrength);
+        return Uint8Array.from(edges, (value) => (value >= limit ? 1 : 0));
+    }
+}