npm - @operato/property-panel - Versions diffs - 10.0.0-beta.2 → 10.0.0-beta.21 - Mend

@operato/property-panel 10.0.0-beta.2 → 10.0.0-beta.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/src/property-panel/threed/property-scene3d.js CHANGED Viewed

@@ -10,48 +10,36 @@ import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
 import { AbstractProperty } from '../abstract-property.js';
 const LIGHTING_PRESETS = {
     Neutral: {
-        hemiSkyColor: '#ffffff',
-        hemiGroundColor: '#444444',
         hemiIntensity: 0.6,
         dirLightEnabled: true,
         dirLightColor: '#ffffff',
         dirLightIntensity: 0.5
     },
     Studio: {
-        hemiSkyColor: '#ffffff',
-        hemiGroundColor: '#555555',
         hemiIntensity: 0.5,
         dirLightEnabled: true,
         dirLightColor: '#ffffff',
         dirLightIntensity: 0.6
     },
     Bright: {
-        hemiSkyColor: '#ffffff',
-        hemiGroundColor: '#888888',
         hemiIntensity: 0.8,
         dirLightEnabled: true,
         dirLightColor: '#ffffff',
         dirLightIntensity: 0.7
     },
     Warm: {
-        hemiSkyColor: '#ffe8d0',
-        hemiGroundColor: '#6b4226',
         hemiIntensity: 0.5,
         dirLightEnabled: true,
         dirLightColor: '#ffcc88',
         dirLightIntensity: 0.4
     },
     Cool: {
-        hemiSkyColor: '#e0e8ff',
-        hemiGroundColor: '#334455',
         hemiIntensity: 0.5,
         dirLightEnabled: true,
         dirLightColor: '#cce0ff',
         dirLightIntensity: 0.4
     },
     Flat: {
-        hemiSkyColor: '#ffffff',
-        hemiGroundColor: '#ffffff',
         hemiIntensity: 0.8,
         dirLightEnabled: false,
         dirLightColor: '#ffffff',
@@ -70,7 +58,8 @@ export class PropertyScene3D extends AbstractProperty {
     render() {
         const value = this.value || {};
         return html `
-      ${this._renderMode(value)} ${this._renderCamera(value)} ${this._renderRenderer(value)}
+      ${this._renderMode(value)} ${this._renderBookmarks(value)} ${this._renderRenderer(value)}
+      ${this._renderSky(value)}
       ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}
       ${this._renderFloor(value)}
     `;
@@ -83,58 +72,104 @@ export class PropertyScene3D extends AbstractProperty {
           <input id="cb-threed" type="checkbox" value-key="threed" .checked=${!!value.threed} />
           <label for="cb-threed">Enable 3D</label>
-          <input id="cb-autorotate" type="checkbox" value-key="autoRotate" .checked=${!!value.autoRotate} />
-          <label for="cb-autorotate">Auto Rotate</label>
+          <label>Viewer Auto</label>
+          <select value-key="cameraAutoPlay">
+            ${[
+            { value: '', label: 'None' },
+            { value: 'orbit', label: 'Orbit' },
+            { value: 'play', label: 'Play Bookmarks' }
+        ].map(o => html `<option value=${o.value} ?selected=${(value.cameraAutoPlay || '') === o.value}>
+                  ${o.label}
+                </option>`)}
+          </select>
+          <input
+            id="cb-floor-constraint"
+            type="checkbox"
+            value-key="cameraFloorConstraint"
+            .checked=${!!value.cameraFloorConstraint}
+          />
+          <label for="cb-floor-constraint">Floor Constraint (Viewer)</label>
         </div>
       </fieldset>
     `;
     }
-    _renderCamera(value) {
-        var _a, _b, _c, _d;
+    _renderBookmarks(value) {
+        const bookmarks = value.cameraBookmarks || [];
         return html `
       <fieldset>
-        <legend>Camera</legend>
+        <legend>Bookmarks</legend>
         <div class="property-grid">
-          <label>View</label>
-          <select value-key="initialCameraView">
-            ${['perspective', 'top', 'front', 'back', 'right', 'left'].map(v => html `<option value=${v} ?selected=${(value.initialCameraView || 'perspective') === v}>
-                  ${v.charAt(0).toUpperCase() + v.slice(1)}
-                </option>`)}
-          </select>
-          <label class="onethird-label">FOV</label>
-          <input
-            class="onethird-editor"
-            type="number"
-            value-key="fov"
-            min="10"
-            max="120"
-            .value=${String((_a = value.fov) !== null && _a !== void 0 ? _a : 45)}
-          />
-          <label class="onethird-label">Near</label>
-          <input
-            class="onethird-editor"
-            type="number"
-            value-key="near"
-            min="0.01"
-            step="0.01"
-            .value=${String((_b = value.near) !== null && _b !== void 0 ? _b : 0.1)}
-          />
-          <label class="onethird-label">Far</label>
-          <input class="onethird-editor" type="number" value-key="far" .value=${String((_c = value.far) !== null && _c !== void 0 ? _c : 20000)} />
-          <label class="onethird-label">Zoom</label>
-          <input
-            class="onethird-editor"
-            type="number"
-            value-key="zoom"
-            min="100"
-            .value=${String((_d = value.zoom) !== null && _d !== void 0 ? _d : 100)}
-          />
+          <div class="bookmark-slots">
+        ${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => {
+            const filled = !!bookmarks[i];
+            return html `
+            <div
+              class="bookmark-slot ${filled ? 'filled' : ''}"
+              title=${filled ? 'Click: Go / Long-click: Overwrite / Right-click: Delete' : 'Long-click: Save current camera'}
+              @click=${(e) => { if (filled) {
+                this._bookmarkAction('navigate', i);
+                const t = e.currentTarget;
+                t.classList.add('saved');
+                setTimeout(() => t.classList.remove('saved'), 300);
+            } }}
+              @contextmenu=${(e) => { e.preventDefault(); if (filled)
+                this._bookmarkAction('clear', i); }}
+              @mousedown=${(e) => this._onBookmarkMouseDown(e, i)}
+              @mouseup=${() => this._onBookmarkMouseUp()}
+              @mouseleave=${() => this._onBookmarkMouseUp()}
+            >${i}</div>
+          `;
+        })}
+          </div>
         </div>
       </fieldset>
     `;
     }
+    _onBookmarkMouseDown(e, index) {
+        if (e.button !== 0)
+            return;
+        const target = e.currentTarget;
+        this._pressTarget = target;
+        // 롱클릭 시작: filling 애니메이션
+        target.classList.add('saving');
+        this._longPressTimer = setTimeout(() => {
+            this._longPressTimer = undefined;
+            target.classList.remove('saving');
+            this._bookmarkAction('save', index);
+            // 저장 완료 피드백
+            target.classList.add('saved');
+            setTimeout(() => target.classList.remove('saved'), 300);
+        }, 600);
+    }
+    _onBookmarkMouseUp() {
+        if (this._longPressTimer) {
+            clearTimeout(this._longPressTimer);
+            this._longPressTimer = undefined;
+        }
+        if (this._pressTarget) {
+            this._pressTarget.classList.remove('saving');
+            this._pressTarget = undefined;
+        }
+    }
+    _bookmarkAction(action, index) {
+        var _a;
+        const root = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.root;
+        const cap = root === null || root === void 0 ? void 0 : root._threeCapability;
+        if (!cap)
+            return;
+        if (action === 'save') {
+            cap.saveCameraToSlot(index);
+        }
+        else if (action === 'navigate') {
+            cap.animateToSlot(index);
+        }
+        else if (action === 'clear') {
+            cap.bookmarkManager.clearSlot(index);
+            root.set('cameraBookmarks', cap.bookmarkManager.exportSlots());
+        }
+        this.requestUpdate();
+    }
     _renderRenderer(value) {
         return html `
       <fieldset>
@@ -157,18 +192,41 @@ export class PropertyScene3D extends AbstractProperty {
       </fieldset>
     `;
     }
+    _renderSky(value) {
+        const skyOptions = [
+            { value: '', label: 'None' },
+            { value: 'color', label: 'Color' },
+            { value: 'studio', label: 'Studio' },
+            { value: 'warehouse', label: 'Warehouse' },
+            { value: 'factory', label: 'Factory' },
+            { value: 'office', label: 'Office' },
+            { value: 'home', label: 'Home' },
+        ];
+        return html `
+      <fieldset>
+        <legend>Sky</legend>
+        <div class="property-grid">
+          <label>Preset</label>
+          <select value-key="sky">
+            ${skyOptions.map(o => html `<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`)}
+          </select>
+          ${value.sky === 'color'
+            ? html `
+                <label>Color</label>
+                <ox-input-color value-key="skyColor" .value=${value.skyColor || '#87ceeb'}> </ox-input-color>
+              `
+            : ''}
+        </div>
+      </fieldset>
+    `;
+    }
     _renderHemisphereLight(value) {
         var _a, _b;
         return html `
       <fieldset>
         <legend>Hemisphere Light</legend>
         <div class="property-grid">
-          <label>Sky</label>
-          <ox-input-color value-key="hemiSkyColor" .value=${value.hemiSkyColor || '#ffffff'}> </ox-input-color>
-          <label>Ground</label>
-          <ox-input-color value-key="hemiGroundColor" .value=${value.hemiGroundColor || '#444444'}> </ox-input-color>
           <label>Intensity</label>
           <div class="range-with-value">
             <input
@@ -303,6 +361,64 @@ PropertyScene3D.styles = [
         font-size: 11px;
         color: var(--md-sys-color-on-secondary-container);
       }
+      .bookmark-slots {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: repeat(9, 1fr);
+        gap: 2px;
+        padding: 4px 0 0;
+      }
+      .bookmark-slot {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 24px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        color: var(--md-sys-color-outline, #999);
+        background: var(--md-sys-color-surface-variant, #f0f0f0);
+        border: 1px solid transparent;
+        user-select: none;
+        transition: all 0.12s ease;
+      }
+      .bookmark-slot:hover {
+        background: var(--md-sys-color-secondary-container, #e0e0e0);
+      }
+      .bookmark-slot.filled {
+        color: var(--md-sys-color-primary, #6750A4);
+        background: var(--md-sys-color-primary-container, #EADDFF);
+        border-color: var(--md-sys-color-primary, #6750A4);
+        font-weight: 700;
+      }
+      .bookmark-slot:active {
+        transform: scale(0.9);
+      }
+      .bookmark-slot.saving {
+        animation: bookmark-fill 0.6s linear forwards;
+      }
+      @keyframes bookmark-fill {
+        from { box-shadow: inset 24px 0 0 0 transparent; }
+        to { box-shadow: inset 24px 0 0 0 var(--md-sys-color-primary-container, #EADDFF); }
+      }
+      .bookmark-slot.saved {
+        animation: bookmark-saved 0.3s ease;
+      }
+      @keyframes bookmark-saved {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.2); }
+        100% { transform: scale(1); }
+      }
     `
 ];
 __decorate([

package/dist/src/property-panel/threed/property-scene3d.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"property-scene3d.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/property-scene3d.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/input/ox-input-color.js'\n\nimport './property-material3d.js'\n\nimport { css, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nconst LIGHTING_PRESETS: Record<string, Record<string, unknown>> = {\n Neutral: {\n hemiSkyColor: '#ffffff',\n hemiGroundColor: '#444444',\n hemiIntensity: 0.6,\n dirLightEnabled: true,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0.5\n },\n Studio: {\n hemiSkyColor: '#ffffff',\n hemiGroundColor: '#555555',\n hemiIntensity: 0.5,\n dirLightEnabled: true,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0.6\n },\n Bright: {\n hemiSkyColor: '#ffffff',\n hemiGroundColor: '#888888',\n hemiIntensity: 0.8,\n dirLightEnabled: true,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0.7\n },\n Warm: {\n hemiSkyColor: '#ffe8d0',\n hemiGroundColor: '#6b4226',\n hemiIntensity: 0.5,\n dirLightEnabled: true,\n dirLightColor: '#ffcc88',\n dirLightIntensity: 0.4\n },\n Cool: {\n hemiSkyColor: '#e0e8ff',\n hemiGroundColor: '#334455',\n hemiIntensity: 0.5,\n dirLightEnabled: true,\n dirLightColor: '#cce0ff',\n dirLightIntensity: 0.4\n },\n Flat: {\n hemiSkyColor: '#ffffff',\n hemiGroundColor: '#ffffff',\n hemiIntensity: 0.8,\n dirLightEnabled: false,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0\n }\n}\n\n/\n Scene-level 3D settings for model-layer.\n * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.\n */\nexport class PropertyScene3D extends AbstractProperty {\n static styles = [\n PropertyGridStyles,\n css`\n .preset-buttons {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 2px 0;\n }\n\n .preset-buttons button {\n flex: 1;\n min-width: 60px;\n padding: 4px 6px;\n border: 1px solid var(--md-sys-color-outline, #ccc);\n border-radius: 4px;\n background: var(--md-sys-color-surface, #fff);\n color: var(--md-sys-color-on-surface, #333);\n font-size: 11px;\n cursor: pointer;\n }\n\n .preset-buttons button:hover {\n background: var(--md-sys-color-primary-container, #e0e0e0);\n }\n\n .range-with-value {\n grid-column: 9 / -1;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .range-with-value input[type='range'] {\n flex: 1;\n border: none;\n background: transparent;\n padding: 0;\n }\n\n .range-with-value span {\n min-width: 2.5em;\n text-align: right;\n font-size: 11px;\n color: var(--md-sys-color-on-secondary-container);\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene: Scene \| null = null\n\n render() {\n const value = this.value \|\| {}\n\n return html`\n ${this._renderMode(value)} ${this._renderCamera(value)} ${this._renderRenderer(value)}\n ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}\n ${this._renderFloor(value)}\n `\n }\n\n private _renderMode(value: Properties) {\n return html`\n <fieldset>\n <legend>3D Mode</legend>\n <div class=\"property-grid\">\n <input id=\"cb-threed\" type=\"checkbox\" value-key=\"threed\" .checked=${!!value.threed} />\n <label for=\"cb-threed\">Enable 3D</label>\n\n <input id=\"cb-autorotate\" type=\"checkbox\" value-key=\"autoRotate\" .checked=${!!value.autoRotate} />\n <label for=\"cb-autorotate\">Auto Rotate</label>\n </div>\n </fieldset>\n `\n }\n\n private _renderCamera(value: Properties) {\n return html`\n <fieldset>\n <legend>Camera</legend>\n <div class=\"property-grid\">\n <label>View</label>\n <select value-key=\"initialCameraView\">\n ${['perspective', 'top', 'front', 'back', 'right', 'left'].map(\n v =>\n html`<option value=${v} ?selected=${(value.initialCameraView \|\| 'perspective') === v}>\n ${v.charAt(0).toUpperCase() + v.slice(1)}\n </option>`\n )}\n </select>\n\n <label class=\"onethird-label\">FOV</label>\n <input\n class=\"onethird-editor\"\n type=\"number\"\n value-key=\"fov\"\n min=\"10\"\n max=\"120\"\n .value=${String(value.fov ?? 45)}\n />\n <label class=\"onethird-label\">Near</label>\n <input\n class=\"onethird-editor\"\n type=\"number\"\n value-key=\"near\"\n min=\"0.01\"\n step=\"0.01\"\n .value=${String(value.near ?? 0.1)}\n />\n <label class=\"onethird-label\">Far</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"far\" .value=${String(value.far ?? 20000)} />\n\n <label class=\"onethird-label\">Zoom</label>\n <input\n class=\"onethird-editor\"\n type=\"number\"\n value-key=\"zoom\"\n min=\"100\"\n .value=${String(value.zoom ?? 100)}\n />\n </div>\n </fieldset>\n `\n }\n\n private _renderRenderer(value: Properties) {\n return html`\n <fieldset>\n <legend>Renderer</legend>\n <div class=\"property-grid\">\n <input id=\"cb-antialias\" type=\"checkbox\" value-key=\"antialias\" .checked=${value.antialias !== false} />\n <label for=\"cb-antialias\">Anti-alias</label>\n\n <label>Precision</label>\n <select value-key=\"precision\">\n ${[\n { value: 'highp', label: 'High' },\n { value: 'mediump', label: 'Medium' },\n { value: 'lowp', label: 'Low' }\n ].map(\n o =>\n html`<option value=${o.value} ?selected=${(value.precision \|\| 'highp') === o.value}>\n ${o.label}\n </option>`\n )}\n </select>\n </div>\n </fieldset>\n `\n }\n\n private _renderHemisphereLight(value: Properties) {\n return html`\n <fieldset>\n <legend>Hemisphere Light</legend>\n <div class=\"property-grid\">\n <label>Sky</label>\n <ox-input-color value-key=\"hemiSkyColor\" .value=${value.hemiSkyColor \|\| '#ffffff'}> </ox-input-color>\n\n <label>Ground</label>\n <ox-input-color value-key=\"hemiGroundColor\" .value=${value.hemiGroundColor \|\| '#444444'}> </ox-input-color>\n\n <label>Intensity</label>\n <div class=\"range-with-value\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"3\"\n step=\"0.1\"\n value-key=\"hemiIntensity\"\n .value=${String(value.hemiIntensity ?? 0.6)}\n />\n <span>${(value.hemiIntensity ?? 0.6).toFixed(1)}</span>\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _renderKeyLight(value: Properties) {\n return html`\n <fieldset>\n <legend>Key Light</legend>\n <div class=\"property-grid\">\n <input\n id=\"cb-dirlight\"\n type=\"checkbox\"\n value-key=\"dirLightEnabled\"\n .checked=${value.dirLightEnabled !== false}\n />\n <label for=\"cb-dirlight\">Enabled</label>\n\n <label>Color</label>\n <ox-input-color value-key=\"dirLightColor\" .value=${value.dirLightColor \|\| '#ffffff'}> </ox-input-color>\n\n <label>Intensity</label>\n <div class=\"range-with-value\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"3\"\n step=\"0.1\"\n value-key=\"dirLightIntensity\"\n .value=${String(value.dirLightIntensity ?? 0.5)}\n />\n <span>${(value.dirLightIntensity ?? 0.5).toFixed(1)}</span>\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _renderLightingPresets() {\n return html`\n <fieldset>\n <legend>Lighting Presets</legend>\n <div class=\"property-grid\">\n <div class=\"preset-buttons\">\n ${Object.entries(LIGHTING_PRESETS).map(\n ([name, values]) =>\n html`<button @click=${() => this._applyLightingPreset(values)}>${name}</button>`\n )}\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _renderFloor(value: Properties) {\n return html`\n <property-material3d\n legend=\"Floor Material\"\n .value=${value.floorMaterial3d \|\| { receiveShadow: true }}\n @property-change=${this._onFloorMaterialChange}\n >\n </property-material3d>\n `\n }\n\n private _applyLightingPreset(values: Record<string, unknown>) {\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: values\n })\n )\n }\n\n private _onFloorMaterialChange(e: CustomEvent) {\n e.stopPropagation()\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: { floorMaterial3d: e.detail.material3d }\n })\n )\n }\n\n}\n"]}
1	+ {"version":3,"file":"property-scene3d.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/property-scene3d.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport '@operato/input/ox-input-color.js'\n\nimport './property-material3d.js'\n\nimport { css, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nconst LIGHTING_PRESETS: Record<string, Record<string, unknown>> = {\n Neutral: {\n hemiIntensity: 0.6,\n dirLightEnabled: true,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0.5\n },\n Studio: {\n hemiIntensity: 0.5,\n dirLightEnabled: true,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0.6\n },\n Bright: {\n hemiIntensity: 0.8,\n dirLightEnabled: true,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0.7\n },\n Warm: {\n hemiIntensity: 0.5,\n dirLightEnabled: true,\n dirLightColor: '#ffcc88',\n dirLightIntensity: 0.4\n },\n Cool: {\n hemiIntensity: 0.5,\n dirLightEnabled: true,\n dirLightColor: '#cce0ff',\n dirLightIntensity: 0.4\n },\n Flat: {\n hemiIntensity: 0.8,\n dirLightEnabled: false,\n dirLightColor: '#ffffff',\n dirLightIntensity: 0\n }\n}\n\n/\n Scene-level 3D settings for model-layer.\n * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.\n */\nexport class PropertyScene3D extends AbstractProperty {\n static styles = [\n PropertyGridStyles,\n css`\n .preset-buttons {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 2px 0;\n }\n\n .preset-buttons button {\n flex: 1;\n min-width: 60px;\n padding: 4px 6px;\n border: 1px solid var(--md-sys-color-outline, #ccc);\n border-radius: 4px;\n background: var(--md-sys-color-surface, #fff);\n color: var(--md-sys-color-on-surface, #333);\n font-size: 11px;\n cursor: pointer;\n }\n\n .preset-buttons button:hover {\n background: var(--md-sys-color-primary-container, #e0e0e0);\n }\n\n .range-with-value {\n grid-column: 9 / -1;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .range-with-value input[type='range'] {\n flex: 1;\n border: none;\n background: transparent;\n padding: 0;\n }\n\n .range-with-value span {\n min-width: 2.5em;\n text-align: right;\n font-size: 11px;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .bookmark-slots {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: repeat(9, 1fr);\n gap: 2px;\n padding: 4px 0 0;\n }\n\n .bookmark-slot {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n border-radius: 3px;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n color: var(--md-sys-color-outline, #999);\n background: var(--md-sys-color-surface-variant, #f0f0f0);\n border: 1px solid transparent;\n user-select: none;\n transition: all 0.12s ease;\n }\n\n .bookmark-slot:hover {\n background: var(--md-sys-color-secondary-container, #e0e0e0);\n }\n\n .bookmark-slot.filled {\n color: var(--md-sys-color-primary, #6750A4);\n background: var(--md-sys-color-primary-container, #EADDFF);\n border-color: var(--md-sys-color-primary, #6750A4);\n font-weight: 700;\n }\n\n .bookmark-slot:active {\n transform: scale(0.9);\n }\n\n .bookmark-slot.saving {\n animation: bookmark-fill 0.6s linear forwards;\n }\n\n @keyframes bookmark-fill {\n from { box-shadow: inset 24px 0 0 0 transparent; }\n to { box-shadow: inset 24px 0 0 0 var(--md-sys-color-primary-container, #EADDFF); }\n }\n\n .bookmark-slot.saved {\n animation: bookmark-saved 0.3s ease;\n }\n\n @keyframes bookmark-saved {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene: Scene \| null = null\n\n render() {\n const value = this.value \|\| {}\n\n return html`\n ${this._renderMode(value)} ${this._renderBookmarks(value)} ${this._renderRenderer(value)}\n ${this._renderSky(value)}\n ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}\n ${this._renderFloor(value)}\n `\n }\n\n private _renderMode(value: Properties) {\n return html`\n <fieldset>\n <legend>3D Mode</legend>\n <div class=\"property-grid\">\n <input id=\"cb-threed\" type=\"checkbox\" value-key=\"threed\" .checked=${!!value.threed} />\n <label for=\"cb-threed\">Enable 3D</label>\n\n <label>Viewer Auto</label>\n <select value-key=\"cameraAutoPlay\">\n ${[\n { value: '', label: 'None' },\n { value: 'orbit', label: 'Orbit' },\n { value: 'play', label: 'Play Bookmarks' }\n ].map(\n o =>\n html`<option value=${o.value} ?selected=${(value.cameraAutoPlay \|\| '') === o.value}>\n ${o.label}\n </option>`\n )}\n </select>\n\n <input\n id=\"cb-floor-constraint\"\n type=\"checkbox\"\n value-key=\"cameraFloorConstraint\"\n .checked=${!!value.cameraFloorConstraint}\n />\n <label for=\"cb-floor-constraint\">Floor Constraint (Viewer)</label>\n </div>\n </fieldset>\n `\n }\n\n private _renderBookmarks(value: Properties) {\n const bookmarks: (any \| null)[] = value.cameraBookmarks \|\| []\n\n return html`\n <fieldset>\n <legend>Bookmarks</legend>\n <div class=\"property-grid\">\n <div class=\"bookmark-slots\">\n ${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => {\n const filled = !!bookmarks[i]\n return html`\n <div\n class=\"bookmark-slot ${filled ? 'filled' : ''}\"\n title=${filled ? 'Click: Go / Long-click: Overwrite / Right-click: Delete' : 'Long-click: Save current camera'}\n @click=${(e: MouseEvent) => { if (filled) { this._bookmarkAction('navigate', i); const t = e.currentTarget as HTMLElement; t.classList.add('saved'); setTimeout(() => t.classList.remove('saved'), 300) } }}\n @contextmenu=${(e: Event) => { e.preventDefault(); if (filled) this._bookmarkAction('clear', i) }}\n @mousedown=${(e: MouseEvent) => this._onBookmarkMouseDown(e, i)}\n @mouseup=${() => this._onBookmarkMouseUp()}\n @mouseleave=${() => this._onBookmarkMouseUp()}\n >${i}</div>\n `\n })}\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _longPressTimer?: ReturnType<typeof setTimeout>\n private _pressTarget?: HTMLElement\n\n private _onBookmarkMouseDown(e: MouseEvent, index: number) {\n if (e.button !== 0) return\n const target = e.currentTarget as HTMLElement\n this._pressTarget = target\n\n // 롱클릭 시작: filling 애니메이션\n target.classList.add('saving')\n\n this._longPressTimer = setTimeout(() => {\n this._longPressTimer = undefined\n target.classList.remove('saving')\n this._bookmarkAction('save', index)\n\n // 저장 완료 피드백\n target.classList.add('saved')\n setTimeout(() => target.classList.remove('saved'), 300)\n }, 600)\n }\n\n private _onBookmarkMouseUp() {\n if (this._longPressTimer) {\n clearTimeout(this._longPressTimer)\n this._longPressTimer = undefined\n }\n if (this._pressTarget) {\n this._pressTarget.classList.remove('saving')\n this._pressTarget = undefined\n }\n }\n\n private _bookmarkAction(action: 'save' \| 'navigate' \| 'clear', index: number) {\n const root = this.scene?.root as any\n const cap = root?._threeCapability\n if (!cap) return\n\n if (action === 'save') {\n cap.saveCameraToSlot(index)\n } else if (action === 'navigate') {\n cap.animateToSlot(index)\n } else if (action === 'clear') {\n cap.bookmarkManager.clearSlot(index)\n root.set('cameraBookmarks', cap.bookmarkManager.exportSlots())\n }\n\n this.requestUpdate()\n }\n\n private _renderRenderer(value: Properties) {\n return html`\n <fieldset>\n <legend>Renderer</legend>\n <div class=\"property-grid\">\n <input id=\"cb-antialias\" type=\"checkbox\" value-key=\"antialias\" .checked=${value.antialias !== false} />\n <label for=\"cb-antialias\">Anti-alias</label>\n\n <label>Precision</label>\n <select value-key=\"precision\">\n ${[\n { value: 'highp', label: 'High' },\n { value: 'mediump', label: 'Medium' },\n { value: 'lowp', label: 'Low' }\n ].map(\n o =>\n html`<option value=${o.value} ?selected=${(value.precision \|\| 'highp') === o.value}>\n ${o.label}\n </option>`\n )}\n </select>\n </div>\n </fieldset>\n `\n }\n\n private _renderSky(value: Properties) {\n const skyOptions = [\n { value: '', label: 'None' },\n { value: 'color', label: 'Color' },\n { value: 'studio', label: 'Studio' },\n { value: 'warehouse', label: 'Warehouse' },\n { value: 'factory', label: 'Factory' },\n { value: 'office', label: 'Office' },\n { value: 'home', label: 'Home' },\n ]\n\n return html`\n <fieldset>\n <legend>Sky</legend>\n <div class=\"property-grid\">\n <label>Preset</label>\n <select value-key=\"sky\">\n ${skyOptions.map(\n o => html`<option value=${o.value} ?selected=${(value.sky \|\| '') === o.value}>${o.label}</option>`\n )}\n </select>\n\n ${value.sky === 'color'\n ? html`\n <label>Color</label>\n <ox-input-color value-key=\"skyColor\" .value=${value.skyColor \|\| '#87ceeb'}> </ox-input-color>\n `\n : ''}\n </div>\n </fieldset>\n `\n }\n\n private _renderHemisphereLight(value: Properties) {\n return html`\n <fieldset>\n <legend>Hemisphere Light</legend>\n <div class=\"property-grid\">\n <label>Intensity</label>\n <div class=\"range-with-value\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"3\"\n step=\"0.1\"\n value-key=\"hemiIntensity\"\n .value=${String(value.hemiIntensity ?? 0.6)}\n />\n <span>${(value.hemiIntensity ?? 0.6).toFixed(1)}</span>\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _renderKeyLight(value: Properties) {\n return html`\n <fieldset>\n <legend>Key Light</legend>\n <div class=\"property-grid\">\n <input\n id=\"cb-dirlight\"\n type=\"checkbox\"\n value-key=\"dirLightEnabled\"\n .checked=${value.dirLightEnabled !== false}\n />\n <label for=\"cb-dirlight\">Enabled</label>\n\n <label>Color</label>\n <ox-input-color value-key=\"dirLightColor\" .value=${value.dirLightColor \|\| '#ffffff'}> </ox-input-color>\n\n <label>Intensity</label>\n <div class=\"range-with-value\">\n <input\n type=\"range\"\n min=\"0\"\n max=\"3\"\n step=\"0.1\"\n value-key=\"dirLightIntensity\"\n .value=${String(value.dirLightIntensity ?? 0.5)}\n />\n <span>${(value.dirLightIntensity ?? 0.5).toFixed(1)}</span>\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _renderLightingPresets() {\n return html`\n <fieldset>\n <legend>Lighting Presets</legend>\n <div class=\"property-grid\">\n <div class=\"preset-buttons\">\n ${Object.entries(LIGHTING_PRESETS).map(\n ([name, values]) =>\n html`<button @click=${() => this._applyLightingPreset(values)}>${name}</button>`\n )}\n </div>\n </div>\n </fieldset>\n `\n }\n\n private _renderFloor(value: Properties) {\n return html`\n <property-material3d\n legend=\"Floor Material\"\n .value=${value.floorMaterial3d \|\| { receiveShadow: true }}\n @property-change=${this._onFloorMaterialChange}\n >\n </property-material3d>\n `\n }\n\n private _applyLightingPreset(values: Record<string, unknown>) {\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: values\n })\n )\n }\n\n private _onFloorMaterialChange(e: CustomEvent) {\n e.stopPropagation()\n this.dispatchEvent(\n new CustomEvent('property-change', {\n bubbles: true,\n composed: true,\n detail: { floorMaterial3d: e.detail.material3d }\n })\n )\n }\n\n}\n"]}

package/dist/src/property-panel/threed/threed.js CHANGED Viewed

@@ -59,6 +59,14 @@ export class Property3D extends AbstractProperty {
         </div>
       </fieldset>
+      <fieldset>
+        <legend>Display</legend>
+        <div class="property-grid">
+          <input id="cb-screenFixed" type="checkbox" value-key="screenFixed" .checked=${!!value.screenFixed} />
+          <label for="cb-screenFixed">Screen Fixed (HUD)</label>
+        </div>
+      </fieldset>
       <property-material3d .value=${value.material3d}></property-material3d>
     `;
     }

package/dist/src/property-panel/threed/threed.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"threed.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/threed.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kCAAkC,CAAA;AACzC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAAhD;;QAI8B,WAAM,GAAkB,IAAI,CAAA;QAC7B,aAAQ,GAAgB,EAAE,CAAA;~~IA4EvD~~,CAAC;~~IA1EC~~,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM;;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAExE,OAAO,IAAI,CAAA;;;;;yFAK0E,MAAM,CAAC,KAAK,CAAC;;0FAEZ,MAAM,CAAC,MAAM,CAAC;;kFAEtB,MAAA,KAAK,CAAC,KAAK,mCAAI,CAAC;;;;;;;;wFAQV,MAAM,CAAC,IAAI,CAAC;;uFAEb,MAAM,CAAC,GAAG,CAAC;;iFAEjB,MAAA,KAAK,CAAC,IAAI,mCAAI,CAAC;;;;;;;;iFAQf,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC;;iFAEpB,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC;;gFAErB,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC~~;;;;oCAI/D~~,KAAK,CAAC,UAAU;KAC/C,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAA;QAEjD,IAAI,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,KAAK,CAAC;gBAAE,OAAM;YACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;iBACvB;aACF,CAAC,CACH,CAAA;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACrC,CAAC;IACH,CAAC;;~~AA/EM~~,iBAAM,GAAG,CAAC,kBAAkB,CAAC,AAAvB,CAAuB;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA6B;AAC7B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAA2B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport './property-material3d.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class Property3D extends AbstractProperty {\n static styles = [PropertyGridStyles]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) bounds: BOUNDS \| null = null\n @property({ type: Array }) selected: Component[] = []\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = this.value \|\| {}\n const { left = 0, top = 0, width = '', height = '' } = this.bounds \|\| {}\n\n return html`\n <fieldset>\n <legend>Size</legend>\n <div class=\"property-grid\">\n <label class=\"onethird-label\">W</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n <label class=\"onethird-label\">H</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n <label class=\"onethird-label\">D</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"depth\" .value=${value.depth ?? 0} />\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Position</legend>\n <div class=\"property-grid\">\n <label class=\"onethird-label\">X</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.left\" .value=${String(left)} />\n <label class=\"onethird-label\">Y</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.top\" .value=${String(top)} />\n <label class=\"onethird-label\">Z</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"zPos\" .value=${value.zPos ?? 0} />\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Rotation</legend>\n <div class=\"property-grid\">\n <label class=\"onethird-label\">RX</label>\n <ox-input-angle class=\"onethird-editor\" value-key=\"rotationX\" .value=${value.rotationX ?? 0}></ox-input-angle>\n <label class=\"onethird-label\">RY</label>\n <ox-input-angle class=\"onethird-editor\" value-key=\"rotationY\" .value=${value.rotationY ?? 0}></ox-input-angle>\n <label class=\"onethird-label\">RZ</label>\n <ox-input-angle class=\"onethird-editor\" value-key=\"rotation\" .value=${value.rotation ?? 0}></ox-input-angle>\n </div>\n </fieldset>\n\n <property-material3d .value=${value.material3d}></property-material3d>\n `\n }\n\n onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value = this.getValueFromEventTarget(element)\n\n if (key.indexOf('bounds.') == 0) {\n if (isNaN(value)) return\n this.dispatchEvent(\n new CustomEvent('bounds-change', {\n bubbles: true,\n composed: true,\n detail: {\n [key.substr(7)]: value\n }\n })\n )\n } else {\n this.onAfterValueChange(key, value)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"threed.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/threed.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kCAAkC,CAAA;AACzC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAAhD;;QAI8B,WAAM,GAAkB,IAAI,CAAA;QAC7B,aAAQ,GAAgB,EAAE,CAAA;IAoFvD,CAAC;IAlFC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM;;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAExE,OAAO,IAAI,CAAA;;;;;yFAK0E,MAAM,CAAC,KAAK,CAAC;;0FAEZ,MAAM,CAAC,MAAM,CAAC;;kFAEtB,MAAA,KAAK,CAAC,KAAK,mCAAI,CAAC;;;;;;;;wFAQV,MAAM,CAAC,IAAI,CAAC;;uFAEb,MAAM,CAAC,GAAG,CAAC;;iFAEjB,MAAA,KAAK,CAAC,IAAI,mCAAI,CAAC;;;;;;;;iFAQf,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC;;iFAEpB,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC;;gFAErB,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC;;;;;;;wFAOX,CAAC,CAAC,KAAK,CAAC,WAAW;;;;;oCAKvE,KAAK,CAAC,UAAU;KAC/C,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAA;QAEjD,IAAI,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,IAAI,KAAK,CAAC,KAAK,CAAC;gBAAE,OAAM;YACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;iBACvB;aACF,CAAC,CACH,CAAA;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACrC,CAAC;IACH,CAAC;;AAvFM,iBAAM,GAAG,CAAC,kBAAkB,CAAC,AAAvB,CAAuB;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA6B;AAC7B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAA2B","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport './property-material3d.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class Property3D extends AbstractProperty {\n static styles = [PropertyGridStyles]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) bounds: BOUNDS \| null = null\n @property({ type: Array }) selected: Component[] = []\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = this.value \|\| {}\n const { left = 0, top = 0, width = '', height = '' } = this.bounds \|\| {}\n\n return html`\n <fieldset>\n <legend>Size</legend>\n <div class=\"property-grid\">\n <label class=\"onethird-label\">W</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n <label class=\"onethird-label\">H</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n <label class=\"onethird-label\">D</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"depth\" .value=${value.depth ?? 0} />\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Position</legend>\n <div class=\"property-grid\">\n <label class=\"onethird-label\">X</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.left\" .value=${String(left)} />\n <label class=\"onethird-label\">Y</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"bounds.top\" .value=${String(top)} />\n <label class=\"onethird-label\">Z</label>\n <input class=\"onethird-editor\" type=\"number\" value-key=\"zPos\" .value=${value.zPos ?? 0} />\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Rotation</legend>\n <div class=\"property-grid\">\n <label class=\"onethird-label\">RX</label>\n <ox-input-angle class=\"onethird-editor\" value-key=\"rotationX\" .value=${value.rotationX ?? 0}></ox-input-angle>\n <label class=\"onethird-label\">RY</label>\n <ox-input-angle class=\"onethird-editor\" value-key=\"rotationY\" .value=${value.rotationY ?? 0}></ox-input-angle>\n <label class=\"onethird-label\">RZ</label>\n <ox-input-angle class=\"onethird-editor\" value-key=\"rotation\" .value=${value.rotation ?? 0}></ox-input-angle>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Display</legend>\n <div class=\"property-grid\">\n <input id=\"cb-screenFixed\" type=\"checkbox\" value-key=\"screenFixed\" .checked=${!!value.screenFixed} />\n <label for=\"cb-screenFixed\">Screen Fixed (HUD)</label>\n </div>\n </fieldset>\n\n <property-material3d .value=${value.material3d}></property-material3d>\n `\n }\n\n onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n var value = this.getValueFromEventTarget(element)\n\n if (key.indexOf('bounds.') == 0) {\n if (isNaN(value)) return\n this.dispatchEvent(\n new CustomEvent('bounds-change', {\n bubbles: true,\n composed: true,\n detail: {\n [key.substr(7)]: value\n }\n })\n )\n } else {\n this.onAfterValueChange(key, value)\n }\n }\n}\n"]}