@operato/scene-pdf 9.0.0-beta.12

package/README.md

@@ -0,0 +1,41 @@
+# \<scene-pdf>
+
+## Installation
+
+```bash
+npm i scene-pdf
+```
+
+## Usage
+
+```html
+
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/editors/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: never[];
+export default _default;

package/dist/editors/index.js

@@ -0,0 +1,2 @@
+export default [];
+//# sourceMappingURL=index.js.map

package/dist/editors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editors/index.ts"],"names":[],"mappings":"AAAA,eAAe,EAAE,CAAC","sourcesContent":["export default [];\n"]}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import PDFPage from './pdf-page.js';
+declare const _default: (typeof PDFPage)[];
+export default _default;

package/dist/index.js

@@ -0,0 +1,3 @@
+import PDFPage from './pdf-page.js';
+export default [PDFPage];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAA;AACnC,eAAe,CAAC,OAAO,CAAC,CAAA","sourcesContent":["import PDFPage from './pdf-page.js'\nexport default [PDFPage]\n"]}

package/dist/pdf-page.d.ts

@@ -0,0 +1,99 @@
+import { Properties, Shape } from '@hatiolab/things-scene';
+declare const PDFPage_base: typeof Shape;
+export default class PDFPage extends PDFPage_base {
+    private scaleIndex;
+    private displayScale;
+    private offsetX;
+    private offsetY;
+    private pdfDoc;
+    private canvas;
+    private renderTask;
+    private page;
+    private documentSize;
+    private position;
+    ready(): Promise<void>;
+    dispose(): void;
+    loadPDF(): Promise<void>;
+    onchange(after: Properties, before: Properties): void;
+    /**
+     * Adjusts the PDF display scale and offsets based on the fit mode.
+     *
+     * @async
+     * @method fit
+     * @memberof PdfPage
+     * @returns {Promise<void>}
+     *
+     * @description
+     * This method adjusts the display scale of the PDF page based on the `fit` mode specified in the component's state.
+     * It supports the following fit modes:
+     * - 'width': Scales the PDF to fit the width of the container.
+     * - 'height': Scales the PDF to fit the height of the container.
+     * - 'ratio': Scales the PDF to fit both the width and height of the container while maintaining the aspect ratio.
+     * - 'none': Displays the PDF at its original size.
+     *
+     * The method also calculates the appropriate offsets to center the PDF within the container when the fit mode is 'ratio'.
+     * Finally, it triggers the rendering of the PDF.
+     */
+    fit(): Promise<void>;
+    renderPDF(): Promise<void>;
+    render(ctx: CanvasRenderingContext2D): void;
+    onwheel(e: WheelEvent): void;
+    ondragstart(e: MouseEvent): void;
+    ondragmove(e: MouseEvent): void;
+    ondblclick(e: MouseEvent): void;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                min: number;
+                displayField?: undefined;
+                displayFullUrl?: undefined;
+                storageFilters?: undefined;
+                useUpload?: undefined;
+                options?: undefined;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                displayField: string;
+                displayFullUrl: boolean;
+                storageFilters: {
+                    type: ArrayConstructor;
+                    value: {
+                        name: string;
+                        value: string;
+                    }[];
+                };
+                useUpload: boolean;
+                min?: undefined;
+                options?: undefined;
+            };
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                options: string[];
+                min?: undefined;
+                displayField?: undefined;
+                displayFullUrl?: undefined;
+                storageFilters?: undefined;
+                useUpload?: undefined;
+            };
+        })[];
+        help: string;
+    };
+}
+export {};

package/dist/pdf-page.js

@@ -0,0 +1,249 @@
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
+import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.min.mjs';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'round',
+            name: 'round',
+            property: { min: 0 }
+        },
+        {
+            type: 'attachment-selector',
+            label: 'pdf-file',
+            name: 'file',
+            property: {
+                displayField: 'fullpath',
+                displayFullUrl: true,
+                storageFilters: { type: Array, value: [{ name: 'category', value: 'application' }] },
+                useUpload: true
+            }
+        },
+        {
+            type: 'number',
+            label: 'pdf-page',
+            name: 'page'
+        },
+        {
+            type: 'select',
+            label: 'pdf-fit',
+            name: 'fit',
+            property: {
+                options: ['none', 'ratio', 'width', 'height']
+            }
+        }
+    ],
+    help: 'scene/component/pdf-viewer'
+};
+const SCALE_LEVELS = [2, 4, 8, 16, 32];
+const MAX_CANVAS_SIZE = 16000;
+export default class PDFPage extends RectPath(Shape) {
+    constructor() {
+        super(...arguments);
+        this.scaleIndex = 0;
+        this.displayScale = 1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.pdfDoc = null;
+        this.canvas = document.createElement('canvas');
+        this.renderTask = null;
+        this.page = null;
+        this.documentSize = null;
+        this.position = { x: 0, y: 0 };
+    }
+    async ready() {
+        this.loadPDF();
+    }
+    dispose() {
+        super.dispose();
+        if (this.renderTask) {
+            this.renderTask.cancel();
+        }
+        this.pdfDoc = null;
+        this.canvas = null;
+    }
+    async loadPDF() {
+        const { file, page: pageNo = 1 } = this.state;
+        if (!file)
+            return;
+        try {
+            console.log(`📌 Loading PDF: ${file}`);
+            this.pdfDoc = await getDocument(file).promise;
+            const numPages = this.pdfDoc.numPages;
+            this.page = await this.pdfDoc.getPage(pageNo > numPages ? 1 : pageNo);
+            this.documentSize = this.page.getViewport({ scale: 1 });
+            this.fit();
+        }
+        catch (error) {
+            console.error('🚨 Failed to load PDF:', error);
+        }
+    }
+    onchange(after, before) {
+        if ('file' in after || 'fit' in after || 'page' in after) {
+            this.loadPDF();
+        }
+    }
+    /**
+     * Adjusts the PDF display scale and offsets based on the fit mode.
+     *
+     * @async
+     * @method fit
+     * @memberof PdfPage
+     * @returns {Promise<void>}
+     *
+     * @description
+     * This method adjusts the display scale of the PDF page based on the `fit` mode specified in the component's state.
+     * It supports the following fit modes:
+     * - 'width': Scales the PDF to fit the width of the container.
+     * - 'height': Scales the PDF to fit the height of the container.
+     * - 'ratio': Scales the PDF to fit both the width and height of the container while maintaining the aspect ratio.
+     * - 'none': Displays the PDF at its original size.
+     *
+     * The method also calculates the appropriate offsets to center the PDF within the container when the fit mode is 'ratio'.
+     * Finally, it triggers the rendering of the PDF.
+     */
+    async fit() {
+        if (!this.documentSize) {
+            return;
+        }
+        const { fit = 'none' } = this.state;
+        const { width, height } = this.bounds;
+        const viewport = this.documentSize;
+        switch (fit) {
+            case 'none':
+                this.displayScale = 1;
+                break;
+            case 'width':
+                this.displayScale = width / viewport.width;
+                break;
+            case 'height':
+                this.displayScale = height / viewport.height;
+                break;
+            case 'ratio':
+                this.displayScale = Math.min(width / viewport.width, height / viewport.height);
+                break;
+            default:
+                this.displayScale = 1;
+        }
+        this.scaleIndex = SCALE_LEVELS.findIndex(level => this.displayScale <= level);
+        if (this.scaleIndex === -1) {
+            this.scaleIndex = SCALE_LEVELS.length - 1;
+        }
+        if (fit === 'ratio') {
+            this.offsetX = (width - viewport.width * this.displayScale) / 2;
+            this.offsetY = (height - viewport.height * this.displayScale) / 2;
+        }
+        else {
+            this.offsetX = 0;
+            this.offsetY = 0;
+        }
+        this.renderPDF();
+    }
+    async renderPDF() {
+        if (!this.pdfDoc || !this.page || !this.documentSize) {
+            return;
+        }
+        const { width, height } = this.documentSize;
+        let scale = SCALE_LEVELS[this.scaleIndex];
+        let newWidth = Math.min(width * scale, MAX_CANVAS_SIZE);
+        let newHeight = Math.min(height * scale, MAX_CANVAS_SIZE);
+        if (newWidth === MAX_CANVAS_SIZE || newHeight === MAX_CANVAS_SIZE) {
+            const ratio = width / height;
+            if (ratio > 1) {
+                newHeight = newWidth / ratio;
+            }
+            const recalcScale = newHeight / height;
+            this.scaleIndex = SCALE_LEVELS.findIndex(level => recalcScale <= level) - 1;
+            scale = SCALE_LEVELS[this.scaleIndex];
+            newWidth = width * scale;
+            newHeight = height * scale;
+        }
+        // Create an `offscreenCanvas` to render in the background while maintaining the existing display
+        const offscreenCanvas = document.createElement('canvas');
+        offscreenCanvas.width = newWidth;
+        offscreenCanvas.height = newHeight;
+        const renderContext = {
+            canvasContext: offscreenCanvas.getContext('2d'),
+            viewport: this.page.getViewport({ scale })
+        };
+        if (this.renderTask) {
+            this.renderTask.cancel();
+            try {
+                await this.renderTask.promise;
+            }
+            catch (error) {
+                console.warn('Previous render task was canceled.');
+            }
+        }
+        this.renderTask = this.page.render(renderContext);
+        try {
+            await this.renderTask.promise;
+            // 🔹 Replace the existing canvas with the new canvas once rendering is complete
+            this.canvas = offscreenCanvas;
+            this.renderTask = null;
+            this.invalidate();
+        }
+        catch (error) {
+            if (error instanceof Error && error.name !== 'RenderingCancelledException') {
+                console.error('Failed to render PDF:', error);
+            }
+        }
+    }
+    render(ctx) {
+        var _a, _b;
+        super.render(ctx);
+        if (!this.canvas) {
+            return;
+        }
+        const { left, top } = this.bounds;
+        const { width, height } = this.canvas;
+        ctx.clip();
+        ctx.drawImage(this.canvas, left + this.offsetX, top + this.offsetY, (((_a = this.documentSize) === null || _a === void 0 ? void 0 : _a.width) || width) * this.displayScale, (((_b = this.documentSize) === null || _b === void 0 ? void 0 : _b.height) || height) * this.displayScale);
+    }
+    onwheel(e) {
+        e.preventDefault();
+        var { left, top } = this.bounds;
+        var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY);
+        x -= left;
+        y -= top;
+        const zoomIn = e.deltaY < 0;
+        const zoomFactor = zoomIn ? 1.05 : 0.95;
+        const oldScale = this.displayScale;
+        this.displayScale = Math.min(Math.max(0.5, this.displayScale * zoomFactor), SCALE_LEVELS[SCALE_LEVELS.length - 1]);
+        const scaleLevel = SCALE_LEVELS.findIndex(level => this.displayScale <= level);
+        const newScaleIndex = scaleLevel === -1 ? SCALE_LEVELS.length - 1 : scaleLevel;
+        // Calculate zoom reference point (zoom in/out based on mouse position)
+        const scaleRatio = this.displayScale / oldScale;
+        this.offsetX = x - (x - this.offsetX) * scaleRatio;
+        this.offsetY = y - (y - this.offsetY) * scaleRatio;
+        this.invalidate();
+        if (newScaleIndex !== this.scaleIndex) {
+            this.scaleIndex = newScaleIndex;
+            this.renderPDF();
+        }
+    }
+    ondragstart(e) {
+        this.position = this.transcoordC2S(e.offsetX, e.offsetY);
+    }
+    ondragmove(e) {
+        var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY);
+        const dx = x - this.position.x;
+        const dy = y - this.position.y;
+        this.offsetX += dx;
+        this.offsetY += dy;
+        this.position = { x, y };
+        this.invalidate();
+    }
+    ondblclick(e) {
+        this.fit();
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.register('pdf-page', PDFPage);
+//# sourceMappingURL=pdf-page.js.map

package/dist/pdf-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdf-page.js","sourceRoot":"","sources":["../src/pdf-page.ts"],"names":[],"mappings":"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","sourcesContent":["import { getDocument, GlobalWorkerOptions, PageViewport, PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist'\nimport { Component, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nGlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.min.mjs'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: { min: 0 }\n    },\n    {\n      type: 'attachment-selector',\n      label: 'pdf-file',\n      name: 'file',\n      property: {\n        displayField: 'fullpath',\n        displayFullUrl: true,\n        storageFilters: { type: Array, value: [{ name: 'category', value: 'application' }] },\n        useUpload: true\n      }\n    },\n    {\n      type: 'number',\n      label: 'pdf-page',\n      name: 'page'\n    },\n    {\n      type: 'select',\n      label: 'pdf-fit',\n      name: 'fit',\n      property: {\n        options: ['none', 'ratio', 'width', 'height']\n      }\n    }\n  ],\n  help: 'scene/component/pdf-viewer'\n}\n\nconst SCALE_LEVELS = [2, 4, 8, 16, 32]\nconst MAX_CANVAS_SIZE = 16000\n\nexport default class PDFPage extends RectPath(Shape) {\n  private scaleIndex: number = 0\n  private displayScale: number = 1\n  private offsetX: number = 0\n  private offsetY: number = 0\n  private pdfDoc: PDFDocumentProxy | null = null\n  private canvas: HTMLCanvasElement | null = document.createElement('canvas')\n  private renderTask: RenderTask | null = null\n  private page: PDFPageProxy | null = null\n  private documentSize: PageViewport | null = null\n  private position: { x: number; y: number } = { x: 0, y: 0 }\n\n  async ready() {\n    this.loadPDF()\n  }\n\n  dispose() {\n    super.dispose()\n\n    if (this.renderTask) {\n      this.renderTask.cancel()\n    }\n    this.pdfDoc = null\n    this.canvas = null\n  }\n\n  async loadPDF() {\n    const { file, page: pageNo = 1 } = this.state\n    if (!file) return\n\n    try {\n      console.log(`📌 Loading PDF: ${file}`)\n      this.pdfDoc = await getDocument(file).promise\n\n      const numPages = this.pdfDoc.numPages\n      this.page = await this.pdfDoc.getPage(pageNo > numPages ? 1 : pageNo)\n      this.documentSize = this.page.getViewport({ scale: 1 })\n\n      this.fit()\n    } catch (error) {\n      console.error('🚨 Failed to load PDF:', error)\n    }\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if ('file' in after || 'fit' in after || 'page' in after) {\n      this.loadPDF()\n    }\n  }\n\n  /**\n   * Adjusts the PDF display scale and offsets based on the fit mode.\n   *\n   * @async\n   * @method fit\n   * @memberof PdfPage\n   * @returns {Promise<void>}\n   *\n   * @description\n   * This method adjusts the display scale of the PDF page based on the `fit` mode specified in the component's state.\n   * It supports the following fit modes:\n   * - 'width': Scales the PDF to fit the width of the container.\n   * - 'height': Scales the PDF to fit the height of the container.\n   * - 'ratio': Scales the PDF to fit both the width and height of the container while maintaining the aspect ratio.\n   * - 'none': Displays the PDF at its original size.\n   *\n   * The method also calculates the appropriate offsets to center the PDF within the container when the fit mode is 'ratio'.\n   * Finally, it triggers the rendering of the PDF.\n   */\n  async fit() {\n    if (!this.documentSize) {\n      return\n    }\n\n    const { fit = 'none' } = this.state\n    const { width, height } = this.bounds\n    const viewport = this.documentSize\n\n    switch (fit) {\n      case 'none':\n        this.displayScale = 1\n        break\n      case 'width':\n        this.displayScale = width / viewport.width\n        break\n      case 'height':\n        this.displayScale = height / viewport.height\n        break\n      case 'ratio':\n        this.displayScale = Math.min(width / viewport.width, height / viewport.height)\n        break\n      default:\n        this.displayScale = 1\n    }\n\n    this.scaleIndex = SCALE_LEVELS.findIndex(level => this.displayScale <= level)\n    if (this.scaleIndex === -1) {\n      this.scaleIndex = SCALE_LEVELS.length - 1\n    }\n\n    if (fit === 'ratio') {\n      this.offsetX = (width - viewport.width * this.displayScale) / 2\n      this.offsetY = (height - viewport.height * this.displayScale) / 2\n    } else {\n      this.offsetX = 0\n      this.offsetY = 0\n    }\n\n    this.renderPDF()\n  }\n\n  async renderPDF() {\n    if (!this.pdfDoc || !this.page || !this.documentSize) {\n      return\n    }\n\n    const { width, height } = this.documentSize\n\n    let scale = SCALE_LEVELS[this.scaleIndex]\n\n    let newWidth = Math.min(width * scale, MAX_CANVAS_SIZE)\n    let newHeight = Math.min(height * scale, MAX_CANVAS_SIZE)\n\n    if (newWidth === MAX_CANVAS_SIZE || newHeight === MAX_CANVAS_SIZE) {\n      const ratio = width / height\n      if (ratio > 1) {\n        newHeight = newWidth / ratio\n      }\n\n      const recalcScale = newHeight / height\n\n      this.scaleIndex = SCALE_LEVELS.findIndex(level => recalcScale <= level) - 1\n      scale = SCALE_LEVELS[this.scaleIndex]\n\n      newWidth = width * scale\n      newHeight = height * scale\n    }\n\n    // Create an `offscreenCanvas` to render in the background while maintaining the existing display\n    const offscreenCanvas = document.createElement('canvas')\n    offscreenCanvas.width = newWidth\n    offscreenCanvas.height = newHeight\n\n    const renderContext = {\n      canvasContext: offscreenCanvas.getContext('2d')!,\n      viewport: this.page.getViewport({ scale })\n    }\n\n    if (this.renderTask) {\n      this.renderTask.cancel()\n      try {\n        await this.renderTask.promise\n      } catch (error) {\n        console.warn('Previous render task was canceled.')\n      }\n    }\n\n    this.renderTask = this.page.render(renderContext)\n\n    try {\n      await this.renderTask.promise\n\n      // 🔹 Replace the existing canvas with the new canvas once rendering is complete\n      this.canvas = offscreenCanvas\n      this.renderTask = null\n\n      this.invalidate()\n    } catch (error) {\n      if (error instanceof Error && error.name !== 'RenderingCancelledException') {\n        console.error('Failed to render PDF:', error)\n      }\n    }\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    super.render(ctx)\n\n    if (!this.canvas) {\n      return\n    }\n\n    const { left, top } = this.bounds\n    const { width, height } = this.canvas\n\n    ctx.clip()\n    ctx.drawImage(\n      this.canvas,\n      left + this.offsetX,\n      top + this.offsetY,\n      (this.documentSize?.width || width) * this.displayScale,\n      (this.documentSize?.height || height) * this.displayScale\n    )\n  }\n\n  onwheel(e: WheelEvent) {\n    e.preventDefault()\n    var { left, top } = this.bounds\n    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)\n    x -= left\n    y -= top\n\n    const zoomIn = e.deltaY < 0\n    const zoomFactor = zoomIn ? 1.05 : 0.95\n    const oldScale = this.displayScale\n\n    this.displayScale = Math.min(Math.max(0.5, this.displayScale * zoomFactor), SCALE_LEVELS[SCALE_LEVELS.length - 1])\n\n    const scaleLevel = SCALE_LEVELS.findIndex(level => this.displayScale <= level)\n    const newScaleIndex = scaleLevel === -1 ? SCALE_LEVELS.length - 1 : scaleLevel\n\n    // Calculate zoom reference point (zoom in/out based on mouse position)\n    const scaleRatio = this.displayScale / oldScale\n    this.offsetX = x - (x - this.offsetX) * scaleRatio\n    this.offsetY = y - (y - this.offsetY) * scaleRatio\n\n    this.invalidate()\n\n    if (newScaleIndex !== this.scaleIndex) {\n      this.scaleIndex = newScaleIndex\n      this.renderPDF()\n    }\n  }\n\n  ondragstart(e: MouseEvent) {\n    this.position = this.transcoordC2S(e.offsetX, e.offsetY)\n  }\n\n  ondragmove(e: MouseEvent) {\n    var { x, y } = this.transcoordC2S(e.offsetX, e.offsetY)\n    const dx = x - this.position.x\n    const dy = y - this.position.y\n    this.offsetX += dx\n    this.offsetY += dy\n    this.position = { x, y }\n    this.invalidate()\n  }\n\n  ondblclick(e: MouseEvent) {\n    this.fit()\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('pdf-page', PDFPage)\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    type: string;
+    description: string;
+    icon: string;
+    group: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        lineDash: string;
+        lineWidth: number;
+    };
+}[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,3 @@
+import pdfPage from './pdf-page.js';
+export default [pdfPage];
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,eAAe,CAAA;AAEnC,eAAe,CAAC,OAAO,CAAC,CAAA","sourcesContent":["import pdfPage from './pdf-page.js'\n\nexport default [pdfPage]\n"]}

package/dist/templates/pdf-page.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    type: string;
+    description: string;
+    icon: string;
+    group: string;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        strokeStyle: string;
+        lineDash: string;
+        lineWidth: number;
+    };
+};
+export default _default;

package/dist/templates/pdf-page.js

@@ -0,0 +1,18 @@
+const icon = new URL('../../icons/icon-pdf-page.png', import.meta.url).href;
+export default {
+    type: 'pdf-page',
+    description: 'pdf page viewer',
+    icon,
+    group: 'etc',
+    model: {
+        type: 'pdf-page',
+        left: 100,
+        top: 100,
+        width: 800,
+        height: 600,
+        strokeStyle: '#000',
+        lineDash: 'solid',
+        lineWidth: 1
+    }
+};
+//# sourceMappingURL=pdf-page.js.map

package/dist/templates/pdf-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pdf-page.js","sourceRoot":"","sources":["../../src/templates/pdf-page.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,+BAA+B,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAE3E,eAAe;IACb,IAAI,EAAE,UAAU;IAChB,WAAW,EAAE,iBAAiB;IAC9B,IAAI;IACJ,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE;QACL,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,WAAW,EAAE,MAAM;QACnB,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["const icon = new URL('../../icons/icon-pdf-page.png', import.meta.url).href\n\nexport default {\n  type: 'pdf-page',\n  description: 'pdf page viewer',\n  icon,\n  group: 'etc',\n  model: {\n    type: 'pdf-page',\n    left: 100,\n    top: 100,\n    width: 800,\n    height: 600,\n    strokeStyle: '#000',\n    lineDash: 'solid',\n    lineWidth: 1\n  }\n}\n"]}

package/helps/scene/component/pdf-page.ja.md

@@ -0,0 +1,26 @@
+## PDF ページ
+
+PDF ページコンポーネントを使用すると、シーン内で PDF ドキュメントを表示およびインタラクションすることができます。
+
+### プロパティ
+
+- **round** - コンポーネントの角の丸みを設定します（最小値：0）
+- **ファイル** - 表示する PDF ファイルのパス
+- **ページ** - 表示するページ番号（1 から開始）
+- **合わせる** - PDF をコンポーネントに合わせる方法：
+  - **none** - 原寸大
+  - **ratio** - アスペクト比を維持しながらフィット
+  - **width** - 幅に合わせる
+  - **height** - 高さに合わせる
+
+### インタラクション
+
+- **マウスホイール** - ズームイン/アウト
+- **ドラッグ** - PDF ビューのパン
+- **ダブルクリック** - フィットモードにリセット
+
+### 注意事項
+
+- 大きな PDF ファイルは高品質でレンダリングするのに時間がかかる場合があります
+- このコンポーネントは大きなドキュメントのメモリ最適化を自動的に処理します
+- ブラウザの制限を防ぐため、最大キャンバスサイズは 16000 ピクセルに制限されています

package/helps/scene/component/pdf-page.ko.md

@@ -0,0 +1,26 @@
+## PDF 페이지
+
+PDF 페이지 컴포넌트는 씬(Scene)에서 PDF 문서를 표시하고 상호 작용할 수 있게 해줍니다.
+
+### 속성
+
+- **round** - 컴포넌트 모서리의 둥글기 (최소값: 0)
+- **파일** - 표시할 PDF 파일 경로
+- **페이지** - 표시할 페이지 번호 (1부터 시작)
+- **맞춤** - PDF가 컴포넌트에 맞는 방식:
+  - **none** - 원본 크기
+  - **ratio** - 종횡비를 유지하며 크기에 맞춤
+  - **width** - 너비에 맞춤
+  - **height** - 높이에 맞춤
+
+### 상호 작용
+
+- **마우스 휠** - 확대/축소
+- **드래그** - PDF 뷰 이동
+- **더블 클릭** - 맞춤 모드로 재설정
+
+### 참고 사항
+
+- 대용량 PDF 파일은 고품질로 렌더링하는 데 시간이 걸릴 수 있습니다
+- 이 컴포넌트는 대용량 문서에 대한 메모리 최적화를 자동으로 처리합니다
+- 최대 캔버스 크기는 브라우저 제한을 방지하기 위해 16000픽셀로 제한됩니다

package/helps/scene/component/pdf-page.md

@@ -0,0 +1,26 @@
+## PDF Page
+
+The PDF Page component allows you to display and interact with PDF documents in your scene.
+
+### Properties
+
+- **round** - Rounds the corners of the component (min: 0)
+- **file** - Path to the PDF file to display
+- **page** - Page number to display (starts from 1)
+- **fit** - How the PDF should fit in the component:
+  - **none** - Original size
+  - **ratio** - Scaled to fit while maintaining aspect ratio
+  - **width** - Scaled to fit width
+  - **height** - Scaled to fit height
+
+### Interactions
+
+- **Mouse wheel** - Zoom in/out
+- **Drag** - Pan the PDF view
+- **Double-click** - Reset to fit mode
+
+### Notes
+
+- Large PDF files may take time to render at high quality
+- The component automatically handles memory optimization for large documents
+- Maximum canvas size is limited to 16000 pixels to prevent browser limitations

package/helps/scene/component/pdf-page.ms.md

@@ -0,0 +1,26 @@
+## Halaman PDF
+
+Komponen Halaman PDF membolehkan anda memaparkan dan berinteraksi dengan dokumen PDF dalam paparan anda.
+
+### Ciri-ciri
+
+- **round** - Membulatkan sudut komponen (min: 0)
+- **fail** - Laluan ke fail PDF untuk dipaparkan
+- **page** - Nombor halaman untuk dipaparkan (bermula dari 1)
+- **fit** - Bagaimana PDF harus muat dalam komponen:
+  - **none** - Saiz asal
+  - **ratio** - Diskalakan untuk muat sambil mengekalkan nisbah aspek
+  - **width** - Diskalakan untuk muat lebar
+  - **height** - Diskalakan untuk muat tinggi
+
+### Interaksi
+
+- **Roda tetikus** - Zum masuk/keluar
+- **Seret** - Pan pandangan PDF
+- **Klik dua kali** - Set semula ke mod muat
+
+### Nota
+
+- Fail PDF besar mungkin mengambil masa untuk dirender pada kualiti tinggi
+- Komponen ini secara automatik mengendalikan pengoptimuman memori untuk dokumen besar
+- Saiz kanvas maksimum terhad kepada 16000 piksel untuk mencegah had pelayar

package/helps/scene/component/pdf-page.zh.md

@@ -0,0 +1,26 @@
+## PDF 页面
+
+PDF 页面组件允许您在场景中显示和交互 PDF 文档。
+
+### 属性
+
+- **round** - 组件角的圆角度（最小值：0）
+- **文件** - 要显示的 PDF 文件路径
+- **页面** - 要显示的页码（从 1 开始）
+- **匹配** - PDF 在组件中的适应方式：
+  - **none** - 原始大小
+  - **ratio** - 保持宽高比缩放以适应
+  - **width** - 适应宽度
+  - **height** - 适应高度
+
+### 交互
+
+- **鼠标滚轮** - 放大/缩小
+- **拖动** - 平移 PDF 视图
+- **双击** - 重置为适应模式
+
+### 注意事项
+
+- 大型 PDF 文件可能需要时间以高质量渲染
+- 该组件自动处理大型文档的内存优化
+- 最大画布大小限制为 16000 像素，以防止浏览器限制

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@operato/scene-pdf",
+  "description": "pdf component for operato-scene",
+  "author": "heartyoh",
+  "version": "9.0.0-beta.12",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "license": "MIT",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/pdf"
+  },
+  "scripts": {
+    "serve": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"things-factory-dev\"",
+    "serve:dev": "npm run serve",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^9.0.0-beta",
+    "lit": "^3.1.2",
+    "pdfjs-dist": "^4.10.38"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@things-factory/builder": "^9.0.0-beta",
+    "@things-factory/operato-board": "^9.0.0-beta",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^8.0.1",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^5.0.4"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "4e5088777eb5187e7f8d3c5d5ffeb633a3802341"
+}

package/things-scene.config.js

@@ -0,0 +1,7 @@
+import editors from './dist/editors/index.js'
+import templates from './dist/templates/index.js'
+
+export default {
+  templates,
+  editors
+}

package/translations/en.json

@@ -0,0 +1,6 @@
+{
+  "component.pdf-pag": "pdf page",
+  "label.pdf-file": "file",
+  "label.pdf-page": "page",
+  "label.pdf-fit": "fit"
+}

package/translations/ja.json

@@ -0,0 +1,6 @@
+{
+  "component.pdf-pag": "pdf page",
+  "label.pdf-file": "ファイル",
+  "label.pdf-page": "ページ",
+  "label.pdf-fit": "合わせる"
+}

package/translations/ko.json

@@ -0,0 +1,6 @@
+{
+  "component.pdf-pag": "pdf page",
+  "label.pdf-file": "파일",
+  "label.pdf-page": "페이지",
+  "label.pdf-fit": "맞춤"
+}

package/translations/ms.json

@@ -0,0 +1,6 @@
+{
+  "component.pdf-pag": "pdf page",
+  "label.pdf-file": "fail",
+  "label.pdf-page": "page",
+  "label.pdf-fit": "fit"
+}

package/translations/zh.json

@@ -0,0 +1,6 @@
+{
+  "component.pdf-pag": "pdf page",
+  "label.pdf-file": "文件",
+  "label.pdf-page": "页面",
+  "label.pdf-fit": "匹配"
+}