@fmsim/board 2.0.0-beta.11 → 2.0.0-beta.111

package/dist/src/modeller/property-sidebar/shapes/ox-input-entity-id.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/i18n/ox-i18n.js';
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * 컴포넌트 ID 입력기 — 자유 입력 + 타입별 백엔드(MCS) 검색 선택을 함께 제공.
+ *
+ * - 기존처럼 자유롭게 텍스트로 ID 를 입력할 수 있다 (commit = blur/Enter).
+ * - input 에 *포커스가 가면* 아래로 검색 드롭다운이 펼쳐진다. `entityType`
+ *   (컴포넌트 타입) 으로 MCS 에 정의된 ID 후보를 조회한다.
+ *   - machine 타입 → 머신 id 가 1레벨 평면으로 (선택 가능)
+ *   - unit 타입   → machine 이 그룹 헤더, 그 아래 unit id 가 자식 (선택 가능).
+ *     컴포넌트가 부모 machine 을 알면(`machine` prop) 그 머신으로 좁혀 조회.
+ *
+ * value-key="id" 와 함께 property-grid 안에 두면, 이 host 가 `change`(bubbles+
+ * composed) 를 발행하므로 AbstractProperty 제너릭 핸들러가 `element.value` 를
+ * 읽어 property-change 로 전파한다.
+ *
+ * 등록: 패널 자식 커스텀 엘리먼트 컨벤션에 따라 전역 `@customElement` 가 아니라
+ * 부모 패널(PropertyShapes)의 `scopedElements` 로 등록한다 (@open-wc/scoped-elements).
+ */
+export declare class OxInputEntityId extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** 현재 ID 값. */
+    value: string;
+    /** 검색 조건 — 선택된 컴포넌트 타입 (예: 'STOCKER', 'AGV', 'Port'). */
+    entityType: string;
+    /** 검색 조건 — 부모 machine id (unit 컴포넌트가 소속 machine 을 알 때). */
+    machine: string;
+    /** machine 필수 타입(예: Port) — machine 없으면 조회하지 않는다 (후보 과다 방지). */
+    requireMachine: boolean;
+    /** 백엔드 조회 대신 사용할 로컬 후보 리스트 (예: parentObject — 씬의 머신들). null 이면 백엔드 조회. */
+    localItems: string[] | null;
+    placeholder: string;
+    private _open;
+    /** 서버에서 받은 전체 후보 리스트 (포커스 시 1회 조회, 키워드 미적용). */
+    private _all;
+    private _loading;
+    /** machine 필수인데 machine 미지정이라 조회를 보류한 상태. */
+    private _needMachine;
+    /** 선택 가능 항목 기준 active index. */
+    private _activeIndex;
+    private _input;
+    private _blurTimer?;
+    private _loadSeq;
+    /** 마지막으로 발행한 값 — 같은 값 재발행(undo 중복) 방지. */
+    private _lastEmitted?;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    /**
+     * 드롭다운 표시 항목 — 입력값(초기값 포함)으로 풀텍스트 로컬 필터.
+     * 단, 매치가 0이면 전체 후보로 fallback (막다른 "결과 없음" 방지 — 예: committed
+     * id 가 후보 형식과 달라 안 맞는 경우). 서버 재조회 없음.
+     */
+    private get _items();
+    /** 드롭다운에서 선택 가능한 id 들 (표시 순서). */
+    private get _selectableIds();
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDropdown;
+    private _onFocus;
+    private _onBlur;
+    private _onInput;
+    /** 자유 입력 commit (blur/Enter 의 native change) — 기존 free-text 동작 보존. */
+    private _onInputCommit;
+    private _onKeydown;
+    private _select;
+    private _commitValue;
+    private _emitChange;
+    /**
+     * 후보 전체를 1회 조회 (포커스 시). keyword 는 보내지 않으며, 표시 필터는 _items
+     * 게터가 로컬에서 처리한다. entityType(+unit 이면 machine) 만 서버로 보낸다.
+     */
+    private _load;
+}

package/dist/src/modeller/property-sidebar/shapes/ox-input-entity-id.js

@@ -0,0 +1,355 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import { css, html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { searchFigureIds, filterFigureIds } from '@fmsim/api';
+/**
+ * 컴포넌트 ID 입력기 — 자유 입력 + 타입별 백엔드(MCS) 검색 선택을 함께 제공.
+ *
+ * - 기존처럼 자유롭게 텍스트로 ID 를 입력할 수 있다 (commit = blur/Enter).
+ * - input 에 *포커스가 가면* 아래로 검색 드롭다운이 펼쳐진다. `entityType`
+ *   (컴포넌트 타입) 으로 MCS 에 정의된 ID 후보를 조회한다.
+ *   - machine 타입 → 머신 id 가 1레벨 평면으로 (선택 가능)
+ *   - unit 타입   → machine 이 그룹 헤더, 그 아래 unit id 가 자식 (선택 가능).
+ *     컴포넌트가 부모 machine 을 알면(`machine` prop) 그 머신으로 좁혀 조회.
+ *
+ * value-key="id" 와 함께 property-grid 안에 두면, 이 host 가 `change`(bubbles+
+ * composed) 를 발행하므로 AbstractProperty 제너릭 핸들러가 `element.value` 를
+ * 읽어 property-change 로 전파한다.
+ *
+ * 등록: 패널 자식 커스텀 엘리먼트 컨벤션에 따라 전역 `@customElement` 가 아니라
+ * 부모 패널(PropertyShapes)의 `scopedElements` 로 등록한다 (@open-wc/scoped-elements).
+ */
+export class OxInputEntityId extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 현재 ID 값. */
+        this.value = '';
+        /** 검색 조건 — 선택된 컴포넌트 타입 (예: 'STOCKER', 'AGV', 'Port'). */
+        this.entityType = '';
+        /** 검색 조건 — 부모 machine id (unit 컴포넌트가 소속 machine 을 알 때). */
+        this.machine = '';
+        /** machine 필수 타입(예: Port) — machine 없으면 조회하지 않는다 (후보 과다 방지). */
+        this.requireMachine = false;
+        /** 백엔드 조회 대신 사용할 로컬 후보 리스트 (예: parentObject — 씬의 머신들). null 이면 백엔드 조회. */
+        this.localItems = null;
+        this.placeholder = '';
+        this._open = false;
+        /** 서버에서 받은 전체 후보 리스트 (포커스 시 1회 조회, 키워드 미적용). */
+        this._all = [];
+        this._loading = false;
+        /** machine 필수인데 machine 미지정이라 조회를 보류한 상태. */
+        this._needMachine = false;
+        /** 선택 가능 항목 기준 active index. */
+        this._activeIndex = -1;
+        this._loadSeq = 0;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this._blurTimer);
+    }
+    updated(changed) {
+        // 열린 상태에서 조회 조건(타입/부모 머신)이 바뀌면 재조회 (예: 부모 머신을 방금 지정).
+        if (this._open && (changed.has('entityType') || changed.has('machine') || changed.has('localItems'))) {
+            this._load();
+        }
+        // 화살표 키로 active 항목 이동 시 항상 보이도록 드롭다운을 스크롤.
+        if (changed.has('_activeIndex') && this._open && this._activeIndex >= 0) {
+            const el = this.renderRoot.querySelector('.item.active');
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    /**
+     * 드롭다운 표시 항목 — 입력값(초기값 포함)으로 풀텍스트 로컬 필터.
+     * 단, 매치가 0이면 전체 후보로 fallback (막다른 "결과 없음" 방지 — 예: committed
+     * id 가 후보 형식과 달라 안 맞는 경우). 서버 재조회 없음.
+     */
+    get _items() {
+        if (!this._all.length)
+            return [];
+        const filtered = filterFigureIds(this._all, this.value || '');
+        return filtered.length ? filtered : this._all;
+    }
+    /** 드롭다운에서 선택 가능한 id 들 (표시 순서). */
+    get _selectableIds() {
+        return this._items;
+    }
+    render() {
+        return html `
+      <input
+        part="input"
+        .value=${this.value || ''}
+        placeholder=${this.placeholder}
+        autocomplete="off"
+        @focus=${this._onFocus}
+        @blur=${this._onBlur}
+        @input=${this._onInput}
+        @change=${this._onInputCommit}
+        @keydown=${this._onKeydown}
+      />
+      ${this._open ? this._renderDropdown() : ''}
+    `;
+    }
+    _renderDropdown() {
+        if (this._needMachine) {
+            return html `<div class="dropdown">
+        <div class="hint"><ox-i18n msgid="text.need-parent-machine">상위 머신을 먼저 지정하세요</ox-i18n></div>
+      </div>`;
+        }
+        if (this._loading) {
+            return html `<div class="dropdown"><div class="hint"><ox-i18n msgid="text.searching">searching…</ox-i18n></div></div>`;
+        }
+        if (!this._items.length) {
+            return html `<div class="dropdown"><div class="hint"><ox-i18n msgid="text.no-results">no results</ox-i18n></div></div>`;
+        }
+        return html `
+      <div class="dropdown">
+        ${this._items.map((id, idx) => html `
+            <div
+              class="item ${idx === this._activeIndex ? 'active' : ''}"
+              @mousedown=${(e) => this._select(id, e)}
+            >
+              ${id}
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    _onFocus() {
+        clearTimeout(this._blurTimer);
+        this._open = true;
+        this._activeIndex = -1;
+        this._load();
+    }
+    _onBlur() {
+        // 드롭다운 항목 mousedown 이 먼저 처리되도록 약간 지연 후 닫기
+        this._blurTimer = setTimeout(() => {
+            this._open = false;
+            this._activeIndex = -1;
+        }, 150);
+    }
+    _onInput(e) {
+        this.value = e.target.value;
+        this._open = true;
+        this._activeIndex = -1;
+    }
+    /** 자유 입력 commit (blur/Enter 의 native change) — 기존 free-text 동작 보존. */
+    _onInputCommit(e) {
+        this.value = e.target.value;
+        this._emitChange();
+    }
+    _onKeydown(e) {
+        const ids = this._selectableIds;
+        if (!this._open || !ids.length) {
+            if (e.key === 'Escape')
+                this._open = false;
+            return;
+        }
+        // 드롭다운이 열린 상태에서 처리하는 키는 부모(다이얼로그 confirm/cancel 등)로
+        // 전파되지 않도록 stopPropagation 한다. (Enter 로 항목 선택 시 다이얼로그가 닫히던 버그.)
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            this._activeIndex = (this._activeIndex + 1) % ids.length;
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            this._activeIndex = (this._activeIndex - 1 + ids.length) % ids.length;
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (this._activeIndex >= 0) {
+                this._commitValue(ids[this._activeIndex]);
+            }
+        }
+        else if (e.key === 'Escape') {
+            e.stopPropagation();
+            this._open = false;
+            this._activeIndex = -1;
+        }
+    }
+    _select(id, e) {
+        // mousedown 기본동작(blur) 막아 흐름 제어
+        e.preventDefault();
+        this._commitValue(id);
+    }
+    _commitValue(id) {
+        this.value = id;
+        this._open = false;
+        this._activeIndex = -1;
+        if (this._input)
+            this._input.value = id;
+        this._emitChange();
+        // NOTE: blur() 하지 않는다. null 로 blur 하면 relatedTarget=null 이 되어, 팝업 안에서
+        // 쓰일 때 OxPopup 의 focusout(밖으로 나감) 판정에 걸려 팝업이 통째로 닫혔다.
+        // 드롭다운은 _open=false 로 이미 닫히므로 blur 는 불필요하고, 선택 후 입력창에
+        // 포커스가 남는 편이 자연스럽다.
+    }
+    _emitChange() {
+        // 같은 값 재발행 skip (예: 드롭다운 선택 직후 blur 의 native change 중복)
+        if (this.value === this._lastEmitted)
+            return;
+        this._lastEmitted = this.value;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    /**
+     * 후보 전체를 1회 조회 (포커스 시). keyword 는 보내지 않으며, 표시 필터는 _items
+     * 게터가 로컬에서 처리한다. entityType(+unit 이면 machine) 만 서버로 보낸다.
+     */
+    async _load() {
+        // 로컬 리스트 모드(예: parentObject) — 백엔드 조회 없이 주어진 리스트 사용.
+        if (this.localItems != null) {
+            this._needMachine = false;
+            this._loading = false;
+            this._all = this.localItems;
+            return;
+        }
+        if (!this.entityType) {
+            this._all = [];
+            return;
+        }
+        // machine 필수 타입(Port 등)인데 부모 머신 미지정 → 조회 보류 (후보 과다 방지).
+        if (this.requireMachine && !this.machine) {
+            this._all = [];
+            this._needMachine = true;
+            return;
+        }
+        this._needMachine = false;
+        const seq = ++this._loadSeq;
+        this._loading = true;
+        try {
+            const ids = await searchFigureIds(this.entityType, '', this.machine ? { machine: this.machine } : {});
+            if (seq !== this._loadSeq)
+                return; // 더 최신 조회가 있으면 폐기
+            this._all = ids;
+        }
+        catch (_a) {
+            if (seq === this._loadSeq)
+                this._all = [];
+        }
+        finally {
+            if (seq === this._loadSeq)
+                this._loading = false;
+        }
+    }
+}
+OxInputEntityId.styles = [
+    ScrollbarStyles,
+    css `
+    :host {
+      position: relative;
+      display: flex;
+      align-items: stretch;
+      width: 100%;
+      height: 100%;
+    }
+
+    input {
+      flex: 1 1 auto;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: var(--input-padding, 2px 4px);
+      font: inherit;
+      border: var(--property-sidebar-fieldset-border, 1px solid #ccc);
+    }
+
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      z-index: 100;
+
+      max-height: 220px;
+      overflow-y: auto;
+
+      margin-top: 2px;
+      background: var(--md-sys-color-surface, #fff);
+      border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+      border-radius: 4px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
+    }
+
+    .group-header {
+      padding: 3px 8px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: var(--md-sys-color-on-surface-variant, #777);
+      background: var(--md-sys-color-surface-variant, #eef0f3);
+      position: sticky;
+      top: 0;
+    }
+
+    .item {
+      padding: 4px 8px;
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font: var(--property-sidebar-fieldset-label, 12px sans-serif);
+    }
+
+    /* unit 항목 (그룹 자식) 은 살짝 들여쓰기 */
+    .item.child {
+      padding-left: 18px;
+    }
+
+    .item:hover,
+    .item.active {
+      background: var(--md-sys-color-secondary-container, #d7e3ff);
+    }
+
+    .hint {
+      padding: 6px 8px;
+      color: var(--md-sys-color-on-surface-variant, #888);
+      font-size: 11px;
+    }
+  `
+];
+__decorate([
+    property({ type: String })
+], OxInputEntityId.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputEntityId.prototype, "entityType", void 0);
+__decorate([
+    property({ type: String })
+], OxInputEntityId.prototype, "machine", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxInputEntityId.prototype, "requireMachine", void 0);
+__decorate([
+    property({ type: Array })
+], OxInputEntityId.prototype, "localItems", void 0);
+__decorate([
+    property({ type: String })
+], OxInputEntityId.prototype, "placeholder", void 0);
+__decorate([
+    state()
+], OxInputEntityId.prototype, "_open", void 0);
+__decorate([
+    state()
+], OxInputEntityId.prototype, "_all", void 0);
+__decorate([
+    state()
+], OxInputEntityId.prototype, "_loading", void 0);
+__decorate([
+    state()
+], OxInputEntityId.prototype, "_needMachine", void 0);
+__decorate([
+    state()
+], OxInputEntityId.prototype, "_activeIndex", void 0);
+__decorate([
+    query('input')
+], OxInputEntityId.prototype, "_input", void 0);
+//# sourceMappingURL=ox-input-entity-id.js.map

package/dist/src/modeller/property-sidebar/shapes/ox-input-entity-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-entity-id.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/shapes/ox-input-entity-id.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { searchFigureIds, filterFigureIds } from '@fmsim/api'\n\n/**\n * 컴포넌트 ID 입력기 — 자유 입력 + 타입별 백엔드(MCS) 검색 선택을 함께 제공.\n *\n * - 기존처럼 자유롭게 텍스트로 ID 를 입력할 수 있다 (commit = blur/Enter).\n * - input 에 *포커스가 가면* 아래로 검색 드롭다운이 펼쳐진다. `entityType`\n *   (컴포넌트 타입) 으로 MCS 에 정의된 ID 후보를 조회한다.\n *   - machine 타입 → 머신 id 가 1레벨 평면으로 (선택 가능)\n *   - unit 타입   → machine 이 그룹 헤더, 그 아래 unit id 가 자식 (선택 가능).\n *     컴포넌트가 부모 machine 을 알면(`machine` prop) 그 머신으로 좁혀 조회.\n *\n * value-key=\"id\" 와 함께 property-grid 안에 두면, 이 host 가 `change`(bubbles+\n * composed) 를 발행하므로 AbstractProperty 제너릭 핸들러가 `element.value` 를\n * 읽어 property-change 로 전파한다.\n *\n * 등록: 패널 자식 커스텀 엘리먼트 컨벤션에 따라 전역 `@customElement` 가 아니라\n * 부모 패널(PropertyShapes)의 `scopedElements` 로 등록한다 (@open-wc/scoped-elements).\n */\nexport class OxInputEntityId extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n    :host {\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n      height: 100%;\n    }\n\n    input {\n      flex: 1 1 auto;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      margin: 0;\n      padding: var(--input-padding, 2px 4px);\n      font: inherit;\n      border: var(--property-sidebar-fieldset-border, 1px solid #ccc);\n    }\n\n    .dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n\n      max-height: 220px;\n      overflow-y: auto;\n\n      margin-top: 2px;\n      background: var(--md-sys-color-surface, #fff);\n      border: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);\n      border-radius: 4px;\n      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);\n    }\n\n    .group-header {\n      padding: 3px 8px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--md-sys-color-on-surface-variant, #777);\n      background: var(--md-sys-color-surface-variant, #eef0f3);\n      position: sticky;\n      top: 0;\n    }\n\n    .item {\n      padding: 4px 8px;\n      cursor: pointer;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font: var(--property-sidebar-fieldset-label, 12px sans-serif);\n    }\n\n    /* unit 항목 (그룹 자식) 은 살짝 들여쓰기 */\n    .item.child {\n      padding-left: 18px;\n    }\n\n    .item:hover,\n    .item.active {\n      background: var(--md-sys-color-secondary-container, #d7e3ff);\n    }\n\n    .hint {\n      padding: 6px 8px;\n      color: var(--md-sys-color-on-surface-variant, #888);\n      font-size: 11px;\n    }\n  `\n  ]\n\n  /** 현재 ID 값. */\n  @property({ type: String }) value = ''\n  /** 검색 조건 — 선택된 컴포넌트 타입 (예: 'STOCKER', 'AGV', 'Port'). */\n  @property({ type: String }) entityType = ''\n  /** 검색 조건 — 부모 machine id (unit 컴포넌트가 소속 machine 을 알 때). */\n  @property({ type: String }) machine = ''\n  /** machine 필수 타입(예: Port) — machine 없으면 조회하지 않는다 (후보 과다 방지). */\n  @property({ type: Boolean }) requireMachine = false\n  /** 백엔드 조회 대신 사용할 로컬 후보 리스트 (예: parentObject — 씬의 머신들). null 이면 백엔드 조회. */\n  @property({ type: Array }) localItems: string[] | null = null\n  @property({ type: String }) placeholder = ''\n\n  @state() private _open = false\n  /** 서버에서 받은 전체 후보 리스트 (포커스 시 1회 조회, 키워드 미적용). */\n  @state() private _all: string[] = []\n  @state() private _loading = false\n  /** machine 필수인데 machine 미지정이라 조회를 보류한 상태. */\n  @state() private _needMachine = false\n  /** 선택 가능 항목 기준 active index. */\n  @state() private _activeIndex = -1\n\n  @query('input') private _input!: HTMLInputElement\n\n  private _blurTimer?: ReturnType<typeof setTimeout>\n  private _loadSeq = 0\n  /** 마지막으로 발행한 값 — 같은 값 재발행(undo 중복) 방지. */\n  private _lastEmitted?: string\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    clearTimeout(this._blurTimer)\n  }\n\n  updated(changed: PropertyValues) {\n    // 열린 상태에서 조회 조건(타입/부모 머신)이 바뀌면 재조회 (예: 부모 머신을 방금 지정).\n    if (this._open && (changed.has('entityType') || changed.has('machine') || changed.has('localItems'))) {\n      this._load()\n    }\n    // 화살표 키로 active 항목 이동 시 항상 보이도록 드롭다운을 스크롤.\n    if (changed.has('_activeIndex') && this._open && this._activeIndex >= 0) {\n      const el = this.renderRoot.querySelector('.item.active') as HTMLElement | null\n      el?.scrollIntoView({ block: 'nearest' })\n    }\n  }\n\n  /**\n   * 드롭다운 표시 항목 — 입력값(초기값 포함)으로 풀텍스트 로컬 필터.\n   * 단, 매치가 0이면 전체 후보로 fallback (막다른 \"결과 없음\" 방지 — 예: committed\n   * id 가 후보 형식과 달라 안 맞는 경우). 서버 재조회 없음.\n   */\n  private get _items(): string[] {\n    if (!this._all.length) return []\n    const filtered = filterFigureIds(this._all, this.value || '')\n    return filtered.length ? filtered : this._all\n  }\n\n  /** 드롭다운에서 선택 가능한 id 들 (표시 순서). */\n  private get _selectableIds(): string[] {\n    return this._items\n  }\n\n  render() {\n    return html`\n      <input\n        part=\"input\"\n        .value=${this.value || ''}\n        placeholder=${this.placeholder}\n        autocomplete=\"off\"\n        @focus=${this._onFocus}\n        @blur=${this._onBlur}\n        @input=${this._onInput}\n        @change=${this._onInputCommit}\n        @keydown=${this._onKeydown}\n      />\n      ${this._open ? this._renderDropdown() : ''}\n    `\n  }\n\n  private _renderDropdown() {\n    if (this._needMachine) {\n      return html`<div class=\"dropdown\">\n        <div class=\"hint\"><ox-i18n msgid=\"text.need-parent-machine\">상위 머신을 먼저 지정하세요</ox-i18n></div>\n      </div>`\n    }\n    if (this._loading) {\n      return html`<div class=\"dropdown\"><div class=\"hint\"><ox-i18n msgid=\"text.searching\">searching…</ox-i18n></div></div>`\n    }\n    if (!this._items.length) {\n      return html`<div class=\"dropdown\"><div class=\"hint\"><ox-i18n msgid=\"text.no-results\">no results</ox-i18n></div></div>`\n    }\n\n    return html`\n      <div class=\"dropdown\">\n        ${this._items.map(\n          (id, idx) => html`\n            <div\n              class=\"item ${idx === this._activeIndex ? 'active' : ''}\"\n              @mousedown=${(e: MouseEvent) => this._select(id, e)}\n            >\n              ${id}\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n\n  private _onFocus() {\n    clearTimeout(this._blurTimer)\n    this._open = true\n    this._activeIndex = -1\n    this._load()\n  }\n\n  private _onBlur() {\n    // 드롭다운 항목 mousedown 이 먼저 처리되도록 약간 지연 후 닫기\n    this._blurTimer = setTimeout(() => {\n      this._open = false\n      this._activeIndex = -1\n    }, 150)\n  }\n\n  private _onInput(e: Event) {\n    this.value = (e.target as HTMLInputElement).value\n    this._open = true\n    this._activeIndex = -1\n  }\n\n  /** 자유 입력 commit (blur/Enter 의 native change) — 기존 free-text 동작 보존. */\n  private _onInputCommit(e: Event) {\n    this.value = (e.target as HTMLInputElement).value\n    this._emitChange()\n  }\n\n  private _onKeydown(e: KeyboardEvent) {\n    const ids = this._selectableIds\n    if (!this._open || !ids.length) {\n      if (e.key === 'Escape') this._open = false\n      return\n    }\n    // 드롭다운이 열린 상태에서 처리하는 키는 부모(다이얼로그 confirm/cancel 등)로\n    // 전파되지 않도록 stopPropagation 한다. (Enter 로 항목 선택 시 다이얼로그가 닫히던 버그.)\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      e.stopPropagation()\n      this._activeIndex = (this._activeIndex + 1) % ids.length\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      e.stopPropagation()\n      this._activeIndex = (this._activeIndex - 1 + ids.length) % ids.length\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      e.stopPropagation()\n      if (this._activeIndex >= 0) {\n        this._commitValue(ids[this._activeIndex])\n      }\n    } else if (e.key === 'Escape') {\n      e.stopPropagation()\n      this._open = false\n      this._activeIndex = -1\n    }\n  }\n\n  private _select(id: string, e: MouseEvent) {\n    // mousedown 기본동작(blur) 막아 흐름 제어\n    e.preventDefault()\n    this._commitValue(id)\n  }\n\n  private _commitValue(id: string) {\n    this.value = id\n    this._open = false\n    this._activeIndex = -1\n    if (this._input) this._input.value = id\n    this._emitChange()\n    // NOTE: blur() 하지 않는다. null 로 blur 하면 relatedTarget=null 이 되어, 팝업 안에서\n    // 쓰일 때 OxPopup 의 focusout(밖으로 나감) 판정에 걸려 팝업이 통째로 닫혔다.\n    // 드롭다운은 _open=false 로 이미 닫히므로 blur 는 불필요하고, 선택 후 입력창에\n    // 포커스가 남는 편이 자연스럽다.\n  }\n\n  private _emitChange() {\n    // 같은 값 재발행 skip (예: 드롭다운 선택 직후 blur 의 native change 중복)\n    if (this.value === this._lastEmitted) return\n    this._lastEmitted = this.value\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 후보 전체를 1회 조회 (포커스 시). keyword 는 보내지 않으며, 표시 필터는 _items\n   * 게터가 로컬에서 처리한다. entityType(+unit 이면 machine) 만 서버로 보낸다.\n   */\n  private async _load() {\n    // 로컬 리스트 모드(예: parentObject) — 백엔드 조회 없이 주어진 리스트 사용.\n    if (this.localItems != null) {\n      this._needMachine = false\n      this._loading = false\n      this._all = this.localItems\n      return\n    }\n    if (!this.entityType) {\n      this._all = []\n      return\n    }\n    // machine 필수 타입(Port 등)인데 부모 머신 미지정 → 조회 보류 (후보 과다 방지).\n    if (this.requireMachine && !this.machine) {\n      this._all = []\n      this._needMachine = true\n      return\n    }\n    this._needMachine = false\n    const seq = ++this._loadSeq\n    this._loading = true\n    try {\n      const ids = await searchFigureIds(this.entityType, '', this.machine ? { machine: this.machine } : {})\n      if (seq !== this._loadSeq) return // 더 최신 조회가 있으면 폐기\n      this._all = ids\n    } catch {\n      if (seq === this._loadSeq) this._all = []\n    } finally {\n      if (seq === this._loadSeq) this._loading = false\n    }\n  }\n}\n"]}

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

@@ -7,7 +7,12 @@ import '@material/web/icon/icon.js';
 import '@operato/i18n/ox-i18n.js';
 import { BOUNDS, Component, Properties } from '@hatiolab/things-scene';
 import { AbstractProperty } from '../abstract-property';
-export declare class PropertyShapes extends AbstractProperty {
+import { OxInputEntityId } from './ox-input-entity-id';
+declare const PropertyShapes_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertyShapes extends PropertyShapes_base {
+    static get scopedElements(): {
+        'ox-input-entity-id': typeof OxInputEntityId;
+    };
     static styles: import("lit").CSSResult[];
     value?: Properties;
     bounds: BOUNDS | null;
@@ -18,7 +23,23 @@ export declare class PropertyShapes extends AbstractProperty {
     _hasTextProperty(selected: Component[]): boolean;
     _hasProperties(selected: Component[]): boolean;
     _isIdentifiable(selected: Component[]): boolean;
+    /**
+     * 단일 선택 컴포넌트의 부모 machine id (unit 의 ID 검색 시 조회조건으로 전달).
+     * 부모가 루트 모델/레이어가 아니고 id 를 가지면 그 id 를 반환 — unit 이 자신의
+     * 소속 machine 을 특정할 수 있는 경우에 해당. 그 외엔 빈 문자열.
+     */
+    _parentMachineId(selected: Component[]): string;
+    /**
+     * 선택 컴포넌트의 id 조회용 타입명 (capability `idLookupType`). 값이 있으면 그 타입으로
+     * 검색 에디터를 띄우고, 없으면(일반 도형·Carrier 등) plain input 으로 두어 불필요한 id
+     * 리스트 요청을 보내지 않는다. 기본은 자기 타입이며 컴포넌트가 다른 타입으로 override 가능.
+     * (머신/유닛 + Node 가 opt-in. isLVComponent 은 Carrier 포함·Node 제외라 부적합.)
+     */
+    _idLookupType(selected: Component[]): string | undefined;
+    /** Board 루트 속성 state.idLookup 으로 id 룩업 전체 ON/OFF (기본 ON). */
+    _idLookupEnabled(selected: Component[]): boolean;
     _isClassIdentifiable(selected: Component[]): boolean;
     _isLine(selected: Component[]): boolean;
     _is3dish(selected: Component[]): boolean;
 }
+export {};

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

@@ -9,19 +9,28 @@ 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 { isThreedEnabled } from '@hatiolab/things-scene';
+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 +39,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 +105,26 @@ export class PropertyShapes extends AbstractProperty {
                   ${this.selected.length && this.selected[0].isRootModel()
                 ? html ``
                 : html `
+                        ${isThreedEnabled()
+                    ? 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"
+                              />
+                            `
+                    : html ``}
+
                         <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 +216,32 @@ export class PropertyShapes extends AbstractProperty {
                   <option value="width">width</option>
                   <option value="height">height</option>
                 </select>
+
+                ${isThreedEnabled()
+                ? html `
+                      <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>
+                    `
+                : html ``}
+
+                <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 +291,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 +370,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;
       }