@fmsim/board 2.0.0-beta.9 → 2.0.0-beta.92

package/dist/src/modeller/property-sidebar/shapes/shapes.js

@@ -9,19 +9,27 @@ import '@operato/i18n/ox-i18n.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { AbstractProperty } from '../abstract-property';
 import { PropertySharedStyle } from '../property-shared-style';
 import { BoxPaddingEditorStyles } from './box-padding-editor-styles';
-export class PropertyShapes extends AbstractProperty {
+import { OxInputEntityId } from './ox-input-entity-id';
+export class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {
     constructor() {
         super(...arguments);
         this.bounds = null;
         this.selected = [];
     }
+    static get scopedElements() {
+        return {
+            'ox-input-entity-id': OxInputEntityId
+        };
+    }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
     }
     render() {
+        var _a, _b;
         const value = this.value || {};
         const { width, height } = this.bounds || {};
         return html `
@@ -30,7 +38,18 @@ export class PropertyShapes extends AbstractProperty {
           ${this._isIdentifiable(this.selected)
             ? html `
                 <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
-                <input value-key="id" .value=${value.id || ''} />
+                ${this._idLookupType(this.selected)
+                ? html `
+                      <ox-input-entity-id
+                        custom-editor
+                        value-key="id"
+                        .value=${value.id || ''}
+                        .entityType=${this._idLookupType(this.selected)}
+                        .machine=${this._parentMachineId(this.selected)}
+                        .requireMachine=${!!this.selected[0].idLookupRequiresMachine}
+                      ></ox-input-entity-id>
+                    `
+                : html `<input value-key="id" .value=${value.id || ''} />`}
               `
             : html ``}
           ${this._isClassIdentifiable(this.selected)
@@ -85,6 +104,12 @@ export class PropertyShapes extends AbstractProperty {
                   ${this.selected.length && this.selected[0].isRootModel()
                 ? html ``
                 : html `
+                        <label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
+                        <input type="number" value-key="depth" .value=${String((_a = value.depth) !== null && _a !== void 0 ? _a : '')} placeholder="auto" />
+
+                        <label class="zPos"> <ox-i18n msgid="label.zPos">zPos</ox-i18n> </label>
+                        <input type="number" value-key="zPos" .value=${String((_b = value.zPos) !== null && _b !== void 0 ? _b : '')} placeholder="auto" />
+
                         <label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
                         <ox-input-angle value-key="rotation" .value=${value.rotation}> </ox-input-angle>
                       `}
@@ -176,6 +201,31 @@ export class PropertyShapes extends AbstractProperty {
                   <option value="width">width</option>
                   <option value="height">height</option>
                 </select>
+
+                <div class="checkbox-row">
+                  <input
+                    id="cb-threed"
+                    type="checkbox"
+                    value-key="threed"
+                    .checked=${!!value.threed}
+                  />
+                  <label for="cb-threed"><ox-i18n msgid="label.start-in-3d">Start in 3D</ox-i18n></label>
+                </div>
+
+                <div class="checkbox-row">
+                  <input
+                    id="cb-floor-constraint"
+                    type="checkbox"
+                    value-key="cameraFloorConstraint"
+                    .checked=${!!value.cameraFloorConstraint}
+                  />
+                  <label for="cb-floor-constraint"><ox-i18n msgid="label.keep-above-ground">Keep Above Ground</ox-i18n></label>
+                </div>
+
+                <div class="checkbox-row">
+                  <input id="cb-id-lookup" type="checkbox" value-key="idLookup" .checked=${value.idLookup !== false} />
+                  <label for="cb-id-lookup"><ox-i18n msgid="label.id-lookup">ID Lookup</ox-i18n></label>
+                </div>
               </div>
             </fieldset>
           `
@@ -225,6 +275,44 @@ export class PropertyShapes extends AbstractProperty {
             return false;
         return true;
     }
+    /**
+     * 단일 선택 컴포넌트의 부모 machine id (unit 의 ID 검색 시 조회조건으로 전달).
+     * 부모가 루트 모델/레이어가 아니고 id 를 가지면 그 id 를 반환 — unit 이 자신의
+     * 소속 machine 을 특정할 수 있는 경우에 해당. 그 외엔 빈 문자열.
+     */
+    _parentMachineId(selected) {
+        var _a, _b, _c;
+        const target = (selected === null || selected === void 0 ? void 0 : selected.length) === 1 ? selected[0] : null;
+        if (!target)
+            return '';
+        // 명시적 parentObjectId(= 부모 머신 id) 우선, 없으면 실제 scene 부모의 id.
+        const pid = (_a = target.state) === null || _a === void 0 ? void 0 : _a.parentObjectId;
+        if (pid)
+            return String(pid);
+        const parent = target.parent;
+        if (!parent || ((_b = parent.isRootModel) === null || _b === void 0 ? void 0 : _b.call(parent)) || (parent.isLayer && parent.isLayer()))
+            return '';
+        return ((_c = parent.state) === null || _c === void 0 ? void 0 : _c.id) || '';
+    }
+    /**
+     * 선택 컴포넌트의 id 조회용 타입명 (capability `idLookupType`). 값이 있으면 그 타입으로
+     * 검색 에디터를 띄우고, 없으면(일반 도형·Carrier 등) plain input 으로 두어 불필요한 id
+     * 리스트 요청을 보내지 않는다. 기본은 자기 타입이며 컴포넌트가 다른 타입으로 override 가능.
+     * (머신/유닛 + Node 가 opt-in. isLVComponent 은 Carrier 포함·Node 제외라 부적합.)
+     */
+    _idLookupType(selected) {
+        if ((selected === null || selected === void 0 ? void 0 : selected.length) !== 1)
+            return undefined;
+        if (!this._idLookupEnabled(selected))
+            return undefined;
+        return selected[0].idLookupType;
+    }
+    /** Board 루트 속성 state.idLookup 으로 id 룩업 전체 ON/OFF (기본 ON). */
+    _idLookupEnabled(selected) {
+        var _a, _b;
+        const root = (_a = selected === null || selected === void 0 ? void 0 : selected[0]) === null || _a === void 0 ? void 0 : _a.root;
+        return ((_b = root === null || root === void 0 ? void 0 : root.state) === null || _b === void 0 ? void 0 : _b.idLookup) !== false;
+    }
     _isClassIdentifiable(selected) {
         if (!selected || (selected[0] && selected[0].isLayer()))
             return false;
@@ -266,6 +354,10 @@ PropertyShapes.styles = [
         background: var(--url-icon-properties-label) 7px -900px no-repeat;
       }
 
+      .icon-label .checkbox-row label {
+        background: none;
+      }
+
       .icon-label label.width {
         background-position: 7px -96px;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/shapes.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kCAAkC,CAAA;AACzC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAI/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,MAAM,OAAO,cAAe,SAAQ,gBAAgB;IAApD;;QAoH8B,WAAM,GAAkB,IAAI,CAAA;QAC7B,aAAQ,GAAgB,EAAE,CAAA;IAkPvD,CAAC;IAhPC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE3C,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;YACnC,CAAC,CAAC,IAAI,CAAA;;+CAE6B,KAAK,CAAC,EAAE,IAAI,EAAE;eAC9C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA;;kDAEgC,KAAK,CAAC,KAAK,IAAI,EAAE;eACpD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;YACpC,CAAC,CAAC,IAAI,CAAA;;iDAE+B,KAAK,CAAC,IAAI,IAAI,EAAE;;uDAEV,KAAK,CAAC,UAAU,IAAI,EAAE;;;;;;;;;eAS9D;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;YAClC,CAAC,CAAC,IAAI,CAAA;;4FAE0E,KAAK,CAAC,MAAM;;;4FAGZ,KAAK,CAAC,MAAM;;;eAGzF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;QAIZ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC5B,CAAC,CAAC,KAAK,CACH,IAAI,CAAC,QAAQ,EACb,IAAI,CAAA;;;;;;;;yEAQyD,MAAM,CAAC,KAAK,CAAC;;0EAEZ,MAAM,CAAC,MAAM,CAAC;;oBAEpE,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;gBACtD,CAAC,CAAC,IAAI,CAAA,EAAE;gBACR,CAAC,CAAC,IAAI,CAAA;;sEAE4C,KAAK,CAAC,QAAQ;uBAC7D;;;aAGV,CACF;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;YACpC,CAAC,CAAC,IAAI,CAAA;;;;;;;;iEAQmD,KAAK,CAAC,SAAS;;;;;;;;oEAQZ,KAAK,CAAC,YAAY;;;;;;;gGAOU,KAAK,CAAC,QAAQ;;;;;;;;;+BAS/E,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;2EAiByB,KAAK,CAAC,UAAU,IAAI,CAAC;4EACpB,KAAK,CAAC,WAAW,IAAI,CAAC;6EACrB,KAAK,CAAC,YAAY,IAAI,CAAC;8EACtB,KAAK,CAAC,aAAa,IAAI,CAAC;;;;;;;;;;;;WAY3F;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;YACtD,CAAC,CAAC,IAAI,CAAA;;;;;;;;qDAQuC,KAAK,CAAC,OAAO,IAAI,OAAO;;;;;;;;;;WAUlE;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAA;QAElD,IAAI,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,KAAK,CAAC;gBAAE,OAAM;YACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;iBAC1B;aACF,CAAC,CACH,CAAA;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACtC,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,QAAqB;QACpC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe;gBAAE,OAAO,KAAK,CAAA;QAChD,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;IAED,cAAc,CAAC,QAAqB;QAClC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,KAAK,CAAA;QAEpH,OAAO,IAAI,CAAA;IACb,CAAC;IAED,eAAe,CAAC,QAAqB;QACnC,IACE,CAAC,QAAQ;YACT,QAAQ,CAAC,MAAM,IAAI,CAAC;YACpB,QAAQ,CAAC,MAAM,GAAG,CAAC;YACnB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;YAC7B,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;YAE9C,OAAO,KAAK,CAAA;QAEd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,oBAAoB,CAAC,QAAqB;QACxC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,KAAK,CAAA;QAErE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CAAC,QAAqB;QAC3B,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;YAAE,OAAO,KAAK,CAAA;QAErE,OAAO,IAAI,CAAA;IACb,CAAC;IAED,QAAQ,CAAC,QAAqB;QAC5B,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;YAAE,OAAO,KAAK,CAAA;QAEtE,OAAO,IAAI,CAAA;IACb,CAAC;;AArWM,qBAAM,GAAG;IACd,mBAAmB;IACnB,sBAAsB;IACtB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;CACF,AAhHY,CAgHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA6B;AAC7B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAA2B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\n\nexport class PropertyShapes extends AbstractProperty {\n  static styles = [\n    PropertySharedStyle,\n    BoxPaddingEditorStyles,\n    css`\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend md-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n    `,\n    css`\n      .icon-label label {\n        background: var(--url-icon-properties-label) 7px -900px no-repeat;\n      }\n\n      .icon-label label.width {\n        background-position: 7px -96px;\n      }\n\n      .icon-label label.height {\n        background-position: 7px 4px;\n      }\n\n      .icon-label label.rotate {\n        background-position: 7px -198px;\n      }\n\n      .icon-label label.twidth {\n        background-position: 7px -296px;\n      }\n\n      .icon-label label.theight {\n        background-position: 7px -396px;\n      }\n\n      .icon-label label.zPos {\n        background-position: 5px -1098px;\n      }\n\n      .icon-label label.depth {\n        background-position: 5px -1198px;\n      }\n\n      .icon-label label.rotationX {\n        background-position: 5px -1296px;\n      }\n\n      .icon-label label.rotationY {\n        background-position: 5px -1396px;\n      }\n\n      .icon-label label.rotationZ {\n        background-position: 5px -1496px;\n      }\n\n      ox-buttons-radio > * {\n        width: 30px;\n        height: 25px;\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\n      ox-buttons-radio div {\n        background: var(--url-icon-properties) no-repeat;\n      }\n\n      ox-buttons-radio div[data-value='left'] {\n        background-position: 50% 3px;\n      }\n\n      ox-buttons-radio div[data-value='center'] {\n        background-position: 50% -47px;\n      }\n\n      ox-buttons-radio div[data-value='right'] {\n        background-position: 50% -97px;\n      }\n\n      ox-buttons-radio div[data-value='justify'] {\n        background-position: 50% -147px;\n      }\n\n      ox-buttons-radio div[data-value='top'] {\n        background-position: 50% -197px;\n      }\n\n      ox-buttons-radio div[data-value='middle'] {\n        background-position: 50% -193px;\n      }\n\n      ox-buttons-radio div[data-value='bottom'] {\n        background-position: 50% -188px;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) bounds: BOUNDS | null = null\n  @property({ type: Array }) selected: Component[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n    const { width, height } = this.bounds || {}\n\n    return html`\n      <fieldset>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n                <input value-key=\"id\" .value=${value.id || ''} />\n              `\n            : html``}\n          ${this._isClassIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n                <input value-key=\"class\" .value=${value.class || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n          ${this._hasProperties(this.selected)\n            ? html`\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n                  <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n                  <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n                  <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n                </div>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      ${!this._isLine(this.selected)\n        ? keyed(\n            this.selected,\n            html`\n              <fieldset class=\"icon-label unit ratio\">\n                <legend>\n                  <ox-i18n topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-i18n>\n                </legend>\n\n                <div class=\"property-grid\">\n                  <label class=\"width\"> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n                  <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n                  <label class=\"height\"> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n                  <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n                  ${this.selected.length && this.selected[0].isRootModel()\n                    ? html``\n                    : html`\n                        <label class=\"rotate\"> <ox-i18n msgid=\"label.rotate\">rotate</ox-i18n> </label>\n                        <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n                      `}\n                </div>\n              </fieldset>\n            `\n          )\n        : html``}\n      ${this._hasTextProperty(this.selected)\n        ? html`\n            <fieldset>\n              <legend>\n                <ox-i18n topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\">text box</ox-i18n>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n                <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n                  <div data-value=\"left\"></div>\n                  <div data-value=\"center\"></div>\n                  <div data-value=\"right\"></div>\n                  <div data-value=\"justify\"></div>\n                </ox-buttons-radio>\n\n                <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n                <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n                  <div data-value=\"top\"></div>\n                  <div data-value=\"middle\"></div>\n                  <div data-value=\"bottom\"></div>\n                </ox-buttons-radio>\n\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n                  <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n                </div>\n\n                <div class=\"checkbox-row\">\n                  <input\n                    id=\"checkbox-keep-text-angle\"\n                    type=\"checkbox\"\n                    value-key=\"keepTextAngle\"\n                    .checked=${value.keepTextAngle}\n                  />\n                  <label for=\"checkbox-keep-text-angle\">\n                    <ox-i18n msgid=\"label.keep-text-angle\">Keep Text Angle</ox-i18n>\n                  </label>\n                </div>\n\n                <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n                <table class=\"box-padding\">\n                  <tr>\n                    <td class=\"slide1\"></td>\n                    <td class=\"slide2\"></td>\n                    <td class=\"slide3\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide4\"></td>\n                    <td class=\"slide5\">\n                      <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop || 0} />\n                      <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft || 0} />\n                      <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight || 0} />\n                      <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom || 0} />\n                    </td>\n                    <td class=\"slide6\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide7\"></td>\n                    <td class=\"slide8\"></td>\n                    <td class=\"slide9\"></td>\n                  </tr>\n                </table>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this.selected.length && this.selected[0].isRootModel()\n        ? html`\n            <fieldset class=\"icon-label\">\n              <legend>\n                <ox-i18n topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\">Viewer Option</ox-i18n>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n                <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n                  <option value=\"none\">none</option>\n                  <option value=\"center\">center</option>\n                  <option value=\"ratio\" selected>ratio</option>\n                  <option value=\"both\">both</option>\n                  <option value=\"width\">width</option>\n                  <option value=\"height\">height</option>\n                </select>\n              </div>\n            </fieldset>\n          `\n        : html``}\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this._getValueFromEventTarget(element)\n\n    if (key.indexOf('bounds.') == 0) {\n      if (isNaN(value)) return\n      this.dispatchEvent(\n        new CustomEvent('bounds-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            [key.substring(7)]: value\n          }\n        })\n      )\n    } else {\n      this._onAfterValueChange(key, value)\n    }\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  _hasProperties(selected: Component[]) {\n    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (\n      !selected ||\n      selected.length == 0 ||\n      selected.length > 1 ||\n      !selected[0].isIdentifiable() ||\n      (selected[0].isLayer && selected[0].isLayer())\n    )\n      return false\n\n    return true\n  }\n\n  _isClassIdentifiable(selected: Component[]) {\n    if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isLine(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n    return true\n  }\n\n  _is3dish(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n    return true\n  }\n}\n"]}
+{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\nimport { OxInputEntityId } from './ox-input-entity-id'\n\nexport class PropertyShapes extends ScopedElementsMixin(AbstractProperty) {\n  static get scopedElements() {\n    return {\n      'ox-input-entity-id': OxInputEntityId\n    }\n  }\n\n  static styles = [\n    PropertySharedStyle,\n    BoxPaddingEditorStyles,\n    css`\n      fieldset[collapsable] legend {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      fieldset[collapsable] legend md-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      fieldset[collapsable][collapsed] > :not(legend) {\n        display: none;\n      }\n    `,\n    css`\n      .icon-label label {\n        background: var(--url-icon-properties-label) 7px -900px no-repeat;\n      }\n\n      .icon-label .checkbox-row label {\n        background: none;\n      }\n\n      .icon-label label.width {\n        background-position: 7px -96px;\n      }\n\n      .icon-label label.height {\n        background-position: 7px 4px;\n      }\n\n      .icon-label label.rotate {\n        background-position: 7px -198px;\n      }\n\n      .icon-label label.twidth {\n        background-position: 7px -296px;\n      }\n\n      .icon-label label.theight {\n        background-position: 7px -396px;\n      }\n\n      .icon-label label.zPos {\n        background-position: 5px -1098px;\n      }\n\n      .icon-label label.depth {\n        background-position: 5px -1198px;\n      }\n\n      .icon-label label.rotationX {\n        background-position: 5px -1296px;\n      }\n\n      .icon-label label.rotationY {\n        background-position: 5px -1396px;\n      }\n\n      .icon-label label.rotationZ {\n        background-position: 5px -1496px;\n      }\n\n      ox-buttons-radio > * {\n        width: 30px;\n        height: 25px;\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\n      ox-buttons-radio div {\n        background: var(--url-icon-properties) no-repeat;\n      }\n\n      ox-buttons-radio div[data-value='left'] {\n        background-position: 50% 3px;\n      }\n\n      ox-buttons-radio div[data-value='center'] {\n        background-position: 50% -47px;\n      }\n\n      ox-buttons-radio div[data-value='right'] {\n        background-position: 50% -97px;\n      }\n\n      ox-buttons-radio div[data-value='justify'] {\n        background-position: 50% -147px;\n      }\n\n      ox-buttons-radio div[data-value='top'] {\n        background-position: 50% -197px;\n      }\n\n      ox-buttons-radio div[data-value='middle'] {\n        background-position: 50% -193px;\n      }\n\n      ox-buttons-radio div[data-value='bottom'] {\n        background-position: 50% -188px;\n      }\n\n      ox-buttons-radio div[active] {\n        border-color: #f2471c;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) bounds: BOUNDS | null = null\n  @property({ type: Array }) selected: Component[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n    const { width, height } = this.bounds || {}\n\n    return html`\n      <fieldset>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n                ${this._idLookupType(this.selected)\n                  ? html`\n                      <ox-input-entity-id\n                        custom-editor\n                        value-key=\"id\"\n                        .value=${value.id || ''}\n                        .entityType=${this._idLookupType(this.selected)}\n                        .machine=${this._parentMachineId(this.selected)}\n                        .requireMachine=${!!(this.selected[0] as any).idLookupRequiresMachine}\n                      ></ox-input-entity-id>\n                    `\n                  : html`<input value-key=\"id\" .value=${value.id || ''} />`}\n              `\n            : html``}\n          ${this._isClassIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n                <input value-key=\"class\" .value=${value.class || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n          ${this._hasProperties(this.selected)\n            ? html`\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n                  <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n                  <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n                  <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n                </div>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      ${!this._isLine(this.selected)\n        ? keyed(\n            this.selected,\n            html`\n              <fieldset class=\"icon-label unit ratio\">\n                <legend>\n                  <ox-i18n topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-i18n>\n                </legend>\n\n                <div class=\"property-grid\">\n                  <label class=\"width\"> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n                  <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n                  <label class=\"height\"> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n                  <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n                  ${this.selected.length && this.selected[0].isRootModel()\n                    ? html``\n                    : html`\n                        <label class=\"depth\"> <ox-i18n msgid=\"label.depth\">depth</ox-i18n> </label>\n                        <input type=\"number\" value-key=\"depth\" .value=${String(value.depth ?? '')} placeholder=\"auto\" />\n\n                        <label class=\"zPos\"> <ox-i18n msgid=\"label.zPos\">zPos</ox-i18n> </label>\n                        <input type=\"number\" value-key=\"zPos\" .value=${String(value.zPos ?? '')} placeholder=\"auto\" />\n\n                        <label class=\"rotate\"> <ox-i18n msgid=\"label.rotate\">rotate</ox-i18n> </label>\n                        <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n                      `}\n                </div>\n              </fieldset>\n            `\n          )\n        : html``}\n      ${this._hasTextProperty(this.selected)\n        ? html`\n            <fieldset>\n              <legend>\n                <ox-i18n topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\">text box</ox-i18n>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n                <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n                  <div data-value=\"left\"></div>\n                  <div data-value=\"center\"></div>\n                  <div data-value=\"right\"></div>\n                  <div data-value=\"justify\"></div>\n                </ox-buttons-radio>\n\n                <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n                <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n                  <div data-value=\"top\"></div>\n                  <div data-value=\"middle\"></div>\n                  <div data-value=\"bottom\"></div>\n                </ox-buttons-radio>\n\n                <div class=\"checkbox-row\">\n                  <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n                  <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n                </div>\n\n                <div class=\"checkbox-row\">\n                  <input\n                    id=\"checkbox-keep-text-angle\"\n                    type=\"checkbox\"\n                    value-key=\"keepTextAngle\"\n                    .checked=${value.keepTextAngle}\n                  />\n                  <label for=\"checkbox-keep-text-angle\">\n                    <ox-i18n msgid=\"label.keep-text-angle\">Keep Text Angle</ox-i18n>\n                  </label>\n                </div>\n\n                <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n                <table class=\"box-padding\">\n                  <tr>\n                    <td class=\"slide1\"></td>\n                    <td class=\"slide2\"></td>\n                    <td class=\"slide3\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide4\"></td>\n                    <td class=\"slide5\">\n                      <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop || 0} />\n                      <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft || 0} />\n                      <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight || 0} />\n                      <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom || 0} />\n                    </td>\n                    <td class=\"slide6\"></td>\n                  </tr>\n                  <tr>\n                    <td class=\"slide7\"></td>\n                    <td class=\"slide8\"></td>\n                    <td class=\"slide9\"></td>\n                  </tr>\n                </table>\n              </div>\n            </fieldset>\n          `\n        : html``}\n      ${this.selected.length && this.selected[0].isRootModel()\n        ? html`\n            <fieldset class=\"icon-label\">\n              <legend>\n                <ox-i18n topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\">Viewer Option</ox-i18n>\n              </legend>\n\n              <div class=\"property-grid\">\n                <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n                <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n                  <option value=\"none\">none</option>\n                  <option value=\"center\">center</option>\n                  <option value=\"ratio\" selected>ratio</option>\n                  <option value=\"both\">both</option>\n                  <option value=\"width\">width</option>\n                  <option value=\"height\">height</option>\n                </select>\n\n                <div class=\"checkbox-row\">\n                  <input\n                    id=\"cb-threed\"\n                    type=\"checkbox\"\n                    value-key=\"threed\"\n                    .checked=${!!value.threed}\n                  />\n                  <label for=\"cb-threed\"><ox-i18n msgid=\"label.start-in-3d\">Start in 3D</ox-i18n></label>\n                </div>\n\n                <div class=\"checkbox-row\">\n                  <input\n                    id=\"cb-floor-constraint\"\n                    type=\"checkbox\"\n                    value-key=\"cameraFloorConstraint\"\n                    .checked=${!!value.cameraFloorConstraint}\n                  />\n                  <label for=\"cb-floor-constraint\"><ox-i18n msgid=\"label.keep-above-ground\">Keep Above Ground</ox-i18n></label>\n                </div>\n\n                <div class=\"checkbox-row\">\n                  <input id=\"cb-id-lookup\" type=\"checkbox\" value-key=\"idLookup\" .checked=${value.idLookup !== false} />\n                  <label for=\"cb-id-lookup\"><ox-i18n msgid=\"label.id-lookup\">ID Lookup</ox-i18n></label>\n                </div>\n              </div>\n            </fieldset>\n          `\n        : html``}\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this._getValueFromEventTarget(element)\n\n    if (key.indexOf('bounds.') == 0) {\n      if (isNaN(value)) return\n      this.dispatchEvent(\n        new CustomEvent('bounds-change', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            [key.substring(7)]: value\n          }\n        })\n      )\n    } else {\n      this._onAfterValueChange(key, value)\n    }\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  _hasProperties(selected: Component[]) {\n    if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (\n      !selected ||\n      selected.length == 0 ||\n      selected.length > 1 ||\n      !selected[0].isIdentifiable() ||\n      (selected[0].isLayer && selected[0].isLayer())\n    )\n      return false\n\n    return true\n  }\n\n  /**\n   * 단일 선택 컴포넌트의 부모 machine id (unit 의 ID 검색 시 조회조건으로 전달).\n   * 부모가 루트 모델/레이어가 아니고 id 를 가지면 그 id 를 반환 — unit 이 자신의\n   * 소속 machine 을 특정할 수 있는 경우에 해당. 그 외엔 빈 문자열.\n   */\n  _parentMachineId(selected: Component[]): string {\n    const target = selected?.length === 1 ? (selected[0] as any) : null\n    if (!target) return ''\n    // 명시적 parentObjectId(= 부모 머신 id) 우선, 없으면 실제 scene 부모의 id.\n    const pid = target.state?.parentObjectId\n    if (pid) return String(pid)\n    const parent = target.parent\n    if (!parent || parent.isRootModel?.() || (parent.isLayer && parent.isLayer())) return ''\n    return parent.state?.id || ''\n  }\n\n  /**\n   * 선택 컴포넌트의 id 조회용 타입명 (capability `idLookupType`). 값이 있으면 그 타입으로\n   * 검색 에디터를 띄우고, 없으면(일반 도형·Carrier 등) plain input 으로 두어 불필요한 id\n   * 리스트 요청을 보내지 않는다. 기본은 자기 타입이며 컴포넌트가 다른 타입으로 override 가능.\n   * (머신/유닛 + Node 가 opt-in. isLVComponent 은 Carrier 포함·Node 제외라 부적합.)\n   */\n  _idLookupType(selected: Component[]): string | undefined {\n    if (selected?.length !== 1) return undefined\n    if (!this._idLookupEnabled(selected)) return undefined\n    return (selected[0] as any).idLookupType\n  }\n\n  /** Board 루트 속성 state.idLookup 으로 id 룩업 전체 ON/OFF (기본 ON). */\n  _idLookupEnabled(selected: Component[]): boolean {\n    const root = (selected?.[0] as any)?.root\n    return root?.state?.idLookup !== false\n  }\n\n  _isClassIdentifiable(selected: Component[]) {\n    if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n    return true\n  }\n\n  _isLine(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n    return true\n  }\n\n  _is3dish(selected: Component[]) {\n    if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n    return true\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/specifics/specifics.d.ts

@@ -4,7 +4,8 @@
 import { Component, Scene } from '@hatiolab/things-scene';
 import { SpecificPropertiesBuilder } from './specific-properties-builder.js';
 import { AbstractProperty } from '../abstract-property';
-declare const PropertySpecific_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+import { OxInputEntityId } from '../shapes/ox-input-entity-id';
+declare const PropertySpecific_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
 export declare class PropertySpecific extends PropertySpecific_base {
     static styles: import("lit").CSSResult[];
     value: any;
@@ -17,11 +18,34 @@ export declare class PropertySpecific extends PropertySpecific_base {
     disconnectedCallback(): void;
     static get scopedElements(): {
         'specific-properties-builder': typeof SpecificPropertiesBuilder;
+        'ox-input-entity-id': typeof OxInputEntityId;
     };
+    private _isGroupSelected;
     render(): import("lit-html").TemplateResult<1>;
     _onValueChange(e: Event): void;
     _isIdentifiable(selected: Component[]): boolean;
+    /**
+     * 단일 선택 컴포넌트의 부모 machine id (unit 의 ID 검색 시 조회조건으로 전달).
+     * 부모가 루트 모델/레이어가 아니고 id 를 가지면 그 id 를 반환. 그 외엔 빈 문자열.
+     * (shape 탭 PropertyShapes 와 동일한 규칙.)
+     */
+    _parentMachineId(selected: Component[]): string;
+    /**
+     * 선택 컴포넌트의 id 조회용 타입명 (capability `idLookupType`). 값이 있으면 그 타입으로
+     * 검색 에디터, 없으면 plain input — 불필요한 id 리스트 요청을 막는다. 기본은 자기 타입,
+     * 특수 케이스는 override. (shape 탭 PropertyShapes 와 동일 규칙.)
+     */
+    _idLookupType(selected: Component[]): string | undefined;
+    /** Board 루트 속성 state.idLookup 으로 id 룩업 전체 ON/OFF (기본 ON). */
+    _idLookupEnabled(selected: Component[]): boolean;
     _hasTextProperty(selected: Component[]): boolean;
+    /** 선택 컴포넌트가 ParentObjectMixin(= parentObject/parentObjectTypes capability) 인지. */
+    _hasParentObject(selected: Component[]): boolean;
+    /**
+     * parentObject 후보 — 모델(씬)에서 컴포넌트 타입 기준 수집. 컴포넌트의 parentObjectTypes
+     * (예: AGV→['AGVLine'], PortFlow→['Port']) 타입만, 빈 배열이면 모든 머신(isMcsMachine). 자기 자신 제외.
+     */
+    _parentObjectItems(selected: Component[]): string[];
     _onINeedSelected(e: CustomEvent): void;
 }
 export {};

package/dist/src/modeller/property-sidebar/specifics/specifics.js

@@ -8,6 +8,7 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { PropertySharedStyle } from '../property-shared-style';
 import { SpecificPropertiesBuilder } from './specific-properties-builder.js';
 import { AbstractProperty } from '../abstract-property';
+import { OxInputEntityId } from '../shapes/ox-input-entity-id';
 export class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {
     constructor() {
         super(...arguments);
@@ -27,12 +28,20 @@ export class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {
     }
     static get scopedElements() {
         return {
-            'specific-properties-builder': SpecificPropertiesBuilder
+            'specific-properties-builder': SpecificPropertiesBuilder,
+            'ox-input-entity-id': OxInputEntityId
         };
     }
+    _isGroupSelected() {
+        var _a, _b, _c;
+        return ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_c = (_b = this.selected[0]).isGroup) === null || _c === void 0 ? void 0 : _c.call(_b));
+    }
     render() {
         const selected = this.selected && this.selected[0];
         const value = this.value || {};
+        if (this._isGroupSelected()) {
+            return html `<label component-type>${value.type}</label>`;
+        }
         return html `
       <label component-type>${value.type}</label>
       <fieldset>
@@ -40,7 +49,29 @@ export class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {
           ${this._isIdentifiable(this.selected)
             ? html `
                 <label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
-                <input value-key="id" .value=${value.id || ''} />
+                ${this._idLookupType(this.selected)
+                ? html `
+                      <ox-input-entity-id
+                        custom-editor
+                        value-key="id"
+                        .value=${value.id || ''}
+                        .entityType=${this._idLookupType(this.selected)}
+                        .machine=${this._parentMachineId(this.selected)}
+                        .requireMachine=${!!this.selected[0].idLookupRequiresMachine}
+                      ></ox-input-entity-id>
+                    `
+                : html `<input value-key="id" .value=${value.id || ''} />`}
+              `
+            : html ``}
+          ${this._hasParentObject(this.selected)
+            ? html `
+                <label> <ox-i18n msgid="label.parent-object-id">parent object</ox-i18n> </label>
+                <ox-input-entity-id
+                  custom-editor
+                  value-key="parentObjectId"
+                  .value=${value.parentObjectId || ''}
+                  .localItems=${this._parentObjectItems(this.selected)}
+                ></ox-input-entity-id>
               `
             : html ``}
           ${this._hasTextProperty(this.selected)
@@ -76,10 +107,50 @@ export class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {
         this._onAfterValueChange(key, value);
     }
     _isIdentifiable(selected) {
+        var _a, _b;
         if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))
             return false;
+        if ((_b = (_a = selected[0]).isGroup) === null || _b === void 0 ? void 0 : _b.call(_a))
+            return false;
         return true;
     }
+    /**
+     * 단일 선택 컴포넌트의 부모 machine id (unit 의 ID 검색 시 조회조건으로 전달).
+     * 부모가 루트 모델/레이어가 아니고 id 를 가지면 그 id 를 반환. 그 외엔 빈 문자열.
+     * (shape 탭 PropertyShapes 와 동일한 규칙.)
+     */
+    _parentMachineId(selected) {
+        var _a, _b, _c;
+        const target = (selected === null || selected === void 0 ? void 0 : selected.length) === 1 ? selected[0] : null;
+        if (!target)
+            return '';
+        // 명시적 parentObjectId(= 부모 머신 id) 우선 — 모델러에 실제 없는 id 라도 그대로 조회조건으로 사용.
+        const pid = (_a = target.state) === null || _a === void 0 ? void 0 : _a.parentObjectId;
+        if (pid)
+            return String(pid);
+        const parent = target.parent;
+        if (!parent || ((_b = parent.isRootModel) === null || _b === void 0 ? void 0 : _b.call(parent)) || (parent.isLayer && parent.isLayer()))
+            return '';
+        return ((_c = parent.state) === null || _c === void 0 ? void 0 : _c.id) || '';
+    }
+    /**
+     * 선택 컴포넌트의 id 조회용 타입명 (capability `idLookupType`). 값이 있으면 그 타입으로
+     * 검색 에디터, 없으면 plain input — 불필요한 id 리스트 요청을 막는다. 기본은 자기 타입,
+     * 특수 케이스는 override. (shape 탭 PropertyShapes 와 동일 규칙.)
+     */
+    _idLookupType(selected) {
+        if ((selected === null || selected === void 0 ? void 0 : selected.length) !== 1)
+            return undefined;
+        if (!this._idLookupEnabled(selected))
+            return undefined;
+        return selected[0].idLookupType;
+    }
+    /** Board 루트 속성 state.idLookup 으로 id 룩업 전체 ON/OFF (기본 ON). */
+    _idLookupEnabled(selected) {
+        var _a, _b;
+        const root = (_a = selected === null || selected === void 0 ? void 0 : selected[0]) === null || _a === void 0 ? void 0 : _a.root;
+        return ((_b = root === null || root === void 0 ? void 0 : root.state) === null || _b === void 0 ? void 0 : _b.idLookup) !== false;
+    }
     _hasTextProperty(selected) {
         for (let i = 0; i < selected.length; i++) {
             if (!selected[i].hasTextProperty)
@@ -87,6 +158,45 @@ export class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {
         }
         return true;
     }
+    /** 선택 컴포넌트가 ParentObjectMixin(= parentObject/parentObjectTypes capability) 인지. */
+    _hasParentObject(selected) {
+        return (selected === null || selected === void 0 ? void 0 : selected.length) === 1 && 'parentObjectTypes' in selected[0];
+    }
+    /**
+     * parentObject 후보 — 모델(씬)에서 컴포넌트 타입 기준 수집. 컴포넌트의 parentObjectTypes
+     * (예: AGV→['AGVLine'], PortFlow→['Port']) 타입만, 빈 배열이면 모든 머신(isMcsMachine). 자기 자신 제외.
+     */
+    _parentObjectItems(selected) {
+        var _a, _b;
+        const target = selected === null || selected === void 0 ? void 0 : selected[0];
+        const root = target === null || target === void 0 ? void 0 : target.root;
+        if (!root)
+            return [];
+        const types = Array.isArray(target.parentObjectTypes) ? target.parentObjectTypes : [];
+        const out = [];
+        const visit = (node) => {
+            var _a, _b;
+            for (const c of (node === null || node === void 0 ? void 0 : node.components) || []) {
+                const match = types.length ? types.includes((_a = c.state) === null || _a === void 0 ? void 0 : _a.type) : !!c.isMcsMachine;
+                if (match && c !== target) {
+                    const id = (_b = c.state) === null || _b === void 0 ? void 0 : _b.id;
+                    if (id)
+                        out.push(String(id));
+                }
+                visit(c);
+            }
+        };
+        visit(root);
+        let ids = [...new Set(out)];
+        // 실제 부모 컨테이너(루트/레이어 제외)가 id 를 가지면 = parentObject 를 이미 아는 경우.
+        // 명시 설정 없이도 그 부모를 후보 맨 위로 올려 바로 고를 수 있게 한다.
+        const parent = target.parent;
+        const knownPid = parent && !((_a = parent.isRootModel) === null || _a === void 0 ? void 0 : _a.call(parent)) && !(parent.isLayer && parent.isLayer()) ? String(((_b = parent.state) === null || _b === void 0 ? void 0 : _b.id) || '') : '';
+        if (knownPid) {
+            ids = [knownPid, ...ids.filter(id => id !== knownPid)];
+        }
+        return ids;
+    }
     _onINeedSelected(e) {
         e.stopPropagation();
         var { callback } = e.detail;

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

@@ -1 +1 @@
-{"version":3,"file":"specifics.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/specifics/specifics.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { SpecificPropertiesBuilder } from './specific-properties-builder.js'\nimport { AbstractProperty } from '../abstract-property'\n\nexport class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      label[component-type] {\n        display: block;\n        margin: 10px;\n\n        text-align: right;\n        font: bold 14px var(--theme-font);\n        color: var(--primary-color);\n        text-transform: capitalize;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) props: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  private boundINeedSelected: any = this._onINeedSelected.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.removeEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  static get scopedElements() {\n    return {\n      'specific-properties-builder': SpecificPropertiesBuilder\n    }\n  }\n\n  render() {\n    const selected = this.selected && this.selected[0]\n    const value = this.value || {}\n\n    return html`\n      <label component-type>${value.type}</label>\n      <fieldset>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n                <input value-key=\"id\" .value=${value.id || ''} />\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>\n      </specific-properties-builder>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this._getValueFromEventTarget(element)\n\n    this._onAfterValueChange(key, value)\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n      return false\n\n    return true\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  _onINeedSelected(e: CustomEvent) {\n    e.stopPropagation()\n\n    var { callback } = e.detail\n\n    this.scene!.undoableChange(() => {\n      callback.call(null, this.selected)\n    })\n  }\n}\n"]}
+{"version":3,"file":"specifics.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/specifics/specifics.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { SpecificPropertiesBuilder } from './specific-properties-builder.js'\nimport { AbstractProperty } from '../abstract-property'\nimport { OxInputEntityId } from '../shapes/ox-input-entity-id'\n\nexport class PropertySpecific extends ScopedElementsMixin(AbstractProperty) {\n  static styles = [\n    PropertySharedStyle,\n    css`\n      label[component-type] {\n        display: block;\n        margin: 10px;\n\n        text-align: right;\n        font: bold 14px var(--theme-font);\n        color: var(--primary-color);\n        text-transform: capitalize;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) props: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  private boundINeedSelected: any = this._onINeedSelected.bind(this)\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.addEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.removeEventListener('i-need-selected', this.boundINeedSelected)\n  }\n\n  static get scopedElements() {\n    return {\n      'specific-properties-builder': SpecificPropertiesBuilder,\n      'ox-input-entity-id': OxInputEntityId\n    }\n  }\n\n  private _isGroupSelected(): boolean {\n    return this.selected?.length > 0 && (this.selected[0] as any).isGroup?.()\n  }\n\n  render() {\n    const selected = this.selected && this.selected[0]\n    const value = this.value || {}\n\n    if (this._isGroupSelected()) {\n      return html`<label component-type>${value.type}</label>`\n    }\n\n    return html`\n      <label component-type>${value.type}</label>\n      <fieldset>\n        <div class=\"property-grid\">\n          ${this._isIdentifiable(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n                ${this._idLookupType(this.selected)\n                  ? html`\n                      <ox-input-entity-id\n                        custom-editor\n                        value-key=\"id\"\n                        .value=${value.id || ''}\n                        .entityType=${this._idLookupType(this.selected)}\n                        .machine=${this._parentMachineId(this.selected)}\n                        .requireMachine=${!!(this.selected[0] as any).idLookupRequiresMachine}\n                      ></ox-input-entity-id>\n                    `\n                  : html`<input value-key=\"id\" .value=${value.id || ''} />`}\n              `\n            : html``}\n          ${this._hasParentObject(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.parent-object-id\">parent object</ox-i18n> </label>\n                <ox-input-entity-id\n                  custom-editor\n                  value-key=\"parentObjectId\"\n                  .value=${value.parentObjectId || ''}\n                  .localItems=${this._parentObjectItems(this.selected)}\n                ></ox-input-entity-id>\n              `\n            : html``}\n          ${this._hasTextProperty(this.selected)\n            ? html`\n                <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n                <input value-key=\"text\" .value=${value.text || ''} />\n                <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n                <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n                <datalist id=\"format-list\">\n                  <option value=\"#,###.\"></option>\n                  <option value=\"#,###.#\"></option>\n                  <option value=\"#,###.0\"></option>\n                  <option value=\"#,##0.#\"></option>\n                  <option value=\"#,##0.0\"></option>\n                  <option value=\"#,##0.0%\"></option>\n                </datalist>\n              `\n            : html``}\n        </div>\n      </fieldset>\n\n      <specific-properties-builder .value=${value} .props=${this.props} .propertyEditor=${this.propertyEditor}>\n      </specific-properties-builder>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value = this._getValueFromEventTarget(element)\n\n    this._onAfterValueChange(key, value)\n  }\n\n  _isIdentifiable(selected: Component[]) {\n    if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n      return false\n    if ((selected[0] as any).isGroup?.())\n      return false\n\n    return true\n  }\n\n  /**\n   * 단일 선택 컴포넌트의 부모 machine id (unit 의 ID 검색 시 조회조건으로 전달).\n   * 부모가 루트 모델/레이어가 아니고 id 를 가지면 그 id 를 반환. 그 외엔 빈 문자열.\n   * (shape 탭 PropertyShapes 와 동일한 규칙.)\n   */\n  _parentMachineId(selected: Component[]): string {\n    const target = selected?.length === 1 ? (selected[0] as any) : null\n    if (!target) return ''\n    // 명시적 parentObjectId(= 부모 머신 id) 우선 — 모델러에 실제 없는 id 라도 그대로 조회조건으로 사용.\n    const pid = target.state?.parentObjectId\n    if (pid) return String(pid)\n    const parent = target.parent\n    if (!parent || parent.isRootModel?.() || (parent.isLayer && parent.isLayer())) return ''\n    return parent.state?.id || ''\n  }\n\n  /**\n   * 선택 컴포넌트의 id 조회용 타입명 (capability `idLookupType`). 값이 있으면 그 타입으로\n   * 검색 에디터, 없으면 plain input — 불필요한 id 리스트 요청을 막는다. 기본은 자기 타입,\n   * 특수 케이스는 override. (shape 탭 PropertyShapes 와 동일 규칙.)\n   */\n  _idLookupType(selected: Component[]): string | undefined {\n    if (selected?.length !== 1) return undefined\n    if (!this._idLookupEnabled(selected)) return undefined\n    return (selected[0] as any).idLookupType\n  }\n\n  /** Board 루트 속성 state.idLookup 으로 id 룩업 전체 ON/OFF (기본 ON). */\n  _idLookupEnabled(selected: Component[]): boolean {\n    const root = (selected?.[0] as any)?.root\n    return root?.state?.idLookup !== false\n  }\n\n  _hasTextProperty(selected: Component[]) {\n    for (let i = 0; i < selected.length; i++) {\n      if (!selected[i].hasTextProperty) return false\n    }\n\n    return true\n  }\n\n  /** 선택 컴포넌트가 ParentObjectMixin(= parentObject/parentObjectTypes capability) 인지. */\n  _hasParentObject(selected: Component[]): boolean {\n    return selected?.length === 1 && 'parentObjectTypes' in (selected[0] as any)\n  }\n\n  /**\n   * parentObject 후보 — 모델(씬)에서 컴포넌트 타입 기준 수집. 컴포넌트의 parentObjectTypes\n   * (예: AGV→['AGVLine'], PortFlow→['Port']) 타입만, 빈 배열이면 모든 머신(isMcsMachine). 자기 자신 제외.\n   */\n  _parentObjectItems(selected: Component[]): string[] {\n    const target = selected?.[0] as any\n    const root = target?.root\n    if (!root) return []\n    const types: string[] = Array.isArray(target.parentObjectTypes) ? target.parentObjectTypes : []\n    const out: string[] = []\n    const visit = (node: any) => {\n      for (const c of node?.components || []) {\n        const match = types.length ? types.includes(c.state?.type) : !!c.isMcsMachine\n        if (match && c !== target) {\n          const id = c.state?.id\n          if (id) out.push(String(id))\n        }\n        visit(c)\n      }\n    }\n    visit(root)\n\n    let ids = [...new Set(out)]\n\n    // 실제 부모 컨테이너(루트/레이어 제외)가 id 를 가지면 = parentObject 를 이미 아는 경우.\n    // 명시 설정 없이도 그 부모를 후보 맨 위로 올려 바로 고를 수 있게 한다.\n    const parent = target.parent\n    const knownPid =\n      parent && !parent.isRootModel?.() && !(parent.isLayer && parent.isLayer()) ? String(parent.state?.id || '') : ''\n    if (knownPid) {\n      ids = [knownPid, ...ids.filter(id => id !== knownPid)]\n    }\n\n    return ids\n  }\n\n  _onINeedSelected(e: CustomEvent) {\n    e.stopPropagation()\n\n    var { callback } = e.detail\n\n    this.scene!.undoableChange(() => {\n      callback.call(null, this.selected)\n    })\n  }\n}\n"]}

package/dist/src/modeller/property-sidebar/styles/styles.d.ts

@@ -12,7 +12,7 @@ import '../../../component/restful-input-fill-style.js';
 import { Component } from '@hatiolab/things-scene';
 import { AbstractProperty } from '../abstract-property.js';
 export declare class PropertyStyles extends AbstractProperty {
-    static styles: any[];
+    static styles: import("lit").CSSResult[];
     value: any;
     selected: Component[];
     fonts: any[];

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

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

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

@@ -7,8 +7,9 @@ let OxSceneLayer = class OxSceneLayer extends LitElement {
         return html ` <slot select="ox-scene-property"></slot> `;
     }
     getModel() {
+        var _a;
         let model = {
-            type: this.type
+            type: (_a = this.type) !== null && _a !== void 0 ? _a : ''
         };
         model = Array.from(this.querySelectorAll('ox-scene-property')).reduce((model, property) => {
             let value = property.value;

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

@@ -1 +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,CAAC;gBAClB,QAAQ,QAAQ,CAAC,IAAI,EAAE,CAAC;oBACtB,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;gBACV,CAAC;gBAED,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;YAC9B,CAAC;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"]}
+{"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,GAAyC;YAChD,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE;SACtB,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,CAAC;gBAClB,QAAQ,QAAQ,CAAC,IAAI,EAAE,CAAC;oBACtB,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;gBACV,CAAC;gBAED,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;YAC9B,CAAC;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: { [key: string]: any; type: string } = {\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-viewer.d.ts

@@ -2,7 +2,7 @@ import './confidential-overlay';
 import './ox-scene-layer';
 import './ox-scene-handler';
 import { LitElement, PropertyValues } from 'lit';
-import { Component, FITMODE, Model, Properties, Scene, SceneMode } from '@hatiolab/things-scene';
+import { Component, FITMODE, LoadTracker, Model, Properties, Scene, SceneMode } from '@hatiolab/things-scene';
 export default class OxSceneViewer extends LitElement {
     static styles: import("lit").CSSResult;
     scene: Scene | null;
@@ -17,6 +17,7 @@ export default class OxSceneViewer extends LitElement {
     disposeWhenDetached: boolean;
     baseUrl: string;
     provider: any;
+    loadTracker?: LoadTracker;
     name: string;
     enableInspector: boolean;
     showInspector: boolean;

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

@@ -120,7 +120,8 @@ let OxSceneViewer = class OxSceneViewer extends LitElement {
             layers,
             handlers,
             mode: this.mode,
-            refProvider: this.provider
+            refProvider: this.provider,
+            loading: this.loadTracker ? { tracker: this.loadTracker } : undefined
         }));
         if (this.provider) {
             this.provider.add(this.name, this.scene);
@@ -237,6 +238,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], OxSceneViewer.prototype, "provider", void 0);
+__decorate([
+    property({ type: Object })
+], OxSceneViewer.prototype, "loadTracker", void 0);
 __decorate([
     property({ type: String })
 ], OxSceneViewer.prototype, "name", void 0);