@operato/scene-visualizer 9.2.2 → 10.0.0-beta.10

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-editor-gltf-fill-targets.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-fill-targets.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * GLTF fillStyle 타겟 노드 선택 에디터.\n * All / None / Custom 모드로 명시적 설정.\n * Custom 모드에서 개별 Mesh 체크박스 선택.\n */\n\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\n// fillStyleTargets 값 규칙:\n// undefined 또는 미설정 → None (적용 안 함, 기본값)\n// '*' → All (전체 메시 적용)\n// ['mesh_0', ...] → Custom (선택 메시만 적용)\n\ntype FillMode = 'all' | 'none' | 'custom'\n\nfunction getMode(value: any): FillMode {\n  if (value === '*') return 'all'\n  if (value === 'none' || !value) return 'none'\n  if (Array.isArray(value) && value.length > 0) return 'custom'\n  // [] (빈 배열) = custom with nothing selected\n  if (Array.isArray(value)) return 'custom'\n  return 'none'\n}\n\n@customElement('property-editor-gltf-fill-targets')\nexport default class GLTFFillTargetsEditor 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      .node-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      .node-item {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 4px 8px;\n        cursor: pointer;\n        border-radius: 4px;\n        transition: background 0.1s;\n      }\n\n      .node-item:hover {\n        background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));\n      }\n\n      .node-item input[type='checkbox'] {\n        margin: 0;\n        accent-color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .node-item span {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .mode-desc {\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      .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 _meshNames: string[]\n  @state() declare private _mode: FillMode\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._refreshMeshNames()\n            }\n          }\n        })\n      )\n    }\n  }\n\n  private _refreshMeshNames() {\n    if (!this._component) {\n      this._meshNames = []\n      return\n    }\n\n    const ro = this._component.realObject as any\n    if (!ro?.getNode) {\n      this._meshNames = []\n      return\n    }\n\n    this._meshNames = ((this._component.nodeNames as string[]) ?? []).filter((name: string) => {\n      const node = ro.getNode(name)\n      return node?.isMesh\n    })\n  }\n\n  editorTemplate(value: any, _spec: PropertySpec): TemplateResult {\n    if (!this._meshNames?.length) {\n      this._refreshMeshNames()\n    }\n\n    // 외부 value가 변경되면 모드 동기화\n    if (value !== this._lastExternalValue) {\n      this._lastExternalValue = value\n      this._mode = getMode(value)\n    }\n\n    const mode = this._mode\n    const meshCount = this._meshNames?.length ?? 0\n    const targets: string[] = Array.isArray(this.value) ? this.value : (Array.isArray(value) ? value : [])\n\n    return html`\n      <fieldset fullwidth>\n        ${meshCount > 0\n          ? html`\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\">${meshCount} meshes — fillStyle applies to all</div>`\n                : nothing}\n              ${mode === 'none'\n                ? html`<div class=\"mode-desc\">fillStyle not applied to any mesh</div>`\n                : nothing}\n              ${mode === 'custom'\n                ? html`\n                    <div style=\"display:flex;align-items:center;gap:6px\">\n                      <div class=\"mode-desc\" style=\"flex:1\">${targets.length} / ${meshCount} selected</div>\n                      <button class=\"mini-btn\" @click=${() => this._applyValue([...(this._meshNames ?? [])])}>All</button>\n                      <button class=\"mini-btn\" @click=${() => this._applyValue([])}>Clear</button>\n                    </div>\n                    <div class=\"node-list\">\n                      ${(this._meshNames ?? []).map(\n                        name => html`\n                          <label\n                            class=\"node-item\"\n                            @mouseenter=${() => this._highlightNode(name)}\n                            @mouseleave=${() => this._clearHighlight()}\n                          >\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                            <span>${name}</span>\n                          </label>\n                        `\n                      )}\n                    </div>\n                  `\n                : nothing}\n            `\n          : html`<div class=\"empty\">\n              <ox-i18n msgid=\"label.no-gltf-meshes\">No meshes available</ox-i18n>\n            </div>`}\n      </fieldset>\n    `\n  }\n\n  private _setMode(mode: FillMode) {\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        // 이전 상태에 따라: All → 전체 선택, None → 전체 해제\n        if (prevMode === 'all') {\n          newValue = [...(this._meshNames ?? [])]\n        } else if (prevMode === 'none') {\n          newValue = []\n        } else {\n          // 이미 custom이면 현재 값 유지\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\n    this._applyValue(list)\n  }\n\n  private _applyValue(newValue: any) {\n    // 로컬 value 즉시 반영 (re-render)\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('fillStyleTargets', newValue)\n          }\n        }\n      })\n    )\n  }\n\n  // --- Outline 강조 ---\n\n  private _highlightNode(name: string) {\n    const ro = this._component?.realObject as any\n    if (!ro?.getNode) return\n\n    const node = ro.getNode(name)\n    if (!node) return\n\n    this._getRendererManager()?.setOutlineObjects([node])\n    this._component?.invalidate()\n  }\n\n  private _clearHighlight() {\n    const ro = this._component?.realObject as any\n    if (!ro) return\n\n    this._getRendererManager()?.setOutlineObjects(ro.object3d ? [ro.object3d] : [])\n    this._component?.invalidate()\n  }\n\n  private _getRendererManager(): any {\n    const ro = this._component?.realObject as any\n    const container = ro?.threeContainer as any\n    return container?._capability?.rendererManager ?? container?._threeCapability?.rendererManager ?? null\n  }\n}\n"]}

package/dist/editors/property-editor-gltf-info.d.ts

@@ -1,16 +1,38 @@
 import '@material/web/icon/icon.js';
-import '@material/web/button/elevated-button.js';
 import '@operato/i18n/ox-i18n.js';
 import { PropertyValues, TemplateResult } from 'lit';
 import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
 import { Component } from '@hatiolab/things-scene';
 export default class GLTFInfoEditor extends OxPropertyEditor {
     static styles: import("lit").CSSResult[];
-    src?: string;
+    src: string | undefined;
+    private _component;
     width: number;
     height: number;
     depth: number;
+    currentWidth: number;
+    currentHeight: number;
+    currentDepth: number;
+    meshCount: number;
+    vertexCount: number;
+    animationCount: number;
+    materialCount: number;
+    constructor();
     editorTemplate(value: any, spec: PropertySpec): TemplateResult;
+    private _formatNumber;
+    private _isProportional;
+    private _applyAction;
+    /**
+     * W, H 중 짧은 쪽을 기준으로 원래 모델의 비율에 맞게 치수를 조절한다.
+     * (contain 방식 — 모델이 컴포넌트 영역 안에 들어감)
+     */
+    private _applyProportional;
+    private _getRatioLock;
+    private _setRatioLock;
+    private _refreshCurrentSize;
     updated(changes: PropertyValues<this>): void;
-    fetchSourceInfo(component: Component, src: string): Promise<unknown>;
+    private _pollTimer?;
+    fetchSourceInfo(component: Component, src: string): Promise<void>;
+    private _tryReadFromRealObject;
+    disconnectedCallback(): void;
 }

package/dist/editors/property-editor-gltf-info.js

@@ -1,58 +1,281 @@
 import { __decorate } from "tslib";
 import '@material/web/icon/icon.js';
-import '@material/web/button/elevated-button.js';
 import '@operato/i18n/ox-i18n.js';
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js';
 let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
+    static styles = [
+        ...OxPropertyEditor.styles,
+        ScrollbarStyles,
+        css `
+      [info-panel] {
+        font-size: 12px;
+        padding: 4px 0;
+      }
+
+      .dim-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 3px 0;
+      }
+
+      .dim-label {
+        min-width: 65px;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant, #666);
+      }
+
+      .dim-value {
+        font-family: monospace;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .dim-value.mismatch {
+        color: var(--md-sys-color-error, #b3261e);
+      }
+
+      .dim-value.match {
+        color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .ratio-info {
+        font-size: 10px;
+        color: var(--md-sys-color-on-surface-variant, #888);
+        padding: 2px 0;
+      }
+
+      .button-row {
+        display: flex;
+        gap: 4px;
+        margin-top: 6px;
+      }
+
+      .action-btn {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        padding: 6px 8px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));
+        border-radius: 6px;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        cursor: pointer;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        transition: background 0.15s;
+      }
+
+      .action-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+      }
+
+      .action-btn md-icon {
+        --md-icon-size: 16px;
+      }
+
+      .ratio-lock-toggle {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        cursor: pointer;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .ratio-lock-toggle input[type='checkbox'] {
+        accent-color: var(--md-sys-color-primary, #6750a4);
+        margin: 0;
+      }
+
+      .stats-row {
+        display: flex;
+        gap: 12px;
+        padding: 4px 0;
+        margin-top: 4px;
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));
+      }
+
+      .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant, #666);
+      }
+
+      .stat-item md-icon {
+        --md-icon-size: 13px;
+      }
+
+      .stat-value {
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+    `
+    ];
+    _component = null;
     constructor() {
-        super(...arguments);
+        super();
         this.width = 0;
         this.height = 0;
         this.depth = 0;
+        this.currentWidth = 0;
+        this.currentHeight = 0;
+        this.currentDepth = 0;
+        this.meshCount = 0;
+        this.vertexCount = 0;
+        this.animationCount = 0;
+        this.materialCount = 0;
     }
     editorTemplate(value, spec) {
         const valid = this.width && this.height && this.depth;
         var property = spec.property || {};
         var { action } = property;
+        const isProportional = valid && this._isProportional();
         return html `
       <fieldset fullwidth>
-        <legend><ox-i18n msgid="label.gltf-info">GLTF info.</ox-i18n></legend>
-
-        <div>
-          <div info>
-            <div label>[W x H x D] :</div>
-            ${valid
-            ? html ` <div value>${this.width} x ${this.height} x ${this.depth}</div>
-                  <md-elevated-button
-                    @click=${(e) => {
-                this.dispatchEvent(new CustomEvent('i-need-selected', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        callback: (selected) => {
-                            typeof action === 'function' &&
-                                action(selected[0], {
-                                    width: this.width,
-                                    height: this.height,
-                                    depth: this.depth
-                                });
-                        }
-                    }
-                }));
-            }}
+        <div info-panel>
+          ${valid
+            ? html `
+                <div class="dim-row">
+                  <span class="dim-label">Model</span>
+                  <span class="dim-value">${this.width} × ${this.height} × ${this.depth}</span>
+                </div>
+                <div class="dim-row">
+                  <span class="dim-label">Current</span>
+                  <span class="dim-value ${isProportional ? 'match' : 'mismatch'}">
+                    ${this.currentWidth} × ${this.currentHeight} × ${this.currentDepth}
+                  </span>
+                </div>
+
+                <div class="stats-row">
+                  <span class="stat-item"><md-icon>view_in_ar</md-icon> <span class="stat-value">${this.meshCount}</span> meshes</span>
+                  <span class="stat-item"><md-icon>scatter_plot</md-icon> <span class="stat-value">${this._formatNumber(this.vertexCount)}</span> verts</span>
+                  <span class="stat-item"><md-icon>palette</md-icon> <span class="stat-value">${this.materialCount}</span> mats</span>
+                  ${this.animationCount > 0
+                ? html `<span class="stat-item"><md-icon>animation</md-icon> <span class="stat-value">${this.animationCount}</span> anims</span>`
+                : ''}
+                </div>
+
+                <div class="button-row">
+                  <div
+                    class="action-btn"
+                    title="W,H 중 짧은 쪽 기준으로 원본 비율 적용"
+                    @click=${() => this._applyProportional(action)}
                   >
-                    <md-icon>autorenew</md-icon>
-                  </md-elevated-button>`
-            : html ` <div></div> `}
-          </div>
+                    <md-icon>aspect_ratio</md-icon>
+                    <ox-i18n msgid="label.fit-ratio">Fit Ratio</ox-i18n>
+                  </div>
+                  <label class="ratio-lock-toggle">
+                    <input
+                      type="checkbox"
+                      .checked=${this._getRatioLock()}
+                      @change=${(e) => {
+                e.stopPropagation();
+                this._setRatioLock(e.target.checked);
+            }}
+                    />
+                    <md-icon style="--md-icon-size:14px">lock</md-icon>
+                    Ratio Lock
+                  </label>
+                </div>
+              `
+            : html `<div class="dim-row"><span class="dim-label">Loading...</span></div>`}
         </div>
       </fieldset>
     `;
     }
+    _formatNumber(n) {
+        if (n >= 1000000)
+            return (n / 1000000).toFixed(1) + 'M';
+        if (n >= 1000)
+            return (n / 1000).toFixed(1) + 'K';
+        return String(n);
+    }
+    _isProportional() {
+        if (!this.width || !this.height || !this.depth)
+            return true;
+        if (!this.currentWidth || !this.currentHeight || !this.currentDepth)
+            return true;
+        const rw = this.currentWidth / this.width;
+        const rh = this.currentHeight / this.height;
+        const rd = this.currentDepth / this.depth;
+        const avg = (rw + rh + rd) / 3;
+        const tolerance = 0.05;
+        return Math.abs(rw - avg) / avg < tolerance && Math.abs(rh - avg) / avg < tolerance && Math.abs(rd - avg) / avg < tolerance;
+    }
+    _applyAction(action, dimension) {
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    typeof action === 'function' && action(selected[0], dimension);
+                    this._refreshCurrentSize(selected[0]);
+                }
+            }
+        }));
+    }
+    /**
+     * W, H 중 짧은 쪽을 기준으로 원래 모델의 비율에 맞게 치수를 조절한다.
+     * (contain 방식 — 모델이 컴포넌트 영역 안에 들어감)
+     */
+    _applyProportional(action) {
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    const component = selected[0];
+                    if (!component || typeof action !== 'function')
+                        return;
+                    const { width: cw = 1, height: ch = 1, depth: cd = 1 } = component.state;
+                    const { width: ow, height: oh, depth: od } = this; // 원래 모델 치수
+                    if (!ow || !oh || !od)
+                        return;
+                    // 이미 비율이 맞으면 스킵
+                    if (this._isProportional())
+                        return;
+                    // W, H 중 ratio가 작은 축을 기준
+                    const scale = Math.min(cw / ow, ch / oh);
+                    action(component, {
+                        width: Math.round(ow * scale),
+                        height: Math.round(oh * scale),
+                        depth: Math.round(od * scale)
+                    });
+                    this._refreshCurrentSize(component);
+                }
+            }
+        }));
+    }
+    _getRatioLock() {
+        return !!this._component?.state?.ratioLock;
+    }
+    _setRatioLock(value) {
+        this.dispatchEvent(new CustomEvent('i-need-selected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                callback: (selected) => {
+                    selected[0].set('ratioLock', value);
+                    this.requestUpdate();
+                }
+            }
+        }));
+    }
+    _refreshCurrentSize(component) {
+        if (!component)
+            return;
+        const state = component.state || {};
+        this.currentWidth = Math.round(state.width || 0);
+        this.currentHeight = Math.round(state.height || 0);
+        this.currentDepth = Math.round(state.depth || 0);
+    }
     updated(changes) {
         if (changes.has('src')) {
             this.dispatchEvent(new CustomEvent('i-need-selected', {
@@ -60,60 +283,76 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
                 composed: true,
                 detail: {
                     callback: async (selected) => {
-                        await this.fetchSourceInfo(selected[0], this.src);
+                        const component = selected[0];
+                        this._component = component;
+                        this._refreshCurrentSize(component);
+                        await this.fetchSourceInfo(component, this.src);
                     }
                 }
             }));
         }
     }
+    _pollTimer;
     async fetchSourceInfo(component, src) {
         if (!src || !src.trim()) {
             return;
         }
-        try {
-            const path = component.app.url(src);
-            let gltfLoader = new GLTFLoader();
-            gltfLoader.setCrossOrigin('use-credentials');
-            return new Promise((resolve) => {
-                gltfLoader.load(path, gltf => {
-                    var box = new THREE.Box3().setFromObject(gltf.scene);
-                    var { x, y, z } = box.getSize(new THREE.Vector3());
-                    this.width = Math.floor(x);
-                    this.depth = Math.floor(y);
-                    this.height = Math.floor(z);
-                    resolve();
-                });
-            });
-        }
-        catch (e) {
-            console.error(e);
+        // 이미 로드된 realObject에서 직접 정보를 읽는다
+        if (this._tryReadFromRealObject(component)) {
             return;
         }
+        // GLTF 비동기 로드 중이면 폴링 (최대 20회 = 10초)
+        if (this._pollTimer)
+            clearInterval(this._pollTimer);
+        let retries = 0;
+        this._pollTimer = window.setInterval(() => {
+            if (this._tryReadFromRealObject(component) || ++retries >= 20) {
+                clearInterval(this._pollTimer);
+                this._pollTimer = undefined;
+            }
+        }, 500);
+    }
+    _tryReadFromRealObject(component) {
+        const ro = component?.realObject;
+        if (!ro?.objectSize)
+            return false;
+        const { x = 0, y = 0, z = 0 } = ro.objectSize;
+        this.width = Math.round(x * 100) / 100;
+        this.depth = Math.round(y * 100) / 100;
+        this.height = Math.round(z * 100) / 100;
+        // 통계: pivot 또는 object3d에서 수집
+        const root = ro.pivot || ro.object3d;
+        if (root) {
+            let meshes = 0;
+            let vertices = 0;
+            const materials = new Set();
+            root.traverse((node) => {
+                if (node.isMesh) {
+                    meshes++;
+                    if (node.geometry) {
+                        const pos = node.geometry.getAttribute('position');
+                        if (pos)
+                            vertices += pos.count;
+                    }
+                    if (node.material) {
+                        const mats = Array.isArray(node.material) ? node.material : [node.material];
+                        mats.forEach((m) => materials.add(m.uuid));
+                    }
+                }
+            });
+            this.meshCount = meshes;
+            this.vertexCount = vertices;
+            this.materialCount = materials.size;
+        }
+        this.animationCount = ro._animationActions?.size || 0;
+        return true;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._pollTimer)
+            clearInterval(this._pollTimer);
     }
 };
-GLTFInfoEditor.styles = [
-    ...OxPropertyEditor.styles,
-    css `
-      div[info] {
-        display: flex;
-        flex-direction: row;
-        font-size: 12px;
-      }
-
-      div[info] * {
-        align-self: center;
-      }
-
-      div[info] title {
-        font-weight: bold;
-      }
-
-      div[info] md-elevated-button {
-        margin-left: auto;
-        --md-icon-size: 24px;
-      }
-    `
-];
 __decorate([
     property({ type: String })
 ], GLTFInfoEditor.prototype, "src", void 0);
@@ -126,6 +365,27 @@ __decorate([
 __decorate([
     state()
 ], GLTFInfoEditor.prototype, "depth", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "currentWidth", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "currentHeight", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "currentDepth", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "meshCount", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "vertexCount", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "animationCount", void 0);
+__decorate([
+    state()
+], GLTFInfoEditor.prototype, "materialCount", void 0);
 GLTFInfoEditor = __decorate([
     customElement('property-editor-gltf-info')
 ], GLTFInfoEditor);

package/dist/editors/property-editor-gltf-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\nimport { Component } from '@hatiolab/things-scene'\n\nimport * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      div[info] {\n        display: flex;\n        flex-direction: row;\n        font-size: 12px;\n      }\n\n      div[info] * {\n        align-self: center;\n      }\n\n      div[info] title {\n        font-weight: bold;\n      }\n\n      div[info] md-elevated-button {\n        margin-left: auto;\n        --md-icon-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) src?: string\n\n  @state() width: number = 0\n  @state() height: number = 0\n  @state() depth: number = 0\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const valid = this.width && this.height && this.depth\n\n    var property = spec.property || {}\n    var { action } = property\n\n    return html`\n      <fieldset fullwidth>\n        <legend><ox-i18n msgid=\"label.gltf-info\">GLTF info.</ox-i18n></legend>\n\n        <div>\n          <div info>\n            <div label>[W x H x D] :</div>\n            ${valid\n              ? html` <div value>${this.width} x ${this.height} x ${this.depth}</div>\n                  <md-elevated-button\n                    @click=${(e: MouseEvent) => {\n                      this.dispatchEvent(\n                        new CustomEvent('i-need-selected', {\n                          bubbles: true,\n                          composed: true,\n                          detail: {\n                            callback: (selected: any[]) => {\n                              typeof action === 'function' &&\n                                action(selected[0], {\n                                  width: this.width,\n                                  height: this.height,\n                                  depth: this.depth\n                                })\n                            }\n                          }\n                        })\n                      )\n                    }}\n                  >\n                    <md-icon>autorenew</md-icon>\n                  </md-elevated-button>`\n              : html` <div></div> `}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\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: async (selected: any[]) => {\n              await this.fetchSourceInfo(selected[0], this.src!)\n            }\n          }\n        })\n      )\n    }\n  }\n\n  async fetchSourceInfo(component: Component, src: string) {\n    if (!src || !src.trim()) {\n      return\n    }\n\n    try {\n      const path = component.app.url(src)\n\n      let gltfLoader = new GLTFLoader()\n\n      gltfLoader.setCrossOrigin('use-credentials')\n\n      return new Promise((resolve: any) => {\n        gltfLoader.load(path, gltf => {\n          var box = new THREE.Box3().setFromObject(gltf.scene)\n          var { x, y, z } = box.getSize(new THREE.Vector3())\n\n          this.width = Math.floor(x)\n          this.depth = Math.floor(y)\n          this.height = Math.floor(z)\n\n          resolve()\n        })\n      })\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n}\n"]}
+{"version":3,"file":"property-editor-gltf-info.js","sourceRoot":"","sources":["../../src/editors/property-editor-gltf-info.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, PropertyValues, TemplateResult } 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'\nimport { Component } from '@hatiolab/things-scene'\n\n@customElement('property-editor-gltf-info')\nexport default class GLTFInfoEditor extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    ScrollbarStyles,\n    css`\n      [info-panel] {\n        font-size: 12px;\n        padding: 4px 0;\n      }\n\n      .dim-row {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 3px 0;\n      }\n\n      .dim-label {\n        min-width: 65px;\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface-variant, #666);\n      }\n\n      .dim-value {\n        font-family: monospace;\n        font-size: 12px;\n        font-weight: 500;\n      }\n\n      .dim-value.mismatch {\n        color: var(--md-sys-color-error, #b3261e);\n      }\n\n      .dim-value.match {\n        color: var(--md-sys-color-primary, #6750a4);\n      }\n\n      .ratio-info {\n        font-size: 10px;\n        color: var(--md-sys-color-on-surface-variant, #888);\n        padding: 2px 0;\n      }\n\n      .button-row {\n        display: flex;\n        gap: 4px;\n        margin-top: 6px;\n      }\n\n      .action-btn {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        padding: 6px 8px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));\n        border-radius: 6px;\n        background: var(--md-sys-color-surface-container, #f3edf7);\n        cursor: pointer;\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        transition: background 0.15s;\n      }\n\n      .action-btn:hover {\n        background: var(--md-sys-color-surface-container-highest, #e6e0e9);\n      }\n\n      .action-btn md-icon {\n        --md-icon-size: 16px;\n      }\n\n      .ratio-lock-toggle {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        font-size: 11px;\n        cursor: pointer;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .ratio-lock-toggle input[type='checkbox'] {\n        accent-color: var(--md-sys-color-primary, #6750a4);\n        margin: 0;\n      }\n\n      .stats-row {\n        display: flex;\n        gap: 12px;\n        padding: 4px 0;\n        margin-top: 4px;\n        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));\n      }\n\n      .stat-item {\n        display: flex;\n        align-items: center;\n        gap: 3px;\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface-variant, #666);\n      }\n\n      .stat-item md-icon {\n        --md-icon-size: 13px;\n      }\n\n      .stat-value {\n        font-weight: 600;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n    `\n  ]\n\n  @property({ type: String }) declare src: string | undefined\n\n  private _component: any = null\n\n  @state() declare width: number\n  @state() declare height: number\n  @state() declare depth: number\n  @state() declare currentWidth: number\n  @state() declare currentHeight: number\n  @state() declare currentDepth: number\n  @state() declare meshCount: number\n  @state() declare vertexCount: number\n  @state() declare animationCount: number\n  @state() declare materialCount: number\n\n  constructor() {\n    super()\n    this.width = 0\n    this.height = 0\n    this.depth = 0\n    this.currentWidth = 0\n    this.currentHeight = 0\n    this.currentDepth = 0\n    this.meshCount = 0\n    this.vertexCount = 0\n    this.animationCount = 0\n    this.materialCount = 0\n  }\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const valid = this.width && this.height && this.depth\n\n    var property = spec.property || {}\n    var { action } = property\n\n    const isProportional = valid && this._isProportional()\n\n    return html`\n      <fieldset fullwidth>\n        <div info-panel>\n          ${valid\n            ? html`\n                <div class=\"dim-row\">\n                  <span class=\"dim-label\">Model</span>\n                  <span class=\"dim-value\">${this.width} × ${this.height} × ${this.depth}</span>\n                </div>\n                <div class=\"dim-row\">\n                  <span class=\"dim-label\">Current</span>\n                  <span class=\"dim-value ${isProportional ? 'match' : 'mismatch'}\">\n                    ${this.currentWidth} × ${this.currentHeight} × ${this.currentDepth}\n                  </span>\n                </div>\n\n                <div class=\"stats-row\">\n                  <span class=\"stat-item\"><md-icon>view_in_ar</md-icon> <span class=\"stat-value\">${this.meshCount}</span> meshes</span>\n                  <span class=\"stat-item\"><md-icon>scatter_plot</md-icon> <span class=\"stat-value\">${this._formatNumber(this.vertexCount)}</span> verts</span>\n                  <span class=\"stat-item\"><md-icon>palette</md-icon> <span class=\"stat-value\">${this.materialCount}</span> mats</span>\n                  ${this.animationCount > 0\n                    ? html`<span class=\"stat-item\"><md-icon>animation</md-icon> <span class=\"stat-value\">${this.animationCount}</span> anims</span>`\n                    : ''}\n                </div>\n\n                <div class=\"button-row\">\n                  <div\n                    class=\"action-btn\"\n                    title=\"W,H 중 짧은 쪽 기준으로 원본 비율 적용\"\n                    @click=${() => this._applyProportional(action)}\n                  >\n                    <md-icon>aspect_ratio</md-icon>\n                    <ox-i18n msgid=\"label.fit-ratio\">Fit Ratio</ox-i18n>\n                  </div>\n                  <label class=\"ratio-lock-toggle\">\n                    <input\n                      type=\"checkbox\"\n                      .checked=${this._getRatioLock()}\n                      @change=${(e: Event) => {\n                        e.stopPropagation()\n                        this._setRatioLock((e.target as HTMLInputElement).checked)\n                      }}\n                    />\n                    <md-icon style=\"--md-icon-size:14px\">lock</md-icon>\n                    Ratio Lock\n                  </label>\n                </div>\n              `\n            : html`<div class=\"dim-row\"><span class=\"dim-label\">Loading...</span></div>`}\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _formatNumber(n: number): string {\n    if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'\n    if (n >= 1000) return (n / 1000).toFixed(1) + 'K'\n    return String(n)\n  }\n\n  private _isProportional(): boolean {\n    if (!this.width || !this.height || !this.depth) return true\n    if (!this.currentWidth || !this.currentHeight || !this.currentDepth) return true\n\n    const rw = this.currentWidth / this.width\n    const rh = this.currentHeight / this.height\n    const rd = this.currentDepth / this.depth\n    const avg = (rw + rh + rd) / 3\n    const tolerance = 0.05\n\n    return Math.abs(rw - avg) / avg < tolerance && Math.abs(rh - avg) / avg < tolerance && Math.abs(rd - avg) / avg < tolerance\n  }\n\n  private _applyAction(action: any, dimension: { width: number; height: number; depth: number }) {\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            typeof action === 'function' && action(selected[0], dimension)\n            this._refreshCurrentSize(selected[0])\n          }\n        }\n      })\n    )\n  }\n\n  /**\n   * W, H 중 짧은 쪽을 기준으로 원래 모델의 비율에 맞게 치수를 조절한다.\n   * (contain 방식 — 모델이 컴포넌트 영역 안에 들어감)\n   */\n  private _applyProportional(action: any) {\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          callback: (selected: any[]) => {\n            const component = selected[0]\n            if (!component || typeof action !== 'function') return\n\n            const { width: cw = 1, height: ch = 1, depth: cd = 1 } = component.state\n            const { width: ow, height: oh, depth: od } = this // 원래 모델 치수\n\n            if (!ow || !oh || !od) return\n\n            // 이미 비율이 맞으면 스킵\n            if (this._isProportional()) return\n\n            // W, H 중 ratio가 작은 축을 기준\n            const scale = Math.min(cw / ow, ch / oh)\n\n            action(component, {\n              width: Math.round(ow * scale),\n              height: Math.round(oh * scale),\n              depth: Math.round(od * scale)\n            })\n\n            this._refreshCurrentSize(component)\n          }\n        }\n      })\n    )\n  }\n\n  private _getRatioLock(): boolean {\n    return !!this._component?.state?.ratioLock\n  }\n\n  private _setRatioLock(value: boolean) {\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('ratioLock', value)\n            this.requestUpdate()\n          }\n        }\n      })\n    )\n  }\n\n  private _refreshCurrentSize(component: any) {\n    if (!component) return\n    const state = component.state || {}\n    this.currentWidth = Math.round(state.width || 0)\n    this.currentHeight = Math.round(state.height || 0)\n    this.currentDepth = Math.round(state.depth || 0)\n  }\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: async (selected: any[]) => {\n              const component = selected[0]\n              this._component = component\n              this._refreshCurrentSize(component)\n              await this.fetchSourceInfo(component, this.src!)\n            }\n          }\n        })\n      )\n    }\n  }\n\n  private _pollTimer?: number\n\n  async fetchSourceInfo(component: Component, src: string) {\n    if (!src || !src.trim()) {\n      return\n    }\n\n    // 이미 로드된 realObject에서 직접 정보를 읽는다\n    if (this._tryReadFromRealObject(component)) {\n      return\n    }\n\n    // GLTF 비동기 로드 중이면 폴링 (최대 20회 = 10초)\n    if (this._pollTimer) clearInterval(this._pollTimer)\n    let retries = 0\n    this._pollTimer = window.setInterval(() => {\n      if (this._tryReadFromRealObject(component) || ++retries >= 20) {\n        clearInterval(this._pollTimer)\n        this._pollTimer = undefined\n      }\n    }, 500)\n  }\n\n  private _tryReadFromRealObject(component: any): boolean {\n    const ro = component?.realObject\n    if (!ro?.objectSize) return false\n\n    const { x = 0, y = 0, z = 0 } = ro.objectSize\n    this.width = Math.round(x * 100) / 100\n    this.depth = Math.round(y * 100) / 100\n    this.height = Math.round(z * 100) / 100\n\n    // 통계: pivot 또는 object3d에서 수집\n    const root = ro.pivot || ro.object3d\n    if (root) {\n      let meshes = 0\n      let vertices = 0\n      const materials = new Set()\n\n      root.traverse((node: any) => {\n        if (node.isMesh) {\n          meshes++\n          if (node.geometry) {\n            const pos = node.geometry.getAttribute('position')\n            if (pos) vertices += pos.count\n          }\n          if (node.material) {\n            const mats = Array.isArray(node.material) ? node.material : [node.material]\n            mats.forEach((m: any) => materials.add(m.uuid))\n          }\n        }\n      })\n\n      this.meshCount = meshes\n      this.vertexCount = vertices\n      this.materialCount = materials.size\n    }\n\n    this.animationCount = ro._animationActions?.size || 0\n\n    return true\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this._pollTimer) clearInterval(this._pollTimer)\n  }\n}\n"]}

package/dist/editors/property-editor-gltf-play-targets.d.ts

@@ -0,0 +1,25 @@
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+export default class GLTFPlayTargetsEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    src: string | undefined;
+    private _animNames;
+    private _mode;
+    private _playingAnim;
+    private _component;
+    private _lastExternalValue;
+    updated(changes: PropertyValues<this>): void;
+    private _refreshAnimNames;
+    private _pollTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    editorTemplate(value: any, _spec: PropertySpec): TemplateResult;
+    private _setMode;
+    private _onToggle;
+    private _applyValue;
+    private _getPlayState;
+    private _setPlay;
+    private _togglePreview;
+}