@operato/scene-visualizer 10.0.0-beta.7 → 10.0.0-beta.9

package/dist/editors/property-editor-gltf-play-targets.js

@@ -0,0 +1,388 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * GLTF 애니메이션 타겟 선택 에디터.
+ * All / None / Custom 모드로 started에 바인딩할 애니메이션 선택.
+ * 각 애니메이션을 개별 미리보기(play/stop) 가능.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js';
+function getMode(value) {
+    if (value === '*')
+        return 'all';
+    if (value === 'none')
+        return 'none';
+    if (Array.isArray(value) && value.length > 0)
+        return 'custom';
+    if (Array.isArray(value))
+        return 'custom'; // empty array = custom with nothing
+    if (!value)
+        return 'all'; // undefined = default = all
+    return 'all';
+}
+let GLTFPlayTargetsEditor = class GLTFPlayTargetsEditor extends OxPropertyEditor {
+    static styles = [
+        ...OxPropertyEditor.styles,
+        ScrollbarStyles,
+        css `
+      .mode-selector {
+        display: flex;
+        gap: 0;
+        margin-bottom: 6px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .mode-btn {
+        flex: 1;
+        padding: 5px 0;
+        font-size: 11px;
+        font-weight: 500;
+        text-align: center;
+        cursor: pointer;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        border: none;
+        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));
+        transition: all 0.15s;
+      }
+
+      .mode-btn:last-child {
+        border-right: none;
+      }
+
+      .mode-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+      }
+
+      .mode-btn[active] {
+        background: var(--md-sys-color-primary, #6750a4);
+        color: var(--md-sys-color-on-primary, #fff);
+      }
+
+      .anim-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1px;
+        max-height: 200px;
+        overflow-y: auto;
+        font-size: 12px;
+      }
+
+      .anim-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.1s;
+      }
+
+      .anim-item:hover {
+        background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));
+      }
+
+      .anim-item input[type='checkbox'] {
+        margin: 0;
+        accent-color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .anim-item span {
+        flex: 1;
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .anim-item md-icon {
+        --md-icon-size: 18px;
+        cursor: pointer;
+        color: var(--md-sys-color-on-surface-variant, #666);
+        transition: color 0.15s;
+      }
+
+      .anim-item md-icon:hover {
+        color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .anim-item md-icon[playing] {
+        color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .mode-desc {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant, #666);
+        padding: 4px 0;
+      }
+
+      .mini-btn {
+        font-size: 10px;
+        padding: 2px 8px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));
+        border-radius: 4px;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        cursor: pointer;
+      }
+
+      .mini-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+      }
+
+      .play-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 0;
+        margin-bottom: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .play-toggle input[type='checkbox'] {
+        accent-color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .empty {
+        color: var(--md-sys-color-on-surface-variant, #999);
+        font-size: 11px;
+        padding: 8px;
+        text-align: center;
+      }
+    `
+    ];
+    _component = null;
+    _lastExternalValue = undefined;
+    updated(changes) {
+        if (changes.has('src')) {
+            this.dispatchEvent(new CustomEvent('i-need-selected', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    callback: (selected) => {
+                        this._component = selected?.[0];
+                        this._refreshAnimNames();
+                    }
+                }
+            }));
+        }
+    }
+    _refreshAnimNames() {
+        if (!this._component) {
+            this._animNames = [];
+            return;
+        }
+        this._animNames = this._component.animationNames ?? [];
+    }
+    _pollTimer;
+    connectedCallback() {
+        super.connectedCallback();
+        // GLTF 비동기 로드 후 애니메이션 목록 갱신을 위한 폴링 (최대 20회 = 20초)
+        let retries = 0;
+        this._pollTimer = window.setInterval(() => {
+            if (!this._animNames?.length) {
+                this._refreshAnimNames();
+            }
+            if (this._animNames?.length || ++retries >= 20) {
+                clearInterval(this._pollTimer);
+                this._pollTimer = undefined;
+            }
+        }, 1000);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._pollTimer) {
+            clearInterval(this._pollTimer);
+        }
+    }
+    editorTemplate(value, _spec) {
+        if (!this._animNames?.length) {
+            this._refreshAnimNames();
+        }
+        if (value !== this._lastExternalValue) {
+            this._lastExternalValue = value;
+            this._mode = getMode(value);
+        }
+        const mode = this._mode;
+        const animCount = this._animNames?.length ?? 0;
+        const targets = Array.isArray(this.value) ? this.value : (Array.isArray(value) ? value : []);
+        const isPlaying = this._getPlayState();
+        return html `
+      <fieldset fullwidth>
+        ${animCount > 0
+            ? html `
+              <label class="play-toggle">
+                <input
+                  type="checkbox"
+                  .checked=${isPlaying}
+                  @change=${(e) => {
+                e.stopPropagation();
+                this._setPlay(e.target.checked);
+            }}
+                />
+                <span>Play</span>
+              </label>
+
+              <div class="mode-selector">
+                <div class="mode-btn" ?active=${mode === 'all'} @click=${() => this._setMode('all')}>All</div>
+                <div class="mode-btn" ?active=${mode === 'none'} @click=${() => this._setMode('none')}>None</div>
+                <div class="mode-btn" ?active=${mode === 'custom'} @click=${() => this._setMode('custom')}>Custom</div>
+              </div>
+
+              ${mode === 'all'
+                ? html `<div class="mode-desc">${animCount} animations — play all</div>`
+                : nothing}
+              ${mode === 'none'
+                ? html `<div class="mode-desc">No animations auto-play</div>`
+                : nothing}
+              ${mode === 'custom'
+                ? html `
+                    <div class="mode-desc">
+                      <span style="flex:1">${targets.length} / ${animCount} selected</span>
+                      <button class="mini-btn" @click=${() => this._applyValue([...(this._animNames ?? [])])}>All</button>
+                      <button class="mini-btn" @click=${() => this._applyValue([])}>Clear</button>
+                    </div>
+                  `
+                : nothing}
+
+              <div class="anim-list">
+                ${(this._animNames ?? []).map(name => html `
+                    <div class="anim-item">
+                      ${mode === 'custom'
+                ? html `
+                            <input
+                              type="checkbox"
+                              .checked=${targets.includes(name)}
+                              @change=${(e) => {
+                    e.stopPropagation();
+                    this._onToggle(name, e.target.checked, targets);
+                }}
+                            />
+                          `
+                : nothing}
+                      <span>${name}</span>
+                      <md-icon
+                        ?playing=${this._playingAnim === name}
+                        @click=${() => this._togglePreview(name)}
+                        title="preview"
+                      >${this._playingAnim === name ? 'stop' : 'play_arrow'}</md-icon>
+                    </div>
+                  `)}
+              </div>
+            `
+            : html `<div class="empty">No animations available</div>`}
+      </fieldset>
+    `;
+    }
+    _setMode(mode) {
+        const prevMode = this._mode;
+        this._mode = mode;
+        let newValue;
+        switch (mode) {
+            case 'all':
+                newValue = '*';
+                break;
+            case 'none':
+                newValue = 'none';
+                break;
+            case 'custom':
+                if (prevMode === 'all') {
+                    newValue = [...(this._animNames ?? [])];
+                }
+                else if (prevMode === 'none') {
+                    newValue = [];
+                }
+                else {
+                    newValue = Array.isArray(this.value) ? this.value : [];
+                }
+                break;
+        }
+        this._applyValue(newValue);
+    }
+    _onToggle(name, checked, current) {
+        const list = [...current];
+        if (checked) {
+            if (!list.includes(name))
+                list.push(name);
+        }
+        else {
+            const idx = list.indexOf(name);
+            if (idx >= 0)
+                list.splice(idx, 1);
+        }
+        this._applyValue(list);
+    }
+    _applyValue(newValue) {
+        this.value = newValue;
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    selected[0].set('playTargets', newValue);
+                }
+            }
+        }));
+    }
+    _getPlayState() {
+        return this._component?.state?.play !== false;
+    }
+    _setPlay(value) {
+        if (!this._component)
+            return;
+        this._component.set('play', value);
+        this.requestUpdate();
+    }
+    _togglePreview(name) {
+        if (!this._component)
+            return;
+        const ro = this._component.realObject;
+        if (!ro?._animationActions)
+            return;
+        const action = ro._animationActions.get(name);
+        if (!action)
+            return;
+        if (this._playingAnim === name) {
+            action.stop();
+            this._playingAnim = null;
+        }
+        else {
+            // 이전 프리뷰 중지
+            if (this._playingAnim) {
+                ro._animationActions.get(this._playingAnim)?.stop();
+            }
+            action.play();
+            this._playingAnim = name;
+        }
+        this._component.invalidate();
+        this.requestUpdate();
+    }
+};
+__decorate([
+    property({ type: String })
+], GLTFPlayTargetsEditor.prototype, "src", void 0);
+__decorate([
+    state()
+], GLTFPlayTargetsEditor.prototype, "_animNames", void 0);
+__decorate([
+    state()
+], GLTFPlayTargetsEditor.prototype, "_mode", void 0);
+__decorate([
+    state()
+], GLTFPlayTargetsEditor.prototype, "_playingAnim", void 0);
+GLTFPlayTargetsEditor = __decorate([
+    customElement('property-editor-gltf-play-targets')
+], GLTFPlayTargetsEditor);
+export default GLTFPlayTargetsEditor;
+//# sourceMappingURL=property-editor-gltf-play-targets.js.map

package/dist/editors/property-editor-gltf-play-targets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-gltf-play-targets.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-play-targets.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * GLTF 애니메이션 타겟 선택 에디터.\n * All / None / Custom 모드로 started에 바인딩할 애니메이션 선택.\n * 각 애니메이션을 개별 미리보기(play/stop) 가능.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js'\n\ntype AnimMode = 'all' | 'none' | 'custom'\n\nfunction getMode(value: any): AnimMode {\n  if (value === '*') return 'all'\n  if (value === 'none') return 'none'\n  if (Array.isArray(value) && value.length > 0) return 'custom'\n  if (Array.isArray(value)) return 'custom' // empty array = custom with nothing\n  if (!value) return 'all' // undefined = default = all\n  return 'all'\n}\n\n@customElement('property-editor-gltf-play-targets')\nexport default class GLTFPlayTargetsEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    ScrollbarStyles,\n    css`\n      .mode-selector {\n        display: flex;\n        gap: 0;\n        margin-bottom: 6px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n        border-radius: 6px;\n        overflow: hidden;\n      }\n\n      .mode-btn {\n        flex: 1;\n        padding: 5px 0;\n        font-size: 11px;\n        font-weight: 500;\n        text-align: center;\n        cursor: pointer;\n        background: var(--md-sys-color-surface-container, #f3edf7);\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        border: none;\n        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));\n        transition: all 0.15s;\n      }\n\n      .mode-btn:last-child {\n        border-right: none;\n      }\n\n      .mode-btn:hover {\n        background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n      }\n\n      .mode-btn[active] {\n        background: var(--md-sys-color-primary, #6750a4);\n        color: var(--md-sys-color-on-primary, #fff);\n      }\n\n      .anim-list {\n        display: flex;\n        flex-direction: column;\n        gap: 1px;\n        max-height: 200px;\n        overflow-y: auto;\n        font-size: 12px;\n      }\n\n      .anim-item {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 8px;\n        border-radius: 4px;\n        transition: background 0.1s;\n      }\n\n      .anim-item:hover {\n        background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));\n      }\n\n      .anim-item input[type='checkbox'] {\n        margin: 0;\n        accent-color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .anim-item span {\n        flex: 1;\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .anim-item md-icon {\n        --md-icon-size: 18px;\n        cursor: pointer;\n        color: var(--md-sys-color-on-surface-variant, #666);\n        transition: color 0.15s;\n      }\n\n      .anim-item md-icon:hover {\n        color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .anim-item md-icon[playing] {\n        color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .mode-desc {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface-variant, #666);\n        padding: 4px 0;\n      }\n\n      .mini-btn {\n        font-size: 10px;\n        padding: 2px 8px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n        border-radius: 4px;\n        background: var(--md-sys-color-surface-container, #f3edf7);\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        cursor: pointer;\n      }\n\n      .mini-btn:hover {\n        background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n      }\n\n      .play-toggle {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 0;\n        margin-bottom: 4px;\n        cursor: pointer;\n        font-size: 12px;\n        font-weight: 500;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .play-toggle input[type='checkbox'] {\n        accent-color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .empty {\n        color: var(--md-sys-color-on-surface-variant, #999);\n        font-size: 11px;\n        padding: 8px;\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: String }) declare src: string | undefined\n\n  @state() declare private _animNames: string[]\n  @state() declare private _mode: AnimMode\n  @state() declare private _playingAnim: string | null\n\n  private _component: any = null\n  private _lastExternalValue: any = undefined\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('src')) {\n      this.dispatchEvent(\n        new CustomEvent('i-need-selected', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            callback: (selected: any[]) => {\n              this._component = selected?.[0]\n              this._refreshAnimNames()\n            }\n          }\n        })\n      )\n    }\n  }\n\n  private _refreshAnimNames() {\n    if (!this._component) {\n      this._animNames = []\n      return\n    }\n\n    this._animNames = (this._component.animationNames as string[]) ?? []\n  }\n\n  private _pollTimer?: number\n\n  connectedCallback() {\n    super.connectedCallback()\n    // GLTF 비동기 로드 후 애니메이션 목록 갱신을 위한 폴링 (최대 20회 = 20초)\n    let retries = 0\n    this._pollTimer = window.setInterval(() => {\n      if (!this._animNames?.length) {\n        this._refreshAnimNames()\n      }\n      if (this._animNames?.length || ++retries >= 20) {\n        clearInterval(this._pollTimer)\n        this._pollTimer = undefined\n      }\n    }, 1000)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._pollTimer) {\n      clearInterval(this._pollTimer)\n    }\n  }\n\n  editorTemplate(value: any, _spec: PropertySpec): TemplateResult {\n    if (!this._animNames?.length) {\n      this._refreshAnimNames()\n    }\n\n    if (value !== this._lastExternalValue) {\n      this._lastExternalValue = value\n      this._mode = getMode(value)\n    }\n\n    const mode = this._mode\n    const animCount = this._animNames?.length ?? 0\n    const targets: string[] = Array.isArray(this.value) ? this.value : (Array.isArray(value) ? value : [])\n\n    const isPlaying = this._getPlayState()\n\n    return html`\n      <fieldset fullwidth>\n        ${animCount > 0\n          ? html`\n              <label class=\"play-toggle\">\n                <input\n                  type=\"checkbox\"\n                  .checked=${isPlaying}\n                  @change=${(e: Event) => {\n                    e.stopPropagation()\n                    this._setPlay((e.target as HTMLInputElement).checked)\n                  }}\n                />\n                <span>Play</span>\n              </label>\n\n              <div class=\"mode-selector\">\n                <div class=\"mode-btn\" ?active=${mode === 'all'} @click=${() => this._setMode('all')}>All</div>\n                <div class=\"mode-btn\" ?active=${mode === 'none'} @click=${() => this._setMode('none')}>None</div>\n                <div class=\"mode-btn\" ?active=${mode === 'custom'} @click=${() => this._setMode('custom')}>Custom</div>\n              </div>\n\n              ${mode === 'all'\n                ? html`<div class=\"mode-desc\">${animCount} animations — play all</div>`\n                : nothing}\n              ${mode === 'none'\n                ? html`<div class=\"mode-desc\">No animations auto-play</div>`\n                : nothing}\n              ${mode === 'custom'\n                ? html`\n                    <div class=\"mode-desc\">\n                      <span style=\"flex:1\">${targets.length} / ${animCount} selected</span>\n                      <button class=\"mini-btn\" @click=${() => this._applyValue([...(this._animNames ?? [])])}>All</button>\n                      <button class=\"mini-btn\" @click=${() => this._applyValue([])}>Clear</button>\n                    </div>\n                  `\n                : nothing}\n\n              <div class=\"anim-list\">\n                ${(this._animNames ?? []).map(\n                  name => html`\n                    <div class=\"anim-item\">\n                      ${mode === 'custom'\n                        ? html`\n                            <input\n                              type=\"checkbox\"\n                              .checked=${targets.includes(name)}\n                              @change=${(e: Event) => {\n                                e.stopPropagation()\n                                this._onToggle(name, (e.target as HTMLInputElement).checked, targets)\n                              }}\n                            />\n                          `\n                        : nothing}\n                      <span>${name}</span>\n                      <md-icon\n                        ?playing=${this._playingAnim === name}\n                        @click=${() => this._togglePreview(name)}\n                        title=\"preview\"\n                      >${this._playingAnim === name ? 'stop' : 'play_arrow'}</md-icon>\n                    </div>\n                  `\n                )}\n              </div>\n            `\n          : html`<div class=\"empty\">No animations available</div>`}\n      </fieldset>\n    `\n  }\n\n  private _setMode(mode: AnimMode) {\n    const prevMode = this._mode\n    this._mode = mode\n\n    let newValue: any\n    switch (mode) {\n      case 'all':\n        newValue = '*'\n        break\n      case 'none':\n        newValue = 'none'\n        break\n      case 'custom':\n        if (prevMode === 'all') {\n          newValue = [...(this._animNames ?? [])]\n        } else if (prevMode === 'none') {\n          newValue = []\n        } else {\n          newValue = Array.isArray(this.value) ? this.value : []\n        }\n        break\n    }\n\n    this._applyValue(newValue)\n  }\n\n  private _onToggle(name: string, checked: boolean, current: string[]) {\n    const list = [...current]\n    if (checked) {\n      if (!list.includes(name)) list.push(name)\n    } else {\n      const idx = list.indexOf(name)\n      if (idx >= 0) list.splice(idx, 1)\n    }\n    this._applyValue(list)\n  }\n\n  private _applyValue(newValue: any) {\n    this.value = newValue\n    this.requestUpdate()\n\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            selected[0].set('playTargets', newValue)\n          }\n        }\n      })\n    )\n  }\n\n  private _getPlayState(): boolean {\n    return this._component?.state?.play !== false\n  }\n\n  private _setPlay(value: boolean) {\n    if (!this._component) return\n    this._component.set('play', value)\n    this.requestUpdate()\n  }\n\n  private _togglePreview(name: string) {\n    if (!this._component) return\n\n    const ro = this._component.realObject as any\n    if (!ro?._animationActions) return\n\n    const action = ro._animationActions.get(name)\n    if (!action) return\n\n    if (this._playingAnim === name) {\n      action.stop()\n      this._playingAnim = null\n    } else {\n      // 이전 프리뷰 중지\n      if (this._playingAnim) {\n        ro._animationActions.get(this._playingAnim)?.stop()\n      }\n      action.play()\n      this._playingAnim = name\n    }\n\n    this._component.invalidate()\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/editors/property-editor-stocker-location.d.ts

@@ -0,0 +1,13 @@
+import { TemplateResult } from 'lit';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+export default class StockerLocationEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    private _rule;
+    private _lastExternalValue;
+    constructor();
+    private _parseValue;
+    editorTemplate(value: any, _spec: PropertySpec): TemplateResult;
+    private _set;
+    private _setSideLabel;
+    private _apply;
+}

package/dist/editors/property-editor-stocker-location.js

@@ -0,0 +1,151 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Stocker Location Rule Editor
+ */
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { DEFAULT_LOCATION_RULE, buildLocationId } from '../stocker.js';
+let StockerLocationEditor = class StockerLocationEditor extends OxPropertyEditor {
+    static styles = [
+        ...OxPropertyEditor.styles,
+        css `
+      .loc-grid { display: grid; grid-template-columns: 80px 1fr; gap: 3px 6px; font-size: 11px; align-items: center; }
+      .loc-grid label { color: #555; font-weight: 500; font-size: 10px; }
+      .loc-grid input, .loc-grid select {
+        width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 4px;
+        border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; background: #fff; color: #1c1b1f;
+      }
+      .loc-grid input[type="number"] { width: 50px; }
+      .side-labels { display: flex; gap: 4px; align-items: center; font-size: 10px; }
+      .side-labels input { width: 30px; text-align: center; }
+      .section-title { grid-column: 1 / -1; font-weight: 600; font-size: 10px; color: #6750a4; margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid rgba(0,0,0,0.08); }
+      .preview { grid-column: 1 / -1; margin-top: 6px; padding: 6px 8px; background: #f3edf7; border-radius: 6px; font-family: monospace; font-size: 11px; }
+      .preview-title { font-size: 9px; font-weight: 600; color: #555; margin-bottom: 3px; }
+      .preview-samples { display: flex; flex-wrap: wrap; gap: 4px; }
+      .preview-sample { padding: 1px 5px; background: #fff; border-radius: 3px; font-size: 10px; }
+    `
+    ];
+    _lastExternalValue = undefined;
+    constructor() {
+        super();
+        this._rule = { ...DEFAULT_LOCATION_RULE };
+    }
+    _parseValue(value) {
+        if (!value)
+            return { ...DEFAULT_LOCATION_RULE };
+        if (typeof value === 'string') {
+            try {
+                return { ...DEFAULT_LOCATION_RULE, ...JSON.parse(value) };
+            }
+            catch {
+                return { ...DEFAULT_LOCATION_RULE };
+            }
+        }
+        return { ...DEFAULT_LOCATION_RULE, ...value };
+    }
+    editorTemplate(value, _spec) {
+        const serialized = typeof value === 'string' ? value : JSON.stringify(value);
+        if (serialized !== this._lastExternalValue) {
+            this._lastExternalValue = serialized;
+            this._rule = this._parseValue(value);
+        }
+        const r = this._rule;
+        const rackConfig = { bays: 10, levels: 5, depthCount: 1 };
+        const samples = [
+            buildLocationId(r, 'L', 1, 1, 1, rackConfig),
+            buildLocationId(r, 'L', 5, 3, 1, rackConfig),
+            buildLocationId(r, 'R', 10, 5, 1, rackConfig)
+        ];
+        return html `
+      <fieldset fullwidth>
+        <div class="loc-grid">
+          <div class="section-title">Pattern</div>
+          <label>Format</label>
+          <input type="text" .value=${r.pattern} placeholder="{side}{bay}-{level}-{depth}"
+            @change=${(e) => { e.stopPropagation(); this._set('pattern', e.target.value); }} />
+
+          <label>Side labels</label>
+          <div class="side-labels">
+            L=<input type="text" .value=${r.sideLabels.L}
+              @change=${(e) => { e.stopPropagation(); this._setSideLabel('L', e.target.value); }} />
+            R=<input type="text" .value=${r.sideLabels.R}
+              @change=${(e) => { e.stopPropagation(); this._setSideLabel('R', e.target.value); }} />
+          </div>
+
+          <div class="section-title">Direction</div>
+          <label>Bay</label>
+          <select .value=${r.bayDir}
+            @change=${(e) => { e.stopPropagation(); this._set('bayDir', e.target.value); }}>
+            <option value="ltr">Left → Right</option>
+            <option value="rtl">Right → Left</option>
+          </select>
+
+          <label>Level</label>
+          <select .value=${r.levelDir}
+            @change=${(e) => { e.stopPropagation(); this._set('levelDir', e.target.value); }}>
+            <option value="btt">Bottom → Top</option>
+            <option value="ttb">Top → Bottom</option>
+          </select>
+
+          <div class="section-title">Start number</div>
+          <label>Bay start</label>
+          <input type="number" .value=${String(r.bayStart)} min="0" step="1"
+            @change=${(e) => { e.stopPropagation(); this._set('bayStart', Number(e.target.value)); }} />
+          <label>Level start</label>
+          <input type="number" .value=${String(r.levelStart)} min="0" step="1"
+            @change=${(e) => { e.stopPropagation(); this._set('levelStart', Number(e.target.value)); }} />
+          <label>Depth start</label>
+          <input type="number" .value=${String(r.depthStart)} min="0" step="1"
+            @change=${(e) => { e.stopPropagation(); this._set('depthStart', Number(e.target.value)); }} />
+
+          <div class="section-title">Digit padding</div>
+          <label>Bay digits</label>
+          <input type="number" .value=${String(r.bayDigits)} min="0" max="4" step="1"
+            @change=${(e) => { e.stopPropagation(); this._set('bayDigits', Number(e.target.value)); }} />
+          <label>Level digits</label>
+          <input type="number" .value=${String(r.levelDigits)} min="0" max="4" step="1"
+            @change=${(e) => { e.stopPropagation(); this._set('levelDigits', Number(e.target.value)); }} />
+          <label>Depth digits</label>
+          <input type="number" .value=${String(r.depthDigits)} min="0" max="4" step="1"
+            @change=${(e) => { e.stopPropagation(); this._set('depthDigits', Number(e.target.value)); }} />
+
+          <div class="preview">
+            <div class="preview-title">Preview (10 bays, 5 levels)</div>
+            <div class="preview-samples">
+              ${samples.map(s => html `<span class="preview-sample">${s}</span>`)}
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    _set(field, value) {
+        this._rule = { ...this._rule, [field]: value };
+        this._apply();
+    }
+    _setSideLabel(side, value) {
+        this._rule = { ...this._rule, sideLabels: { ...this._rule.sideLabels, [side]: value || side } };
+        this._apply();
+    }
+    _apply() {
+        const jsonValue = JSON.stringify(this._rule);
+        this.value = jsonValue;
+        this._lastExternalValue = jsonValue;
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true, composed: true,
+            detail: { callback: (selected) => { selected[0]?.set('locationRule', jsonValue); } }
+        }));
+    }
+};
+__decorate([
+    state()
+], StockerLocationEditor.prototype, "_rule", void 0);
+StockerLocationEditor = __decorate([
+    customElement('property-editor-stocker-location')
+], StockerLocationEditor);
+export default StockerLocationEditor;
+//# sourceMappingURL=property-editor-stocker-location.js.map

package/dist/editors/property-editor-stocker-location.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-stocker-location.js","sourceRoot":"","sources":["../../src/editors/property-editor-stocker-location.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Stocker Location Rule Editor\n */\n\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport type { LocationRule } from '../stocker.js'\nimport { DEFAULT_LOCATION_RULE, buildLocationId } from '../stocker.js'\n\n@customElement('property-editor-stocker-location')\nexport default class StockerLocationEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      .loc-grid { display: grid; grid-template-columns: 80px 1fr; gap: 3px 6px; font-size: 11px; align-items: center; }\n      .loc-grid label { color: #555; font-weight: 500; font-size: 10px; }\n      .loc-grid input, .loc-grid select {\n        width: 100%; box-sizing: border-box; font-size: 11px; padding: 3px 4px;\n        border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; background: #fff; color: #1c1b1f;\n      }\n      .loc-grid input[type=\"number\"] { width: 50px; }\n      .side-labels { display: flex; gap: 4px; align-items: center; font-size: 10px; }\n      .side-labels input { width: 30px; text-align: center; }\n      .section-title { grid-column: 1 / -1; font-weight: 600; font-size: 10px; color: #6750a4; margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid rgba(0,0,0,0.08); }\n      .preview { grid-column: 1 / -1; margin-top: 6px; padding: 6px 8px; background: #f3edf7; border-radius: 6px; font-family: monospace; font-size: 11px; }\n      .preview-title { font-size: 9px; font-weight: 600; color: #555; margin-bottom: 3px; }\n      .preview-samples { display: flex; flex-wrap: wrap; gap: 4px; }\n      .preview-sample { padding: 1px 5px; background: #fff; border-radius: 3px; font-size: 10px; }\n    `\n  ]\n\n  @state() private declare _rule: LocationRule\n  private _lastExternalValue: any = undefined\n\n  constructor() {\n    super()\n    this._rule = { ...DEFAULT_LOCATION_RULE }\n  }\n\n  private _parseValue(value: any): LocationRule {\n    if (!value) return { ...DEFAULT_LOCATION_RULE }\n    if (typeof value === 'string') {\n      try { return { ...DEFAULT_LOCATION_RULE, ...JSON.parse(value) } } catch { return { ...DEFAULT_LOCATION_RULE } }\n    }\n    return { ...DEFAULT_LOCATION_RULE, ...value }\n  }\n\n  editorTemplate(value: any, _spec: PropertySpec): TemplateResult {\n    const serialized = typeof value === 'string' ? value : JSON.stringify(value)\n    if (serialized !== this._lastExternalValue) {\n      this._lastExternalValue = serialized\n      this._rule = this._parseValue(value)\n    }\n\n    const r = this._rule\n    const rackConfig = { bays: 10, levels: 5, depthCount: 1 }\n    const samples = [\n      buildLocationId(r, 'L', 1, 1, 1, rackConfig),\n      buildLocationId(r, 'L', 5, 3, 1, rackConfig),\n      buildLocationId(r, 'R', 10, 5, 1, rackConfig)\n    ]\n\n    return html`\n      <fieldset fullwidth>\n        <div class=\"loc-grid\">\n          <div class=\"section-title\">Pattern</div>\n          <label>Format</label>\n          <input type=\"text\" .value=${r.pattern} placeholder=\"{side}{bay}-{level}-{depth}\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('pattern', (e.target as HTMLInputElement).value) }} />\n\n          <label>Side labels</label>\n          <div class=\"side-labels\">\n            L=<input type=\"text\" .value=${r.sideLabels.L}\n              @change=${(e: Event) => { e.stopPropagation(); this._setSideLabel('L', (e.target as HTMLInputElement).value) }} />\n            R=<input type=\"text\" .value=${r.sideLabels.R}\n              @change=${(e: Event) => { e.stopPropagation(); this._setSideLabel('R', (e.target as HTMLInputElement).value) }} />\n          </div>\n\n          <div class=\"section-title\">Direction</div>\n          <label>Bay</label>\n          <select .value=${r.bayDir}\n            @change=${(e: Event) => { e.stopPropagation(); this._set('bayDir', (e.target as HTMLSelectElement).value) }}>\n            <option value=\"ltr\">Left → Right</option>\n            <option value=\"rtl\">Right → Left</option>\n          </select>\n\n          <label>Level</label>\n          <select .value=${r.levelDir}\n            @change=${(e: Event) => { e.stopPropagation(); this._set('levelDir', (e.target as HTMLSelectElement).value) }}>\n            <option value=\"btt\">Bottom → Top</option>\n            <option value=\"ttb\">Top → Bottom</option>\n          </select>\n\n          <div class=\"section-title\">Start number</div>\n          <label>Bay start</label>\n          <input type=\"number\" .value=${String(r.bayStart)} min=\"0\" step=\"1\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('bayStart', Number((e.target as HTMLInputElement).value)) }} />\n          <label>Level start</label>\n          <input type=\"number\" .value=${String(r.levelStart)} min=\"0\" step=\"1\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('levelStart', Number((e.target as HTMLInputElement).value)) }} />\n          <label>Depth start</label>\n          <input type=\"number\" .value=${String(r.depthStart)} min=\"0\" step=\"1\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('depthStart', Number((e.target as HTMLInputElement).value)) }} />\n\n          <div class=\"section-title\">Digit padding</div>\n          <label>Bay digits</label>\n          <input type=\"number\" .value=${String(r.bayDigits)} min=\"0\" max=\"4\" step=\"1\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('bayDigits', Number((e.target as HTMLInputElement).value)) }} />\n          <label>Level digits</label>\n          <input type=\"number\" .value=${String(r.levelDigits)} min=\"0\" max=\"4\" step=\"1\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('levelDigits', Number((e.target as HTMLInputElement).value)) }} />\n          <label>Depth digits</label>\n          <input type=\"number\" .value=${String(r.depthDigits)} min=\"0\" max=\"4\" step=\"1\"\n            @change=${(e: Event) => { e.stopPropagation(); this._set('depthDigits', Number((e.target as HTMLInputElement).value)) }} />\n\n          <div class=\"preview\">\n            <div class=\"preview-title\">Preview (10 bays, 5 levels)</div>\n            <div class=\"preview-samples\">\n              ${samples.map(s => html`<span class=\"preview-sample\">${s}</span>`)}\n            </div>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _set(field: string, value: any) {\n    this._rule = { ...this._rule, [field]: value }\n    this._apply()\n  }\n\n  private _setSideLabel(side: 'L' | 'R', value: string) {\n    this._rule = { ...this._rule, sideLabels: { ...this._rule.sideLabels, [side]: value || side } }\n    this._apply()\n  }\n\n  private _apply() {\n    const jsonValue = JSON.stringify(this._rule)\n    this.value = jsonValue\n    this._lastExternalValue = jsonValue\n    this.requestUpdate()\n\n    this.dispatchEvent(new CustomEvent('i-need-selected', {\n      bubbles: true, composed: true,\n      detail: { callback: (selected: any[]) => { selected[0]?.set('locationRule', jsonValue) } }\n    }))\n  }\n}\n"]}

package/dist/editors/property-editor-stocker-ports.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+export default class StockerPortsEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    editorTemplate(value: any, _spec: PropertySpec): TemplateResult;
+    private _set;
+    private _applyPorts;
+}