@operato/board 8.0.0-alpha.7 → 8.0.0-alpha.9

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.8...v8.0.0-alpha.9) (2024-09-15)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
+## [8.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.7...v8.0.0-alpha.8) (2024-09-15)
+
+
+### :bug: Bug Fix
+
+* template viewer for board and process ([535433c](https://github.com/hatiolab/operato/commit/535433c7227190714a14cc0d1089a99e1075a381))
+
+
+
 ## [8.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.6...v8.0.0-alpha.7) (2024-09-14)
 
 

package/dist/src/index.d.ts

@@ -5,3 +5,4 @@ export * from './ox-board-viewer.js';
 export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';
 export * from './ox-board-list.js';
+export * from './ox-board-template-viewer.js';

package/dist/src/index.js

@@ -5,4 +5,5 @@ export * from './ox-board-viewer.js';
 export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';
 export * from './ox-board-list.js';
+export * from './ox-board-template-viewer.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAElF,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAElF,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\nexport * from './ox-board-template-viewer.js'\n"]}

package/dist/src/ox-board-template-viewer.d.ts

@@ -0,0 +1,27 @@
+import '@material/web/icon/icon.js';
+import '@material/web/fab/fab.js';
+import { LitElement, PropertyValues } from 'lit';
+export declare class BoardTemplateViewer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    boardTemplate: any;
+    _scene: any;
+    _target: HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+    private resizeHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    initScene(): void;
+    closeScene(): void;
+    releaseScene(): void;
+    setupScene({ id, scene }: {
+        id: string;
+        scene: any;
+    }): void;
+    getSceneImageData(base64?: boolean): Promise<{
+        width: any;
+        height: any;
+        data: string | Uint8ClampedArray;
+    } | undefined>;
+    printTrick(image: string): Promise<void>;
+}

package/dist/src/ox-board-template-viewer.js

@@ -0,0 +1,178 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/fab/fab.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { create, SCENE_MODE } from '@hatiolab/things-scene';
+import { ScrollbarStyles } from '@operato/styles';
+let BoardTemplateViewer = class BoardTemplateViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.boardTemplate = {};
+        this._scene = null;
+        this.resizeHandler = () => {
+            this._scene && this._scene.fit();
+        };
+    }
+    render() {
+        return html ` <div id="target"></div> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.resizeHandler);
+        window.addEventListener('orientationchange', this.resizeHandler);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.resizeHandler);
+        window.removeEventListener('orientationchange', this.resizeHandler);
+        super.disconnectedCallback();
+        this.closeScene();
+    }
+    updated(changes) {
+        if (changes.has('boardTemplate')) {
+            this.closeScene();
+            if (this.boardTemplate && this.boardTemplate.id) {
+                this.initScene();
+            }
+        }
+    }
+    initScene() {
+        if (!this.boardTemplate || !this.boardTemplate.id)
+            return;
+        this._scene = create({
+            model: {
+                ...this.boardTemplate.model
+            },
+            mode: SCENE_MODE.VIEW
+        });
+        this.setupScene({ id: this.boardTemplate.id, scene: this._scene });
+    }
+    closeScene() {
+        if (this._scene) {
+            this._scene.target = null;
+            this._scene.release && this._scene.release();
+            this._scene = null;
+        }
+    }
+    releaseScene() {
+        this.closeScene();
+    }
+    setupScene({ id, scene }) {
+        var _a;
+        this._scene = scene;
+        const backgroundColor = (_a = this._scene) === null || _a === void 0 ? void 0 : _a.root.state.fillStyle;
+        if (typeof backgroundColor === 'string') {
+            this.style.backgroundColor = backgroundColor;
+        }
+        else {
+            this.style.backgroundColor = 'initial';
+        }
+        /* scene의 기존 target을 보관한다. */
+        this._scene.fit(this._scene.fitMode);
+        this._scene.target = this._target;
+    }
+    /* event handlers */
+    async getSceneImageData(base64 = false) {
+        if (!this._scene) {
+            return;
+        }
+        var { width, height } = this._scene.model;
+        var pixelRatio = window.devicePixelRatio;
+        // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.
+        var canvas = document.createElement('canvas');
+        canvas.width = Number(width);
+        canvas.height = Number(height);
+        var root = this._scene.root;
+        // 2. 모델레이어의 원래 위치와 스케일을 저장한다.
+        var translate = root.get('translate');
+        var scale = root.get('scale');
+        // 3. 위치와 스케일 기본 설정.
+        root.set('translate', { x: 0, y: 0 });
+        root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio });
+        // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.
+        var context = canvas.getContext('2d');
+        root.draw(context);
+        root.set('translate', translate);
+        root.set('scale', scale);
+        var data = base64 ? canvas.toDataURL() : context.getImageData(0, 0, width, height).data;
+        return {
+            width,
+            height,
+            data
+        };
+    }
+    async printTrick(image) {
+        var _a;
+        var viewTarget = null;
+        var printTarget = null;
+        if (!image) {
+            image = (_a = (await this.getSceneImageData(true))) === null || _a === void 0 ? void 0 : _a.data;
+        }
+        printTarget = document.createElement('img');
+        printTarget.id = 'target';
+        printTarget.src = image;
+        printTarget.style.width = '100%';
+        printTarget.style.height = '100%';
+        const x = (mql) => {
+            if (mql.matches) {
+                if (!viewTarget) {
+                    viewTarget = this.renderRoot.getElementById('target');
+                    this.renderRoot.replaceChild(printTarget, viewTarget);
+                }
+            }
+            else {
+                this.renderRoot.replaceChild(viewTarget, printTarget);
+                printTarget.remove();
+                mediaQueryList.removeEventListener('change', x);
+            }
+        };
+        if (window.matchMedia) {
+            var mediaQueryList = window.matchMedia('print');
+            mediaQueryList.addEventListener('change', x);
+        }
+    }
+};
+BoardTemplateViewer.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        position: relative;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        overflow: hidden;
+      }
+
+      #target {
+        flex: 1;
+
+        width: 100%; /* 전체화면보기를 위해서 필요함. */
+        height: 100%;
+
+        outline: 0;
+      }
+
+      @media print {
+        md-fab,
+        md-icon {
+          display: none;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], BoardTemplateViewer.prototype, "boardTemplate", void 0);
+__decorate([
+    state()
+], BoardTemplateViewer.prototype, "_scene", void 0);
+__decorate([
+    query('#target')
+], BoardTemplateViewer.prototype, "_target", void 0);
+BoardTemplateViewer = __decorate([
+    customElement('ox-board-template-viewer')
+], BoardTemplateViewer);
+export { BoardTemplateViewer };
+//# sourceMappingURL=ox-board-template-viewer.js.map

package/dist/src/ox-board-template-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-template-viewer.js","sourceRoot":"","sources":["../../src/ox-board-template-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { create, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-board-template-viewer')\nexport class BoardTemplateViewer extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        position: relative;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        overflow: hidden;\n      }\n\n      #target {\n        flex: 1;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        height: 100%;\n\n        outline: 0;\n      }\n\n      @media print {\n        md-fab,\n        md-icon {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) boardTemplate: any = {}\n\n  @state() _scene: any = null\n\n  @query('#target') _target!: HTMLElement\n\n  render() {\n    return html` <div id=\"target\"></div> `\n  }\n\n  private resizeHandler = () => {\n    this._scene && this._scene.fit()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', this.resizeHandler)\n\n    window.addEventListener('orientationchange', this.resizeHandler)\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.resizeHandler)\n    window.removeEventListener('orientationchange', this.resizeHandler)\n\n    super.disconnectedCallback()\n\n    this.closeScene()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boardTemplate')) {\n      this.closeScene()\n\n      if (this.boardTemplate && this.boardTemplate.id) {\n        this.initScene()\n      }\n    }\n  }\n\n  initScene() {\n    if (!this.boardTemplate || !this.boardTemplate.id) return\n\n    this._scene = create({\n      model: {\n        ...this.boardTemplate.model\n      },\n      mode: SCENE_MODE.VIEW\n    })\n\n    this.setupScene({ id: this.boardTemplate.id, scene: this._scene })\n  }\n\n  closeScene() {\n    if (this._scene) {\n      this._scene.target = null\n      this._scene.release && this._scene.release()\n\n      this._scene = null\n    }\n  }\n\n  releaseScene() {\n    this.closeScene()\n  }\n\n  setupScene({ id, scene }: { id: string; scene: any }) {\n    this._scene = scene\n\n    const backgroundColor = this._scene?.root.state.fillStyle\n    if (typeof backgroundColor === 'string') {\n      this.style.backgroundColor = backgroundColor\n    } else {\n      this.style.backgroundColor = 'initial'\n    }\n\n    /* scene의 기존 target을 보관한다. */\n\n    this._scene.fit(this._scene.fitMode)\n    this._scene.target = this._target\n  }\n\n  /* event handlers */\n  async getSceneImageData(base64 = false) {\n    if (!this._scene) {\n      return\n    }\n\n    var { width, height } = this._scene.model\n    var pixelRatio = window.devicePixelRatio\n\n    // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.\n    var canvas = document.createElement('canvas')\n    canvas.width = Number(width)\n    canvas.height = Number(height)\n\n    var root = this._scene.root\n    // 2. 모델레이어의 원래 위치와 스케일을 저장한다.\n    var translate = root.get('translate')\n    var scale = root.get('scale')\n\n    // 3. 위치와 스케일 기본 설정.\n    root.set('translate', { x: 0, y: 0 })\n    root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio })\n\n    // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.\n    var context = canvas.getContext('2d')\n\n    root.draw(context)\n\n    root.set('translate', translate)\n    root.set('scale', scale)\n\n    var data = base64 ? canvas.toDataURL() : context!.getImageData(0, 0, width, height).data\n\n    return {\n      width,\n      height,\n      data\n    }\n  }\n\n  async printTrick(image: string) {\n    var viewTarget: HTMLElement | null = null\n    var printTarget: HTMLImageElement | null = null\n\n    if (!image) {\n      image = (await this.getSceneImageData(true))?.data as string\n    }\n\n    printTarget = document.createElement('img')\n    printTarget.id = 'target'\n    printTarget.src = image\n    printTarget.style.width = '100%'\n    printTarget.style.height = '100%'\n\n    const x = (mql: MediaQueryListEvent) => {\n      if (mql.matches) {\n        if (!viewTarget) {\n          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')\n          this.renderRoot.replaceChild(printTarget!, viewTarget!)\n        }\n      } else {\n        this.renderRoot.replaceChild(viewTarget!, printTarget!)\n        printTarget!.remove()\n        mediaQueryList.removeEventListener('change', x)\n      }\n    }\n\n    if (window.matchMedia) {\n      var mediaQueryList = window.matchMedia('print')\n      mediaQueryList.addEventListener('change', x)\n    }\n  }\n}\n"]}