@operato/board 1.1.24 → 1.1.26

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.
 
+### [1.1.26](https://github.com/hatiolab/operato/compare/v1.1.25...v1.1.26) (2022-12-05)
+
+
+### :bug: Bug Fix
+
+* modeller component-toolbar overflow issue ([c235549](https://github.com/hatiolab/operato/commit/c235549b2e8f7fd47e6b90fd0ff4aadb7239597a))
+
+
+
+### [1.1.25](https://github.com/hatiolab/operato/compare/v1.1.24...v1.1.25) (2022-12-05)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
 ### [1.1.24](https://github.com/hatiolab/operato/compare/v1.1.23...v1.1.24) (2022-12-04)
 
 **Note:** Version bump only for package @operato/board

package/dist/src/modeller/component-toolbar/component-toolbar.d.ts

@@ -14,6 +14,7 @@ export declare class ComponentToolbar extends ComponentToolbar_base {
     mode: SCENE_MODE;
     shift: HTMLImageElement;
     private menu;
+    private componentsContainer;
     private groups;
     private icons;
     updated(changes: PropertyValues<this>): void;
@@ -21,6 +22,7 @@ export declare class ComponentToolbar extends ComponentToolbar_base {
         'component-menu': typeof ComponentMenu;
     };
     render(): import("lit-html").TemplateResult<1>;
+    onWheelEvent(e: Event): void;
     _setMode(mode: SCENE_MODE): void;
     _onClickShift(e: MouseEvent): void;
     _onClickGroup(e: MouseEvent): Promise<void>;

package/dist/src/modeller/component-toolbar/component-toolbar.js

@@ -48,17 +48,19 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
         const componentList = this.componentGroupList || [];
         const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit'];
         return html `
-      <img id="shift" .src=${modeIcon} @click=${(e) => this._onClickShift(e)} />
+      <div components @mousewheel=${(e) => this.onWheelEvent(e)}>
+        <img id="shift" .src=${modeIcon} @click=${(e) => this._onClickShift(e)} />
 
-      ${componentList
+        ${componentList
             .filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
             .map(group => html `
-            <img
-              data-group=${group.name}
-              @click=${(e) => this._onClickGroup(e)}
-              .src=${this.icons[group.name]}
-            />
-          `)}
+              <img
+                data-group=${group.name}
+                @click=${(e) => this._onClickGroup(e)}
+                .src=${this.icons[group.name]}
+              />
+            `)}
+      </div>
 
       <component-menu
         tabindex="-1"
@@ -73,6 +75,11 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
       </component-menu>
     `;
     }
+    onWheelEvent(e) {
+        var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
+        this.componentsContainer.scrollTop += delta * 10;
+        e.preventDefault();
+    }
     _setMode(mode) {
         this.mode = mode;
         this.dispatchEvent(new CustomEvent('mode-changed', {
@@ -113,7 +120,17 @@ ComponentToolbar.styles = [
         background-color: var(--component-toolbar-background-color);
       }
 
-      img {
+      [components] {
+        display: block;
+        padding: 0;
+        margin: 0;
+
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      [components] > img {
         display: flex;
         flex-direction: row;
 
@@ -162,6 +179,9 @@ __decorate([
 __decorate([
     query('component-menu')
 ], ComponentToolbar.prototype, "menu", void 0);
+__decorate([
+    query('div[components]')
+], ComponentToolbar.prototype, "componentsContainer", void 0);
 __decorate([
     queryAll('[data-group]')
 ], ComponentToolbar.prototype, "groups", void 0);

package/dist/src/modeller/component-toolbar/component-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, queryAll } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { ComponentGroup } from '../../types'\nimport { ComponentMenu } from './component-menu.js'\nimport { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'\n\nexport class ComponentToolbar extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      img {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        padding: 6px;\n        box-sizing: border-box;\n      }\n\n      #shift[active] {\n        background-color: #beb9b3;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: ComponentGroup[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n\n  @query('#shift') shift!: HTMLImageElement\n  @query('component-menu') private menu!: HTMLElement\n  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>\n\n  private icons: { [name: string]: string } = {}\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('componentGroupList')) {\n      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')\n\n      this.icons = (this.componentGroupList || [])\n        .filter(group => group.templates?.length > 0)\n        .reduce((sum, group: ComponentGroup) => {\n          sum[group.name] =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))\n          return sum\n        }, {} as { [name: string]: string })\n\n      this.icons['mode-edit'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))\n      this.icons['mode-shift'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))\n    }\n\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  static get scopedElements() {\n    return {\n      'component-menu': ComponentMenu\n    }\n  }\n\n  render() {\n    const componentList = this.componentGroupList || []\n    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']\n\n    return html`\n      <img id=\"shift\" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />\n\n      ${componentList\n        .filter(group => group.templates?.length > 0)\n        .map(\n          group => html`\n            <img\n              data-group=${group.name}\n              @click=${(e: MouseEvent) => this._onClickGroup(e)}\n              .src=${this.icons[group.name]}\n            />\n          `\n        )}\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${componentList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  _setMode(mode: SCENE_MODE) {\n    this.mode = mode\n\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _onClickShift(e: MouseEvent) {\n    const shift = this.shift\n\n    if (shift.hasAttribute('active')) {\n      shift.removeAttribute('active')\n      this._setMode(SCENE_MODE.EDIT)\n    } else {\n      shift.setAttribute('active', '')\n      this._setMode(SCENE_MODE.SHIFT)\n    }\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}
+{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, queryAll } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { ComponentGroup } from '../../types'\nimport { ComponentMenu } from './component-menu.js'\nimport { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'\n\nexport class ComponentToolbar extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      [components] {\n        display: block;\n        padding: 0;\n        margin: 0;\n\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      [components] > img {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        padding: 6px;\n        box-sizing: border-box;\n      }\n\n      #shift[active] {\n        background-color: #beb9b3;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: ComponentGroup[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.EDIT\n\n  @query('#shift') shift!: HTMLImageElement\n  @query('component-menu') private menu!: HTMLElement\n  @query('div[components]') private componentsContainer!: HTMLElement\n  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>\n\n  private icons: { [name: string]: string } = {}\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('componentGroupList')) {\n      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')\n\n      this.icons = (this.componentGroupList || [])\n        .filter(group => group.templates?.length > 0)\n        .reduce((sum, group: ComponentGroup) => {\n          sum[group.name] =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))\n          return sum\n        }, {} as { [name: string]: string })\n\n      this.icons['mode-edit'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))\n      this.icons['mode-shift'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))\n    }\n\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  static get scopedElements() {\n    return {\n      'component-menu': ComponentMenu\n    }\n  }\n\n  render() {\n    const componentList = this.componentGroupList || []\n    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']\n\n    return html`\n      <div components @mousewheel=${(e: MouseEvent) => this.onWheelEvent(e)}>\n        <img id=\"shift\" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />\n\n        ${componentList\n          .filter(group => group.templates?.length > 0)\n          .map(\n            group => html`\n              <img\n                data-group=${group.name}\n                @click=${(e: MouseEvent) => this._onClickGroup(e)}\n                .src=${this.icons[group.name]}\n              />\n            `\n          )}\n      </div>\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${componentList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  onWheelEvent(e: Event) {\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n    this.componentsContainer.scrollTop += delta * 10\n\n    e.preventDefault()\n  }\n\n  _setMode(mode: SCENE_MODE) {\n    this.mode = mode\n\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _onClickShift(e: MouseEvent) {\n    const shift = this.shift\n\n    if (shift.hasAttribute('active')) {\n      shift.removeAttribute('active')\n      this._setMode(SCENE_MODE.EDIT)\n    } else {\n      shift.setAttribute('active', '')\n      this._setMode(SCENE_MODE.SHIFT)\n    }\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}

package/dist/src/ox-board-modeller.d.ts

@@ -1,6 +1,9 @@
 import '@material/mwc-fab';
-import './modeller/scene-viewer/ox-scene-viewer';
 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 { LitElement } from 'lit';
 import { Scene, SCENE_MODE } from '@hatiolab/things-scene';
@@ -8,7 +11,7 @@ import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar
 import { EditToolbar } from './modeller/edit-toolbar';
 import { PropertySidebar } from './modeller/property-sidebar/property-sidebar';
 import { ComponentGroup, ComponentTemplate } from './types';
-declare const BoardModeller_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+declare const BoardModeller_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
 export declare class BoardModeller extends BoardModeller_base {
     static styles: import("lit").CSSResult[];
     static registerGroup(group: ComponentGroup): void;

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

@@ -1,7 +1,10 @@
 import { __decorate } from "tslib";
 import '@material/mwc-fab';
-import './modeller/scene-viewer/ox-scene-viewer';
 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';
@@ -83,7 +86,7 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
                 // @ts-ignore
                 ids = this.scene.ids.map(({ key }) => key);
             }
-            ids = ids.filter(id => !!id).sort();
+            ids = ids.filter(Boolean).sort();
             callback(ids);
         });
         this.style.setProperty('--url-icon-properties', `url(${ICON_PROPERTIES})`);
@@ -117,72 +120,74 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
         ${this.renderBrandingZone()}
       </edit-toolbar>
 
-      <component-toolbar
-        .scene=${this.scene}
-        .mode=${this.mode}
-        @mode-changed=${(e) => {
+      <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>
+          .componentGroupList=${this.componentGroupList}
+          .group=${this.group}
+        >
+        </component-toolbar>
 
-      <div id="scene-wrap">
-        <ox-scene-viewer
-          id="scene"
-          .scene=${this.scene}
-          @scene-changed=${(e) => {
+        <div id="scene-wrap">
+          <ox-scene-viewer
+            id="scene"
+            .scene=${this.scene}
+            @scene-changed=${(e) => {
             this.scene = e.detail.value;
         }}
-          .model=${this.model}
-          .selected=${this.selected}
-          @selected-changed=${(e) => {
+            .model=${this.model}
+            .selected=${this.selected}
+            @selected-changed=${(e) => {
             this.selected = e.detail.value;
         }}
-          .mode=${this.mode}
-          @mode-changed=${(e) => {
+            .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>
+            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>
+          <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>
+        <property-sidebar
+          .scene=${this.scene}
+          .selected=${this.selected}
+          .collapsed=${this.hideProperty}
+          .fonts=${this.fonts}
+          .propertyEditor=${this.propertyEditor}
+        >
+        </property-sidebar>
+      </div>
     `;
     }
     connectedCallback() {
@@ -264,34 +269,38 @@ let BoardModeller = class BoardModeller extends ScopedElementsMixin(LitElement)
 BoardModeller.styles = [
     css `
       :host {
-        display: grid;
-
-        grid-template-rows: auto 1fr;
-        grid-template-columns: auto 1fr auto;
-        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';
-        grid-gap: 0;
+        display: flex;
+        flex-direction: column;
 
         height: 100%;
         overflow: hidden;
       }
 
       edit-toolbar {
-        grid-area: toolbar;
+        flex: 45px;
+        max-height: 45px;
+      }
+
+      div[content] {
+        flex: 1;
+        max-height: calc(100% - 45px);
+
+        display: flex;
+        flex-direction: row;
       }
 
       component-toolbar {
-        grid-area: palletbar;
+        max-height: 100%;
       }
 
       property-sidebar {
-        grid-area: propertybar;
         overflow: hidden;
       }
 
       #scene-wrap {
-        grid-area: scene;
         position: relative;
 
+        flex: 1;
         display: flex;
         flex-direction: row;
       }

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

@@ -1 +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 './modeller/scene-viewer/ox-scene-viewer'\nimport '@hatiolab/things-scene'\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: grid;\n\n        grid-template-rows: auto 1fr;\n        grid-template-columns: auto 1fr auto;\n        grid-template-areas: 'toolbar toolbar toolbar' 'palletbar scene propertybar';\n        grid-gap: 0;\n\n        height: 100%;\n        overflow: hidden;\n      }\n\n      edit-toolbar {\n        grid-area: toolbar;\n      }\n\n      component-toolbar {\n        grid-area: palletbar;\n      }\n\n      property-sidebar {\n        grid-area: propertybar;\n        overflow: hidden;\n      }\n\n      #scene-wrap {\n        grid-area: scene;\n        position: relative;\n\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  ]\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 group = Registry.find(group => group.name == template.group)\n\n        if (!group) {\n          console.warn('Invalid group', group, template)\n          return\n        }\n\n        if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n          group.templates.push(template)\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: 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(id => !!id).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      <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          .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    `\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    }\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  }\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"]}
+{"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 '@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  ]\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 group = Registry.find(group => group.name == template.group)\n\n        if (!group) {\n          console.warn('Invalid group', group, template)\n          return\n        }\n\n        if (!group.templates.find(inGroupTemplate => inGroupTemplate.type == template.type)) {\n          group.templates.push(template)\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: 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            .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    }\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  }\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"]}