@spectrum-web-components/vrt-compare 0.2.0-slim.10 → 0.2.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 +6 -55
- package/onion-skinner.dev.js +3 -0
- package/onion-skinner.dev.js.map +7 -0
- package/onion-skinner.js +2 -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 +5 -63
- 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 +44 -247
- 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 +2 -14
- package/vrt-compare.js.map +7 -1
- package/onion-skinner.d.ts +0 -6
- package/src/OnionSkinner.d.ts +0 -17
- package/src/VrtCompare.d.ts +0 -44
- package/src/index.d.ts +0 -1
- package/vrt-compare.d.ts +0 -6
package/src/VrtCompare.js
CHANGED
|
@@ -1,199 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
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
|
-
import { __decorate } from "tslib";
|
|
13
|
-
import { css, html, nothing, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
-
import { property } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
|
-
import { ObserveSlotPresence } from '@spectrum-web-components/shared';
|
|
16
|
-
import bodyStyles from '@spectrum-web-components/styles/body.js';
|
|
17
|
-
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
18
|
-
import '@spectrum-web-components/action-group/sp-action-group.js';
|
|
19
|
-
import '@spectrum-web-components/split-view/sp-split-view.js';
|
|
20
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
|
|
21
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';
|
|
22
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js';
|
|
23
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js';
|
|
24
|
-
import '@spectrum-web-components/action-bar/sp-action-bar.js';
|
|
25
|
-
import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
|
|
26
|
-
import '../onion-skinner.js';
|
|
27
|
-
export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
28
|
-
'[slot="actual"]',
|
|
29
|
-
'[slot="baseline"]',
|
|
30
|
-
'[slot="diff"]',
|
|
31
|
-
]) {
|
|
32
|
-
constructor() {
|
|
33
|
-
super(...arguments);
|
|
34
|
-
this.view = 'scrubber';
|
|
35
|
-
this.zoom = 1;
|
|
36
|
-
this.imagesLoaded = false;
|
|
37
|
-
this._loadingImages = false;
|
|
38
|
-
}
|
|
39
|
-
get hasActual() {
|
|
40
|
-
return this.getSlotContentPresence('[slot="actual"]');
|
|
41
|
-
}
|
|
42
|
-
get hasBaseline() {
|
|
43
|
-
return this.getSlotContentPresence('[slot="baseline"]');
|
|
44
|
-
}
|
|
45
|
-
get hasDiff() {
|
|
46
|
-
return this.getSlotContentPresence('[slot="diff"]');
|
|
47
|
-
}
|
|
48
|
-
get canCompare() {
|
|
49
|
-
return this.hasActual && this.hasBaseline;
|
|
50
|
-
}
|
|
51
|
-
handleChange(event) {
|
|
52
|
-
const view = event.target.selected[0];
|
|
53
|
-
if (view) {
|
|
54
|
-
this.view = view;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
handleZoomIn() {
|
|
58
|
-
this.zoom += 0.1;
|
|
59
|
-
}
|
|
60
|
-
handleZoomClear() {
|
|
61
|
-
this.zoom = 1;
|
|
62
|
-
}
|
|
63
|
-
handleZoomOut() {
|
|
64
|
-
this.zoom -= 0.1;
|
|
65
|
-
}
|
|
66
|
-
get error() {
|
|
67
|
-
return html `
|
|
1
|
+
var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(c,i,t,a)=>{for(var s=a>1?void 0:a?h(i,t):i,o=c.length-1,r;o>=0;o--)(r=c[o])&&(s=(a?r(i,t,s):r(s))||s);return a&&s&&p(i,t,s),s};import{css as u,html as e,nothing as n,SpectrumElement as m}from"@spectrum-web-components/base";import{property as d}from"@spectrum-web-components/base/src/decorators.js";import{ObserveSlotPresence as g}from"@spectrum-web-components/shared";import b from"@spectrum-web-components/styles/body.js";import"@spectrum-web-components/action-button/sp-action-button.js";import"@spectrum-web-components/action-group/sp-action-group.js";import"@spectrum-web-components/split-view/sp-split-view.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js";import"@spectrum-web-components/action-bar/sp-action-bar.js";import"@spectrum-web-components/progress-circle/sp-progress-circle.js";import"../onion-skinner.js";export class VrtCompare extends g(m,['[slot="actual"]','[slot="baseline"]','[slot="diff"]']){constructor(){super(...arguments);this.view="scrubber";this.zoom=1;this.imagesLoaded=!1;this._loadingImages=!1}get hasActual(){return this.getSlotContentPresence('[slot="actual"]')}get hasBaseline(){return this.getSlotContentPresence('[slot="baseline"]')}get hasDiff(){return this.getSlotContentPresence('[slot="diff"]')}get canCompare(){return this.hasActual&&this.hasBaseline}handleChange(i){const t=i.target.selected[0];t&&(this.view=t)}handleZoomIn(){this.zoom+=.1}handleZoomClear(){this.zoom=1}handleZoomOut(){this.zoom-=.1}get error(){return e`
|
|
68
2
|
<sp-icon-alert class="icon" size="xl"></sp-icon-alert>
|
|
69
3
|
<p class="spectrum-Body spectrum-Body--sizeXL">
|
|
70
4
|
Please be sure to supply some combination of actual, baseline,
|
|
71
5
|
and diff screenshots for review.
|
|
72
6
|
</p>
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
get actual() {
|
|
76
|
-
return html `
|
|
7
|
+
`}get actual(){return e`
|
|
77
8
|
<div class="view actual">
|
|
78
9
|
<slot name="actual"></slot>
|
|
79
10
|
</div>
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
get baseline() {
|
|
83
|
-
return html `
|
|
11
|
+
`}get baseline(){return e`
|
|
84
12
|
<div class="view baseline">
|
|
85
13
|
<slot name="baseline"></slot>
|
|
86
14
|
</div>
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
get diff() {
|
|
90
|
-
return html `
|
|
15
|
+
`}get diff(){return e`
|
|
91
16
|
<div class="view diff">
|
|
92
17
|
<slot name="diff"></slot>
|
|
93
18
|
</div>
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
get scrubber() {
|
|
97
|
-
return html `
|
|
19
|
+
`}get scrubber(){return e`
|
|
98
20
|
<sp-split-view resizable primary-size="50%">
|
|
99
21
|
${this.baseline} ${this.actual}
|
|
100
22
|
</sp-split-view>
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
get sidebyside() {
|
|
104
|
-
return html `
|
|
23
|
+
`}get sidebyside(){return e`
|
|
105
24
|
${this.baseline} ${this.actual}
|
|
106
|
-
|
|
107
|
-
}
|
|
108
|
-
get onion() {
|
|
109
|
-
return html `
|
|
25
|
+
`}get onion(){return e`
|
|
110
26
|
<onion-skinner>
|
|
111
27
|
<slot name="baseline"></slot>
|
|
112
28
|
<slot name="actual"></slot>
|
|
113
29
|
</onion-skinner>
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
get renderView() {
|
|
117
|
-
switch (this.view) {
|
|
118
|
-
case 'error':
|
|
119
|
-
return this.error;
|
|
120
|
-
case 'actual':
|
|
121
|
-
return this.actual;
|
|
122
|
-
case 'baseline':
|
|
123
|
-
return this.baseline;
|
|
124
|
-
case 'diff':
|
|
125
|
-
return this.diff;
|
|
126
|
-
case 'onion':
|
|
127
|
-
return this.onion;
|
|
128
|
-
case 'sidebyside':
|
|
129
|
-
return this.sidebyside;
|
|
130
|
-
case 'scrubber':
|
|
131
|
-
default:
|
|
132
|
-
return this.scrubber;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
get viewFallback() {
|
|
136
|
-
if (this.canCompare) {
|
|
137
|
-
return 'scrubber';
|
|
138
|
-
}
|
|
139
|
-
else if (this.hasActual) {
|
|
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;
|
|
156
|
-
}
|
|
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;
|
|
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;
|
|
180
|
-
}
|
|
181
|
-
shouldUpdate() {
|
|
182
|
-
if (this.view === 'error' ||
|
|
183
|
-
(this.view === 'actual' && !this.hasActual) ||
|
|
184
|
-
(this.view === 'baseline' && !this.hasBaseline) ||
|
|
185
|
-
(this.view === 'diff' && !this.hasDiff) ||
|
|
186
|
-
((this.view === 'onion' ||
|
|
187
|
-
this.view === 'sidebyside' ||
|
|
188
|
-
this.view === 'scrubber') &&
|
|
189
|
-
!this.canCompare)) {
|
|
190
|
-
this.view = this.viewFallback;
|
|
191
|
-
}
|
|
192
|
-
return true;
|
|
193
|
-
}
|
|
194
|
-
render() {
|
|
195
|
-
if (this._loadingImages) {
|
|
196
|
-
return html `
|
|
30
|
+
`}get renderView(){switch(this.view){case"error":return this.error;case"actual":return this.actual;case"baseline":return this.baseline;case"diff":return this.diff;case"onion":return this.onion;case"sidebyside":return this.sidebyside;case"scrubber":default:return this.scrubber}}get viewFallback(){return this.canCompare?"scrubber":this.hasActual?"actual":this.hasBaseline?"baseline":this.hasDiff?"diff":"error"}async prepImages(i){const t=i.target;if(this._loadingImages||!t.assignedNodes().length)return;this._loadingImages=!0,this.imagesLoaded=!1;const a=[...this.querySelectorAll("img")];if(!a.length){this.imagesLoaded=!0,this._loadingImages=!1;return}const s=a.map(o=>o.naturalWidth?(this.style.setProperty("--image-width",`${o.naturalWidth}px`),Promise.resolve()):new Promise(r=>{o.addEventListener("load",()=>{this.style.setProperty("--image-width",`${o.naturalWidth}px`),r(!0)})}));await Promise.all(s),this.imagesLoaded=!0,this._loadingImages=!1}shouldUpdate(){return(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)&&(this.view=this.viewFallback),!0}render(){return this._loadingImages?e`
|
|
197
31
|
<sp-progress-circle indeterminate></sp-progress-circle>
|
|
198
32
|
<slot
|
|
199
33
|
name="actual"
|
|
@@ -206,98 +40,68 @@ export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
|
206
40
|
hidden
|
|
207
41
|
></slot>
|
|
208
42
|
<slot name="diff" @slotchange=${this.prepImages} hidden></slot>
|
|
209
|
-
|
|
210
|
-
}
|
|
211
|
-
if (!this.imagesLoaded) {
|
|
212
|
-
return html `
|
|
213
|
-
<p class="spectrum-Body spectrum-Body--sizeXL">
|
|
214
|
-
Choose a test to review on the left...
|
|
215
|
-
</p>
|
|
216
|
-
<slot
|
|
217
|
-
name="actual"
|
|
218
|
-
@slotchange=${this.prepImages}
|
|
219
|
-
hidden
|
|
220
|
-
></slot>
|
|
221
|
-
<slot
|
|
222
|
-
name="baseline"
|
|
223
|
-
@slotchange=${this.prepImages}
|
|
224
|
-
hidden
|
|
225
|
-
></slot>
|
|
226
|
-
<slot name="diff" @slotchange=${this.prepImages} hidden></slot>
|
|
227
|
-
`;
|
|
228
|
-
}
|
|
229
|
-
return html `
|
|
43
|
+
`:this.imagesLoaded?e`
|
|
230
44
|
<sp-action-group
|
|
231
45
|
selects="single"
|
|
232
46
|
compact
|
|
233
47
|
emphasized
|
|
234
48
|
@change=${this.handleChange}
|
|
235
49
|
>
|
|
236
|
-
${this.view
|
|
237
|
-
? nothing
|
|
238
|
-
: html `
|
|
50
|
+
${this.view!=="error"?n:e`
|
|
239
51
|
<sp-action-button value="error" disabled>
|
|
240
52
|
Error
|
|
241
53
|
</sp-action-button>
|
|
242
54
|
`}
|
|
243
|
-
${
|
|
244
|
-
? nothing
|
|
245
|
-
: html `
|
|
55
|
+
${this.canCompare?e`
|
|
246
56
|
<sp-action-button
|
|
247
57
|
value="scrubber"
|
|
248
|
-
?selected=${this.view
|
|
58
|
+
?selected=${this.view==="scrubber"}
|
|
249
59
|
>
|
|
250
60
|
Scrubber
|
|
251
61
|
</sp-action-button>
|
|
252
62
|
<sp-action-button
|
|
253
63
|
value="onion"
|
|
254
|
-
?selected=${this.view
|
|
64
|
+
?selected=${this.view==="onion"}
|
|
255
65
|
>
|
|
256
66
|
Onion skin
|
|
257
67
|
</sp-action-button>
|
|
258
68
|
<sp-action-button
|
|
259
69
|
value="sidebyside"
|
|
260
|
-
?selected=${this.view
|
|
70
|
+
?selected=${this.view==="sidebyside"}
|
|
261
71
|
>
|
|
262
72
|
Side by side
|
|
263
73
|
</sp-action-button>
|
|
264
|
-
|
|
265
|
-
${
|
|
266
|
-
? nothing
|
|
267
|
-
: html `
|
|
74
|
+
`:n}
|
|
75
|
+
${this.hasDiff?e`
|
|
268
76
|
<sp-action-button
|
|
269
77
|
value="diff"
|
|
270
|
-
?selected=${this.view
|
|
78
|
+
?selected=${this.view==="diff"}
|
|
271
79
|
>
|
|
272
80
|
Diff
|
|
273
81
|
</sp-action-button>
|
|
274
|
-
|
|
275
|
-
${
|
|
276
|
-
? nothing
|
|
277
|
-
: html `
|
|
82
|
+
`:n}
|
|
83
|
+
${this.hasActual?e`
|
|
278
84
|
<sp-action-button
|
|
279
85
|
value="actual"
|
|
280
|
-
?selected=${this.view
|
|
86
|
+
?selected=${this.view==="actual"}
|
|
281
87
|
>
|
|
282
88
|
Actual
|
|
283
89
|
</sp-action-button>
|
|
284
|
-
|
|
285
|
-
${
|
|
286
|
-
? nothing
|
|
287
|
-
: html `
|
|
90
|
+
`:n}
|
|
91
|
+
${this.hasBaseline?e`
|
|
288
92
|
<sp-action-button
|
|
289
93
|
value="baseline"
|
|
290
|
-
?selected=${this.view
|
|
94
|
+
?selected=${this.view==="baseline"}
|
|
291
95
|
>
|
|
292
96
|
Baseline
|
|
293
97
|
</sp-action-button>
|
|
294
|
-
|
|
98
|
+
`:n}
|
|
295
99
|
</sp-action-group>
|
|
296
100
|
<div class="review ${this.view}">${this.renderView}</div>
|
|
297
101
|
<sp-action-group compact class="zoom-controls">
|
|
298
102
|
<sp-action-button
|
|
299
103
|
@click=${this.handleZoomOut}
|
|
300
|
-
?disabled=${this.zoom
|
|
104
|
+
?disabled=${this.zoom<=.5}
|
|
301
105
|
>
|
|
302
106
|
<sp-icon-zoom-out slot="icon"></sp-icon-zoom-out>
|
|
303
107
|
</sp-action-button>
|
|
@@ -306,23 +110,27 @@ export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
|
|
|
306
110
|
</sp-action-button>
|
|
307
111
|
<sp-action-button
|
|
308
112
|
@click=${this.handleZoomIn}
|
|
309
|
-
?disabled=${this.zoom
|
|
113
|
+
?disabled=${this.zoom>=2}
|
|
310
114
|
>
|
|
311
115
|
<sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
|
|
312
116
|
</sp-action-button>
|
|
313
117
|
</sp-action-group>
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
118
|
+
`:e`
|
|
119
|
+
<p class="spectrum-Body spectrum-Body--sizeXL">
|
|
120
|
+
Choose a test to review on the left...
|
|
121
|
+
</p>
|
|
122
|
+
<slot
|
|
123
|
+
name="actual"
|
|
124
|
+
@slotchange=${this.prepImages}
|
|
125
|
+
hidden
|
|
126
|
+
></slot>
|
|
127
|
+
<slot
|
|
128
|
+
name="baseline"
|
|
129
|
+
@slotchange=${this.prepImages}
|
|
130
|
+
hidden
|
|
131
|
+
></slot>
|
|
132
|
+
<slot name="diff" @slotchange=${this.prepImages} hidden></slot>
|
|
133
|
+
`}updated(i){if(i.has("zoom")){let t=Math.min(this.zoom,2);t=Math.min(t,.5),this.style.setProperty("--zoom-level",`${this.zoom}`)}}}VrtCompare.styles=[u`
|
|
326
134
|
:host {
|
|
327
135
|
display: grid;
|
|
328
136
|
max-width: 100%;
|
|
@@ -399,16 +207,5 @@ VrtCompare.styles = [
|
|
|
399
207
|
);
|
|
400
208
|
z-index: 1;
|
|
401
209
|
}
|
|
402
|
-
`,
|
|
403
|
-
|
|
404
|
-
];
|
|
405
|
-
__decorate([
|
|
406
|
-
property()
|
|
407
|
-
], VrtCompare.prototype, "view", void 0);
|
|
408
|
-
__decorate([
|
|
409
|
-
property({ type: Number })
|
|
410
|
-
], VrtCompare.prototype, "zoom", void 0);
|
|
411
|
-
__decorate([
|
|
412
|
-
property({ type: Boolean, attribute: false })
|
|
413
|
-
], VrtCompare.prototype, "imagesLoaded", void 0);
|
|
414
|
-
//# sourceMappingURL=VrtCompare.js.map
|
|
210
|
+
`,b],l([d()],VrtCompare.prototype,"view",2),l([d({type:Number})],VrtCompare.prototype,"zoom",2),l([d({type:Boolean,attribute:!1})],VrtCompare.prototype,"imagesLoaded",2);
|
|
211
|
+
//# 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 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 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 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 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
|
package/src/index.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
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.js';\n"],
|
|
5
|
+
"mappings": "AAYA",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["vrt-compare.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 { VrtCompare } from './src/VrtCompare.dev.js'\n\ncustomElements.define('vrt-compare', VrtCompare);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vrt-compare': VrtCompare;\n }\n}\n"],
|
|
5
|
+
"mappings": "AAYA;AAEA,eAAe,OAAO,eAAe,UAAU;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/vrt-compare.js
CHANGED
|
@@ -1,14 +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
|
-
import { VrtCompare } from './src/VrtCompare.js';
|
|
13
|
-
customElements.define('vrt-compare', VrtCompare);
|
|
14
|
-
//# sourceMappingURL=vrt-compare.js.map
|
|
1
|
+
import{VrtCompare as e}from"./src/VrtCompare.js";customElements.define("vrt-compare",e);
|
|
2
|
+
//# sourceMappingURL=vrt-compare.js.map
|
package/vrt-compare.js.map
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["vrt-compare.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 { VrtCompare } from './src/VrtCompare.js';\n\ncustomElements.define('vrt-compare', VrtCompare);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vrt-compare': VrtCompare;\n }\n}\n"],
|
|
5
|
+
"mappings": "AAYA,iDAEA,eAAe,OAAO,cAAe,CAAU",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/onion-skinner.d.ts
DELETED
package/src/OnionSkinner.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { SpectrumElement } from '@spectrum-web-components/base';
|
|
2
|
-
import '@spectrum-web-components/slider/sp-slider.js';
|
|
3
|
-
import '@spectrum-web-components/thumbnail/sp-thumbnail.js';
|
|
4
|
-
import '@spectrum-web-components/overlay/sync/overlay-trigger.js';
|
|
5
|
-
import '@spectrum-web-components/tooltip/sp-tooltip.js';
|
|
6
|
-
export declare class OnionSkinner extends SpectrumElement {
|
|
7
|
-
onionLevel: number;
|
|
8
|
-
private assignments;
|
|
9
|
-
private leftThumbnail?;
|
|
10
|
-
private rightThumbnail?;
|
|
11
|
-
private handleOnionInput;
|
|
12
|
-
private handleSlotchange;
|
|
13
|
-
private allLeft;
|
|
14
|
-
private allRight;
|
|
15
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
-
static styles: import("@spectrum-web-components/base").CSSResult[];
|
|
17
|
-
}
|