@operato/process 1.1.7 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/process",
-  "version": "1.1.7",
+  "version": "1.1.10",
   "description": "Webcomponent for business process modeling following open-wc recommendations",
   "author": "heartyoh",
   "license": "MIT",
@@ -52,15 +52,16 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.1.3",
-    "@operato/app": "^1.1.7",
-    "@operato/data-grist": "^1.1.7",
-    "@operato/font": "^1.1.7",
+    "@operato/app": "^1.1.10",
+    "@operato/board": "^1.1.10",
+    "@operato/data-grist": "^1.1.10",
+    "@operato/font": "^1.1.10",
     "@operato/graphql": "^1.1.1",
     "@operato/i18n": "^1.1.4",
-    "@operato/input": "^1.1.7",
+    "@operato/input": "^1.1.10",
     "@operato/markdown": "^1.1.1",
-    "@operato/popup": "^1.1.1",
-    "@operato/property-editor": "^1.1.7",
+    "@operato/popup": "^1.1.10",
+    "@operato/property-editor": "^1.1.10",
     "@operato/styles": "^1.1.1",
     "@operato/utils": "^1.1.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -111,5 +112,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3e9c6706facaeaebcc782f2913b5713fe3a09aff"
+  "gitHead": "e4f3cc8687d0e2e0d2650c94097ef99a7315001f"
 }

package/src/modeller/property-sidebar/shapes/shapes.ts

@@ -207,7 +207,7 @@ export class PropertyShapes extends AbstractProperty {
                   ? html``
                   : html`
                       <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
-                      <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+                      <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
                     `}
               </div>
             </fieldset>
@@ -233,13 +233,13 @@ export class PropertyShapes extends AbstractProperty {
                 <input type="number" value-key="depth" .value=${value.depth} />
 
                 <label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
-                <ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
+                <ox-input-angle value-key="rotationX" .value=${value.rotationX}> </ox-input-angle>
 
                 <label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
-                <ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
+                <ox-input-angle value-key="rotationY" .value=${value.rotationY}> </ox-input-angle>
 
                 <label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
-                <ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
+                <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
               </div>
             </fieldset>
           `

package/src/ox-process-modeller.ts

@@ -1,6 +1,10 @@
 import '@material/mwc-fab'
 import '@hatiolab/things-scene'
 import './ox-process-viewer'
+import '@operato/board/ox-scene-handler.js'
+import '@operato/board/ox-scene-layer.js'
+import '@operato/board/ox-scene-property.js'
+import '@operato/board/ox-scene-viewer.js'
 
 import { saveAs } from 'file-saver'
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -16,9 +20,6 @@ import { ComponentGroup, ComponentTemplate } from './types'
 import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar'
 import { EditToolbar } from './modeller/edit-toolbar'
 import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
-import SceneViewer from './modeller/scene-viewer/scene-viewer'
-import SceneLayer from './modeller/scene-viewer/scene-layer'
-import SceneProperty from './modeller/scene-viewer/scene-property'
 
 const MACOS = isMacOS()
 
@@ -74,7 +75,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
         flex-direction: row;
       }
 
-      scene-viewer {
+      ox-scene-viewer {
         flex: 1;
         width: 100%;
         height: 100%;
@@ -201,10 +202,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
     return {
       'process-edit-toolbar': EditToolbar,
       'process-property-sidebar': PropertySidebar,
-      'process-component-toolbar': ComponentToolbar,
-      'scene-viewer': SceneViewer,
-      'scene-layer': SceneLayer,
-      'scene-property': SceneProperty
+      'process-component-toolbar': ComponentToolbar
     }
   }
 
@@ -233,7 +231,7 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
       </process-component-toolbar>
 
       <div id="scene-wrap">
-        <scene-viewer
+        <ox-scene-viewer
           id="scene"
           .scene=${this.scene}
           @scene-changed=${(e: CustomEvent) => {
@@ -254,27 +252,27 @@ export class OxProcessModeller extends ScopedElementsMixin(LitElement) {
           .provider=${this.provider}
           name="modeller"
         >
-          <scene-layer type="selection-layer"></scene-layer>
-          <scene-layer type="modeling-layer"></scene-layer>
-          <scene-layer type="add-layer"> </scene-layer>
-          <scene-layer type="guide-layer">
-            <scene-property name="ruler" value="disabled"></scene-property>
-          </scene-layer>
-          <scene-layer type="shift-layer">
-            <scene-property name="text" value="${this.overlay}"></scene-property>
-            <scene-property name="alpha" value="0.3"></scene-property>
-            <scene-property name="fontFamily" value="arial"></scene-property>
-            <scene-property name="fontSize" value="30" type="number"></scene-property>
-            <scene-property name="fontColor" value="navy"></scene-property>
-            <scene-property name="textBaseline" value="top"></scene-property>
-            <scene-property name="textAlign" value="left"></scene-property>
-            <scene-property name="paddingTop" value="50" type="number"></scene-property>
-            <scene-property name="paddingLeft" value="50" type="number"></scene-property>
-          </scene-layer>
-          <scene-layer type="decotag-layer"></scene-layer>
-          <scene-handler type="text-editor"></scene-handler>
-          <scene-handler type="move-handler"></scene-handler>
-        </scene-viewer>
+          <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>

package/dist/src/modeller/scene-viewer/scene-handler.d.ts

@@ -1,11 +0,0 @@
-import './scene-property';
-import { LitElement } from 'lit';
-export default class SceneHandler extends LitElement {
-    type: string;
-    model: {
-        type: Object;
-        notify: true;
-    };
-    render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): void;
-}

package/dist/src/modeller/scene-viewer/scene-handler.js

@@ -1,32 +0,0 @@
-import { __decorate } from "tslib";
-import './scene-property';
-import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
-export default class SceneHandler extends LitElement {
-    render() {
-        return html ` <slot select="scene-property"></slot> `;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        let model = {
-            type: this.type
-        };
-        model = Array.from(this.querySelectorAll('scene-property')).reduce((model, property) => {
-            const name = property.getAttribute('name');
-            const value = property.getAttribute('value');
-            if (name) {
-                model[name] = value;
-            }
-            return model;
-        }, model);
-        model.__host__ = this;
-        this.model = model;
-    }
-}
-__decorate([
-    property({ type: String })
-], SceneHandler.prototype, "type", void 0);
-__decorate([
-    property({ type: Object })
-], SceneHandler.prototype, "model", void 0);
-//# sourceMappingURL=scene-handler.js.map

package/dist/src/modeller/scene-viewer/scene-handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scene-handler.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/scene-handler.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,UAAU;IAOlD,MAAM;QACJ,OAAO,IAAI,CAAA,yCAAyC,CAAA;IACtD,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,KAAK,GAAQ;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAA;QAED,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAU,EAAE,QAAa,EAAE,EAAE;YAC/F,MAAM,IAAI,GAAG,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;YAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAA;YAE5C,IAAI,IAAI,EAAE;gBACR,KAAK,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;aACpB;YAED,OAAO,KAAK,CAAA;QACd,CAAC,EAAE,KAAK,CAAC,CAAA;QAET,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAA;QAErB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACpB,CAAC;CACF;AAhC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAG1B","sourcesContent":["import './scene-property'\n\nimport { LitElement, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport default class SceneHandler extends LitElement {\n  @property({ type: String }) type!: string\n  @property({ type: Object }) model!: {\n    type: Object\n    notify: true\n  }\n\n  render() {\n    return html` <slot select=\"scene-property\"></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    let model: any = {\n      type: this.type\n    }\n\n    model = Array.from(this.querySelectorAll('scene-property')).reduce((model: any, property: any) => {\n      const name = property.getAttribute('name')\n      const value = property.getAttribute('value')\n\n      if (name) {\n        model[name] = value\n      }\n\n      return model\n    }, model)\n\n    model.__host__ = this\n\n    this.model = model\n  }\n}\n"]}

package/dist/src/modeller/scene-viewer/scene-layer.d.ts

@@ -1,10 +0,0 @@
-import './scene-property';
-import { LitElement } from 'lit';
-export default class SceneLayer extends LitElement {
-    type?: String;
-    text?: String;
-    render(): import("lit-html").TemplateResult<1>;
-    getModel(): {
-        type: String | undefined;
-    };
-}

package/dist/src/modeller/scene-viewer/scene-layer.js

@@ -1,38 +0,0 @@
-import { __decorate } from "tslib";
-import './scene-property';
-import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
-export default class SceneLayer extends LitElement {
-    render() {
-        return html ` <slot select="scene-property"></slot> `;
-    }
-    getModel() {
-        let model = {
-            type: this.type
-        };
-        model = Array.from(this.querySelectorAll('scene-property')).reduce((model, property) => {
-            let value = property.value;
-            if (property.name) {
-                switch (property.type) {
-                    case 'number':
-                        value = Number(value);
-                        break;
-                    case 'boolean':
-                        value = Boolean(value);
-                        break;
-                    default:
-                }
-                model[property.name] = value;
-            }
-            return model;
-        }, model);
-        return model;
-    }
-}
-__decorate([
-    property({ type: String })
-], SceneLayer.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], SceneLayer.prototype, "text", void 0);
-//# sourceMappingURL=scene-layer.js.map

package/dist/src/modeller/scene-viewer/scene-layer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scene-layer.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/scene-layer.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAIhD,MAAM;QACJ,OAAO,IAAI,CAAA,yCAAyC,CAAA;IACtD,CAAC;IAED,QAAQ;QACN,IAAI,KAAK,GAAG;YACV,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAA;QAED,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAU,EAAE,QAAa,EAAE,EAAE;YAC/F,IAAI,KAAK,GAAQ,QAAQ,CAAC,KAAK,CAAA;YAE/B,IAAI,QAAQ,CAAC,IAAI,EAAE;gBACjB,QAAQ,QAAQ,CAAC,IAAI,EAAE;oBACrB,KAAK,QAAQ;wBACX,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;wBACrB,MAAK;oBACP,KAAK,SAAS;wBACZ,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA;wBACtB,MAAK;oBACP,QAAQ;iBACT;gBAED,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;aAC7B;YAED,OAAO,KAAK,CAAA;QACd,CAAC,EAAE,KAAK,CAAC,CAAA;QAET,OAAO,KAAK,CAAA;IACd,CAAC;CACF;AAlC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc","sourcesContent":["import './scene-property'\n\nimport { LitElement, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport default class SceneLayer extends LitElement {\n  @property({ type: String }) type?: String\n  @property({ type: String }) text?: String\n\n  render() {\n    return html` <slot select=\"scene-property\"></slot> `\n  }\n\n  getModel() {\n    let model = {\n      type: this.type\n    }\n\n    model = Array.from(this.querySelectorAll('scene-property')).reduce((model: any, property: any) => {\n      let value: any = property.value\n\n      if (property.name) {\n        switch (property.type) {\n          case 'number':\n            value = Number(value)\n            break\n          case 'boolean':\n            value = Boolean(value)\n            break\n          default:\n        }\n\n        model[property.name] = value\n      }\n\n      return model\n    }, model)\n\n    return model\n  }\n}\n"]}

package/dist/src/modeller/scene-viewer/scene-property.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-export default class OxSceneProperty extends LitElement {
-    name: string;
-    value: string;
-    type: string;
-}

package/dist/src/modeller/scene-viewer/scene-property.js

@@ -1,15 +0,0 @@
-import { __decorate } from "tslib";
-import { property } from 'lit/decorators.js';
-import { LitElement } from 'lit';
-export default class OxSceneProperty extends LitElement {
-}
-__decorate([
-    property({ type: String })
-], OxSceneProperty.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], OxSceneProperty.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], OxSceneProperty.prototype, "type", void 0);
-//# sourceMappingURL=scene-property.js.map

package/dist/src/modeller/scene-viewer/scene-property.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scene-property.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/scene-property.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEhC,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;CAItD;AAH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc","sourcesContent":["import { property } from 'lit/decorators.js'\n\nimport { LitElement } from 'lit'\n\nexport default class OxSceneProperty extends LitElement {\n  @property({ type: String }) name!: string\n  @property({ type: String }) value!: string\n  @property({ type: String }) type!: string\n}\n"]}

package/dist/src/modeller/scene-viewer/scene-viewer.d.ts

@@ -1,38 +0,0 @@
-import './scene-layer';
-import './scene-handler';
-import { LitElement, PropertyValues } from 'lit';
-import { Component, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene';
-export default class SceneViewer extends LitElement {
-    static styles: import("lit").CSSResult;
-    scene: Scene | null;
-    model?: Model;
-    mode: SCENE_MODE;
-    screenSize: number;
-    variables: Properties;
-    data: any;
-    fit: FITMODE;
-    selected: Component[];
-    disposeWhenDetached: boolean;
-    baseUrl: string;
-    provider: any;
-    name: string;
-    enableInspector: boolean;
-    showInspector: boolean;
-    private lastOffsetWidth?;
-    disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    updated(change: PropertyValues<this>): void;
-    _setScene(scene: Scene | null): void;
-    _setMode(mode: SCENE_MODE): void;
-    _setVariables(variables: Properties): void;
-    _setSelected(selected: Component[]): void;
-    _disposeScene(): void;
-    resize(force: boolean): void;
-    _onModelChanged(model?: Model): void;
-    _onDisplayChanged(screenSize: string | number): void;
-    _onModeChanged(mode: SCENE_MODE): void;
-    _onDataChanged(data: any): void;
-    _onSelectedChanged(after: Component[]): void;
-    _onSceneModeChanged(after: SCENE_MODE): void;
-    _onBaseUrlChanged(after: string): void;
-}

package/dist/src/modeller/scene-viewer/scene-viewer.js

@@ -1,243 +0,0 @@
-import { __decorate } from "tslib";
-import './scene-layer';
-import './scene-handler';
-import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { create as createScene, SCENE_MODE } from '@hatiolab/things-scene';
-export default class SceneViewer extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.scene = null;
-        /* Scene Mode - mode 0 : view mode, mode 1 : edit mode, mode 2 : shift mode */
-        this.mode = SCENE_MODE.VIEW;
-        this.screenSize = 13.3;
-        this.variables = {};
-        /*
-         * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.
-         *
-         * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.
-         * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.
-         * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
-         * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
-         * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.
-         * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.
-         */
-        this.fit = 'none';
-        this.selected = [];
-        this.disposeWhenDetached = false;
-        this.baseUrl = '';
-        this.name = 'noname';
-        this.enableInspector = true;
-        this.showInspector = false;
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.scene && this.disposeWhenDetached) {
-            this._disposeScene();
-        }
-    }
-    render() {
-        return html ` <slot></slot> `;
-    }
-    updated(change) {
-        change.has('model') && this._onModelChanged(this.model);
-        change.has('mode') && this._onModeChanged(this.mode);
-        change.has('screenSize') && this._onDisplayChanged(this.screenSize);
-        change.has('data') && this._onDataChanged(this.data);
-        change.has('baseUrl') && this._onBaseUrlChanged(this.baseUrl);
-    }
-    _setScene(scene) {
-        this.scene = scene;
-        this.dispatchEvent(new CustomEvent('scene-changed', {
-            bubbles: true,
-            composed: true,
-            detail: { value: scene }
-        }));
-    }
-    _setMode(mode) {
-        this.mode = mode;
-        this.dispatchEvent(new CustomEvent('mode-changed', {
-            bubbles: true,
-            composed: true,
-            detail: { value: mode }
-        }));
-    }
-    _setVariables(variables) {
-        this.variables = variables;
-        this.dispatchEvent(new CustomEvent('variables-changed', {
-            bubbles: true,
-            composed: true,
-            detail: { value: variables }
-        }));
-    }
-    _setSelected(selected) {
-        this.selected = selected;
-        this.dispatchEvent(new CustomEvent('selected-changed', {
-            bubbles: true,
-            composed: true,
-            detail: { value: selected }
-        }));
-    }
-    _disposeScene() {
-        if (this.scene) {
-            this.scene.off('selected', this._onSelectedChanged, this);
-            this.scene.off('mode', this._onSceneModeChanged, this);
-            if (this.provider) {
-                this.scene.release && this.scene.release();
-            }
-            else {
-                this.scene.dispose();
-            }
-            this._setScene(null);
-            this._setSelected([]);
-        }
-    }
-    resize(force) {
-        if (typeof this.scene == 'object') {
-            if (force || this.fit === 'both' || Math.abs(this.offsetWidth - (this.lastOffsetWidth || 0)) >= 1) {
-                requestAnimationFrame(() => {
-                    if (this.scene) {
-                        this.scene.resize();
-                        this.scene.fit(this.fit);
-                    }
-                });
-            }
-            this.lastOffsetWidth = this.offsetWidth;
-        }
-    }
-    _onModelChanged(model) {
-        this._disposeScene();
-        if (!model) {
-            return;
-        }
-        const layers = Array.from(this.querySelectorAll('scene-layer')).map(layer => layer.getModel());
-        const handlers = Array.from(this.querySelectorAll('scene-handler')).map(handler => handler.getAttribute('type'));
-        this._setScene(createScene({
-            target: this,
-            model: JSON.parse(JSON.stringify(model)),
-            layers,
-            handlers,
-            mode: this.mode,
-            refProvider: this.provider
-        }));
-        if (this.provider) {
-            this.provider.add(this.name, this.scene);
-        }
-        this.scene.screen = this.screenSize;
-        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
-         * 이 때는 정상적으로 그려주고,
-         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
-         */
-        this.resize(true);
-        this._setVariables(model.variables || this.scene.variables);
-        this.scene.on('selected', this._onSelectedChanged, this);
-        this.scene.on('mode', this._onSceneModeChanged, this);
-        this._onModeChanged(this.mode);
-        this._onDisplayChanged(this.screenSize);
-        this._onBaseUrlChanged(this.baseUrl);
-    }
-    _onDisplayChanged(screenSize) {
-        if (!this.scene) {
-            return;
-        }
-        if (screenSize) {
-            this.scene.screen = parseFloat(String(screenSize));
-        }
-    }
-    _onModeChanged(mode) {
-        if (!this.scene) {
-            return;
-        }
-        this.scene.mode = Number(mode);
-    }
-    _onDataChanged(data) {
-        if (!this.scene || !data) {
-            return;
-        }
-        this.scene.data = data;
-    }
-    _onSelectedChanged(after) {
-        /*
-         scene 컴포넌트의 속성을 속성 에디터(input box등)에서 변경하다가,
-         scene의 다른 컴포넌트를 클릭해서 포커스(선택) 컴포넌트를 변경하게되면,
-         속성 에디터(input box등)의 value change 이벤트의 처리와 충돌(레이스)하게된다.
-         
-         기대하는 순서는 먼저 속성 에디터의 value change 이벤트를 처리한 후에,
-         selected 이벤트를 처리할 수 있도록 requestAnimationFrame으로 한 프레임을 지연하도록 하였다.
-         */
-        requestAnimationFrame(() => {
-            this._setSelected(after);
-        });
-    }
-    _onSceneModeChanged(after) {
-        if (!this.scene) {
-            return;
-        }
-        if (this.mode !== after) {
-            this._setMode(after);
-        }
-        if (after === 2) {
-            this.style.cursor = 'all-scroll';
-        }
-        else if (after === 3) {
-            this.style.cursor = 'crosshair';
-        }
-        else {
-            this.style.cursor = 'default';
-        }
-    }
-    _onBaseUrlChanged(after) {
-        if (!this.scene) {
-            return;
-        }
-        this.scene.baseUrl = after;
-    }
-}
-SceneViewer.styles = css `
-    :host {
-      outline: none;
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], SceneViewer.prototype, "scene", void 0);
-__decorate([
-    property({ type: Object })
-], SceneViewer.prototype, "model", void 0);
-__decorate([
-    property({ type: Number })
-], SceneViewer.prototype, "mode", void 0);
-__decorate([
-    property({ type: Number })
-], SceneViewer.prototype, "screenSize", void 0);
-__decorate([
-    property({ type: Object })
-], SceneViewer.prototype, "variables", void 0);
-__decorate([
-    property({ type: Object })
-], SceneViewer.prototype, "data", void 0);
-__decorate([
-    property({ type: String })
-], SceneViewer.prototype, "fit", void 0);
-__decorate([
-    property({ type: Array })
-], SceneViewer.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean })
-], SceneViewer.prototype, "disposeWhenDetached", void 0);
-__decorate([
-    property({ type: String })
-], SceneViewer.prototype, "baseUrl", void 0);
-__decorate([
-    property({ type: Object })
-], SceneViewer.prototype, "provider", void 0);
-__decorate([
-    property({ type: String })
-], SceneViewer.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean })
-], SceneViewer.prototype, "enableInspector", void 0);
-__decorate([
-    property({ type: Boolean })
-], SceneViewer.prototype, "showInspector", void 0);
-//# sourceMappingURL=scene-viewer.js.map

package/dist/src/modeller/scene-viewer/scene-viewer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scene-viewer.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/scene-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import './scene-layer'\nimport './scene-handler'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component, create as createScene, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene'\n\nimport SceneLayer from './scene-layer'\n\nexport default class SceneViewer extends LitElement {\n  static styles = css`\n    :host {\n      outline: none;\n    }\n  `\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) model?: Model\n  /* Scene Mode - mode 0 : view mode, mode 1 : edit mode, mode 2 : shift mode */\n  @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n  @property({ type: Number }) screenSize: number = 13.3\n  @property({ type: Object }) variables: Properties = {}\n  @property({ type: Object }) data: any\n  /*\n   * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.\n   *\n   * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.\n   * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.\n   * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.\n   * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.\n   * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.\n   * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.\n   */\n  @property({ type: String }) fit: FITMODE = 'none'\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Boolean }) disposeWhenDetached: boolean = false\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Object }) provider: any\n  @property({ type: String }) name: string = 'noname'\n  @property({ type: Boolean }) enableInspector: boolean = true\n  @property({ type: Boolean }) showInspector: boolean = false\n\n  private lastOffsetWidth?: number\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    if (this.scene && this.disposeWhenDetached) {\n      this._disposeScene()\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('model') && this._onModelChanged(this.model)\n    change.has('mode') && this._onModeChanged(this.mode)\n    change.has('screenSize') && this._onDisplayChanged(this.screenSize)\n    change.has('data') && this._onDataChanged(this.data)\n    change.has('baseUrl') && this._onBaseUrlChanged(this.baseUrl)\n  }\n\n  _setScene(scene: Scene | null) {\n    this.scene = scene\n    this.dispatchEvent(\n      new CustomEvent('scene-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: scene }\n      })\n    )\n  }\n\n  _setMode(mode: SCENE_MODE) {\n    this.mode = mode\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _setVariables(variables: Properties) {\n    this.variables = variables\n    this.dispatchEvent(\n      new CustomEvent('variables-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: variables }\n      })\n    )\n  }\n\n  _setSelected(selected: Component[]) {\n    this.selected = selected\n    this.dispatchEvent(\n      new CustomEvent('selected-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: selected }\n      })\n    )\n  }\n\n  _disposeScene() {\n    if (this.scene) {\n      this.scene.off('selected', this._onSelectedChanged, this)\n      this.scene.off('mode', this._onSceneModeChanged, this)\n\n      if (this.provider) {\n        this.scene.release && this.scene.release()\n      } else {\n        this.scene.dispose()\n      }\n\n      this._setScene(null)\n      this._setSelected([])\n    }\n  }\n\n  resize(force: boolean) {\n    if (typeof this.scene == 'object') {\n      if (force || this.fit === 'both' || Math.abs(this.offsetWidth - (this.lastOffsetWidth || 0)) >= 1) {\n        requestAnimationFrame(() => {\n          if (this.scene) {\n            this.scene.resize()\n            this.scene.fit(this.fit)\n          }\n        })\n      }\n\n      this.lastOffsetWidth = this.offsetWidth\n    }\n  }\n\n  _onModelChanged(model?: Model) {\n    this._disposeScene()\n\n    if (!model) {\n      return\n    }\n\n    const layers = Array.from(this.querySelectorAll('scene-layer')).map(layer => (layer as SceneLayer).getModel())\n\n    const handlers = Array.from(this.querySelectorAll('scene-handler')).map(handler => handler.getAttribute('type'))\n\n    this._setScene(\n      createScene({\n        target: this,\n        model: JSON.parse(JSON.stringify(model)),\n        layers,\n        handlers,\n        mode: this.mode,\n        refProvider: this.provider\n      })\n    )\n\n    if (this.provider) {\n      this.provider.add(this.name, this.scene)\n    }\n\n    this.scene!.screen = this.screenSize\n\n    /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n     * 이 때는 정상적으로 그려주고,\n     * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n     */\n    this.resize(true)\n\n    this._setVariables(model.variables || this.scene!.variables)\n\n    this.scene!.on('selected', this._onSelectedChanged, this)\n    this.scene!.on('mode', this._onSceneModeChanged, this)\n\n    this._onModeChanged(this.mode)\n    this._onDisplayChanged(this.screenSize)\n    this._onBaseUrlChanged(this.baseUrl)\n  }\n\n  _onDisplayChanged(screenSize: string | number) {\n    if (!this.scene) {\n      return\n    }\n\n    if (screenSize) {\n      this.scene.screen = parseFloat(String(screenSize))\n    }\n  }\n\n  _onModeChanged(mode: SCENE_MODE) {\n    if (!this.scene) {\n      return\n    }\n    this.scene.mode = Number(mode)\n  }\n\n  _onDataChanged(data: any) {\n    if (!this.scene || !data) {\n      return\n    }\n\n    this.scene.data = data\n  }\n\n  _onSelectedChanged(after: Component[]) {\n    /*\n     scene 컴포넌트의 속성을 속성 에디터(input box등)에서 변경하다가,\n     scene의 다른 컴포넌트를 클릭해서 포커스(선택) 컴포넌트를 변경하게되면,\n     속성 에디터(input box등)의 value change 이벤트의 처리와 충돌(레이스)하게된다.\n     \n     기대하는 순서는 먼저 속성 에디터의 value change 이벤트를 처리한 후에,\n     selected 이벤트를 처리할 수 있도록 requestAnimationFrame으로 한 프레임을 지연하도록 하였다.\n     */\n    requestAnimationFrame(() => {\n      this._setSelected(after)\n    })\n  }\n\n  _onSceneModeChanged(after: SCENE_MODE) {\n    if (!this.scene) {\n      return\n    }\n\n    if (this.mode !== after) {\n      this._setMode(after)\n    }\n\n    if (after === 2) {\n      this.style.cursor = 'all-scroll'\n    } else if (after === 3) {\n      this.style.cursor = 'crosshair'\n    } else {\n      this.style.cursor = 'default'\n    }\n  }\n\n  _onBaseUrlChanged(after: string) {\n    if (!this.scene) {\n      return\n    }\n\n    this.scene.baseUrl = after\n  }\n}\n"]}

package/src/modeller/scene-viewer/scene-handler.ts

@@ -1,39 +0,0 @@
-import './scene-property'
-
-import { LitElement, html } from 'lit'
-import { property } from 'lit/decorators.js'
-
-export default class SceneHandler extends LitElement {
-  @property({ type: String }) type!: string
-  @property({ type: Object }) model!: {
-    type: Object
-    notify: true
-  }
-
-  render() {
-    return html` <slot select="scene-property"></slot> `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    let model: any = {
-      type: this.type
-    }
-
-    model = Array.from(this.querySelectorAll('scene-property')).reduce((model: any, property: any) => {
-      const name = property.getAttribute('name')
-      const value = property.getAttribute('value')
-
-      if (name) {
-        model[name] = value
-      }
-
-      return model
-    }, model)
-
-    model.__host__ = this
-
-    this.model = model
-  }
-}