@operato/property-panel 10.2.1 → 10.3.3

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [10.3.3](https://github.com/hatiolab/operato/compare/v10.3.2...v10.3.3) (2026-08-31)
7
+
8
+ **Note:** Version bump only for package @operato/property-panel
9
+
10
+
11
+
12
+
13
+
14
+ ### [10.3.2](https://github.com/hatiolab/operato/compare/v10.3.1...v10.3.2) (2026-08-06)
15
+
16
+
17
+ ### :rocket: New Features
18
+
19
+ * **property-panel:** 루트 3D 편집기를 서브패스에서 함께 내보낸다 ([97067ed](https://github.com/hatiolab/operato/commit/97067ed2da3bcb4b59dc52308d82434473cefbc0))
20
+
21
+
22
+
6
23
  ### [10.2.1](https://github.com/hatiolab/operato/compare/v10.2.0...v10.2.1) (2026-07-31)
7
24
 
8
25
 
@@ -4,6 +4,7 @@
4
4
  import '@operato/input/ox-input-angle.js';
5
5
  import '@operato/i18n/ox-i18n.js';
6
6
  import './property-material3d.js';
7
+ export { PropertyScene3D } from './property-scene3d.js';
7
8
  import { BOUNDS, Component, Properties } from '@hatiolab/things-scene';
8
9
  import { AbstractProperty } from '../abstract-property.js';
9
10
  export declare class Property3D extends AbstractProperty {
@@ -5,6 +5,15 @@ import { __decorate } from "tslib";
5
5
  import '@operato/input/ox-input-angle.js';
6
6
  import '@operato/i18n/ox-i18n.js';
7
7
  import './property-material3d.js';
8
+ /*
9
+ * 루트(씬)의 3D 속성 편집기도 이 서브패스에서 함께 내보낸다.
10
+ *
11
+ * 예전에는 `property-scene3d.js` 가 exports 맵에도 없고 어디서도 재수출되지 않아, 패키지 밖에서는
12
+ * 컴포넌트 3D(Property3D)만 쓸 수 있었다. 그래서 소비처가 루트 3D 탭을 만들려면 입력 33개짜리
13
+ * 편집기를 손으로 다시 적어야 했다 — 실제로 operato-twin 이 그 앞에서 막혔다.
14
+ * 컴포넌트 3D 와 씬 3D 는 같은 탭의 두 얼굴이라 같은 문으로 나가는 것이 맞다.
15
+ */
16
+ export { PropertyScene3D } from './property-scene3d.js';
8
17
  import { html } from 'lit';
9
18
  import { property } from 'lit/decorators.js';
10
19
  import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
@@ -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;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"]}
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;;;;;;;GAOG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,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\n/*\n * 루트(씬)의 3D 속성 편집기도 이 서브패스에서 함께 내보낸다.\n *\n * 예전에는 `property-scene3d.js` 가 exports 맵에도 없고 어디서도 재수출되지 않아, 패키지 밖에서는\n * 컴포넌트 3D(Property3D)만 쓸 수 있었다. 그래서 소비처가 루트 3D 탭을 만들려면 입력 33개짜리\n * 편집기를 손으로 다시 적어야 했다 — 실제로 operato-twin 이 그 앞에서 막혔다.\n * 컴포넌트 3D 와 씬 3D 는 같은 탭의 두 얼굴이라 같은 문으로 나가는 것이 맞다.\n */\nexport { PropertyScene3D } from './property-scene3d.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"]}