@operato/scene-basic 1.2.5

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 (147) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +0 -0
  3. package/demo/index.html +158 -0
  4. package/demo/things-scene-basic.html +6 -0
  5. package/dist/anchors/ellipse-anchors.d.ts +7 -0
  6. package/dist/anchors/ellipse-anchors.js +43 -0
  7. package/dist/anchors/ellipse-anchors.js.map +1 -0
  8. package/dist/audio.d.ts +25 -0
  9. package/dist/audio.js +141 -0
  10. package/dist/audio.js.map +1 -0
  11. package/dist/cloud.d.ts +13 -0
  12. package/dist/cloud.js +30 -0
  13. package/dist/cloud.js.map +1 -0
  14. package/dist/donut.d.ts +15 -0
  15. package/dist/donut.js +74 -0
  16. package/dist/donut.js.map +1 -0
  17. package/dist/ellipse.d.ts +24 -0
  18. package/dist/ellipse.js +72 -0
  19. package/dist/ellipse.js.map +1 -0
  20. package/dist/gif-view.d.ts +18 -0
  21. package/dist/gif-view.js +116 -0
  22. package/dist/gif-view.js.map +1 -0
  23. package/dist/image-view.d.ts +19 -0
  24. package/dist/image-view.js +180 -0
  25. package/dist/image-view.js.map +1 -0
  26. package/dist/index.d.ts +11 -0
  27. package/dist/index.js +15 -0
  28. package/dist/index.js.map +1 -0
  29. package/dist/outline/ellipse-outline.d.ts +2 -0
  30. package/dist/outline/ellipse-outline.js +11 -0
  31. package/dist/outline/ellipse-outline.js.map +1 -0
  32. package/dist/polygon.d.ts +19 -0
  33. package/dist/polygon.js +84 -0
  34. package/dist/polygon.js.map +1 -0
  35. package/dist/polyline.d.ts +18 -0
  36. package/dist/polyline.js +102 -0
  37. package/dist/polyline.js.map +1 -0
  38. package/dist/rect.d.ts +19 -0
  39. package/dist/rect.js +60 -0
  40. package/dist/rect.js.map +1 -0
  41. package/dist/star.d.ts +13 -0
  42. package/dist/star.js +80 -0
  43. package/dist/star.js.map +1 -0
  44. package/dist/templates/audio.d.ts +14 -0
  45. package/dist/templates/audio.js +15 -0
  46. package/dist/templates/audio.js.map +1 -0
  47. package/dist/templates/color-image.d.ts +22 -0
  48. package/dist/templates/color-image.js +23 -0
  49. package/dist/templates/color-image.js.map +1 -0
  50. package/dist/templates/donut.d.ts +22 -0
  51. package/dist/templates/donut.js +23 -0
  52. package/dist/templates/donut.js.map +1 -0
  53. package/dist/templates/ellipse.d.ts +21 -0
  54. package/dist/templates/ellipse.js +22 -0
  55. package/dist/templates/ellipse.js.map +1 -0
  56. package/dist/templates/gif-image.d.ts +14 -0
  57. package/dist/templates/gif-image.js +15 -0
  58. package/dist/templates/gif-image.js.map +1 -0
  59. package/dist/templates/gray-image.d.ts +22 -0
  60. package/dist/templates/gray-image.js +23 -0
  61. package/dist/templates/gray-image.js.map +1 -0
  62. package/dist/templates/index.d.ts +74 -0
  63. package/dist/templates/index.js +15 -0
  64. package/dist/templates/index.js.map +1 -0
  65. package/dist/templates/polygon.d.ts +22 -0
  66. package/dist/templates/polygon.js +25 -0
  67. package/dist/templates/polygon.js.map +1 -0
  68. package/dist/templates/polyline.d.ts +22 -0
  69. package/dist/templates/polyline.js +25 -0
  70. package/dist/templates/polyline.js.map +1 -0
  71. package/dist/templates/rect.d.ts +21 -0
  72. package/dist/templates/rect.js +22 -0
  73. package/dist/templates/rect.js.map +1 -0
  74. package/dist/templates/star.d.ts +23 -0
  75. package/dist/templates/star.js +24 -0
  76. package/dist/templates/star.js.map +1 -0
  77. package/dist/templates/text.d.ts +27 -0
  78. package/dist/templates/text.js +28 -0
  79. package/dist/templates/text.js.map +1 -0
  80. package/dist/templates/triangle.d.ts +23 -0
  81. package/dist/templates/triangle.js +24 -0
  82. package/dist/templates/triangle.js.map +1 -0
  83. package/dist/text.d.ts +6 -0
  84. package/dist/text.js +11 -0
  85. package/dist/text.js.map +1 -0
  86. package/dist/triangle.d.ts +14 -0
  87. package/dist/triangle.js +75 -0
  88. package/dist/triangle.js.map +1 -0
  89. package/icons/audio.png +0 -0
  90. package/icons/both-arrow.png +0 -0
  91. package/icons/color-image.png +0 -0
  92. package/icons/container.png +0 -0
  93. package/icons/dash.png +0 -0
  94. package/icons/donut.png +0 -0
  95. package/icons/ellipse.png +0 -0
  96. package/icons/gif-image.png +0 -0
  97. package/icons/global-reference.png +0 -0
  98. package/icons/gray-image.png +0 -0
  99. package/icons/humidity-sensor.png +0 -0
  100. package/icons/info-window.png +0 -0
  101. package/icons/line.png +0 -0
  102. package/icons/local-reference.png +0 -0
  103. package/icons/no-image.png +0 -0
  104. package/icons/ortholine.png +0 -0
  105. package/icons/person.png +0 -0
  106. package/icons/polygon.png +0 -0
  107. package/icons/polyline.png +0 -0
  108. package/icons/popup.png +0 -0
  109. package/icons/rect.png +0 -0
  110. package/icons/single-arrow.png +0 -0
  111. package/icons/star.png +0 -0
  112. package/icons/text.png +0 -0
  113. package/icons/triangle.png +0 -0
  114. package/package.json +61 -0
  115. package/src/anchors/ellipse-anchors.ts +46 -0
  116. package/src/audio.ts +173 -0
  117. package/src/cloud.ts +40 -0
  118. package/src/donut.ts +92 -0
  119. package/src/ellipse.ts +90 -0
  120. package/src/gif-view.ts +146 -0
  121. package/src/image-view.ts +215 -0
  122. package/src/index.ts +16 -0
  123. package/src/outline/ellipse-outline.ts +15 -0
  124. package/src/polygon.ts +103 -0
  125. package/src/polyline.ts +122 -0
  126. package/src/rect.ts +71 -0
  127. package/src/star.ts +104 -0
  128. package/src/templates/audio.ts +15 -0
  129. package/src/templates/color-image.ts +23 -0
  130. package/src/templates/donut.ts +23 -0
  131. package/src/templates/ellipse.ts +22 -0
  132. package/src/templates/gif-image.ts +15 -0
  133. package/src/templates/gray-image.ts +23 -0
  134. package/src/templates/index.ts +16 -0
  135. package/src/templates/polygon.ts +25 -0
  136. package/src/templates/polyline.ts +25 -0
  137. package/src/templates/rect.ts +22 -0
  138. package/src/templates/star.ts +24 -0
  139. package/src/templates/text.ts +28 -0
  140. package/src/templates/triangle.ts +24 -0
  141. package/src/text.ts +12 -0
  142. package/src/triangle.ts +87 -0
  143. package/test/basic-test.html +63 -0
  144. package/test/index.html +22 -0
  145. package/things-scene.config.js +5 -0
  146. package/tsconfig.json +23 -0
  147. package/tsconfig.tsbuildinfo +1 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,11 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ### [1.2.5](https://github.com/things-scene/operato-scene/compare/v1.2.4...v1.2.5) (2023-02-20)
7
+
8
+
9
+ ### :bug: Bug Fix
10
+
11
+ * add scene-basic module ([b6f11ae](https://github.com/things-scene/operato-scene/commit/b6f11ae7d073dfd09201607fcb6cd7801da096e3))
package/README.md ADDED
File without changes
package/demo/index.html ADDED
@@ -0,0 +1,158 @@
1
+ <!DOCTYPE html>
2
+ <!--
3
+ @license
4
+ Copyright © HatioLab Inc. All rights reserved.
5
+ -->
6
+ <html>
7
+ <head>
8
+ <meta charset="utf-8" />
9
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
10
+ <title>things-scene-basic Demo</title>
11
+ <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
12
+
13
+ <link rel="import" href="../../things-scene-viewer/things-scene-viewer.html" />
14
+ <link rel="import" href="../../things-scene-viewer/things-scene-layer.html" />
15
+ <link rel="import" href="../../things-scene-viewer/things-scene-handler.html" />
16
+
17
+ <link rel="import" href="../../things-designer-elements/things-editor-color.html" />
18
+ <link rel="import" href="../../things-designer-elements/things-editor-color-stops.html" />
19
+ <link rel="import" href="../../things-designer-elements/things-editor-properties.html" />
20
+ <link rel="import" href="../../things-scene-modeler/things-scene-properties.html" />
21
+
22
+ <link rel="import" href="./things-scene-basic.html" />
23
+
24
+ <style is="custom-style">
25
+ @font-face {
26
+ font-family: 'Bitstream Vera Serif Bold';
27
+ src: url('fonts/VeraSeBd.ttf');
28
+ }
29
+
30
+ things-scene-viewer {
31
+ display: block;
32
+ width: 900px;
33
+ height: 600px;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body unresolved>
38
+ <template is="dom-bind" id="app">
39
+ <p>An example of <code>&lt;things-scene-basic&gt;</code>:</p>
40
+
41
+ <things-scene-viewer id="scene" scene="{{scene}}" selected="{{selected}}" model="[[model]]" mode="1">
42
+ <things-scene-layer type="selection-layer"></things-scene-layer>
43
+ <things-scene-layer type="modeling-layer"></things-scene-layer>
44
+ <things-scene-handler type="text-editor"></things-scene-handler>
45
+ <things-scene-handler type="move-handler"></things-scene-handler>
46
+ </things-scene-viewer>
47
+
48
+ <fieldset class="same-width">
49
+ <legend>basic style</legend>
50
+ <things-scene-properties scene="[[scene]]" selected="[[selected]]" model="{{target}}" bounds="{{bounds}}">
51
+ <things-editor-properties id="properties" target="{{target}}" props="{{props}}"> </things-editor-properties>
52
+ </things-scene-properties>
53
+ </fieldset>
54
+
55
+ <button id="change">Change Value</button>
56
+ </template>
57
+
58
+ <script>
59
+ window.addEventListener('WebComponentsReady', function (e) {
60
+ var app = document.querySelector('#app')
61
+
62
+ app.$.change.addEventListener('click', function () {
63
+ var viewer = app.$.scene
64
+ viewer.findAll('basic-analog')[0].set('value', 0 + Math.round(Math.random() * 240))
65
+ viewer.findAll('basic-analog')[0].set('colorStops', [
66
+ { position: 40, color: '#00ff00' },
67
+ { position: 70, color: '#ffff00' },
68
+ { position: 170, color: '#ff0000' }
69
+ ])
70
+ })
71
+
72
+ app.model = {
73
+ width: 1500,
74
+ height: 1500,
75
+ components: [
76
+ {
77
+ type: 'basic-analog',
78
+ cx: 300,
79
+ cy: 300,
80
+ rx: 100,
81
+ ry: 100,
82
+ hourWidth: 3,
83
+ minuteWidth: 2,
84
+ fillStyle: '',
85
+ strokeStyle: '#FF0000',
86
+ fontColor: '#0000FF',
87
+ lineWidth: 5,
88
+ innerCircleSize: 20,
89
+ innerCircleColor: '#00FF00'
90
+ // }, {
91
+ // type: 'basic-text',
92
+ // top: 300,
93
+ // left: 800,
94
+ // width: 100,
95
+ // height: 50,
96
+ // fillStyle: '#ff00ff',
97
+ // fontColor: '#FF0000',
98
+ // lineWidth: 5,
99
+ // localTime: true,
100
+ // utc : 10
101
+ }
102
+ ]
103
+ }
104
+
105
+ app.props = [
106
+ {
107
+ type: 'number',
108
+ label: 'hourwidth',
109
+ name: 'hourWidth',
110
+ property: 'hourWidth'
111
+ },
112
+ {
113
+ type: 'number',
114
+ label: 'minute-width',
115
+ name: 'minuteWidth',
116
+ property: 'minuteWidth'
117
+ },
118
+ {
119
+ type: 'number',
120
+ label: 'second-width',
121
+ name: 'secondWidth',
122
+ property: 'secondWidth'
123
+ },
124
+ {
125
+ type: 'checkbox',
126
+ label: 'needle-round',
127
+ name: 'needleRound',
128
+ property: 'needleRound'
129
+ },
130
+ {
131
+ type: 'checkbox',
132
+ label: 'show-second',
133
+ name: 'showSecond',
134
+ property: 'showSecond'
135
+ },
136
+ {
137
+ type: 'checkbox',
138
+ label: 'show-number',
139
+ name: 'showNumber',
140
+ property: 'showNumber'
141
+ },
142
+ {
143
+ type: 'number',
144
+ label: 'inner-circle-size',
145
+ name: 'innerCircleSize',
146
+ property: 'innerCircleSize'
147
+ },
148
+ {
149
+ type: 'color',
150
+ label: 'inner-circle-color',
151
+ name: 'innerCircleColor',
152
+ property: 'innerCircleColor'
153
+ }
154
+ ]
155
+ })
156
+ </script>
157
+ </body>
158
+ </html>
package/demo/things-scene-basic.html ADDED
@@ -0,0 +1,6 @@
1
+ <!--
2
+ @license
3
+ Copyright © HatioLab Inc. All rights reserved.
4
+ -->
5
+ <script src="../../moment/moment.js"></script>
6
+ <script src="../things-scene-basic.js"></script>
package/dist/anchors/ellipse-anchors.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Anchor, Component } from '@hatiolab/things-scene';
2
+ /**
3
+ * @function ellipseAnchors
4
+ * @param {Component} component
5
+ * @return {Anchor[]}
6
+ */
7
+ export default function ellipseAnchors(component: Component): Anchor[];
package/dist/anchors/ellipse-anchors.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * @function ellipseAnchors
3
+ * @param {Component} component
4
+ * @return {Anchor[]}
5
+ */
6
+ export default function ellipseAnchors(component) {
7
+ var { left, top, width, height } = component.bounds;
8
+ var centerx = left + width / 2;
9
+ var centery = top + height / 2;
10
+ var right = left + width;
11
+ var bottom = top + height;
12
+ return [
13
+ {
14
+ name: 'TOP',
15
+ position: {
16
+ x: centerx,
17
+ y: top
18
+ }
19
+ },
20
+ {
21
+ name: 'RIGHT',
22
+ position: {
23
+ x: right,
24
+ y: centery
25
+ }
26
+ },
27
+ {
28
+ name: 'BOTTOM',
29
+ position: {
30
+ x: centerx,
31
+ y: bottom
32
+ }
33
+ },
34
+ {
35
+ name: 'LEFT',
36
+ position: {
37
+ x: left,
38
+ y: centery
39
+ }
40
+ }
41
+ ];
42
+ }
43
+ //# sourceMappingURL=ellipse-anchors.js.map
package/dist/anchors/ellipse-anchors.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ellipse-anchors.js","sourceRoot":"","sources":["../../src/anchors/ellipse-anchors.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,SAAoB;IACzD,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAA;IAEnD,IAAI,OAAO,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAA;IAC9B,IAAI,OAAO,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,CAAA;IAC9B,IAAI,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA;IACxB,IAAI,MAAM,GAAG,GAAG,GAAG,MAAM,CAAA;IAEzB,OAAO;QACL;YACE,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE;gBACR,CAAC,EAAE,OAAO;gBACV,CAAC,EAAE,GAAG;aACP;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,CAAC,EAAE,KAAK;gBACR,CAAC,EAAE,OAAO;aACX;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE;gBACR,CAAC,EAAE,OAAO;gBACV,CAAC,EAAE,MAAM;aACV;SACF;QACD;YACE,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE;gBACR,CAAC,EAAE,IAAI;gBACP,CAAC,EAAE,OAAO;aACX;SACF;KACF,CAAA;AACH,CAAC","sourcesContent":["import { Anchor, Component } from '@hatiolab/things-scene'\n\n/**\n * @function ellipseAnchors\n * @param {Component} component\n * @return {Anchor[]}\n */\nexport default function ellipseAnchors(component: Component): Anchor[] {\n var { left, top, width, height } = component.bounds\n\n var centerx = left + width / 2\n var centery = top + height / 2\n var right = left + width\n var bottom = top + height\n\n return [\n {\n name: 'TOP',\n position: {\n x: centerx,\n y: top\n }\n },\n {\n name: 'RIGHT',\n position: {\n x: right,\n y: centery\n }\n },\n {\n name: 'BOTTOM',\n position: {\n x: centerx,\n y: bottom\n }\n },\n {\n name: 'LEFT',\n position: {\n x: left,\n y: centery\n }\n }\n ]\n}\n"]}
package/dist/audio.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { ComponentNature, Properties, Shape } from '@hatiolab/things-scene';
2
+ declare const AudioPlayer_base: typeof Shape;
3
+ export default class AudioPlayer extends AudioPlayer_base {
4
+ static IMAGE: HTMLImageElement;
5
+ static get image(): HTMLImageElement;
6
+ _audio: any;
7
+ dispose(): void;
8
+ ready(): void;
9
+ render(ctx: CanvasRenderingContext2D): void;
10
+ get nature(): ComponentNature;
11
+ get hasTextProperty(): boolean;
12
+ get src(): any;
13
+ set src(src: any);
14
+ get started(): boolean;
15
+ set started(started: boolean);
16
+ start(): void;
17
+ pause(): void;
18
+ onchangeSrc(src: string): void;
19
+ onchangeStarted(started: boolean): void;
20
+ onchangeLoop(loop: boolean): void;
21
+ onchange(after: Properties, before: Properties): void;
22
+ ondblclick(e: MouseEvent): void;
23
+ ondropfile(transfered: DataTransferItemList, files: FileList): void;
24
+ }
25
+ export {};
package/dist/audio.js ADDED
@@ -0,0 +1,141 @@
1
+ /*
2
+ * Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { Component, RectPath, Shape } from '@hatiolab/things-scene';
5
+ const NATURE = {
6
+ mutable: false,
7
+ resizable: true,
8
+ rotatable: true,
9
+ properties: [
10
+ {
11
+ type: 'string',
12
+ label: 'src',
13
+ name: 'src'
14
+ },
15
+ {
16
+ type: 'checkbox',
17
+ label: 'started',
18
+ name: 'started'
19
+ },
20
+ {
21
+ type: 'checkbox',
22
+ label: 'loop',
23
+ name: 'loop'
24
+ }
25
+ ],
26
+ 'value-property': 'src',
27
+ help: 'scene/component/audio'
28
+ };
29
+ const AUDIO_IMAGE = 'data:image/png;base64,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';
30
+ export default class AudioPlayer extends RectPath(Shape) {
31
+ static get image() {
32
+ if (!AudioPlayer.IMAGE) {
33
+ AudioPlayer.IMAGE = new Image();
34
+ AudioPlayer.IMAGE.src = AUDIO_IMAGE;
35
+ }
36
+ return AudioPlayer.IMAGE;
37
+ }
38
+ dispose() {
39
+ super.dispose();
40
+ this.started = false;
41
+ delete this._audio;
42
+ }
43
+ ready() {
44
+ super.ready();
45
+ this._audio = new Audio();
46
+ this._audio.addEventListener('canplay', () => {
47
+ this.started && this._audio.play();
48
+ });
49
+ var { src = '', loop = false, started = false } = this.state;
50
+ this.onchangeSrc(src);
51
+ this.onchangeLoop(loop);
52
+ this.onchangeStarted(started);
53
+ }
54
+ render(ctx) {
55
+ var { left, top, width, height, src } = this.state;
56
+ ctx.beginPath();
57
+ this.drawImage(ctx, AudioPlayer.image, left, top, width, height);
58
+ }
59
+ get nature() {
60
+ return NATURE;
61
+ }
62
+ get hasTextProperty() {
63
+ return false;
64
+ }
65
+ get src() {
66
+ return this.get('src');
67
+ }
68
+ set src(src) {
69
+ this.set('src', src);
70
+ }
71
+ get started() {
72
+ return !!this.get('started');
73
+ }
74
+ set started(started) {
75
+ this.set('started', started);
76
+ }
77
+ start() {
78
+ if (!this._audio)
79
+ return;
80
+ this._audio.classList.add('active');
81
+ this._audio.play();
82
+ }
83
+ pause() {
84
+ if (!this._audio)
85
+ return;
86
+ this._audio.classList.remove('active');
87
+ this._audio.pause();
88
+ }
89
+ onchangeSrc(src) {
90
+ try {
91
+ // this._audio.crossOrigin = "anonymous";
92
+ if (String(src).substring(0, 4) !== 'data')
93
+ this._audio.crossOrigin = 'use-credentials';
94
+ else
95
+ this._audio.crossOrigin = null;
96
+ this._audio.src = typeof src === 'string' ? this.app.url(src) : src;
97
+ }
98
+ catch (e) {
99
+ console.error(e);
100
+ return;
101
+ }
102
+ }
103
+ onchangeStarted(started) {
104
+ const audio = this._audio;
105
+ if (started) {
106
+ /*
107
+ [ audio/video.readyState ]
108
+ 0 = HAVE_NOTHING - no information whether or not the audio/video is ready
109
+ 1 = HAVE_METADATA - metadata for the audio/video is ready
110
+ 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond
111
+ 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available
112
+ 4 = HAVE_ENOUGH_DATA - enough data available to start playing
113
+ */
114
+ audio.readyState == 4 && audio.play();
115
+ }
116
+ else {
117
+ audio.pause();
118
+ }
119
+ }
120
+ onchangeLoop(loop) {
121
+ this._audio.loop = loop;
122
+ }
123
+ onchange(after, before) {
124
+ 'src' in after && this.onchangeSrc(after.src);
125
+ 'started' in after && this.onchangeStarted(after.started);
126
+ 'loop' in after && this.onchangeLoop(after.loop);
127
+ }
128
+ ondblclick(e) {
129
+ this.started = !this.started;
130
+ }
131
+ ondropfile(transfered, files) {
132
+ for (let i = 0; i < transfered.length; i++) {
133
+ if (transfered[i].type.startsWith('audio/')) {
134
+ this.src = files[i];
135
+ return;
136
+ }
137
+ }
138
+ }
139
+ }
140
+ Component.register('audio', AudioPlayer);
141
+ //# sourceMappingURL=audio.js.map
package/dist/audio.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"audio.js","sourceRoot":"","sources":["../src/audio.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'string',\n label: 'src',\n name: 'src'\n },\n {\n type: 'checkbox',\n label: 'started',\n name: 'started'\n },\n {\n type: 'checkbox',\n label: 'loop',\n name: 'loop'\n }\n ],\n 'value-property': 'src',\n help: 'scene/component/audio'\n}\n\nconst AUDIO_IMAGE =\n 'data:image/png;base64,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'\n\nexport default class AudioPlayer extends RectPath(Shape) {\n static IMAGE: HTMLImageElement\n\n static get image() {\n if (!AudioPlayer.IMAGE) {\n AudioPlayer.IMAGE = new Image()\n AudioPlayer.IMAGE.src = AUDIO_IMAGE\n }\n\n return AudioPlayer.IMAGE\n }\n\n _audio: any\n\n dispose() {\n super.dispose()\n\n this.started = false\n delete this._audio\n }\n\n ready() {\n super.ready()\n\n this._audio = new Audio()\n\n this._audio.addEventListener('canplay', () => {\n this.started && this._audio.play()\n })\n\n var { src = '', loop = false, started = false } = this.state\n\n this.onchangeSrc(src)\n this.onchangeLoop(loop)\n this.onchangeStarted(started)\n }\n\n render(ctx: CanvasRenderingContext2D) {\n var { left, top, width, height, src } = this.state\n\n ctx.beginPath()\n\n this.drawImage(ctx, AudioPlayer.image, left, top, width, height)\n }\n\n get nature() {\n return NATURE\n }\n\n get hasTextProperty() {\n return false\n }\n\n get src() {\n return this.get('src')\n }\n\n set src(src) {\n this.set('src', src)\n }\n\n get started() {\n return !!this.get('started')\n }\n\n set started(started) {\n this.set('started', started)\n }\n\n start() {\n if (!this._audio) return\n\n this._audio.classList.add('active')\n this._audio.play()\n }\n\n pause() {\n if (!this._audio) return\n\n this._audio.classList.remove('active')\n this._audio.pause()\n }\n\n onchangeSrc(src: string) {\n try {\n // this._audio.crossOrigin = \"anonymous\";\n if (String(src).substring(0, 4) !== 'data') this._audio.crossOrigin = 'use-credentials'\n else this._audio.crossOrigin = null\n\n this._audio.src = typeof src === 'string' ? this.app.url(src) : src\n } catch (e) {\n console.error(e)\n return\n }\n }\n\n onchangeStarted(started: boolean) {\n const audio = this._audio\n\n if (started) {\n /* \n [ audio/video.readyState ]\n 0 = HAVE_NOTHING - no information whether or not the audio/video is ready\n 1 = HAVE_METADATA - metadata for the audio/video is ready\n 2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond\n 3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available\n 4 = HAVE_ENOUGH_DATA - enough data available to start playing\n */\n audio.readyState == 4 && audio.play()\n } else {\n audio.pause()\n }\n }\n\n onchangeLoop(loop: boolean) {\n this._audio.loop = loop\n }\n\n onchange(after: Properties, before: Properties) {\n 'src' in after && this.onchangeSrc(after.src)\n 'started' in after && this.onchangeStarted(after.started)\n 'loop' in after && this.onchangeLoop(after.loop)\n }\n\n ondblclick(e: MouseEvent) {\n this.started = !this.started\n }\n\n ondropfile(transfered: DataTransferItemList, files: FileList) {\n for (let i = 0; i < transfered.length; i++) {\n if (transfered[i].type.startsWith('audio/')) {\n this.src = files[i]\n return\n }\n }\n }\n}\n\nComponent.register('audio', AudioPlayer)\n"]}
package/dist/cloud.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { Component } from '@hatiolab/things-scene';
2
+ export default class Cloud extends Component {
3
+ prerender(ctx: CanvasRenderingContext2D): void;
4
+ render(ctx: CanvasRenderingContext2D): void;
5
+ get path(): {
6
+ x: any;
7
+ y: any;
8
+ }[];
9
+ set path(path: {
10
+ x: any;
11
+ y: any;
12
+ }[]);
13
+ }
package/dist/cloud.js ADDED
@@ -0,0 +1,30 @@
1
+ /*
2
+ * Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { Component } from '@hatiolab/things-scene';
5
+ export default class Cloud extends Component {
6
+ prerender(ctx) {
7
+ //TODO center()를 구현할 때까지, 아무 구현없이 오버라이드한다.
8
+ }
9
+ render(ctx) {
10
+ var { x, y } = this.state;
11
+ ctx.beginPath();
12
+ ctx.moveTo(x, y);
13
+ ctx.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 50, y + 70);
14
+ ctx.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70);
15
+ ctx.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 30);
16
+ ctx.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30);
17
+ ctx.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30);
18
+ ctx.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y);
19
+ ctx.closePath();
20
+ }
21
+ get path() {
22
+ var { x, y } = this.state;
23
+ return [{ x, y }];
24
+ }
25
+ set path(path) {
26
+ /* do nothing */
27
+ }
28
+ }
29
+ Component.register('cloud', Cloud);
30
+ //# sourceMappingURL=cloud.js.map
package/dist/cloud.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cloud.js","sourceRoot":"","sources":["../src/cloud.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAElD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,SAAS;IAC1C,SAAS,CAAC,GAA6B;QACrC,0CAA0C;IAC5C,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAEhB,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACjE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACrE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QAClE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEvD,GAAG,CAAC,SAAS,EAAE,CAAA;IACjB,CAAC;IAED,IAAI,IAAI;QACN,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACnB,CAAC;IAED,IAAI,IAAI,CAAC,IAAI;QACX,gBAAgB;IAClB,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component } from '@hatiolab/things-scene'\n\nexport default class Cloud extends Component {\n prerender(ctx: CanvasRenderingContext2D) {\n //TODO center()를 구현할 때까지, 아무 구현없이 오버라이드한다.\n }\n\n render(ctx: CanvasRenderingContext2D) {\n var { x, y } = this.state\n\n ctx.beginPath()\n\n ctx.moveTo(x, y)\n\n ctx.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 50, y + 70)\n ctx.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70)\n ctx.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 30)\n ctx.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30)\n ctx.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30)\n ctx.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y)\n\n ctx.closePath()\n }\n\n get path() {\n var { x, y } = this.state\n\n return [{ x, y }]\n }\n\n set path(path) {\n /* do nothing */\n }\n}\n\nComponent.register('cloud', Cloud)\n"]}
package/dist/donut.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { Component, ComponentNature } from '@hatiolab/things-scene';
2
+ import Ellipse from './ellipse';
3
+ export default class Donut extends Ellipse {
4
+ is3dish(): boolean;
5
+ render(ctx: CanvasRenderingContext2D): void;
6
+ contains(x: number, y: number): boolean;
7
+ get controls(): {
8
+ x: any;
9
+ y: any;
10
+ handler: {
11
+ ondragmove: (point: import("@hatiolab/things-scene").DIMENSION, index: number, component: Component) => void;
12
+ };
13
+ }[];
14
+ get nature(): ComponentNature;
15
+ }
package/dist/donut.js ADDED
@@ -0,0 +1,74 @@
1
+ /*
2
+ * Copyright © HatioLab Inc. All rights reserved.
3
+ */
4
+ import { Component } from '@hatiolab/things-scene';
5
+ import Ellipse from './ellipse';
6
+ const NATURE = {
7
+ mutable: false,
8
+ resizable: true,
9
+ rotatable: true,
10
+ properties: [
11
+ {
12
+ type: 'number',
13
+ label: 'ratio',
14
+ name: 'ratio',
15
+ property: 'ratio'
16
+ }
17
+ ],
18
+ help: 'scene/component/donut'
19
+ };
20
+ var controlHandler = {
21
+ ondragmove: function (point, index, component) {
22
+ var { cx, rx } = component.model;
23
+ rx = Math.abs(rx);
24
+ var transcoorded = component.transcoordP2S(point.x, point.y);
25
+ var ratio = ((transcoorded.x - cx) / rx) * 100;
26
+ ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio);
27
+ component.set({ ratio });
28
+ }
29
+ };
30
+ export default class Donut extends Ellipse {
31
+ is3dish() {
32
+ return false;
33
+ }
34
+ render(ctx) {
35
+ var { ratio = 50, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state;
36
+ rx = Math.abs(rx);
37
+ ry = Math.abs(ry);
38
+ ctx.beginPath();
39
+ ctx.ellipse(cx, cy, rx, ry, 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise);
40
+ ctx.moveTo(cx + (rx / 100) * ratio, cy);
41
+ // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨
42
+ ctx.ellipse(cx, cy, (rx / 100) * ratio, (ry / 100) * ratio, 0, startAngle || 0, endAngle || 2 * Math.PI, true);
43
+ }
44
+ contains(x, y) {
45
+ var { cx, cy, rx, ry, ratio } = this.state;
46
+ rx = Math.abs(rx);
47
+ ry = Math.abs(ry);
48
+ var normx = (x - cx) / (rx * 2 - 0.5);
49
+ var normy = (y - cy) / (ry * 2 - 0.5);
50
+ var ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5);
51
+ var ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5);
52
+ var result = false;
53
+ if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25)
54
+ result = !result;
55
+ return result;
56
+ }
57
+ get controls() {
58
+ var { cx, cy, rx, ratio } = this.state;
59
+ rx = Math.abs(rx);
60
+ return [
61
+ {
62
+ x: cx + (rx / 100) * ratio,
63
+ y: cy,
64
+ handler: controlHandler
65
+ }
66
+ ];
67
+ }
68
+ get nature() {
69
+ return NATURE;
70
+ }
71
+ }
72
+ Component.memoize(Donut.prototype, 'controls', false);
73
+ Component.register('donut', Donut);
74
+ //# sourceMappingURL=donut.js.map
package/dist/donut.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"donut.js","sourceRoot":"","sources":["../src/donut.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, POSITION } from '@hatiolab/things-scene'\nimport Ellipse from './ellipse'\n\nconst NATURE: ComponentNature = {\n mutable: false,\n resizable: true,\n rotatable: true,\n properties: [\n {\n type: 'number',\n label: 'ratio',\n name: 'ratio',\n property: 'ratio'\n }\n ],\n help: 'scene/component/donut'\n}\n\nvar controlHandler = {\n ondragmove: function (point: POSITION, index: number, component: Component) {\n var { cx, rx } = component.model\n rx = Math.abs(rx)\n\n var transcoorded = component.transcoordP2S(point.x, point.y)\n\n var ratio = ((transcoorded.x - cx) / rx) * 100\n\n ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)\n\n component.set({ ratio })\n }\n}\n\nexport default class Donut extends Ellipse {\n is3dish() {\n return false\n }\n\n render(ctx: CanvasRenderingContext2D) {\n var { ratio = 50, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n rx = Math.abs(rx)\n ry = Math.abs(ry)\n\n ctx.beginPath()\n ctx.ellipse(cx, cy, rx, ry, 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n\n ctx.moveTo(cx + (rx / 100) * ratio, cy)\n // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨\n ctx.ellipse(cx, cy, (rx / 100) * ratio, (ry / 100) * ratio, 0, startAngle || 0, endAngle || 2 * Math.PI, true)\n }\n\n contains(x: number, y: number) {\n var { cx, cy, rx, ry, ratio } = this.state\n rx = Math.abs(rx)\n ry = Math.abs(ry)\n\n var normx = (x - cx) / (rx * 2 - 0.5)\n var normy = (y - cy) / (ry * 2 - 0.5)\n var ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)\n var ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)\n var result = false\n\n if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) result = !result\n\n return result\n }\n\n get controls() {\n var { cx, cy, rx, ratio } = this.state\n rx = Math.abs(rx)\n\n return [\n {\n x: cx + (rx / 100) * ratio,\n y: cy,\n handler: controlHandler\n }\n ]\n }\n\n get nature() {\n return NATURE\n }\n}\n\nComponent.memoize(Donut.prototype, 'controls', false)\n\nComponent.register('donut', Donut)\n"]}
package/dist/ellipse.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { Anchor, Component, ComponentNature, Shape } from '@hatiolab/things-scene';
2
+ declare const Ellipse_base: (new (...args: any[]) => {
3
+ findOutletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
4
+ findOutletEnds(anchorName: string): Component[];
5
+ findInletLines(anchorName: string): import("@hatiolab/things-scene").Line[];
6
+ findInletEnds(anchorName: string): Component[];
7
+ }) & typeof Shape;
8
+ export default class Ellipse extends Ellipse_base {
9
+ is3dish(): boolean;
10
+ render(context: CanvasRenderingContext2D): void;
11
+ get path(): {
12
+ x: any;
13
+ y: any;
14
+ }[];
15
+ set path(path: {
16
+ x: any;
17
+ y: any;
18
+ }[]);
19
+ contains(x: number, y: number): boolean;
20
+ outline(progress: number): import("@hatiolab/things-scene").DIMENSION;
21
+ get anchors(): Array<Anchor>;
22
+ get nature(): ComponentNature;
23
+ }
24
+ export {};