@operato/board 0.2.46 → 0.2.47

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 (57) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/custom-elements.json +485 -501
  3. package/demo/index-modeller.html +101 -0
  4. package/demo/index.html +3 -3
  5. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts +1 -2
  6. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +21 -19
  7. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map +1 -1
  8. package/dist/src/modeller/property-sidebar/data-binding/data-binding.d.ts +0 -1
  9. package/dist/src/modeller/property-sidebar/data-binding/data-binding.js +20 -17
  10. package/dist/src/modeller/property-sidebar/data-binding/data-binding.js.map +1 -1
  11. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js +2 -2
  12. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js.map +1 -1
  13. package/dist/src/modeller/property-sidebar/effects/effects.d.ts +0 -1
  14. package/dist/src/modeller/property-sidebar/effects/effects.js +6 -10
  15. package/dist/src/modeller/property-sidebar/effects/effects.js.map +1 -1
  16. package/dist/src/modeller/property-sidebar/effects/property-animation.d.ts +2 -3
  17. package/dist/src/modeller/property-sidebar/effects/property-animation.js +21 -25
  18. package/dist/src/modeller/property-sidebar/effects/property-animation.js.map +1 -1
  19. package/dist/src/modeller/property-sidebar/effects/property-animations.d.ts +0 -1
  20. package/dist/src/modeller/property-sidebar/effects/property-animations.js +3 -4
  21. package/dist/src/modeller/property-sidebar/effects/property-animations.js.map +1 -1
  22. package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts +1 -1
  23. package/dist/src/modeller/property-sidebar/effects/property-event-hover.js +2 -7
  24. package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map +1 -1
  25. package/dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts +1 -1
  26. package/dist/src/modeller/property-sidebar/effects/property-event-tap.js +2 -7
  27. package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map +1 -1
  28. package/dist/src/modeller/property-sidebar/effects/property-event.d.ts +0 -1
  29. package/dist/src/modeller/property-sidebar/effects/property-event.js +4 -8
  30. package/dist/src/modeller/property-sidebar/effects/property-event.js.map +1 -1
  31. package/dist/src/modeller/property-sidebar/effects/property-shadow.d.ts +1 -2
  32. package/dist/src/modeller/property-sidebar/effects/property-shadow.js +6 -10
  33. package/dist/src/modeller/property-sidebar/effects/property-shadow.js.map +1 -1
  34. package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts +1 -1
  35. package/dist/src/modeller/property-sidebar/property-shared-style.js +2 -2
  36. package/dist/src/modeller/property-sidebar/property-shared-style.js.map +1 -1
  37. package/dist/src/modeller/property-sidebar/shapes/shapes.d.ts +2 -3
  38. package/dist/src/modeller/property-sidebar/shapes/shapes.js +27 -30
  39. package/dist/src/modeller/property-sidebar/shapes/shapes.js.map +1 -1
  40. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +0 -1
  41. package/dist/src/modeller/property-sidebar/styles/styles.js +0 -1
  42. package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -1
  43. package/dist/tsconfig.tsbuildinfo +1 -1
  44. package/package.json +4 -4
  45. package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts +24 -21
  46. package/src/modeller/property-sidebar/data-binding/data-binding.ts +21 -19
  47. package/src/modeller/property-sidebar/effects/effects-shared-style.ts +2 -2
  48. package/src/modeller/property-sidebar/effects/effects.ts +10 -8
  49. package/src/modeller/property-sidebar/effects/property-animation.ts +25 -23
  50. package/src/modeller/property-sidebar/effects/property-animations.ts +7 -5
  51. package/src/modeller/property-sidebar/effects/property-event-hover.ts +4 -5
  52. package/src/modeller/property-sidebar/effects/property-event-tap.ts +4 -5
  53. package/src/modeller/property-sidebar/effects/property-event.ts +8 -6
  54. package/src/modeller/property-sidebar/effects/property-shadow.ts +9 -7
  55. package/src/modeller/property-sidebar/property-shared-style.ts +2 -2
  56. package/src/modeller/property-sidebar/shapes/shapes.ts +29 -31
  57. package/src/modeller/property-sidebar/styles/styles.ts +2 -2
@@ -2,30 +2,26 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
5
  import './property-animations';
7
6
  import './property-event';
8
7
  import './property-shadow';
8
+ import { html } from 'lit';
9
9
  import { customElement, property } from 'lit/decorators';
10
10
  import { AbstractProperty } from '../abstract-property';
11
11
  import { PropertySharedStyle } from '../property-shared-style';
12
- import { html } from 'lit';
13
12
  let PropertyEffects = class PropertyEffects extends AbstractProperty {
14
- constructor() {
15
- super(...arguments);
16
- this.value = {};
17
- }
18
13
  firstUpdated() {
19
14
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
20
15
  }
21
16
  render() {
17
+ const value = this.value || {};
22
18
  return html `
23
19
  <fieldset>
24
20
  <legend>
25
21
  <title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</title-with-help>
26
22
  </legend>
27
23
 
28
- <property-shadow value-key="shadow" .value=${this.value.shadow || {}}> </property-shadow>
24
+ <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
29
25
  </fieldset>
30
26
 
31
27
  <fieldset>
@@ -35,14 +31,14 @@ let PropertyEffects = class PropertyEffects extends AbstractProperty {
35
31
 
36
32
  <div class="property-grid">
37
33
  <label> <i18n-msg msgid="label.retention">retention</i18n-msg> </label>
38
- <input type="number" value-key="retention" .value=${this.value.retention} placeholder="ms" />
34
+ <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
39
35
  </div>
40
36
  </fieldset>
41
37
 
42
- <property-animations value-key="animation" .scene=${this.scene} .value=${this.value.animation || {}}>
38
+ <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
43
39
  </property-animations>
44
40
 
45
- <property-event value-key="event" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>
41
+ <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
46
42
  `;
47
43
  }
48
44
  };
@@ -1 +1 @@
1
- {"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAG1B,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,gBAAgB;IAA9C;;QAG8B,UAAK,GAAQ,EAAE,CAAA;IAkC7C,CAAC;IA/BC,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,OAAO,IAAI,CAAA;;;;;;qDAMsC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE;;;;;;;;;;8DAUd,IAAI,CAAC,KAAK,CAAC,SAAS;;;;0DAIxB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE;;;iDAGxD,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;KACvF,CAAA;IACH,CAAC;CACF,CAAA;AApCQ,sBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAgB;AACf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc;AAJrC,eAAe;IADpB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,eAAe,CAqCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-animations'\nimport './property-event'\nimport './property-shadow'\n\nimport { customElement, property } from 'lit/decorators'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { Scene } from '@hatiolab/things-scene'\nimport { html } from 'lit'\n\n@customElement('property-effect')\nclass PropertyEffects extends AbstractProperty {\n static styles = [PropertySharedStyle]\n\n @property({ type: Object }) value: any = {}\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n return html`\n <fieldset>\n <legend>\n <title-with-help topic=\"board-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</title-with-help>\n </legend>\n\n <property-shadow value-key=\"shadow\" .value=${this.value.shadow || {}}> </property-shadow>\n </fieldset>\n\n <fieldset>\n <legend>\n <title-with-help topic=\"board-modeller/effects/retention\" msgid=\"label.retention\">retention</title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label> <i18n-msg msgid=\"label.retention\">retention</i18n-msg> </label>\n <input type=\"number\" value-key=\"retention\" .value=${this.value.retention} placeholder=\"ms\" />\n </div>\n </fieldset>\n\n <property-animations value-key=\"animation\" .scene=${this.scene} .value=${this.value.animation || {}}>\n </property-animations>\n\n <property-event value-key=\"event\" .scene=${this.scene} .value=${this.value.event || {}}> </property-event>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,uBAAuB,CAAA;AAC9B,OAAO,kBAAkB,CAAA;AACzB,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAG9D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,gBAAgB;IAM5C,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;;;;;;qDAMsC,KAAK,CAAC,MAAM,IAAI,EAAE;;;;;;;;;;8DAUT,KAAK,CAAC,SAAS;;;;0DAInB,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,SAAS,IAAI,EAAE;;;iDAGnD,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;KAClF,CAAA;IACH,CAAC;CACF,CAAA;AAtCQ,sBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc;AAJrC,eAAe;IADpB,aAAa,CAAC,iBAAiB,CAAC;GAC3B,eAAe,CAuCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-animations'\nimport './property-event'\nimport './property-shadow'\n\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { AbstractProperty } from '../abstract-property'\nimport { PropertySharedStyle } from '../property-shared-style'\n\n@customElement('property-effect')\nclass PropertyEffects extends AbstractProperty {\n static styles = [PropertySharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <fieldset>\n <legend>\n <title-with-help topic=\"board-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</title-with-help>\n </legend>\n\n <property-shadow value-key=\"shadow\" .value=${value.shadow || {}}> </property-shadow>\n </fieldset>\n\n <fieldset>\n <legend>\n <title-with-help topic=\"board-modeller/effects/retention\" msgid=\"label.retention\">retention</title-with-help>\n </legend>\n\n <div class=\"property-grid\">\n <label> <i18n-msg msgid=\"label.retention\">retention</i18n-msg> </label>\n <input type=\"number\" value-key=\"retention\" .value=${value.retention} placeholder=\"ms\" />\n </div>\n </fieldset>\n\n <property-animations value-key=\"animation\" .scene=${this.scene} .value=${value.animation || {}}>\n </property-animations>\n\n <property-event value-key=\"event\" .scene=${this.scene} .value=${value.event || {}}> </property-event>\n `\n }\n}\n"]}
@@ -1,8 +1,7 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@things-factory/i18n-base';
5
- import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
4
+ import '@operato/input/dist/src/ox-input-angle';
6
5
  import { LitElement } from 'lit';
7
6
  import { Properties, Scene } from '@hatiolab/things-scene';
8
7
  /**
@@ -15,7 +14,7 @@ Example:
15
14
  */
16
15
  export default class PropertyAnimation extends LitElement {
17
16
  static styles: import("lit").CSSResult[];
18
- value: Properties;
17
+ value?: Properties;
19
18
  scene?: Scene;
20
19
  firstUpdated(): void;
21
20
  render(): import("lit-html").TemplateResult<1>;
@@ -2,9 +2,8 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
- import '@things-factory/modeller-ui/client/editors/things-editor-angle-input';
7
- import { LitElement, html } from 'lit';
5
+ import '@operato/input/dist/src/ox-input-angle';
6
+ import { html, LitElement } from 'lit';
8
7
  import { customElement, property } from 'lit/decorators';
9
8
  import { EffectsSharedStyle } from './effects-shared-style';
10
9
  import { convert } from './value-converter';
@@ -17,17 +16,14 @@ Example:
17
16
  </property-animation>
18
17
  */
19
18
  let PropertyAnimation = class PropertyAnimation extends LitElement {
20
- constructor() {
21
- super(...arguments);
22
- this.value = {};
23
- }
24
19
  firstUpdated() {
25
20
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
26
21
  }
27
22
  render() {
23
+ const value = this.value || {};
28
24
  return html `
29
25
  <label>Animation Type</label>
30
- <select value-key="type" .value=${this.value && this.value.type}>
26
+ <select value-key="type" .value=${value.type}>
31
27
  <option value="">None</option>
32
28
  <option value="rotation">Rotation</option>
33
29
  <option value="vibration">Vibration</option>
@@ -38,56 +34,56 @@ let PropertyAnimation = class PropertyAnimation extends LitElement {
38
34
  </select>
39
35
 
40
36
  <label> <i18n-msg msgid="label.waiting-time">waiting time</i18n-msg> </label>
41
- <input type="number" value-key="delay" .value=${this.value.delay} placeholder="ms" />
37
+ <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
42
38
 
43
39
  <label> <i18n-msg msgid="label.duration">duration</i18n-msg> </label>
44
- <input type="number" value-key="duration" .value=${this.value.duration} placeholder="ms" />
40
+ <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
45
41
 
46
- ${this.value.type == 'rotation' || this.value.type == 'vibration'
42
+ ${value.type == 'rotation' || value.type == 'vibration'
47
43
  ? html `
48
44
  <label> <i18n-msg msgid="label.theta">theta</i18n-msg> </label>
49
- <things-editor-angle-input value-key="theta" .radian=${this.value.theta}> </things-editor-angle-input>
45
+ <ox-input-angle value-key="theta" .radian=${value.theta}> </ox-input-angle>
50
46
  `
51
47
  : html ``}
52
- ${this.value.type == 'heartbeat'
48
+ ${value.type == 'heartbeat'
53
49
  ? html `
54
50
  <label> <i18n-msg msgid="label.scale">scale</i18n-msg> </label>
55
- <input type="number" value-key="scale" .value=${this.value.scale} />
51
+ <input type="number" value-key="scale" .value=${value.scale} />
56
52
  `
57
53
  : html ``}
58
- ${this.value.type == 'moving'
54
+ ${value.type == 'moving'
59
55
  ? html `
60
56
  <label> <i18n-msg msgid="label.x-axes">X-axes</i18n-msg> </label>
61
- <input type="number" value-key="x" .value=${this.value.x} />
57
+ <input type="number" value-key="x" .value=${value.x} />
62
58
 
63
59
  <label> <i18n-msg msgid="label.y-axes">Y-axes</i18n-msg> </label>
64
- <input type="number" value-key="y" .value=${this.value.y} />
60
+ <input type="number" value-key="y" .value=${value.y} />
65
61
  `
66
62
  : html ``}
67
- ${this.value.type == 'fade'
63
+ ${value.type == 'fade'
68
64
  ? html `
69
65
  <label> <i18n-msg msgid="label.start-alpha">start alpha</i18n-msg> </label>
70
- <input type="number" value-key="startAlpha" .value=${this.value.startAlpha} />
66
+ <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
71
67
 
72
68
  <label> <i18n-msg msgid="label.end-alpha">end alpha</i18n-msg> </label>
73
- <input type="number" value-key="endAlpha" .value=${this.value.endAlpha} />
69
+ <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
74
70
  `
75
71
  : html ``}
76
- ${this.value.type == 'outline'
72
+ ${value.type == 'outline'
77
73
  ? html `
78
74
  <label> <i18n-msg msgid="label.target">target</i18n-msg> </label>
79
- <input value-key="rideOn" .value=${this.value.rideOn || ''} list="target-list" />
75
+ <input value-key="rideOn" .value=${value.rideOn || ''} list="target-list" />
80
76
  <datalist id="target-list">
81
77
  ${this.scene.ids.map(info => info.key).map(id => html ` <option value=${id}></option> `)}
82
78
  </datalist>
83
79
  `
84
80
  : html ``}
85
81
 
86
- <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${this.value.repeat} />
82
+ <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${value.repeat} />
87
83
  <label for="checkbox-repeat" class="checkbox-label"> <i18n-msg msgid="label.repeat">repeat</i18n-msg> </label>
88
84
 
89
85
  <label>delta</label>
90
- <select value-key="delta" .value=${this.value.delta}>
86
+ <select value-key="delta" .value=${value.delta}>
91
87
  <option value="linear">linear</option>
92
88
  <option value="quad">quad</option>
93
89
  <option value="circ">circ</option>
@@ -97,7 +93,7 @@ let PropertyAnimation = class PropertyAnimation extends LitElement {
97
93
  </select>
98
94
 
99
95
  <label>ease</label>
100
- <select value-key="ease" .value=${this.value.ease}>
96
+ <select value-key="ease" .value=${value.ease}>
101
97
  <option value="in">in</option>
102
98
  <option value="out">out</option>
103
99
  <option value="inout">inout</option>
@@ -1 +1 @@
1
- {"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport '@things-factory/modeller-ui/client/editors/things-editor-angle-input'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n <property-animation .value=${animation}>\n </property-animation>\n*/\n\n@customElement('property-animation')\nexport default class PropertyAnimation extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value: Properties = {}\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n return html`\n <label>Animation Type</label>\n <select value-key=\"type\" .value=${this.value && this.value.type}>\n <option value=\"\">None</option>\n <option value=\"rotation\">Rotation</option>\n <option value=\"vibration\">Vibration</option>\n <option value=\"heartbeat\">Heartbeat</option>\n <option value=\"moving\">Moving</option>\n <option value=\"fade\">Fade</option>\n <option value=\"outline\">Outline</option>\n </select>\n\n <label> <i18n-msg msgid=\"label.waiting-time\">waiting time</i18n-msg> </label>\n <input type=\"number\" value-key=\"delay\" .value=${this.value.delay} placeholder=\"ms\" />\n\n <label> <i18n-msg msgid=\"label.duration\">duration</i18n-msg> </label>\n <input type=\"number\" value-key=\"duration\" .value=${this.value.duration} placeholder=\"ms\" />\n\n ${this.value.type == 'rotation' || this.value.type == 'vibration'\n ? html`\n <label> <i18n-msg msgid=\"label.theta\">theta</i18n-msg> </label>\n <things-editor-angle-input value-key=\"theta\" .radian=${this.value.theta}> </things-editor-angle-input>\n `\n : html``}\n ${this.value.type == 'heartbeat'\n ? html`\n <label> <i18n-msg msgid=\"label.scale\">scale</i18n-msg> </label>\n <input type=\"number\" value-key=\"scale\" .value=${this.value.scale} />\n `\n : html``}\n ${this.value.type == 'moving'\n ? html`\n <label> <i18n-msg msgid=\"label.x-axes\">X-axes</i18n-msg> </label>\n <input type=\"number\" value-key=\"x\" .value=${this.value.x} />\n\n <label> <i18n-msg msgid=\"label.y-axes\">Y-axes</i18n-msg> </label>\n <input type=\"number\" value-key=\"y\" .value=${this.value.y} />\n `\n : html``}\n ${this.value.type == 'fade'\n ? html`\n <label> <i18n-msg msgid=\"label.start-alpha\">start alpha</i18n-msg> </label>\n <input type=\"number\" value-key=\"startAlpha\" .value=${this.value.startAlpha} />\n\n <label> <i18n-msg msgid=\"label.end-alpha\">end alpha</i18n-msg> </label>\n <input type=\"number\" value-key=\"endAlpha\" .value=${this.value.endAlpha} />\n `\n : html``}\n ${this.value.type == 'outline'\n ? html`\n <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n <input value-key=\"rideOn\" .value=${this.value.rideOn || ''} list=\"target-list\" />\n <datalist id=\"target-list\">\n ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n </datalist>\n `\n : html``}\n\n <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${this.value.repeat} />\n <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <i18n-msg msgid=\"label.repeat\">repeat</i18n-msg> </label>\n\n <label>delta</label>\n <select value-key=\"delta\" .value=${this.value.delta}>\n <option value=\"linear\">linear</option>\n <option value=\"quad\">quad</option>\n <option value=\"circ\">circ</option>\n <option value=\"back\">back</option>\n <option value=\"bounce\">bounce</option>\n <option value=\"elastic\">elastic</option>\n </select>\n\n <label>ease</label>\n <select value-key=\"ease\" .value=${this.value.ease}>\n <option value=\"in\">in</option>\n <option value=\"out\">out</option>\n <option value=\"inout\">inout</option>\n </select>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1
+ {"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/dist/src/ox-input-angle'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n <property-animation .value=${animation}>\n </property-animation>\n*/\n\n@customElement('property-animation')\nexport default class PropertyAnimation extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <label>Animation Type</label>\n <select value-key=\"type\" .value=${value.type}>\n <option value=\"\">None</option>\n <option value=\"rotation\">Rotation</option>\n <option value=\"vibration\">Vibration</option>\n <option value=\"heartbeat\">Heartbeat</option>\n <option value=\"moving\">Moving</option>\n <option value=\"fade\">Fade</option>\n <option value=\"outline\">Outline</option>\n </select>\n\n <label> <i18n-msg msgid=\"label.waiting-time\">waiting time</i18n-msg> </label>\n <input type=\"number\" value-key=\"delay\" .value=${value.delay} placeholder=\"ms\" />\n\n <label> <i18n-msg msgid=\"label.duration\">duration</i18n-msg> </label>\n <input type=\"number\" value-key=\"duration\" .value=${value.duration} placeholder=\"ms\" />\n\n ${value.type == 'rotation' || value.type == 'vibration'\n ? html`\n <label> <i18n-msg msgid=\"label.theta\">theta</i18n-msg> </label>\n <ox-input-angle value-key=\"theta\" .radian=${value.theta}> </ox-input-angle>\n `\n : html``}\n ${value.type == 'heartbeat'\n ? html`\n <label> <i18n-msg msgid=\"label.scale\">scale</i18n-msg> </label>\n <input type=\"number\" value-key=\"scale\" .value=${value.scale} />\n `\n : html``}\n ${value.type == 'moving'\n ? html`\n <label> <i18n-msg msgid=\"label.x-axes\">X-axes</i18n-msg> </label>\n <input type=\"number\" value-key=\"x\" .value=${value.x} />\n\n <label> <i18n-msg msgid=\"label.y-axes\">Y-axes</i18n-msg> </label>\n <input type=\"number\" value-key=\"y\" .value=${value.y} />\n `\n : html``}\n ${value.type == 'fade'\n ? html`\n <label> <i18n-msg msgid=\"label.start-alpha\">start alpha</i18n-msg> </label>\n <input type=\"number\" value-key=\"startAlpha\" .value=${value.startAlpha} />\n\n <label> <i18n-msg msgid=\"label.end-alpha\">end alpha</i18n-msg> </label>\n <input type=\"number\" value-key=\"endAlpha\" .value=${value.endAlpha} />\n `\n : html``}\n ${value.type == 'outline'\n ? html`\n <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n <input value-key=\"rideOn\" .value=${value.rideOn || ''} list=\"target-list\" />\n <datalist id=\"target-list\">\n ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n </datalist>\n `\n : html``}\n\n <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${value.repeat} />\n <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <i18n-msg msgid=\"label.repeat\">repeat</i18n-msg> </label>\n\n <label>delta</label>\n <select value-key=\"delta\" .value=${value.delta}>\n <option value=\"linear\">linear</option>\n <option value=\"quad\">quad</option>\n <option value=\"circ\">circ</option>\n <option value=\"back\">back</option>\n <option value=\"bounce\">bounce</option>\n <option value=\"elastic\">elastic</option>\n </select>\n\n <label>ease</label>\n <select value-key=\"ease\" .value=${value.ease}>\n <option value=\"in\">in</option>\n <option value=\"out\">out</option>\n <option value=\"inout\">inout</option>\n </select>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
@@ -1,6 +1,5 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@things-factory/i18n-base';
5
4
  import './property-animation';
6
5
  import '@material/mwc-icon';
@@ -2,23 +2,22 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
5
  import './property-animation';
7
6
  import '@material/mwc-icon';
8
- import { LitElement, css, html } from 'lit';
7
+ import { css, html, LitElement } from 'lit';
9
8
  import { customElement, property, state } from 'lit/decorators';
10
9
  import { PropertySharedStyle } from '../property-shared-style';
11
10
  import { convert } from './value-converter';
12
11
  let PropertyAnimations = class PropertyAnimations extends LitElement {
13
12
  constructor() {
14
13
  super(...arguments);
15
- this.value = {};
16
14
  this._expanded = false;
17
15
  }
18
16
  firstUpdated() {
19
17
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
20
18
  }
21
19
  render() {
20
+ const value = this.value || {};
22
21
  return html `
23
22
  <fieldset collapsable ?collapsed=${!this._expanded}>
24
23
  <legend>
@@ -31,7 +30,7 @@ let PropertyAnimations = class PropertyAnimations extends LitElement {
31
30
  >
32
31
  </legend>
33
32
 
34
- <property-animation value-key="oncreate" .scene=${this.scene} .value=${this.value.oncreate || {}}>
33
+ <property-animation value-key="oncreate" .scene=${this.scene} .value=${value.oncreate || {}}>
35
34
  </property-animation>
36
35
  </fieldset>
37
36
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"property-animations.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAsB8B,UAAK,GAAe,EAAE,CAAA;QAGzC,cAAS,GAAY,KAAK,CAAA;IAwCrC,CAAC;IAtCC,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,OAAO,IAAI,CAAA;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;qBAInC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAA;QAClC,CAAC;eACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;;0DAIH,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE;;;KAGnG,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;AAhEQ,yBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAEhC;IAAR,KAAK,EAAE;qDAA2B;AAzB/B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAiEvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-animation'\nimport '@material/mwc-icon'\n\nimport { LitElement, css, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-animations')\nclass PropertyAnimations extends LitElement {\n static styles = [\n PropertySharedStyle,\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 ]\n\n @property({ type: Object }) value: Properties = {}\n @property({ type: Object }) scene!: Scene\n\n @state() _expanded: boolean = false\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n return html`\n <fieldset collapsable ?collapsed=${!this._expanded}>\n <legend>\n <title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\">animation</title-with-help>\n <mwc-icon\n @click=${() => {\n this._expanded = !this._expanded\n }}\n >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon\n >\n </legend>\n\n <property-animation value-key=\"oncreate\" .scene=${this.scene} .value=${this.value.oncreate || {}}>\n </property-animation>\n </fieldset>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1
+ {"version":3,"file":"property-animations.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAI/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAyBW,cAAS,GAAY,KAAK,CAAA;IA0CrC,CAAC;IAxCC,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;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;qBAInC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAA;QAClC,CAAC;eACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;;;;0DAIH,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,QAAQ,IAAI,EAAE;;;KAG9F,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;AAlEQ,yBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AAEhC;IAAR,KAAK,EAAE;qDAA2B;AAzB/B,kBAAkB;IADvB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,kBAAkB,CAmEvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-animation'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-animations')\nclass PropertyAnimations extends LitElement {\n static styles = [\n PropertySharedStyle,\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 ]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene!: Scene\n\n @state() _expanded: 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 collapsable ?collapsed=${!this._expanded}>\n <legend>\n <title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\">animation</title-with-help>\n <mwc-icon\n @click=${() => {\n this._expanded = !this._expanded\n }}\n >${this._expanded ? 'expand_less' : 'expand_more'}</mwc-icon\n >\n </legend>\n\n <property-animation value-key=\"oncreate\" .scene=${this.scene} .value=${value.oncreate || {}}>\n </property-animation>\n </fieldset>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@things-factory/i18n-base';
4
+ export {};
@@ -2,21 +2,16 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
- import { LitElement, html } from 'lit';
5
+ import { html, LitElement } from 'lit';
7
6
  import { customElement, property } from 'lit/decorators';
8
7
  import { EffectsSharedStyle } from './effects-shared-style';
9
8
  import { convert } from './value-converter';
10
9
  let PropertyEventHover = class PropertyEventHover extends LitElement {
11
- constructor() {
12
- super(...arguments);
13
- this.value = {};
14
- }
15
10
  firstUpdated() {
16
11
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
17
12
  }
18
13
  render() {
19
- var { action, value = '', target = '', emphasize, restore } = this.value;
14
+ var { action, value = '', target = '', emphasize, restore } = this.value || {};
20
15
  return html `
21
16
  <input id="checkbox-emphasize" type="checkbox" value-key="emphasize" .checked=${emphasize} />
22
17
  <label for="checkbox-emphasize" class="checkbox-label">
@@ -1 +1 @@
1
- {"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-hover')\nclass PropertyEventHover extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value: Properties = {}\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n var { action, value = '', target = '', emphasize, restore } = this.value\n\n return html`\n <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n <i18n-msg msgid=\"label.emphasize\">emphasize</i18n-msg>\n </label>\n\n <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </label>\n <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n <option value=\"\"></option>\n <option value=\"popup\">popup target board</option>\n <option value=\"infoWindow\">open infowindow</option>\n <option value=\"data-toggle\">toggle(true/false) target component data</option>\n <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n <option value=\"data-set\">set value to target component data</option>\n <option value=\"value-set\">set value to target component value</option>\n </select>\n\n <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n\n ${action == 'popup'\n ? html`\n <things-editor-board-selector\n value-key=\"target\"\n .value=${target}\n custom-editor\n ></things-editor-board-selector>\n `\n : html`\n <input\n value-key=\"target\"\n .value=${target || ''}\n list=\"target-list\"\n .placeholder=\"${this._getPlaceHoder(action)}\"\n />\n\n <datalist id=\"target-list\">\n ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n </datalist>\n `}\n ${action == 'data-set' || action == 'value-set'\n ? html`\n <label> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n <things-editor-data value-key=\"value\" .value=${value} custom-editor fullwidth></things-editor-data>\n `\n : html``}\n\n <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n <label for=\"checkbox-restore\" class=\"checkbox-label\">\n <i18n-msg msgid=\"label.restore-on-leave\">restore on leave</i18n-msg>\n </label>\n `\n }\n\n _getPlaceHoder(action: string) {\n switch (action) {\n case 'popup':\n case 'goto':\n return 'SCENE-100'\n case 'link-open':\n case 'link-move':\n return 'http://www.hatiolab.com/'\n default:\n return ''\n }\n }\n\n _getTargetList(action: string) {\n switch (action) {\n case 'data-toggle':\n case 'data-tristate':\n case 'data-set':\n case 'value-set':\n let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n ids.unshift('(self)')\n return ids\n case 'infoWindow':\n return (\n (this.scene &&\n this.scene.ids\n .filter(i => {\n return this.scene!.findById(i.key).get('type') == 'info-window'\n })\n .map(i => `${i.key}`)) ||\n []\n )\n default:\n return []\n }\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1
+ {"version":3,"file":"property-event-hover.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event-hover.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event-hover')\nclass PropertyEventHover extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n var { action, value = '', target = '', emphasize, restore } = this.value || {}\n\n return html`\n <input id=\"checkbox-emphasize\" type=\"checkbox\" value-key=\"emphasize\" .checked=${emphasize} />\n <label for=\"checkbox-emphasize\" class=\"checkbox-label\">\n <i18n-msg msgid=\"label.emphasize\">emphasize</i18n-msg>\n </label>\n\n <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </label>\n <select id=\"tap-select\" value-key=\"action\" .value=${action || ''}>\n <option value=\"\"></option>\n <option value=\"popup\">popup target board</option>\n <option value=\"infoWindow\">open infowindow</option>\n <option value=\"data-toggle\">toggle(true/false) target component data</option>\n <option value=\"data-tristate\">tristate(0/1/2) target component data</option>\n <option value=\"data-set\">set value to target component data</option>\n <option value=\"value-set\">set value to target component value</option>\n </select>\n\n <label> <i18n-msg msgid=\"label.target\">target</i18n-msg> </label>\n\n ${action == 'popup'\n ? html`\n <things-editor-board-selector\n value-key=\"target\"\n .value=${target}\n custom-editor\n ></things-editor-board-selector>\n `\n : html`\n <input\n value-key=\"target\"\n .value=${target || ''}\n list=\"target-list\"\n .placeholder=\"${this._getPlaceHoder(action)}\"\n />\n\n <datalist id=\"target-list\">\n ${this._getTargetList(action).map(item => html` <option .value=${item}></option> `)}\n </datalist>\n `}\n ${action == 'data-set' || action == 'value-set'\n ? html`\n <label> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n <things-editor-data value-key=\"value\" .value=${value} custom-editor fullwidth></things-editor-data>\n `\n : html``}\n\n <input id=\"checkbox-restore\" type=\"checkbox\" value-key=\"restore\" .checked=${restore} />\n <label for=\"checkbox-restore\" class=\"checkbox-label\">\n <i18n-msg msgid=\"label.restore-on-leave\">restore on leave</i18n-msg>\n </label>\n `\n }\n\n _getPlaceHoder(action: string) {\n switch (action) {\n case 'popup':\n case 'goto':\n return 'SCENE-100'\n case 'link-open':\n case 'link-move':\n return 'http://www.hatiolab.com/'\n default:\n return ''\n }\n }\n\n _getTargetList(action: string) {\n switch (action) {\n case 'data-toggle':\n case 'data-tristate':\n case 'data-set':\n case 'value-set':\n let ids = (this.scene && this.scene.ids.map(i => `#${i.key}`)) || []\n ids.unshift('(self)')\n return ids\n case 'infoWindow':\n return (\n (this.scene &&\n this.scene.ids\n .filter(i => {\n return this.scene!.findById(i.key).get('type') == 'info-window'\n })\n .map(i => `${i.key}`)) ||\n []\n )\n default:\n return []\n }\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@things-factory/i18n-base';
4
+ export {};
@@ -2,21 +2,16 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
- import { LitElement, html } from 'lit';
5
+ import { html, LitElement } from 'lit';
7
6
  import { customElement, property } from 'lit/decorators';
8
7
  import { EffectsSharedStyle } from './effects-shared-style';
9
8
  import { convert } from './value-converter';
10
9
  let PropertyEventTap = class PropertyEventTap extends LitElement {
11
- constructor() {
12
- super(...arguments);
13
- this.value = {};
14
- }
15
10
  firstUpdated() {
16
11
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
17
12
  }
18
13
  render() {
19
- var { action, value = '', target = '', pressed } = this.value;
14
+ var { action, value = '', target = '', pressed } = this.value || {};
20
15
  return html `
21
16
  <input id="checkbox-pressed" type="checkbox" value-key="pressed" .checked=${pressed} />
22
17
  <label for="checkbox-pressed" class="checkbox-label"> <i18n-msg msgid="label.pressed">pressed</i18n-msg> </label>
@@ -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,2BAA2B,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAG8B,UAAK,GAAe,EAAE,CAAA;IA+GpD,CAAC;IA5GC,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,IAAI,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE7D,OAAO,IAAI,CAAA;kFACmE,OAAO;;;;0DAI/B,MAAM,IAAI,EAAE;;;;;;;;;;;;;;;;;;;QAmB9D,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,OAAO;YACrC,CAAC,CAAC,IAAI,CAAA;;;uBAGS,MAAM;;;WAGlB;YACH,CAAC,CAAC,IAAI,CAAA;+CACiC,MAAM,oCAAoC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;;;gBAGpG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,mBAAmB,IAAI,aAAa,CAAC;;WAEtF;QACH,MAAM,IAAI,UAAU,IAAI,MAAM,IAAI,WAAW;YAC7C,CAAC,CAAC,IAAI,CAAA;;2DAE6C,KAAK;WACrD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,OAAO,CAAC;YACb,KAAK,MAAM;gBACT,OAAO,WAAW,CAAA;YACpB,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACd,OAAO,0BAA0B,CAAA;YACnC;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,aAAa,CAAC;YACnB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;gBACpE,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;gBACrB,OAAO,GAAG,CAAA;YACZ,KAAK,YAAY,CAAC;YAClB,KAAK,oBAAoB;gBACvB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,KAAK,CAAC,GAAG;yBACX,MAAM,CAAC,CAAC,CAAC,EAAE;wBACV,OAAO,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,aAAa,CAAA;oBACjE,CAAC,CAAC;yBACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;oBAC1B,EAAE,CACH,CAAA;YACH;gBACE,OAAO,EAAE,CAAA;SACZ;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;AAjHQ,uBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAA;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AAJrC,gBAAgB;IADrB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,gBAAgB,CAkHrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\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\"> <i18n-msg msgid=\"label.pressed\">pressed</i18n-msg> </label>\n\n <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </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> <i18n-msg msgid=\"label.target\">target</i18n-msg> </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> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n <things-editor-data value-key=\"value\" .value=${value} custom-editor fullwidth></things-editor-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"]}
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,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAMvC,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,IAAI,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAEnE,OAAO,IAAI,CAAA;kFACmE,OAAO;;;;0DAI/B,MAAM,IAAI,EAAE;;;;;;;;;;;;;;;;;;;QAmB9D,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,OAAO;YACrC,CAAC,CAAC,IAAI,CAAA;;;uBAGS,MAAM;;;WAGlB;YACH,CAAC,CAAC,IAAI,CAAA;+CACiC,MAAM,oCAAoC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;;;gBAGpG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA,mBAAmB,IAAI,aAAa,CAAC;;WAEtF;QACH,MAAM,IAAI,UAAU,IAAI,MAAM,IAAI,WAAW;YAC7C,CAAC,CAAC,IAAI,CAAA;;2DAE6C,KAAK;WACrD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,OAAO,CAAC;YACb,KAAK,MAAM;gBACT,OAAO,WAAW,CAAA;YACpB,KAAK,WAAW,CAAC;YACjB,KAAK,WAAW;gBACd,OAAO,0BAA0B,CAAA;YACnC;gBACE,OAAO,EAAE,CAAA;SACZ;IACH,CAAC;IAED,cAAc,CAAC,MAAc;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,aAAa,CAAC;YACnB,KAAK,eAAe,CAAC;YACrB,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;gBACpE,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;gBACrB,OAAO,GAAG,CAAA;YACZ,KAAK,YAAY,CAAC;YAClB,KAAK,oBAAoB;gBACvB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK;oBACT,IAAI,CAAC,KAAK,CAAC,GAAG;yBACX,MAAM,CAAC,CAAC,CAAC,EAAE;wBACV,OAAO,IAAI,CAAC,KAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,aAAa,CAAA;oBACjE,CAAC,CAAC;yBACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;oBAC1B,EAAE,CACH,CAAA;YACH;gBACE,OAAO,EAAE,CAAA;SACZ;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;AAjHQ,uBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAA;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AAJrC,gBAAgB;IADrB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,gBAAgB,CAkHrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators'\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\"> <i18n-msg msgid=\"label.pressed\">pressed</i18n-msg> </label>\n\n <label> <i18n-msg msgid=\"label.action\">action</i18n-msg> </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> <i18n-msg msgid=\"label.target\">target</i18n-msg> </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> <i18n-msg msgid=\"label.value\">value</i18n-msg> </label>\n <things-editor-data value-key=\"value\" .value=${value} custom-editor fullwidth></things-editor-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"]}
@@ -1,6 +1,5 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@things-factory/i18n-base';
5
4
  import './property-event-hover';
6
5
  import './property-event-tap';
@@ -2,29 +2,25 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
5
  import './property-event-hover';
7
6
  import './property-event-tap';
8
- import { LitElement, html } from 'lit';
7
+ import { html, LitElement } from 'lit';
9
8
  import { customElement, property } from 'lit/decorators';
10
9
  import { PropertySharedStyle } from '../property-shared-style';
11
10
  import { convert } from './value-converter';
12
11
  let PropertyEvent = class PropertyEvent extends LitElement {
13
- constructor() {
14
- super(...arguments);
15
- this.value = {};
16
- }
17
12
  firstUpdated() {
18
13
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
19
14
  }
20
15
  render() {
16
+ const value = this.value || {};
21
17
  return html `
22
18
  <fieldset>
23
19
  <legend>
24
20
  <title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></title-with-help>
25
21
  </legend>
26
22
 
27
- <property-event-hover value-key="hover" .scene=${this.scene} .value=${this.value.hover || {}}>
23
+ <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
28
24
  </property-event-hover>
29
25
  </fieldset>
30
26
 
@@ -33,7 +29,7 @@ let PropertyEvent = class PropertyEvent extends LitElement {
33
29
  <title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></title-with-help>
34
30
  </legend>
35
31
 
36
- <property-event-tap value-key="tap" .scene=${this.scene} .value=${this.value.tap || {}}> </property-event-tap>
32
+ <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
37
33
  </fieldset>
38
34
  `;
39
35
  }
@@ -1 +1 @@
1
- {"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,2BAA2B,CAAA;AAClC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAG8B,UAAK,GAAe,EAAE,CAAA;IA2CpD,CAAC;IAxCC,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,OAAO,IAAI,CAAA;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS/C,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEzF,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;AA7CQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAJrC,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CA8ClB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@things-factory/i18n-base'\nimport './property-event-hover'\nimport './property-event-tap'\n\nimport { LitElement, html } from 'lit'\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { customElement, property } from 'lit/decorators'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event')\nclass PropertyEvent extends LitElement {\n static styles = [PropertySharedStyle]\n\n @property({ type: Object }) value: Properties = {}\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n return html`\n <fieldset>\n <legend>\n <title-with-help msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></title-with-help>\n </legend>\n\n <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${this.value.hover || {}}>\n </property-event-hover>\n </fieldset>\n\n <fieldset>\n <legend>\n <title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></title-with-help>\n </legend>\n\n <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${this.value.tap || {}}> </property-event-tap>\n </fieldset>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
1
+ {"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAMpC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS1C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;CACF,CAAA;AA/CQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAA;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAJrC,aAAa;IADlB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,aAAa,CAgDlB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './property-event-hover'\nimport './property-event-tap'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { PropertySharedStyle } from '../property-shared-style'\nimport { convert } from './value-converter'\n\n@customElement('property-event')\nclass PropertyEvent extends LitElement {\n static styles = [PropertySharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <fieldset>\n <legend>\n <title-with-help msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></title-with-help>\n </legend>\n\n <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${value.hover || {}}>\n </property-event-hover>\n </fieldset>\n\n <fieldset>\n <legend>\n <title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></title-with-help>\n </legend>\n\n <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>\n </fieldset>\n `\n }\n\n _onValueChange(e: Event) {\n var element = e.target as HTMLElement\n var key = element.getAttribute('value-key')\n\n if (!key) {\n return\n }\n\n this.value = {\n ...this.value,\n [key]: convert(element)\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
@@ -1,7 +1,6 @@
1
1
  /**
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
- import '@things-factory/i18n-base';
5
4
  import '@things-factory/modeller-ui/client/editors/things-editor-color';
6
5
  import { LitElement } from 'lit';
7
6
  import { Properties } from '@hatiolab/things-scene';
@@ -16,7 +15,7 @@ import { Properties } from '@hatiolab/things-scene';
16
15
  */
17
16
  export default class PropertyShadow extends LitElement {
18
17
  static styles: import("lit").CSSResult[];
19
- value: Properties;
18
+ value?: Properties;
20
19
  firstUpdated(): void;
21
20
  render(): import("lit-html").TemplateResult<1>;
22
21
  _onValueChange(e: Event): void;
@@ -2,9 +2,8 @@
2
2
  * @license Copyright © HatioLab Inc. All rights reserved.
3
3
  */
4
4
  import { __decorate } from "tslib";
5
- import '@things-factory/i18n-base';
6
5
  import '@things-factory/modeller-ui/client/editors/things-editor-color';
7
- import { LitElement, css, html } from 'lit';
6
+ import { css, html, LitElement } from 'lit';
8
7
  import { customElement, property } from 'lit/decorators';
9
8
  import { convert } from './value-converter';
10
9
  /**
@@ -17,30 +16,27 @@ import { convert } from './value-converter';
17
16
  * ></property-shadow>
18
17
  */
19
18
  let PropertyShadow = class PropertyShadow extends LitElement {
20
- constructor() {
21
- super(...arguments);
22
- this.value = {};
23
- }
24
19
  firstUpdated() {
25
20
  this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
26
21
  }
27
22
  render() {
23
+ const value = this.value || {};
28
24
  return html `
29
25
  <label> <i18n-msg msgid="label.shadowOffsetX">offset-X</i18n-msg> </label>
30
26
 
31
- <input type="number" value-key="left" .value=${this.value.left} />
27
+ <input type="number" value-key="left" .value=${value.left} />
32
28
 
33
29
  <label> <i18n-msg msgid="label.shadowOffsetY">offset-Y</i18n-msg> </label>
34
30
 
35
- <input type="number" value-key="top" .value=${this.value.top} />
31
+ <input type="number" value-key="top" .value=${value.top} />
36
32
 
37
33
  <label> <i18n-msg msgid="label.shadowSize">Size</i18n-msg> </label>
38
34
 
39
- <input type="number" value-key="blurSize" .value=${this.value.blurSize} />
35
+ <input type="number" value-key="blurSize" .value=${value.blurSize} />
40
36
 
41
37
  <label class="icon-only-label color"></label>
42
38
 
43
- <things-editor-color value-key="color" .value=${this.value.color}> </things-editor-color>
39
+ <things-editor-color value-key="color" .value=${value.color}> </things-editor-color>
44
40
  `;
45
41
  }
46
42
  _onValueChange(e) {