@operato/board 0.3.20 → 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 +9 -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 +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 +12 -11
- 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
|
@@ -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';
|
|
@@ -7,6 +7,7 @@ import '@things-factory/help';
|
|
|
7
7
|
import '@things-factory/modeller-ui/client/editors/things-editor-color';
|
|
8
8
|
import '@things-factory/modeller-ui/client/editors/things-editor-color-style';
|
|
9
9
|
import '@things-factory/modeller-ui/client/editors/things-editor-font-selector';
|
|
10
|
+
import '@operato/i18n/ox-i18n.js';
|
|
10
11
|
import { css, html } from 'lit';
|
|
11
12
|
import { customElement, property } from 'lit/decorators.js';
|
|
12
13
|
import { AbstractProperty } from '../abstract-property';
|
|
@@ -40,7 +41,7 @@ let PropertyStyles = class PropertyStyles extends AbstractProperty {
|
|
|
40
41
|
|
|
41
42
|
<div class="property-grid">
|
|
42
43
|
<label class="property-full-label">
|
|
43
|
-
<i18n
|
|
44
|
+
<ox-i18n msgid="label.font-family">Font Family</ox-i18n>
|
|
44
45
|
</label>
|
|
45
46
|
|
|
46
47
|
<things-editor-font-selector
|
|
@@ -92,7 +93,7 @@ let PropertyStyles = class PropertyStyles extends AbstractProperty {
|
|
|
92
93
|
</things-editor-color>
|
|
93
94
|
|
|
94
95
|
<label class="property-full-label">
|
|
95
|
-
<i18n
|
|
96
|
+
<ox-i18n msgid="label.line-type">line type</ox-i18n>
|
|
96
97
|
</label>
|
|
97
98
|
<paper-dropdown-menu no-label-float="true" class="property-full-input line-type solid">
|
|
98
99
|
<!-- solid는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
|
|
@@ -115,26 +116,26 @@ let PropertyStyles = class PropertyStyles extends AbstractProperty {
|
|
|
115
116
|
</paper-dropdown-menu>
|
|
116
117
|
|
|
117
118
|
<label class="property-full-label">
|
|
118
|
-
<i18n
|
|
119
|
+
<ox-i18n msgid="label.cap-type">cap type</ox-i18n>
|
|
119
120
|
</label>
|
|
120
121
|
<select class="property-full-input select-content" value-key="lineCap" .value=${lineCap}>
|
|
121
|
-
<option value="butt"><i18n
|
|
122
|
-
<option value="round"><i18n
|
|
122
|
+
<option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
|
|
123
|
+
<option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
|
|
123
124
|
</select>
|
|
124
125
|
|
|
125
126
|
<label class="property-full-label">
|
|
126
|
-
<i18n
|
|
127
|
+
<ox-i18n msgid="label.join-type">join type</ox-i18n>
|
|
127
128
|
</label>
|
|
128
129
|
<select class="property-full-input select-content" value-key="lineJoin" .value=${lineJoin}>
|
|
129
|
-
<option value="miter"><i18n
|
|
130
|
-
<option value="round"><i18n
|
|
131
|
-
<option value="bevel"><i18n
|
|
130
|
+
<option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
|
|
131
|
+
<option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
|
|
132
|
+
<option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
|
|
132
133
|
</select>
|
|
133
134
|
|
|
134
135
|
${this._isLine(this.selected)
|
|
135
136
|
? html `
|
|
136
137
|
<label class="property-full-label">
|
|
137
|
-
<i18n
|
|
138
|
+
<ox-i18n msgid="label.begin-type">begin type</ox-i18n>
|
|
138
139
|
</label>
|
|
139
140
|
<paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-no">
|
|
140
141
|
<!-- begin-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
|
|
@@ -155,7 +156,7 @@ let PropertyStyles = class PropertyStyles extends AbstractProperty {
|
|
|
155
156
|
</paper-dropdown-menu>
|
|
156
157
|
|
|
157
158
|
<label class="property-full-label">
|
|
158
|
-
<i18n
|
|
159
|
+
<ox-i18n msgid="label.begin-size">begin size</ox-i18n>
|
|
159
160
|
</label>
|
|
160
161
|
<paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type begin-size1">
|
|
161
162
|
<!-- begin-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
|
|
@@ -179,7 +180,7 @@ let PropertyStyles = class PropertyStyles extends AbstractProperty {
|
|
|
179
180
|
</paper-dropdown-menu>
|
|
180
181
|
|
|
181
182
|
<label class="property-full-label">
|
|
182
|
-
<i18n
|
|
183
|
+
<ox-i18n msgid="label.end-type">end type</ox-i18n>
|
|
183
184
|
</label>
|
|
184
185
|
<paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-no">
|
|
185
186
|
<!-- end-no는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
|
|
@@ -200,7 +201,7 @@ let PropertyStyles = class PropertyStyles extends AbstractProperty {
|
|
|
200
201
|
</paper-dropdown-menu>
|
|
201
202
|
|
|
202
203
|
<label class="property-full-label">
|
|
203
|
-
<i18n
|
|
204
|
+
<ox-i18n msgid="label.end-size">end size</ox-i18n>
|
|
204
205
|
</label>
|
|
205
206
|
<paper-dropdown-menu no-label-float="true" class="property-full-input arrow-type end-size1">
|
|
206
207
|
<!-- end-size1는 선택된 항목 보여주기위한 class로 하위 paper-item의 class와 동일하게 -->
|