@operato/board 0.2.47 → 0.2.48
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 +19 -0
- package/custom-elements.json +1554 -1494
- package/dist/src/modeller/component-toolbar/component-detail.d.ts +4 -0
- package/dist/src/modeller/component-toolbar/component-detail.js +56 -0
- package/dist/src/modeller/component-toolbar/component-detail.js.map +1 -0
- package/dist/src/modeller/component-toolbar/component-menu.d.ts +1 -1
- package/dist/src/modeller/component-toolbar/component-menu.js +57 -11
- package/dist/src/modeller/component-toolbar/component-menu.js.map +1 -1
- package/dist/src/modeller/component-toolbar/component-toolbar.js +21 -27
- package/dist/src/modeller/component-toolbar/component-toolbar.js.map +1 -1
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts +1 -1
- package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +6 -5
- 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 +2 -1
- package/dist/src/modeller/property-sidebar/data-binding/data-binding.js.map +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts +1 -1
- package/dist/src/modeller/property-sidebar/effects/property-event-hover.js +3 -2
- 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 -1
- package/dist/src/modeller/property-sidebar/effects/property-event-tap.js +3 -2
- package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map +1 -1
- package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts +1 -1
- package/dist/src/ox-board-modeller.d.ts +1 -1
- package/dist/src/ox-board-modeller.js +4 -3
- package/dist/src/ox-board-modeller.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/modeller/component-toolbar/component-detail.ts +53 -0
- package/src/modeller/component-toolbar/component-menu.ts +60 -12
- package/src/modeller/component-toolbar/component-toolbar.ts +23 -31
- package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts +7 -7
- package/src/modeller/property-sidebar/data-binding/data-binding.ts +4 -4
- package/src/modeller/property-sidebar/effects/property-event-hover.ts +4 -3
- package/src/modeller/property-sidebar/effects/property-event-tap.ts +4 -3
- package/src/ox-board-modeller.ts +9 -8
- package/yarn-error.log +18355 -0
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import { css, html, LitElement } from 'lit';
|
|
6
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
7
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
8
|
+
let ComponentDetail = class ComponentDetail extends LitElement {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
this.template = null;
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
const { about = '/helps/board-modeller/effects/animation.md' } = this.template || {};
|
|
15
|
+
return this.template ? html ` <iframe .src=${about}></iframe> ` : html ``;
|
|
16
|
+
}
|
|
17
|
+
updated(changes) { }
|
|
18
|
+
};
|
|
19
|
+
ComponentDetail.styles = [
|
|
20
|
+
ScrollbarStyles,
|
|
21
|
+
css `
|
|
22
|
+
:host {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-content: stretch;
|
|
26
|
+
|
|
27
|
+
background-color: var(--component-detail-background-color, white);
|
|
28
|
+
margin: 0px;
|
|
29
|
+
padding: 0px;
|
|
30
|
+
|
|
31
|
+
width: 360px;
|
|
32
|
+
height: 100%;
|
|
33
|
+
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
|
|
36
|
+
border: 2px solid var(--component-detail-border-color);
|
|
37
|
+
box-sizing: border-box;
|
|
38
|
+
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 0px;
|
|
41
|
+
|
|
42
|
+
z-index: 1;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
iframe {
|
|
46
|
+
flex: 1;
|
|
47
|
+
}
|
|
48
|
+
`
|
|
49
|
+
];
|
|
50
|
+
__decorate([
|
|
51
|
+
property({ type: Object })
|
|
52
|
+
], ComponentDetail.prototype, "template", void 0);
|
|
53
|
+
ComponentDetail = __decorate([
|
|
54
|
+
customElement('component-detail')
|
|
55
|
+
], ComponentDetail);
|
|
56
|
+
//# sourceMappingURL=component-detail.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAiC8B,aAAQ,GAA6B,IAAI,CAAA;IASvE,CAAC;IAPC,MAAM;QACJ,MAAM,EAAE,KAAK,GAAG,4CAA4C,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEpF,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IACzE,CAAC;IAED,OAAO,CAAC,OAA6B,IAAG,CAAC;CAC1C,CAAA;AAzCQ,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C;AAjCjE,eAAe;IADpB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA0CpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('component-detail')\nclass ComponentDetail extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n\n background-color: var(--component-detail-background-color, white);\n margin: 0px;\n padding: 0px;\n\n width: 360px;\n height: 100%;\n\n overflow: hidden;\n\n border: 2px solid var(--component-detail-border-color);\n box-sizing: border-box;\n\n position: absolute;\n top: 0px;\n\n z-index: 1;\n }\n\n iframe {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Object }) template: { about: string } | null = null\n\n render() {\n const { about = '/helps/board-modeller/effects/animation.md' } = this.template || {}\n\n return this.template ? html` <iframe .src=${about}></iframe> ` : html``\n }\n\n updated(changes: PropertyValues<this>) {}\n}\n"]}
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
5
|
+
import './component-detail';
|
|
6
|
+
import { css, html, LitElement } from 'lit';
|
|
7
|
+
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
7
8
|
import { ScrollbarStyles } from '@operato/styles';
|
|
8
9
|
import noImage from '../../../../assets/images/components/no-image.png';
|
|
9
10
|
let ComponentMenu = class ComponentMenu extends LitElement {
|
|
@@ -19,13 +20,27 @@ let ComponentMenu = class ComponentMenu extends LitElement {
|
|
|
19
20
|
? html `
|
|
20
21
|
<h2 onclick=${(e) => e.stopPropagation()}>${this.group} list</h2>
|
|
21
22
|
|
|
22
|
-
<div
|
|
23
|
+
<div
|
|
24
|
+
templates
|
|
25
|
+
@mouseover=${(e) => this.onHoverComponent(e)}
|
|
26
|
+
@mouseout=${(e) => (this.template = null)}
|
|
27
|
+
>
|
|
23
28
|
${(this.templates || []).map(template => html `
|
|
24
29
|
<div @click=${this.onClickTemplate} data-type=${template.type} template>
|
|
25
30
|
<img src=${this.templateIcon(template)} />${template.type}
|
|
26
31
|
</div>
|
|
27
32
|
`)}
|
|
28
33
|
</div>
|
|
34
|
+
|
|
35
|
+
<component-detail
|
|
36
|
+
tabindex="-1"
|
|
37
|
+
@focusout=${() => {
|
|
38
|
+
this.template = null;
|
|
39
|
+
}}
|
|
40
|
+
.template=${this.template}
|
|
41
|
+
hidden
|
|
42
|
+
>
|
|
43
|
+
</component-detail>
|
|
29
44
|
`
|
|
30
45
|
: html ``;
|
|
31
46
|
}
|
|
@@ -33,14 +48,27 @@ let ComponentMenu = class ComponentMenu extends LitElement {
|
|
|
33
48
|
var _a;
|
|
34
49
|
if (changes.has('group')) {
|
|
35
50
|
if (!this.group) {
|
|
36
|
-
this.style.display = 'none';
|
|
37
51
|
this.templates = [];
|
|
52
|
+
this.setAttribute('hidden', '');
|
|
38
53
|
}
|
|
39
54
|
else {
|
|
40
|
-
this.style.display = 'flex';
|
|
41
55
|
this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
|
|
56
|
+
this.removeAttribute('active');
|
|
42
57
|
}
|
|
43
58
|
}
|
|
59
|
+
if (changes.has('template')) {
|
|
60
|
+
this.template && this.template.about
|
|
61
|
+
? this.detail.removeAttribute('hidden')
|
|
62
|
+
: this.detail.setAttribute('hidden', '');
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
findTemplate(type) {
|
|
66
|
+
this.template = type && this.templates.find(template => template.type == type);
|
|
67
|
+
}
|
|
68
|
+
onHoverComponent(e) {
|
|
69
|
+
var _a;
|
|
70
|
+
const button = e.target;
|
|
71
|
+
this.findTemplate((_a = button.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type'));
|
|
44
72
|
}
|
|
45
73
|
onClickTemplate(e) {
|
|
46
74
|
var _a;
|
|
@@ -49,10 +77,10 @@ let ComponentMenu = class ComponentMenu extends LitElement {
|
|
|
49
77
|
if (!type) {
|
|
50
78
|
return;
|
|
51
79
|
}
|
|
52
|
-
var group = this.groups.find(g => g.name == this.group)
|
|
53
|
-
if (this.scene
|
|
54
|
-
|
|
55
|
-
template && this.scene.add(JSON.parse(JSON.stringify(template.model)), { cx: 200, cy: 200 });
|
|
80
|
+
// var group = this.groups.find(g => g.name == this.group)
|
|
81
|
+
if (this.scene) {
|
|
82
|
+
this.template = this.templates.find(template => template.type == type);
|
|
83
|
+
this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 });
|
|
56
84
|
}
|
|
57
85
|
this.group = null;
|
|
58
86
|
}
|
|
@@ -75,7 +103,7 @@ ComponentMenu.styles = [
|
|
|
75
103
|
width: 180px;
|
|
76
104
|
height: 100%;
|
|
77
105
|
|
|
78
|
-
overflow:
|
|
106
|
+
overflow: visible;
|
|
79
107
|
|
|
80
108
|
border: 2px solid var(--component-menu-border-color);
|
|
81
109
|
box-sizing: border-box;
|
|
@@ -128,6 +156,18 @@ ComponentMenu.styles = [
|
|
|
128
156
|
width: var(--component-menu-item-icon-size);
|
|
129
157
|
height: var(--component-menu-item-icon-size);
|
|
130
158
|
}
|
|
159
|
+
|
|
160
|
+
component-detail {
|
|
161
|
+
position: absolute;
|
|
162
|
+
top: 0;
|
|
163
|
+
left: 180px;
|
|
164
|
+
height: 100%;
|
|
165
|
+
outline: none;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
component-detail[hidden] {
|
|
169
|
+
display: none;
|
|
170
|
+
}
|
|
131
171
|
`
|
|
132
172
|
];
|
|
133
173
|
__decorate([
|
|
@@ -140,8 +180,14 @@ __decorate([
|
|
|
140
180
|
property({ type: String })
|
|
141
181
|
], ComponentMenu.prototype, "group", void 0);
|
|
142
182
|
__decorate([
|
|
143
|
-
|
|
183
|
+
state()
|
|
144
184
|
], ComponentMenu.prototype, "templates", void 0);
|
|
185
|
+
__decorate([
|
|
186
|
+
state()
|
|
187
|
+
], ComponentMenu.prototype, "template", void 0);
|
|
188
|
+
__decorate([
|
|
189
|
+
query('component-detail')
|
|
190
|
+
], ComponentMenu.prototype, "detail", void 0);
|
|
145
191
|
ComponentMenu = __decorate([
|
|
146
192
|
customElement('component-menu')
|
|
147
193
|
], ComponentMenu);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"component-menu.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-detail'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { Scene } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport noImage from '../../../../assets/images/components/no-image.png'\nimport { Pallet, PalletItem } from '../../types'\n\n@customElement('component-menu')\nclass ComponentMenu extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n\n background-color: var(--component-menu-background-color);\n margin: 0px;\n padding: 0px;\n\n width: 180px;\n height: 100%;\n\n overflow: visible;\n\n border: 2px solid var(--component-menu-border-color);\n box-sizing: border-box;\n\n position: absolute;\n top: 0px;\n\n z-index: 1;\n }\n\n h2 {\n background-color: var(--component-menu-border-color);\n padding: 1px 5px;\n margin: 0;\n font: var(--component-menu-title);\n color: #fff;\n text-transform: capitalize;\n }\n\n [templates] {\n flex: 1;\n\n display: block;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n\n background-color: var(--component-menu-background-color);\n }\n\n [template] {\n display: flex;\n align-items: center;\n min-height: var(--component-menu-item-icon-size);\n padding: 0 5px 0 0;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n font-size: 11px;\n color: var(--component-menu-item-color);\n }\n\n [template]:hover,\n [template]:focus {\n color: var(--component-menu-item-hover-color);\n font-weight: bold;\n cursor: pointer;\n }\n\n [template] img {\n margin: 5px;\n width: var(--component-menu-item-icon-size);\n height: var(--component-menu-item-icon-size);\n }\n\n component-detail {\n position: absolute;\n top: 0;\n left: 180px;\n height: 100%;\n outline: none;\n }\n\n component-detail[hidden] {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) groups: Pallet[] = []\n @property({ type: Object }) scene: Scene | null = null\n @property({ type: String }) group: string | null = ''\n\n @state() templates: PalletItem[] = []\n @state() template: PalletItem | any\n\n @query('component-detail') detail!: HTMLElement\n\n render() {\n return this.group\n ? html`\n <h2 onclick=${(e: MouseEvent) => e.stopPropagation()}>${this.group} list</h2>\n\n <div\n templates\n @mouseover=${(e: MouseEvent) => this.onHoverComponent(e)}\n @mouseout=${(e: MouseEvent) => (this.template = null)}\n >\n ${(this.templates || []).map(\n template => html`\n <div @click=${this.onClickTemplate} data-type=${template.type} template>\n <img src=${this.templateIcon(template)} />${template.type}\n </div>\n `\n )}\n </div>\n\n <component-detail\n tabindex=\"-1\"\n @focusout=${() => {\n this.template = null\n }}\n .template=${this.template}\n hidden\n >\n </component-detail>\n `\n : html``\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('group')) {\n if (!this.group) {\n this.templates = []\n this.setAttribute('hidden', '')\n } else {\n this.templates = this.groups.find((g: Pallet) => g.name === this.group)?.templates || []\n this.removeAttribute('active')\n }\n }\n\n if (changes.has('template')) {\n this.template && this.template.about\n ? this.detail.removeAttribute('hidden')\n : this.detail.setAttribute('hidden', '')\n }\n }\n\n findTemplate(type: string | null | undefined) {\n this.template = type && this.templates.find(template => template.type == type)\n }\n\n onHoverComponent(e: MouseEvent) {\n const button = e.target as HTMLElement\n this.findTemplate(button!.closest('[data-type]')?.getAttribute('data-type'))\n }\n\n onClickTemplate(e: MouseEvent) {\n var item = e.target as HTMLElement\n var type = item.closest('[data-type]')?.getAttribute('data-type')\n\n if (!type) {\n return\n }\n\n // var group = this.groups.find(g => g.name == this.group)\n\n if (this.scene) {\n this.template = this.templates.find(template => template.type == type)\n this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 })\n }\n\n this.group = null\n }\n\n templateIcon(template: PalletItem) {\n return template.icon || noImage\n }\n}\n"]}
|
|
@@ -3,19 +3,27 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
5
|
import './component-menu';
|
|
6
|
-
import {
|
|
6
|
+
import { css, html, LitElement } from 'lit';
|
|
7
|
+
import { customElement, property, query, queryAll } from 'lit/decorators.js';
|
|
7
8
|
import { SCENE_MODE } from '@hatiolab/things-scene';
|
|
8
|
-
import { customElement, property, query } from 'lit/decorators.js';
|
|
9
9
|
let ComponentToolbar = class ComponentToolbar extends LitElement {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments);
|
|
12
12
|
this.componentGroupList = [];
|
|
13
13
|
this.mode = SCENE_MODE.VIEW;
|
|
14
14
|
}
|
|
15
|
+
updated(changes) {
|
|
16
|
+
if (changes.has('group')) {
|
|
17
|
+
this.groups.forEach(group => {
|
|
18
|
+
group.getAttribute('data-group') === this.group
|
|
19
|
+
? group.setAttribute('active', '')
|
|
20
|
+
: group.removeAttribute('active');
|
|
21
|
+
});
|
|
22
|
+
this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '');
|
|
23
|
+
}
|
|
24
|
+
}
|
|
15
25
|
render() {
|
|
16
26
|
return html `
|
|
17
|
-
<span id="shift" class="pressed" @click=${() => this._onClickShift()}> </span>
|
|
18
|
-
|
|
19
27
|
${this.componentGroupList
|
|
20
28
|
.filter(group => { var _a; return ((_a = group.templates) === null || _a === void 0 ? void 0 : _a.length) > 0; })
|
|
21
29
|
.map(item => html ` <span data-group=${item.name} @click=${(e) => this._onClickGroup(e)}> </span> `)}
|
|
@@ -25,34 +33,14 @@ let ComponentToolbar = class ComponentToolbar extends LitElement {
|
|
|
25
33
|
@focusout=${() => {
|
|
26
34
|
this.group = null;
|
|
27
35
|
}}
|
|
28
|
-
id="menu"
|
|
29
36
|
.scene=${this.scene}
|
|
30
37
|
.group=${this.group}
|
|
31
38
|
.groups=${this.componentGroupList}
|
|
32
|
-
|
|
39
|
+
hidden
|
|
33
40
|
>
|
|
34
41
|
</component-menu>
|
|
35
42
|
`;
|
|
36
43
|
}
|
|
37
|
-
_setMode(mode) {
|
|
38
|
-
this.mode = mode;
|
|
39
|
-
this.dispatchEvent(new CustomEvent('mode-changed', {
|
|
40
|
-
bubbles: true,
|
|
41
|
-
composed: true,
|
|
42
|
-
detail: { value: mode }
|
|
43
|
-
}));
|
|
44
|
-
}
|
|
45
|
-
_onClickShift() {
|
|
46
|
-
var shift = this.renderRoot.querySelector('#shift');
|
|
47
|
-
if (shift === null || shift === void 0 ? void 0 : shift.hasAttribute('active')) {
|
|
48
|
-
shift.removeAttribute('active');
|
|
49
|
-
this._setMode(SCENE_MODE.EDIT);
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
shift.setAttribute('active', '');
|
|
53
|
-
this._setMode(SCENE_MODE.SHIFT);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
44
|
async _onClickGroup(e) {
|
|
57
45
|
var _a, _b;
|
|
58
46
|
var button = e.target;
|
|
@@ -146,13 +134,16 @@ ComponentToolbar.styles = [
|
|
|
146
134
|
}
|
|
147
135
|
|
|
148
136
|
component-menu {
|
|
149
|
-
display: none;
|
|
150
137
|
position: absolute;
|
|
151
138
|
top: 0;
|
|
152
139
|
left: var(--component-toolbar-icon-size);
|
|
153
140
|
height: 100%;
|
|
154
141
|
outline: none;
|
|
155
142
|
}
|
|
143
|
+
|
|
144
|
+
component-menu[hidden] {
|
|
145
|
+
display: none;
|
|
146
|
+
}
|
|
156
147
|
`
|
|
157
148
|
];
|
|
158
149
|
__decorate([
|
|
@@ -168,8 +159,11 @@ __decorate([
|
|
|
168
159
|
property({ type: Number })
|
|
169
160
|
], ComponentToolbar.prototype, "mode", void 0);
|
|
170
161
|
__decorate([
|
|
171
|
-
query('
|
|
162
|
+
query('component-menu')
|
|
172
163
|
], ComponentToolbar.prototype, "menu", void 0);
|
|
164
|
+
__decorate([
|
|
165
|
+
queryAll('[data-group]')
|
|
166
|
+
], ComponentToolbar.prototype, "groups", void 0);
|
|
173
167
|
ComponentToolbar = __decorate([
|
|
174
168
|
customElement('component-toolbar')
|
|
175
169
|
], ComponentToolbar);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './component-menu'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE } from '@hatiolab/things-scene'\n\n@customElement('component-toolbar')\nclass ComponentToolbar extends LitElement {\n static styles = [\n css`\n :host {\n left: 0;\n display: block;\n position: relative;\n\n width: var(--component-toolbar-icon-size);\n background-color: var(--component-toolbar-background-color);\n }\n\n span {\n display: flex;\n flex-direction: row;\n\n width: var(--component-toolbar-icon-size);\n height: var(--component-toolbar-icon-size);\n min-width: 50%;\n\n border-bottom: var(--component-toolbar-border);\n margin: 0;\n background: url(/assets/images/icon-vtoolbar.png) -1px 0 no-repeat;\n }\n\n span[data-group='line'] {\n background-position: 50% -186px;\n }\n\n span[data-group='shape'] {\n background-position: 0px -284px;\n }\n\n span[data-group='textAndMedia'] {\n background-position: 50% -385px;\n }\n\n span[data-group='chartAndGauge'] {\n background-position: 50% -488px;\n }\n\n span[data-group='table'] {\n background-position: 50% -585px;\n }\n\n span[data-group='container'] {\n background-position: 50% -685px;\n }\n\n span[data-group='dataSource'] {\n background-position: 50% -888px;\n }\n\n span[data-group='IoT'] {\n background-position: -3px -788px;\n }\n\n span[data-group='3D'] {\n background-position: 50% -992px;\n }\n\n span[data-group='warehouse'] {\n background-position: -2px -1089px;\n }\n\n span[data-group='form'] {\n background-position: -2px -1287px;\n }\n\n span[data-group='etc'] {\n background-position: -1px -1189px;\n }\n\n .pressed {\n background-position: 0 15px;\n }\n\n .pressed[pressed],\n .pressed[active] {\n background-position: -3px -88px;\n background-color: #beb9b3;\n }\n\n component-menu {\n position: absolute;\n top: 0;\n left: var(--component-toolbar-icon-size);\n height: 100%;\n outline: none;\n }\n\n component-menu[hidden] {\n display: none;\n }\n `\n ]\n\n @property({ type: Array }) componentGroupList: any[] = []\n @property({ type: String }) group?: string | null\n @property({ type: Object }) scene!: Scene\n @property({ type: Number }) mode: SCENE_MODE = SCENE_MODE.VIEW\n\n @query('component-menu') private menu!: HTMLElement\n @queryAll('[data-group]') groups!: NodeListOf<HTMLElement>\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('group')) {\n this.groups.forEach(group => {\n group.getAttribute('data-group') === this.group\n ? group.setAttribute('active', '')\n : group.removeAttribute('active')\n })\n\n this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n }\n }\n\n render() {\n return html`\n ${this.componentGroupList\n .filter(group => group.templates?.length > 0)\n .map(item => html` <span data-group=${item.name} @click=${(e: MouseEvent) => this._onClickGroup(e)}> </span> `)}\n\n <component-menu\n tabindex=\"-1\"\n @focusout=${() => {\n this.group = null\n }}\n .scene=${this.scene}\n .group=${this.group}\n .groups=${this.componentGroupList}\n hidden\n >\n </component-menu>\n `\n }\n\n async _onClickGroup(e: MouseEvent) {\n var button = e.target as HTMLElement\n\n this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n if (!this.group) return\n\n await this.updateComplete\n\n this.menu?.focus()\n }\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
|
-
import '@things-factory/modeller-ui/client/editors/things-editor-code';
|
|
5
4
|
import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
|
|
6
5
|
import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
|
|
7
6
|
import '@operato/input/dist/src/ox-buttons-radio';
|
|
7
|
+
import '@operato/input/dist/src/ox-input-code';
|
|
8
8
|
import { LitElement, PropertyValues } from 'lit';
|
|
9
9
|
import { Properties, Scene } from '@hatiolab/things-scene';
|
|
10
10
|
export declare type Rule = {
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
|
-
import '@things-factory/modeller-ui/client/editors/things-editor-code'
|
|
5
|
+
// import '@things-factory/modeller-ui/client/editors/things-editor-code'
|
|
6
6
|
import '@things-factory/modeller-ui/client/editors/things-editor-value-map';
|
|
7
7
|
import '@things-factory/modeller-ui/client/editors/things-editor-value-range';
|
|
8
8
|
import '@operato/input/dist/src/ox-buttons-radio';
|
|
9
|
-
import
|
|
9
|
+
import '@operato/input/dist/src/ox-input-code';
|
|
10
|
+
import { LitElement, css, html } from 'lit';
|
|
10
11
|
import { customElement, property, query, state } from 'lit/decorators';
|
|
11
12
|
/**
|
|
12
13
|
element for mapping data value editing
|
|
@@ -114,13 +115,13 @@ let DataBindingMapper = class DataBindingMapper extends LitElement {
|
|
|
114
115
|
>
|
|
115
116
|
</things-editor-value-range>
|
|
116
117
|
|
|
117
|
-
<
|
|
118
|
+
<ox-input-code
|
|
118
119
|
value-key="eval"
|
|
119
120
|
id="eval-editor"
|
|
120
121
|
.value=${this.rule.eval || ''}
|
|
121
122
|
?active=${mapping.rule == 'eval'}
|
|
122
123
|
>
|
|
123
|
-
</
|
|
124
|
+
</ox-input-code>
|
|
124
125
|
</div>
|
|
125
126
|
`;
|
|
126
127
|
}
|
|
@@ -313,7 +314,7 @@ DataBindingMapper.styles = [
|
|
|
313
314
|
display: none;
|
|
314
315
|
}
|
|
315
316
|
|
|
316
|
-
|
|
317
|
+
ox-input-code {
|
|
317
318
|
height: 300px;
|
|
318
319
|
overflow: auto;
|
|
319
320
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,+DAA+D,CAAA;AACtE,OAAO,oEAAoE,CAAA;AAC3E,OAAO,sEAAsE,CAAA;AAC7E,OAAO,0CAA0C,CAAA;AAEjD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAoBtE;;;;;;;EAOE;AAGF,IAAqB,iBAAiB,GAAtC,MAAqB,iBAAkB,SAAQ,UAAU;IAAzD;;QA0F8B,YAAO,GAAY;YAC7C,IAAI,EAAE,OAAO;SACd,CAAA;QAC2B,SAAI,GAAS,EAAE,CAAA;QAChB,eAAU,GAAiB,EAAE,CAAA;QAG/C,gBAAW,GAAQ;YAC1B,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,OAAO,EAAE,SAAS;YAElB,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,QAAQ;YAEf,SAAS,EAAE,OAAO;YAClB,WAAW,EAAE,OAAO;YACpB,SAAS,EAAE,OAAO;YAElB,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,QAAQ;YAChB,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,QAAQ;YAEnB,IAAI,EAAE,QAAQ;YACd,GAAG,EAAE,QAAQ;SACd,CAAA;QACQ,kBAAa,GAAU,EAAE,CAAA;QA+F1B,4BAAuB,GAAY,KAAK,CAAA;IAsHlD,CAAC;IAhNC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACpE,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACpD,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI;YAC9B,IAAI,EAAE,OAAO;SACd,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;iBAOE,OAAO,CAAC,QAAQ,IAAI,EAAE;;;;;;;;;iBAStB,OAAO,CAAC,MAAM,IAAI,EAAE;mBAClB,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA;YACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;QAC/E,CAAC;;;;;UAKC,IAAI,CAAC,aAAa,CAAC,MAAM;YACzB,CAAC,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC,GAAG;YAChF,CAAC,CAAC,IAAI,CAAA,EAAE;;;;gEAI8C,OAAO,CAAC,QAAQ;UACtE,IAAI,CAAC,UAAU,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,YAAY,CAC9G;;;;iCAIwB,OAAO,CAAC,IAAI,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;;;;;;;kDAO1C,OAAO,CAAC,IAAI,IAAI,OAAO;;;mBAGtD,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE;uBACf,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;oBACrC,OAAO,CAAC,IAAI,IAAI,KAAK;;;;;;mBAMtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;uBACjB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAS,CAAC;oBACrC,OAAO,CAAC,IAAI,IAAI,OAAO;;;;;;;mBAOxB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE;oBACnB,OAAO,CAAC,IAAI,IAAI,MAAM;;;;KAIrC,CAAA;IACH,CAAC;IAED,UAAU,CAAC,QAAgB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAA;IAC/C,CAAC;IAID,KAAK,CAAC,iBAAiB;QACrB,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAA;SACrC;aAAM;YACL,MAAM,IAAI,CAAC,cAAc,CAAA;YAEzB,IAAI,IAAI,GAAS,EAAE,CAAA;YAEnB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;oBACzB,KAAK,KAAK;wBACR,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACnC,MAAK;oBACP,KAAK,OAAO;wBACV,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACrC,MAAK;oBACP,KAAK,MAAM;wBACT,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAA;wBACpC,MAAK;oBACP;wBACE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;wBAC3B,MAAK;iBACR;aACF;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;YAChB,IAAI,CAAC,aAAa,EAAE,CAAA;SACrB;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAEzB,IAAI,KAAK,CAAA;QAET,QAAQ,KAAK,EAAE;YACb,KAAK,KAAK;gBACR,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;gBACrB,MAAK;YACP,KAAK,OAAO;gBACV,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;gBACvB,MAAK;YACP,KAAK,MAAM;gBACT,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;gBAE5B,yDAAyD;gBACzD,IAAI,CAAC,KAAK,EAAE;oBACV,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAA;iBAC7B;gBACD,MAAK;YACP,QAAQ;SACT;QAED,IAAI,CAAC,OAAO,GAAG;YACb,GAAG,IAAI,CAAC,OAAO;YACf,IAAI,EAAE,KAA2C;YACjD,KAAK;SACN,CAAA;QAED,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IACxF,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG;YAAE,OAAM;QAEhB,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;QAEzB,IAAI,GAAG,IAAI,QAAQ,EAAE;YACnB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;gBAE1B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;aAC1B;YAED,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,MAAM,EAAE,KAAK;aACd,CAAA;SACF;aAAM,IAAI,GAAG,IAAI,UAAU,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;SACF;aAAM,IAAI,GAAG,IAAI,UAAU,EAAE;YAC5B,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC/B,CAAA;SACF;aAAM,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,OAAO,IAAI,GAAG,IAAI,MAAM,EAAE;YAC1D,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,IAAI,CAAC,OAAO,GAAG;gBACb,GAAG,IAAI,CAAC,OAAO;gBACf,KAAK,EAAE,KAAK;aACb,CAAA;SACF;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;YAAE,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAA;QAEnD,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAA;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE;oBACP,CAAC,GAAG,CAAC,EAAE,KAAK;iBACb;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;CACF,CAAA;AAzUQ,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqFF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAE1B;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAChB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAA8B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAc;AAEhC;IAAR,KAAK,EAAE;sDAmBP;AACQ;IAAR,KAAK,EAAE;wDAA0B;AAEX;IAAtB,KAAK,CAAC,cAAc,CAAC;iDAA0B;AACxB;IAAvB,KAAK,CAAC,eAAe,CAAC;iDAA0B;AAxH9B,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CA0UrC;eA1UoB,iBAAiB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/modeller-ui/client/editors/things-editor-code'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-map'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-range'\nimport '@operato/input/dist/src/ox-buttons-radio'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nexport type Rule =\n | {\n map?: Properties\n range?: Properties[]\n eval?: string\n }\n | any\n\nexport type Mapping = {\n rule: 'map' | 'range' | 'eval' | 'value'\n accessor?: string\n target?: string\n property?: string\n param?: Rule\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n <data-binding-mapper mapping=${mapping}>\n </data-binding-mapper>\n*/\n\n@customElement('data-binding-mapper')\nexport default class DataBindingMapper extends LitElement {\n static styles = [\n css`\n :host {\n background-color: rgba(255, 255, 255, 0.5);\n overflow: hidden;\n padding: 7px 0 0 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 0 1px 1px 1px;\n padding: 4px;\n line-height: 2;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 4px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n :host > * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n }\n\n input,\n select,\n ox-buttons-radio,\n [mapping-rule] {\n grid-column: span 7;\n }\n input,\n select {\n border: var(--property-sidebar-fieldset-border);\n }\n\n ox-buttons-radio {\n display: flex;\n padding: 0 4px;\n }\n\n ox-buttons-radio > * {\n text-align: center;\n flex: 1;\n margin: 2px;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n\n select {\n height: 22px;\n }\n\n [mapping-rule] {\n display: flex;\n }\n\n [mapping-rule] * {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n [rule-editors] {\n grid-column: span 10;\n\n display: 'flex';\n align-content: auto;\n }\n\n [rule-editors] :not([active]) {\n display: none;\n }\n\n things-editor-code {\n height: 300px;\n overflow: auto;\n }\n `\n ]\n\n @property({ type: Object }) mapping: Mapping = {\n rule: 'value'\n }\n @property({ type: Object }) rule: Rule = {}\n @property({ type: Array }) properties: Properties[] = []\n @property({ type: Object }) scene?: Scene\n\n @state() _valueTypes: any = {\n play: 'boolean',\n hidden: 'boolean',\n started: 'boolean',\n\n rotation: 'number',\n value: 'number',\n\n fillStyle: 'color',\n strokeStyle: 'color',\n fontColor: 'color',\n\n data: 'object',\n source: 'object',\n location: 'object',\n dimension: 'object',\n\n text: 'string',\n ref: 'string'\n }\n @state() _componentIds: any[] = []\n\n @query('#eval-editor') editor!: HTMLInputElement\n @query('#target-input') target!: HTMLInputElement\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => this._onChange(e))\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('mapping') && this._onChangedMapping()\n }\n\n render() {\n const mapping = this.mapping || {\n rule: 'value'\n }\n\n return html`\n <label for=\"accessor-input\"> <i18n-msg msgid=\"label.accessor\">accessor</i18n-msg> </label>\n <input\n id=\"accessor-input\"\n value-key=\"accessor\"\n type=\"text\"\n data-mapping-accessor\n .value=${mapping.accessor || ''}\n />\n\n <label for=\"target-input\"> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n <input\n id=\"target-input\"\n type=\"text\"\n value-key=\"target\"\n list=\"target-list\"\n .value=${mapping.target || ''}\n @focusin=${() => {\n if (!this.scene) this._componentIds = []\n this._componentIds = this.scene!.ids.map(info => info.key).filter(id => !!id)\n }}\n />\n <datalist id=\"target-list\">\n <option value=\"(self)\"></option>\n <option value=\"(key)\"></option>\n ${this._componentIds.length\n ? html` ${this._componentIds.map(id => html` <option value=${id}></option> `)} `\n : html``}\n </datalist>\n\n <label for=\"property-input\"> <i18n-msg msgid=\"label.property\">property</i18n-msg> </label>\n <select id=\"property-input\" value-key=\"property\" .value=${mapping.property}>\n ${this.properties.map(\n item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `\n )}\n </select>\n\n <label> <i18n-msg msgid=\"label.rule-type\">rule type</i18n-msg> </label>\n <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n <div data-value=\"value\"><i18n-msg msgid=\"label.value\"></i18n-msg></div>\n <div data-value=\"map\"><i18n-msg msgid=\"label.map\"></i18n-msg></div>\n <div data-value=\"range\"><i18n-msg msgid=\"label.range\"></i18n-msg></div>\n <div data-value=\"eval\"><i18n-msg msgid=\"label.eval\"></i18n-msg></div>\n </ox-buttons-radio>\n\n <div rule-editors class=\"content\" ?hidden=${mapping.rule == 'value'}>\n <things-editor-value-map\n value-key=\"map\"\n .value=${this.rule.map || {}}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'map'}\n >\n </things-editor-value-map>\n\n <things-editor-value-range\n value-key=\"range\"\n .value=${this.rule.range || []}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'range'}\n >\n </things-editor-value-range>\n\n <things-editor-code\n value-key=\"eval\"\n id=\"eval-editor\"\n .value=${this.rule.eval || ''}\n ?active=${mapping.rule == 'eval'}\n >\n </things-editor-code>\n </div>\n `\n }\n\n _valuetype(property: string) {\n return this._valueTypes[property] || 'string'\n }\n\n private _keep_saved_rule_params: boolean = false\n\n async _onChangedMapping() {\n if (this._keep_saved_rule_params) {\n this._keep_saved_rule_params = false\n } else {\n await this.updateComplete\n\n var rule: Rule = {}\n\n if (this.mapping) {\n switch (this.mapping.rule) {\n case 'map':\n rule.map = this.mapping.param || {}\n break\n case 'range':\n rule.range = this.mapping.param || []\n break\n case 'eval':\n rule.eval = this.mapping.param || ''\n break\n default:\n this.mapping.rule = 'value'\n break\n }\n }\n\n this.rule = rule\n this.requestUpdate()\n }\n }\n\n _onChangeRule(e: Event) {\n var element = e.target as HTMLInputElement\n var value = element.value\n\n let param\n\n switch (value) {\n case 'map':\n param = this.rule.map\n break\n case 'range':\n param = this.rule.range\n break\n case 'eval':\n param = this.rule.eval || ''\n\n // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n if (!param) {\n this.editor.value = 'return'\n }\n break\n default:\n }\n\n this.mapping = {\n ...this.mapping,\n rule: value as 'value' | 'map' | 'range' | 'eval',\n param\n }\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n\n if (!key) return\n\n var value = element.value\n\n if (key == 'target') {\n if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n value = '#' + value.trim()\n\n this.target.value = value\n }\n\n this.mapping = {\n ...this.mapping,\n target: value\n }\n } else if (key == 'accessor') {\n this.mapping = {\n ...this.mapping,\n accessor: (value || '').trim()\n }\n } else if (key == 'property') {\n this.mapping = {\n ...this.mapping,\n property: (value || '').trim()\n }\n } else if (key == 'map' || key == 'range' || key == 'eval') {\n this.rule[key] = value\n this.mapping = {\n ...this.mapping,\n param: value\n }\n }\n\n if (!this.mapping.rule) this.mapping.rule = 'value'\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(\n new CustomEvent('value-change', {\n bubbles: true,\n composed: true,\n detail: {\n changed: {\n [key]: value\n }\n }\n })\n )\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"data-binding-mapper.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n// import '@things-factory/modeller-ui/client/editors/things-editor-code'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-map'\nimport '@things-factory/modeller-ui/client/editors/things-editor-value-range'\nimport '@operato/input/dist/src/ox-buttons-radio'\nimport '@operato/input/dist/src/ox-input-code'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, query, state } from 'lit/decorators'\n\nexport type Rule =\n | {\n map?: Properties\n range?: Properties[]\n eval?: string\n }\n | any\n\nexport type Mapping = {\n rule: 'map' | 'range' | 'eval' | 'value'\n accessor?: string\n target?: string\n property?: string\n param?: Rule\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n <data-binding-mapper mapping=${mapping}>\n </data-binding-mapper>\n*/\n\n@customElement('data-binding-mapper')\nexport default class DataBindingMapper extends LitElement {\n static styles = [\n css`\n :host {\n background-color: rgba(255, 255, 255, 0.5);\n overflow: hidden;\n padding: 7px 0 0 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 0 1px 1px 1px;\n padding: 4px;\n line-height: 2;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 4px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n :host > * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n }\n\n input,\n select,\n ox-buttons-radio,\n [mapping-rule] {\n grid-column: span 7;\n }\n input,\n select {\n border: var(--property-sidebar-fieldset-border);\n }\n\n ox-buttons-radio {\n display: flex;\n padding: 0 4px;\n }\n\n ox-buttons-radio > * {\n text-align: center;\n flex: 1;\n margin: 2px;\n border-bottom: 2px solid #fff;\n }\n\n ox-buttons-radio div[active] {\n border-color: #f2471c;\n }\n\n select {\n height: 22px;\n }\n\n [mapping-rule] {\n display: flex;\n }\n\n [mapping-rule] * {\n flex: auto;\n margin: 0;\n text-align: left;\n align-self: center;\n }\n\n [rule-editors] {\n grid-column: span 10;\n\n display: 'flex';\n align-content: auto;\n }\n\n [rule-editors] :not([active]) {\n display: none;\n }\n\n ox-input-code {\n height: 300px;\n overflow: auto;\n }\n `\n ]\n\n @property({ type: Object }) mapping: Mapping = {\n rule: 'value'\n }\n @property({ type: Object }) rule: Rule = {}\n @property({ type: Array }) properties: Properties[] = []\n @property({ type: Object }) scene?: Scene\n\n @state() _valueTypes: any = {\n play: 'boolean',\n hidden: 'boolean',\n started: 'boolean',\n\n rotation: 'number',\n value: 'number',\n\n fillStyle: 'color',\n strokeStyle: 'color',\n fontColor: 'color',\n\n data: 'object',\n source: 'object',\n location: 'object',\n dimension: 'object',\n\n text: 'string',\n ref: 'string'\n }\n @state() _componentIds: any[] = []\n\n @query('#eval-editor') editor!: HTMLInputElement\n @query('#target-input') target!: HTMLInputElement\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', e => this._onChange(e))\n }\n\n updated(changes: PropertyValues<this>) {\n changes.has('mapping') && this._onChangedMapping()\n }\n\n render() {\n const mapping = this.mapping || {\n rule: 'value'\n }\n\n return html`\n <label for=\"accessor-input\"> <i18n-msg msgid=\"label.accessor\">accessor</i18n-msg> </label>\n <input\n id=\"accessor-input\"\n value-key=\"accessor\"\n type=\"text\"\n data-mapping-accessor\n .value=${mapping.accessor || ''}\n />\n\n <label for=\"target-input\"> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n <input\n id=\"target-input\"\n type=\"text\"\n value-key=\"target\"\n list=\"target-list\"\n .value=${mapping.target || ''}\n @focusin=${() => {\n if (!this.scene) this._componentIds = []\n this._componentIds = this.scene!.ids.map(info => info.key).filter(id => !!id)\n }}\n />\n <datalist id=\"target-list\">\n <option value=\"(self)\"></option>\n <option value=\"(key)\"></option>\n ${this._componentIds.length\n ? html` ${this._componentIds.map(id => html` <option value=${id}></option> `)} `\n : html``}\n </datalist>\n\n <label for=\"property-input\"> <i18n-msg msgid=\"label.property\">property</i18n-msg> </label>\n <select id=\"property-input\" value-key=\"property\" .value=${mapping.property}>\n ${this.properties.map(\n item => html` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `\n )}\n </select>\n\n <label> <i18n-msg msgid=\"label.rule-type\">rule type</i18n-msg> </label>\n <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n <div data-value=\"value\"><i18n-msg msgid=\"label.value\"></i18n-msg></div>\n <div data-value=\"map\"><i18n-msg msgid=\"label.map\"></i18n-msg></div>\n <div data-value=\"range\"><i18n-msg msgid=\"label.range\"></i18n-msg></div>\n <div data-value=\"eval\"><i18n-msg msgid=\"label.eval\"></i18n-msg></div>\n </ox-buttons-radio>\n\n <div rule-editors class=\"content\" ?hidden=${mapping.rule == 'value'}>\n <things-editor-value-map\n value-key=\"map\"\n .value=${this.rule.map || {}}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'map'}\n >\n </things-editor-value-map>\n\n <things-editor-value-range\n value-key=\"range\"\n .value=${this.rule.range || []}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'range'}\n >\n </things-editor-value-range>\n\n <ox-input-code\n value-key=\"eval\"\n id=\"eval-editor\"\n .value=${this.rule.eval || ''}\n ?active=${mapping.rule == 'eval'}\n >\n </ox-input-code>\n </div>\n `\n }\n\n _valuetype(property: string) {\n return this._valueTypes[property] || 'string'\n }\n\n private _keep_saved_rule_params: boolean = false\n\n async _onChangedMapping() {\n if (this._keep_saved_rule_params) {\n this._keep_saved_rule_params = false\n } else {\n await this.updateComplete\n\n var rule: Rule = {}\n\n if (this.mapping) {\n switch (this.mapping.rule) {\n case 'map':\n rule.map = this.mapping.param || {}\n break\n case 'range':\n rule.range = this.mapping.param || []\n break\n case 'eval':\n rule.eval = this.mapping.param || ''\n break\n default:\n this.mapping.rule = 'value'\n break\n }\n }\n\n this.rule = rule\n this.requestUpdate()\n }\n }\n\n _onChangeRule(e: Event) {\n var element = e.target as HTMLInputElement\n var value = element.value\n\n let param\n\n switch (value) {\n case 'map':\n param = this.rule.map\n break\n case 'range':\n param = this.rule.range\n break\n case 'eval':\n param = this.rule.eval || ''\n\n // rule.eval에 값이 없을 때, ace-editor 내용이 초기화되지 않는 문제때문에 처리함.\n if (!param) {\n this.editor.value = 'return'\n }\n break\n default:\n }\n\n this.mapping = {\n ...this.mapping,\n rule: value as 'value' | 'map' | 'range' | 'eval',\n param\n }\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true }))\n }\n\n _onChange(e: Event) {\n var element = e.target as HTMLInputElement\n var key = element.getAttribute('value-key')\n\n if (!key) return\n\n var value = element.value\n\n if (key == 'target') {\n if (value.length > 0 && !/^[.#(\\[]/.test(value)) {\n value = '#' + value.trim()\n\n this.target.value = value\n }\n\n this.mapping = {\n ...this.mapping,\n target: value\n }\n } else if (key == 'accessor') {\n this.mapping = {\n ...this.mapping,\n accessor: (value || '').trim()\n }\n } else if (key == 'property') {\n this.mapping = {\n ...this.mapping,\n property: (value || '').trim()\n }\n } else if (key == 'map' || key == 'range' || key == 'eval') {\n this.rule[key] = value\n this.mapping = {\n ...this.mapping,\n param: value\n }\n }\n\n if (!this.mapping.rule) this.mapping.rule = 'value'\n\n this._keep_saved_rule_params = true\n this.dispatchEvent(\n new CustomEvent('value-change', {\n bubbles: true,\n composed: true,\n detail: {\n changed: {\n [key]: value\n }\n }\n })\n )\n }\n}\n"]}
|
|
@@ -6,6 +6,7 @@ import './data-binding-mapper';
|
|
|
6
6
|
import '@material/mwc-icon';
|
|
7
7
|
import '@things-factory/help';
|
|
8
8
|
import '@operato/input/dist/src/ox-buttons-radio.js';
|
|
9
|
+
import '@operato/input/dist/src/ox-input-data';
|
|
9
10
|
import { css, html } from 'lit';
|
|
10
11
|
import { customElement, property, query, state } from 'lit/decorators';
|
|
11
12
|
import { AbstractProperty } from '../abstract-property';
|
|
@@ -99,7 +100,7 @@ let PropertyDataBinding = class PropertyDataBinding extends AbstractProperty {
|
|
|
99
100
|
>${this._dataExpanded ? 'expand_less' : 'expand_more'}</mwc-icon
|
|
100
101
|
>
|
|
101
102
|
</legend>
|
|
102
|
-
<
|
|
103
|
+
<ox-input-data value-key="data" .value=${value.data}> </ox-input-data>
|
|
103
104
|
</fieldset>
|
|
104
105
|
|
|
105
106
|
<fieldset>
|