@operato/property-panel 9.2.22 → 9.2.25
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,31 @@
|
|
|
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
|
+
### [9.2.25](https://github.com/hatiolab/operato/compare/v9.2.24...v9.2.25) (2026-05-27)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/property-panel
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### [9.2.24](https://github.com/hatiolab/operato/compare/v9.2.23...v9.2.24) (2026-05-20)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/property-panel
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### [9.2.23](https://github.com/hatiolab/operato/compare/v9.2.22...v9.2.23) (2026-05-12)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### :bug: Bug Fix
|
|
26
|
+
|
|
27
|
+
* **property-panel:** shapes 가드 보강 — selected[0] non-Component 방어 ([4b69611](https://github.com/hatiolab/operato/commit/4b69611106b18ccd047a0b20e1046ca579fca089))
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
6
31
|
### [9.2.22](https://github.com/hatiolab/operato/compare/v9.2.21...v9.2.22) (2026-05-12)
|
|
7
32
|
|
|
8
33
|
**Note:** Version bump only for package @operato/property-panel
|
|
@@ -84,7 +84,10 @@ export class PropertyShapes extends AbstractProperty {
|
|
|
84
84
|
<label> <md-icon>height</md-icon><ox-i18n msgid="label.height">height</ox-i18n> </label>
|
|
85
85
|
<input type="number" value-key="bounds.height" .value=${String(height)} />
|
|
86
86
|
|
|
87
|
-
${this.selected.length &&
|
|
87
|
+
${this.selected.length &&
|
|
88
|
+
this.selected[0] &&
|
|
89
|
+
typeof this.selected[0].isRootModel === 'function' &&
|
|
90
|
+
this.selected[0].isRootModel()
|
|
88
91
|
? html ``
|
|
89
92
|
: html `
|
|
90
93
|
<label class="rotate">
|
|
@@ -249,7 +252,10 @@ export class PropertyShapes extends AbstractProperty {
|
|
|
249
252
|
</fieldset>
|
|
250
253
|
`
|
|
251
254
|
: html ``}
|
|
252
|
-
${this.selected.length &&
|
|
255
|
+
${this.selected.length &&
|
|
256
|
+
this.selected[0] &&
|
|
257
|
+
typeof this.selected[0].isRootModel === 'function' &&
|
|
258
|
+
this.selected[0].isRootModel()
|
|
253
259
|
? html `
|
|
254
260
|
<fieldset class="icon-label">
|
|
255
261
|
<legend>
|
|
@@ -315,28 +321,34 @@ export class PropertyShapes extends AbstractProperty {
|
|
|
315
321
|
}
|
|
316
322
|
_hasTextProperty(selected) {
|
|
317
323
|
for (let i = 0; i < selected.length; i++) {
|
|
318
|
-
if (!selected[i].hasTextProperty)
|
|
324
|
+
if (!selected[i] || !selected[i].hasTextProperty)
|
|
319
325
|
return false;
|
|
320
326
|
}
|
|
321
327
|
return true;
|
|
322
328
|
}
|
|
323
329
|
_hasProperties(selected) {
|
|
324
|
-
if (!selected ||
|
|
330
|
+
if (!selected ||
|
|
331
|
+
selected.length == 0 ||
|
|
332
|
+
(selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer()))
|
|
325
333
|
return false;
|
|
326
334
|
return true;
|
|
327
335
|
}
|
|
328
336
|
_isIdentifiable(selected) {
|
|
329
|
-
if (!selected ||
|
|
337
|
+
if (!selected ||
|
|
338
|
+
selected.length == 0 ||
|
|
339
|
+
selected.length > 1 ||
|
|
340
|
+
!selected[0] ||
|
|
341
|
+
(typeof selected[0].isLayer === 'function' && selected[0].isLayer()))
|
|
330
342
|
return false;
|
|
331
343
|
return true;
|
|
332
344
|
}
|
|
333
345
|
_isClassIdentifiable(selected) {
|
|
334
|
-
if (!selected || (selected[0] && selected[0].isLayer()))
|
|
346
|
+
if (!selected || (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer()))
|
|
335
347
|
return false;
|
|
336
348
|
return true;
|
|
337
349
|
}
|
|
338
350
|
_isLine(selected) {
|
|
339
|
-
if (!selected || !(selected[0] && selected[0].isLine()))
|
|
351
|
+
if (!selected || !(selected[0] && typeof selected[0].isLine === 'function' && selected[0].isLine()))
|
|
340
352
|
return false;
|
|
341
353
|
return true;
|
|
342
354
|
}
|
|
@@ -346,8 +358,9 @@ export class PropertyShapes extends AbstractProperty {
|
|
|
346
358
|
return true;
|
|
347
359
|
}
|
|
348
360
|
_isPositionable(selected) {
|
|
349
|
-
|
|
350
|
-
|
|
361
|
+
if (!selected || !(selected[0] && typeof selected[0].isPositionable === 'function' && selected[0].isPositionable()))
|
|
362
|
+
return false;
|
|
363
|
+
return true;
|
|
351
364
|
}
|
|
352
365
|
}
|
|
353
366
|
PropertyShapes.styles = [PropertyGridStyles, BoxPaddingEditorStyles];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../src/property-panel/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyShapes extends AbstractProperty {\n static styles = [PropertyGridStyles, BoxPaddingEditorStyles]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) bounds: BOUNDS | null = null\n @property({ type: Array }) selected: Component[] = []\n\n @state() private _3dExpanded: boolean = false\n @state() private _positionExpanded: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n const { width, height } = this.bounds || {}\n\n return html`\n <fieldset>\n <div class=\"property-grid\">\n ${this._isIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id || ''} />\n `\n : html``}\n ${this._isClassIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class || ''} />\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n <input value-key=\"text\" .value=${value.text || ''} />\n <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n <datalist id=\"format-list\">\n <option value=\"#,###.\"></option>\n <option value=\"#,###.#\"></option>\n <option value=\"#,###.0\"></option>\n <option value=\"#,##0.#\"></option>\n <option value=\"#,##0.0\"></option>\n <option value=\"#,##0.0%\"></option>\n </datalist>\n `\n : html``}\n ${this._hasProperties(this.selected)\n ? html`\n <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label> <md-icon>arrow_range</md-icon><ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n <label> <md-icon>height</md-icon><ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n ${this.selected.length && this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\">\n <md-icon>rotate_90_degrees_cw</md-icon><ox-i18n msgid=\"label.rotate\">rotate</ox-i18n>\n </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._isPositionable(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\" collapsable ?collapsed=${!this._positionExpanded}>\n <legend\n @click=${(e: Event) => {\n this._positionExpanded = !this._positionExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/shapes/position\" msgid=\"label.position\"\n >position</ox-title-with-help\n >\n <md-icon>${this._positionExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n\n <div class=\"property-grid\">\n <label>Position</label>\n <select value-key=\"position\" .value=${value.position}>\n <option value=\"\"> </option>\n <option value=\"static\">static</option>\n <option value=\"relative\">relative</option>\n <option value=\"absolute\">absolute</option>\n <option value=\"fixed\">fixed</option>\n <option value=\"sticky\">sticky</option>\n </select>\n\n <label>Origin</label>\n <select value-key=\"origin\" .value=${value.origin}>\n <option value=\"\"> </option>\n <option value=\"left-top\">left-top</option>\n <option value=\"center-top\">center-top</option>\n <option value=\"right-top\">right-top</option>\n <option value=\"left-middle\">left-middle</option>\n <option value=\"center-middle\">center-middle</option>\n <option value=\"right-middle\">right-middle</option>\n <option value=\"left-bottom\">left-bottom</option>\n <option value=\"center-bottom\">center-bottom</option>\n <option value=\"right-bottom\">right-bottom</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.offset-x\">offset-X</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${String(value.offsetX ?? '')} />\n <label> <ox-i18n msgid=\"label.offset-y\">offset-Y</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${String(value.offsetY ?? '')} />\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._is3dish(this.selected)\n ? html`\n <fieldset class=\"icon-label\" collapsable ?collapsed=${!this._3dExpanded}>\n <legend\n @click=${(e: Event) => {\n this._3dExpanded = !this._3dExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</ox-title-with-help>\n <md-icon>${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"zPos\"> <ox-i18n msgid=\"label.z-pos\">pos. Z</ox-i18n> </label>\n <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n <label class=\"depth\"> <ox-i18n msgid=\"label.depth\">depth</ox-i18n> </label>\n <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n <label class=\"rotationX\"> <ox-i18n msgid=\"label.rotation-x\">rot. X</ox-i18n> </label>\n <ox-input-angle value-key=\"rotationX\" .value=${value.rotationX}> </ox-input-angle>\n\n <label class=\"rotationY\"> <ox-i18n msgid=\"label.rotation-y\">rot. Y</ox-i18n> </label>\n <ox-input-angle value-key=\"rotationY\" .value=${value.rotationY}> </ox-input-angle>\n\n <label class=\"rotationZ\"> <ox-i18n msgid=\"label.rotation-z\">rot. Z</ox-i18n> </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n </div>\n </fieldset>\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n >text box</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n <md-icon data-value=\"left\">format_align_left</md-icon>\n <md-icon data-value=\"center\">format_align_center</md-icon>\n <md-icon data-value=\"right\">format_align_right</md-icon>\n <md-icon data-value=\"justify\">format_align_justify</md-icon>\n </ox-buttons-radio>\n\n <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n <md-icon data-value=\"top\">align_vertical_top</md-icon>\n <md-icon data-value=\"middle\">align_vertical_center</md-icon>\n <md-icon data-value=\"bottom\">align_vertical_bottom</md-icon>\n </ox-buttons-radio>\n\n <input\n id=\"checkbox-support-markdown\"\n type=\"checkbox\"\n value-key=\"supportMarkdown\"\n .checked=${value.supportMarkdown}\n />\n <label for=\"checkbox-support-markdown\">\n <ox-i18n msgid=\"label.support-markdown\">Support Markdown</ox-i18n>\n </label>\n\n <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n\n ${!value.textWrap\n ? html` <label for=\"checkbox-textOverflow\">\n <ox-i18n msgid=\"label.text-overflow\">Text Overflow</ox-i18n>\n </label>\n <select value-key=\"textOverflow\" .value=${value.textOverflow || ''}>\n <option value=\"\" selected>none</option>\n <option value=\"ellipsis\">ellipsis</option>\n <option value=\"clip\">clip</option>\n </select>`\n : ''}\n\n <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n <table class=\"box-padding custom-editor\">\n <tr>\n <td class=\"slide1\"></td>\n <td class=\"slide2\"></td>\n <td class=\"slide3\"></td>\n </tr>\n <tr>\n <td class=\"slide4\"></td>\n <td class=\"slide5\">\n <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop || 0} />\n <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft || 0} />\n <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight || 0} />\n <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom || 0} />\n </td>\n <td class=\"slide6\"></td>\n </tr>\n <tr>\n <td class=\"slide7\"></td>\n <td class=\"slide8\"></td>\n <td class=\"slide9\"></td>\n </tr>\n </table>\n </div>\n </fieldset>\n `\n : html``}\n ${this.selected.length && this.selected[0].isRootModel()\n ? html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n >Viewer Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n <option value=\"none\">none</option>\n <option value=\"center\">center</option>\n <option value=\"ratio\" selected>ratio</option>\n <option value=\"both\">both</option>\n <option value=\"width\">width</option>\n <option value=\"height\">height</option>\n </select>\n </div>\n </fieldset>\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n >Print Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"rotate\"><ox-i18n msgid=\"label.label-rotation\">Label Rotation</ox-i18n></label>\n <select value-key=\"labelRotation\" .value=${value.labelRotation || 'N'}>\n <option value=\"N\" selected>0°</option>\n <option value=\"B\">90°</option>\n <option value=\"I\">180°</option>\n <option value=\"R\">270°</option>\n </select>\n </div>\n </fieldset>\n `\n : html``}\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 _hasTextProperty(selected: Component[]) {\n for (let i = 0; i < selected.length; i++) {\n if (!selected[i].hasTextProperty) return false\n }\n\n return true\n }\n\n _hasProperties(selected: Component[]) {\n if (!selected || selected.length == 0 || (selected[0] && selected[0].isLayer && selected[0].isLayer())) return false\n\n return true\n }\n\n _isIdentifiable(selected: Component[]) {\n if (!selected || selected.length == 0 || selected.length > 1 || (selected[0].isLayer && selected[0].isLayer()))\n return false\n\n return true\n }\n\n _isClassIdentifiable(selected: Component[]) {\n if (!selected || (selected[0] && selected[0].isLayer())) return false\n\n return true\n }\n\n _isLine(selected: Component[]) {\n if (!selected || !(selected[0] && selected[0].isLine())) return false\n\n return true\n }\n\n _is3dish(selected: Component[]) {\n if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n return true\n }\n\n _isPositionable(selected: Component[]) {\n const s = selected?.[0]\n return !!(s && typeof s.isPositionable === 'function' && s.isPositionable())\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../src/property-panel/shapes/shapes.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { BoxPaddingEditorStyles } from '@operato/styles/box-padding-editor-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyShapes extends AbstractProperty {\n static styles = [PropertyGridStyles, BoxPaddingEditorStyles]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) bounds: BOUNDS | null = null\n @property({ type: Array }) selected: Component[] = []\n\n @state() private _3dExpanded: boolean = false\n @state() private _positionExpanded: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n const { width, height } = this.bounds || {}\n\n return html`\n <fieldset>\n <div class=\"property-grid\">\n ${this._isIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.id\">ID</ox-i18n> </label>\n <input value-key=\"id\" .value=${value.id || ''} />\n `\n : html``}\n ${this._isClassIdentifiable(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.class\">Class</ox-i18n> </label>\n <input value-key=\"class\" .value=${value.class || ''} />\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <label> <ox-i18n msgid=\"label.text\">Text</ox-i18n> </label>\n <input value-key=\"text\" .value=${value.text || ''} />\n <label> <ox-i18n msgid=\"label.text-format\">Text Format</ox-i18n> </label>\n <input value-key=\"textFormat\" .value=${value.textFormat || ''} list=\"format-list\" />\n <datalist id=\"format-list\">\n <option value=\"#,###.\"></option>\n <option value=\"#,###.#\"></option>\n <option value=\"#,###.0\"></option>\n <option value=\"#,##0.#\"></option>\n <option value=\"#,##0.0\"></option>\n <option value=\"#,##0.0%\"></option>\n </datalist>\n `\n : html``}\n ${this._hasProperties(this.selected)\n ? html`\n <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n <label for=\"checkbox-hidden\"> <ox-i18n msgid=\"label.item-hidden\">Item Hidden</ox-i18n> </label>\n\n <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n <label for=\"checkbox-locked\"> <ox-i18n msgid=\"label.locked\">Locked</ox-i18n> </label>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</ox-title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label> <md-icon>arrow_range</md-icon><ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.width\" .value=${String(width)} />\n <label> <md-icon>height</md-icon><ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.height\" .value=${String(height)} />\n\n ${this.selected.length &&\n this.selected[0] &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\">\n <md-icon>rotate_90_degrees_cw</md-icon><ox-i18n msgid=\"label.rotate\">rotate</ox-i18n>\n </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._isPositionable(this.selected)\n ? keyed(\n this.selected,\n html`\n <fieldset class=\"icon-label\" collapsable ?collapsed=${!this._positionExpanded}>\n <legend\n @click=${(e: Event) => {\n this._positionExpanded = !this._positionExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/shapes/position\" msgid=\"label.position\"\n >position</ox-title-with-help\n >\n <md-icon>${this._positionExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n\n <div class=\"property-grid\">\n <label>Position</label>\n <select value-key=\"position\" .value=${value.position}>\n <option value=\"\"> </option>\n <option value=\"static\">static</option>\n <option value=\"relative\">relative</option>\n <option value=\"absolute\">absolute</option>\n <option value=\"fixed\">fixed</option>\n <option value=\"sticky\">sticky</option>\n </select>\n\n <label>Origin</label>\n <select value-key=\"origin\" .value=${value.origin}>\n <option value=\"\"> </option>\n <option value=\"left-top\">left-top</option>\n <option value=\"center-top\">center-top</option>\n <option value=\"right-top\">right-top</option>\n <option value=\"left-middle\">left-middle</option>\n <option value=\"center-middle\">center-middle</option>\n <option value=\"right-middle\">right-middle</option>\n <option value=\"left-bottom\">left-bottom</option>\n <option value=\"center-bottom\">center-bottom</option>\n <option value=\"right-bottom\">right-bottom</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.offset-x\">offset-X</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetX\" .value=${String(value.offsetX ?? '')} />\n <label> <ox-i18n msgid=\"label.offset-y\">offset-Y</ox-i18n> </label>\n <input type=\"number\" value-key=\"offsetY\" .value=${String(value.offsetY ?? '')} />\n </div>\n </fieldset>\n `\n )\n : html``}\n ${this._is3dish(this.selected)\n ? html`\n <fieldset class=\"icon-label\" collapsable ?collapsed=${!this._3dExpanded}>\n <legend\n @click=${(e: Event) => {\n this._3dExpanded = !this._3dExpanded\n }}\n >\n <ox-title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</ox-title-with-help>\n <md-icon>${this._3dExpanded ? 'expand_less' : 'expand_more'}</md-icon>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"zPos\"> <ox-i18n msgid=\"label.z-pos\">pos. Z</ox-i18n> </label>\n <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n <label class=\"depth\"> <ox-i18n msgid=\"label.depth\">depth</ox-i18n> </label>\n <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n <label class=\"rotationX\"> <ox-i18n msgid=\"label.rotation-x\">rot. X</ox-i18n> </label>\n <ox-input-angle value-key=\"rotationX\" .value=${value.rotationX}> </ox-input-angle>\n\n <label class=\"rotationY\"> <ox-i18n msgid=\"label.rotation-y\">rot. Y</ox-i18n> </label>\n <ox-input-angle value-key=\"rotationY\" .value=${value.rotationY}> </ox-input-angle>\n\n <label class=\"rotationZ\"> <ox-i18n msgid=\"label.rotation-z\">rot. Z</ox-i18n> </label>\n <ox-input-angle value-key=\"rotation\" .value=${value.rotation}> </ox-input-angle>\n </div>\n </fieldset>\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n >text box</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.horizontal\">horizontal</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n <md-icon data-value=\"left\">format_align_left</md-icon>\n <md-icon data-value=\"center\">format_align_center</md-icon>\n <md-icon data-value=\"right\">format_align_right</md-icon>\n <md-icon data-value=\"justify\">format_align_justify</md-icon>\n </ox-buttons-radio>\n\n <label> <ox-i18n msgid=\"label.vertical\">vertical</ox-i18n> </label>\n <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n <md-icon data-value=\"top\">align_vertical_top</md-icon>\n <md-icon data-value=\"middle\">align_vertical_center</md-icon>\n <md-icon data-value=\"bottom\">align_vertical_bottom</md-icon>\n </ox-buttons-radio>\n\n <input\n id=\"checkbox-support-markdown\"\n type=\"checkbox\"\n value-key=\"supportMarkdown\"\n .checked=${value.supportMarkdown}\n />\n <label for=\"checkbox-support-markdown\">\n <ox-i18n msgid=\"label.support-markdown\">Support Markdown</ox-i18n>\n </label>\n\n <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n <label for=\"checkbox-textwrap\"> <ox-i18n msgid=\"label.text-wrap\">Text Wrap</ox-i18n> </label>\n\n ${!value.textWrap\n ? html` <label for=\"checkbox-textOverflow\">\n <ox-i18n msgid=\"label.text-overflow\">Text Overflow</ox-i18n>\n </label>\n <select value-key=\"textOverflow\" .value=${value.textOverflow || ''}>\n <option value=\"\" selected>none</option>\n <option value=\"ellipsis\">ellipsis</option>\n <option value=\"clip\">clip</option>\n </select>`\n : ''}\n\n <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n <table class=\"box-padding custom-editor\">\n <tr>\n <td class=\"slide1\"></td>\n <td class=\"slide2\"></td>\n <td class=\"slide3\"></td>\n </tr>\n <tr>\n <td class=\"slide4\"></td>\n <td class=\"slide5\">\n <input type=\"number\" value-key=\"paddingTop\" .value=${value.paddingTop || 0} />\n <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft || 0} />\n <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight || 0} />\n <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom || 0} />\n </td>\n <td class=\"slide6\"></td>\n </tr>\n <tr>\n <td class=\"slide7\"></td>\n <td class=\"slide8\"></td>\n <td class=\"slide9\"></td>\n </tr>\n </table>\n </div>\n </fieldset>\n `\n : html``}\n ${this.selected.length &&\n this.selected[0] &&\n typeof this.selected[0].isRootModel === 'function' &&\n this.selected[0].isRootModel()\n ? html`\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n >Viewer Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label><ox-i18n msgid=\"label.fit\">Fit</ox-i18n></label>\n <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n <option value=\"none\">none</option>\n <option value=\"center\">center</option>\n <option value=\"ratio\" selected>ratio</option>\n <option value=\"both\">both</option>\n <option value=\"width\">width</option>\n <option value=\"height\">height</option>\n </select>\n </div>\n </fieldset>\n <fieldset class=\"icon-label\">\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n >Print Option</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"rotate\"><ox-i18n msgid=\"label.label-rotation\">Label Rotation</ox-i18n></label>\n <select value-key=\"labelRotation\" .value=${value.labelRotation || 'N'}>\n <option value=\"N\" selected>0°</option>\n <option value=\"B\">90°</option>\n <option value=\"I\">180°</option>\n <option value=\"R\">270°</option>\n </select>\n </div>\n </fieldset>\n `\n : html``}\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 _hasTextProperty(selected: Component[]) {\n for (let i = 0; i < selected.length; i++) {\n if (!selected[i] || !selected[i].hasTextProperty) return false\n }\n\n return true\n }\n\n _hasProperties(selected: Component[]) {\n if (\n !selected ||\n selected.length == 0 ||\n (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer())\n )\n return false\n\n return true\n }\n\n _isIdentifiable(selected: Component[]) {\n if (\n !selected ||\n selected.length == 0 ||\n selected.length > 1 ||\n !selected[0] ||\n (typeof selected[0].isLayer === 'function' && selected[0].isLayer())\n )\n return false\n\n return true\n }\n\n _isClassIdentifiable(selected: Component[]) {\n if (!selected || (selected[0] && typeof selected[0].isLayer === 'function' && selected[0].isLayer())) return false\n\n return true\n }\n\n _isLine(selected: Component[]) {\n if (!selected || !(selected[0] && typeof selected[0].isLine === 'function' && selected[0].isLine())) return false\n\n return true\n }\n\n _is3dish(selected: Component[]) {\n if (!selected || !(selected[0] && selected[0].is3dish())) return false\n\n return true\n }\n\n _isPositionable(selected: Component[]) {\n if (!selected || !(selected[0] && typeof selected[0].isPositionable === 'function' && selected[0].isPositionable()))\n return false\n\n return true\n }\n}\n"]}
|