@spectrum-web-components/vrt-compare 0.2.18-overlay.18 → 0.30.0
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/custom-elements.json +310 -0
- package/package.json +11 -11
- package/src/VrtCompare.js.map +1 -1
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/OnionSkinner.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "",
|
|
12
|
+
"name": "OnionSkinner",
|
|
13
|
+
"members": [
|
|
14
|
+
{
|
|
15
|
+
"kind": "field",
|
|
16
|
+
"name": "onionLevel",
|
|
17
|
+
"type": {
|
|
18
|
+
"text": "number"
|
|
19
|
+
},
|
|
20
|
+
"privacy": "public",
|
|
21
|
+
"default": "0.5",
|
|
22
|
+
"attribute": "onionLevel"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"kind": "field",
|
|
26
|
+
"name": "assignments",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "NodeListOf<HTMLImageElement>"
|
|
29
|
+
},
|
|
30
|
+
"privacy": "private"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"kind": "field",
|
|
34
|
+
"name": "leftThumbnail",
|
|
35
|
+
"type": {
|
|
36
|
+
"text": "HTMLImageElement | undefined"
|
|
37
|
+
},
|
|
38
|
+
"privacy": "private"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"kind": "field",
|
|
42
|
+
"name": "rightThumbnail",
|
|
43
|
+
"type": {
|
|
44
|
+
"text": "HTMLImageElement | undefined"
|
|
45
|
+
},
|
|
46
|
+
"privacy": "private"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"kind": "method",
|
|
50
|
+
"name": "handleOnionInput",
|
|
51
|
+
"privacy": "private",
|
|
52
|
+
"parameters": [
|
|
53
|
+
{
|
|
54
|
+
"name": "event",
|
|
55
|
+
"type": {
|
|
56
|
+
"text": "Event & { target: Slider }"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"kind": "method",
|
|
63
|
+
"name": "handleSlotchange",
|
|
64
|
+
"privacy": "private"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"kind": "method",
|
|
68
|
+
"name": "allLeft",
|
|
69
|
+
"privacy": "private"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"kind": "method",
|
|
73
|
+
"name": "allRight",
|
|
74
|
+
"privacy": "private"
|
|
75
|
+
}
|
|
76
|
+
],
|
|
77
|
+
"attributes": [
|
|
78
|
+
{
|
|
79
|
+
"name": "onionLevel",
|
|
80
|
+
"type": {
|
|
81
|
+
"text": "number"
|
|
82
|
+
},
|
|
83
|
+
"default": "0.5",
|
|
84
|
+
"fieldName": "onionLevel"
|
|
85
|
+
}
|
|
86
|
+
],
|
|
87
|
+
"superclass": {
|
|
88
|
+
"name": "SpectrumElement",
|
|
89
|
+
"package": "@spectrum-web-components/base"
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
],
|
|
93
|
+
"exports": [
|
|
94
|
+
{
|
|
95
|
+
"kind": "js",
|
|
96
|
+
"name": "OnionSkinner",
|
|
97
|
+
"declaration": {
|
|
98
|
+
"name": "OnionSkinner",
|
|
99
|
+
"module": "src/OnionSkinner.js"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"kind": "javascript-module",
|
|
106
|
+
"path": "src/VrtCompare.js",
|
|
107
|
+
"declarations": [
|
|
108
|
+
{
|
|
109
|
+
"kind": "class",
|
|
110
|
+
"description": "",
|
|
111
|
+
"name": "VrtCompare",
|
|
112
|
+
"members": [
|
|
113
|
+
{
|
|
114
|
+
"kind": "field",
|
|
115
|
+
"name": "view",
|
|
116
|
+
"type": {
|
|
117
|
+
"text": "string"
|
|
118
|
+
},
|
|
119
|
+
"privacy": "public",
|
|
120
|
+
"default": "'scrubber'",
|
|
121
|
+
"attribute": "view"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"kind": "field",
|
|
125
|
+
"name": "zoom",
|
|
126
|
+
"type": {
|
|
127
|
+
"text": "number"
|
|
128
|
+
},
|
|
129
|
+
"privacy": "public",
|
|
130
|
+
"default": "1",
|
|
131
|
+
"attribute": "zoom"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"kind": "field",
|
|
135
|
+
"name": "imagesLoaded",
|
|
136
|
+
"type": {
|
|
137
|
+
"text": "boolean"
|
|
138
|
+
},
|
|
139
|
+
"privacy": "public",
|
|
140
|
+
"default": "false"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "field",
|
|
144
|
+
"name": "hasActual",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "boolean"
|
|
147
|
+
},
|
|
148
|
+
"privacy": "private"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"kind": "field",
|
|
152
|
+
"name": "hasBaseline",
|
|
153
|
+
"type": {
|
|
154
|
+
"text": "boolean"
|
|
155
|
+
},
|
|
156
|
+
"privacy": "private"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"kind": "field",
|
|
160
|
+
"name": "hasDiff",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "boolean"
|
|
163
|
+
},
|
|
164
|
+
"privacy": "private"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "canCompare",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "boolean"
|
|
171
|
+
},
|
|
172
|
+
"privacy": "private"
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"kind": "method",
|
|
176
|
+
"name": "handleChange",
|
|
177
|
+
"privacy": "private",
|
|
178
|
+
"parameters": [
|
|
179
|
+
{
|
|
180
|
+
"name": "event",
|
|
181
|
+
"type": {
|
|
182
|
+
"text": "Event & { target: ActionGroup }"
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
]
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"kind": "method",
|
|
189
|
+
"name": "handleZoomIn",
|
|
190
|
+
"privacy": "private"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"kind": "method",
|
|
194
|
+
"name": "handleZoomClear",
|
|
195
|
+
"privacy": "private"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"kind": "method",
|
|
199
|
+
"name": "handleZoomOut",
|
|
200
|
+
"privacy": "private"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"kind": "field",
|
|
204
|
+
"name": "error",
|
|
205
|
+
"privacy": "protected"
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
"kind": "field",
|
|
209
|
+
"name": "actual",
|
|
210
|
+
"privacy": "protected"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"kind": "field",
|
|
214
|
+
"name": "baseline",
|
|
215
|
+
"privacy": "protected"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"kind": "field",
|
|
219
|
+
"name": "diff",
|
|
220
|
+
"privacy": "protected"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "field",
|
|
224
|
+
"name": "scrubber",
|
|
225
|
+
"privacy": "protected"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"kind": "field",
|
|
229
|
+
"name": "sidebyside",
|
|
230
|
+
"privacy": "protected"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"kind": "field",
|
|
234
|
+
"name": "onion",
|
|
235
|
+
"privacy": "protected"
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"kind": "field",
|
|
239
|
+
"name": "renderView",
|
|
240
|
+
"privacy": "protected"
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"kind": "field",
|
|
244
|
+
"name": "viewFallback",
|
|
245
|
+
"privacy": "private"
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"kind": "field",
|
|
249
|
+
"name": "_loadingImages",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "boolean"
|
|
252
|
+
},
|
|
253
|
+
"default": "false"
|
|
254
|
+
},
|
|
255
|
+
{
|
|
256
|
+
"kind": "method",
|
|
257
|
+
"name": "prepImages",
|
|
258
|
+
"parameters": [
|
|
259
|
+
{
|
|
260
|
+
"name": "event",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "Event"
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
]
|
|
266
|
+
}
|
|
267
|
+
],
|
|
268
|
+
"attributes": [
|
|
269
|
+
{
|
|
270
|
+
"name": "view",
|
|
271
|
+
"type": {
|
|
272
|
+
"text": "string"
|
|
273
|
+
},
|
|
274
|
+
"default": "'scrubber'",
|
|
275
|
+
"fieldName": "view"
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"name": "zoom",
|
|
279
|
+
"type": {
|
|
280
|
+
"text": "number"
|
|
281
|
+
},
|
|
282
|
+
"default": "1",
|
|
283
|
+
"fieldName": "zoom"
|
|
284
|
+
}
|
|
285
|
+
],
|
|
286
|
+
"mixins": [
|
|
287
|
+
{
|
|
288
|
+
"name": "ObserveSlotPresence",
|
|
289
|
+
"package": "@spectrum-web-components/shared"
|
|
290
|
+
}
|
|
291
|
+
],
|
|
292
|
+
"superclass": {
|
|
293
|
+
"name": "SpectrumElement",
|
|
294
|
+
"package": "@spectrum-web-components/base"
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
],
|
|
298
|
+
"exports": [
|
|
299
|
+
{
|
|
300
|
+
"kind": "js",
|
|
301
|
+
"name": "VrtCompare",
|
|
302
|
+
"declaration": {
|
|
303
|
+
"name": "VrtCompare",
|
|
304
|
+
"module": "src/VrtCompare.js"
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
]
|
|
308
|
+
}
|
|
309
|
+
]
|
|
310
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/vrt-compare",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.30.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -60,15 +60,15 @@
|
|
|
60
60
|
"lit-html"
|
|
61
61
|
],
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@spectrum-web-components/action-bar": "^0.
|
|
64
|
-
"@spectrum-web-components/action-button": "^0.
|
|
65
|
-
"@spectrum-web-components/action-group": "^0.
|
|
66
|
-
"@spectrum-web-components/base": "^0.
|
|
67
|
-
"@spectrum-web-components/icons-workflow": "^0.
|
|
68
|
-
"@spectrum-web-components/shared": "^0.
|
|
69
|
-
"@spectrum-web-components/split-view": "^0.
|
|
70
|
-
"@spectrum-web-components/styles": "^0.
|
|
71
|
-
"@spectrum-web-components/theme": "^0.
|
|
63
|
+
"@spectrum-web-components/action-bar": "^0.30.0",
|
|
64
|
+
"@spectrum-web-components/action-button": "^0.30.0",
|
|
65
|
+
"@spectrum-web-components/action-group": "^0.30.0",
|
|
66
|
+
"@spectrum-web-components/base": "^0.30.0",
|
|
67
|
+
"@spectrum-web-components/icons-workflow": "^0.30.0",
|
|
68
|
+
"@spectrum-web-components/shared": "^0.30.0",
|
|
69
|
+
"@spectrum-web-components/split-view": "^0.30.0",
|
|
70
|
+
"@spectrum-web-components/styles": "^0.30.0",
|
|
71
|
+
"@spectrum-web-components/theme": "^0.30.0"
|
|
72
72
|
},
|
|
73
73
|
"types": "./src/index.d.ts",
|
|
74
74
|
"customElements": "custom-elements.json",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"./vrt-compare.js",
|
|
79
79
|
"./vrt-compare.ts"
|
|
80
80
|
],
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "e34a26bf2bbea5f60a5e415e0f12c97654f0e20d"
|
|
82
82
|
}
|
package/src/VrtCompare.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["VrtCompare.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n css,\n html,\n nothing,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/split-view/sp-split-view.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js';\nimport '@spectrum-web-components/action-bar/sp-action-bar.js';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '../onion-skinner.js';\n\nexport class VrtCompare extends ObserveSlotPresence(SpectrumElement, [\n '[slot=\"actual\"]',\n '[slot=\"baseline\"]',\n '[slot=\"diff\"]',\n]) {\n @property()\n public view = 'scrubber';\n\n @property({ type: Number })\n public zoom = 1;\n\n @property({ type: Boolean, attribute: false })\n public imagesLoaded = false;\n\n private get hasActual(): boolean {\n return this.getSlotContentPresence('[slot=\"actual\"]');\n }\n\n private get hasBaseline(): boolean {\n return this.getSlotContentPresence('[slot=\"baseline\"]');\n }\n\n private get hasDiff(): boolean {\n return this.getSlotContentPresence('[slot=\"diff\"]');\n }\n\n private get canCompare(): boolean {\n return this.hasActual && this.hasBaseline;\n }\n\n private handleChange(event: Event & { target: ActionGroup }) {\n const view = event.target.selected[0];\n if (view) {\n this.view = view;\n }\n }\n\n private handleZoomIn() {\n this.zoom += 0.1;\n }\n\n private handleZoomClear() {\n this.zoom = 1;\n }\n\n private handleZoomOut() {\n this.zoom -= 0.1;\n }\n\n protected get error() {\n return html`\n <sp-icon-alert class=\"icon\" size=\"xl\"></sp-icon-alert>\n <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n Please be sure to supply some combination of actual, baseline,\n and diff screenshots for review.\n </p>\n `;\n }\n\n protected get actual() {\n return html`\n <div class=\"view actual\">\n <slot name=\"actual\"></slot>\n </div>\n `;\n }\n\n protected get baseline() {\n return html`\n <div class=\"view baseline\">\n <slot name=\"baseline\"></slot>\n </div>\n `;\n }\n\n protected get diff() {\n return html`\n <div class=\"view diff\">\n <slot name=\"diff\"></slot>\n </div>\n `;\n }\n\n protected get scrubber() {\n return html`\n <sp-split-view resizable primary-size=\"50%\">\n ${this.baseline} ${this.actual}\n </sp-split-view>\n `;\n }\n\n protected get sidebyside() {\n return html`\n ${this.baseline} ${this.actual}\n `;\n }\n\n protected get onion() {\n return html`\n <onion-skinner>\n <slot name=\"baseline\"></slot>\n <slot name=\"actual\"></slot>\n </onion-skinner>\n `;\n }\n\n protected get renderView() {\n switch (this.view) {\n case 'error':\n return this.error;\n case 'actual':\n return this.actual;\n case 'baseline':\n return this.baseline;\n case 'diff':\n return this.diff;\n case 'onion':\n return this.onion;\n case 'sidebyside':\n return this.sidebyside;\n case 'scrubber':\n default:\n return this.scrubber;\n }\n }\n\n private get viewFallback() {\n if (this.canCompare) {\n return 'scrubber';\n } else if (this.hasActual) {\n return 'actual';\n } else if (this.hasBaseline) {\n return 'baseline';\n } else if (this.hasDiff) {\n return 'diff';\n } else {\n return 'error';\n }\n }\n\n _loadingImages = false;\n\n async prepImages(event: Event) {\n const slot = event.target as HTMLSlotElement;\n if (this._loadingImages || !slot.assignedNodes().length) {\n return;\n }\n this._loadingImages = true;\n this.imagesLoaded = false;\n const images = [...this.querySelectorAll('img')];\n if (!images.length) {\n this.imagesLoaded = true;\n this._loadingImages = false;\n return;\n }\n const imageLoadPromises = images.map((img) => {\n if (img.naturalWidth) {\n this.style.setProperty(\n '--image-width',\n `${img.naturalWidth}px`\n );\n return Promise.resolve();\n }\n return new Promise((resolve) => {\n img.addEventListener('load', () => {\n this.style.setProperty(\n '--image-width',\n `${img.naturalWidth}px`\n );\n resolve(true);\n });\n });\n });\n await Promise.all(imageLoadPromises);\n this.imagesLoaded = true;\n this._loadingImages = false;\n }\n\n protected override shouldUpdate() {\n if (\n this.view === 'error' ||\n (this.view === 'actual' && !this.hasActual) ||\n (this.view === 'baseline' && !this.hasBaseline) ||\n (this.view === 'diff' && !this.hasDiff) ||\n ((this.view === 'onion' ||\n this.view === 'sidebyside' ||\n this.view === 'scrubber') &&\n !this.canCompare)\n ) {\n this.view = this.viewFallback;\n }\n return true;\n }\n\n protected override render(): TemplateResult {\n if (this._loadingImages) {\n return html`\n <sp-progress-circle indeterminate></sp-progress-circle>\n <slot\n name=\"actual\"\n @slotchange=${this.prepImages}\n hidden\n ></slot>\n <slot\n name=\"baseline\"\n @slotchange=${this.prepImages}\n hidden\n ></slot>\n <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n `;\n }\n if (!this.imagesLoaded) {\n return html`\n <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n Choose a test to review on the left...\n </p>\n <slot\n name=\"actual\"\n @slotchange=${this.prepImages}\n hidden\n ></slot>\n <slot\n name=\"baseline\"\n @slotchange=${this.prepImages}\n hidden\n ></slot>\n <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n `;\n }\n return html`\n <sp-action-group\n selects=\"single\"\n compact\n emphasized\n @change=${this.handleChange}\n >\n ${this.view !== 'error'\n ? nothing\n : html`\n <sp-action-button value=\"error\" disabled>\n Error\n </sp-action-button>\n `}\n ${!this.canCompare\n ? nothing\n : html`\n <sp-action-button\n value=\"scrubber\"\n ?selected=${this.view === 'scrubber'}\n >\n Scrubber\n </sp-action-button>\n <sp-action-button\n value=\"onion\"\n ?selected=${this.view === 'onion'}\n >\n Onion skin\n </sp-action-button>\n <sp-action-button\n value=\"sidebyside\"\n ?selected=${this.view === 'sidebyside'}\n >\n Side by side\n </sp-action-button>\n `}\n ${!this.hasDiff\n ? nothing\n : html`\n <sp-action-button\n value=\"diff\"\n ?selected=${this.view === 'diff'}\n >\n Diff\n </sp-action-button>\n `}\n ${!this.hasActual\n ? nothing\n : html`\n <sp-action-button\n value=\"actual\"\n ?selected=${this.view === 'actual'}\n >\n Actual\n </sp-action-button>\n `}\n ${!this.hasBaseline\n ? nothing\n : html`\n <sp-action-button\n value=\"baseline\"\n ?selected=${this.view === 'baseline'}\n >\n Baseline\n </sp-action-button>\n `}\n </sp-action-group>\n <div class=\"review ${this.view}\">${this.renderView}</div>\n <sp-action-group compact class=\"zoom-controls\">\n <sp-action-button\n @click=${this.handleZoomOut}\n ?disabled=${this.zoom <= 0.5}\n >\n <sp-icon-zoom-out slot=\"icon\"></sp-icon-zoom-out>\n </sp-action-button>\n <sp-action-button @click=${this.handleZoomClear}>\n <sp-icon-refresh slot=\"icon\"></sp-icon-refresh>\n </sp-action-button>\n <sp-action-button\n @click=${this.handleZoomIn}\n ?disabled=${this.zoom >= 2}\n >\n <sp-icon-zoom-in slot=\"icon\"></sp-icon-zoom-in>\n </sp-action-button>\n </sp-action-group>\n `;\n }\n\n protected override updated(changes: PropertyValues) {\n if (changes.has('zoom')) {\n let zoom = Math.min(this.zoom, 2);\n zoom = Math.min(zoom, 0.5);\n this.style.setProperty('--zoom-level', `${this.zoom}`);\n }\n }\n\n static override styles = [\n css`\n :host {\n display: grid;\n max-width: 100%;\n overflow: auto;\n margin: 0 auto;\n position: relative;\n\n --image-display-width: calc(\n var(--zoom-level, 1) * var(--image-width, 500px)\n );\n }\n sp-progress-circle {\n margin: auto;\n place-self: center;\n }\n .review {\n margin: 100px auto 0;\n display: flex;\n width: var(--image-display-width);\n place-self: start;\n }\n .error {\n flex-direction: column;\n }\n ::slotted(img) {\n display: flex;\n }\n sp-action-group[selects] {\n margin-bottom: 1em;\n justify-content: center;\n position: fixed;\n top: calc(var(--spectrum-global-dimension-size-200) / 2);\n right: calc(var(--spectrum-global-dimension-size-200) / 2);\n }\n .sidebyside {\n display: flex;\n gap: 2px;\n }\n .sidebyside ::slotted(img) {\n width: 100%;\n }\n .view {\n overflow: hidden;\n }\n .review:is(.baseline, .actual, .diff) .view,\n .review:is(.baseline, .actual, .diff) ::slotted(img) {\n width: 100%;\n }\n sp-split-view {\n width: var(--image-display-width);\n }\n sp-split-view ::slotted(img) {\n width: var(--image-display-width);\n height: auto;\n flex-shrink: 0;\n }\n sp-split-view .actual ::slotted(img) {\n float: right;\n }\n p {\n text-align: center;\n margin: 0 3em;\n }\n .icon {\n margin: 0 auto 2em;\n display: flex;\n color: var(--spectrum-semantic-negative-color-background);\n }\n .zoom-controls {\n position: fixed;\n bottom: calc(var(--spectrum-global-dimension-size-200) / 2);\n left: calc(\n 240px + 48px + var(--spectrum-global-dimension-size-200) / 2\n );\n z-index: 1;\n }\n `,\n bodyStyles,\n ];\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OACI,OAAAA,EACA,QAAAC,EACA,WAAAC,EAEA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,uBAAAC,MAA2B,kCAEpC,OAAOC,MAAgB,0CACvB,MAAO,6DACP,MAAO,2DACP,MAAO,uDACP,MAAO,iEACP,MAAO,mEACP,MAAO,oEACP,MAAO,mEACP,MAAO,uDACP,MAAO,iEACP,MAAO,sBAEA,aAAM,mBAAmBD,EAAoBF,EAAiB,CACjE,kBACA,oBACA,eACJ,CAAC,CAAE,CAJI,kCAMH,KAAO,KAAO,WAGd,KAAO,KAAO,EAGd,KAAO,aAAe,GAgItB,oBAAiB,GA9HjB,IAAY,WAAqB,CAC7B,OAAO,KAAK,uBAAuB,iBAAiB,CACxD,CAEA,IAAY,aAAuB,CAC/B,OAAO,KAAK,uBAAuB,mBAAmB,CAC1D,CAEA,IAAY,SAAmB,CAC3B,OAAO,KAAK,uBAAuB,eAAe,CACtD,CAEA,IAAY,YAAsB,CAC9B,OAAO,KAAK,WAAa,KAAK,WAClC,CAEQ,aAAaI,EAAwC,CACzD,MAAMC,EAAOD,EAAM,OAAO,SAAS,CAAC,EAChCC,IACA,KAAK,KAAOA,EAEpB,CAEQ,cAAe,CACnB,KAAK,MAAQ,EACjB,CAEQ,iBAAkB,CACtB,KAAK,KAAO,CAChB,CAEQ,eAAgB,CACpB,KAAK,MAAQ,EACjB,CAEA,IAAc,OAAQ,CAClB,OAAOP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAOX,CAEA,IAAc,QAAS,CACnB,OAAOA;AAAA;AAAA;AAAA;AAAA,SAKX,CAEA,IAAc,UAAW,CACrB,OAAOA;AAAA;AAAA;AAAA;AAAA,SAKX,CAEA,IAAc,MAAO,CACjB,OAAOA;AAAA;AAAA;AAAA;AAAA,SAKX,CAEA,IAAc,UAAW,CACrB,OAAOA;AAAA;AAAA,kBAEG,KAAK,YAAY,KAAK;AAAA;AAAA,SAGpC,CAEA,IAAc,YAAa,CACvB,OAAOA;AAAA,cACD,KAAK,YAAY,KAAK;AAAA,SAEhC,CAEA,IAAc,OAAQ,CAClB,OAAOA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMX,CAEA,IAAc,YAAa,CACvB,OAAQ,KAAK,KAAM,CACf,IAAK,QACD,OAAO,KAAK,MAChB,IAAK,SACD,OAAO,KAAK,OAChB,IAAK,WACD,OAAO,KAAK,SAChB,IAAK,OACD,OAAO,KAAK,KAChB,IAAK,QACD,OAAO,KAAK,MAChB,IAAK,aACD,OAAO,KAAK,WAChB,IAAK,WACL,QACI,OAAO,KAAK,QACpB,CACJ,CAEA,IAAY,cAAe,CACvB,OAAI,KAAK,WACE,WACA,KAAK,UACL,SACA,KAAK,YACL,WACA,KAAK,QACL,OAEA,OAEf,CAIA,MAAM,WAAWM,EAAc,CAC3B,MAAME,EAAOF,EAAM,OACnB,GAAI,KAAK,gBAAkB,CAACE,EAAK,cAAc,EAAE,OAC7C,OAEJ,KAAK,eAAiB,GACtB,KAAK,aAAe,GACpB,MAAMC,EAAS,CAAC,GAAG,KAAK,iBAAiB,KAAK,CAAC,EAC/C,GAAI,CAACA,EAAO,OAAQ,CAChB,KAAK,aAAe,GACpB,KAAK,eAAiB,GACtB,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["css", "html", "nothing", "SpectrumElement", "property", "ObserveSlotPresence", "bodyStyles", "event", "view", "slot", "images", "imageLoadPromises", "img", "resolve", "changes", "zoom", "__decorateClass"]
|
|
7
7
|
}
|