@fmsim/board 0.0.49

package/dist/src/ox-board-modeller.js

@@ -0,0 +1,401 @@
+import { __decorate } from "tslib";
+import '@material/mwc-fab';
+import '@material/mwc-icon';
+import '@hatiolab/things-scene';
+import './modeller/scene-viewer/ox-scene-handler.js';
+import './modeller/scene-viewer/ox-scene-layer.js';
+import './modeller/scene-viewer/ox-scene-property.js';
+import './modeller/scene-viewer/ox-scene-viewer.js';
+import './ox-board-viewer';
+import { saveAs } from 'file-saver';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { SCENE_MODE } from '@hatiolab/things-scene';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { OxPopup } from '@operato/popup';
+import { isMacOS, togglefullscreen } from '@operato/utils';
+import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar';
+import { EditToolbar } from './modeller/edit-toolbar';
+import { PropertySidebar } from './modeller/property-sidebar/property-sidebar';
+const MACOS = isMacOS();
+const ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href;
+const ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href;
+const ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href;
+const ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href;
+const ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href;
+const ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href;
+const ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href;
+const ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href;
+const ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href;
+const ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href;
+var Registry = [];
+export let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement) {
+    static registerGroup(group) {
+        var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name);
+        if (found) {
+            found = {
+                ...found,
+                ...group
+            };
+        }
+        else {
+            Registry.push(group);
+        }
+    }
+    static registerTemplate(templates) {
+        templates &&
+            templates.forEach(template => {
+                var groups = typeof template.group == 'string' ? [template.group] : template.group;
+                Registry.filter(group => groups.includes(group.name)).forEach(group => {
+                    if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {
+                        group.templates.push(template);
+                    }
+                });
+            });
+    }
+    static get groups() {
+        return Registry;
+    }
+    static getGroup(name) {
+        return Registry.find(group => group.name === name);
+    }
+    constructor() {
+        super();
+        this.boardName = '';
+        this.model = null;
+        this.baseUrl = '';
+        this.selected = [];
+        this.mode = SCENE_MODE.EDIT;
+        this.provider = null;
+        this.hideProperty = false;
+        this.overlay = '';
+        this.componentGroupList = [];
+        this.fonts = [];
+        this.themes = null;
+        this.propertyEditor = [];
+        this.group = '';
+        document.addEventListener('get-all-scene-component-ids', (e) => {
+            var { component, callback } = e.detail;
+            if (!this.scene)
+                return;
+            var ids;
+            if (component) {
+                ids = this.scene.findAll(component).map(c => c.model.id);
+            }
+            else {
+                // @ts-ignore
+                ids = this.scene.ids.map(({ key }) => key);
+            }
+            ids = ids.filter(Boolean).sort();
+            callback(ids);
+        });
+        this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`);
+        this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`);
+        this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`);
+        this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`);
+        this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`);
+        this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`);
+        this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`);
+        this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`);
+        this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`);
+        this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`);
+    }
+    static get scopedElements() {
+        return {
+            'edit-toolbar': EditToolbar,
+            'property-sidebar': PropertySidebar,
+            'component-toolbar': ComponentToolbar
+        };
+    }
+    render() {
+        return html `
+      <edit-toolbar
+        .scene=${this.scene}
+        .selected=${this.selected}
+        @hide-property-changed=${(e) => (this.hideProperty = e.detail.value)}
+        @open-preview=${() => this.preview()}
+        @download-model=${() => this.downloadModel()}
+        @modeller-fullscreen=${() => togglefullscreen(this)}
+      >
+        ${this.renderBrandingZone()}
+      </edit-toolbar>
+
+      <div content>
+        <component-toolbar
+          .scene=${this.scene}
+          .mode=${this.mode}
+          @mode-changed=${(e) => {
+            this.mode = e.detail.value;
+        }}
+          .componentGroupList=${this.componentGroupList}
+          .group=${this.group}
+        >
+        </component-toolbar>
+
+        <div id="scene-wrap">
+          <ox-scene-viewer
+            id="scene"
+            .scene=${this.scene}
+            @scene-changed=${(e) => {
+            this.scene = e.detail.value;
+        }}
+            .model=${this.model}
+            .themes=${this.themes}
+            .selected=${this.selected}
+            @selected-changed=${(e) => {
+            this.selected = e.detail.value;
+        }}
+            .mode=${this.mode}
+            @mode-changed=${(e) => {
+            this.mode = e.detail.value;
+        }}
+            fit="ratio"
+            .baseUrl=${this.baseUrl}
+            @contextmenu=${() => this.onContextMenu()}
+            .provider=${this.provider}
+            name="modeller"
+          >
+            <ox-scene-layer type="selection-layer"></ox-scene-layer>
+            <ox-scene-layer type="modeling-layer"></ox-scene-layer>
+            <ox-scene-layer type="add-layer"> </ox-scene-layer>
+            <ox-scene-layer type="guide-layer">
+              <ox-scene-property name="ruler" value="disabled"></ox-scene-property>
+            </ox-scene-layer>
+            <ox-scene-layer type="shift-layer">
+              <ox-scene-property name="text" value="${this.overlay}"></ox-scene-property>
+              <ox-scene-property name="alpha" value="0.3"></ox-scene-property>
+              <ox-scene-property name="fontFamily" value="arial"></ox-scene-property>
+              <ox-scene-property name="fontSize" value="30" type="number"></ox-scene-property>
+              <ox-scene-property name="fontColor" value="navy"></ox-scene-property>
+              <ox-scene-property name="textBaseline" value="top"></ox-scene-property>
+              <ox-scene-property name="textAlign" value="left"></ox-scene-property>
+              <ox-scene-property name="paddingTop" value="50" type="number"></ox-scene-property>
+              <ox-scene-property name="paddingLeft" value="50" type="number"></ox-scene-property>
+            </ox-scene-layer>
+            <ox-scene-layer type="decotag-layer"></ox-scene-layer>
+            <ox-scene-handler type="text-editor"></ox-scene-handler>
+            <ox-scene-handler type="move-handler"></ox-scene-handler>
+          </ox-scene-viewer>
+
+          <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
+        </div>
+
+        <property-sidebar
+          .scene=${this.scene}
+          .selected=${this.selected}
+          .collapsed=${this.hideProperty}
+          .fonts=${this.fonts}
+          .propertyEditor=${this.propertyEditor}
+        >
+        </property-sidebar>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.bindShortcutEvent();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unbindShortcutEvent();
+    }
+    close() {
+        this.model = null;
+        this.requestUpdate();
+    }
+    onShortcut(e) {
+        if (MACOS)
+            var ctrlKey = e.metaKey;
+        else
+            var ctrlKey = e.ctrlKey;
+        switch (e.code) {
+            case 'KeyS':
+                if (ctrlKey) {
+                    this.onTapSave();
+                    e.preventDefault();
+                }
+                break;
+        }
+    }
+    preview() {
+        var _a, _b;
+        const board = {
+            id: 'preview',
+            model: ((_a = this.scene) === null || _a === void 0 ? void 0 : _a.model) ? JSON.parse(JSON.stringify(this.scene.model)) : null,
+            style: (_b = this.scene) === null || _b === void 0 ? void 0 : _b.rootContainer.style
+        };
+        OxPopup.open({
+            template: html ` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,
+            parent: this.renderRoot
+        });
+        requestAnimationFrame(() => {
+            dispatchEvent(new Event('resize'));
+        });
+    }
+    downloadModel() {
+        if (!this.scene)
+            return;
+        var model = JSON.stringify(this.model, null, 2);
+        var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json';
+        saveAs(new Blob([model], { type: 'application/octet-stream' }), filename);
+    }
+    renderBrandingZone() {
+        return html `
+      <div brand>
+        <a href="/">
+          <mwc-icon>home</mwc-icon>
+        </a>
+        <div board_name>${this.boardName}</div>
+      </div>
+    `;
+    }
+    onTapSave() {
+        this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }));
+    }
+    bindShortcutEvent() {
+        // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.
+        const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS'];
+        this.shortcutHandler = (e) => {
+            const target = e.composedPath()[0];
+            var tagName = target.tagName;
+            var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA';
+            var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code);
+            if (!isGlobalHotkey && isInput)
+                return;
+            if (!this.editToolbar.onShortcut(e))
+                this.onShortcut(e);
+        };
+        document.addEventListener('keydown', this.shortcutHandler);
+    }
+    unbindShortcutEvent() {
+        if (this.shortcutHandler) {
+            document.removeEventListener('keydown', this.shortcutHandler);
+            delete this.shortcutHandler;
+        }
+    }
+    onContextMenu() { }
+};
+BoardModeller.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        height: 100%;
+        overflow: hidden;
+      }
+
+      edit-toolbar {
+        flex: 45px;
+        max-height: 45px;
+      }
+
+      div[content] {
+        flex: 1;
+        max-height: calc(100% - 45px);
+
+        display: flex;
+        flex-direction: row;
+      }
+
+      component-toolbar {
+        max-height: 100%;
+      }
+
+      property-sidebar {
+        overflow: hidden;
+      }
+
+      #scene-wrap {
+        position: relative;
+
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+      }
+
+      ox-scene-viewer {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+      }
+
+      mwc-fab {
+        position: absolute;
+        right: 15px;
+        bottom: 15px;
+      }
+
+      ox-popup {
+        width: 90%;
+        height: 90%;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        background: var(--secondary-color, black);
+
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      ox-board-viewer {
+        width: 98%;
+        height: 98%;
+        margin: auto;
+        padding: 0;
+      }
+
+      [brand] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], BoardModeller.prototype, "boardName", void 0);
+__decorate([
+    property({ type: Object })
+], BoardModeller.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], BoardModeller.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: Array })
+], BoardModeller.prototype, "selected", void 0);
+__decorate([
+    property({ type: Number })
+], BoardModeller.prototype, "mode", void 0);
+__decorate([
+    property({ type: Object })
+], BoardModeller.prototype, "provider", void 0);
+__decorate([
+    property({ type: Boolean })
+], BoardModeller.prototype, "hideProperty", void 0);
+__decorate([
+    property({ type: String })
+], BoardModeller.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Object })
+], BoardModeller.prototype, "scene", void 0);
+__decorate([
+    property({ type: Array })
+], BoardModeller.prototype, "componentGroupList", void 0);
+__decorate([
+    property({ type: Array })
+], BoardModeller.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Object })
+], BoardModeller.prototype, "themes", void 0);
+__decorate([
+    property({ type: Array })
+], BoardModeller.prototype, "propertyEditor", void 0);
+__decorate([
+    query('edit-toolbar')
+], BoardModeller.prototype, "editToolbar", void 0);
+BoardModeller = __decorate([
+    customElement('ox-board-modeller')
+], BoardModeller);
+//# sourceMappingURL=ox-board-modeller.js.map

package/dist/src/ox-board-modeller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-modeller.js","sourceRoot":"","sources":["../../src/ox-board-modeller.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\n\nimport '@hatiolab/things-scene'\nimport './modeller/scene-viewer/ox-scene-handler.js'\nimport './modeller/scene-viewer/ox-scene-layer.js'\nimport './modeller/scene-viewer/ox-scene-property.js'\nimport './modeller/scene-viewer/ox-scene-viewer.js'\nimport './ox-board-viewer'\n\nimport { saveAs } from 'file-saver'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { OxPopup } from '@operato/popup'\nimport { isMacOS, togglefullscreen } from '@operato/utils'\n\nimport { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'\nimport { EditToolbar } from './modeller/edit-toolbar'\nimport { PropertySidebar } from './modeller/property-sidebar/property-sidebar'\nimport { ComponentGroup, ComponentTemplate } from './types'\n\nconst MACOS = isMacOS()\n\nconst ICON_PROPERTIES = new URL('../../icons/icon-properties.png', import.meta.url).href\nconst ICON_PROPERTIES_LINE_TYPE = new URL('../../icons/icon-properties-line-type.png', import.meta.url).href\nconst ICON_PROPERTIES_ARROW_TYPE = new URL('../../icons/icon-properties-arrow-type.png', import.meta.url).href\nconst ICON_PROPERTIES_LABEL = new URL('../../icons/icon-properties-label.png', import.meta.url).href\nconst ICON_PROPERTIES_PADDING = new URL('../../icons/icon-properties-padding.png', import.meta.url).href\n\nconst ICON_HTOOLBAR = new URL('../../icons/icon-htoolbar.png', import.meta.url).href\nconst ICON_FULLSCREEN = new URL('../../icons/icon-fullscreen.png', import.meta.url).href\nconst ICON_COLLAPSE = new URL('../../icons/icon-collapse.png', import.meta.url).href\nconst ICON_COLLAPSE_ACTIVE = new URL('../../icons/icon-collapse-active.png', import.meta.url).href\n\nconst ICON_SHELL_INSPECTOR = new URL('../../icons/icon-shell-inspector.png', import.meta.url).href\n\nvar Registry: ComponentGroup[] = []\n\n@customElement('ox-board-modeller')\nexport class BoardModeller extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      edit-toolbar {\n        flex: 45px;\n        max-height: 45px;\n      }\n\n      div[content] {\n        flex: 1;\n        max-height: calc(100% - 45px);\n\n        display: flex;\n        flex-direction: row;\n      }\n\n      component-toolbar {\n        max-height: 100%;\n      }\n\n      property-sidebar {\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        position: relative;\n\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n      }\n\n      ox-scene-viewer {\n        flex: 1;\n        width: 100%;\n        height: 100%;\n      }\n\n      mwc-fab {\n        position: absolute;\n        right: 15px;\n        bottom: 15px;\n      }\n\n      ox-popup {\n        width: 90%;\n        height: 90%;\n        left: 50%;\n        top: 50%;\n        transform: translateX(-50%) translateY(-50%);\n        background: var(--secondary-color, black);\n\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      ox-board-viewer {\n        width: 98%;\n        height: 98%;\n        margin: auto;\n        padding: 0;\n      }\n\n      [brand] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n    `\n  ]\n\n  static registerGroup(group: ComponentGroup) {\n    var found = Registry.find(inRegisterGroup => inRegisterGroup.name == group.name)\n\n    if (found) {\n      found = {\n        ...found,\n        ...group\n      }\n    } else {\n      Registry.push(group)\n    }\n  }\n\n  static registerTemplate(templates: ComponentTemplate[]): void {\n    templates &&\n      templates.forEach(template => {\n        var groups: string[] = typeof template.group == 'string' ? [template.group] : template.group\n\n        Registry.filter(group => groups.includes(group.name)).forEach(group => {\n          if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n            group.templates.push(template)\n          }\n        })\n      })\n  }\n\n  static get groups(): ComponentGroup[] {\n    return Registry\n  }\n\n  static getGroup(name: string) {\n    return Registry.find(group => group.name === name)\n  }\n\n  @property({ type: String }) boardName: string = ''\n  @property({ type: Object }) model: any = null\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Array }) selected: any[] = []\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n  @property({ type: Object }) provider: any = null\n  @property({ type: Boolean }) hideProperty: boolean = false\n  @property({ type: String }) overlay: string = ''\n  @property({ type: Object }) scene?: Scene\n  @property({ type: Array }) componentGroupList: any[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Object }) themes: any = null\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  @query('edit-toolbar') private editToolbar!: EditToolbar\n\n  private group: string = ''\n  private shortcutHandler?: (e: KeyboardEvent) => void\n\n  constructor() {\n    super()\n\n    document.addEventListener('get-all-scene-component-ids', (e: Event) => {\n      var { component, callback } = (e as CustomEvent).detail\n\n      if (!this.scene) return\n\n      var ids\n      if (component) {\n        ids = this.scene.findAll(component).map(c => c.model.id)\n      } else {\n        // @ts-ignore\n        ids = this.scene.ids.map(({ key }) => key)\n      }\n\n      ids = ids.filter(Boolean).sort()\n      callback(ids)\n    })\n\n    this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`)\n    this.style.setProperty('--url-icon-properties-label', `url(${ICON_PROPERTIES_LABEL})`)\n    this.style.setProperty('--url-icon-properties-padding', `url(${ICON_PROPERTIES_PADDING})`)\n    this.style.setProperty('--url-icon-properties-line-type', `url(${ICON_PROPERTIES_LINE_TYPE})`)\n    this.style.setProperty('--url-icon-properties-arrow-type', `url(${ICON_PROPERTIES_ARROW_TYPE})`)\n\n    this.style.setProperty('--url-icon-htoolbar', `url(${ICON_HTOOLBAR})`)\n    this.style.setProperty('--url-icon-fullscreen', `url(${ICON_FULLSCREEN})`)\n    this.style.setProperty('--url-icon-collapse', `url(${ICON_COLLAPSE})`)\n    this.style.setProperty('--url-icon-collapse-active', `url(${ICON_COLLAPSE_ACTIVE})`)\n\n    this.style.setProperty('--url-icon-shell-inspector', `url(${ICON_SHELL_INSPECTOR})`)\n  }\n\n  static get scopedElements() {\n    return {\n      'edit-toolbar': EditToolbar,\n      'property-sidebar': PropertySidebar,\n      'component-toolbar': ComponentToolbar\n    }\n  }\n\n  render() {\n    return html`\n      <edit-toolbar\n        .scene=${this.scene}\n        .selected=${this.selected}\n        @hide-property-changed=${(e: CustomEvent) => (this.hideProperty = e.detail.value)}\n        @open-preview=${() => this.preview()}\n        @download-model=${() => this.downloadModel()}\n        @modeller-fullscreen=${() => togglefullscreen(this)}\n      >\n        ${this.renderBrandingZone()}\n      </edit-toolbar>\n\n      <div content>\n        <component-toolbar\n          .scene=${this.scene}\n          .mode=${this.mode}\n          @mode-changed=${(e: CustomEvent) => {\n            this.mode = e.detail.value\n          }}\n          .componentGroupList=${this.componentGroupList}\n          .group=${this.group}\n        >\n        </component-toolbar>\n\n        <div id=\"scene-wrap\">\n          <ox-scene-viewer\n            id=\"scene\"\n            .scene=${this.scene}\n            @scene-changed=${(e: CustomEvent) => {\n              this.scene = e.detail.value\n            }}\n            .model=${this.model}\n            .themes=${this.themes}\n            .selected=${this.selected}\n            @selected-changed=${(e: CustomEvent) => {\n              this.selected = e.detail.value\n            }}\n            .mode=${this.mode}\n            @mode-changed=${(e: CustomEvent) => {\n              this.mode = e.detail.value\n            }}\n            fit=\"ratio\"\n            .baseUrl=${this.baseUrl}\n            @contextmenu=${() => this.onContextMenu()}\n            .provider=${this.provider}\n            name=\"modeller\"\n          >\n            <ox-scene-layer type=\"selection-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"modeling-layer\"></ox-scene-layer>\n            <ox-scene-layer type=\"add-layer\"> </ox-scene-layer>\n            <ox-scene-layer type=\"guide-layer\">\n              <ox-scene-property name=\"ruler\" value=\"disabled\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"shift-layer\">\n              <ox-scene-property name=\"text\" value=\"${this.overlay}\"></ox-scene-property>\n              <ox-scene-property name=\"alpha\" value=\"0.3\"></ox-scene-property>\n              <ox-scene-property name=\"fontFamily\" value=\"arial\"></ox-scene-property>\n              <ox-scene-property name=\"fontSize\" value=\"30\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"fontColor\" value=\"navy\"></ox-scene-property>\n              <ox-scene-property name=\"textBaseline\" value=\"top\"></ox-scene-property>\n              <ox-scene-property name=\"textAlign\" value=\"left\"></ox-scene-property>\n              <ox-scene-property name=\"paddingTop\" value=\"50\" type=\"number\"></ox-scene-property>\n              <ox-scene-property name=\"paddingLeft\" value=\"50\" type=\"number\"></ox-scene-property>\n            </ox-scene-layer>\n            <ox-scene-layer type=\"decotag-layer\"></ox-scene-layer>\n            <ox-scene-handler type=\"text-editor\"></ox-scene-handler>\n            <ox-scene-handler type=\"move-handler\"></ox-scene-handler>\n          </ox-scene-viewer>\n\n          <mwc-fab icon=\"save\" @click=${() => this.onTapSave()} title=\"save\"> </mwc-fab>\n        </div>\n\n        <property-sidebar\n          .scene=${this.scene}\n          .selected=${this.selected}\n          .collapsed=${this.hideProperty}\n          .fonts=${this.fonts}\n          .propertyEditor=${this.propertyEditor}\n        >\n        </property-sidebar>\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.bindShortcutEvent()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.unbindShortcutEvent()\n  }\n\n  close() {\n    this.model = null\n    this.requestUpdate()\n  }\n\n  onShortcut(e: KeyboardEvent) {\n    if (MACOS) var ctrlKey = e.metaKey\n    else var ctrlKey = e.ctrlKey\n\n    switch (e.code) {\n      case 'KeyS':\n        if (ctrlKey) {\n          this.onTapSave()\n          e.preventDefault()\n        }\n        break\n    }\n  }\n\n  preview() {\n    const board = {\n      id: 'preview',\n      model: this.scene?.model ? JSON.parse(JSON.stringify(this.scene.model)) : null,\n      style: this.scene?.rootContainer.style\n    }\n\n    OxPopup.open({\n      template: html` <ox-board-viewer .provider=${this.provider} .board=${board}></ox-board-viewer> `,\n      parent: this.renderRoot as Element\n    })\n\n    requestAnimationFrame(() => {\n      dispatchEvent(new Event('resize'))\n    })\n  }\n\n  downloadModel() {\n    if (!this.scene) return\n\n    var model = JSON.stringify(this.model, null, 2)\n    var filename = (this.boardName || 'NONAME') + '-' + Date.now() + '.json'\n    saveAs(new Blob([model], { type: 'application/octet-stream' }), filename)\n  }\n\n  renderBrandingZone() {\n    return html`\n      <div brand>\n        <a href=\"/\">\n          <mwc-icon>home</mwc-icon>\n        </a>\n        <div board_name>${this.boardName}</div>\n      </div>\n    `\n  }\n\n  onTapSave() {\n    this.dispatchEvent(new CustomEvent('save-model', { bubbles: true, composed: true, detail: { model: this.model } }))\n  }\n\n  bindShortcutEvent() {\n    // TODO: Global Hotkey에 대한 정의를 edit-toolbar에서 가져올 수 있도록 수정해야 함.\n    const GLOBAL_HOTKEYS = ['Digit1', 'Digit2', 'F11', 'KeyD', 'KeyP', 'KeyS']\n\n    this.shortcutHandler = (e: KeyboardEvent) => {\n      const target = e.composedPath()[0] as HTMLElement\n      var tagName = target.tagName\n      var isInput = target.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA'\n      var isGlobalHotkey = GLOBAL_HOTKEYS.includes(e.code)\n\n      if (!isGlobalHotkey && isInput) return\n      if (!this.editToolbar.onShortcut(e)) this.onShortcut(e)\n    }\n\n    document.addEventListener('keydown', this.shortcutHandler)\n  }\n\n  unbindShortcutEvent() {\n    if (this.shortcutHandler) {\n      document.removeEventListener('keydown', this.shortcutHandler)\n      delete this.shortcutHandler\n    }\n  }\n\n  onContextMenu() {}\n}\n"]}

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

@@ -0,0 +1,64 @@
+import '@material/mwc-fab';
+import '@material/mwc-icon';
+import { LitElement, PropertyValues } from 'lit';
+import { Component, ReferenceProvider } from '@hatiolab/things-scene';
+export declare class BoardViewer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    baseUrl: string;
+    board: any;
+    provider: ReferenceProvider | null;
+    data: any;
+    values: any;
+    hideFullscreen: boolean;
+    hideNavigation: boolean;
+    _scene: any;
+    _forward: {
+        id: string;
+        scene: any;
+    }[];
+    _backward: {
+        id: string;
+        scene: any;
+    }[];
+    _oldtarget?: HTMLElement;
+    _fade_animations?: Array<Animation>;
+    currentBoardId?: string;
+    _target: HTMLElement;
+    _prev: HTMLElement;
+    _next: HTMLElement;
+    _fullscreen: HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changes: PropertyValues<this>): void;
+    initSceneAsync(): Promise<void>;
+    initScene(): void;
+    closeScene(): void;
+    releaseScene(): void;
+    setupScene({ id, scene }: {
+        id: string;
+        scene: any;
+    }): void;
+    showScene(boardId: string, bindingData?: any): Promise<void>;
+    bindSceneEvents(): void;
+    unbindSceneEvents(scene: any): void;
+    transientShowButtons(stop?: boolean): void;
+    onTapNext(): void;
+    onTapPrev(): void;
+    onTapFullscreen(): void;
+    onRunBoard(): void;
+    onLinkGoto(targetBoardId: string, options: any, fromComponent: any): void;
+    onLinkOpen(url: string, value: any, fromComponent: Component): void;
+    onLinkMove(url: string, value: any, fromComponent: Component): void;
+    onRoutePage(page: string): void;
+    onStartScenario(scenario: string, value: string | number | object, component: Component): Promise<void>;
+    onRunScenario(scenario: string, value: string | number | object, component: Component): Promise<void>;
+    getSceneData(): any;
+    getSceneValues(): any;
+    getSceneImageData(base64?: boolean): Promise<{
+        width: any;
+        height: any;
+        data: string | Uint8ClampedArray;
+    } | undefined>;
+    printTrick(image: string): Promise<void>;
+}