Skip to content

Commit fd63b96

Browse files
wxiaoguangwxiaoguang
authored
Refactor imagediff and fix regression bug (#30694)
Fix #30683
1 parent bffbbf5 commit fd63b96

File tree

1 file changed

+102
-102
lines changed

1 file changed

+102
-102
lines changed

‎web_src/js/features/imagediff.js‎

Lines changed: 102 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import $ from 'jquery';
22
import {GET} from '../modules/fetch.js';
3-
import {hideElem, loadElem} from '../utils/dom.js';
3+
import {hideElem, loadElem, queryElemChildren} from '../utils/dom.js';
44
import {parseDom} from '../utils.js';
55

66
function getDefaultSvgBoundsIfUndefined(text, src) {
@@ -38,36 +38,36 @@ function getDefaultSvgBoundsIfUndefined(text, src) {
3838
return null;
3939
}
4040

41-
export function initImageDiff() {
42-
function createContext(image1, image2) {
43-
const size1 = {
44-
width: image1 && image1.width || 0,
45-
height: image1 && image1.height || 0,
46-
};
47-
const size2 = {
48-
width: image2 && image2.width || 0,
49-
height: image2 && image2.height || 0,
50-
};
51-
const max = {
52-
width: Math.max(size2.width, size1.width),
53-
height: Math.max(size2.height, size1.height),
54-
};
55-
56-
return {
57-
$image1: $(image1),
58-
$image2: $(image2),
59-
size1,
60-
size2,
61-
max,
62-
ratio: [
63-
Math.floor(max.width - size1.width) / 2,
64-
Math.floor(max.height - size1.height) / 2,
65-
Math.floor(max.width - size2.width) / 2,
66-
Math.floor(max.height - size2.height) / 2,
67-
],
68-
};
69-
}
41+
function createContext(imageAfter, imageBefore) {
42+
const sizeAfter = {
43+
width: imageAfter?.width || 0,
44+
height: imageAfter?.height || 0,
45+
};
46+
const sizeBefore = {
47+
width: imageBefore?.width || 0,
48+
height: imageBefore?.height || 0,
49+
};
50+
const maxSize = {
51+
width: Math.max(sizeBefore.width, sizeAfter.width),
52+
height: Math.max(sizeBefore.height, sizeAfter.height),
53+
};
54+
55+
return {
56+
imageAfter,
57+
imageBefore,
58+
sizeAfter,
59+
sizeBefore,
60+
maxSize,
61+
ratio: [
62+
Math.floor(maxSize.width - sizeAfter.width) / 2,
63+
Math.floor(maxSize.height - sizeAfter.height) / 2,
64+
Math.floor(maxSize.width - sizeBefore.width) / 2,
65+
Math.floor(maxSize.height - sizeBefore.height) / 2,
66+
],
67+
};
68+
}
7069

70+
export function initImageDiff() {
7171
$('.image-diff:not([data-image-diff-loaded])').each(async function() {
7272
const $container = $(this);
7373
this.setAttribute('data-image-diff-loaded', 'true');
@@ -116,94 +116,96 @@ export function initImageDiff() {
116116
initOverlay(createContext($imagesAfter[2], $imagesBefore[2]));
117117
}
118118

119-
this.querySelector(':scope > .image-diff-tabs')?.classList.remove('is-loading');
119+
queryElemChildren(this, '.image-diff-tabs', (el) => el.classList.remove('is-loading'));
120120

121121
function initSideBySide(container, sizes) {
122122
let factor = 1;
123-
if (sizes.max.width > (diffContainerWidth - 24) / 2) {
124-
factor = (diffContainerWidth - 24) / 2 / sizes.max.width;
123+
if (sizes.maxSize.width > (diffContainerWidth - 24) / 2) {
124+
factor = (diffContainerWidth - 24) / 2 / sizes.maxSize.width;
125125
}
126126

127-
const widthChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalWidth !== sizes.$image2[0].naturalWidth;
128-
const heightChanged = sizes.$image1.length !== 0 && sizes.$image2.length !== 0 && sizes.$image1[0].naturalHeight !== sizes.$image2[0].naturalHeight;
129-
if (sizes.$image1?.length) {
127+
const widthChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalWidth !== sizes.imageBefore.naturalWidth;
128+
const heightChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalHeight !== sizes.imageBefore.naturalHeight;
129+
if (sizes.imageAfter) {
130130
const boundsInfoAfterWidth = container.querySelector('.bounds-info-after .bounds-info-width');
131-
boundsInfoAfterWidth.textContent = `${sizes.$image1[0].naturalWidth}px`;
132-
if (widthChanged) boundsInfoAfterWidth.classList.add('green');
133-
131+
if (boundsInfoAfterWidth) {
132+
boundsInfoAfterWidth.textContent = `${sizes.imageAfter.naturalWidth}px`;
133+
boundsInfoAfterWidth.classList.toggle('green', widthChanged);
134+
}
134135
const boundsInfoAfterHeight = container.querySelector('.bounds-info-after .bounds-info-height');
135-
boundsInfoAfterHeight.textContent = `${sizes.$image1[0].naturalHeight}px`;
136-
if (heightChanged) boundsInfoAfterHeight.classList.add('green');
136+
if (boundsInfoAfterHeight) {
137+
boundsInfoAfterHeight.textContent = `${sizes.imageAfter.naturalHeight}px`;
138+
boundsInfoAfterHeight.classList.toggle('green', heightChanged);
139+
}
137140
}
138141

139-
if (sizes.$image2?.length) {
142+
if (sizes.imageBefore) {
140143
const boundsInfoBeforeWidth = container.querySelector('.bounds-info-before .bounds-info-width');
141-
boundsInfoBeforeWidth.textContent = `${sizes.$image2[0].naturalWidth}px`;
142-
if (widthChanged) boundsInfoBeforeWidth.classList.add('red');
143-
144+
if (boundsInfoBeforeWidth) {
145+
boundsInfoBeforeWidth.textContent = `${sizes.imageBefore.naturalWidth}px`;
146+
boundsInfoBeforeWidth.classList.toggle('red', widthChanged);
147+
}
144148
const boundsInfoBeforeHeight = container.querySelector('.bounds-info-before .bounds-info-height');
145-
boundsInfoBeforeHeight.textContent = `${sizes.$image2[0].naturalHeight}px`;
146-
if (heightChanged) boundsInfoBeforeHeight.classList.add('red');
149+
if (boundsInfoBeforeHeight) {
150+
boundsInfoBeforeHeight.textContent = `${sizes.imageBefore.naturalHeight}px`;
151+
boundsInfoBeforeHeight.classList.add('red', heightChanged);
152+
}
147153
}
148154

149-
const image1 = sizes.$image1[0];
150-
if (image1) {
151-
const container = image1.parentNode;
152-
image1.style.width = `${sizes.size1.width * factor}px`;
153-
image1.style.height = `${sizes.size1.height * factor}px`;
155+
if (sizes.imageAfter) {
156+
const container = sizes.imageAfter.parentNode;
157+
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
158+
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
154159
container.style.margin = '10px auto';
155-
container.style.width = `${sizes.size1.width * factor + 2}px`;
156-
container.style.height = `${sizes.size1.height * factor + 2}px`;
160+
container.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
161+
container.style.height = `${sizes.sizeAfter.height * factor + 2}px`;
157162
}
158163

159-
const image2 = sizes.$image2[0];
160-
if (image2) {
161-
const container = image2.parentNode;
162-
image2.style.width = `${sizes.size2.width * factor}px`;
163-
image2.style.height = `${sizes.size2.height * factor}px`;
164+
if (sizes.imageBefore) {
165+
const container = sizes.imageBefore.parentNode;
166+
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
167+
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
164168
container.style.margin = '10px auto';
165-
container.style.width = `${sizes.size2.width * factor + 2}px`;
166-
container.style.height = `${sizes.size2.height * factor + 2}px`;
169+
container.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
170+
container.style.height = `${sizes.sizeBefore.height * factor + 2}px`;
167171
}
168172
}
169173

170174
function initSwipe(sizes) {
171175
let factor = 1;
172-
if (sizes.max.width > diffContainerWidth - 12) {
173-
factor = (diffContainerWidth - 12) / sizes.max.width;
176+
if (sizes.maxSize.width > diffContainerWidth - 12) {
177+
factor = (diffContainerWidth - 12) / sizes.maxSize.width;
174178
}
175179

176-
const image1 = sizes.$image1[0];
177-
if (image1) {
178-
const container = image1.parentNode;
180+
if (sizes.imageAfter) {
181+
const container = sizes.imageAfter.parentNode;
179182
const swipeFrame = container.parentNode;
180-
image1.style.width = `${sizes.size1.width * factor}px`;
181-
image1.style.height = `${sizes.size1.height * factor}px`;
183+
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
184+
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
182185
container.style.margin = `0px ${sizes.ratio[0] * factor}px`;
183-
container.style.width = `${sizes.size1.width * factor + 2}px`;
184-
container.style.height = `${sizes.size1.height * factor + 2}px`;
186+
container.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
187+
container.style.height = `${sizes.sizeAfter.height * factor + 2}px`;
185188
swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`;
186-
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
189+
swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`;
187190
}
188191

189-
const image2 = sizes.$image2[0];
190-
if (image2) {
191-
const container = image2.parentNode;
192+
if (sizes.imageBefore) {
193+
const container = sizes.imageBefore.parentNode;
192194
const swipeFrame = container.parentNode;
193-
image2.style.width = `${sizes.size2.width * factor}px`;
194-
image2.style.height = `${sizes.size2.height * factor}px`;
195+
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
196+
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
195197
container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
196-
container.style.width = `${sizes.size2.width * factor + 2}px`;
197-
container.style.height = `${sizes.size2.height * factor + 2}px`;
198-
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
199-
swipeFrame.style.height = `${sizes.max.height * factor + 2}px`;
198+
container.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
199+
container.style.height = `${sizes.sizeBefore.height * factor + 2}px`;
200+
swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`;
201+
swipeFrame.style.height = `${sizes.maxSize.height * factor + 2}px`;
200202
}
201203

202204
// extra height for inner "position: absolute" elements
203205
const swipe = $container.find('.diff-swipe')[0];
204206
if (swipe) {
205-
swipe.style.width = `${sizes.max.width * factor + 2}px`;
206-
swipe.style.height = `${sizes.max.height * factor + 30}px`;
207+
swipe.style.width = `${sizes.maxSize.width * factor + 2}px`;
208+
swipe.style.height = `${sizes.maxSize.height * factor + 30}px`;
207209
}
208210

209211
$container.find('.swipe-bar').on('mousedown', function(e) {
@@ -229,39 +231,37 @@ export function initImageDiff() {
229231

230232
function initOverlay(sizes) {
231233
let factor = 1;
232-
if (sizes.max.width > diffContainerWidth - 12) {
233-
factor = (diffContainerWidth - 12) / sizes.max.width;
234+
if (sizes.maxSize.width > diffContainerWidth - 12) {
235+
factor = (diffContainerWidth - 12) / sizes.maxSize.width;
234236
}
235237

236-
const image1 = sizes.$image1[0];
237-
if (image1) {
238-
const container = image1.parentNode;
239-
image1.style.width = `${sizes.size1.width * factor}px`;
240-
image1.style.height = `${sizes.size1.height * factor}px`;
238+
if (sizes.imageAfter) {
239+
const container = sizes.imageAfter.parentNode;
240+
sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
241+
sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
241242
container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`;
242-
container.style.width = `${sizes.size1.width * factor + 2}px`;
243-
container.style.height = `${sizes.size1.height * factor + 2}px`;
243+
container.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
244+
container.style.height = `${sizes.sizeAfter.height * factor + 2}px`;
244245
}
245246

246-
const image2 = sizes.$image2[0];
247-
if (image2) {
248-
const container = image2.parentNode;
247+
if (sizes.imageBefore) {
248+
const container = sizes.imageBefore.parentNode;
249249
const overlayFrame = container.parentNode;
250-
image2.style.width = `${sizes.size2.width * factor}px`;
251-
image2.style.height = `${sizes.size2.height * factor}px`;
250+
sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
251+
sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
252252
container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
253-
container.style.width = `${sizes.size2.width * factor + 2}px`;
254-
container.style.height = `${sizes.size2.height * factor + 2}px`;
253+
container.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
254+
container.style.height = `${sizes.sizeBefore.height * factor + 2}px`;
255255

256256
// some inner elements are `position: absolute`, so the container's height must be large enough
257-
overlayFrame.style.width = `${sizes.max.width * factor + 2}px`;
258-
overlayFrame.style.height = `${sizes.max.height * factor + 2}px`;
257+
overlayFrame.style.width = `${sizes.maxSize.width * factor + 2}px`;
258+
overlayFrame.style.height = `${sizes.maxSize.height * factor + 2}px`;
259259
}
260260

261261
const rangeInput = $container[0].querySelector('input[type="range"]');
262262
function updateOpacity() {
263-
if (sizes?.$image1?.[0]) {
264-
sizes.$image1[0].parentNode.style.opacity = `${rangeInput.value / 100}`;
263+
if (sizes.imageAfter) {
264+
sizes.imageAfter.parentNode.style.opacity = `${rangeInput.value / 100}`;
265265
}
266266
}
267267
rangeInput?.addEventListener('input', updateOpacity);

0 commit comments

Comments
 (0)