npm - @operato/property-panel - Versions diffs - 10.20.0 → 10.23.0 - Mend

@operato/property-panel 10.20.0 → 10.23.0

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 (32) hide show

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;;;;;;;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"]}
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,6FAA6F;AAC7F,SAAS,SAAS,CAAC,KAAc;IAC/B,MAAM,CAAC,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC,CAAA;IAC7E,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AACpE,CAAC;AAED,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAAhD;;QAI8B,WAAM,GAAkB,IAAI,CAAA;QAC7B,aAAQ,GAAgB,EAAE,CAAA;IAsGvD,CAAC;IApGC,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;;;;;;mEAMoD,SAAS,CAAC,KAAK,CAAC;;;;oEAIf,SAAS,CAAC,MAAM,CAAC;;;;4DAIzB,MAAA,KAAK,CAAC,KAAK,mCAAI,CAAC;;;;;;;;;;kEAUV,SAAS,CAAC,IAAI,CAAC;;;;iEAIhB,SAAS,CAAC,GAAG,CAAC;;;;2DAIpB,MAAA,KAAK,CAAC,IAAI,mCAAI,CAAC;;;;;;;;;;2DAUf,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC;;;;2DAIpB,MAAA,KAAK,CAAC,SAAS,mCAAI,CAAC;;;;0DAIrB,MAAA,KAAK,CAAC,QAAQ,mCAAI,CAAC;;;;;;;;wFAQW,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;;AAzGM,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\n/* A coordinate as the panel shows it: at most two decimals, never the float's full tail. /\nfunction fmtNumber(value: unknown): string {\n const n = typeof value === 'number' ? value : parseFloat(String(value ?? ''))\n return Number.isFinite(n) ? String(Math.round(n 100) / 100) : ''\n}\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 <div class=\"field third\" title=\"W\">\n <span>W</span>\n <input type=\"number\" value-key=\"bounds.width\" .value=${fmtNumber(width)} />\n </div>\n <div class=\"field third\" title=\"H\">\n <span>H</span>\n <input type=\"number\" value-key=\"bounds.height\" .value=${fmtNumber(height)} />\n </div>\n <div class=\"field third\" title=\"D\">\n <span>D</span>\n <input type=\"number\" value-key=\"depth\" .value=${value.depth ?? 0} />\n </div>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Position</legend>\n <div class=\"property-grid\">\n <div class=\"field third\" title=\"X\">\n <span>X</span>\n <input type=\"number\" value-key=\"bounds.left\" .value=${fmtNumber(left)} />\n </div>\n <div class=\"field third\" title=\"Y\">\n <span>Y</span>\n <input type=\"number\" value-key=\"bounds.top\" .value=${fmtNumber(top)} />\n </div>\n <div class=\"field third\" title=\"Z\">\n <span>Z</span>\n <input type=\"number\" value-key=\"zPos\" .value=${value.zPos ?? 0} />\n </div>\n </div>\n </fieldset>\n\n <fieldset>\n <legend>Rotation</legend>\n <div class=\"property-grid\">\n <div class=\"field third\" title=\"RX\">\n <span>RX</span>\n <ox-input-angle value-key=\"rotationX\" .value=${value.rotationX ?? 0}></ox-input-angle>\n </div>\n <div class=\"field third\" title=\"RY\">\n <span>RY</span>\n <ox-input-angle value-key=\"rotationY\" .value=${value.rotationY ?? 0}></ox-input-angle>\n </div>\n <div class=\"field third\" title=\"RZ\">\n <span>RZ</span>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation ?? 0}></ox-input-angle>\n </div>\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"]}