@record-evolution/widget-overlay 1.0.1 → 1.0.2
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.
- package/dist/linear-progress.js +2 -1
- package/dist/linear-progress.js.map +1 -1
- package/dist/src/widget-overlay.d.ts +5 -6
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-overlay.js +36 -28
- package/dist/widget-overlay.js.map +1 -1
- package/package.json +2 -1
- package/src/alternative_images.json +10 -0
- package/src/default-data.json +91 -49
- package/src/definition-schema.d.ts +12 -15
- package/src/definition-schema.json +187 -155
- package/src/linear-progress.ts +2 -1
- package/src/widget-overlay.ts +42 -35
|
@@ -5,21 +5,28 @@ export interface InputData {
|
|
|
5
5
|
overlays?: Overlay[]
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
export type Overlay = ProgressOverlay | TextOverlay
|
|
8
|
+
export type Overlay = ProgressOverlay | TextOverlay
|
|
9
9
|
|
|
10
10
|
interface BaseOverlay {
|
|
11
11
|
layerName: string
|
|
12
|
-
layerType: 'progress' | 'text'
|
|
13
|
-
|
|
12
|
+
layerType: 'progress' | 'text'
|
|
13
|
+
textPins?: TextItem[]
|
|
14
|
+
progressPins?: ProgressItem[]
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
interface
|
|
17
|
-
|
|
17
|
+
interface TextItem {
|
|
18
|
+
prefix: string
|
|
19
|
+
suffix: string
|
|
18
20
|
relXPos: number // 0 = left, 0.5 = center, 1 = right
|
|
19
21
|
relYPos: number // 0 = top, 0.5 = center, 1 = bottom
|
|
20
22
|
data: string
|
|
21
23
|
}
|
|
22
24
|
|
|
25
|
+
interface ProgressItem {
|
|
26
|
+
relXPos: number // 0 = left, 0.5 = center, 1 = right
|
|
27
|
+
relYPos: number // 0 = top, 0.5 = center, 1 = bottom
|
|
28
|
+
data: string
|
|
29
|
+
}
|
|
23
30
|
export interface ProgressOverlay extends BaseOverlay {
|
|
24
31
|
layerType: 'progress'
|
|
25
32
|
progressStyle?: {
|
|
@@ -48,16 +55,6 @@ export interface TextOverlay extends BaseOverlay {
|
|
|
48
55
|
}
|
|
49
56
|
}
|
|
50
57
|
|
|
51
|
-
export interface SwitchOverlay extends BaseOverlay {
|
|
52
|
-
layerType: 'switch'
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export interface HtmlOverlay extends BaseOverlay {
|
|
56
|
-
layerType: 'html'
|
|
57
|
-
componentImplementation?: string // JS import code
|
|
58
|
-
componentUsage?: string // HTML snippet
|
|
59
|
-
}
|
|
60
|
-
|
|
61
58
|
export type Modifier = {
|
|
62
59
|
scaler: number
|
|
63
60
|
xOffset: number
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"image": {
|
|
16
16
|
"title": "Upload image file",
|
|
17
17
|
"description": "Upload an image to overlay data driven information on.",
|
|
18
|
+
"dataDrivenDisabled": true,
|
|
18
19
|
"type": "image",
|
|
19
20
|
"order": 3
|
|
20
21
|
},
|
|
@@ -22,175 +23,206 @@
|
|
|
22
23
|
"title": "Overlays",
|
|
23
24
|
"type": "array",
|
|
24
25
|
"dataDrivenDisabled": true,
|
|
25
|
-
"order":
|
|
26
|
+
"order": 4,
|
|
26
27
|
"items": {
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"title": "Layer Type",
|
|
34
|
-
"description": "The type of the overlay items.",
|
|
35
|
-
"type": "string",
|
|
36
|
-
"enum": ["progress", "text", "switch", "html"],
|
|
37
|
-
"dataDrivenDisabled": true,
|
|
38
|
-
"order": 2
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
"componentImplementation": {
|
|
42
|
-
"title": "Component Code",
|
|
43
|
-
"description": "The JavaScript code to implement the component. e.g. import 'https://jsdelivr.com/npm/my-component'",
|
|
44
|
-
"type": "code",
|
|
45
|
-
"condition": {
|
|
46
|
-
"relativePath": "layerType",
|
|
47
|
-
"showIfValueIn": ["html"]
|
|
48
|
-
},
|
|
49
|
-
"dataDrivenDisabled": true,
|
|
50
|
-
"order": 6
|
|
51
|
-
},
|
|
52
|
-
"componentUsage": {
|
|
53
|
-
"title": "Component Usage",
|
|
54
|
-
"description": "The html code to insert at the determined position. e.g. <my-component .value={data}></my-component>",
|
|
55
|
-
"type": "code",
|
|
56
|
-
"condition": {
|
|
57
|
-
"relativePath": "layerType",
|
|
58
|
-
"showIfValueIn": ["html"]
|
|
28
|
+
"type": "object",
|
|
29
|
+
"properties": {
|
|
30
|
+
"layerName": {
|
|
31
|
+
"title": "Layer Name",
|
|
32
|
+
"type": "string",
|
|
33
|
+
"order": 1
|
|
59
34
|
},
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"condition": {
|
|
68
|
-
"relativePath": "layerType",
|
|
69
|
-
"showIfValueIn": ["progress", "text"]
|
|
35
|
+
"layerType": {
|
|
36
|
+
"title": "Layer Type",
|
|
37
|
+
"description": "The type of the overlay items.",
|
|
38
|
+
"type": "string",
|
|
39
|
+
"enum": ["progress", "text"],
|
|
40
|
+
"dataDrivenDisabled": true,
|
|
41
|
+
"order": 2
|
|
70
42
|
},
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
"
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"order": 4,
|
|
79
|
-
"items": {
|
|
80
|
-
"type": "number",
|
|
81
|
-
"dataDrivenDisabled": true
|
|
82
|
-
}
|
|
43
|
+
"sections": {
|
|
44
|
+
"title": "Color Sections",
|
|
45
|
+
"description": "You can specify ranges and intermediate colors.",
|
|
46
|
+
"type": "object",
|
|
47
|
+
"condition": {
|
|
48
|
+
"relativePath": "../layerType",
|
|
49
|
+
"showIfValueIn": ["progress", "text"]
|
|
83
50
|
},
|
|
84
|
-
"
|
|
85
|
-
|
|
86
|
-
"
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
"
|
|
91
|
-
"
|
|
51
|
+
"order": 5,
|
|
52
|
+
"properties": {
|
|
53
|
+
"sectionLimits": {
|
|
54
|
+
"title": "Section Limits",
|
|
55
|
+
"description": "The limits of the sections. Starting from the min value, ending with the max value.",
|
|
56
|
+
"type": "array",
|
|
57
|
+
"dataDrivenDisabled": true,
|
|
58
|
+
"order": 4,
|
|
59
|
+
"items": {
|
|
60
|
+
"type": "number",
|
|
61
|
+
"dataDrivenDisabled": true
|
|
62
|
+
}
|
|
92
63
|
},
|
|
93
|
-
"
|
|
64
|
+
"colors": {
|
|
65
|
+
"title": "Section colors",
|
|
66
|
+
"description": "Progress color for each section. This Array is one shorter than the number of sections.",
|
|
67
|
+
"type": "array",
|
|
68
|
+
"dataDrivenDisabled": true,
|
|
69
|
+
"items": {
|
|
70
|
+
"type": "color",
|
|
71
|
+
"dataDrivenDisabled": true
|
|
72
|
+
},
|
|
73
|
+
"order": 5
|
|
74
|
+
}
|
|
94
75
|
}
|
|
95
|
-
}
|
|
96
|
-
},
|
|
97
|
-
"progressStyle": {
|
|
98
|
-
"title": "Style",
|
|
99
|
-
"type": "object",
|
|
100
|
-
"order": 3,
|
|
101
|
-
"condition": {
|
|
102
|
-
"relativePath": "layerType",
|
|
103
|
-
"showIfValueIn": ["progress"]
|
|
104
76
|
},
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
"
|
|
111
|
-
|
|
112
|
-
"width": {
|
|
113
|
-
"title": "Width",
|
|
114
|
-
"description": "Width of the progress bar in pixels.",
|
|
115
|
-
"type": "number",
|
|
116
|
-
"order": 1
|
|
117
|
-
},
|
|
118
|
-
"height": {
|
|
119
|
-
"title": "Height",
|
|
120
|
-
"description": "Height of the progress bar in pixels.",
|
|
121
|
-
"type": "number",
|
|
122
|
-
"order": 2
|
|
77
|
+
"progressStyle": {
|
|
78
|
+
"title": "Style",
|
|
79
|
+
"type": "object",
|
|
80
|
+
"order": 3,
|
|
81
|
+
"condition": {
|
|
82
|
+
"relativePath": "../layerType",
|
|
83
|
+
"showIfValueIn": ["progress"]
|
|
123
84
|
},
|
|
124
|
-
"
|
|
125
|
-
"
|
|
126
|
-
|
|
127
|
-
|
|
85
|
+
"properties": {
|
|
86
|
+
"rotate": {
|
|
87
|
+
"title": "Rotate",
|
|
88
|
+
"description": "Rotation of the progress bar in degrees.",
|
|
89
|
+
"type": "number",
|
|
90
|
+
"order": 3
|
|
91
|
+
},
|
|
92
|
+
"width": {
|
|
93
|
+
"title": "Width",
|
|
94
|
+
"description": "Width of the progress bar in pixels.",
|
|
95
|
+
"type": "number",
|
|
96
|
+
"order": 1
|
|
97
|
+
},
|
|
98
|
+
"height": {
|
|
99
|
+
"title": "Height",
|
|
100
|
+
"description": "Height of the progress bar in pixels.",
|
|
101
|
+
"type": "number",
|
|
102
|
+
"order": 2
|
|
103
|
+
},
|
|
104
|
+
"backgroundColor": {
|
|
105
|
+
"title": "Background Color",
|
|
106
|
+
"type": "color",
|
|
107
|
+
"order": 5
|
|
108
|
+
}
|
|
128
109
|
}
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
"textStyle": {
|
|
132
|
-
"title": "Style",
|
|
133
|
-
"type": "object",
|
|
134
|
-
"order": 3,
|
|
135
|
-
"condition": {
|
|
136
|
-
"relativePath": "layerType",
|
|
137
|
-
"showIfValueIn": ["text"]
|
|
138
110
|
},
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
"
|
|
111
|
+
"textStyle": {
|
|
112
|
+
"title": "Style",
|
|
113
|
+
"type": "object",
|
|
114
|
+
"order": 3,
|
|
115
|
+
"condition": {
|
|
116
|
+
"relativePath": "../layerType",
|
|
117
|
+
"showIfValueIn": ["text"]
|
|
145
118
|
},
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
"
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
"
|
|
160
|
-
|
|
161
|
-
|
|
119
|
+
"properties": {
|
|
120
|
+
"fontWeight": {
|
|
121
|
+
"title": "Font Weight",
|
|
122
|
+
"description": "Font Weight is a number in the range of 100 to 900.",
|
|
123
|
+
"type": "number",
|
|
124
|
+
"order": 3
|
|
125
|
+
},
|
|
126
|
+
"fontSize": {
|
|
127
|
+
"title": "Font Size",
|
|
128
|
+
"description": "Font Size in pixels as it should appear on the original image size. It will be scaled together with the image.",
|
|
129
|
+
"type": "number",
|
|
130
|
+
"order": 2
|
|
131
|
+
},
|
|
132
|
+
"precision": {
|
|
133
|
+
"title": "Precision",
|
|
134
|
+
"description": "Number of decimal places to display.",
|
|
135
|
+
"type": "number",
|
|
136
|
+
"order": 4
|
|
137
|
+
},
|
|
138
|
+
"backgroundColor": {
|
|
139
|
+
"title": "Background Color",
|
|
140
|
+
"type": "color",
|
|
141
|
+
"order": 5
|
|
142
|
+
}
|
|
162
143
|
}
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
"title": {
|
|
172
|
-
"title": "Title",
|
|
173
|
-
"type": "string",
|
|
174
|
-
"order": 1
|
|
175
|
-
},
|
|
176
|
-
"relXPos": {
|
|
177
|
-
"title": "Relative X Position",
|
|
178
|
-
"description": "Position of the item relative to the width of the image. i.e. 0 means left edge, 0.5 means center and 1 means right edge.",
|
|
179
|
-
"type": "number",
|
|
180
|
-
"order": 3
|
|
144
|
+
},
|
|
145
|
+
"progressPins": {
|
|
146
|
+
"title": "Progress Pins",
|
|
147
|
+
"description": "A list of progress pins to overlay on the image at defined positions.",
|
|
148
|
+
"type": "array",
|
|
149
|
+
"condition": {
|
|
150
|
+
"relativePath": "../layerType",
|
|
151
|
+
"showIfValueIn": ["progress"]
|
|
181
152
|
},
|
|
182
|
-
"
|
|
183
|
-
|
|
184
|
-
"
|
|
185
|
-
"
|
|
186
|
-
|
|
153
|
+
"order": 2,
|
|
154
|
+
"items": {
|
|
155
|
+
"type": "object",
|
|
156
|
+
"properties": {
|
|
157
|
+
"label": {
|
|
158
|
+
"title": "Label",
|
|
159
|
+
"type": "string",
|
|
160
|
+
"order": 1
|
|
161
|
+
},
|
|
162
|
+
"relXPos": {
|
|
163
|
+
"title": "Relative X Position",
|
|
164
|
+
"description": "Position of the item relative to the width of the image. i.e. 0 means left edge, 0.5 means center and 1 means right edge.",
|
|
165
|
+
"type": "number",
|
|
166
|
+
"order": 3
|
|
167
|
+
},
|
|
168
|
+
"relYPos": {
|
|
169
|
+
"title": "Relative Y Position",
|
|
170
|
+
"description": "Position of the item relative to the height of the image. i.e. 0 means top edge, 0.5 means center and 1 means bottom edge.",
|
|
171
|
+
"type": "number",
|
|
172
|
+
"order": 4
|
|
173
|
+
},
|
|
174
|
+
"data": {
|
|
175
|
+
"title": "Data",
|
|
176
|
+
"description": "Value to display for the progress pin. Setup the scale in the sections settings.",
|
|
177
|
+
"type": "number",
|
|
178
|
+
"order": 111
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"textPins": {
|
|
184
|
+
"title": "Text Pins",
|
|
185
|
+
"description": "A list of text pins to overlay on the image at defined positions.",
|
|
186
|
+
"type": "array",
|
|
187
|
+
"condition": {
|
|
188
|
+
"relativePath": "../layerType",
|
|
189
|
+
"showIfValueIn": ["text"]
|
|
187
190
|
},
|
|
188
|
-
|
|
189
|
-
"
|
|
190
|
-
"
|
|
191
|
-
"
|
|
192
|
-
|
|
193
|
-
|
|
191
|
+
"order": 2,
|
|
192
|
+
"items": {
|
|
193
|
+
"type": "object",
|
|
194
|
+
"properties": {
|
|
195
|
+
"prefix": {
|
|
196
|
+
"title": "Prefix",
|
|
197
|
+
"description": "Text to display before the data value.",
|
|
198
|
+
"type": "string",
|
|
199
|
+
"order": 1
|
|
200
|
+
},
|
|
201
|
+
"suffix": {
|
|
202
|
+
"title": "Suffix",
|
|
203
|
+
"description": "Text to display after the data value.",
|
|
204
|
+
"type": "string",
|
|
205
|
+
"order": 2
|
|
206
|
+
},
|
|
207
|
+
"relXPos": {
|
|
208
|
+
"title": "Relative X Position",
|
|
209
|
+
"description": "Position of the item relative to the width of the image. i.e. 0 means left edge, 0.5 means center and 1 means right edge.",
|
|
210
|
+
"type": "number",
|
|
211
|
+
"order": 3
|
|
212
|
+
},
|
|
213
|
+
"relYPos": {
|
|
214
|
+
"title": "Relative Y Position",
|
|
215
|
+
"description": "Position of the item relative to the height of the image. i.e. 0 means top edge, 0.5 means center and 1 means bottom edge.",
|
|
216
|
+
"type": "number",
|
|
217
|
+
"order": 4
|
|
218
|
+
},
|
|
219
|
+
"data": {
|
|
220
|
+
"title": "Data",
|
|
221
|
+
"description": "Value to display for the text pin.",
|
|
222
|
+
"type": "string",
|
|
223
|
+
"order": 111
|
|
224
|
+
}
|
|
225
|
+
}
|
|
194
226
|
}
|
|
195
227
|
}
|
|
196
228
|
}
|
package/src/linear-progress.ts
CHANGED
|
@@ -15,7 +15,8 @@ export class LinearProgress extends LitElement {
|
|
|
15
15
|
background-color: var(--progress-background, #e0e0e0);
|
|
16
16
|
border-radius: var(--progress-radius, 4px);
|
|
17
17
|
overflow: hidden;
|
|
18
|
-
position:
|
|
18
|
+
position: absolute;
|
|
19
|
+
border: 0.5px solid var(--progress-border-color, #ccc);
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
.bar {
|
package/src/widget-overlay.ts
CHANGED
|
@@ -3,13 +3,12 @@ import { property, query, state } from 'lit/decorators.js'
|
|
|
3
3
|
import { styleMap } from 'lit/directives/style-map.js'
|
|
4
4
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
|
|
5
5
|
import {
|
|
6
|
-
HtmlOverlay,
|
|
7
6
|
InputData,
|
|
8
7
|
Modifier,
|
|
9
8
|
Overlay,
|
|
10
|
-
|
|
9
|
+
ProgressItem,
|
|
11
10
|
ProgressOverlay,
|
|
12
|
-
|
|
11
|
+
TextItem,
|
|
13
12
|
TextOverlay
|
|
14
13
|
} from './definition-schema.js'
|
|
15
14
|
import { repeat } from 'lit/directives/repeat.js'
|
|
@@ -41,13 +40,6 @@ export class WidgetImage extends LitElement {
|
|
|
41
40
|
@query('#base-layer')
|
|
42
41
|
private baseLayer!: any
|
|
43
42
|
|
|
44
|
-
private renderMap = {
|
|
45
|
-
progress: this.renderProgress.bind(this),
|
|
46
|
-
text: this.renderText.bind(this),
|
|
47
|
-
switch: this.renderSwitch.bind(this),
|
|
48
|
-
html: this.renderHtml.bind(this)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
43
|
version: string = 'versionplaceholder'
|
|
52
44
|
|
|
53
45
|
update(changedProperties: Map<string, any>) {
|
|
@@ -207,12 +199,12 @@ export class WidgetImage extends LitElement {
|
|
|
207
199
|
|
|
208
200
|
private getOverlayItemPosition(relX: number, relY: number, modifier: Modifier) {
|
|
209
201
|
return {
|
|
210
|
-
left:
|
|
211
|
-
top:
|
|
202
|
+
left: relX * modifier.visibleWidth,
|
|
203
|
+
top: relY * modifier.visibleHeight
|
|
212
204
|
}
|
|
213
205
|
}
|
|
214
206
|
|
|
215
|
-
renderText(_overlay: Overlay, item:
|
|
207
|
+
renderText(_overlay: Overlay, item: TextItem, modifier: Modifier) {
|
|
216
208
|
const overlay = _overlay as TextOverlay
|
|
217
209
|
const pos = this.getOverlayItemPosition(item.relXPos, item.relYPos, modifier)
|
|
218
210
|
if (!pos) return nothing
|
|
@@ -243,10 +235,12 @@ export class WidgetImage extends LitElement {
|
|
|
243
235
|
padding: `${6 * modifier.scaler}px ${12 * modifier.scaler}px`
|
|
244
236
|
}
|
|
245
237
|
|
|
246
|
-
return html`
|
|
238
|
+
return html`
|
|
239
|
+
<div class="overlay-item" style=${styleMap(styles)}>${item.prefix}${value}${item.suffix}</div>
|
|
240
|
+
`
|
|
247
241
|
}
|
|
248
242
|
|
|
249
|
-
renderProgress(_overlay: Overlay, item:
|
|
243
|
+
renderProgress(_overlay: Overlay, item: ProgressItem, modifier: Modifier) {
|
|
250
244
|
const overlay = _overlay as ProgressOverlay
|
|
251
245
|
const pos = this.getOverlayItemPosition(item.relXPos, item.relYPos, modifier)
|
|
252
246
|
if (!pos) return nothing
|
|
@@ -277,23 +271,44 @@ export class WidgetImage extends LitElement {
|
|
|
277
271
|
return html` <linear-progress .value=${percent} style=${styleMap(styles)}></linear-progress> `
|
|
278
272
|
}
|
|
279
273
|
|
|
280
|
-
|
|
281
|
-
|
|
274
|
+
renderLayer(overlay: Overlay) {
|
|
275
|
+
const modifier = this.modifier
|
|
276
|
+
if (!modifier) return nothing
|
|
277
|
+
const containerStyles = {
|
|
278
|
+
left: modifier.xOffset + 'px',
|
|
279
|
+
top: modifier.yOffset + 'px',
|
|
280
|
+
width: modifier.visibleWidth + 'px',
|
|
281
|
+
height: modifier.visibleHeight + 'px'
|
|
282
|
+
}
|
|
283
|
+
return html`<div
|
|
284
|
+
class="overlay"
|
|
285
|
+
style=${styleMap(containerStyles)}
|
|
286
|
+
type="${overlay.layerType}"
|
|
287
|
+
name="${overlay.layerName}"
|
|
288
|
+
>
|
|
289
|
+
${overlay.layerType === 'text'
|
|
290
|
+
? this.renderTextLayer(overlay as TextOverlay)
|
|
291
|
+
: this.renderProgressLayer(overlay as ProgressOverlay)}
|
|
292
|
+
</div>`
|
|
282
293
|
}
|
|
283
294
|
|
|
284
|
-
|
|
285
|
-
|
|
295
|
+
renderTextLayer(overlay: TextOverlay) {
|
|
296
|
+
const modifier = this.modifier
|
|
297
|
+
if (!modifier) return nothing
|
|
298
|
+
return html`${repeat(
|
|
299
|
+
overlay.textPins ?? [],
|
|
300
|
+
(item, idx) => idx,
|
|
301
|
+
(item) => html`${this.renderText(overlay, item, modifier)}`
|
|
302
|
+
)}`
|
|
286
303
|
}
|
|
287
304
|
|
|
288
|
-
|
|
305
|
+
renderProgressLayer(overlay: ProgressOverlay) {
|
|
289
306
|
const modifier = this.modifier
|
|
290
307
|
if (!modifier) return nothing
|
|
291
|
-
return html
|
|
292
|
-
overlay.
|
|
293
|
-
(item) =>
|
|
294
|
-
(item) => {
|
|
295
|
-
return html` ${this.renderMap[overlay.layerType](overlay, item, modifier)} `
|
|
296
|
-
}
|
|
308
|
+
return html`${repeat(
|
|
309
|
+
overlay.progressPins ?? [],
|
|
310
|
+
(item, idx) => idx,
|
|
311
|
+
(item) => html`${this.renderProgress(overlay, item, modifier)}`
|
|
297
312
|
)}`
|
|
298
313
|
}
|
|
299
314
|
|
|
@@ -373,10 +388,6 @@ export class WidgetImage extends LitElement {
|
|
|
373
388
|
|
|
374
389
|
.overlay {
|
|
375
390
|
position: absolute;
|
|
376
|
-
top: 0;
|
|
377
|
-
left: 0;
|
|
378
|
-
right: 0;
|
|
379
|
-
bottom: 0;
|
|
380
391
|
pointer-events: none;
|
|
381
392
|
}
|
|
382
393
|
|
|
@@ -416,11 +427,7 @@ export class WidgetImage extends LitElement {
|
|
|
416
427
|
${repeat(
|
|
417
428
|
this.inputData?.overlays ?? [],
|
|
418
429
|
(o) => o.layerName,
|
|
419
|
-
(o) => html`
|
|
420
|
-
<div class="overlay" type="${o.layerType}" name="${o.layerName}">
|
|
421
|
-
${this.renderLayer(o)}
|
|
422
|
-
</div>
|
|
423
|
-
`
|
|
430
|
+
(o) => html` ${this.renderLayer(o)} `
|
|
424
431
|
)}
|
|
425
432
|
</div>
|
|
426
433
|
</div>
|