@operato/board 0.2.44 → 0.2.48

package/dist/src/modeller/property-sidebar/styles/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@things-factory/help'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\nimport '@things-factory/modeller-ui/client/editors/things-editor-color-style'\nimport '@things-factory/modeller-ui/client/editors/things-editor-font-selector'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-style')\nclass PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      paper-slider {\n        width: 100%;\n      }\n\n      .btn-group {\n        height: 24px;\n      }\n\n      .btn-group paper-button {\n        width: 30px;\n        height: 24px;\n        min-width: initial;\n        margin: 0 4px 0 0;\n        padding: 0;\n        border-radius: 0;\n        display: inline-block;\n        border-bottom: 2px solid #fff;\n\n        background: url(/assets/images/icon-properties.png) no-repeat;\n        background-size: 70%;\n      }\n\n      .btn-group paper-button.tbold {\n        background-position: 50% -170px;\n      }\n\n      .btn-group paper-button.titalic {\n        background-position: 50% -205px;\n      }\n\n      .btn-group paper-button.tunderline {\n        background-position: 50% -240px;\n      }\n\n      .btn-group paper-button.tstrikethrough {\n        background-position: 50% -415px;\n      }\n\n      .btn-group paper-button[active] {\n        border-color: #f2471c;\n      }\n\n      .line-type paper-listbox {\n        overflow: hidden;\n        max-width: 100px;\n      }\n      .line-type paper-item {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat;\n        min-height: 25px;\n        padding: 3px 9px;\n        width: 80px;\n      }\n\n      .line-type paper-item.solid {\n        background-position: 50% 10px;\n      }\n      .line-type paper-item.round-dot {\n        background-position: 50% -40px;\n      }\n      .line-type paper-item.square-dot {\n        background-position: 50% -90px;\n      }\n      .line-type paper-item.dash {\n        background-position: 50% -140px;\n      }\n      .line-type paper-item.dash-dot {\n        background-position: 50% -190px;\n      }\n      .line-type paper-item.long-dash {\n        background-position: 50% -240px;\n      }\n      .line-type paper-item.long-dash-dot {\n        background-position: 50% -290px;\n      }\n      .line-type paper-item.long-dash-dot-dot {\n        background-position: 50% -340px;\n      }\n\n      .line-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-line-type.png) 50% 0 no-repeat !important;\n      }\n      .line-type.solid .paper-input-container input {\n        background-position: 50% 5px !important;\n      }\n      .line-type.round-dot .paper-input-container input {\n        background-position: 50% -45px !important;\n      }\n      .line-type.square-dot .paper-input-container input {\n        background-position: 50% -85px !important;\n      }\n      .line-type.dash .paper-input-container input {\n        background-position: 50% -145px !important;\n      }\n      .line-type.dash-dot .paper-input-container input {\n        background-position: 50% -185px !important;\n      }\n      .line-type.long-dash .paper-input-container input {\n        background-position: 50% -245px !important;\n      }\n      .line-type.long-dash-dot .paper-input-container input {\n        background-position: 50% -285px !important;\n      }\n      .line-type.long-dash-dot-dot .paper-input-container input {\n        background-position: 50% -345px !important;\n      }\n\n      .arrow-type paper-menu {\n        overflow: hidden;\n        max-width: 140px;\n      }\n      .arrow-type paper-item {\n        background: url(/assets/images/icon-properties-arrow-type.png) 50% 0 no-repeat;\n        min-height: 30px;\n        padding: 3px 7px;\n        width: 30px;\n        float: left;\n      }\n      .arrow-type paper-item.begin-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.begin-arrow {\n        background-position: 50% -39px;\n      }\n      .arrow-type paper-item.begin-open-arrow {\n        background-position: 50% -89px;\n      }\n      .arrow-type paper-item.begin-stealth-arrow {\n        background-position: 50% -139px;\n      }\n      .arrow-type paper-item.begin-diamond-arrow {\n        background-position: 50% -190px;\n      }\n      .arrow-type paper-item.begin-oval-arrow {\n        background-position: 50% -238px;\n      }\n      .arrow-type paper-item.begin-size1 {\n        background-position: 50% -286px;\n      }\n      .arrow-type paper-item.begin-size2 {\n        background-position: 50% -336px;\n      }\n      .arrow-type paper-item.begin-size3 {\n        background-position: 50% -386px;\n      }\n      .arrow-type paper-item.begin-size4 {\n        background-position: 50% -436px;\n      }\n      .arrow-type paper-item.begin-size5 {\n        background-position: 50% -486px;\n      }\n      .arrow-type paper-item.begin-size6 {\n        background-position: 50% -536px;\n      }\n      .arrow-type paper-item.begin-size7 {\n        background-position: 50% -589px;\n      }\n      .arrow-type paper-item.begin-size8 {\n        background-position: 50% -639px;\n      }\n      .arrow-type paper-item.begin-size9 {\n        background-position: 50% -689px;\n      }\n      .arrow-type paper-item.end-no {\n        background-position: 50% 16px;\n      }\n      .arrow-type paper-item.end-arrow {\n        background-position: 50% -739px;\n      }\n      .arrow-type paper-item.end-open-arrow {\n        background-position: 50% -789px;\n      }\n      .arrow-type paper-item.end-stealth-arrow {\n        background-position: 50% -839px;\n      }\n      .arrow-type paper-item.end-diamond-arrow {\n        background-position: 50% -890px;\n      }\n      .arrow-type paper-item.end-oval-arrow {\n        background-position: 50% -938px;\n      }\n      .arrow-type paper-item.end-size1 {\n        background-position: 50% -986px;\n      }\n      .arrow-type paper-item.end-size2 {\n        background-position: 50% -1036px;\n      }\n      .arrow-type paper-item.end-size3 {\n        background-position: 50% -1086px;\n      }\n      .arrow-type paper-item.end-size4 {\n        background-position: 50% -1136px;\n      }\n      .arrow-type paper-item.end-size5 {\n        background-position: 50% -1186px;\n      }\n      .arrow-type paper-item.end-size6 {\n        background-position: 50% -1236px;\n      }\n      .arrow-type paper-item.end-size7 {\n        background-position: 50% -1289px;\n      }\n      .arrow-type paper-item.end-size8 {\n        background-position: 50% -1339px;\n      }\n      .arrow-type paper-item.end-size9 {\n        background-position: 50% -1389px;\n      }\n\n      .arrow-type .paper-input-container input {\n        background: url(/assets/images/icon-properties-arrow-type.png) 110% 0 no-repeat !important;\n      }\n      .arrow-type.begin-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.begin-arrow .paper-input-container input {\n        background-position: 110% -50px !important;\n      }\n      .arrow-type.begin-open-arrow .paper-input-container input {\n        background-position: 110% -100px !important;\n      }\n      .arrow-type.begin-stealth-arrow .paper-input-container input {\n        background-position: 110% -150px !important;\n      }\n      .arrow-type.begin-diamond-arrow .paper-input-container input {\n        background-position: 110% -200px !important;\n      }\n      .arrow-type.begin-oval-arrow .paper-input-container input {\n        background-position: 110% -250px !important;\n      }\n      .arrow-type.begin-size1 .paper-input-container input {\n        background-position: 110% -298px !important;\n      }\n      .arrow-type.begin-size2 .paper-input-container input {\n        background-position: 110% -348px !important;\n      }\n      .arrow-type.begin-size3 .paper-input-container input {\n        background-position: 110% -398px !important;\n      }\n      .arrow-type.begin-size4 .paper-input-container input {\n        background-position: 110% -448px !important;\n      }\n      .arrow-type.begin-size5 .paper-input-container input {\n        background-position: 110% -498px !important;\n      }\n      .arrow-type.begin-size6 .paper-input-container input {\n        background-position: 110% -548px !important;\n      }\n      .arrow-type.begin-size7 .paper-input-container input {\n        background-position: 110% -600px !important;\n      }\n      .arrow-type.begin-size8 .paper-input-container input {\n        background-position: 110% -650px !important;\n      }\n      .arrow-type.begin-size9 .paper-input-container input {\n        background-position: 110% -700px !important;\n      }\n      .arrow-type.end-no .paper-input-container input {\n        background-position: 110% 5px !important;\n      }\n      .arrow-type.end-arrow .paper-input-container input {\n        background-position: 110% -750px !important;\n      }\n      .arrow-type.end-open-arrow .paper-input-container input {\n        background-position: 110% -800px !important;\n      }\n      .arrow-type.end-stealth-arrow .paper-input-container input {\n        background-position: 110% -850px !important;\n      }\n      .arrow-type.end-diamond-arrow .paper-input-container input {\n        background-position: 110% -900px !important;\n      }\n      .arrow-type.end-oval-arrow .paper-input-container input {\n        background-position: 110% -950px !important;\n      }\n      .arrow-type.end-size1 .paper-input-container input {\n        background-position: 110% -998px !important;\n      }\n      .arrow-type.end-size2 .paper-input-container input {\n        background-position: 110% -1048px !important;\n      }\n      .arrow-type.end-size3 .paper-input-container input {\n        background-position: 110% -1098px !important;\n      }\n      .arrow-type.end-size4 .paper-input-container input {\n        background-position: 110% -1148px !important;\n      }\n      .arrow-type.end-size5 .paper-input-container input {\n        background-position: 110% -1198px !important;\n      }\n      .arrow-type.end-size6 .paper-input-container input {\n        background-position: 110% -1248px !important;\n      }\n      .arrow-type.end-size7 .paper-input-container input {\n        background-position: 110% -1300px !important;\n      }\n      .arrow-type.end-size8 .paper-input-container input {\n        background-position: 110% -1350px !important;\n      }\n      .arrow-type.end-size9 .paper-input-container input {\n        background-position: 110% -1400px !important;\n      }\n    `\n  ]\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    var {\n      alpha,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash,\n      lineCap,\n      lineJoin,\n      begin,\n      beginSize,\n      end,\n      endSize\n    } = this.value\n\n    return html`\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</title-with-help>\n        </legend>\n        <paper-slider min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha || 1} editable> </paper-slider>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n            >text style</title-with-help\n          >\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.font-family\">Font Family</i18n-msg>\n          </label>\n\n          <things-editor-font-selector\n            value-key=\"fontFamily\"\n            .value=${fontFamily}\n            class=\"property-full-input\"\n            custom-editor\n          ></things-editor-font-selector>\n\n          <label class=\"property-half-label icon-only-label font-size\"></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label lineHeight\"></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-half-label\"></label>\n          <div class=\"property-half-input btn-group\">\n            <paper-button toggles value-key=\"bold\" ?active=${bold} class=\"tbold\"> </paper-button>\n            <paper-button toggles value-key=\"italic\" ?active=${italic} class=\"titalic\"> </paper-button>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n            >fill style</title-with-help\n          >\n        </legend>\n\n        <things-editor-color-style value-key=\"fillStyle\" .value=${fillStyle}> </things-editor-color-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label linewidth\"></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label color\"></label>\n          <things-editor-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\">\n          </things-editor-color>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.line-type\">line type</i18n-msg>\n          </label>\n          <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input line-type solid\">\n            <!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n            <paper-listbox\n              value-key=\"lineDash\"\n              @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n              slot=\"dropdown-content\"\n              .selected=${lineDash}\n              attr-for-selected=\"name\"\n            >\n              <paper-item class=\"solid\" name=\"solid\"></paper-item>\n              <paper-item class=\"round-dot\" name=\"round-dot\"></paper-item>\n              <paper-item class=\"square-dot\" name=\"square-dot\"></paper-item>\n              <paper-item class=\"dash\" name=\"dash\"></paper-item>\n              <paper-item class=\"dash-dot\" name=\"dash-dot\"></paper-item>\n              <paper-item class=\"long-dash\" name=\"long-dash\"></paper-item>\n              <paper-item class=\"long-dash-dot\" name=\"long-dash-dot\"></paper-item>\n              <paper-item class=\"long-dash-dot-dot\" name=\"long-dash-dot-dot\"></paper-item>\n            </paper-listbox>\n          </paper-dropdown-menu>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.cap-type\">cap type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><i18n-msg msgid=\"label.square\">square</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n          </select>\n\n          <label class=\"property-full-label\">\n            <i18n-msg msgid=\"label.join-type\">join type</i18n-msg>\n          </label>\n          <select class=\"property-full-input select-content\" value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><i18n-msg msgid=\"label.miter\">miter</i18n-msg></option>\n            <option value=\"round\"><i18n-msg msgid=\"label.round\">round</i18n-msg></option>\n            <option value=\"bevel\"><i18n-msg msgid=\"label.bevel\">bevel</i18n-msg></option>\n          </select>\n\n          ${this._isLine(this.selected)\n            ? html`\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-type\">begin type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-no\">\n                  <!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"begin\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${begin}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"begin-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"begin-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"begin-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"begin-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"begin-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.begin-size\">begin size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type begin-size1\">\n                  <!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"beginSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${beginSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"begin-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"begin-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"begin-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"begin-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"begin-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"begin-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"begin-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"begin-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"begin-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-type\">end type</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-no\">\n                  <!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"end\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${end}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-no\" name=\"none\"></paper-item>\n                    <paper-item class=\"end-arrow\" name=\"arrow\"></paper-item>\n                    <paper-item class=\"end-open-arrow\" name=\"open-arrow\"></paper-item>\n                    <paper-item class=\"end-stealth-arrow\" name=\"sharp-arrow\"></paper-item>\n                    <paper-item class=\"end-diamond-arrow\" name=\"diamond\"></paper-item>\n                    <paper-item class=\"end-oval-arrow\" name=\"oval\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n\n                <label class=\"property-full-label\">\n                  <i18n-msg msgid=\"label.end-size\">end size</i18n-msg>\n                </label>\n                <paper-dropdown-menu no-label-float=\"true\" class=\"property-full-input arrow-type end-size1\">\n                  <!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->\n                  <paper-listbox\n                    value-key=\"endSize\"\n                    @selected-changed=${(e: CustomEvent) => this._onValueChange(e)}\n                    slot=\"dropdown-content\"\n                    .selected=${endSize}\n                    attr-for-selected=\"name\"\n                  >\n                    <paper-item class=\"end-size1\" name=\"size1\"></paper-item>\n                    <paper-item class=\"end-size2\" name=\"size2\"></paper-item>\n                    <paper-item class=\"end-size3\" name=\"size3\"></paper-item>\n                    <paper-item class=\"end-size4\" name=\"size4\"></paper-item>\n                    <paper-item class=\"end-size5\" name=\"size5\"></paper-item>\n                    <paper-item class=\"end-size6\" name=\"size6\"></paper-item>\n                    <paper-item class=\"end-size7\" name=\"size7\"></paper-item>\n                    <paper-item class=\"end-size8\" name=\"size8\"></paper-item>\n                    <paper-item class=\"end-size9\" name=\"size9\"></paper-item>\n                  </paper-listbox>\n                </paper-dropdown-menu>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n\n  _isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}

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

@@ -0,0 +1,4 @@
+import { Layer as SceneLayer } from '@hatiolab/things-scene';
+export default class ConfidentialOverlay extends SceneLayer {
+    _draw(context: CanvasRenderingContext2D): void;
+}

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

@@ -0,0 +1,14 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component as SceneComponent, Layer as SceneLayer } from '@hatiolab/things-scene';
+export default class ConfidentialOverlay extends SceneLayer {
+    _draw(context) {
+        context.globalAlpha = 0.3;
+        context.font = '50px Verdana';
+        context.fillStyle = 'red';
+        context.fillText(this.get('text') || 'CONFIDENTIAL', 20, 60);
+    }
+}
+SceneComponent.register('confidential-overlay', ConfidentialOverlay);
+//# sourceMappingURL=confidential-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"confidential-overlay.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/confidential-overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEzF,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,UAAU;IACzD,KAAK,CAAC,OAAiC;QACrC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAA;QAEzB,OAAO,CAAC,IAAI,GAAG,cAAc,CAAA;QAC7B,OAAO,CAAC,SAAS,GAAG,KAAK,CAAA;QAEzB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,cAAc,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAC9D,CAAC;CACF;AAED,cAAc,CAAC,QAAQ,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component as SceneComponent, Layer as SceneLayer } from '@hatiolab/things-scene'\n\nexport default class ConfidentialOverlay extends SceneLayer {\n  _draw(context: CanvasRenderingContext2D) {\n    context.globalAlpha = 0.3\n\n    context.font = '50px Verdana'\n    context.fillStyle = 'red'\n\n    context.fillText(this.get('text') || 'CONFIDENTIAL', 20, 60)\n  }\n}\n\nSceneComponent.register('confidential-overlay', ConfidentialOverlay)\n"]}

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

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

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;AAG3D,IAAqB,cAAc,GAAnC,MAAqB,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;AAG3D,IAAqB,YAAY,GAAjC,MAAqB,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-player.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxScenePlayer = class OxScenePlayer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sceneId = '';
+        /*
+         * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.
+         *
+         * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.
+         * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.
+         * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+         * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.
+         * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.
+         * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.
+         *
+         * @todo things-real 에서는 enumeration type 이며, FitMode.RATIO | FitMode.BOTH 중 하나로 정의한다.
+         */
+        this.fit = 'ratio';
+    }
+    render() {
+        return html ` <div id="root"></div> `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', () => {
+            requestAnimationFrame(() => {
+                if (this.scene) {
+                    this.scene.resize();
+                    if (this.offsetWidth) {
+                        this.scene.fit(this.fit);
+                    }
+                }
+            });
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._releaseRef();
+    }
+    updated(change) {
+        change.has('sceneId') && this._onSceneIdChanged();
+    }
+    _releaseRef() {
+        if (this.scene) {
+            this.scene.target = null;
+            this.scene.release();
+            delete this.scene;
+        }
+    }
+    _onSceneIdChanged() {
+        if (!this.provider)
+            return;
+        this._releaseRef();
+        if (!this.sceneId)
+            return;
+        this.provider.get(this.sceneId, true).then((scene) => {
+            var _a;
+            this.scene = scene;
+            if (!this.scene) {
+                return;
+            }
+            this.scene.target = this.renderRoot.querySelector('#root');
+            /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.
+             * 이 때는 정상적으로 그려주고,
+             * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.
+             */
+            if ((_a = this.scene.target) === null || _a === void 0 ? void 0 : _a.offsetWidth)
+                this.scene.fit(this.fit);
+        }, (e) => { });
+    }
+};
+OxScenePlayer.styles = [
+    css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      #root {
+        width: 100%;
+        height: 100%;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxScenePlayer.prototype, "sceneId", void 0);
+__decorate([
+    property({ type: String })
+], OxScenePlayer.prototype, "fit", void 0);
+__decorate([
+    property({ type: Object })
+], OxScenePlayer.prototype, "provider", void 0);
+OxScenePlayer = __decorate([
+    customElement('things-scene-player')
+], OxScenePlayer);
+//# sourceMappingURL=ox-scene-player.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-scene-player.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-player.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAK3D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAe8B,YAAO,GAAW,EAAE,CAAA;QAChD;;;;;;;;;;;WAWG;QACyB,QAAG,GAA8D,OAAO,CAAA;IAqEtG,CAAC;IAhEC,MAAM;QACJ,OAAO,IAAI,CAAA,yBAAyB,CAAA;IACtC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;oBAEnB,IAAI,IAAI,CAAC,WAAW,EAAE;wBACpB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;qBACzB;iBACF;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,OAAO,CAAC,MAA4B;QAClC,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACnD,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAA;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;YACpB,OAAO,IAAI,CAAC,KAAK,CAAA;SAClB;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAE1B,IAAI,CAAC,WAAW,EAAE,CAAA;QAElB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEzB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,IAAI,CACxC,CAAC,KAAY,EAAE,EAAE;;YACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAElB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,OAAM;aACP;YAED,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YAE1D;;;eAGG;YACH,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,MAAM,0CAAE,WAAW;gBAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC9D,CAAC,EACD,CAAC,CAAM,EAAE,EAAE,GAAE,CAAC,CACf,CAAA;IACH,CAAC;CACF,CAAA;AAhGQ,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;KAUF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAqB;AAapB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAyE;AACxE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AA7BrC,aAAa;IADlB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,aAAa,CAiGlB","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\n\n@customElement('things-scene-player')\nclass OxScenePlayer extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      #root {\n        width: 100%;\n        height: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) sceneId: string = ''\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   * @todo things-real 에서는 enumeration type 이며, FitMode.RATIO | FitMode.BOTH 중 하나로 정의한다.\n   */\n  @property({ type: String }) fit: 'none' | 'both' | 'width' | 'height' | 'center' | 'ratio' = 'ratio'\n  @property({ type: Object }) provider: any\n\n  private scene?: Scene\n\n  render() {\n    return html` <div id=\"root\"></div> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', () => {\n      requestAnimationFrame(() => {\n        if (this.scene) {\n          this.scene.resize()\n\n          if (this.offsetWidth) {\n            this.scene.fit(this.fit)\n          }\n        }\n      })\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._releaseRef()\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('sceneId') && this._onSceneIdChanged()\n  }\n\n  _releaseRef() {\n    if (this.scene) {\n      this.scene.target = null\n      this.scene.release()\n      delete this.scene\n    }\n  }\n\n  _onSceneIdChanged() {\n    if (!this.provider) return\n\n    this._releaseRef()\n\n    if (!this.sceneId) return\n\n    this.provider.get(this.sceneId, true).then(\n      (scene: Scene) => {\n        this.scene = scene\n\n        if (!this.scene) {\n          return\n        }\n\n        this.scene.target = this.renderRoot.querySelector('#root')\n\n        /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n         * 이 때는 정상적으로 그려주고,\n         * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n         */\n        if (this.scene.target?.offsetWidth) this.scene.fit(this.fit)\n      },\n      (e: any) => {}\n    )\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;AAGhC,IAAqB,eAAe,GAApC,MAAqB,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,39 @@
+import './confidential-overlay';
+import './ox-scene-layer';
+import './ox-scene-handler';
+import { Component, FITMODE, Model, Properties, SCENE_MODE, Scene } from '@hatiolab/things-scene';
+import { LitElement, PropertyValues } from 'lit';
+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;
+    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,245 @@
+import { __decorate } from "tslib";
+import './confidential-overlay';
+import './ox-scene-layer';
+import './ox-scene-handler';
+import { SCENE_MODE, create as createScene } from '@hatiolab/things-scene';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+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();
+            }
+            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)),
+            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 {
+            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: 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