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

package/dist/src/modeller/property-sidebar/effects/property-event.js

@@ -8,6 +8,16 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { PropertySharedStyle } from '../property-shared-style';
 import { PropertyEventTap } from './property-event-tap';
 import { convert } from './value-converter';
+import { applyLegacyTapToHandlers, eventHandlersToLegacyTap } from './event-handler-adapter.js';
+/**
+ * things-scene v10 의 신규 모델 (`state.eventHandlers: EventHandler[]`) 위에서
+ * 기존 단일-tap UI 를 그대로 동작시키는 어댑터.
+ *
+ * read : eventHandlers 배열에서 trigger='click'/'tap' 인 첫 항목 → legacy tap
+ *        객체로 변환 후 PropertyEventTap 에 전달.
+ * write: PropertyEventTap 이 emit 한 legacy tap 변경 → click 항목을 update/push
+ *        한 새 배열로 외부에 emit. 다른 trigger 의 핸들러는 보존.
+ */
 export class PropertyEvent extends ScopedElementsMixin(LitElement) {
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
@@ -18,33 +28,32 @@ export class PropertyEvent extends ScopedElementsMixin(LitElement) {
         };
     }
     render() {
-        const value = this.value || {};
+        const tap = eventHandlersToLegacyTap(this.value);
         return html `
       <fieldset>
         <legend>
           <ox-i18n msgid="label.tap-event" topic="board-modeller/effects/tap-event"></ox-i18n>
         </legend>
 
-        <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
+        <property-event-tap value-key="tap" .scene=${this.scene} .value=${tap}> </property-event-tap>
       </fieldset>
     `;
     }
     _onValueChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        if (!key) {
+        const element = e.target;
+        const key = element.getAttribute('value-key');
+        // 어댑터는 tap 트리거 하나만 처리. PropertyEventTap host 가 retarget 된
+        // change 의 value-key 만 받아들이고, 자식 input 의 raw change 는 무시.
+        if (key !== 'tap')
             return;
-        }
-        this.value = {
-            ...this.value,
-            [key]: convert(element)
-        };
+        const newTap = convert(element);
+        this.value = applyLegacyTapToHandlers(this.value, newTap);
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
     }
 }
 PropertyEvent.styles = [PropertySharedStyle];
 __decorate([
-    property({ type: Object })
+    property({ type: Array })
 ], PropertyEvent.prototype, "value", void 0);
 __decorate([
     property({ type: Object })

package/dist/src/modeller/property-sidebar/effects/property-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C,MAAM,OAAO,aAAc,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAMhE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,oBAAoB,EAAE,gBAAgB;SACvC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;qDAMsC,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,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,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA3CM,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { PropertyEventTap } from './property-event-tap'\nimport { convert } from './value-converter'\n\nexport class PropertyEvent extends ScopedElementsMixin(LitElement) {\n  static styles = [PropertySharedStyle]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  static get scopedElements() {\n    return {\n      'property-event-tap': PropertyEventTap\n    }\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-i18n msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></ox-i18n>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>\n      </fieldset>\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    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EAGzB,MAAM,4BAA4B,CAAA;AAEnC;;;;;;;;GAQG;AACH,MAAM,OAAO,aAAc,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAMhE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,oBAAoB,EAAE,gBAAgB;SACvC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAEhD,OAAO,IAAI,CAAA;;;;;;qDAMsC,IAAI,CAAC,KAAK,WAAW,GAAG;;KAExE,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACvC,MAAM,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE7C,0DAA0D;QAC1D,0DAA0D;QAC1D,IAAI,GAAG,KAAK,KAAK;YAAE,OAAM;QAEzB,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAc,CAAA;QAC5C,IAAI,CAAC,KAAK,GAAG,wBAAwB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;QAEzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAzCM,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAEV;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAAuB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { PropertyEventTap } from './property-event-tap'\nimport { convert } from './value-converter'\nimport {\n  applyLegacyTapToHandlers,\n  eventHandlersToLegacyTap,\n  EventHandler,\n  LegacyTap\n} from './event-handler-adapter.js'\n\n/**\n * things-scene v10 의 신규 모델 (`state.eventHandlers: EventHandler[]`) 위에서\n * 기존 단일-tap UI 를 그대로 동작시키는 어댑터.\n *\n * read : eventHandlers 배열에서 trigger='click'/'tap' 인 첫 항목 → legacy tap\n *        객체로 변환 후 PropertyEventTap 에 전달.\n * write: PropertyEventTap 이 emit 한 legacy tap 변경 → click 항목을 update/push\n *        한 새 배열로 외부에 emit. 다른 trigger 의 핸들러는 보존.\n */\nexport class PropertyEvent extends ScopedElementsMixin(LitElement) {\n  static styles = [PropertySharedStyle]\n\n  @property({ type: Array }) value?: EventHandler[]\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n  }\n\n  static get scopedElements() {\n    return {\n      'property-event-tap': PropertyEventTap\n    }\n  }\n\n  render() {\n    const tap = eventHandlersToLegacyTap(this.value)\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-i18n msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></ox-i18n>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${tap}> </property-event-tap>\n      </fieldset>\n    `\n  }\n\n  _onValueChange(e: Event) {\n    const element = e.target as HTMLElement\n    const key = element.getAttribute('value-key')\n\n    // 어댑터는 tap 트리거 하나만 처리. PropertyEventTap host 가 retarget 된\n    // change 의 value-key 만 받아들이고, 자식 input 의 raw change 는 무시.\n    if (key !== 'tap') return\n\n    const newTap = convert(element) as LegacyTap\n    this.value = applyLegacyTapToHandlers(this.value, newTap)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -10,7 +10,7 @@ import { SceneInspector } from './inspector/inspector';
 import { PropertyShapes } from './shapes/shapes.js';
 import { PropertySpecific } from './specifics/specifics.js';
 import { PropertyStyles } from './styles/styles.js';
-declare const PropertySidebar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
+declare const PropertySidebar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
 export declare class PropertySidebar extends PropertySidebar_base {
     static styles: import("lit").CSSResult[];
     scene: Scene | null;

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,346 @@
+/**
+ * @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 { searchMachineUnits, filterMachineUnitIds } 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 = filterMachineUnitIds(this._all, this.value || '');
+        return filtered.length ? filtered : this._all;
+    }
+    /** 드롭다운에서 선택 가능한 id 들 (표시 순서). */
+    get _selectableIds() {
+        return this._items;
+    }
+    render() {
+        return html `
+      <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;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this._activeIndex = (this._activeIndex + 1) % ids.length;
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this._activeIndex = (this._activeIndex - 1 + ids.length) % ids.length;
+        }
+        else if (e.key === 'Enter') {
+            if (this._activeIndex >= 0) {
+                e.preventDefault();
+                this._commitValue(ids[this._activeIndex]);
+            }
+        }
+        else if (e.key === 'Escape') {
+            this._open = false;
+            this._activeIndex = -1;
+        }
+    }
+    _select(id, e) {
+        // mousedown 기본동작(blur) 막아 흐름 제어
+        e.preventDefault();
+        this._commitValue(id);
+    }
+    _commitValue(id) {
+        var _a;
+        this.value = id;
+        this._open = false;
+        this._activeIndex = -1;
+        if (this._input)
+            this._input.value = id;
+        this._emitChange();
+        (_a = this._input) === null || _a === void 0 ? void 0 : _a.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 searchMachineUnits(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 { searchMachineUnits, filterMachineUnitIds } 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 = filterMachineUnitIds(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        .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    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      this._activeIndex = (this._activeIndex + 1) % ids.length\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      this._activeIndex = (this._activeIndex - 1 + ids.length) % ids.length\n    } else if (e.key === 'Enter') {\n      if (this._activeIndex >= 0) {\n        e.preventDefault()\n        this._commitValue(ids[this._activeIndex])\n      }\n    } else if (e.key === 'Escape') {\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    this._input?.blur()\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 searchMachineUnits(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 {};