@operato/board 9.0.0-beta.6 → 9.0.0-beta.61

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 (94) hide show
  1. package/CHANGELOG.md +367 -0
  2. package/dist/src/modeller/component-toolbar/component-menu.d.ts +1 -1
  3. package/dist/src/modeller/component-toolbar/component-toolbar.d.ts +1 -1
  4. package/dist/src/modeller/edit-toolbar.js +21 -19
  5. package/dist/src/modeller/edit-toolbar.js.map +1 -1
  6. package/dist/src/modeller/{property-sidebar/property-sidebar.d.ts → property-sidebar.d.ts} +18 -17
  7. package/dist/src/modeller/{property-sidebar/property-sidebar.js → property-sidebar.js} +45 -30
  8. package/dist/src/modeller/property-sidebar.js.map +1 -0
  9. package/dist/src/ox-board-component-info.js +1 -1
  10. package/dist/src/ox-board-component-info.js.map +1 -1
  11. package/dist/src/ox-board-modeller.d.ts +2 -2
  12. package/dist/src/ox-board-modeller.js +2 -14
  13. package/dist/src/ox-board-modeller.js.map +1 -1
  14. package/dist/src/ox-board-viewer.js +18 -5
  15. package/dist/src/ox-board-viewer.js.map +1 -1
  16. package/dist/src/player/ox-board-wrapper.js +3 -1
  17. package/dist/src/player/ox-board-wrapper.js.map +1 -1
  18. package/dist/tsconfig.tsbuildinfo +1 -1
  19. package/package.json +15 -16
  20. package/dist/src/modeller/property-sidebar/abstract-property.d.ts +0 -10
  21. package/dist/src/modeller/property-sidebar/abstract-property.js +0 -55
  22. package/dist/src/modeller/property-sidebar/abstract-property.js.map +0 -1
  23. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.d.ts +0 -58
  24. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js +0 -443
  25. package/dist/src/modeller/property-sidebar/data-binding/data-binding-mapper.js.map +0 -1
  26. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.d.ts +0 -6
  27. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js +0 -20
  28. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-map.js.map +0 -1
  29. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.d.ts +0 -6
  30. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js +0 -20
  31. package/dist/src/modeller/property-sidebar/data-binding/data-binding-value-range.js.map +0 -1
  32. package/dist/src/modeller/property-sidebar/data-binding/data-binding.d.ts +0 -44
  33. package/dist/src/modeller/property-sidebar/data-binding/data-binding.js +0 -458
  34. package/dist/src/modeller/property-sidebar/data-binding/data-binding.js.map +0 -1
  35. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.d.ts +0 -4
  36. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js +0 -61
  37. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js.map +0 -1
  38. package/dist/src/modeller/property-sidebar/effects/effects.d.ts +0 -24
  39. package/dist/src/modeller/property-sidebar/effects/effects.js +0 -64
  40. package/dist/src/modeller/property-sidebar/effects/effects.js.map +0 -1
  41. package/dist/src/modeller/property-sidebar/effects/property-animation.d.ts +0 -23
  42. package/dist/src/modeller/property-sidebar/effects/property-animation.js +0 -138
  43. package/dist/src/modeller/property-sidebar/effects/property-animation.js.map +0 -1
  44. package/dist/src/modeller/property-sidebar/effects/property-animations.d.ts +0 -22
  45. package/dist/src/modeller/property-sidebar/effects/property-animations.js +0 -89
  46. package/dist/src/modeller/property-sidebar/effects/property-animations.js.map +0 -1
  47. package/dist/src/modeller/property-sidebar/effects/property-event-hover.d.ts +0 -21
  48. package/dist/src/modeller/property-sidebar/effects/property-event-hover.js +0 -182
  49. package/dist/src/modeller/property-sidebar/effects/property-event-hover.js.map +0 -1
  50. package/dist/src/modeller/property-sidebar/effects/property-event-tap.d.ts +0 -36
  51. package/dist/src/modeller/property-sidebar/effects/property-event-tap.js +0 -244
  52. package/dist/src/modeller/property-sidebar/effects/property-event-tap.js.map +0 -1
  53. package/dist/src/modeller/property-sidebar/effects/property-event.d.ts +0 -22
  54. package/dist/src/modeller/property-sidebar/effects/property-event.js +0 -64
  55. package/dist/src/modeller/property-sidebar/effects/property-event.js.map +0 -1
  56. package/dist/src/modeller/property-sidebar/effects/property-shadow.d.ts +0 -23
  57. package/dist/src/modeller/property-sidebar/effects/property-shadow.js +0 -103
  58. package/dist/src/modeller/property-sidebar/effects/property-shadow.js.map +0 -1
  59. package/dist/src/modeller/property-sidebar/effects/value-converter.d.ts +0 -1
  60. package/dist/src/modeller/property-sidebar/effects/value-converter.js +0 -21
  61. package/dist/src/modeller/property-sidebar/effects/value-converter.js.map +0 -1
  62. package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts +0 -27
  63. package/dist/src/modeller/property-sidebar/inspector/inspector.js +0 -355
  64. package/dist/src/modeller/property-sidebar/inspector/inspector.js.map +0 -1
  65. package/dist/src/modeller/property-sidebar/property-shared-style.d.ts +0 -4
  66. package/dist/src/modeller/property-sidebar/property-shared-style.js +0 -135
  67. package/dist/src/modeller/property-sidebar/property-shared-style.js.map +0 -1
  68. package/dist/src/modeller/property-sidebar/property-sidebar.js.map +0 -1
  69. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.d.ts +0 -1
  70. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js +0 -94
  71. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js.map +0 -1
  72. package/dist/src/modeller/property-sidebar/shapes/shapes.d.ts +0 -26
  73. package/dist/src/modeller/property-sidebar/shapes/shapes.js +0 -430
  74. package/dist/src/modeller/property-sidebar/shapes/shapes.js.map +0 -1
  75. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.d.ts +0 -16
  76. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.js +0 -138
  77. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.js.map +0 -1
  78. package/dist/src/modeller/property-sidebar/specifics/specifics.d.ts +0 -25
  79. package/dist/src/modeller/property-sidebar/specifics/specifics.js +0 -84
  80. package/dist/src/modeller/property-sidebar/specifics/specifics.js.map +0 -1
  81. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +0 -21
  82. package/dist/src/modeller/property-sidebar/styles/styles.js +0 -559
  83. package/dist/src/modeller/property-sidebar/styles/styles.js.map +0 -1
  84. package/dist/stories/property-data-binding.stories.d.ts +0 -20
  85. package/dist/stories/property-data-binding.stories.js +0 -19
  86. package/dist/stories/property-data-binding.stories.js.map +0 -1
  87. package/icons/icon-properties-arrow-type.png +0 -0
  88. package/icons/icon-properties-gradient-direction.png +0 -0
  89. package/icons/icon-properties-label.png +0 -0
  90. package/icons/icon-properties-line-type.png +0 -0
  91. package/icons/icon-properties-padding.png +0 -0
  92. package/icons/icon-properties-ratio.png +0 -0
  93. package/icons/icon-properties-table.png +0 -0
  94. package/icons/icon-shell-inspector.png +0 -0
@@ -1,61 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { css } from 'lit';
5
- export const EffectsSharedStyle = css `
6
- :host {
7
- display: grid;
8
- grid-template-columns: repeat(10, 1fr);
9
- grid-gap: 5px;
10
- grid-auto-rows: minmax(24px, auto);
11
-
12
- align-items: center;
13
- }
14
-
15
- * {
16
- align-self: stretch;
17
- }
18
-
19
- label {
20
- grid-column: span 3;
21
- text-align: right;
22
- text-transform: capitalize;
23
-
24
- align-self: center;
25
- }
26
-
27
- input,
28
- select,
29
- ox-input-angle,
30
- ox-input-color,
31
- [custom-editor] {
32
- grid-column: span 7;
33
- }
34
-
35
- input,
36
- select,
37
- ox-input-angle input,
38
- ox-input-color input,
39
- [custom-editor] input {
40
- border: var(--property-sidebar-fieldset-border);
41
- }
42
-
43
- ox-input-data {
44
- height: 300px;
45
- }
46
-
47
- input[type='checkbox'] {
48
- grid-column: 4 / 5;
49
- align-self: center;
50
- }
51
-
52
- label.checkbox-label {
53
- grid-column: span 6;
54
- text-align: left;
55
- }
56
-
57
- [fullwidth] {
58
- grid-column: 1 / -1;
59
- }
60
- `;
61
- //# sourceMappingURL=effects-shared-style.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"effects-shared-style.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects-shared-style.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDpC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css } from 'lit'\n\nexport const EffectsSharedStyle = css`\n :host {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n grid-auto-rows: minmax(24px, auto);\n\n align-items: center;\n }\n\n * {\n align-self: stretch;\n }\n\n label {\n grid-column: span 3;\n text-align: right;\n text-transform: capitalize;\n\n align-self: center;\n }\n\n input,\n select,\n ox-input-angle,\n ox-input-color,\n [custom-editor] {\n grid-column: span 7;\n }\n\n input,\n select,\n ox-input-angle input,\n ox-input-color input,\n [custom-editor] input {\n border: var(--property-sidebar-fieldset-border);\n }\n\n ox-input-data {\n height: 300px;\n }\n\n input[type='checkbox'] {\n grid-column: 4 / 5;\n align-self: center;\n }\n\n label.checkbox-label {\n grid-column: span 6;\n text-align: left;\n }\n\n [fullwidth] {\n grid-column: 1 / -1;\n }\n`\n"]}
@@ -1,24 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import '@operato/i18n/ox-i18n.js';
5
- import '@operato/help/ox-title-with-help.js';
6
- import { Properties, Scene } from '@hatiolab/things-scene';
7
- import { AbstractProperty } from '../abstract-property.js';
8
- import { PropertyAnimations } from './property-animations.js';
9
- import { PropertyEvent } from './property-event.js';
10
- import { PropertyShadow } from './property-shadow.js';
11
- declare const PropertyEffects_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
12
- export declare class PropertyEffects extends PropertyEffects_base {
13
- static styles: import("lit").CSSResult[];
14
- value?: Properties;
15
- scene?: Scene;
16
- firstUpdated(): void;
17
- static get scopedElements(): {
18
- 'property-shadow': typeof PropertyShadow;
19
- 'property-animations': typeof PropertyAnimations;
20
- 'property-event': typeof PropertyEvent;
21
- };
22
- render(): import("lit-html").TemplateResult<1>;
23
- }
24
- export {};
@@ -1,64 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { __decorate } from "tslib";
5
- import '@operato/i18n/ox-i18n.js';
6
- import '@operato/help/ox-title-with-help.js';
7
- import { html } from 'lit';
8
- import { property } from 'lit/decorators.js';
9
- import { ScopedElementsMixin } from '@open-wc/scoped-elements';
10
- import { AbstractProperty } from '../abstract-property.js';
11
- import { PropertySharedStyle } from '../property-shared-style.js';
12
- import { PropertyAnimations } from './property-animations.js';
13
- import { PropertyEvent } from './property-event.js';
14
- import { PropertyShadow } from './property-shadow.js';
15
- export class PropertyEffects extends ScopedElementsMixin(AbstractProperty) {
16
- firstUpdated() {
17
- this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
18
- }
19
- static get scopedElements() {
20
- return {
21
- 'property-shadow': PropertyShadow,
22
- 'property-animations': PropertyAnimations,
23
- 'property-event': PropertyEvent
24
- };
25
- }
26
- render() {
27
- const value = this.value || {};
28
- return html `
29
- <fieldset>
30
- <legend>
31
- <ox-title-with-help topic="board-modeller/effects/shadow" msgid="label.shadow">shadow</ox-title-with-help>
32
- </legend>
33
-
34
- <property-shadow value-key="shadow" .value=${value.shadow || {}}> </property-shadow>
35
- </fieldset>
36
-
37
- <fieldset>
38
- <legend>
39
- <ox-title-with-help topic="board-modeller/effects/retention" msgid="label.retention"
40
- >retention</ox-title-with-help
41
- >
42
- </legend>
43
-
44
- <div class="property-grid">
45
- <label> <ox-i18n msgid="label.retention">retention</ox-i18n> </label>
46
- <input type="number" value-key="retention" .value=${value.retention} placeholder="ms" />
47
- </div>
48
- </fieldset>
49
-
50
- <property-animations value-key="animation" .scene=${this.scene} .value=${value.animation || {}}>
51
- </property-animations>
52
-
53
- <property-event value-key="event" .scene=${this.scene} .value=${value.event || {}}> </property-event>
54
- `;
55
- }
56
- }
57
- PropertyEffects.styles = [PropertySharedStyle];
58
- __decorate([
59
- property({ type: Object })
60
- ], PropertyEffects.prototype, "value", void 0);
61
- __decorate([
62
- property({ type: Object })
63
- ], PropertyEffects.prototype, "scene", void 0);
64
- //# sourceMappingURL=effects.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"effects.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/effects.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,MAAM,OAAO,eAAgB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAMxE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,iBAAiB,EAAE,cAAc;YACjC,qBAAqB,EAAE,kBAAkB;YACzC,gBAAgB,EAAE,aAAa;SAChC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;qDAMsC,KAAK,CAAC,MAAM,IAAI,EAAE;;;;;;;;;;;;8DAYT,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;;AA/CM,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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { AbstractProperty } from '../abstract-property.js'\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { PropertyAnimations } from './property-animations.js'\nimport { PropertyEvent } from './property-event.js'\nimport { PropertyShadow } from './property-shadow.js'\n\nexport class PropertyEffects extends ScopedElementsMixin(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 static get scopedElements() {\n return {\n 'property-shadow': PropertyShadow,\n 'property-animations': PropertyAnimations,\n 'property-event': PropertyEvent\n }\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <fieldset>\n <legend>\n <ox-title-with-help topic=\"board-modeller/effects/shadow\" msgid=\"label.shadow\">shadow</ox-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 <ox-title-with-help topic=\"board-modeller/effects/retention\" msgid=\"label.retention\"\n >retention</ox-title-with-help\n >\n </legend>\n\n <div class=\"property-grid\">\n <label> <ox-i18n msgid=\"label.retention\">retention</ox-i18n> </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,23 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import '@operato/input/ox-input-angle.js';
5
- import '@operato/i18n/ox-i18n.js';
6
- import { LitElement } from 'lit';
7
- import { Properties, Scene } from '@hatiolab/things-scene';
8
- /**
9
- * 컴포넌트의 animation 속성을 편집하는 element
10
-
11
- Example:
12
-
13
- <property-animation .value=${animation}>
14
- </property-animation>
15
- */
16
- export declare class PropertyAnimation extends LitElement {
17
- static styles: import("lit").CSSResult[];
18
- value?: Properties;
19
- scene?: Scene;
20
- firstUpdated(): void;
21
- render(): import("lit-html").TemplateResult<1>;
22
- _onValueChange(e: Event): void;
23
- }
@@ -1,138 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { __decorate } from "tslib";
5
- import '@operato/input/ox-input-angle.js';
6
- import '@operato/i18n/ox-i18n.js';
7
- import { html, LitElement } from 'lit';
8
- import { property } from 'lit/decorators.js';
9
- import { EffectsSharedStyle } from './effects-shared-style.js';
10
- import { convert } from './value-converter.js';
11
- /**
12
- * 컴포넌트의 animation 속성을 편집하는 element
13
-
14
- Example:
15
-
16
- <property-animation .value=${animation}>
17
- </property-animation>
18
- */
19
- export class PropertyAnimation extends LitElement {
20
- firstUpdated() {
21
- this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
22
- }
23
- render() {
24
- var _a;
25
- const value = this.value || {};
26
- return html `
27
- <label>Animation Type</label>
28
- <select value-key="type" .value=${value.type}>
29
- <option value="">None</option>
30
- <option value="rotation">Rotation</option>
31
- <option value="vibration">Vibration</option>
32
- <option value="heartbeat">Heartbeat</option>
33
- <option value="moving">Moving</option>
34
- <option value="fade">Fade</option>
35
- <option value="outline">Outline</option>
36
- </select>
37
-
38
- <label> <ox-i18n msgid="label.waiting-time">waiting time</ox-i18n> </label>
39
- <input type="number" value-key="delay" .value=${value.delay} placeholder="ms" />
40
-
41
- <label> <ox-i18n msgid="label.duration">duration</ox-i18n> </label>
42
- <input type="number" value-key="duration" .value=${value.duration} placeholder="ms" />
43
-
44
- <label> <ox-i18n msgid="label.animation-interval">interval</ox-i18n> </label>
45
- <input type="number" value-key="interval" .value=${value.interval} placeholder="ms" />
46
-
47
- ${value.type == 'rotation' || value.type == 'vibration'
48
- ? html `
49
- <label> <ox-i18n msgid="label.theta">theta</ox-i18n> </label>
50
- <ox-input-angle value-key="theta" .value=${value.theta}> </ox-input-angle>
51
- `
52
- : html ``}
53
- ${value.type == 'heartbeat'
54
- ? html `
55
- <label> <ox-i18n msgid="label.scale">scale</ox-i18n> </label>
56
- <input type="number" value-key="scale" .value=${value.scale} />
57
- `
58
- : html ``}
59
- ${value.type == 'moving'
60
- ? html `
61
- <label> <ox-i18n msgid="label.x-axes">X-axes</ox-i18n> </label>
62
- <input type="number" value-key="x" .value=${value.x} />
63
-
64
- <label> <ox-i18n msgid="label.y-axes">Y-axes</ox-i18n> </label>
65
- <input type="number" value-key="y" .value=${value.y} />
66
- `
67
- : html ``}
68
- ${value.type == 'fade'
69
- ? html `
70
- <label> <ox-i18n msgid="label.start-alpha">start alpha</ox-i18n> </label>
71
- <input type="number" value-key="startAlpha" .value=${value.startAlpha} />
72
-
73
- <label> <ox-i18n msgid="label.end-alpha">end alpha</ox-i18n> </label>
74
- <input type="number" value-key="endAlpha" .value=${value.endAlpha} />
75
- `
76
- : html ``}
77
- ${value.type == 'outline'
78
- ? html `
79
- <label> <ox-i18n msgid="label.target">target</ox-i18n> </label>
80
- <input value-key="rideOn" .value=${value.rideOn || ''} list="target-list" />
81
- <datalist id="target-list">
82
- ${this.scene.ids.map(info => info.key).map(id => html ` <option value=${id}></option> `)}
83
- </datalist>
84
- `
85
- : html ``}
86
-
87
- <input id="checkbox-repeat" value-key="repeat" type="checkbox" .checked=${value.repeat} />
88
- <label for="checkbox-repeat" class="checkbox-label"> <ox-i18n msgid="label.repeat">repeat</ox-i18n> </label>
89
-
90
- <input
91
- id="checkbox-autoplay"
92
- value-key="autoplay"
93
- type="checkbox"
94
- .checked=${value.autoplay || ((_a = value.autoplay) !== null && _a !== void 0 ? _a : true)}
95
- />
96
- <label for="checkbox-autoplay" class="checkbox-label">
97
- <ox-i18n msgid="label.autoplay">autoplay</ox-i18n>
98
- </label>
99
-
100
- <label>delta</label>
101
- <select value-key="delta" .value=${value.delta}>
102
- <option value="linear">linear</option>
103
- <option value="quad">quad</option>
104
- <option value="circ">circ</option>
105
- <option value="back">back</option>
106
- <option value="bounce">bounce</option>
107
- <option value="elastic">elastic</option>
108
- </select>
109
-
110
- <label>ease</label>
111
- <select value-key="ease" .value=${value.ease}>
112
- <option value="in">in</option>
113
- <option value="out">out</option>
114
- <option value="inout">inout</option>
115
- </select>
116
- `;
117
- }
118
- _onValueChange(e) {
119
- var element = e.target;
120
- var key = element.getAttribute('value-key');
121
- if (!key) {
122
- return;
123
- }
124
- this.value = {
125
- ...this.value,
126
- [key]: convert(element)
127
- };
128
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
129
- }
130
- }
131
- PropertyAnimation.styles = [EffectsSharedStyle];
132
- __decorate([
133
- property({ type: Object })
134
- ], PropertyAnimation.prototype, "value", void 0);
135
- __decorate([
136
- property({ type: Object })
137
- ], PropertyAnimation.prototype, "scene", void 0);
138
- //# sourceMappingURL=property-animation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"property-animation.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animation.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html, LitElement } from 'lit'\nimport { property, query } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\n\nimport { EffectsSharedStyle } from './effects-shared-style.js'\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 animation 속성을 편집하는 element\n\nExample:\n\n <property-animation .value=${animation}>\n </property-animation>\n*/\n\nexport class PropertyAnimation extends LitElement {\n static styles = [EffectsSharedStyle]\n\n @property({ type: Object }) value?: Properties\n @property({ type: Object }) scene?: Scene\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChange.bind(this))\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <label>Animation Type</label>\n <select value-key=\"type\" .value=${value.type}>\n <option value=\"\">None</option>\n <option value=\"rotation\">Rotation</option>\n <option value=\"vibration\">Vibration</option>\n <option value=\"heartbeat\">Heartbeat</option>\n <option value=\"moving\">Moving</option>\n <option value=\"fade\">Fade</option>\n <option value=\"outline\">Outline</option>\n </select>\n\n <label> <ox-i18n msgid=\"label.waiting-time\">waiting time</ox-i18n> </label>\n <input type=\"number\" value-key=\"delay\" .value=${value.delay} placeholder=\"ms\" />\n\n <label> <ox-i18n msgid=\"label.duration\">duration</ox-i18n> </label>\n <input type=\"number\" value-key=\"duration\" .value=${value.duration} placeholder=\"ms\" />\n\n <label> <ox-i18n msgid=\"label.animation-interval\">interval</ox-i18n> </label>\n <input type=\"number\" value-key=\"interval\" .value=${value.interval} placeholder=\"ms\" />\n\n ${value.type == 'rotation' || value.type == 'vibration'\n ? html`\n <label> <ox-i18n msgid=\"label.theta\">theta</ox-i18n> </label>\n <ox-input-angle value-key=\"theta\" .value=${value.theta}> </ox-input-angle>\n `\n : html``}\n ${value.type == 'heartbeat'\n ? html`\n <label> <ox-i18n msgid=\"label.scale\">scale</ox-i18n> </label>\n <input type=\"number\" value-key=\"scale\" .value=${value.scale} />\n `\n : html``}\n ${value.type == 'moving'\n ? html`\n <label> <ox-i18n msgid=\"label.x-axes\">X-axes</ox-i18n> </label>\n <input type=\"number\" value-key=\"x\" .value=${value.x} />\n\n <label> <ox-i18n msgid=\"label.y-axes\">Y-axes</ox-i18n> </label>\n <input type=\"number\" value-key=\"y\" .value=${value.y} />\n `\n : html``}\n ${value.type == 'fade'\n ? html`\n <label> <ox-i18n msgid=\"label.start-alpha\">start alpha</ox-i18n> </label>\n <input type=\"number\" value-key=\"startAlpha\" .value=${value.startAlpha} />\n\n <label> <ox-i18n msgid=\"label.end-alpha\">end alpha</ox-i18n> </label>\n <input type=\"number\" value-key=\"endAlpha\" .value=${value.endAlpha} />\n `\n : html``}\n ${value.type == 'outline'\n ? html`\n <label> <ox-i18n msgid=\"label.target\">target</ox-i18n> </label>\n <input value-key=\"rideOn\" .value=${value.rideOn || ''} list=\"target-list\" />\n <datalist id=\"target-list\">\n ${this.scene!.ids.map(info => info.key).map(id => html` <option value=${id}></option> `)}\n </datalist>\n `\n : html``}\n\n <input id=\"checkbox-repeat\" value-key=\"repeat\" type=\"checkbox\" .checked=${value.repeat} />\n <label for=\"checkbox-repeat\" class=\"checkbox-label\"> <ox-i18n msgid=\"label.repeat\">repeat</ox-i18n> </label>\n\n <input\n id=\"checkbox-autoplay\"\n value-key=\"autoplay\"\n type=\"checkbox\"\n .checked=${value.autoplay || (value.autoplay ?? true)}\n />\n <label for=\"checkbox-autoplay\" class=\"checkbox-label\">\n <ox-i18n msgid=\"label.autoplay\">autoplay</ox-i18n>\n </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,22 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import '@material/web/icon/icon.js';
5
- import '@operato/help/ox-title-with-help.js';
6
- import { LitElement } from 'lit';
7
- import { Properties, Scene } from '@hatiolab/things-scene';
8
- import { PropertyAnimation } from './property-animation.js';
9
- declare const PropertyAnimations_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types.js").ScopedElementsHost>;
10
- export declare class PropertyAnimations extends PropertyAnimations_base {
11
- static styles: import("lit").CSSResult[];
12
- value?: Properties;
13
- scene: Scene;
14
- _expanded: boolean;
15
- firstUpdated(): void;
16
- static get scopedElements(): {
17
- 'property-animation': typeof PropertyAnimation;
18
- };
19
- render(): import("lit-html").TemplateResult<1>;
20
- _onValueChange(e: Event): void;
21
- }
22
- export {};
@@ -1,89 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import { __decorate } from "tslib";
5
- import '@material/web/icon/icon.js';
6
- import '@operato/help/ox-title-with-help.js';
7
- import { css, html, LitElement } from 'lit';
8
- import { property, state } from 'lit/decorators.js';
9
- import { ScopedElementsMixin } from '@open-wc/scoped-elements';
10
- import { PropertySharedStyle } from '../property-shared-style.js';
11
- import { PropertyAnimation } from './property-animation.js';
12
- import { convert } from './value-converter.js';
13
- export class PropertyAnimations extends ScopedElementsMixin(LitElement) {
14
- constructor() {
15
- super(...arguments);
16
- this._expanded = false;
17
- }
18
- firstUpdated() {
19
- this.renderRoot.addEventListener('change', this._onValueChange.bind(this));
20
- }
21
- static get scopedElements() {
22
- return {
23
- 'property-animation': PropertyAnimation
24
- };
25
- }
26
- render() {
27
- const value = this.value || {};
28
- return html `
29
- <fieldset collapsable ?collapsed=${!this._expanded}>
30
- <legend>
31
- <ox-title-with-help topic="board-modeller/effects/animation" msgid="label.animation"
32
- >animation</ox-title-with-help
33
- >
34
- <md-icon
35
- @click=${() => {
36
- this._expanded = !this._expanded;
37
- }}
38
- >${this._expanded ? 'expand_less' : 'expand_more'}</md-icon
39
- >
40
- </legend>
41
-
42
- <property-animation value-key="oncreate" .scene=${this.scene} .value=${value.oncreate || {}}>
43
- </property-animation>
44
- </fieldset>
45
- `;
46
- }
47
- _onValueChange(e) {
48
- var element = e.target;
49
- var key = element.getAttribute('value-key');
50
- if (!key) {
51
- return;
52
- }
53
- this.value = {
54
- ...this.value,
55
- [key]: convert(element)
56
- };
57
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
58
- }
59
- }
60
- PropertyAnimations.styles = [
61
- PropertySharedStyle,
62
- css `
63
- fieldset[collapsable] legend {
64
- box-sizing: border-box;
65
- width: 100%;
66
- }
67
-
68
- fieldset[collapsable] legend md-icon {
69
- float: right;
70
- font-size: medium;
71
- margin: 0;
72
- cursor: pointer;
73
- }
74
-
75
- fieldset[collapsable][collapsed] > :not(legend) {
76
- display: none;
77
- }
78
- `
79
- ];
80
- __decorate([
81
- property({ type: Object })
82
- ], PropertyAnimations.prototype, "value", void 0);
83
- __decorate([
84
- property({ type: Object })
85
- ], PropertyAnimations.prototype, "scene", void 0);
86
- __decorate([
87
- state()
88
- ], PropertyAnimations.prototype, "_expanded", void 0);
89
- //# sourceMappingURL=property-animations.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"property-animations.js","sourceRoot":"","sources":["../../../../../src/modeller/property-sidebar/effects/property-animations.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C,MAAM,OAAO,kBAAmB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAvE;;QAyBW,cAAS,GAAY,KAAK,CAAA;IAkDrC,CAAC;IAhDC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,oBAAoB,EAAE,iBAAiB;SACxC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;yCAC0B,CAAC,IAAI,CAAC,SAAS;;;;;;qBAMnC,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,CAAC;YACT,OAAM;QACR,CAAC;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;;AAzEM,yBAAM,GAAG;IACd,mBAAmB;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;KAgBF;CACF,AAnBY,CAmBZ;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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/help/ox-title-with-help.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { PropertySharedStyle } from '../property-shared-style.js'\nimport { PropertyAnimation } from './property-animation.js'\nimport { convert } from './value-converter.js'\n\nexport class PropertyAnimations extends ScopedElementsMixin(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 md-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 static get scopedElements() {\n return {\n 'property-animation': PropertyAnimation\n }\n }\n\n render() {\n const value = this.value || {}\n\n return html`\n <fieldset collapsable ?collapsed=${!this._expanded}>\n <legend>\n <ox-title-with-help topic=\"board-modeller/effects/animation\" msgid=\"label.animation\"\n >animation</ox-title-with-help\n >\n <md-icon\n @click=${() => {\n this._expanded = !this._expanded\n }}\n >${this._expanded ? 'expand_less' : 'expand_more'}</md-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,21 +0,0 @@
1
- /**
2
- * @license Copyright © HatioLab Inc. All rights reserved.
3
- */
4
- import '@operato/input/ox-input-data.js';
5
- import '@operato/i18n/ox-i18n.js';
6
- import { LitElement } from 'lit';
7
- import { Properties, Scene } from '@hatiolab/things-scene';
8
- export declare class PropertyEventHover extends LitElement {
9
- static styles: import("lit").CSSResult[];
10
- value?: Properties;
11
- scene?: Scene;
12
- firstUpdated(): void;
13
- render(): import("lit-html").TemplateResult<1>;
14
- _getPlaceHoder(action: string): "" | "http://www.hatiolab.com/" | "SCENE-100";
15
- _getTargetList(action: string): {
16
- value: string;
17
- description?: string;
18
- class?: string;
19
- }[];
20
- _onValueChange(e: Event): void;
21
- }