@operato/property-panel 10.0.0-beta.43 → 10.0.0-beta.44
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,15 @@
|
|
|
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.0.0-beta.44](https://github.com/hatiolab/operato/compare/v10.0.0-beta.43...v10.0.0-beta.44) (2026-04-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :house: Code Refactoring
|
|
10
|
+
|
|
11
|
+
* **shadow:** property panel 에디터를 신규 키 (offsetX/offsetY/blur) 로 현행화 ([aee4dbe](https://github.com/hatiolab/operato/commit/aee4dbef842606bc31b6ad3f2161ffa22c2d3221))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [10.0.0-beta.43](https://github.com/hatiolab/operato/compare/v10.0.0-beta.42...v10.0.0-beta.43) (2026-04-24)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/property-panel
|
|
@@ -22,17 +22,23 @@ export class PropertyShadow extends LitElement {
|
|
|
22
22
|
this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
|
|
25
|
+
var _a, _b, _c;
|
|
26
|
+
const value = (this.value || {});
|
|
27
|
+
// 옛 모델 (left/top/blurSize) 도 표시 가능하도록 fallback 으로 읽는다.
|
|
28
|
+
// 새 키 우선, 없으면 옛 키 — drawer (things-scene/effect/shadow.ts) 와 동일 규칙.
|
|
29
|
+
const offsetX = (_a = value.offsetX) !== null && _a !== void 0 ? _a : value.left;
|
|
30
|
+
const offsetY = (_b = value.offsetY) !== null && _b !== void 0 ? _b : value.top;
|
|
31
|
+
const blur = (_c = value.blur) !== null && _c !== void 0 ? _c : value.blurSize;
|
|
26
32
|
return html `
|
|
27
33
|
<div class="property-grid">
|
|
28
34
|
<label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
|
|
29
|
-
<input type="number" value-key="
|
|
35
|
+
<input type="number" value-key="offsetX" .value=${offsetX} />
|
|
30
36
|
|
|
31
37
|
<label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
|
|
32
|
-
<input type="number" value-key="
|
|
38
|
+
<input type="number" value-key="offsetY" .value=${offsetY} />
|
|
33
39
|
|
|
34
40
|
<label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
|
|
35
|
-
<input type="number" value-key="
|
|
41
|
+
<input type="number" value-key="blur" .value=${blur} />
|
|
36
42
|
|
|
37
43
|
<label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
|
|
38
44
|
<ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
|
|
@@ -45,8 +51,11 @@ export class PropertyShadow extends LitElement {
|
|
|
45
51
|
if (!key) {
|
|
46
52
|
return;
|
|
47
53
|
}
|
|
54
|
+
// 새 키로 통일해 저장하면서 옛 키 (left/top/blurSize) 는 제거 — 양쪽이
|
|
55
|
+
// 동시에 남아있으면 drawer fallback 우선순위 때문에 가시값과 어긋날 수 있다.
|
|
56
|
+
const { left, top, blurSize, ...rest } = (this.value || {});
|
|
48
57
|
this.value = {
|
|
49
|
-
...
|
|
58
|
+
...rest,
|
|
50
59
|
[key]: convert(element)
|
|
51
60
|
};
|
|
52
61
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAY5C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM
|
|
1
|
+
{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAY5C,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,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAO9B,CAAA;QAED,uDAAuD;QACvD,oEAAoE;QACpE,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,KAAK,CAAC,IAAI,CAAA;QAC3C,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,KAAK,CAAC,GAAG,CAAA;QAC1C,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,KAAK,CAAC,QAAQ,CAAA;QAEzC,OAAO,IAAI,CAAA;;;0DAG2C,OAAO;;;0DAGP,OAAO;;;uDAGV,IAAI;;;mDAGR,KAAK,CAAC,KAAK;;KAEzD,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,oDAAoD;QACpD,oDAAoD;QACpD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAIzD,CAAA;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI;YACP,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAtEM,qBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 그림자 속성을 편집하는 element\n *\n * Example:\n * <property-shadow\n * @change=\"${e => { this.shadow = e.target.value }}\"\n * value=\"${this.shadow}\"\n * ></property-shadow>\n */\n\nexport class PropertyShadow extends LitElement {\n static styles = [\n PropertyGridStyles,\n css`\n :host {\n display: flex;\n }\n `\n ]\n\n @property({ type: Object }) value?: Properties\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = (this.value || {}) as Properties & {\n offsetX?: number\n offsetY?: number\n blur?: number\n left?: number\n top?: number\n blurSize?: number\n }\n\n // 옛 모델 (left/top/blurSize) 도 표시 가능하도록 fallback 으로 읽는다.\n // 새 키 우선, 없으면 옛 키 — drawer (things-scene/effect/shadow.ts) 와 동일 규칙.\n const offsetX = value.offsetX ?? value.left\n const offsetY = value.offsetY ?? value.top\n const blur = value.blur ?? value.blurSize\n\n return html`\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.shadowOffsetX\">offset-X</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${offsetX} />\n\n <label> <ox-i18n msgid=\"label.shadowOffsetY\">offset-Y</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${offsetY} />\n\n <label> <ox-i18n msgid=\"label.shadowSize\">Size</ox-i18n> </label>\n <input type=\"number\" value-key=\"blur\" .value=${blur} />\n\n <label class=\"icon-only-label color\"><md-icon>format_color_fill</md-icon></label>\n <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n </div>\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 // 새 키로 통일해 저장하면서 옛 키 (left/top/blurSize) 는 제거 — 양쪽이\n // 동시에 남아있으면 drawer fallback 우선순위 때문에 가시값과 어긋날 수 있다.\n const { left, top, blurSize, ...rest } = (this.value || {}) as Properties & {\n left?: number\n top?: number\n blurSize?: number\n }\n\n this.value = {\n ...rest,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|