@operato/board 0.3.17 → 0.3.21
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 +34 -0
- package/custom-elements.json +63 -63
- 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 +1 -0
- package/dist/src/modeller/property-sidebar/data-binding/data-binding.js +8 -7
- package/dist/src/modeller/property-sidebar/data-binding/data-binding.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/effects.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/effects/effects.js +3 -2
- 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-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-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 +1 -0
- package/dist/src/modeller/property-sidebar/shapes/shapes.js +21 -20
- package/dist/src/modeller/property-sidebar/shapes/shapes.js.map +1 -1
- package/dist/src/modeller/property-sidebar/styles/styles.d.ts +1 -0
- package/dist/src/modeller/property-sidebar/styles/styles.js +14 -13
- package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -12
- package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts +9 -8
- package/src/modeller/property-sidebar/data-binding/data-binding.ts +8 -7
- package/src/modeller/property-sidebar/effects/effects.ts +5 -3
- package/src/modeller/property-sidebar/effects/property-animation.ts +11 -10
- 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-shadow.ts +4 -3
- package/src/modeller/property-sidebar/shapes/shapes.ts +21 -20
- package/src/modeller/property-sidebar/styles/styles.ts +14 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.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/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/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n <property-animation .value=${animation}>\n </property-animation>\n*/\n\n@customElement('property-animation')\nexport default class PropertyAnimation 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 const value = this.value || {}\n\n return html`\n <label>Animation Type</label>\n <select value-key=\"type\" .value=${value.type}>\n <option value=\"\">None</option>\n <option value=\"rotation\">Rotation</option>\n <option value=\"vibration\">Vibration</option>\n <option value=\"heartbeat\">Heartbeat</option>\n <option value=\"moving\">Moving</option>\n <option value=\"fade\">Fade</option>\n <option value=\"outline\">Outline</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.waiting-time\">waiting time</ox-i18n> </label>\n <input type=\"number\" value-key=\"delay\" .value=${value.delay} placeholder=\"ms\" />\n\n <label> <ox-i18n msgid=\"label.duration\">duration</ox-i18n> </label>\n <input type=\"number\" value-key=\"duration\" .value=${value.duration} placeholder=\"ms\" />\n\n ${value.type == 'rotation' || value.type == 'vibration'\n ? html`\n <label> <ox-i18n msgid=\"label.theta\">theta</ox-i18n> </label>\n <ox-input-angle value-key=\"theta\" .radian=${value.theta}> </ox-input-angle>\n `\n : html``}\n ${value.type == 'heartbeat'\n ? html`\n <label> <ox-i18n msgid=\"label.scale\">scale</ox-i18n> </label>\n <input type=\"number\" value-key=\"scale\" .value=${value.scale} />\n `\n : html``}\n ${value.type == 'moving'\n ? html`\n <label> <ox-i18n msgid=\"label.x-axes\">X-axes</ox-i18n> </label>\n <input type=\"number\" value-key=\"x\" .value=${value.x} />\n\n <label> <ox-i18n msgid=\"label.y-axes\">Y-axes</ox-i18n> </label>\n <input type=\"number\" value-key=\"y\" .value=${value.y} />\n `\n : html``}\n ${value.type == 'fade'\n ? html`\n <label> <ox-i18n msgid=\"label.start-alpha\">start alpha</ox-i18n> </label>\n <input type=\"number\" value-key=\"startAlpha\" .value=${value.startAlpha} />\n\n <label> <ox-i18n msgid=\"label.end-alpha\">end alpha</ox-i18n> </label>\n <input type=\"number\" value-key=\"endAlpha\" .value=${value.endAlpha} />\n `\n : html``}\n ${value.type == 'outline'\n ? html`\n <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n <input value-key=\"rideOn\" .value=${value.rideOn || ''} list=\"target-list\" />\n <datalist id=\"target-list\">\n ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n </datalist>\n `\n : html``}\n\n <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${value.repeat} />\n <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.repeat\">repeat</ox-i18n> </label>\n\n <label>delta</label>\n <select value-key=\"delta\" .value=${value.delta}>\n <option value=\"linear\">linear</option>\n <option value=\"quad\">quad</option>\n <option value=\"circ\">circ</option>\n <option value=\"back\">back</option>\n <option value=\"bounce\">bounce</option>\n <option value=\"elastic\">elastic</option>\n </select>\n\n <label>ease</label>\n <select value-key=\"ease\" .value=${value.ease}>\n <option value=\"in\">in</option>\n <option value=\"out\">out</option>\n <option value=\"inout\">inout</option>\n </select>\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';
|
|
@@ -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"]}
|
|
@@ -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,7 @@ 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';
|
|
8
9
|
import { css, html } from 'lit';
|
|
9
10
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
10
11
|
import { AbstractProperty } from '../abstract-property';
|
|
@@ -28,21 +29,21 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
28
29
|
<div class="property-grid">
|
|
29
30
|
${this._isIdentifiable(this.selected)
|
|
30
31
|
? html `
|
|
31
|
-
<label> <i18n
|
|
32
|
+
<label> <ox-i18n msgid="label.id">ID</ox-i18n> </label>
|
|
32
33
|
<input value-key="id" .value=${value.id || ''} />
|
|
33
34
|
`
|
|
34
35
|
: html ``}
|
|
35
36
|
${this._isClassIdentifiable(this.selected)
|
|
36
37
|
? html `
|
|
37
|
-
<label> <i18n
|
|
38
|
+
<label> <ox-i18n msgid="label.class">Class</ox-i18n> </label>
|
|
38
39
|
<input value-key="class" .value=${value.class || ''} />
|
|
39
40
|
`
|
|
40
41
|
: html ``}
|
|
41
42
|
${this._hasTextProperty(this.selected)
|
|
42
43
|
? html `
|
|
43
|
-
<label> <i18n
|
|
44
|
+
<label> <ox-i18n msgid="label.text">Text</ox-i18n> </label>
|
|
44
45
|
<input value-key="text" .value=${value.text || ''} />
|
|
45
|
-
<label> <i18n
|
|
46
|
+
<label> <ox-i18n msgid="label.text-format">Text Format</ox-i18n> </label>
|
|
46
47
|
<input value-key="textFormat" .value=${value.textFormat || ''} list="format-list" />
|
|
47
48
|
<datalist id="format-list">
|
|
48
49
|
<option value="#,###."></option>
|
|
@@ -58,10 +59,10 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
58
59
|
? html `
|
|
59
60
|
<div class="checkbox-row">
|
|
60
61
|
<input id="checkbox-hidden" value-key="hidden" type="checkbox" .checked=${value.hidden} />
|
|
61
|
-
<label for="checkbox-hidden"> <i18n
|
|
62
|
+
<label for="checkbox-hidden"> <ox-i18n msgid="label.item-hidden">Item Hidden</ox-i18n> </label>
|
|
62
63
|
|
|
63
64
|
<input id="checkbox-locked" value-key="locked" type="checkbox" .checked=${value.locked} />
|
|
64
|
-
<label for="checkbox-locked"> <i18n
|
|
65
|
+
<label for="checkbox-locked"> <ox-i18n msgid="label.locked">Locked</ox-i18n> </label>
|
|
65
66
|
</div>
|
|
66
67
|
`
|
|
67
68
|
: html ``}
|
|
@@ -76,15 +77,15 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
76
77
|
</legend>
|
|
77
78
|
|
|
78
79
|
<div class="property-grid">
|
|
79
|
-
<label class="width"> <i18n
|
|
80
|
+
<label class="width"> <ox-i18n msgid="label.width">width</ox-i18n> </label>
|
|
80
81
|
<input type="number" value-key="bounds.width" .value=${(_a = this.bounds) === null || _a === void 0 ? void 0 : _a.width} />
|
|
81
|
-
<label class="height"> <i18n
|
|
82
|
+
<label class="height"> <ox-i18n msgid="label.height">height</ox-i18n> </label>
|
|
82
83
|
<input type="number" value-key="bounds.height" .value=${(_b = this.bounds) === null || _b === void 0 ? void 0 : _b.height} />
|
|
83
84
|
|
|
84
85
|
${this.selected.length && this.selected[0].isRootModel()
|
|
85
86
|
? html ``
|
|
86
87
|
: html `
|
|
87
|
-
<label class="rotate"> <i18n
|
|
88
|
+
<label class="rotate"> <ox-i18n msgid="label.rotate">rotate</ox-i18n> </label>
|
|
88
89
|
<ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
|
|
89
90
|
`}
|
|
90
91
|
</div>
|
|
@@ -105,18 +106,18 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
105
106
|
</legend>
|
|
106
107
|
|
|
107
108
|
<div class="property-grid">
|
|
108
|
-
<label class="zPos"> <i18n
|
|
109
|
+
<label class="zPos"> <ox-i18n msgid="label.z-pos">pos. Z</ox-i18n> </label>
|
|
109
110
|
<input type="number" value-key="zPos" .value=${value.zPos} />
|
|
110
|
-
<label class="depth"> <i18n
|
|
111
|
+
<label class="depth"> <ox-i18n msgid="label.depth">depth</ox-i18n> </label>
|
|
111
112
|
<input type="number" value-key="depth" .value=${value.depth} />
|
|
112
113
|
|
|
113
|
-
<label class="rotationX"> <i18n
|
|
114
|
+
<label class="rotationX"> <ox-i18n msgid="label.rotation-x">rot. X</ox-i18n> </label>
|
|
114
115
|
<ox-input-angle value-key="rotationX" .radian=${value.rotationX}> </ox-input-angle>
|
|
115
116
|
|
|
116
|
-
<label class="rotationY"> <i18n
|
|
117
|
+
<label class="rotationY"> <ox-i18n msgid="label.rotation-y">rot. Y</ox-i18n> </label>
|
|
117
118
|
<ox-input-angle value-key="rotationY" .radian=${value.rotationY}> </ox-input-angle>
|
|
118
119
|
|
|
119
|
-
<label class="rotationZ"> <i18n
|
|
120
|
+
<label class="rotationZ"> <ox-i18n msgid="label.rotation-z">rot. Z</ox-i18n> </label>
|
|
120
121
|
<ox-input-angle value-key="rotation" .radian=${value.rotation}> </ox-input-angle>
|
|
121
122
|
</div>
|
|
122
123
|
</fieldset>
|
|
@@ -132,7 +133,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
132
133
|
</legend>
|
|
133
134
|
|
|
134
135
|
<div class="property-grid">
|
|
135
|
-
<label> <i18n
|
|
136
|
+
<label> <ox-i18n msgid="label.horizontal">horizontal</ox-i18n> </label>
|
|
136
137
|
<ox-buttons-radio value-key="textAlign" .value=${value.textAlign}>
|
|
137
138
|
<div data-value="left"></div>
|
|
138
139
|
<div data-value="center"></div>
|
|
@@ -140,7 +141,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
140
141
|
<div data-value="justify"></div>
|
|
141
142
|
</ox-buttons-radio>
|
|
142
143
|
|
|
143
|
-
<label> <i18n
|
|
144
|
+
<label> <ox-i18n msgid="label.vertical">vertical</ox-i18n> </label>
|
|
144
145
|
<ox-buttons-radio value-key="textBaseline" .value=${value.textBaseline}>
|
|
145
146
|
<div data-value="top"></div>
|
|
146
147
|
<div data-value="middle"></div>
|
|
@@ -149,10 +150,10 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
149
150
|
|
|
150
151
|
<div class="checkbox-row">
|
|
151
152
|
<input id="checkbox-textwrap" type="checkbox" value-key="textWrap" .checked=${value.textWrap} />
|
|
152
|
-
<label for="checkbox-textwrap"> <i18n
|
|
153
|
+
<label for="checkbox-textwrap"> <ox-i18n msgid="label.text-wrap">Text Wrap</ox-i18n> </label>
|
|
153
154
|
</div>
|
|
154
155
|
|
|
155
|
-
<label> <i18n
|
|
156
|
+
<label> <ox-i18n msgid="label.padding">padding</ox-i18n> </label>
|
|
156
157
|
<table class="box-padding">
|
|
157
158
|
<tr>
|
|
158
159
|
<td class="slide1"></td>
|
|
@@ -189,7 +190,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
189
190
|
</legend>
|
|
190
191
|
|
|
191
192
|
<div class="property-grid">
|
|
192
|
-
<label><i18n
|
|
193
|
+
<label><ox-i18n msgid="label.fit">Fit</ox-i18n></label>
|
|
193
194
|
<select value-key="fitMode" .value=${value.fitMode || 'ratio'}>
|
|
194
195
|
<option value="none">none</option>
|
|
195
196
|
<option value="ratio" selected>ratio</option>
|
|
@@ -207,7 +208,7 @@ let PropertyShapes = class PropertyShapes extends AbstractProperty {
|
|
|
207
208
|
</legend>
|
|
208
209
|
|
|
209
210
|
<div class="property-grid">
|
|
210
|
-
<label class="rotate"><i18n
|
|
211
|
+
<label class="rotate"><ox-i18n msgid="label.label-rotation">Label Rotation</ox-i18n></label>
|
|
211
212
|
<select value-key="labelRotation" .value=${value.labelRotation || 'N'}>
|
|
212
213
|
<option value="N" selected>0°</option>
|
|
213
214
|
<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'\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 <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\"> <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 <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\"> <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 <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> <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 <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><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 <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\"><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"]}
|
|
@@ -6,3 +6,4 @@ import '@things-factory/help';
|
|
|
6
6
|
import '@things-factory/modeller-ui/client/editors/things-editor-color';
|
|
7
7
|
import '@things-factory/modeller-ui/client/editors/things-editor-color-style';
|
|
8
8
|
import '@things-factory/modeller-ui/client/editors/things-editor-font-selector';
|
|
9
|
+
import '@operato/i18n/ox-i18n.js';
|