@record-evolution/widget-overlay 1.0.1 → 1.0.3
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 +6 -6
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-overlay.js +38 -34
- 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 +43 -40
|
@@ -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,16 +3,16 @@ 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'
|
|
15
|
+
import './linear-progress.js'
|
|
16
16
|
|
|
17
17
|
type Theme = {
|
|
18
18
|
theme_name: string
|
|
@@ -41,13 +41,6 @@ export class WidgetImage extends LitElement {
|
|
|
41
41
|
@query('#base-layer')
|
|
42
42
|
private baseLayer!: any
|
|
43
43
|
|
|
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
44
|
version: string = 'versionplaceholder'
|
|
52
45
|
|
|
53
46
|
update(changedProperties: Map<string, any>) {
|
|
@@ -101,11 +94,6 @@ export class WidgetImage extends LitElement {
|
|
|
101
94
|
}
|
|
102
95
|
const raw = this.inputData.image.trim()
|
|
103
96
|
|
|
104
|
-
// Dynamically load progress bar element if needed
|
|
105
|
-
if (this.inputData?.overlays?.some((o) => o.layerType === 'progress')) {
|
|
106
|
-
import('./linear-progress.js')
|
|
107
|
-
}
|
|
108
|
-
|
|
109
97
|
// Inline SVG markup (optionally starting with an XML declaration or other preamble)
|
|
110
98
|
const trimmed = raw.replace(/^\uFEFF/, '').trimStart()
|
|
111
99
|
|
|
@@ -207,12 +195,12 @@ export class WidgetImage extends LitElement {
|
|
|
207
195
|
|
|
208
196
|
private getOverlayItemPosition(relX: number, relY: number, modifier: Modifier) {
|
|
209
197
|
return {
|
|
210
|
-
left:
|
|
211
|
-
top:
|
|
198
|
+
left: relX * modifier.visibleWidth,
|
|
199
|
+
top: relY * modifier.visibleHeight
|
|
212
200
|
}
|
|
213
201
|
}
|
|
214
202
|
|
|
215
|
-
renderText(_overlay: Overlay, item:
|
|
203
|
+
renderText(_overlay: Overlay, item: TextItem, modifier: Modifier) {
|
|
216
204
|
const overlay = _overlay as TextOverlay
|
|
217
205
|
const pos = this.getOverlayItemPosition(item.relXPos, item.relYPos, modifier)
|
|
218
206
|
if (!pos) return nothing
|
|
@@ -243,10 +231,12 @@ export class WidgetImage extends LitElement {
|
|
|
243
231
|
padding: `${6 * modifier.scaler}px ${12 * modifier.scaler}px`
|
|
244
232
|
}
|
|
245
233
|
|
|
246
|
-
return html`
|
|
234
|
+
return html`
|
|
235
|
+
<div class="overlay-item" style=${styleMap(styles)}>${item.prefix}${value}${item.suffix}</div>
|
|
236
|
+
`
|
|
247
237
|
}
|
|
248
238
|
|
|
249
|
-
renderProgress(_overlay: Overlay, item:
|
|
239
|
+
renderProgress(_overlay: Overlay, item: ProgressItem, modifier: Modifier) {
|
|
250
240
|
const overlay = _overlay as ProgressOverlay
|
|
251
241
|
const pos = this.getOverlayItemPosition(item.relXPos, item.relYPos, modifier)
|
|
252
242
|
if (!pos) return nothing
|
|
@@ -277,23 +267,44 @@ export class WidgetImage extends LitElement {
|
|
|
277
267
|
return html` <linear-progress .value=${percent} style=${styleMap(styles)}></linear-progress> `
|
|
278
268
|
}
|
|
279
269
|
|
|
280
|
-
|
|
281
|
-
|
|
270
|
+
renderLayer(overlay: Overlay) {
|
|
271
|
+
const modifier = this.modifier
|
|
272
|
+
if (!modifier) return nothing
|
|
273
|
+
const containerStyles = {
|
|
274
|
+
left: modifier.xOffset + 'px',
|
|
275
|
+
top: modifier.yOffset + 'px',
|
|
276
|
+
width: modifier.visibleWidth + 'px',
|
|
277
|
+
height: modifier.visibleHeight + 'px'
|
|
278
|
+
}
|
|
279
|
+
return html`<div
|
|
280
|
+
class="overlay"
|
|
281
|
+
style=${styleMap(containerStyles)}
|
|
282
|
+
type="${overlay.layerType}"
|
|
283
|
+
name="${overlay.layerName}"
|
|
284
|
+
>
|
|
285
|
+
${overlay.layerType === 'text'
|
|
286
|
+
? this.renderTextLayer(overlay as TextOverlay)
|
|
287
|
+
: this.renderProgressLayer(overlay as ProgressOverlay)}
|
|
288
|
+
</div>`
|
|
282
289
|
}
|
|
283
290
|
|
|
284
|
-
|
|
285
|
-
|
|
291
|
+
renderTextLayer(overlay: TextOverlay) {
|
|
292
|
+
const modifier = this.modifier
|
|
293
|
+
if (!modifier) return nothing
|
|
294
|
+
return html`${repeat(
|
|
295
|
+
overlay.textPins ?? [],
|
|
296
|
+
(item, idx) => idx,
|
|
297
|
+
(item) => html`${this.renderText(overlay, item, modifier)}`
|
|
298
|
+
)}`
|
|
286
299
|
}
|
|
287
300
|
|
|
288
|
-
|
|
301
|
+
renderProgressLayer(overlay: ProgressOverlay) {
|
|
289
302
|
const modifier = this.modifier
|
|
290
303
|
if (!modifier) return nothing
|
|
291
|
-
return html
|
|
292
|
-
overlay.
|
|
293
|
-
(item) =>
|
|
294
|
-
(item) => {
|
|
295
|
-
return html` ${this.renderMap[overlay.layerType](overlay, item, modifier)} `
|
|
296
|
-
}
|
|
304
|
+
return html`${repeat(
|
|
305
|
+
overlay.progressPins ?? [],
|
|
306
|
+
(item, idx) => idx,
|
|
307
|
+
(item) => html`${this.renderProgress(overlay, item, modifier)}`
|
|
297
308
|
)}`
|
|
298
309
|
}
|
|
299
310
|
|
|
@@ -373,10 +384,6 @@ export class WidgetImage extends LitElement {
|
|
|
373
384
|
|
|
374
385
|
.overlay {
|
|
375
386
|
position: absolute;
|
|
376
|
-
top: 0;
|
|
377
|
-
left: 0;
|
|
378
|
-
right: 0;
|
|
379
|
-
bottom: 0;
|
|
380
387
|
pointer-events: none;
|
|
381
388
|
}
|
|
382
389
|
|
|
@@ -416,11 +423,7 @@ export class WidgetImage extends LitElement {
|
|
|
416
423
|
${repeat(
|
|
417
424
|
this.inputData?.overlays ?? [],
|
|
418
425
|
(o) => o.layerName,
|
|
419
|
-
(o) => html`
|
|
420
|
-
<div class="overlay" type="${o.layerType}" name="${o.layerName}">
|
|
421
|
-
${this.renderLayer(o)}
|
|
422
|
-
</div>
|
|
423
|
-
`
|
|
426
|
+
(o) => html` ${this.renderLayer(o)} `
|
|
424
427
|
)}
|
|
425
428
|
</div>
|
|
426
429
|
</div>
|