@operato/scene-visualizer 10.0.0-beta.4 → 10.0.0-beta.8

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

@@ -1,96 +1,214 @@
 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';
-const EXT_SPECGLOSS = 'KHR_materials_pbrSpecularGlossiness';
-class SpecGlossCompat {
-    name = EXT_SPECGLOSS;
-    extendMaterialParams() {
-        return Promise.resolve();
-    }
-}
-function registerSpecGlossCompat(loader) {
-    loader.register(() => new SpecGlossCompat());
-}
+import { ScrollbarStyles } from '@operato/styles/scrollbar-styles.js';
 let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
     static styles = [
         ...OxPropertyEditor.styles,
+        ScrollbarStyles,
         css `
-      div[info] {
+      [info-panel] {
+        font-size: 12px;
+        padding: 4px 0;
+      }
+
+      .dim-row {
         display: flex;
-        flex-direction: row;
+        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;
       }
 
-      div[info] * {
-        align-self: center;
+      .action-btn:hover {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
       }
 
-      div[info] title {
-        font-weight: bold;
+      .action-btn md-icon {
+        --md-icon-size: 16px;
       }
 
-      .buttons {
+      .ratio-lock-toggle {
         display: flex;
+        align-items: center;
         gap: 4px;
-        margin-left: auto;
+        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;
       }
 
-      .buttons md-elevated-button {
-        --md-icon-size: 24px;
+      .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();
         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>
-                  <div class="buttons">
-                    <md-elevated-button
-                      title="원래 크기로 설정"
-                      @click=${() => {
-                this._applyAction(action, {
-                    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>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>autorenew</md-icon>
-                    </md-elevated-button>
-                    <md-elevated-button
-                      title="현재 크기에 비율 맞춤"
-                      @click=${() => this._applyProportional(action)}
-                    >
-                      <md-icon>aspect_ratio</md-icon>
-                    </md-elevated-button>
-                  </div>`
-            : html ` <div></div> `}
-          </div>
+                    />
+                    <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,
@@ -98,13 +216,14 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
             detail: {
                 callback: (selected) => {
                     typeof action === 'function' && action(selected[0], dimension);
+                    this._refreshCurrentSize(selected[0]);
                 }
             }
         }));
     }
     /**
-     * 현재 컴포넌트의 W/H/D 중 가장 큰 값을 기준으로,
-     * 원래 모델의 비율에 맞게 나머지 치수를 조절한다.
+     * W, H 중 짧은 쪽을 기준으로 원래 모델의 비율에 맞게 치수를 조절한다.
+     * (contain 방식 — 모델이 컴포넌트 영역 안에 들어감)
      */
     _applyProportional(action) {
         this.dispatchEvent(new CustomEvent('i-need-selected', {
@@ -119,27 +238,44 @@ let GLTFInfoEditor = class GLTFInfoEditor extends OxPropertyEditor {
                     const { width: ow, height: oh, depth: od } = this; // 원래 모델 치수
                     if (!ow || !oh || !od)
                         return;
-                    // 현재 치수 중 가장 큰 값과, 그에 대응하는 원래 모델 치수로 scale 계산
-                    const maxCurrent = Math.max(cw, ch, cd);
-                    let scale;
-                    if (maxCurrent === cw) {
-                        scale = cw / ow;
-                    }
-                    else if (maxCurrent === ch) {
-                        scale = ch / oh;
-                    }
-                    else {
-                        scale = cd / od;
-                    }
+                    // 이미 비율이 맞으면 스킵
+                    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', {
@@ -147,36 +283,74 @@ 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();
-            registerSpecGlossCompat(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);
     }
 };
 __decorate([
@@ -191,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\nconst EXT_SPECGLOSS = 'KHR_materials_pbrSpecularGlossiness'\n\nclass SpecGlossCompat {\n  name = EXT_SPECGLOSS\n  extendMaterialParams() {\n    return Promise.resolve()\n  }\n}\n\nfunction registerSpecGlossCompat(loader: GLTFLoader) {\n  loader.register(() => new SpecGlossCompat())\n}\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      .buttons {\n        display: flex;\n        gap: 4px;\n        margin-left: auto;\n      }\n\n      .buttons md-elevated-button {\n        --md-icon-size: 24px;\n      }\n    `\n  ]\n\n  @property({ type: String }) declare src: string | undefined\n\n  @state() declare width: number\n  @state() declare height: number\n  @state() declare depth: number\n\n  constructor() {\n    super()\n    this.width = 0\n    this.height = 0\n    this.depth = 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    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                  <div class=\"buttons\">\n                    <md-elevated-button\n                      title=\"원래 크기로 설정\"\n                      @click=${() => {\n                        this._applyAction(action, {\n                          width: this.width,\n                          height: this.height,\n                          depth: this.depth\n                        })\n                      }}\n                    >\n                      <md-icon>autorenew</md-icon>\n                    </md-elevated-button>\n                    <md-elevated-button\n                      title=\"현재 크기에 비율 맞춤\"\n                      @click=${() => this._applyProportional(action)}\n                    >\n                      <md-icon>aspect_ratio</md-icon>\n                    </md-elevated-button>\n                  </div>`\n              : html` <div></div> `}\n          </div>\n        </div>\n      </fieldset>\n    `\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          }\n        }\n      })\n    )\n  }\n\n  /**\n   * 현재 컴포넌트의 W/H/D 중 가장 큰 값을 기준으로,\n   * 원래 모델의 비율에 맞게 나머지 치수를 조절한다.\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            // 현재 치수 중 가장 큰 값과, 그에 대응하는 원래 모델 치수로 scale 계산\n            const maxCurrent = Math.max(cw, ch, cd)\n            let scale: number\n\n            if (maxCurrent === cw) {\n              scale = cw / ow\n            } else if (maxCurrent === ch) {\n              scale = ch / oh\n            } else {\n              scale = cd / od\n            }\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        }\n      })\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      registerSpecGlossCompat(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":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAItD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,gBAAgB;IAC1D,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,gBAAgB,CAAC,MAAM;QAC1B,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GF;KACF,CAAA;IAIO,UAAU,GAAQ,IAAI,CAAA;IAa9B;QACE,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;QACd,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;QACf,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;QACd,IAAI,CAAC,YAAY,GAAG,CAAC,CAAA;QACrB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;QACtB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAA;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;QAClB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;QACpB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAA;QACvB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAA;IACxB,CAAC;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAA;QAErD,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAClC,IAAI,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAA;QAEzB,MAAM,cAAc,GAAG,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE,CAAA;QAEtD,OAAO,IAAI,CAAA;;;YAGH,KAAK;YACL,CAAC,CAAC,IAAI,CAAA;;;4CAG0B,IAAI,CAAC,KAAK,MAAM,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,KAAK;;;;2CAI5C,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;sBAC1D,IAAI,CAAC,YAAY,MAAM,IAAI,CAAC,aAAa,MAAM,IAAI,CAAC,YAAY;;;;;mGAKa,IAAI,CAAC,SAAS;qGACZ,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;gGACzC,IAAI,CAAC,aAAa;oBAC9F,IAAI,CAAC,cAAc,GAAG,CAAC;gBACvB,CAAC,CAAC,IAAI,CAAA,iFAAiF,IAAI,CAAC,cAAc,sBAAsB;gBAChI,CAAC,CAAC,EAAE;;;;;;;6BAOK,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;;;;;;;;iCAQjC,IAAI,CAAC,aAAa,EAAE;gCACrB,CAAC,CAAQ,EAAE,EAAE;gBACrB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC,CAAA;YAC5D,CAAC;;;;;;eAMR;YACH,CAAC,CAAC,IAAI,CAAA,sEAAsE;;;KAGnF,CAAA;IACH,CAAC;IAEO,aAAa,CAAC,CAAS;QAC7B,IAAI,CAAC,IAAI,OAAO;YAAE,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QACvD,IAAI,CAAC,IAAI,IAAI;YAAE,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QACjD,OAAO,MAAM,CAAC,CAAC,CAAC,CAAA;IAClB,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAO,IAAI,CAAA;QAEhF,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;QACzC,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAA;QAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAA;QACzC,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;QAC9B,MAAM,SAAS,GAAG,IAAI,CAAA;QAEtB,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,SAAS,CAAA;IAC7H,CAAC;IAEO,YAAY,CAAC,MAAW,EAAE,SAA2D;QAC3F,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,OAAO,MAAM,KAAK,UAAU,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;oBAC9D,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;gBACvC,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED;;;OAGG;IACK,kBAAkB,CAAC,MAAW;QACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;oBAC7B,IAAI,CAAC,SAAS,IAAI,OAAO,MAAM,KAAK,UAAU;wBAAE,OAAM;oBAEtD,MAAM,EAAE,KAAK,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;oBACxE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAA,CAAC,WAAW;oBAE7D,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE;wBAAE,OAAM;oBAE7B,gBAAgB;oBAChB,IAAI,IAAI,CAAC,eAAe,EAAE;wBAAE,OAAM;oBAElC,yBAAyB;oBACzB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;oBAExC,MAAM,CAAC,SAAS,EAAE;wBAChB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC;wBAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC;wBAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,CAAC;qBAC9B,CAAC,CAAA;oBAEF,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAA;gBACrC,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAEO,aAAa;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,SAAS,CAAA;IAC5C,CAAC;IAEO,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,QAAQ,EAAE,CAAC,QAAe,EAAE,EAAE;oBAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;oBACnC,IAAI,CAAC,aAAa,EAAE,CAAA;gBACtB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAEO,mBAAmB,CAAC,SAAc;QACxC,IAAI,CAAC,SAAS;YAAE,OAAM;QACtB,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,IAAI,EAAE,CAAA;QACnC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAA;QAChD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAA;QAClD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAA;IAClD,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,KAAK,EAAE,QAAe,EAAE,EAAE;wBAClC,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;wBAC7B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;wBAC3B,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAA;wBACnC,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,GAAI,CAAC,CAAA;oBAClD,CAAC;iBACF;aACF,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC;IAEO,UAAU,CAAS;IAE3B,KAAK,CAAC,eAAe,CAAC,SAAoB,EAAE,GAAW;QACrD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC;YACxB,OAAM;QACR,CAAC;QAED,iCAAiC;QACjC,IAAI,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3C,OAAM;QACR,CAAC;QAED,oCAAoC;QACpC,IAAI,IAAI,CAAC,UAAU;YAAE,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACnD,IAAI,OAAO,GAAG,CAAC,CAAA;QACf,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;YACxC,IAAI,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,EAAE,CAAC;gBAC9D,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;YAC7B,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC;IAEO,sBAAsB,CAAC,SAAc;QAC3C,MAAM,EAAE,GAAG,SAAS,EAAE,UAAU,CAAA;QAChC,IAAI,CAAC,EAAE,EAAE,UAAU;YAAE,OAAO,KAAK,CAAA;QAEjC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,UAAU,CAAA;QAC7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;QACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;QACtC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;QAEvC,6BAA6B;QAC7B,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,QAAQ,CAAA;QACpC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,MAAM,GAAG,CAAC,CAAA;YACd,IAAI,QAAQ,GAAG,CAAC,CAAA;YAChB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAE,CAAA;YAE3B,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAS,EAAE,EAAE;gBAC1B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,MAAM,EAAE,CAAA;oBACR,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;wBAClB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;wBAClD,IAAI,GAAG;4BAAE,QAAQ,IAAI,GAAG,CAAC,KAAK,CAAA;oBAChC,CAAC;oBACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;wBAClB,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;wBAC3E,IAAI,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;oBACjD,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,SAAS,GAAG,MAAM,CAAA;YACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAA;YAC3B,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,IAAI,CAAA;QACrC,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,CAAA;QAErD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,UAAU;YAAE,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACrD,CAAC;;AAnRmC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAgC;AAI1C;IAAhB,KAAK,EAAE;6CAAsB;AACb;IAAhB,KAAK,EAAE;8CAAuB;AACd;IAAhB,KAAK,EAAE;6CAAsB;AACb;IAAhB,KAAK,EAAE;oDAA6B;AACpB;IAAhB,KAAK,EAAE;qDAA8B;AACrB;IAAhB,KAAK,EAAE;oDAA6B;AACpB;IAAhB,KAAK,EAAE;iDAA0B;AACjB;IAAhB,KAAK,EAAE;mDAA4B;AACnB;IAAhB,KAAK,EAAE;sDAA+B;AACtB;IAAhB,KAAK,EAAE;qDAA8B;AA/HnB,cAAc;IADlC,aAAa,CAAC,2BAA2B,CAAC;GACtB,cAAc,CAsYlC;eAtYoB,cAAc","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;
+}