@spectrum-web-components/vrt-compare 0.1.16 → 0.1.17-devmode.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/onion-skinner.dev.js +3 -0
- package/onion-skinner.dev.js.map +7 -0
- package/onion-skinner.js +3 -14
- package/onion-skinner.js.map +7 -1
- package/package.json +31 -14
- package/src/OnionSkinner.dev.js +124 -0
- package/src/OnionSkinner.dev.js.map +7 -0
- package/src/OnionSkinner.js +57 -55
- package/src/OnionSkinner.js.map +7 -1
- package/src/VrtCompare.dev.js +397 -0
- package/src/VrtCompare.dev.js.map +7 -0
- package/src/VrtCompare.js +187 -204
- package/src/VrtCompare.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/vrt-compare.dev.js +3 -0
- package/vrt-compare.dev.js.map +7 -0
- package/vrt-compare.js +3 -14
- package/vrt-compare.js.map +7 -1
package/src/VrtCompare.js
CHANGED
|
@@ -1,199 +1,192 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
+
if (decorator = decorators[i])
|
|
7
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
+
if (kind && result)
|
|
9
|
+
__defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import {
|
|
13
|
+
css,
|
|
14
|
+
html,
|
|
15
|
+
nothing,
|
|
16
|
+
SpectrumElement
|
|
17
|
+
} from "@spectrum-web-components/base";
|
|
18
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
19
|
+
import { ObserveSlotPresence } from "@spectrum-web-components/shared";
|
|
20
|
+
import bodyStyles from "@spectrum-web-components/styles/body.js";
|
|
21
|
+
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
22
|
+
import "@spectrum-web-components/action-group/sp-action-group.js";
|
|
23
|
+
import "@spectrum-web-components/split-view/sp-split-view.js";
|
|
24
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
|
|
25
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js";
|
|
26
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js";
|
|
27
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js";
|
|
28
|
+
import "@spectrum-web-components/action-bar/sp-action-bar.js";
|
|
29
|
+
import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
|
|
30
|
+
import "../onion-skinner.js";
|
|
27
31
|
export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
'[slot="actual"]',
|
|
33
|
+
'[slot="baseline"]',
|
|
34
|
+
'[slot="diff"]'
|
|
31
35
|
]) {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
36
|
+
constructor() {
|
|
37
|
+
super(...arguments);
|
|
38
|
+
this.view = "scrubber";
|
|
39
|
+
this.zoom = 1;
|
|
40
|
+
this.imagesLoaded = false;
|
|
41
|
+
this._loadingImages = false;
|
|
42
|
+
}
|
|
43
|
+
get hasActual() {
|
|
44
|
+
return this.getSlotContentPresence('[slot="actual"]');
|
|
45
|
+
}
|
|
46
|
+
get hasBaseline() {
|
|
47
|
+
return this.getSlotContentPresence('[slot="baseline"]');
|
|
48
|
+
}
|
|
49
|
+
get hasDiff() {
|
|
50
|
+
return this.getSlotContentPresence('[slot="diff"]');
|
|
51
|
+
}
|
|
52
|
+
get canCompare() {
|
|
53
|
+
return this.hasActual && this.hasBaseline;
|
|
54
|
+
}
|
|
55
|
+
handleChange(event) {
|
|
56
|
+
const view = event.target.selected[0];
|
|
57
|
+
if (view) {
|
|
58
|
+
this.view = view;
|
|
56
59
|
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
60
|
+
}
|
|
61
|
+
handleZoomIn() {
|
|
62
|
+
this.zoom += 0.1;
|
|
63
|
+
}
|
|
64
|
+
handleZoomClear() {
|
|
65
|
+
this.zoom = 1;
|
|
66
|
+
}
|
|
67
|
+
handleZoomOut() {
|
|
68
|
+
this.zoom -= 0.1;
|
|
69
|
+
}
|
|
70
|
+
get error() {
|
|
71
|
+
return html`
|
|
68
72
|
<sp-icon-alert class="icon" size="xl"></sp-icon-alert>
|
|
69
73
|
<p class="spectrum-Body spectrum-Body--sizeXL">
|
|
70
74
|
Please be sure to supply some combination of actual, baseline,
|
|
71
75
|
and diff screenshots for review.
|
|
72
76
|
</p>
|
|
73
77
|
`;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
}
|
|
79
|
+
get actual() {
|
|
80
|
+
return html`
|
|
77
81
|
<div class="view actual">
|
|
78
82
|
<slot name="actual"></slot>
|
|
79
83
|
</div>
|
|
80
84
|
`;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
85
|
+
}
|
|
86
|
+
get baseline() {
|
|
87
|
+
return html`
|
|
84
88
|
<div class="view baseline">
|
|
85
89
|
<slot name="baseline"></slot>
|
|
86
90
|
</div>
|
|
87
91
|
`;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
}
|
|
93
|
+
get diff() {
|
|
94
|
+
return html`
|
|
91
95
|
<div class="view diff">
|
|
92
96
|
<slot name="diff"></slot>
|
|
93
97
|
</div>
|
|
94
98
|
`;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
}
|
|
100
|
+
get scrubber() {
|
|
101
|
+
return html`
|
|
98
102
|
<sp-split-view resizable primary-size="50%">
|
|
99
103
|
${this.baseline} ${this.actual}
|
|
100
104
|
</sp-split-view>
|
|
101
105
|
`;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
106
|
+
}
|
|
107
|
+
get sidebyside() {
|
|
108
|
+
return html`
|
|
105
109
|
${this.baseline} ${this.actual}
|
|
106
110
|
`;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
111
|
+
}
|
|
112
|
+
get onion() {
|
|
113
|
+
return html`
|
|
110
114
|
<onion-skinner>
|
|
111
115
|
<slot name="baseline"></slot>
|
|
112
116
|
<slot name="actual"></slot>
|
|
113
117
|
</onion-skinner>
|
|
114
118
|
`;
|
|
119
|
+
}
|
|
120
|
+
get renderView() {
|
|
121
|
+
switch (this.view) {
|
|
122
|
+
case "error":
|
|
123
|
+
return this.error;
|
|
124
|
+
case "actual":
|
|
125
|
+
return this.actual;
|
|
126
|
+
case "baseline":
|
|
127
|
+
return this.baseline;
|
|
128
|
+
case "diff":
|
|
129
|
+
return this.diff;
|
|
130
|
+
case "onion":
|
|
131
|
+
return this.onion;
|
|
132
|
+
case "sidebyside":
|
|
133
|
+
return this.sidebyside;
|
|
134
|
+
case "scrubber":
|
|
135
|
+
default:
|
|
136
|
+
return this.scrubber;
|
|
115
137
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
case 'sidebyside':
|
|
129
|
-
return this.sidebyside;
|
|
130
|
-
case 'scrubber':
|
|
131
|
-
default:
|
|
132
|
-
return this.scrubber;
|
|
133
|
-
}
|
|
138
|
+
}
|
|
139
|
+
get viewFallback() {
|
|
140
|
+
if (this.canCompare) {
|
|
141
|
+
return "scrubber";
|
|
142
|
+
} else if (this.hasActual) {
|
|
143
|
+
return "actual";
|
|
144
|
+
} else if (this.hasBaseline) {
|
|
145
|
+
return "baseline";
|
|
146
|
+
} else if (this.hasDiff) {
|
|
147
|
+
return "diff";
|
|
148
|
+
} else {
|
|
149
|
+
return "error";
|
|
134
150
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
return 'actual';
|
|
141
|
-
}
|
|
142
|
-
else if (this.hasBaseline) {
|
|
143
|
-
return 'baseline';
|
|
144
|
-
}
|
|
145
|
-
else if (this.hasDiff) {
|
|
146
|
-
return 'diff';
|
|
147
|
-
}
|
|
148
|
-
else {
|
|
149
|
-
return 'error';
|
|
150
|
-
}
|
|
151
|
+
}
|
|
152
|
+
async prepImages(event) {
|
|
153
|
+
const slot = event.target;
|
|
154
|
+
if (this._loadingImages || !slot.assignedNodes().length) {
|
|
155
|
+
return;
|
|
151
156
|
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
const images = [...this.querySelectorAll('img')];
|
|
160
|
-
if (!images.length) {
|
|
161
|
-
this.imagesLoaded = true;
|
|
162
|
-
this._loadingImages = false;
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
const imageLoadPromises = images.map((img) => {
|
|
166
|
-
if (img.naturalWidth) {
|
|
167
|
-
this.style.setProperty('--image-width', `${img.naturalWidth}px`);
|
|
168
|
-
return Promise.resolve();
|
|
169
|
-
}
|
|
170
|
-
return new Promise((resolve) => {
|
|
171
|
-
img.addEventListener('load', () => {
|
|
172
|
-
this.style.setProperty('--image-width', `${img.naturalWidth}px`);
|
|
173
|
-
resolve(true);
|
|
174
|
-
});
|
|
175
|
-
});
|
|
176
|
-
});
|
|
177
|
-
await Promise.all(imageLoadPromises);
|
|
178
|
-
this.imagesLoaded = true;
|
|
179
|
-
this._loadingImages = false;
|
|
157
|
+
this._loadingImages = true;
|
|
158
|
+
this.imagesLoaded = false;
|
|
159
|
+
const images = [...this.querySelectorAll("img")];
|
|
160
|
+
if (!images.length) {
|
|
161
|
+
this.imagesLoaded = true;
|
|
162
|
+
this._loadingImages = false;
|
|
163
|
+
return;
|
|
180
164
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
165
|
+
const imageLoadPromises = images.map((img) => {
|
|
166
|
+
if (img.naturalWidth) {
|
|
167
|
+
this.style.setProperty("--image-width", `${img.naturalWidth}px`);
|
|
168
|
+
return Promise.resolve();
|
|
169
|
+
}
|
|
170
|
+
return new Promise((resolve) => {
|
|
171
|
+
img.addEventListener("load", () => {
|
|
172
|
+
this.style.setProperty("--image-width", `${img.naturalWidth}px`);
|
|
173
|
+
resolve(true);
|
|
174
|
+
});
|
|
175
|
+
});
|
|
176
|
+
});
|
|
177
|
+
await Promise.all(imageLoadPromises);
|
|
178
|
+
this.imagesLoaded = true;
|
|
179
|
+
this._loadingImages = false;
|
|
180
|
+
}
|
|
181
|
+
shouldUpdate() {
|
|
182
|
+
if (this.view === "error" || this.view === "actual" && !this.hasActual || this.view === "baseline" && !this.hasBaseline || this.view === "diff" && !this.hasDiff || (this.view === "onion" || this.view === "sidebyside" || this.view === "scrubber") && !this.canCompare) {
|
|
183
|
+
this.view = this.viewFallback;
|
|
193
184
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
185
|
+
return true;
|
|
186
|
+
}
|
|
187
|
+
render() {
|
|
188
|
+
if (this._loadingImages) {
|
|
189
|
+
return html`
|
|
197
190
|
<sp-progress-circle indeterminate></sp-progress-circle>
|
|
198
191
|
<slot
|
|
199
192
|
name="actual"
|
|
@@ -207,9 +200,9 @@ export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
|
207
200
|
></slot>
|
|
208
201
|
<slot name="diff" @slotchange=${this.prepImages} hidden></slot>
|
|
209
202
|
`;
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
203
|
+
}
|
|
204
|
+
if (!this.imagesLoaded) {
|
|
205
|
+
return html`
|
|
213
206
|
<p class="spectrum-Body spectrum-Body--sizeXL">
|
|
214
207
|
Choose a test to review on the left...
|
|
215
208
|
</p>
|
|
@@ -225,69 +218,59 @@ export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
|
225
218
|
></slot>
|
|
226
219
|
<slot name="diff" @slotchange=${this.prepImages} hidden></slot>
|
|
227
220
|
`;
|
|
228
|
-
|
|
229
|
-
|
|
221
|
+
}
|
|
222
|
+
return html`
|
|
230
223
|
<sp-action-group
|
|
231
224
|
selects="single"
|
|
232
225
|
compact
|
|
233
226
|
emphasized
|
|
234
227
|
@change=${this.handleChange}
|
|
235
228
|
>
|
|
236
|
-
${this.view !==
|
|
237
|
-
? nothing
|
|
238
|
-
: html `
|
|
229
|
+
${this.view !== "error" ? nothing : html`
|
|
239
230
|
<sp-action-button value="error" disabled>
|
|
240
231
|
Error
|
|
241
232
|
</sp-action-button>
|
|
242
233
|
`}
|
|
243
|
-
${!this.canCompare
|
|
244
|
-
? nothing
|
|
245
|
-
: html `
|
|
234
|
+
${!this.canCompare ? nothing : html`
|
|
246
235
|
<sp-action-button
|
|
247
236
|
value="scrubber"
|
|
248
|
-
?selected=${this.view ===
|
|
237
|
+
?selected=${this.view === "scrubber"}
|
|
249
238
|
>
|
|
250
239
|
Scrubber
|
|
251
240
|
</sp-action-button>
|
|
252
241
|
<sp-action-button
|
|
253
242
|
value="onion"
|
|
254
|
-
?selected=${this.view ===
|
|
243
|
+
?selected=${this.view === "onion"}
|
|
255
244
|
>
|
|
256
245
|
Onion skin
|
|
257
246
|
</sp-action-button>
|
|
258
247
|
<sp-action-button
|
|
259
248
|
value="sidebyside"
|
|
260
|
-
?selected=${this.view ===
|
|
249
|
+
?selected=${this.view === "sidebyside"}
|
|
261
250
|
>
|
|
262
251
|
Side by side
|
|
263
252
|
</sp-action-button>
|
|
264
253
|
`}
|
|
265
|
-
${!this.hasDiff
|
|
266
|
-
? nothing
|
|
267
|
-
: html `
|
|
254
|
+
${!this.hasDiff ? nothing : html`
|
|
268
255
|
<sp-action-button
|
|
269
256
|
value="diff"
|
|
270
|
-
?selected=${this.view ===
|
|
257
|
+
?selected=${this.view === "diff"}
|
|
271
258
|
>
|
|
272
259
|
Diff
|
|
273
260
|
</sp-action-button>
|
|
274
261
|
`}
|
|
275
|
-
${!this.hasActual
|
|
276
|
-
? nothing
|
|
277
|
-
: html `
|
|
262
|
+
${!this.hasActual ? nothing : html`
|
|
278
263
|
<sp-action-button
|
|
279
264
|
value="actual"
|
|
280
|
-
?selected=${this.view ===
|
|
265
|
+
?selected=${this.view === "actual"}
|
|
281
266
|
>
|
|
282
267
|
Actual
|
|
283
268
|
</sp-action-button>
|
|
284
269
|
`}
|
|
285
|
-
${!this.hasBaseline
|
|
286
|
-
? nothing
|
|
287
|
-
: html `
|
|
270
|
+
${!this.hasBaseline ? nothing : html`
|
|
288
271
|
<sp-action-button
|
|
289
272
|
value="baseline"
|
|
290
|
-
?selected=${this.view ===
|
|
273
|
+
?selected=${this.view === "baseline"}
|
|
291
274
|
>
|
|
292
275
|
Baseline
|
|
293
276
|
</sp-action-button>
|
|
@@ -312,17 +295,17 @@ export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
|
312
295
|
</sp-action-button>
|
|
313
296
|
</sp-action-group>
|
|
314
297
|
`;
|
|
298
|
+
}
|
|
299
|
+
updated(changes) {
|
|
300
|
+
if (changes.has("zoom")) {
|
|
301
|
+
let zoom = Math.min(this.zoom, 2);
|
|
302
|
+
zoom = Math.min(zoom, 0.5);
|
|
303
|
+
this.style.setProperty("--zoom-level", `${this.zoom}`);
|
|
315
304
|
}
|
|
316
|
-
|
|
317
|
-
if (changes.has('zoom')) {
|
|
318
|
-
let zoom = Math.min(this.zoom, 2);
|
|
319
|
-
zoom = Math.min(zoom, 0.5);
|
|
320
|
-
this.style.setProperty('--zoom-level', `${this.zoom}`);
|
|
321
|
-
}
|
|
322
|
-
}
|
|
305
|
+
}
|
|
323
306
|
}
|
|
324
307
|
VrtCompare.styles = [
|
|
325
|
-
|
|
308
|
+
css`
|
|
326
309
|
:host {
|
|
327
310
|
display: grid;
|
|
328
311
|
max-width: 100%;
|
|
@@ -400,15 +383,15 @@ VrtCompare.styles = [
|
|
|
400
383
|
z-index: 1;
|
|
401
384
|
}
|
|
402
385
|
`,
|
|
403
|
-
|
|
386
|
+
bodyStyles
|
|
404
387
|
];
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
], VrtCompare.prototype, "view",
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
], VrtCompare.prototype, "zoom",
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
], VrtCompare.prototype, "imagesLoaded",
|
|
414
|
-
//# sourceMappingURL=VrtCompare.js.map
|
|
388
|
+
__decorateClass([
|
|
389
|
+
property()
|
|
390
|
+
], VrtCompare.prototype, "view", 2);
|
|
391
|
+
__decorateClass([
|
|
392
|
+
property({ type: Number })
|
|
393
|
+
], VrtCompare.prototype, "zoom", 2);
|
|
394
|
+
__decorateClass([
|
|
395
|
+
property({ type: Boolean, attribute: false })
|
|
396
|
+
], VrtCompare.prototype, "imagesLoaded", 2);
|
|
397
|
+
//# sourceMappingURL=VrtCompare.js.map
|
package/src/VrtCompare.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"file":"VrtCompare.js","sourceRoot":"","sources":["VrtCompare.ts"],"names":[],"mappings":"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","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"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["VrtCompare.ts"],
|
|
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": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/index.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.ts"],
|
|
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\nexport * from './VrtCompare.dev.js'\n"],
|
|
5
|
+
"mappings": "AAYA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,13 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
export * from './VrtCompare.js';
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export * from "./VrtCompare.js";
|
|
2
|
+
//# sourceMappingURL=index.js.map
|