@operato/process 1.1.1

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 (197) hide show
  1. package/.storybook/main.js +3 -0
  2. package/.storybook/server.mjs +8 -0
  3. package/CHANGELOG.md +1824 -0
  4. package/LICENSE +21 -0
  5. package/README.md +95 -0
  6. package/demo/index-modeller.html +101 -0
  7. package/demo/index-viewer.html +101 -0
  8. package/demo/index.html +101 -0
  9. package/dist/src/data-storage/data-storage.d.ts +8 -0
  10. package/dist/src/data-storage/data-storage.js +28 -0
  11. package/dist/src/data-storage/data-storage.js.map +1 -0
  12. package/dist/src/graphql/data-subscription.d.ts +5 -0
  13. package/dist/src/graphql/data-subscription.js +24 -0
  14. package/dist/src/graphql/data-subscription.js.map +1 -0
  15. package/dist/src/graphql/favorite-process.d.ts +1 -0
  16. package/dist/src/graphql/favorite-process.js +23 -0
  17. package/dist/src/graphql/favorite-process.js.map +1 -0
  18. package/dist/src/graphql/index.d.ts +3 -0
  19. package/dist/src/graphql/index.js +4 -0
  20. package/dist/src/graphql/index.js.map +1 -0
  21. package/dist/src/graphql/process-group.d.ts +7 -0
  22. package/dist/src/graphql/process-group.js +125 -0
  23. package/dist/src/graphql/process-group.js.map +1 -0
  24. package/dist/src/graphql/process.d.ts +6 -0
  25. package/dist/src/graphql/process.js +130 -0
  26. package/dist/src/graphql/process.js.map +1 -0
  27. package/dist/src/graphql/scenario.d.ts +6 -0
  28. package/dist/src/graphql/scenario.js +69 -0
  29. package/dist/src/graphql/scenario.js.map +1 -0
  30. package/dist/src/index.d.ts +5 -0
  31. package/dist/src/index.js +6 -0
  32. package/dist/src/index.js.map +1 -0
  33. package/dist/src/modeller/component-toolbar/component-detail.d.ts +12 -0
  34. package/dist/src/modeller/component-toolbar/component-detail.js +58 -0
  35. package/dist/src/modeller/component-toolbar/component-detail.js.map +1 -0
  36. package/dist/src/modeller/component-toolbar/component-menu.d.ts +24 -0
  37. package/dist/src/modeller/component-toolbar/component-menu.js +190 -0
  38. package/dist/src/modeller/component-toolbar/component-menu.js.map +1 -0
  39. package/dist/src/modeller/component-toolbar/component-toolbar.d.ts +28 -0
  40. package/dist/src/modeller/component-toolbar/component-toolbar.js +168 -0
  41. package/dist/src/modeller/component-toolbar/component-toolbar.js.map +1 -0
  42. package/dist/src/modeller/component-toolbar/mode-icons.d.ts +2 -0
  43. package/dist/src/modeller/component-toolbar/mode-icons.js +86 -0
  44. package/dist/src/modeller/component-toolbar/mode-icons.js.map +1 -0
  45. package/dist/src/modeller/edit-toolbar-style.d.ts +4 -0
  46. package/dist/src/modeller/edit-toolbar-style.js +227 -0
  47. package/dist/src/modeller/edit-toolbar-style.js.map +1 -0
  48. package/dist/src/modeller/edit-toolbar.d.ts +61 -0
  49. package/dist/src/modeller/edit-toolbar.js +641 -0
  50. package/dist/src/modeller/edit-toolbar.js.map +1 -0
  51. package/dist/src/modeller/property-sidebar/abstract-property.d.ts +10 -0
  52. package/dist/src/modeller/property-sidebar/abstract-property.js +55 -0
  53. package/dist/src/modeller/property-sidebar/abstract-property.js.map +1 -0
  54. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.d.ts +4 -0
  55. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js +61 -0
  56. package/dist/src/modeller/property-sidebar/effects/effects-shared-style.js.map +1 -0
  57. package/dist/src/modeller/property-sidebar/effects/effects.d.ts +20 -0
  58. package/dist/src/modeller/property-sidebar/effects/effects.js +42 -0
  59. package/dist/src/modeller/property-sidebar/effects/effects.js.map +1 -0
  60. package/dist/src/modeller/property-sidebar/effects/property-shadow.d.ts +23 -0
  61. package/dist/src/modeller/property-sidebar/effects/property-shadow.js +103 -0
  62. package/dist/src/modeller/property-sidebar/effects/property-shadow.js.map +1 -0
  63. package/dist/src/modeller/property-sidebar/effects/value-converter.d.ts +1 -0
  64. package/dist/src/modeller/property-sidebar/effects/value-converter.js +21 -0
  65. package/dist/src/modeller/property-sidebar/effects/value-converter.js.map +1 -0
  66. package/dist/src/modeller/property-sidebar/inspector/inspector.d.ts +29 -0
  67. package/dist/src/modeller/property-sidebar/inspector/inspector.js +318 -0
  68. package/dist/src/modeller/property-sidebar/inspector/inspector.js.map +1 -0
  69. package/dist/src/modeller/property-sidebar/property-shared-style.d.ts +4 -0
  70. package/dist/src/modeller/property-sidebar/property-shared-style.js +135 -0
  71. package/dist/src/modeller/property-sidebar/property-shared-style.js.map +1 -0
  72. package/dist/src/modeller/property-sidebar/property-sidebar.d.ts +43 -0
  73. package/dist/src/modeller/property-sidebar/property-sidebar.js +309 -0
  74. package/dist/src/modeller/property-sidebar/property-sidebar.js.map +1 -0
  75. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.d.ts +1 -0
  76. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js +94 -0
  77. package/dist/src/modeller/property-sidebar/shapes/box-padding-editor-styles.js.map +1 -0
  78. package/dist/src/modeller/property-sidebar/shapes/shapes.d.ts +28 -0
  79. package/dist/src/modeller/property-sidebar/shapes/shapes.js +321 -0
  80. package/dist/src/modeller/property-sidebar/shapes/shapes.js.map +1 -0
  81. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.d.ts +16 -0
  82. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.js +132 -0
  83. package/dist/src/modeller/property-sidebar/specifics/specific-properties-builder.js.map +1 -0
  84. package/dist/src/modeller/property-sidebar/specifics/specifics.d.ts +25 -0
  85. package/dist/src/modeller/property-sidebar/specifics/specifics.js +81 -0
  86. package/dist/src/modeller/property-sidebar/specifics/specifics.js.map +1 -0
  87. package/dist/src/modeller/property-sidebar/styles/styles.d.ts +21 -0
  88. package/dist/src/modeller/property-sidebar/styles/styles.js +559 -0
  89. package/dist/src/modeller/property-sidebar/styles/styles.js.map +1 -0
  90. package/dist/src/modeller/scene-viewer/scene-handler.d.ts +11 -0
  91. package/dist/src/modeller/scene-viewer/scene-handler.js +32 -0
  92. package/dist/src/modeller/scene-viewer/scene-handler.js.map +1 -0
  93. package/dist/src/modeller/scene-viewer/scene-layer.d.ts +10 -0
  94. package/dist/src/modeller/scene-viewer/scene-layer.js +38 -0
  95. package/dist/src/modeller/scene-viewer/scene-layer.js.map +1 -0
  96. package/dist/src/modeller/scene-viewer/scene-property.d.ts +6 -0
  97. package/dist/src/modeller/scene-viewer/scene-property.js +15 -0
  98. package/dist/src/modeller/scene-viewer/scene-property.js.map +1 -0
  99. package/dist/src/modeller/scene-viewer/scene-viewer.d.ts +38 -0
  100. package/dist/src/modeller/scene-viewer/scene-viewer.js +243 -0
  101. package/dist/src/modeller/scene-viewer/scene-viewer.js.map +1 -0
  102. package/dist/src/ox-process-list.d.ts +2 -0
  103. package/dist/src/ox-process-list.js +427 -0
  104. package/dist/src/ox-process-list.js.map +1 -0
  105. package/dist/src/ox-process-modeller.d.ts +58 -0
  106. package/dist/src/ox-process-modeller.js +396 -0
  107. package/dist/src/ox-process-modeller.js.map +1 -0
  108. package/dist/src/ox-process-viewer.d.ts +51 -0
  109. package/dist/src/ox-process-viewer.js +512 -0
  110. package/dist/src/ox-process-viewer.js.map +1 -0
  111. package/dist/src/types.d.ts +37 -0
  112. package/dist/src/types.js +2 -0
  113. package/dist/src/types.js.map +1 -0
  114. package/dist/stories/index.stories.d.ts +33 -0
  115. package/dist/stories/index.stories.js +33 -0
  116. package/dist/stories/index.stories.js.map +1 -0
  117. package/dist/tsconfig.tsbuildinfo +1 -0
  118. package/icons/components/audio.png +0 -0
  119. package/icons/components/both-arrow.png +0 -0
  120. package/icons/components/color-image.png +0 -0
  121. package/icons/components/container.png +0 -0
  122. package/icons/components/dash.png +0 -0
  123. package/icons/components/donut.png +0 -0
  124. package/icons/components/ellipse.png +0 -0
  125. package/icons/components/forklift.png +0 -0
  126. package/icons/components/gif-image.png +0 -0
  127. package/icons/components/global-reference.png +0 -0
  128. package/icons/components/gray-image.png +0 -0
  129. package/icons/components/humidity-sensor.png +0 -0
  130. package/icons/components/info-window.png +0 -0
  131. package/icons/components/line.png +0 -0
  132. package/icons/components/local-reference.png +0 -0
  133. package/icons/components/no-image.png +0 -0
  134. package/icons/components/ortholine.png +0 -0
  135. package/icons/components/person.png +0 -0
  136. package/icons/components/polygon.png +0 -0
  137. package/icons/components/polyline.png +0 -0
  138. package/icons/components/popup.png +0 -0
  139. package/icons/components/rect.png +0 -0
  140. package/icons/components/single-arrow.png +0 -0
  141. package/icons/components/star.png +0 -0
  142. package/icons/components/streamline.png +0 -0
  143. package/icons/components/text.png +0 -0
  144. package/icons/components/triangle.png +0 -0
  145. package/icons/icon-collapse-active.png +0 -0
  146. package/icons/icon-collapse.png +0 -0
  147. package/icons/icon-fullscreen.png +0 -0
  148. package/icons/icon-htoolbar.png +0 -0
  149. package/icons/icon-properties-arrow-type.png +0 -0
  150. package/icons/icon-properties-gradient-direction.png +0 -0
  151. package/icons/icon-properties-label.png +0 -0
  152. package/icons/icon-properties-line-type.png +0 -0
  153. package/icons/icon-properties-padding.png +0 -0
  154. package/icons/icon-properties-ratio.png +0 -0
  155. package/icons/icon-properties-table.png +0 -0
  156. package/icons/icon-properties.png +0 -0
  157. package/icons/icon-shell-inspector.png +0 -0
  158. package/package.json +115 -0
  159. package/src/data-storage/data-storage.ts +47 -0
  160. package/src/graphql/data-subscription.ts +30 -0
  161. package/src/graphql/favorite-process.ts +25 -0
  162. package/src/graphql/index.ts +3 -0
  163. package/src/graphql/process-group.ts +138 -0
  164. package/src/graphql/process.ts +144 -0
  165. package/src/graphql/scenario.ts +79 -0
  166. package/src/index.ts +7 -0
  167. package/src/modeller/component-toolbar/component-detail.ts +58 -0
  168. package/src/modeller/component-toolbar/component-menu.ts +187 -0
  169. package/src/modeller/component-toolbar/component-toolbar.ts +173 -0
  170. package/src/modeller/component-toolbar/mode-icons.ts +86 -0
  171. package/src/modeller/edit-toolbar-style.ts +228 -0
  172. package/src/modeller/edit-toolbar.ts +641 -0
  173. package/src/modeller/property-sidebar/abstract-property.ts +69 -0
  174. package/src/modeller/property-sidebar/effects/effects-shared-style.ts +62 -0
  175. package/src/modeller/property-sidebar/effects/effects.ts +47 -0
  176. package/src/modeller/property-sidebar/effects/property-shadow.ts +114 -0
  177. package/src/modeller/property-sidebar/effects/value-converter.ts +23 -0
  178. package/src/modeller/property-sidebar/inspector/inspector.ts +361 -0
  179. package/src/modeller/property-sidebar/property-shared-style.ts +136 -0
  180. package/src/modeller/property-sidebar/property-sidebar.ts +308 -0
  181. package/src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts +94 -0
  182. package/src/modeller/property-sidebar/shapes/shapes.ts +326 -0
  183. package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts +144 -0
  184. package/src/modeller/property-sidebar/specifics/specifics.ts +77 -0
  185. package/src/modeller/property-sidebar/styles/styles.ts +577 -0
  186. package/src/modeller/scene-viewer/scene-handler.ts +39 -0
  187. package/src/modeller/scene-viewer/scene-layer.ts +41 -0
  188. package/src/modeller/scene-viewer/scene-property.ts +9 -0
  189. package/src/modeller/scene-viewer/scene-viewer.ts +249 -0
  190. package/src/ox-process-list.ts +459 -0
  191. package/src/ox-process-modeller.ts +396 -0
  192. package/src/ox-process-viewer.ts +555 -0
  193. package/src/types.ts +68 -0
  194. package/stories/index.stories.ts +52 -0
  195. package/tsconfig.json +23 -0
  196. package/web-dev-server.config.mjs +30 -0
  197. package/web-test-runner.config.mjs +29 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) Hatiolab Inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,95 @@
1
+ # \<board-viewer>
2
+
3
+ This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm i board-viewer
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```html
14
+ <script type="module">
15
+ import 'board-viewer/board-viewer.js'
16
+ </script>
17
+
18
+ <board-viewer></board-viewer>
19
+ ```
20
+
21
+ ## Linting with ESLint, Prettier, and Types
22
+
23
+ To scan the project for linting errors, run
24
+
25
+ ```bash
26
+ npm run lint
27
+ ```
28
+
29
+ You can lint with ESLint and Prettier individually as well
30
+
31
+ ```bash
32
+ npm run lint:eslint
33
+ ```
34
+
35
+ ```bash
36
+ npm run lint:prettier
37
+ ```
38
+
39
+ To automatically fix many linting errors, run
40
+
41
+ ```bash
42
+ npm run format
43
+ ```
44
+
45
+ You can format using ESLint and Prettier individually as well
46
+
47
+ ```bash
48
+ npm run format:eslint
49
+ ```
50
+
51
+ ```bash
52
+ npm run format:prettier
53
+ ```
54
+
55
+ ## Testing with Web Test Runner
56
+
57
+ To run the suite of Web Test Runner tests, run
58
+
59
+ ```bash
60
+ npm run test
61
+ ```
62
+
63
+ To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
64
+
65
+ ```bash
66
+ npm run test:watch
67
+ ```
68
+
69
+ ## Demoing with Storybook
70
+
71
+ To run a local instance of Storybook for your component, run
72
+
73
+ ```bash
74
+ npm run storybook
75
+ ```
76
+
77
+ To build a production version of Storybook, run
78
+
79
+ ```bash
80
+ npm run storybook:build
81
+ ```
82
+
83
+ ## Tooling configs
84
+
85
+ For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
86
+
87
+ If you customize the configuration a lot, you can consider moving them to individual files.
88
+
89
+ ## Local Demo with `web-dev-server`
90
+
91
+ ```bash
92
+ npm start
93
+ ```
94
+
95
+ To run a local development server that serves the basic demo located in `demo/index.html`
package/demo/index-modeller.html ADDED
@@ -0,0 +1,101 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ padding: 0;
10
+ overflow: hidden;
11
+
12
+ /* This is a font-stack that tries to use the system-default sans-serifs first */
13
+ font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
14
+ line-height: 1.5;
15
+ -webkit-font-smoothing: antialiased;
16
+ }
17
+
18
+ ox-process-modeller {
19
+ width: 100vw;
20
+ height: 100vh;
21
+ }
22
+ </style>
23
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
24
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
25
+ </head>
26
+ <body>
27
+ <div id="demo"></div>
28
+ <script type="module">
29
+ import { html, render } from 'lit'
30
+ import '../dist/src/ox-process-modeller.js'
31
+ import { ReferenceMap, create, error } from '@hatiolab/things-scene'
32
+
33
+ const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
34
+ const processes = colors.map((color, idx) => {
35
+ var to = colors[(idx + 1) % colors.length]
36
+ return {
37
+ id: color,
38
+ model: {
39
+ width: 400,
40
+ height: 300,
41
+ fillStyle: color,
42
+ components: [
43
+ {
44
+ type: 'text',
45
+ left: 100,
46
+ top: 100,
47
+ width: 200,
48
+ height: 30,
49
+ text: `Click to move to ${to}`,
50
+ event: {
51
+ tap: {
52
+ action: 'goto',
53
+ target: to
54
+ }
55
+ }
56
+ }
57
+ ]
58
+ }
59
+ }
60
+ })
61
+
62
+ var provider = new ReferenceMap(
63
+ async (processId, resolve, reject) => {
64
+ try {
65
+ const process = processes.find(process => {
66
+ return process.id === processId
67
+ })
68
+ if (!process) {
69
+ throw `no process named as ${processId}`
70
+ }
71
+
72
+ var scene
73
+
74
+ try {
75
+ scene = await provider.get(processId)
76
+ console.warn('Process fetched more than twice.', processId)
77
+ } catch (e) {
78
+ scene = create({
79
+ model: JSON.parse(JSON.stringify(process.model)),
80
+ mode: 0,
81
+ refProvider: provider
82
+ })
83
+ }
84
+ resolve(scene, process)
85
+ } catch (e) {
86
+ error(e)
87
+ reject(e)
88
+ }
89
+ },
90
+ async (id, ref) => {
91
+ ref.dispose()
92
+ }
93
+ )
94
+
95
+ render(
96
+ html` <ox-process-modeller .process=${processes[0]} .provider=${provider}> </ox-process-modeller> `,
97
+ document.querySelector('#demo')
98
+ )
99
+ </script>
100
+ </body>
101
+ </html>
package/demo/index-viewer.html ADDED
@@ -0,0 +1,101 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ padding: 0;
10
+ overflow: hidden;
11
+
12
+ /* This is a font-stack that tries to use the system-default sans-serifs first */
13
+ font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
14
+ line-height: 1.5;
15
+ -webkit-font-smoothing: antialiased;
16
+ }
17
+
18
+ ox-process-viewer {
19
+ width: 100vw;
20
+ height: 100vh;
21
+ }
22
+ </style>
23
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
24
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
25
+ </head>
26
+ <body>
27
+ <div id="demo"></div>
28
+ <script type="module">
29
+ import { html, render } from 'lit'
30
+ import '../dist/src/ox-process-viewer.js'
31
+ import { ReferenceMap, create, error } from '@hatiolab/things-scene'
32
+
33
+ const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
34
+ const processes = colors.map((color, idx) => {
35
+ var to = colors[(idx + 1) % colors.length]
36
+ return {
37
+ id: color,
38
+ model: {
39
+ width: 400,
40
+ height: 300,
41
+ fillStyle: color,
42
+ components: [
43
+ {
44
+ type: 'text',
45
+ left: 100,
46
+ top: 100,
47
+ width: 200,
48
+ height: 30,
49
+ text: `Click to move to ${to}`,
50
+ event: {
51
+ tap: {
52
+ action: 'goto',
53
+ target: to
54
+ }
55
+ }
56
+ }
57
+ ]
58
+ }
59
+ }
60
+ })
61
+
62
+ var provider = new ReferenceMap(
63
+ async (processId, resolve, reject) => {
64
+ try {
65
+ const process = processes.find(process => {
66
+ return process.id === processId
67
+ })
68
+ if (!process) {
69
+ throw `no process named as ${processId}`
70
+ }
71
+
72
+ var scene
73
+
74
+ try {
75
+ scene = await provider.get(processId)
76
+ console.warn('Process fetched more than twice.', processId)
77
+ } catch (e) {
78
+ scene = create({
79
+ model: JSON.parse(JSON.stringify(process.model)),
80
+ mode: 0,
81
+ refProvider: provider
82
+ })
83
+ }
84
+ resolve(scene, process)
85
+ } catch (e) {
86
+ error(e)
87
+ reject(e)
88
+ }
89
+ },
90
+ async (id, ref) => {
91
+ ref.dispose()
92
+ }
93
+ )
94
+
95
+ render(
96
+ html` <ox-process-viewer .process=${processes[0]} .provider=${provider}></ox-process-viewer> `,
97
+ document.querySelector('#demo')
98
+ )
99
+ </script>
100
+ </body>
101
+ </html>
package/demo/index.html ADDED
@@ -0,0 +1,101 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ padding: 0;
10
+ overflow: hidden;
11
+
12
+ /* This is a font-stack that tries to use the system-default sans-serifs first */
13
+ font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
14
+ line-height: 1.5;
15
+ -webkit-font-smoothing: antialiased;
16
+ }
17
+
18
+ ox-process-viewer {
19
+ width: 100vw;
20
+ height: 100vh;
21
+ }
22
+ </style>
23
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
24
+ <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
25
+ </head>
26
+ <body>
27
+ <div id="demo"></div>
28
+ <script type="module">
29
+ import { html, render } from 'lit'
30
+ import '../dist/src/ox-process-viewer.js'
31
+ import { ReferenceMap, create, error } from '@hatiolab/things-scene'
32
+
33
+ const colors = ['red', 'blue', 'orange', 'yellow', 'magenta', 'violet', 'navy', 'green', 'cyan', 'lime']
34
+ const processes = colors.map((color, idx) => {
35
+ var to = colors[(idx + 1) % colors.length]
36
+ return {
37
+ id: color,
38
+ model: {
39
+ width: 400,
40
+ height: 300,
41
+ fillStyle: color,
42
+ components: [
43
+ {
44
+ type: 'text',
45
+ left: 100,
46
+ top: 100,
47
+ width: 200,
48
+ height: 30,
49
+ text: `Click to move to ${to}`,
50
+ event: {
51
+ tap: {
52
+ action: 'goto',
53
+ target: to
54
+ }
55
+ }
56
+ }
57
+ ]
58
+ }
59
+ }
60
+ })
61
+
62
+ var provider = new ReferenceMap(
63
+ async (processId, resolve, reject) => {
64
+ try {
65
+ const process = processes.find(process => {
66
+ return process.id === processId
67
+ })
68
+ if (!process) {
69
+ throw `no process named as ${processId}`
70
+ }
71
+
72
+ var scene
73
+
74
+ try {
75
+ scene = await provider.get(processId)
76
+ console.warn('Process fetched more than twice.', processId)
77
+ } catch (e) {
78
+ scene = create({
79
+ model: JSON.parse(JSON.stringify(process.model)),
80
+ mode: 0,
81
+ refProvider: provider
82
+ })
83
+ }
84
+ resolve(scene, process)
85
+ } catch (e) {
86
+ error(e)
87
+ reject(e)
88
+ }
89
+ },
90
+ async (id, ref) => {
91
+ ref.dispose()
92
+ }
93
+ )
94
+
95
+ render(
96
+ html` <ox-process-viewer .process=${processes[0]} .provider=${provider}></ox-process-viewer> `,
97
+ document.querySelector('#demo')
98
+ )
99
+ </script>
100
+ </body>
101
+ </html>
package/dist/src/data-storage/data-storage.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Component, PersistentDataStorage } from '@hatiolab/things-scene';
2
+ export declare class DataStorage implements PersistentDataStorage {
3
+ private id;
4
+ constructor(id: string);
5
+ load(key: Component): Promise<any>;
6
+ save(key: Component, value: any): Promise<void>;
7
+ clear(key: Component): Promise<void>;
8
+ }
package/dist/src/data-storage/data-storage.js ADDED
@@ -0,0 +1,28 @@
1
+ import Dexie from 'dexie';
2
+ class ProcessDatabase extends Dexie {
3
+ //...other tables goes here...
4
+ constructor() {
5
+ super('operato-process-database');
6
+ this.version(1).stores({
7
+ process_data: '[process+refid]'
8
+ //...other tables goes here...
9
+ });
10
+ }
11
+ }
12
+ const db = new ProcessDatabase();
13
+ export class DataStorage {
14
+ constructor(id) {
15
+ this.id = id;
16
+ }
17
+ async load(key) {
18
+ const saved = await db.process_data.where({ process: this.id, refid: key.state.refid }).first();
19
+ return saved === null || saved === void 0 ? void 0 : saved.data;
20
+ }
21
+ async save(key, value) {
22
+ await db.process_data.put({ process: this.id, refid: key.state.refid, data: value, timestamp: Date.now() });
23
+ }
24
+ async clear(key) {
25
+ await db.process_data.where({ process: this.id, refid: key.state.refid }).delete();
26
+ }
27
+ }
28
+ //# sourceMappingURL=data-storage.js.map
package/dist/src/data-storage/data-storage.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-storage.js","sourceRoot":"","sources":["../../../src/data-storage/data-storage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,eAAgB,SAAQ,KAAK;IAEjC,8BAA8B;IAE9B;QACE,KAAK,CAAC,0BAA0B,CAAC,CAAA;QACjC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACrB,YAAY,EAAE,iBAAiB;YAC/B,8BAA8B;SAC/B,CAAC,CAAA;IACJ,CAAC;CACF;AAUD,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAA;AAEhC,MAAM,OAAO,WAAW;IAGtB,YAAY,EAAU;QACpB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;IACd,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,GAAc;QAC9B,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAA;QAC/F,OAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA;IACpB,CAAC;IAEM,KAAK,CAAC,IAAI,CAAC,GAAc,EAAE,KAAU;QAC1C,MAAM,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;IAC7G,CAAC;IAEM,KAAK,CAAC,KAAK,CAAC,GAAc;QAC/B,MAAM,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAA;IACpF,CAAC;CACF","sourcesContent":["import Dexie from 'dexie'\n\nimport { Component, PersistentDataStorage } from '@hatiolab/things-scene'\n\nclass ProcessDatabase extends Dexie {\n process_data!: Dexie.Table<IProcessData, number> // number = type of the primkey\n //...other tables goes here...\n\n constructor() {\n super('operato-process-database')\n this.version(1).stores({\n process_data: '[process+refid]'\n //...other tables goes here...\n })\n }\n}\n\ninterface IProcessData {\n id?: number\n process: string\n refid: string | number\n data: any\n timestamp: number\n}\n\nconst db = new ProcessDatabase()\n\nexport class DataStorage implements PersistentDataStorage {\n private id: string\n\n constructor(id: string) {\n this.id = id\n }\n\n public async load(key: Component): Promise<any> {\n const saved = await db.process_data.where({ process: this.id, refid: key.state.refid }).first()\n return saved?.data\n }\n\n public async save(key: Component, value: any): Promise<void> {\n await db.process_data.put({ process: this.id, refid: key.state.refid, data: value, timestamp: Date.now() })\n }\n\n public async clear(key: Component): Promise<void> {\n await db.process_data.where({ process: this.id, refid: key.state.refid }).delete()\n }\n}\n"]}
package/dist/src/graphql/data-subscription.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene';
2
+ export declare class DataSubscriptionProviderImpl implements DataSubscriptionProvider {
3
+ subscribe(tag: string, component: Component): Promise<import("zen-observable-ts").Subscription>;
4
+ dispose(): void;
5
+ }
package/dist/src/graphql/data-subscription.js ADDED
@@ -0,0 +1,24 @@
1
+ import gql from 'graphql-tag';
2
+ import { subscribe } from '@operato/graphql';
3
+ export class DataSubscriptionProviderImpl {
4
+ async subscribe(tag, component) {
5
+ return await subscribe({
6
+ query: gql `
7
+ subscription {
8
+ data(tag: "${tag}") {
9
+ tag
10
+ data
11
+ }
12
+ }
13
+ `
14
+ }, {
15
+ next: async ({ data }) => {
16
+ if (data) {
17
+ component.data = data.data.data;
18
+ }
19
+ }
20
+ });
21
+ }
22
+ dispose() { }
23
+ }
24
+ //# sourceMappingURL=data-subscription.js.map
package/dist/src/graphql/data-subscription.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-subscription.js","sourceRoot":"","sources":["../../../src/graphql/data-subscription.ts"],"names":[],"mappings":"AAEA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAE5C,MAAM,OAAO,4BAA4B;IACvC,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,SAAoB;QAC/C,OAAO,MAAM,SAAS,CACpB;YACE,KAAK,EAAE,GAAG,CAAA;;iCAEe,GAAG;;;;;iBAKnB;SACV,EACD;YACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAiB,EAAE,EAAE;gBACtC,IAAI,IAAI,EAAE;oBACR,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAA;iBAChC;YACH,CAAC;SACF,CACF,CAAA;IACH,CAAC;IAED,OAAO,KAAI,CAAC;CACb","sourcesContent":["import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'\n\nimport gql from 'graphql-tag'\nimport { subscribe } from '@operato/graphql'\n\nexport class DataSubscriptionProviderImpl implements DataSubscriptionProvider {\n async subscribe(tag: string, component: Component) {\n return await subscribe(\n {\n query: gql`\n subscription {\n data(tag: \"${tag}\") {\n tag\n data\n }\n }\n `\n },\n {\n next: async ({ data }: { data: any }) => {\n if (data) {\n component.data = data.data.data\n }\n }\n }\n )\n }\n\n dispose() {}\n}\n"]}
package/dist/src/graphql/favorite-process.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function fetchFavoriteProcessList(listParam?: {}): Promise<any>;
package/dist/src/graphql/favorite-process.js ADDED
@@ -0,0 +1,23 @@
1
+ import { buildArgs, client } from '@operato/graphql';
2
+ import gql from 'graphql-tag';
3
+ export async function fetchFavoriteProcessList(listParam = {}) {
4
+ const response = await client.query({
5
+ query: gql `
6
+ {
7
+ favoriteProcesses(${buildArgs(listParam)}) {
8
+ items {
9
+ id
10
+ name
11
+ description
12
+ thumbnail
13
+ createdAt
14
+ updatedAt
15
+ }
16
+ total
17
+ }
18
+ }
19
+ `
20
+ });
21
+ return response.data;
22
+ }
23
+ //# sourceMappingURL=favorite-process.js.map
package/dist/src/graphql/favorite-process.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"favorite-process.js","sourceRoot":"","sources":["../../../src/graphql/favorite-process.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEpD,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAAC,SAAS,GAAG,EAAE;IAC3D,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;4BAEc,SAAS,CAAC,SAAS,CAAC;;;;;;;;;;;;KAY3C;KACF,CAAC,CAAA;IAEF,OAAO,QAAQ,CAAC,IAAI,CAAA;AACtB,CAAC","sourcesContent":["import { buildArgs, client } from '@operato/graphql'\n\nimport gql from 'graphql-tag'\n\nexport async function fetchFavoriteProcessList(listParam = {}) {\n const response = await client.query({\n query: gql`\n {\n favoriteProcesses(${buildArgs(listParam)}) {\n items {\n id\n name\n description\n thumbnail\n createdAt\n updatedAt\n }\n total\n }\n }\n `\n })\n\n return response.data\n}\n"]}
package/dist/src/graphql/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './process';
2
+ export * from './process-group';
3
+ export * from './favorite-process';
package/dist/src/graphql/index.js ADDED
@@ -0,0 +1,4 @@
1
+ export * from './process';
2
+ export * from './process-group';
3
+ export * from './favorite-process';
4
+ //# sourceMappingURL=index.js.map
package/dist/src/graphql/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/graphql/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './process'\nexport * from './process-group'\nexport * from './favorite-process'\n"]}
package/dist/src/graphql/process-group.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { ProcessGroup } from '../types';
2
+ export declare function fetchProcessGroup(id: string): Promise<any>;
3
+ export declare function updateProcessGroup(group: ProcessGroup): Promise<any>;
4
+ export declare function deleteProcessGroup(id: string): Promise<any>;
5
+ export declare function fetchProcessGroupList(): Promise<any>;
6
+ export declare function createProcessGroup(group: ProcessGroup): Promise<any>;
7
+ export declare function joinProcessGroup(processId: string, groupId: string): Promise<any>;
package/dist/src/graphql/process-group.js ADDED
@@ -0,0 +1,125 @@
1
+ import { client } from '@operato/graphql';
2
+ import gql from 'graphql-tag';
3
+ export async function fetchProcessGroup(id) {
4
+ const response = await client.query({
5
+ query: gql `
6
+ query FetchProcessGroupById($id: String!) {
7
+ group(id: $id) {
8
+ id
9
+ name
10
+ description
11
+ createdAt
12
+ creator {
13
+ id
14
+ name
15
+ }
16
+ updatedAt
17
+ updater {
18
+ id
19
+ name
20
+ }
21
+ }
22
+ }
23
+ `,
24
+ variables: { id }
25
+ });
26
+ return response.data;
27
+ }
28
+ export async function updateProcessGroup(group) {
29
+ var { id, name, description } = group;
30
+ const response = await client.mutate({
31
+ mutation: gql `
32
+ mutation UpdateProcessGroup($id: String!, $patch: ProcessGroupPatch!) {
33
+ updateProcessGroup(id: $id, patch: $patch) {
34
+ id
35
+ name
36
+ description
37
+ createdAt
38
+ updatedAt
39
+ }
40
+ }
41
+ `,
42
+ variables: {
43
+ id,
44
+ patch: { name, description }
45
+ }
46
+ });
47
+ return response.data;
48
+ }
49
+ export async function deleteProcessGroup(id) {
50
+ const response = await client.mutate({
51
+ mutation: gql `
52
+ mutation ($id: String!) {
53
+ deleteProcessGroup(id: $id)
54
+ }
55
+ `,
56
+ variables: {
57
+ id
58
+ }
59
+ });
60
+ return response.data;
61
+ }
62
+ export async function fetchProcessGroupList() {
63
+ const response = await client.query({
64
+ query: gql `
65
+ {
66
+ processGroups {
67
+ items {
68
+ id
69
+ name
70
+ description
71
+ createdAt
72
+ updatedAt
73
+ }
74
+ total
75
+ }
76
+ }
77
+ `
78
+ });
79
+ return response.data;
80
+ }
81
+ export async function createProcessGroup(group) {
82
+ const response = await client.mutate({
83
+ mutation: gql `
84
+ mutation CreateProcessGroup($group: NewProcessGroup!) {
85
+ createProcessGroup(group: $group) {
86
+ id
87
+ name
88
+ description
89
+ createdAt
90
+ updatedAt
91
+ }
92
+ }
93
+ `,
94
+ variables: { group }
95
+ });
96
+ return response.data;
97
+ }
98
+ export async function joinProcessGroup(processId, groupId) {
99
+ const response = await client.mutate({
100
+ mutation: gql `
101
+ mutation JoinProcessGroup($id: String!, $processIds: [String!]!) {
102
+ joinProcessGroup(id: $id, processIds: $processIds) {
103
+ id
104
+ name
105
+ description
106
+ processes {
107
+ id
108
+ name
109
+ description
110
+ createdAt
111
+ updatedAt
112
+ }
113
+ createdAt
114
+ updatedAt
115
+ }
116
+ }
117
+ `,
118
+ variables: {
119
+ id: groupId,
120
+ processIds: [processId]
121
+ }
122
+ });
123
+ return response.data;
124
+ }
125
+ //# sourceMappingURL=process-group.js.map