@operato/board 0.3.20 → 0.3.26
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 +51 -0
- package/custom-elements.json +947 -947
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +9 -8
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map +1 -1
- package/dist/src/modeller/property-sidebar/data-binding/data-binding.d.ts +2 -1
- package/dist/src/modeller/property-sidebar/data-binding/data-binding.js +12 -9
- package/dist/src/modeller/property-sidebar/data-binding/data-binding.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/effects.d.ts +2 -0
- package/dist/src/modeller/property-sidebar/effects/effects.js +8 -4
- package/dist/src/modeller/property-sidebar/effects/effects.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-animation.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/property-animation.js +11 -10
- package/dist/src/modeller/property-sidebar/effects/property-animation.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-animations.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/property-animations.js +5 -2
- package/dist/src/modeller/property-sidebar/effects/property-animations.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.js +6 -5
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/property-event-tap.js +5 -4
- package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-event.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/property-event.js +4 -3
- package/dist/src/modeller/property-sidebar/effects/property-event.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-shadow.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/property-shadow.js +4 -3
- package/dist/src/modeller/property-sidebar/effects/property-shadow.js.map +1 -1
- package/dist/src/modeller/property-sidebar/shapes/shapes.d.ts +2 -0
- package/dist/src/modeller/property-sidebar/shapes/shapes.js +30 -28
- package/dist/src/modeller/property-sidebar/shapes/shapes.js.map +1 -1
- package/dist/src/modeller/property-sidebar/specifics/specifics.d.ts +1 -1
- package/dist/src/modeller/property-sidebar/specifics/specifics.js +3 -3
- package/dist/src/modeller/property-sidebar/specifics/specifics.js.map +1 -1
- package/dist/src/modeller/property-sidebar/styles/styles.d.ts +2 -1
- package/dist/src/modeller/property-sidebar/styles/styles.js +21 -20
- package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -14
- package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts +9 -8
- package/src/modeller/property-sidebar/data-binding/data-binding.ts +12 -9
- package/src/modeller/property-sidebar/effects/effects.ts +10 -5
- package/src/modeller/property-sidebar/effects/property-animation.ts +11 -10
- package/src/modeller/property-sidebar/effects/property-animations.ts +7 -3
- package/src/modeller/property-sidebar/effects/property-event-hover.ts +6 -5
- package/src/modeller/property-sidebar/effects/property-event-tap.ts +5 -4
- package/src/modeller/property-sidebar/effects/property-event.ts +6 -4
- package/src/modeller/property-sidebar/effects/property-shadow.ts +4 -3
- package/src/modeller/property-sidebar/shapes/shapes.ts +30 -28
- package/src/modeller/property-sidebar/specifics/specifics.ts +5 -4
- package/src/modeller/property-sidebar/styles/styles.ts +21 -20
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@operato/input/ox-input-data.js';
|
|
6
|
+
import '@operato/i18n/ox-i18n.js';
|
|
6
7
|
import { html, LitElement } from 'lit';
|
|
7
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
9
|
import { EffectsSharedStyle } from './effects-shared-style';
|
|
@@ -16,10 +17,10 @@ let PropertyEventHover = class PropertyEventHover extends LitElement {
|
|
|
16
17
|
return html `
|
|
17
18
|
<input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
|
|
18
19
|
<label for="checkbox-emphasize" class="checkbox-label">
|
|
19
|
-
<i18n
|
|
20
|
+
<ox-i18n msgid="label.emphasize">emphasize</ox-i18n>
|
|
20
21
|
</label>
|
|
21
22
|
|
|
22
|
-
<label> <i18n
|
|
23
|
+
<label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
|
|
23
24
|
<select id="tap-select" value-key="action" .value=${action || ''}>
|
|
24
25
|
<option value=""></option>
|
|
25
26
|
<option value="popup">popup target board</option>
|
|
@@ -30,7 +31,7 @@ let PropertyEventHover = class PropertyEventHover extends LitElement {
|
|
|
30
31
|
<option value="value-set">set value to target component value</option>
|
|
31
32
|
</select>
|
|
32
33
|
|
|
33
|
-
<label> <i18n
|
|
34
|
+
<label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
|
|
34
35
|
|
|
35
36
|
${action == 'popup'
|
|
36
37
|
? html `
|
|
@@ -54,14 +55,14 @@ let PropertyEventHover = class PropertyEventHover extends LitElement {
|
|
|
54
55
|
`}
|
|
55
56
|
${action == 'data-set' || action == 'value-set'
|
|
56
57
|
? html `
|
|
57
|
-
<label> <i18n
|
|
58
|
+
<label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
|
|
58
59
|
<ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
|
|
59
60
|
`
|
|
60
61
|
: html ``}
|
|
61
62
|
|
|
62
63
|
<input id="checkbox-restore" type="checkbox" value-key="restore" .checked=${restore} />
|
|
63
64
|
<label for="checkbox-restore" class="checkbox-label">
|
|
64
|
-
<i18n
|
|
65
|
+
<ox-i18n msgid="label.restore-on-leave">restore on leave</ox-i18n>
|
|
65
66
|
</label>
|
|
66
67
|
`;
|
|
67
68
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iCAAiC,CAAA;
|
|
1
|
+
{"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-hover')\nclass PropertyEventHover extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n return html`\n <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n <ox-i18n msgid=\"label.emphasize\">emphasize</ox-i18n>\n </label>\n\n <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n <option value=\"\"></option>\n <option value=\"popup\">popup target board</option>\n <option value=\"infoWindow\">open infowindow</option>\n <option value=\"data-toggle\">toggle(true/false) target component data</option>\n <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n <option value=\"data-set\">set value to target component data</option>\n <option value=\"value-set\">set value to target component value</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n ${action == 'popup'\n ? html`\n <things-editor-board-selector\n value-key=\"target\"\n .value=${target}\n custom-editor\n ></things-editor-board-selector>\n `\n : html`\n <input\n value-key=\"target\"\n .value=${target || ''}\n list=\"target-list\"\n .placeholder=\"${this._getPlaceHoder(action)}\"\n />\n\n <datalist id=\"target-list\">\n ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n </datalist>\n `}\n ${action == 'data-set' || action == 'value-set'\n ? html`\n <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n `\n : html``}\n\n <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n <label for=\"checkbox-restore\" class=\"checkbox-label\">\n <ox-i18n msgid=\"label.restore-on-leave\">restore on leave</ox-i18n>\n </label>\n `\n }\n\n _getPlaceHoder(action: string) {\n switch (action) {\n case 'popup':\n case 'goto':\n return 'SCENE-100'\n case 'link-open':\n case 'link-move':\n return 'http://www.hatiolab.com/'\n default:\n return ''\n }\n }\n\n _getTargetList(action: string) {\n switch (action) {\n case 'data-toggle':\n case 'data-tristate':\n case 'data-set':\n case 'value-set':\n let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n ids.unshift('(self)')\n return ids\n case 'infoWindow':\n return (\n (this.scene &&\n this.scene.ids\n .filter(i => {\n return this.scene!.findById(i.key).get('type') == 'info-window'\n })\n .map(i => `${i.key}`)) ||\n []\n )\n default:\n return []\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 this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@operato/input/ox-input-data.js';
|
|
6
|
+
import '@operato/i18n/ox-i18n.js';
|
|
6
7
|
import { html, LitElement } from 'lit';
|
|
7
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
9
|
import { EffectsSharedStyle } from './effects-shared-style';
|
|
@@ -15,9 +16,9 @@ let PropertyEventTap = class PropertyEventTap extends LitElement {
|
|
|
15
16
|
var { action, value = '', target = '', pressed } = this.value || {};
|
|
16
17
|
return html `
|
|
17
18
|
<input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
|
|
18
|
-
<label for="checkbox-pressed" class="checkbox-label"> <i18n
|
|
19
|
+
<label for="checkbox-pressed" class="checkbox-label"> <ox-i18n msgid="label.pressed">pressed</ox-i18n> </label>
|
|
19
20
|
|
|
20
|
-
<label> <i18n
|
|
21
|
+
<label> <ox-i18n msgid="label.action">action</ox-i18n> </label>
|
|
21
22
|
<select id="tap-select" value-key="action" .value=${action || ''}>
|
|
22
23
|
<option value=""></option>
|
|
23
24
|
<option value="goto">go to target board</option>
|
|
@@ -35,7 +36,7 @@ let PropertyEventTap = class PropertyEventTap extends LitElement {
|
|
|
35
36
|
<option value="value-set">set value to target component value</option>
|
|
36
37
|
</select>
|
|
37
38
|
|
|
38
|
-
<label> <i18n
|
|
39
|
+
<label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
|
|
39
40
|
|
|
40
41
|
${action == 'goto' || action == 'popup'
|
|
41
42
|
? html `
|
|
@@ -54,7 +55,7 @@ let PropertyEventTap = class PropertyEventTap extends LitElement {
|
|
|
54
55
|
`}
|
|
55
56
|
${action == 'data-set' || action == 'value-set'
|
|
56
57
|
? html `
|
|
57
|
-
<label> <i18n
|
|
58
|
+
<label> <ox-i18n msgid="label.value">value</ox-i18n> </label>
|
|
58
59
|
<ox-input-data value-key="value" .value=${value} custom-editor fullwidth></ox-input-data>
|
|
59
60
|
`
|
|
60
61
|
: html ``}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,iCAAiC,CAAA;
|
|
1
|
+
{"version":3,"file":"property-event-tap.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-tap.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-data.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-tap')\nclass PropertyEventTap extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n var { action, value = '', target = '', pressed } = this.value || {}\n\n return html`\n <input id=\"checkbox-pressed\" type=\"checkbox\" value-key=\"pressed\" .checked=${pressed} />\n <label for=\"checkbox-pressed\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.pressed\">pressed</ox-i18n> </label>\n\n <label> <ox-i18n msgid=\"label.action\">action</ox-i18n> </label>\n <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n <option value=\"\"></option>\n <option value=\"goto\">go to target board</option>\n <option value=\"link-open\">open new window for target link</option>\n <option value=\"link-move\">move to target link</option>\n <option value=\"route-page\">route to page</option>\n <option value=\"popup\">popup target board</option>\n <option value=\"modal-popup\">modal popup target board</option>\n <option value=\"close-scene\">close current board</option>\n <option value=\"infoWindow\">open infowindow</option>\n <option value=\"toggle-info-window\">toggle infowindow</option>\n <option value=\"data-toggle\">toggle(true/false) target component data</option>\n <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n <option value=\"data-set\">set value to target component data</option>\n <option value=\"value-set\">set value to target component value</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n\n ${action == 'goto' || action == 'popup'\n ? html`\n <things-editor-board-selector\n value-key=\"target\"\n .value=${target}\n custom-editor\n ></things-editor-board-selector>\n `\n : html`\n <input value-key=\"target\" .value=${target} list=\"target-list\" .placeholder=${this._getPlaceHoder(action)} />\n\n <datalist id=\"target-list\">\n ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n </datalist>\n `}\n ${action == 'data-set' || action == 'value-set'\n ? html`\n <label> <ox-i18n msgid=\"label.value\">value</ox-i18n> </label>\n <ox-input-data value-key=\"value\" .value=${value} custom-editor fullwidth></ox-input-data>\n `\n : html``}\n `\n }\n\n _getPlaceHoder(action: string) {\n switch (action) {\n case 'popup':\n case 'goto':\n return 'SCENE-100'\n case 'link-open':\n case 'link-move':\n return 'http://www.hatiolab.com/'\n default:\n return ''\n }\n }\n\n _getTargetList(action: string) {\n switch (action) {\n case 'data-toggle':\n case 'data-tristate':\n case 'data-set':\n case 'value-set':\n let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n ids.unshift('(self)')\n return ids\n case 'infoWindow':\n case 'toggle-info-window':\n return (\n (this.scene &&\n this.scene.ids\n .filter(i => {\n return this.scene!.findById(i.key).get('type') == 'info-window'\n })\n .map(i => `${i.key}`)) ||\n []\n )\n default:\n return []\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 this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import './property-event-hover';
|
|
6
6
|
import './property-event-tap';
|
|
7
|
-
import
|
|
7
|
+
import '@operato/help/ox-title-with-help.js';
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
8
9
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
10
|
import { PropertySharedStyle } from '../property-shared-style';
|
|
10
11
|
import { convert } from './value-converter';
|
|
@@ -17,7 +18,7 @@ let PropertyEvent = class PropertyEvent extends LitElement {
|
|
|
17
18
|
return html `
|
|
18
19
|
<fieldset>
|
|
19
20
|
<legend>
|
|
20
|
-
<title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></title-with-help>
|
|
21
|
+
<ox-title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></ox-title-with-help>
|
|
21
22
|
</legend>
|
|
22
23
|
|
|
23
24
|
<property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
|
|
@@ -26,7 +27,7 @@ let PropertyEvent = class PropertyEvent extends LitElement {
|
|
|
26
27
|
|
|
27
28
|
<fieldset>
|
|
28
29
|
<legend>
|
|
29
|
-
<title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></title-with-help>
|
|
30
|
+
<ox-title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></ox-title-with-help>
|
|
30
31
|
</legend>
|
|
31
32
|
|
|
32
33
|
<property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAMpC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS1C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,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;CACF,CAAA;AA/CQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAJrC,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CAgDlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-event-hover'\nimport './property-event-tap'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event')\nclass PropertyEvent extends LitElement {\n static styles = [PropertySharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></ox-title-with-help>\n </legend>\n\n <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${value.hover || {}}>\n </property-event-hover>\n </fieldset>\n\n <fieldset>\n <legend>\n <ox-title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></ox-title-with-help>\n </legend>\n\n <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>\n </fieldset>\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 this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import '@things-factory/modeller-ui/client/editors/things-editor-color';
|
|
5
|
+
import '@operato/i18n/ox-i18n.js';
|
|
5
6
|
import { LitElement } from 'lit';
|
|
6
7
|
import { Properties } from '@hatiolab/things-scene';
|
|
7
8
|
/**
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import '@things-factory/modeller-ui/client/editors/things-editor-color';
|
|
6
|
+
import '@operato/i18n/ox-i18n.js';
|
|
6
7
|
import { css, html, LitElement } from 'lit';
|
|
7
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
9
|
import { convert } from './value-converter';
|
|
@@ -22,15 +23,15 @@ let PropertyShadow = class PropertyShadow extends LitElement {
|
|
|
22
23
|
render() {
|
|
23
24
|
const value = this.value || {};
|
|
24
25
|
return html `
|
|
25
|
-
<label> <i18n
|
|
26
|
+
<label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
|
|
26
27
|
|
|
27
28
|
<input type="number" value-key="left" .value=${value.left} />
|
|
28
29
|
|
|
29
|
-
<label> <i18n
|
|
30
|
+
<label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
|
|
30
31
|
|
|
31
32
|
<input type="number" value-key="top" .value=${value.top} />
|
|
32
33
|
|
|
33
|
-
<label> <i18n
|
|
34
|
+
<label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
|
|
34
35
|
|
|
35
36
|
<input type="number" value-key="blurSize" .value=${value.blurSize} />
|
|
36
37
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,gEAAgE,CAAA;
|
|
1
|
+
{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,gEAAgE,CAAA;AACvE,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAE3C;;;;;;;;GAQG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAgDpD,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;qDAGsC,KAAK,CAAC,IAAI;;;;oDAIX,KAAK,CAAC,GAAG;;;;yDAIJ,KAAK,CAAC,QAAQ;;;;sDAIjB,KAAK,CAAC,KAAK;KAC5D,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,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;CACF,CAAA;AAxFQ,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AA9C3B,cAAc;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACZ,cAAc,CAyFlC;eAzFoB,cAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/modeller-ui/client/editors/things-editor-color'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\n\nimport { convert } from './value-converter'\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\n@customElement('property-shadow')\nexport default class PropertyShadow extends LitElement {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n\n align-self: center;\n }\n\n input[type='number'],\n things-editor-color {\n grid-column: span 7;\n }\n input[type='number'] {\n border: var(--property-sidebar-fieldset-border);\n }\n\n .icon-only-label {\n grid-column: span 3;\n background: var(--url-icon-properties-label) no-repeat;\n float: left;\n margin: 0;\n align-self: stretch;\n }\n\n .icon-only-label.color {\n background-position: 100% -500px;\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 || {}\n\n return html`\n <label> <ox-i18n msgid=\"label.shadowOffsetX\">offset-X</ox-i18n> </label>\n\n <input type=\"number\" value-key=\"left\" .value=${value.left} />\n\n <label> <ox-i18n msgid=\"label.shadowOffsetY\">offset-Y</ox-i18n> </label>\n\n <input type=\"number\" value-key=\"top\" .value=${value.top} />\n\n <label> <ox-i18n msgid=\"label.shadowSize\">Size</ox-i18n> </label>\n\n <input type=\"number\" value-key=\"blurSize\" .value=${value.blurSize} />\n\n <label class=\"icon-only-label color\"></label>\n\n <things-editor-color value-key=\"color\" .value=${value.color}> </things-editor-color>\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 this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -5,6 +5,8 @@ import { __decorate } from "tslib";
|
|
|
5
5
|
import '@operato/input/ox-input-angle.js';
|
|
6
6
|
import '@operato/input/ox-buttons-radio.js';
|
|
7
7
|
import '@material/mwc-icon';
|
|
8
|
+
import '@operato/i18n/ox-i18n.js';
|
|
9
|
+
import '@operato/help/ox-title-with-help.js';
|
|
8
10
|
import { css, html } from 'lit';
|
|
9
11
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
10
12
|
import { AbstractProperty } from '../abstract-property';
|
|
@@ -28,21 +30,21 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
28
30
|
<div class="property-grid">
|
|
29
31
|
${this._isIdentifiable(this.selected)
|
|
30
32
|
? html `
|
|
31
|
-
<label> <i18n
|
|
33
|
+
<label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
|
|
32
34
|
<input value-key="id" .value=${value.id || ''} />
|
|
33
35
|
`
|
|
34
36
|
: html ``}
|
|
35
37
|
${this._isClassIdentifiable(this.selected)
|
|
36
38
|
? html `
|
|
37
|
-
<label> <i18n
|
|
39
|
+
<label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
|
|
38
40
|
<input value-key="class" .value=${value.class || ''} />
|
|
39
41
|
`
|
|
40
42
|
: html ``}
|
|
41
43
|
${this._hasTextProperty(this.selected)
|
|
42
44
|
? html `
|
|
43
|
-
<label> <i18n
|
|
45
|
+
<label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
|
|
44
46
|
<input value-key="text" .value=${value.text || ''} />
|
|
45
|
-
<label> <i18n
|
|
47
|
+
<label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
|
|
46
48
|
<input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
|
|
47
49
|
<datalist id="format-list">
|
|
48
50
|
<option value="#,###."></option>
|
|
@@ -58,10 +60,10 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
58
60
|
? html `
|
|
59
61
|
<div class="checkbox-row">
|
|
60
62
|
<input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
|
|
61
|
-
<label for="checkbox-hidden"> <i18n
|
|
63
|
+
<label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
|
|
62
64
|
|
|
63
65
|
<input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
|
|
64
|
-
<label for="checkbox-locked"> <i18n
|
|
66
|
+
<label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
|
|
65
67
|
</div>
|
|
66
68
|
`
|
|
67
69
|
: html ``}
|
|
@@ -72,19 +74,19 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
72
74
|
? html `
|
|
73
75
|
<fieldset class="icon-label unit ratio">
|
|
74
76
|
<legend>
|
|
75
|
-
<title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</title-with-help>
|
|
77
|
+
<ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
|
|
76
78
|
</legend>
|
|
77
79
|
|
|
78
80
|
<div class="property-grid">
|
|
79
|
-
<label class="width"> <i18n
|
|
81
|
+
<label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
|
|
80
82
|
<input type="number" value-key="bounds.width" .value=${(_a = this.bounds) === null || _a === void 0 ? void 0 : _a.width} />
|
|
81
|
-
<label class="height"> <i18n
|
|
83
|
+
<label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
|
|
82
84
|
<input type="number" value-key="bounds.height" .value=${(_b = this.bounds) === null || _b === void 0 ? void 0 : _b.height} />
|
|
83
85
|
|
|
84
86
|
${this.selected.length && this.selected[0].isRootModel()
|
|
85
87
|
? html ``
|
|
86
88
|
: html `
|
|
87
|
-
<label class="rotate"> <i18n
|
|
89
|
+
<label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
|
|
88
90
|
<ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
|
|
89
91
|
`}
|
|
90
92
|
</div>
|
|
@@ -95,7 +97,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
95
97
|
? html `
|
|
96
98
|
<fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
|
|
97
99
|
<legend>
|
|
98
|
-
<title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</title-with-help>
|
|
100
|
+
<ox-title-with-help topic="board-modeller/shapes/3dish" msgid="label.3dish">3D</ox-title-with-help>
|
|
99
101
|
<mwc-icon
|
|
100
102
|
@click=${(e) => {
|
|
101
103
|
this._3dExpanded = !this._3dExpanded;
|
|
@@ -105,18 +107,18 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
105
107
|
</legend>
|
|
106
108
|
|
|
107
109
|
<div class="property-grid">
|
|
108
|
-
<label class="zPos"> <i18n
|
|
110
|
+
<label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
|
|
109
111
|
<input type="number" value-key="zPos" .value=${value.zPos} />
|
|
110
|
-
<label class="depth"> <i18n
|
|
112
|
+
<label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
|
|
111
113
|
<input type="number" value-key="depth" .value=${value.depth} />
|
|
112
114
|
|
|
113
|
-
<label class="rotationX"> <i18n
|
|
115
|
+
<label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
|
|
114
116
|
<ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
|
|
115
117
|
|
|
116
|
-
<label class="rotationY"> <i18n
|
|
118
|
+
<label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
|
|
117
119
|
<ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
|
|
118
120
|
|
|
119
|
-
<label class="rotationZ"> <i18n
|
|
121
|
+
<label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
|
|
120
122
|
<ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
|
|
121
123
|
</div>
|
|
122
124
|
</fieldset>
|
|
@@ -126,13 +128,13 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
126
128
|
? html `
|
|
127
129
|
<fieldset>
|
|
128
130
|
<legend>
|
|
129
|
-
<title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
|
|
130
|
-
>text box</title-with-help
|
|
131
|
+
<ox-title-with-help topic="board-modeller/shapes/text-box" msgid="label.text-box"
|
|
132
|
+
>text box</ox-title-with-help
|
|
131
133
|
>
|
|
132
134
|
</legend>
|
|
133
135
|
|
|
134
136
|
<div class="property-grid">
|
|
135
|
-
<label> <i18n
|
|
137
|
+
<label> <ox-i18n msgid="label.horizontal">horizontal</ox-i18n> </label>
|
|
136
138
|
<ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
|
|
137
139
|
<div data-value="left"></div>
|
|
138
140
|
<div data-value="center"></div>
|
|
@@ -140,7 +142,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
140
142
|
<div data-value="justify"></div>
|
|
141
143
|
</ox-buttons-radio>
|
|
142
144
|
|
|
143
|
-
<label> <i18n
|
|
145
|
+
<label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </label>
|
|
144
146
|
<ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
|
|
145
147
|
<div data-value="top"></div>
|
|
146
148
|
<div data-value="middle"></div>
|
|
@@ -149,10 +151,10 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
149
151
|
|
|
150
152
|
<div class="checkbox-row">
|
|
151
153
|
<input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
|
|
152
|
-
<label for="checkbox-textwrap"> <i18n
|
|
154
|
+
<label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
|
|
153
155
|
</div>
|
|
154
156
|
|
|
155
|
-
<label> <i18n
|
|
157
|
+
<label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
|
|
156
158
|
<table class="box-padding">
|
|
157
159
|
<tr>
|
|
158
160
|
<td class="slide1"></td>
|
|
@@ -183,13 +185,13 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
183
185
|
? html `
|
|
184
186
|
<fieldset class="icon-label">
|
|
185
187
|
<legend>
|
|
186
|
-
<title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
|
|
187
|
-
>Viewer Option</title-with-help
|
|
188
|
+
<ox-title-with-help topic="board-modeller/shapes/viewer-option" msgid="label.viewer-option"
|
|
189
|
+
>Viewer Option</ox-title-with-help
|
|
188
190
|
>
|
|
189
191
|
</legend>
|
|
190
192
|
|
|
191
193
|
<div class="property-grid">
|
|
192
|
-
<label><i18n
|
|
194
|
+
<label><ox-i18n msgid="label.fit">Fit</ox-i18n></label>
|
|
193
195
|
<select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
|
|
194
196
|
<option value="none">none</option>
|
|
195
197
|
<option value="ratio" selected>ratio</option>
|
|
@@ -201,13 +203,13 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
201
203
|
</fieldset>
|
|
202
204
|
<fieldset class="icon-label">
|
|
203
205
|
<legend>
|
|
204
|
-
<title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
|
|
205
|
-
>Print Option</title-with-help
|
|
206
|
+
<ox-title-with-help topic="board-modeller/shapes/print-option" msgid="label.label-print"
|
|
207
|
+
>Print Option</ox-title-with-help
|
|
206
208
|
>
|
|
207
209
|
</legend>
|
|
208
210
|
|
|
209
211
|
<div class="property-grid">
|
|
210
|
-
<label class="rotate"><i18n
|
|
212
|
+
<label class="rotate"><ox-i18n msgid="label.label-rotation">Label Rotation</ox-i18n></label>
|
|
211
213
|
<select value-key="labelRotation" .value=${value.labelRotation || 'N'}>
|
|
212
214
|
<option value="N" selected>0°</option>
|
|
213
215
|
<option value="B">90°</option>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/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/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\n\n@customElement('property-shape')\nclass PropertyShapes extends AbstractProperty {\n static styles = [\n PropertySharedStyle,\n BoxPaddingEditorStyles,\n css`\n fieldset[collapsable] legend {\n box-sizing: border-box;\n width: 100%;\n }\n\n fieldset[collapsable] legend mwc-icon {\n float: right;\n font-size: medium;\n margin: 0;\n cursor: pointer;\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n `,\n css`\n .icon-label label {\n background: var(--url-icon-properties-label) 7px -900px no-repeat;\n }\n\n .icon-label label.width {\n background-position: 7px -96px;\n }\n\n .icon-label label.height {\n background-position: 7px 4px;\n }\n\n .icon-label label.rotate {\n background-position: 7px -198px;\n }\n\n .icon-label label.twidth {\n background-position: 7px -296px;\n }\n\n .icon-label label.theight {\n background-position: 7px -396px;\n }\n\n .icon-label label.zPos {\n background-position: 5px -1098px;\n }\n\n .icon-label label.depth {\n background-position: 5px -1198px;\n }\n\n .icon-label label.rotationX {\n background-position: 5px -1296px;\n }\n\n .icon-label label.rotationY {\n background-position: 5px -1396px;\n }\n\n .icon-label label.rotationZ {\n background-position: 5px -1496px;\n }\n\n ox-buttons-radio > * {\n width: 30px;\n height: 25px;\n min-width: initial;\n margin: 0 4px 0 0;\n padding: 0;\n border-radius: 0;\n display: inline-block;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div {\n background: var(--url-icon-properties) no-repeat;\n }\n\n ox-buttons-radio div[data-value='left'] {\n background-position: 50% 3px;\n }\n\n ox-buttons-radio div[data-value='center'] {\n background-position: 50% -47px;\n }\n\n ox-buttons-radio div[data-value='right'] {\n background-position: 50% -97px;\n }\n\n ox-buttons-radio div[data-value='justify'] {\n background-position: 50% -147px;\n }\n\n ox-buttons-radio div[data-value='top'] {\n background-position: 50% -197px;\n }\n\n ox-buttons-radio div[data-value='middle'] {\n background-position: 50% -193px;\n }\n\n ox-buttons-radio div[data-value='bottom'] {\n background-position: 50% -188px;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n `\n ]\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\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <fieldset>\n <div class=\"property-grid\">\n ${this._isIdentifiable(this.selected)\n ? html`\n <label> <i18n-msg msgid=\"label.id\">ID</i18n-msg> </label>\n <input value-key=\"id\" .value=${value.id || ''} />\n `\n : html``}\n ${this._isClassIdentifiable(this.selected)\n ? html`\n <label> <i18n-msg msgid=\"label.class\">Class</i18n-msg> </label>\n <input value-key=\"class\" .value=${value.class || ''} />\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <label> <i18n-msg msgid=\"label.text\">Text</i18n-msg> </label>\n <input value-key=\"text\" .value=${value.text || ''} />\n <label> <i18n-msg msgid=\"label.text-format\">Text Format</i18n-msg> </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 <div class=\"checkbox-row\">\n <input id=\"checkbox-hidden\" value-key=\"hidden\" type=\"checkbox\" .checked=${value.hidden} />\n <label for=\"checkbox-hidden\"> <i18n-msg msgid=\"label.item-hidden\">Item Hidden</i18n-msg> </label>\n\n <input id=\"checkbox-locked\" value-key=\"locked\" type=\"checkbox\" .checked=${value.locked} />\n <label for=\"checkbox-locked\"> <i18n-msg msgid=\"label.locked\">Locked</i18n-msg> </label>\n </div>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? html`\n <fieldset class=\"icon-label unit ratio\">\n <legend>\n <title-with-help topic=\"board-modeller/shapes/size\" msgid=\"label.size\">size</title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"width\"> <i18n-msg msgid=\"label.width\">width</i18n-msg> </label>\n <input type=\"number\" value-key=\"bounds.width\" .value=${this.bounds?.width} />\n <label class=\"height\"> <i18n-msg msgid=\"label.height\">height</i18n-msg> </label>\n <input type=\"number\" value-key=\"bounds.height\" .value=${this.bounds?.height} />\n\n ${this.selected.length && this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\"> <i18n-msg msgid=\"label.rotate\">rotate</i18n-msg> </label>\n <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n : html``}\n ${this._is3dish(this.selected)\n ? html`\n <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n <legend>\n <title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</title-with-help>\n <mwc-icon\n @click=${(e: Event) => {\n this._3dExpanded = !this._3dExpanded\n }}\n >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"zPos\"> <i18n-msg msgid=\"label.z-pos\">pos. Z</i18n-msg> </label>\n <input type=\"number\" value-key=\"zPos\" .value=${value.zPos} />\n <label class=\"depth\"> <i18n-msg msgid=\"label.depth\">depth</i18n-msg> </label>\n <input type=\"number\" value-key=\"depth\" .value=${value.depth} />\n\n <label class=\"rotationX\"> <i18n-msg msgid=\"label.rotation-x\">rot. X</i18n-msg> </label>\n <ox-input-angle value-key=\"rotationX\" .radian=${value.rotationX}> </ox-input-angle>\n\n <label class=\"rotationY\"> <i18n-msg msgid=\"label.rotation-y\">rot. Y</i18n-msg> </label>\n <ox-input-angle value-key=\"rotationY\" .radian=${value.rotationY}> </ox-input-angle>\n\n <label class=\"rotationZ\"> <i18n-msg msgid=\"label.rotation-z\">rot. Z</i18n-msg> </label>\n <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n </div>\n </fieldset>\n `\n : html``}\n ${this._hasTextProperty(this.selected)\n ? html`\n <fieldset>\n <legend>\n <title-with-help topic=\"board-modeller/shapes/text-box\" msgid=\"label.text-box\"\n >text box</title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <i18n-msg msgid=\"label.horizontal\">horizontal</i18n-msg> </label>\n <ox-buttons-radio value-key=\"textAlign\" .value=${value.textAlign}>\n <div data-value=\"left\"></div>\n <div data-value=\"center\"></div>\n <div data-value=\"right\"></div>\n <div data-value=\"justify\"></div>\n </ox-buttons-radio>\n\n <label> <i18n-msg msgid=\"label.vertical\">vertical</i18n-msg> </label>\n <ox-buttons-radio value-key=\"textBaseline\" .value=${value.textBaseline}>\n <div data-value=\"top\"></div>\n <div data-value=\"middle\"></div>\n <div data-value=\"bottom\"></div>\n </ox-buttons-radio>\n\n <div class=\"checkbox-row\">\n <input id=\"checkbox-textwrap\" type=\"checkbox\" value-key=\"textWrap\" .checked=${value.textWrap} />\n <label for=\"checkbox-textwrap\"> <i18n-msg msgid=\"label.text-wrap\">Text Wrap</i18n-msg> </label>\n </div>\n\n <label> <i18n-msg msgid=\"label.padding\">padding</i18n-msg> </label>\n <table class=\"box-padding\">\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} />\n <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft} />\n <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight} />\n <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom} />\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 <title-with-help topic=\"board-modeller/shapes/viewer-option\" msgid=\"label.viewer-option\"\n >Viewer Option</title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label><i18n-msg msgid=\"label.fit\">Fit</i18n-msg></label>\n <select value-key=\"fitMode\" .value=${value.fitMode || 'ratio'}>\n <option value=\"none\">none</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 <title-with-help topic=\"board-modeller/shapes/print-option\" msgid=\"label.label-print\"\n >Print Option</title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label class=\"rotate\"><i18n-msg msgid=\"label.label-rotation\">Label Rotation</i18n-msg></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"]}
|
|
1
|
+
{"version":3,"file":"shapes.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/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/mwc-icon'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { BOUNDS, Component, Properties } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { BoxPaddingEditorStyles } from './box-padding-editor-styles'\n\n@customElement('property-shape')\nclass PropertyShapes extends AbstractProperty {\n static styles = [\n PropertySharedStyle,\n BoxPaddingEditorStyles,\n css`\n fieldset[collapsable] legend {\n box-sizing: border-box;\n width: 100%;\n }\n\n fieldset[collapsable] legend mwc-icon {\n float: right;\n font-size: medium;\n margin: 0;\n cursor: pointer;\n }\n\n fieldset[collapsable][collapsed] > :not(legend) {\n display: none;\n }\n `,\n css`\n .icon-label label {\n background: var(--url-icon-properties-label) 7px -900px no-repeat;\n }\n\n .icon-label label.width {\n background-position: 7px -96px;\n }\n\n .icon-label label.height {\n background-position: 7px 4px;\n }\n\n .icon-label label.rotate {\n background-position: 7px -198px;\n }\n\n .icon-label label.twidth {\n background-position: 7px -296px;\n }\n\n .icon-label label.theight {\n background-position: 7px -396px;\n }\n\n .icon-label label.zPos {\n background-position: 5px -1098px;\n }\n\n .icon-label label.depth {\n background-position: 5px -1198px;\n }\n\n .icon-label label.rotationX {\n background-position: 5px -1296px;\n }\n\n .icon-label label.rotationY {\n background-position: 5px -1396px;\n }\n\n .icon-label label.rotationZ {\n background-position: 5px -1496px;\n }\n\n ox-buttons-radio > * {\n width: 30px;\n height: 25px;\n min-width: initial;\n margin: 0 4px 0 0;\n padding: 0;\n border-radius: 0;\n display: inline-block;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div {\n background: var(--url-icon-properties) no-repeat;\n }\n\n ox-buttons-radio div[data-value='left'] {\n background-position: 50% 3px;\n }\n\n ox-buttons-radio div[data-value='center'] {\n background-position: 50% -47px;\n }\n\n ox-buttons-radio div[data-value='right'] {\n background-position: 50% -97px;\n }\n\n ox-buttons-radio div[data-value='justify'] {\n background-position: 50% -147px;\n }\n\n ox-buttons-radio div[data-value='top'] {\n background-position: 50% -197px;\n }\n\n ox-buttons-radio div[data-value='middle'] {\n background-position: 50% -193px;\n }\n\n ox-buttons-radio div[data-value='bottom'] {\n background-position: 50% -188px;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n `\n ]\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\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\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 <div class=\"checkbox-row\">\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 </div>\n `\n : html``}\n </div>\n </fieldset>\n\n ${!this._isLine(this.selected)\n ? html`\n <fieldset class=\"icon-label unit ratio\">\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 class=\"width\"> <ox-i18n msgid=\"label.width\">width</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.width\" .value=${this.bounds?.width} />\n <label class=\"height\"> <ox-i18n msgid=\"label.height\">height</ox-i18n> </label>\n <input type=\"number\" value-key=\"bounds.height\" .value=${this.bounds?.height} />\n\n ${this.selected.length && this.selected[0].isRootModel()\n ? html``\n : html`\n <label class=\"rotate\"> <ox-i18n msgid=\"label.rotate\">rotate</ox-i18n> </label>\n <ox-input-angle value-key=\"rotation\" .radian=${value.rotation}> </ox-input-angle>\n `}\n </div>\n </fieldset>\n `\n : html``}\n ${this._is3dish(this.selected)\n ? html`\n <fieldset class=\"icon-label unit ratio\" collapsable ?collapsed=${!this._3dExpanded}>\n <legend>\n <ox-title-with-help topic=\"board-modeller/shapes/3dish\" msgid=\"label.3dish\">3D</ox-title-with-help>\n <mwc-icon\n @click=${(e: Event) => {\n this._3dExpanded = !this._3dExpanded\n }}\n >${this._3dExpanded ? 'expand_less' : 'expand_more'}</mwc-icon\n >\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\" .radian=${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\" .radian=${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\" .radian=${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 <div data-value=\"left\"></div>\n <div data-value=\"center\"></div>\n <div data-value=\"right\"></div>\n <div data-value=\"justify\"></div>\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 <div data-value=\"top\"></div>\n <div data-value=\"middle\"></div>\n <div data-value=\"bottom\"></div>\n </ox-buttons-radio>\n\n <div class=\"checkbox-row\">\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 </div>\n\n <label> <ox-i18n msgid=\"label.padding\">padding</ox-i18n> </label>\n <table class=\"box-padding\">\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} />\n <input type=\"number\" value-key=\"paddingLeft\" .value=${value.paddingLeft} />\n <input type=\"number\" value-key=\"paddingRight\" .value=${value.paddingRight} />\n <input type=\"number\" value-key=\"paddingBottom\" .value=${value.paddingBottom} />\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=\"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"]}
|