@operato/board 1.2.17 → 1.2.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts +2 -2
  3. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +13 -11
  4. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map +1 -1
  5. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.d.ts +6 -0
  6. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js +20 -0
  7. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js.map +1 -0
  8. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.d.ts +6 -0
  9. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js +20 -0
  10. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js.map +1 -0
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +7 -7
  13. package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts +18 -18
  14. package/src/modeller/property-sidebar/data-binding/data-binding-value-map.ts +19 -0
  15. package/src/modeller/property-sidebar/data-binding/data-binding-value-range.ts +19 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [1.2.25](https://github.com/hatiolab/operato/compare/v1.2.24...v1.2.25) (2023-04-22)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * improve UX for value-map, value-range ([8066f54](https://github.com/hatiolab/operato/commit/8066f540b0c98967edab0e3989ea24480075732d))
12
+
13
+
14
+
15
+ ### [1.2.24](https://github.com/hatiolab/operato/compare/v1.2.23...v1.2.24) (2023-04-17)
16
+
17
+ **Note:** Version bump only for package @operato/board
18
+
19
+
20
+
21
+
22
+
6
23
  ### [1.2.17](https://github.com/hatiolab/operato/compare/v1.2.16...v1.2.17) (2023-04-02)
7
24
 
8
25
  **Note:** Version bump only for package @operato/board
package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@operato/input/ox-input-value-map.js';
5
- import '@operato/input/ox-input-value-ranges.js';
6
4
  import '@operato/input/ox-buttons-radio.js';
7
5
  import '@operato/input/ox-input-code.js';
8
6
  import '@operato/i18n/ox-i18n.js';
9
7
  import '@operato/help/ox-help-icon.js';
8
+ import './data-binding-value-map.js';
9
+ import './data-binding-value-range.js';
10
10
  import { LitElement, PropertyValues } from 'lit';
11
11
  import { Properties, Scene } from '@hatiolab/things-scene';
12
12
  export type Rule = {
package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js CHANGED
@@ -2,12 +2,12 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@operato/input/ox-input-value-map.js';
6
- import '@operato/input/ox-input-value-ranges.js';
7
5
  import '@operato/input/ox-buttons-radio.js';
8
6
  import '@operato/input/ox-input-code.js';
9
7
  import '@operato/i18n/ox-i18n.js';
10
8
  import '@operato/help/ox-help-icon.js';
9
+ import './data-binding-value-map.js';
10
+ import './data-binding-value-range.js';
11
11
  import { css, html, LitElement } from 'lit';
12
12
  import { property, query, state } from 'lit/decorators.js';
13
13
  /**
@@ -36,7 +36,7 @@ export class DataBindingMapper extends LitElement {
36
36
  strokeStyle: 'color',
37
37
  fontColor: 'color',
38
38
  data: 'object',
39
- source: 'object',
39
+ source: 'attachment',
40
40
  location: 'object',
41
41
  dimension: 'object',
42
42
  text: 'string',
@@ -56,7 +56,9 @@ export class DataBindingMapper extends LitElement {
56
56
  rule: 'value'
57
57
  };
58
58
  return html `
59
- <label for="accessor-input"> <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"> </label>
59
+ <label for="accessor-input">
60
+ <ox-i18n msgid="label.accessor">accessor</ox-i18n><ox-help-icon topic="board-modeller/accessor"></ox-help-icon>
61
+ </label>
60
62
  <input
61
63
  id="accessor-input"
62
64
  value-key="accessor"
@@ -89,13 +91,13 @@ export class DataBindingMapper extends LitElement {
89
91
  <option value="[propkey]"></option>
90
92
  ${this._componentIds.length
91
93
  ? html `
92
- ${this._componentIds.map(({ value, description }) => html ` <option value=${value}>${description}</option> `)}
93
- `
94
+ ${this._componentIds.map(({ value, description }) => html ` <option value=${value}>${description}</option> `)}
95
+ `
94
96
  : html ``}
95
97
  </datalist>
96
98
 
97
99
  <label for="property-input"> <ox-i18n msgid="label.property">property</ox-i18n> </label>
98
- <select id="property-input" value-key="property" .value=${mapping.property}>
100
+ <select id="property-input" value-key="property" .value=${mapping.property || ''}>
99
101
  ${this.properties.map(item => html ` <option .value=${item.name} ?selected=${item.name == mapping.property}>${item.label}</option> `)}
100
102
  </select>
101
103
 
@@ -108,21 +110,21 @@ export class DataBindingMapper extends LitElement {
108
110
  </ox-buttons-radio>
109
111
 
110
112
  <div rule-editors ?hidden=${mapping.rule == 'value'}>
111
- <ox-input-value-map
113
+ <data-binding-value-map
112
114
  value-key="map"
113
115
  .value=${this.rule.map || {}}
114
116
  .valuetype=${this._valuetype(mapping.property)}
115
117
  ?active=${mapping.rule == 'map'}
116
118
  >
117
- </ox-input-value-map>
119
+ </data-binding-value-map>
118
120
 
119
- <ox-input-value-ranges
121
+ <data-binding-value-ranges
120
122
  value-key="range"
121
123
  .value=${this.rule.range || []}
122
124
  .valuetype=${this._valuetype(mapping.property)}
123
125
  ?active=${mapping.rule == 'range'}
124
126
  >
125
- </ox-input-value-ranges>
127
+ </data-binding-value-ranges>
126
128
 
127
129
  <ox-input-code
128
130
  value-key="eval"
package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map CHANGED
@@ -1 +1 @@
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\nimport '@operato/input/ox-input-value-map.js'\nimport '@operato/input/ox-input-value-ranges.js'\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\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 ndnsp?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n <data-binding-mapper mapping=${mapping}>\n </data-binding-mapper>\n*/\n\nexport 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 /* checkbox-row */\n .checkbox-row {\n grid-column: span 10;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n align-items: center;\n }\n\n .checkbox-row > input {\n grid-column: 4 / 5;\n }\n\n .checkbox-row > label {\n grid-column: span 6;\n text-align: left;\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: { value: string; description: string }[] = []\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\"> <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"> </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\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </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 this._componentIds =\n (this.scene &&\n this.scene.ids.map(i => {\n const id = i.key\n return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n })) ||\n []\n }}\n />\n <datalist id=\"target-list\">\n <option value=\"(self)\"></option>\n <option value=\"(key)\"></option>\n <option value=\"[propkey]\"></option>\n ${\n this._componentIds.length\n ? html`\n ${this._componentIds.map(\n ({ value, description }) => html` <option value=${value}>${description}</option> `\n )}\n `\n : html``\n }\n </datalist>\n\n <label for=\"property-input\"> <ox-i18n msgid=\"label.property\">property</ox-i18n> </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> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n </ox-buttons-radio>\n\n <div rule-editors ?hidden=${mapping.rule == 'value'}>\n <ox-input-value-map\n value-key=\"map\"\n .value=${this.rule.map || {}}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'map'}\n >\n </ox-input-value-map>\n\n <ox-input-value-ranges\n value-key=\"range\"\n .value=${this.rule.range || []}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'range'}\n >\n </ox-input-value-ranges>\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 <div class=\"checkbox-row\">\n <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\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: string | boolean = 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 } else if (key === 'ndnsp' /* no data no spreading */) {\n value = element.checked\n\n this.mapping = {\n ...this.mapping,\n ndnsp: value\n }\n }\n\n if (!this.mapping.rule) {\n this.mapping.rule = 'value'\n }\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\nimport '@operato/input/ox-buttons-radio.js'\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-help-icon.js'\nimport './data-binding-value-map.js'\nimport './data-binding-value-range.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\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 ndnsp?: boolean\n}\n\n/**\nelement for mapping data value editing\n\nExample:\n\n <data-binding-mapper mapping=${mapping}>\n </data-binding-mapper>\n*/\n\nexport 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 /* checkbox-row */\n .checkbox-row {\n grid-column: span 10;\n\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n align-items: center;\n }\n\n .checkbox-row > input {\n grid-column: 4 / 5;\n }\n\n .checkbox-row > label {\n grid-column: span 6;\n text-align: left;\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: 'attachment',\n location: 'object',\n dimension: 'object',\n\n text: 'string',\n ref: 'string'\n }\n @state() _componentIds: { value: string; description: string }[] = []\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\">\n <ox-i18n msgid=\"label.accessor\">accessor</ox-i18n><ox-help-icon topic=\"board-modeller/accessor\"></ox-help-icon>\n </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\"> <ox-i18n msgid=\"label.target\">target</ox-i18n> </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 this._componentIds =\n (this.scene &&\n this.scene.ids.map(i => {\n const id = i.key\n return { value: `#${id}`, description: this.scene!.findById(id)?.get('type') }\n })) ||\n []\n }}\n />\n <datalist id=\"target-list\">\n <option value=\"(self)\"></option>\n <option value=\"(key)\"></option>\n <option value=\"[propkey]\"></option>\n ${this._componentIds.length\n ? html`\n ${this._componentIds.map(\n ({ value, description }) => html` <option value=${value}>${description}</option> `\n )}\n `\n : html``}\n </datalist>\n\n <label for=\"property-input\"> <ox-i18n msgid=\"label.property\">property</ox-i18n> </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> <ox-i18n msgid=\"label.rule-type\">rule type</ox-i18n> </label>\n <ox-buttons-radio .value=${mapping.rule} @change=${(e: Event) => this._onChangeRule(e)}>\n <div data-value=\"value\"><ox-i18n msgid=\"label.value\"></ox-i18n></div>\n <div data-value=\"map\"><ox-i18n msgid=\"label.map\"></ox-i18n></div>\n <div data-value=\"range\"><ox-i18n msgid=\"label.range\"></ox-i18n></div>\n <div data-value=\"eval\"><ox-i18n msgid=\"label.eval\"></ox-i18n></div>\n </ox-buttons-radio>\n\n <div rule-editors ?hidden=${mapping.rule == 'value'}>\n <data-binding-value-map\n value-key=\"map\"\n .value=${this.rule.map || {}}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'map'}\n >\n </data-binding-value-map>\n\n <data-binding-value-ranges\n value-key=\"range\"\n .value=${this.rule.range || []}\n .valuetype=${this._valuetype(mapping.property!)}\n ?active=${mapping.rule == 'range'}\n >\n </data-binding-value-ranges>\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 <div class=\"checkbox-row\">\n <input id=\"checkbox-ndnsp\" type=\"checkbox\" value-key=\"ndnsp\" .checked=${mapping.ndnsp === true} />\n <label for=\"checkbox-ndnsp\"> <ox-i18n msgid=\"label.ndnsp\">No Data No Spreading</ox-i18n> </label>\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: string | boolean = 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 } else if (key === 'ndnsp' /* no data no spreading */) {\n value = element.checked\n\n this.mapping = {\n ...this.mapping,\n ndnsp: value\n }\n }\n\n if (!this.mapping.rule) {\n this.mapping.rule = 'value'\n }\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"]}
package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { OxInputValueMap } from '@operato/input';
2
+ import '@operato/attachment/ox-attachment-selector.js';
3
+ export declare class DataBindingValueMap extends OxInputValueMap {
4
+ static styles: import("lit").CSSResult;
5
+ valueInputTemplate(value?: any): import("lit-html").TemplateResult<1>;
6
+ }
package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js ADDED
@@ -0,0 +1,20 @@
1
+ import { __decorate } from "tslib";
2
+ import { html } from 'lit';
3
+ import { customElement } from 'lit/decorators.js';
4
+ import { ifDefined } from 'lit/directives/if-defined.js';
5
+ import { OxInputValueMap } from '@operato/input';
6
+ import '@operato/attachment/ox-attachment-selector.js';
7
+ let DataBindingValueMap = class DataBindingValueMap extends OxInputValueMap {
8
+ valueInputTemplate(value) {
9
+ if (this.valuetype == 'attachment') {
10
+ return html `<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`;
11
+ }
12
+ return super.valueInputTemplate(value);
13
+ }
14
+ };
15
+ DataBindingValueMap.styles = OxInputValueMap.styles;
16
+ DataBindingValueMap = __decorate([
17
+ customElement('data-binding-value-map')
18
+ ], DataBindingValueMap);
19
+ export { DataBindingValueMap };
20
+ //# sourceMappingURL=data-binding-value-map.js.map
package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-binding-value-map.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-value-map.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAEhD,OAAO,+CAA+C,CAAA;AAG/C,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;IAGtD,kBAAkB,CAAC,KAAW;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE;YAClC,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,KAAK,CAAC,4BAA4B,CAAA;SACpG;QACD,OAAO,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAPM,0BAAM,GAAG,eAAe,CAAC,MAAM,CAAA;AAD3B,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAS/B;SATY,mBAAmB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxInputValueMap } from '@operato/input'\n\nimport '@operato/attachment/ox-attachment-selector.js'\n\n@customElement('data-binding-value-map')\nexport class DataBindingValueMap extends OxInputValueMap {\n static styles = OxInputValueMap.styles\n\n valueInputTemplate(value?: any) {\n if (this.valuetype == 'attachment') {\n return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`\n }\n return super.valueInputTemplate(value)\n }\n}\n"]}
package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { OxInputValueRange } from '@operato/input';
2
+ import '@operato/attachment/ox-attachment-selector.js';
3
+ export declare class DataBindingValueRange extends OxInputValueRange {
4
+ static styles: import("lit").CSSResult;
5
+ valueInputTemplate(value?: any): import("lit-html").TemplateResult<1>;
6
+ }
package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js ADDED
@@ -0,0 +1,20 @@
1
+ import { __decorate } from "tslib";
2
+ import { html } from 'lit';
3
+ import { customElement } from 'lit/decorators.js';
4
+ import { ifDefined } from 'lit/directives/if-defined.js';
5
+ import { OxInputValueRange } from '@operato/input';
6
+ import '@operato/attachment/ox-attachment-selector.js';
7
+ let DataBindingValueRange = class DataBindingValueRange extends OxInputValueRange {
8
+ valueInputTemplate(value) {
9
+ if (this.valuetype == 'attachment') {
10
+ return html `<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`;
11
+ }
12
+ return super.valueInputTemplate(value);
13
+ }
14
+ };
15
+ DataBindingValueRange.styles = OxInputValueRange.styles;
16
+ DataBindingValueRange = __decorate([
17
+ customElement('data-binding-value-range')
18
+ ], DataBindingValueRange);
19
+ export { DataBindingValueRange };
20
+ //# sourceMappingURL=data-binding-value-range.js.map
package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-binding-value-range.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/data-binding/data-binding-value-range.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,+CAA+C,CAAA;AAG/C,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,iBAAiB;IAG1D,kBAAkB,CAAC,KAAW;QAC5B,IAAI,IAAI,CAAC,SAAS,IAAI,YAAY,EAAE;YAClC,OAAO,IAAI,CAAA,4CAA4C,SAAS,CAAC,KAAK,CAAC,4BAA4B,CAAA;SACpG;QACD,OAAO,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;;AAPM,4BAAM,GAAG,iBAAiB,CAAC,MAAM,CAAA;AAD7B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CASjC;SATY,qBAAqB","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxInputValueRange } from '@operato/input'\n\nimport '@operato/attachment/ox-attachment-selector.js'\n\n@customElement('data-binding-value-range')\nexport class DataBindingValueRange extends OxInputValueRange {\n static styles = OxInputValueRange.styles\n\n valueInputTemplate(value?: any) {\n if (this.valuetype == 'attachment') {\n return html`<ox-attachment-selector data-value value=${ifDefined(value)}></ox-attachment-selector>`\n }\n return super.valueInputTemplate(value)\n }\n}\n"]}