@fmsim/board 0.0.49

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

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+import './ox-scene-property';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxSceneHandler = class OxSceneHandler extends LitElement {
+    render() {
+        return html ` <slot select="ox-scene-property"></slot> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let model = {
+            type: this.type
+        };
+        model = Array.from(this.querySelectorAll('ox-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 })
+], OxSceneHandler.prototype, "type", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneHandler.prototype, "model", void 0);
+OxSceneHandler = __decorate([
+    customElement('ox-scene-handler')
+], OxSceneHandler);
+export default OxSceneHandler;
+//# sourceMappingURL=ox-scene-handler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-scene-handler.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-handler.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAOpD,MAAM;QACJ,OAAO,IAAI,CAAA,4CAA4C,CAAA;IACzD,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,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAU,EAAE,QAAa,EAAE,EAAE;YAClG,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,CAAA;AAhC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAG1B;AALkB,cAAc;IADlC,aAAa,CAAC,kBAAkB,CAAC;GACb,cAAc,CAiClC;eAjCoB,cAAc","sourcesContent":["import './ox-scene-property'\n\nimport { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-scene-handler')\nexport default class OxSceneHandler 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=\"ox-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('ox-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/ox-scene-layer.d.ts

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

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

@@ -0,0 +1,42 @@
+import { __decorate } from "tslib";
+import './ox-scene-property';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxSceneLayer = class OxSceneLayer extends LitElement {
+    render() {
+        return html ` <slot select="ox-scene-property"></slot> `;
+    }
+    getModel() {
+        let model = {
+            type: this.type
+        };
+        model = Array.from(this.querySelectorAll('ox-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 })
+], OxSceneLayer.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], OxSceneLayer.prototype, "text", void 0);
+OxSceneLayer = __decorate([
+    customElement('ox-scene-layer')
+], OxSceneLayer);
+export default OxSceneLayer;
+//# sourceMappingURL=ox-scene-layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-scene-layer.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-layer.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAIlD,MAAM;QACJ,OAAO,IAAI,CAAA,4CAA4C,CAAA;IACzD,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,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAU,EAAE,QAAa,EAAE,EAAE;YAClG,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,CAAA;AAlC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAc;AAFtB,YAAY;IADhC,aAAa,CAAC,gBAAgB,CAAC;GACX,YAAY,CAmChC;eAnCoB,YAAY","sourcesContent":["import './ox-scene-property'\n\nimport { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-scene-layer')\nexport default class OxSceneLayer extends LitElement {\n  @property({ type: String }) type?: String\n  @property({ type: String }) text?: String\n\n  render() {\n    return html` <slot select=\"ox-scene-property\"></slot> `\n  }\n\n  getModel() {\n    let model = {\n      type: this.type\n    }\n\n    model = Array.from(this.querySelectorAll('ox-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/ox-scene-property.d.ts

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

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

@@ -0,0 +1,19 @@
+import { __decorate } from "tslib";
+import { customElement, property } from 'lit/decorators.js';
+import { LitElement } from 'lit';
+let OxSceneProperty = 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);
+OxSceneProperty = __decorate([
+    customElement('ox-scene-property')
+], OxSceneProperty);
+export default OxSceneProperty;
+//# sourceMappingURL=ox-scene-property.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-scene-property.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-property.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAGjB,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;CAItD,CAAA;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;AAHtB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAInC;eAJoB,eAAe","sourcesContent":["import { customElement, property } from 'lit/decorators.js'\n\nimport { LitElement } from 'lit'\n\n@customElement('ox-scene-property')\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/ox-scene-viewer.d.ts

@@ -0,0 +1,40 @@
+import './confidential-overlay';
+import './ox-scene-layer';
+import './ox-scene-handler';
+import { LitElement, PropertyValues } from 'lit';
+import { Component, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene';
+export default class OxSceneViewer extends LitElement {
+    static styles: import("lit").CSSResult;
+    scene: Scene | null;
+    model?: Model;
+    mode: SCENE_MODE;
+    screenSize: number;
+    variables: Properties;
+    data: any;
+    themes?: 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/ox-scene-viewer.js

@@ -0,0 +1,253 @@
+import { __decorate } from "tslib";
+import './confidential-overlay';
+import './ox-scene-layer';
+import './ox-scene-handler';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { create as createScene, SCENE_MODE } from '@hatiolab/things-scene';
+let OxSceneViewer = class OxSceneViewer 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('ox-scene-layer')).map(layer => layer.getModel());
+        const handlers = Array.from(this.querySelectorAll('ox-scene-handler')).map(handler => handler.getAttribute('type'));
+        this._setScene(createScene({
+            target: this,
+            model: JSON.parse(JSON.stringify(model)),
+            style: this.themes,
+            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);
+        this.focus();
+    }
+    _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;
+    }
+};
+OxSceneViewer.styles = css `
+    :host {
+      outline: none;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "scene", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "model", void 0);
+__decorate([
+    property({ type: Number })
+], OxSceneViewer.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number })
+], OxSceneViewer.prototype, "screenSize", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "variables", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "themes", void 0);
+__decorate([
+    property({ type: String })
+], OxSceneViewer.prototype, "fit", void 0);
+__decorate([
+    property({ type: Array })
+], OxSceneViewer.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxSceneViewer.prototype, "disposeWhenDetached", void 0);
+__decorate([
+    property({ type: String })
+], OxSceneViewer.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "provider", void 0);
+__decorate([
+    property({ type: String })
+], OxSceneViewer.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxSceneViewer.prototype, "enableInspector", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxSceneViewer.prototype, "showInspector", void 0);
+OxSceneViewer = __decorate([
+    customElement('ox-scene-viewer')
+], OxSceneViewer);
+export default OxSceneViewer;
+//# sourceMappingURL=ox-scene-viewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-scene-viewer.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-viewer.ts"],"names":[],"mappings":";AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,kBAAkB,CAAA;AACzB,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAa,MAAM,IAAI,WAAW,EAAqC,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAKzG,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOe,UAAK,GAAiB,IAAI,CAAA;QAEtD,8EAA8E;QAClD,SAAI,GAAe,UAAU,CAAC,IAAI,CAAA;QAClC,eAAU,GAAW,IAAI,CAAA;QACzB,cAAS,GAAe,EAAE,CAAA;QAGtD;;;;;;;;;WASG;QACyB,QAAG,GAAY,MAAM,CAAA;QACtB,aAAQ,GAAgB,EAAE,CAAA;QACxB,wBAAmB,GAAY,KAAK,CAAA;QACrC,YAAO,GAAW,EAAE,CAAA;QAEpB,SAAI,GAAW,QAAQ,CAAA;QACtB,oBAAe,GAAY,IAAI,CAAA;QAC/B,kBAAa,GAAY,KAAK,CAAA;IAkN7D,CAAC;IA9MC,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC1C,IAAI,CAAC,aAAa,EAAE,CAAA;SACrB;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,iBAAiB,CAAA;IAC9B,CAAC;IAED,OAAO,CAAC,MAA4B;QAClC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvD,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACpD,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACnE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACpD,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC/D,CAAC;IAED,SAAS,CAAC,KAAmB;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;SACzB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,IAAgB;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;SACxB,CAAC,CACH,CAAA;IACH,CAAC;IAED,aAAa,CAAC,SAAqB;QACjC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;QAC1B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAC7B,CAAC,CACH,CAAA;IACH,CAAC;IAED,YAAY,CAAC,QAAqB;QAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;SAC5B,CAAC,CACH,CAAA;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAA;YACzD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAA;YAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;aAC3C;iBAAM;gBACL,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;aACrB;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACpB,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;SACtB;IACH,CAAC;IAED,MAAM,CAAC,KAAc;QACnB,IAAI,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YACjC,IAAI,KAAK,IAAI,IAAI,CAAC,GAAG,KAAK,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE;gBACjG,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,IAAI,CAAC,KAAK,EAAE;wBACd,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;wBACnB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;qBACzB;gBACH,CAAC,CAAC,CAAA;aACH;YAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAA;SACxC;IACH,CAAC;IAED,eAAe,CAAC,KAAa;QAC3B,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,CAAC,KAAK,EAAE;YACV,OAAM;SACP;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAAsB,CAAC,QAAQ,EAAE,CAAC,CAAA;QAEnH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;QAEnH,IAAI,CAAC,SAAS,CACZ,WAAW,CAAC;YACV,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACxC,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,MAAM;YACN,QAAQ;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,WAAW,EAAE,IAAI,CAAC,QAAQ;SAC3B,CAAC,CACH,CAAA;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;SACzC;QAED,IAAI,CAAC,KAAM,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAA;QAEpC;;;WAGG;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEjB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAM,CAAC,SAAS,CAAC,CAAA;QAE5D,IAAI,CAAC,KAAM,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAA;QACzD,IAAI,CAAC,KAAM,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAA;QAEtD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAEpC,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,iBAAiB,CAAC,UAA2B;QAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAM;SACP;QAED,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;SACnD;IACH,CAAC;IAED,cAAc,CAAC,IAAgB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAM;SACP;QACD,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC;IAED,cAAc,CAAC,IAAS;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;YACxB,OAAM;SACP;QAED,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA;IACxB,CAAC;IAED,kBAAkB,CAAC,KAAkB;QACnC;;;;;;;WAOG;QACH,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;QAC1B,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,mBAAmB,CAAC,KAAiB;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAM;SACP;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;YACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;SACrB;QAED,IAAI,KAAK,KAAK,CAAC,EAAE;YACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAA;SACjC;aAAM,IAAI,KAAK,KAAK,CAAC,EAAE;YACtB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAA;SAChC;aAAM;YACL,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;SAC9B;IACH,CAAC;IAED,iBAAiB,CAAC,KAAa;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAM;SACP;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;IAC5B,CAAC;;AAhPM,oBAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAa;AAWZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+CAA2B;AACxB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAqC;AACrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAwB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAgC;AAC/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA+B;AAhCxC,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CAkPjC;eAlPoB,aAAa","sourcesContent":["import './confidential-overlay'\nimport './ox-scene-layer'\nimport './ox-scene-handler'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component, create as createScene, FITMODE, Model, Properties, Scene, SCENE_MODE } from '@hatiolab/things-scene'\n\nimport OxSceneLayer from './ox-scene-layer'\n\n@customElement('ox-scene-viewer')\nexport default class OxSceneViewer 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  @property({ type: Object }) themes?: 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('ox-scene-layer')).map(layer => (layer as OxSceneLayer).getModel())\n\n    const handlers = Array.from(this.querySelectorAll('ox-scene-handler')).map(handler => handler.getAttribute('type'))\n\n    this._setScene(\n      createScene({\n        target: this,\n        model: JSON.parse(JSON.stringify(model)),\n        style: this.themes,\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    this.focus()\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/dist/src/ox-board-list.d.ts

@@ -0,0 +1,2 @@
+import '@operato/popup/ox-popup.js';
+import '@operato/data-grist';