@operato/board 8.0.0-beta.0 → 8.0.0-beta.10

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 (92) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/package.json +14 -14
  4. package/.storybook/main.js +0 -3
  5. package/.storybook/server.mjs +0 -8
  6. package/db.sqlite +0 -0
  7. package/demo/index-modeller.html +0 -112
  8. package/demo/index-player.html +0 -112
  9. package/demo/index-viewer.html +0 -112
  10. package/demo/index.html +0 -112
  11. package/logs/.08636eb59927f12972f6774f5947c8507b3564c2-audit.json +0 -15
  12. package/logs/.5e5d741d8b7784a2fbad65eedc0fd46946aaf6f2-audit.json +0 -15
  13. package/logs/application-2023-03-12-02.log +0 -14
  14. package/logs/connections-2023-03-12-02.log +0 -70
  15. package/src/component/3d.ts +0 -29
  16. package/src/component/chart-and-gauge.ts +0 -28
  17. package/src/component/container.ts +0 -63
  18. package/src/component/data-source.ts +0 -30
  19. package/src/component/etc.ts +0 -88
  20. package/src/component/form.ts +0 -42
  21. package/src/component/index.ts +0 -12
  22. package/src/component/iot.ts +0 -52
  23. package/src/component/line.ts +0 -156
  24. package/src/component/register-default-groups.ts +0 -28
  25. package/src/component/shape.ts +0 -156
  26. package/src/component/table.ts +0 -28
  27. package/src/component/text-and-media.ts +0 -125
  28. package/src/component/warehouse.ts +0 -26
  29. package/src/data-storage/data-storage.ts +0 -76
  30. package/src/graphql/board.ts +0 -144
  31. package/src/graphql/data-subscription.ts +0 -30
  32. package/src/graphql/favorite-board.ts +0 -25
  33. package/src/graphql/group.ts +0 -138
  34. package/src/graphql/index.ts +0 -4
  35. package/src/graphql/play-group.ts +0 -225
  36. package/src/graphql/scenario.ts +0 -79
  37. package/src/index.ts +0 -10
  38. package/src/modeller/component-toolbar/component-detail.ts +0 -52
  39. package/src/modeller/component-toolbar/component-menu.ts +0 -196
  40. package/src/modeller/component-toolbar/component-toolbar.ts +0 -196
  41. package/src/modeller/component-toolbar/mode-icons.ts +0 -88
  42. package/src/modeller/edit-toolbar-style.ts +0 -232
  43. package/src/modeller/edit-toolbar.ts +0 -587
  44. package/src/modeller/property-sidebar/abstract-property.ts +0 -69
  45. package/src/modeller/property-sidebar/data-binding/data-binding-mapper.ts +0 -475
  46. package/src/modeller/property-sidebar/data-binding/data-binding-value-map.ts +0 -19
  47. package/src/modeller/property-sidebar/data-binding/data-binding-value-range.ts +0 -19
  48. package/src/modeller/property-sidebar/data-binding/data-binding.ts +0 -480
  49. package/src/modeller/property-sidebar/effects/effects-shared-style.ts +0 -62
  50. package/src/modeller/property-sidebar/effects/effects.ts +0 -69
  51. package/src/modeller/property-sidebar/effects/property-animation.ts +0 -146
  52. package/src/modeller/property-sidebar/effects/property-animations.ts +0 -93
  53. package/src/modeller/property-sidebar/effects/property-event-hover.ts +0 -200
  54. package/src/modeller/property-sidebar/effects/property-event-tap.ts +0 -251
  55. package/src/modeller/property-sidebar/effects/property-event.ts +0 -73
  56. package/src/modeller/property-sidebar/effects/property-shadow.ts +0 -114
  57. package/src/modeller/property-sidebar/effects/value-converter.ts +0 -23
  58. package/src/modeller/property-sidebar/inspector/inspector.ts +0 -404
  59. package/src/modeller/property-sidebar/property-shared-style.ts +0 -136
  60. package/src/modeller/property-sidebar/property-sidebar.ts +0 -326
  61. package/src/modeller/property-sidebar/shapes/box-padding-editor-styles.ts +0 -94
  62. package/src/modeller/property-sidebar/shapes/shapes.ts +0 -432
  63. package/src/modeller/property-sidebar/specifics/specific-properties-builder.ts +0 -152
  64. package/src/modeller/property-sidebar/specifics/specifics.ts +0 -81
  65. package/src/modeller/property-sidebar/styles/styles.ts +0 -577
  66. package/src/modeller/scene-viewer/confidential-overlay.ts +0 -18
  67. package/src/modeller/scene-viewer/ox-scene-handler.ts +0 -40
  68. package/src/modeller/scene-viewer/ox-scene-layer.ts +0 -42
  69. package/src/modeller/scene-viewer/ox-scene-property.ts +0 -10
  70. package/src/modeller/scene-viewer/ox-scene-viewer.ts +0 -263
  71. package/src/ox-board-component-info.ts +0 -236
  72. package/src/ox-board-list.ts +0 -401
  73. package/src/ox-board-modeller.ts +0 -408
  74. package/src/ox-board-player-style.ts +0 -200
  75. package/src/ox-board-player.ts +0 -333
  76. package/src/ox-board-template-list.ts +0 -267
  77. package/src/ox-board-template-viewer.ts +0 -198
  78. package/src/ox-board-viewer.ts +0 -727
  79. package/src/ox-editor-board-selector.ts +0 -91
  80. package/src/ox-property-editor-board-selector.ts +0 -23
  81. package/src/player/ox-board-player-carousel.ts +0 -197
  82. package/src/player/ox-board-player-grid.ts +0 -78
  83. package/src/player/ox-board-wrapper.ts +0 -152
  84. package/src/selector/board-creation-popup.ts +0 -151
  85. package/src/selector/board-thumbnail-card.ts +0 -175
  86. package/src/selector/ox-board-creation-card.ts +0 -98
  87. package/src/selector/ox-board-selector.ts +0 -382
  88. package/src/types.ts +0 -63
  89. package/stories/property-data-binding.stories.ts +0 -34
  90. package/tsconfig.json +0 -24
  91. package/web-dev-server.config.mjs +0 -30
  92. package/web-test-runner.config.mjs +0 -29
@@ -1,28 +0,0 @@
1
- import { ComponentGroup } from '../types'
2
-
3
- const icon = `
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
5
- <style type="text/css">
6
- .st5{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
7
- .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}
8
- .st10{fill:none;stroke:{{strokeColor}};stroke-width:0.5;stroke-miterlimit:10;}
9
- </style>
10
- <g>
11
- <rect x="2.4" y="6" class="st9" width="25.2" height="18"/>
12
- <rect x="11" y="12.5" transform="matrix(-1.742238e-05 1 -1 -1.742238e-05 35.0187 -4.9804)" class="st10" width="17.9" height="5.1"/>
13
- <rect x="5.9" y="12.5" transform="matrix(-1.742238e-05 1 -1 -1.742238e-05 29.8973 0.1408)" class="st10" width="17.9" height="5.1"/>
14
- <line class="st5" x1="2" y1="7.5" x2="28" y2="7.5"/>
15
- <line class="st10" x1="2" y1="11.6" x2="28" y2="11.6"/>
16
- <line class="st10" x1="2" y1="14.8" x2="28" y2="14.8"/>
17
- <line class="st10" x1="2" y1="18.1" x2="28" y2="18.1"/>
18
- <line class="st10" x1="2" y1="21.3" x2="28" y2="21.3"/>
19
- </g>
20
- </svg>
21
- `
22
-
23
- export const table: ComponentGroup = {
24
- name: 'table',
25
- description: 'a group of various tables',
26
- icon,
27
- templates: []
28
- }
@@ -1,125 +0,0 @@
1
- import { ComponentGroup } from '../types'
2
-
3
- const audio = new URL('../../../icons/components/audio.png', import.meta.url).href
4
- const colorImage = new URL('../../../icons/components/color-image.png', import.meta.url).href
5
- const gifImage = new URL('../../../icons/components/gif-image.png', import.meta.url).href
6
- const grayImage = new URL('../../../icons/components/gray-image.png', import.meta.url).href
7
- const text = new URL('../../../icons/components/text.png', import.meta.url).href
8
-
9
- const icon = `
10
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
11
- <style type="text/css">
12
- .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
13
- .st1{fill:{{strokeColor}};}
14
- </style>
15
- <g>
16
- <polyline class="st0" points="20.6,12.8 20.6,5.1 1.6,5.1 1.6,18 15,18"/>
17
- <path class="st1" d="M5.7,7.9c-0.9,0-1.6,0.7-1.6,1.6s0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6S6.6,7.9,5.7,7.9z"/>
18
- <polygon class="st1" points="12.8,8.6 8.5,14.7 5.9,12.7 3.2,16.1 15.1,16.1 15.2,13.7"/>
19
- <path class="st1" d="M24.1,15.1h2.1l0.6,2.8h1.7l-0.1-3.8H16.5l-0.1,3.8h1.7l0.4-2.8h2.1c0.1,2,0.1,3.1,0.1,5.2V21
20
- c0,1.6,0,1.9,0,2.7l-1.8,0.2V25h6.9v-1.1L24,23.7c0-0.9,0-1.1,0-2.7v-0.7C24,18.1,24,17,24.1,15.1z"/>
21
- </g>
22
- </svg>
23
- `
24
-
25
- export const textAndMedia: ComponentGroup = {
26
- name: 'textAndMedia',
27
- description: 'a group of text and various media components',
28
- icon,
29
- templates: [
30
- {
31
- type: 'text',
32
- description: 'text',
33
- icon: text,
34
- group: 'textAndMedia',
35
- model: {
36
- type: 'text',
37
- left: 100,
38
- top: 100,
39
- width: 200,
40
- height: 50,
41
- text: 'Text',
42
- fillStyle: '#fff',
43
- strokeStyle: '#000',
44
- alpha: 1,
45
- hidden: false,
46
- lineWidth: 5,
47
- lineDash: 'solid',
48
- lineCap: 'butt',
49
- textAlign: 'left',
50
- textBaseline: 'top',
51
- textWrap: false,
52
- fontFamily: 'serif',
53
- fontSize: 30
54
- }
55
- },
56
- {
57
- type: 'color image',
58
- description: 'color image',
59
- icon: colorImage,
60
- group: 'textAndMedia',
61
- model: {
62
- type: 'image-view',
63
- left: 100,
64
- top: 100,
65
- width: 100,
66
- height: 100,
67
- isGray: false,
68
- fillStyle: '#fff',
69
- strokeStyle: '#000',
70
- alpha: 1,
71
- hidden: false,
72
- lineWidth: 1,
73
- lineDash: 'solid',
74
- lineCap: 'butt'
75
- }
76
- },
77
- {
78
- type: 'gray image',
79
- description: 'gray image',
80
- icon: grayImage,
81
- group: 'textAndMedia',
82
- model: {
83
- type: 'image-view',
84
- left: 100,
85
- top: 100,
86
- width: 100,
87
- height: 100,
88
- isGray: true,
89
- fillStyle: '#fff',
90
- strokeStyle: '#000',
91
- alpha: 1,
92
- hidden: false,
93
- lineWidth: 1,
94
- lineDash: 'solid',
95
- lineCap: 'butt'
96
- }
97
- },
98
- {
99
- type: 'gif image',
100
- description: 'gif image',
101
- icon: gifImage,
102
- group: 'textAndMedia',
103
- model: {
104
- type: 'gif-view',
105
- left: 100,
106
- top: 100,
107
- width: 100,
108
- height: 100
109
- }
110
- },
111
- {
112
- type: 'audio',
113
- description: 'audio',
114
- icon: audio,
115
- group: 'textAndMedia',
116
- model: {
117
- type: 'audio',
118
- left: 100,
119
- top: 100,
120
- width: 100,
121
- height: 100
122
- }
123
- }
124
- ]
125
- }
@@ -1,26 +0,0 @@
1
- import { ComponentGroup } from '../types'
2
-
3
- const icon = `
4
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{fill:{{strokeColor}};}
7
- .st14{fill:none;stroke:{{strokeColor}};stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10;}
8
- .st15{fill:none;stroke:{{strokeColor}};stroke-linecap:round;stroke-miterlimit:10;}
9
- </style>
10
- <g>
11
- <polyline class="st14" points="1.5,11.2 15,5.2 28.5,11 "/>
12
- <line class="st15" x1="3.2" y1="11.6" x2="3.2" y2="23.8"/>
13
- <line class="st15" x1="26.9" y1="11.6" x2="26.9" y2="23.8"/>
14
- <line class="st5" x1="1.7" y1="24.8" x2="28.3" y2="24.8"/>
15
- <rect x="21.1" y="18.3" class="st0" width="3.4" height="5.5"/>
16
- <path class="st0" d="M5.9,13.6v10.2h13.8V13.6H5.9z M18.7,17.3H6.8v-2.4h11.9V17.3z"/>
17
- </g>
18
- </svg>
19
- `
20
-
21
- export const warehouse: ComponentGroup = {
22
- name: 'warehouse',
23
- description: 'a group of various components used in a warehouse depiction',
24
- icon,
25
- templates: []
26
- }
@@ -1,76 +0,0 @@
1
- import Dexie from 'dexie'
2
-
3
- import { Component, PersistentDataStorage } from '@hatiolab/things-scene'
4
-
5
- class BoardDatabase extends Dexie {
6
- board_data!: Dexie.Table<IBoardData, number> // number = type of the primkey
7
- playlist_data!: Dexie.Table<IPlayListData, number> // number = type of the primkey
8
- //...other tables goes here...
9
-
10
- constructor() {
11
- super('operato-board-database')
12
- this.version(2).stores({
13
- board_data: '[board+refid]',
14
- playlist_data: '[playlist+dummy]'
15
- //...other tables goes here...
16
- })
17
- }
18
- }
19
-
20
- interface IBoardData {
21
- id?: number
22
- board: string
23
- refid: string | number
24
- data: any
25
- timestamp: number
26
- }
27
-
28
- interface IPlayListData {
29
- id?: number
30
- playlist: string
31
- dummy: string | number // only for escaping schema error
32
- setting: {
33
- playtime: number
34
- columns: number
35
- rows: number
36
- }
37
- timestamp: number
38
- }
39
-
40
- const db = new BoardDatabase()
41
-
42
- export class BoardDataStorage implements PersistentDataStorage {
43
- private id: string
44
-
45
- constructor(id: string) {
46
- this.id = id
47
- }
48
-
49
- public async load(key: Component): Promise<any> {
50
- const saved = await db.board_data.where({ board: this.id, refid: key.state.refid }).first()
51
- return saved?.data
52
- }
53
-
54
- public async save(key: Component, value: any): Promise<void> {
55
- await db.board_data.put({ board: this.id, refid: key.state.refid, data: value, timestamp: Date.now() })
56
- }
57
-
58
- public async clear(key: Component): Promise<void> {
59
- await db.board_data.where({ board: this.id, refid: key.state.refid }).delete()
60
- }
61
- }
62
-
63
- export class PlaylistStorage implements PersistentDataStorage {
64
- public async load(key: any): Promise<any> {
65
- const saved = await db.playlist_data.where({ playlist: key }).first()
66
- return saved?.setting
67
- }
68
-
69
- public async save(key: any, value: any): Promise<void> {
70
- await db.playlist_data.put({ playlist: key, dummy: 1, setting: value, timestamp: Date.now() })
71
- }
72
-
73
- public async clear(key: any): Promise<void> {
74
- await db.playlist_data.where({ playlist: key }).delete()
75
- }
76
- }
@@ -1,144 +0,0 @@
1
- import { buildArgs, client } from '@operato/graphql'
2
-
3
- import { Board } from '../types'
4
- import gql from 'graphql-tag'
5
-
6
- export async function fetchBoardList(listParam = {}) {
7
- const response = await client.query({
8
- query: gql`
9
- {
10
- boards(${buildArgs(listParam)}) {
11
- items {
12
- id
13
- name
14
- description
15
- thumbnail
16
- createdAt
17
- updatedAt
18
- }
19
- total
20
- }
21
- }
22
- `
23
- })
24
-
25
- return response.data
26
- }
27
-
28
- export async function fetchBoard(id: string) {
29
- const response = await client.query({
30
- query: gql`
31
- query FetchBoardById($id: String!) {
32
- board(id: $id) {
33
- id
34
- name
35
- description
36
- group {
37
- id
38
- name
39
- }
40
- thumbnail
41
- model
42
- createdAt
43
- creator {
44
- id
45
- name
46
- }
47
- updatedAt
48
- updater {
49
- id
50
- name
51
- }
52
- }
53
- }
54
- `,
55
- variables: { id }
56
- })
57
-
58
- return response.data
59
- }
60
-
61
- export async function createBoard(board: Board) {
62
- /*
63
- input NewBoard {
64
- name : String!
65
- description : String
66
- model : String!
67
- groupId : String!
68
- }
69
- */
70
-
71
- board.model = JSON.stringify(board.model)
72
-
73
- const response = await client.mutate({
74
- mutation: gql`
75
- mutation CreateBoard($board: NewBoard!) {
76
- createBoard(board: $board) {
77
- id
78
- name
79
- description
80
- model
81
- createdAt
82
- updatedAt
83
- }
84
- }
85
- `,
86
- variables: {
87
- board
88
- }
89
- })
90
-
91
- return response.data
92
- }
93
-
94
- export async function updateBoard(board: Board) {
95
- /*
96
- input BoardPatch {
97
- name : String
98
- description : String
99
- model : String
100
- }
101
- */
102
- var { id, name, description, model, groupId } = board
103
- model = JSON.stringify(model)
104
-
105
- const response = await client.mutate({
106
- mutation: gql`
107
- mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
108
- updateBoard(id: $id, patch: $patch) {
109
- id
110
- name
111
- description
112
- model
113
- group {
114
- id
115
- name
116
- }
117
- createdAt
118
- updatedAt
119
- }
120
- }
121
- `,
122
- variables: {
123
- id,
124
- patch: { name, description, model, groupId }
125
- }
126
- })
127
-
128
- return response.data
129
- }
130
-
131
- export async function deleteBoard(id: string) {
132
- const response = await client.mutate({
133
- mutation: gql`
134
- mutation ($id: String!) {
135
- deleteBoard(id: $id)
136
- }
137
- `,
138
- variables: {
139
- id
140
- }
141
- })
142
-
143
- return response.data
144
- }
@@ -1,30 +0,0 @@
1
- import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'
2
-
3
- import gql from 'graphql-tag'
4
- import { subscribe } from '@operato/graphql'
5
-
6
- export class DataSubscriptionProviderImpl implements DataSubscriptionProvider {
7
- async subscribe(tag: string, component: Component) {
8
- return await subscribe(
9
- {
10
- query: gql`
11
- subscription {
12
- data(tag: "${tag}") {
13
- tag
14
- data
15
- }
16
- }
17
- `
18
- },
19
- {
20
- next: async ({ data }: { data: any }) => {
21
- if (data) {
22
- component.data = data.data.data
23
- }
24
- }
25
- }
26
- )
27
- }
28
-
29
- dispose() {}
30
- }
@@ -1,25 +0,0 @@
1
- import { buildArgs, client } from '@operato/graphql'
2
-
3
- import gql from 'graphql-tag'
4
-
5
- export async function fetchFavoriteBoardList(listParam = {}) {
6
- const response = await client.query({
7
- query: gql`
8
- {
9
- favoriteBoards(${buildArgs(listParam)}) {
10
- items {
11
- id
12
- name
13
- description
14
- thumbnail
15
- createdAt
16
- updatedAt
17
- }
18
- total
19
- }
20
- }
21
- `
22
- })
23
-
24
- return response.data
25
- }
@@ -1,138 +0,0 @@
1
- import { BoardGroup } from '../types'
2
- import { client } from '@operato/graphql'
3
- import gql from 'graphql-tag'
4
-
5
- export async function fetchGroup(id: string) {
6
- const response = await client.query({
7
- query: gql`
8
- query FetchGroupById($id: String!) {
9
- group(id: $id) {
10
- id
11
- name
12
- description
13
- createdAt
14
- creator {
15
- id
16
- name
17
- }
18
- updatedAt
19
- updater {
20
- id
21
- name
22
- }
23
- }
24
- }
25
- `,
26
- variables: { id }
27
- })
28
-
29
- return response.data
30
- }
31
-
32
- export async function updateGroup(group: BoardGroup) {
33
- var { id, name, description } = group
34
-
35
- const response = await client.mutate({
36
- mutation: gql`
37
- mutation UpdateGroup($id: String!, $patch: GroupPatch!) {
38
- updateGroup(id: $id, patch: $patch) {
39
- id
40
- name
41
- description
42
- createdAt
43
- updatedAt
44
- }
45
- }
46
- `,
47
- variables: {
48
- id,
49
- patch: { name, description }
50
- }
51
- })
52
-
53
- return response.data
54
- }
55
-
56
- export async function deleteGroup(id: string) {
57
- const response = await client.mutate({
58
- mutation: gql`
59
- mutation ($id: String!) {
60
- deleteGroup(id: $id)
61
- }
62
- `,
63
- variables: {
64
- id
65
- }
66
- })
67
-
68
- return response.data
69
- }
70
-
71
- export async function fetchGroupList() {
72
- const response = await client.query({
73
- query: gql`
74
- {
75
- groups {
76
- items {
77
- id
78
- name
79
- description
80
- createdAt
81
- updatedAt
82
- }
83
- total
84
- }
85
- }
86
- `
87
- })
88
-
89
- return response.data
90
- }
91
-
92
- export async function createGroup(group: BoardGroup) {
93
- const response = await client.mutate({
94
- mutation: gql`
95
- mutation CreateGroup($group: NewGroup!) {
96
- createGroup(group: $group) {
97
- id
98
- name
99
- description
100
- createdAt
101
- updatedAt
102
- }
103
- }
104
- `,
105
- variables: { group }
106
- })
107
-
108
- return response.data
109
- }
110
-
111
- export async function joinGroup(boardId: string, groupId: string) {
112
- const response = await client.mutate({
113
- mutation: gql`
114
- mutation JoinGroup($id: String!, $boardIds: [String!]!) {
115
- joinGroup(id: $id, boardIds: $boardIds) {
116
- id
117
- name
118
- description
119
- boards {
120
- id
121
- name
122
- description
123
- createdAt
124
- updatedAt
125
- }
126
- createdAt
127
- updatedAt
128
- }
129
- }
130
- `,
131
- variables: {
132
- id: groupId,
133
- boardIds: [boardId]
134
- }
135
- })
136
-
137
- return response.data
138
- }
@@ -1,4 +0,0 @@
1
- export * from './board'
2
- export * from './group'
3
- export * from './play-group'
4
- export * from './favorite-board'