96 lines
2.6 KiB
JavaScript
96 lines
2.6 KiB
JavaScript
|
import ImageBadge from '../image_badge';
|
||
|
|
import ImageDiff from '../image_diff';
|
||
|
|
import ReplacedImageDiff from '../replaced_image_diff';
|
||
|
|
import ImageFile from '../../commit/image_file';
|
||
|
|
|
||
|
|
export function resizeCoordinatesToImageElement(imageEl, meta) {
|
||
|
|
const { x, y, width, height } = meta;
|
||
|
|
|
||
|
|
const imageWidth = imageEl.width;
|
||
|
|
const imageHeight = imageEl.height;
|
||
|
|
|
||
|
|
const widthRatio = imageWidth / width;
|
||
|
|
const heightRatio = imageHeight / height;
|
||
|
|
|
||
|
|
return {
|
||
|
|
x: Math.round(x * widthRatio),
|
||
|
|
y: Math.round(y * heightRatio),
|
||
|
|
width: imageWidth,
|
||
|
|
height: imageHeight,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export function generateBadgeFromDiscussionDOM(imageFrameEl, discussionEl) {
|
||
|
|
const position = JSON.parse(discussionEl.dataset.position);
|
||
|
|
const firstNoteEl = discussionEl.querySelector('.note');
|
||
|
|
const badge = new ImageBadge({
|
||
|
|
actual: position,
|
||
|
|
imageEl: imageFrameEl.querySelector('img'),
|
||
|
|
noteId: firstNoteEl.id,
|
||
|
|
discussionId: discussionEl.dataset.discussionId,
|
||
|
|
});
|
||
|
|
|
||
|
|
return badge;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function getTargetSelection(event) {
|
||
|
|
const containerEl = event.currentTarget;
|
||
|
|
const imageEl = containerEl.querySelector('img');
|
||
|
|
|
||
|
|
const x = event.offsetX;
|
||
|
|
const y = event.offsetY;
|
||
|
|
|
||
|
|
const width = imageEl.width;
|
||
|
|
const height = imageEl.height;
|
||
|
|
|
||
|
|
const actualWidth = imageEl.naturalWidth;
|
||
|
|
const actualHeight = imageEl.naturalHeight;
|
||
|
|
|
||
|
|
const widthRatio = actualWidth / width;
|
||
|
|
const heightRatio = actualHeight / height;
|
||
|
|
|
||
|
|
// Browser will include the frame as a clickable target,
|
||
|
|
// which would result in potential 1px out of bounds value
|
||
|
|
// This bound the coordinates to inside the frame
|
||
|
|
const normalizedX = Math.max(0, x) && Math.min(x, width);
|
||
|
|
const normalizedY = Math.max(0, y) && Math.min(y, height);
|
||
|
|
|
||
|
|
return {
|
||
|
|
browser: {
|
||
|
|
x: normalizedX,
|
||
|
|
y: normalizedY,
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
},
|
||
|
|
actual: {
|
||
|
|
// Round x, y so that we don't need to deal with decimals
|
||
|
|
x: Math.round(normalizedX * widthRatio),
|
||
|
|
y: Math.round(normalizedY * heightRatio),
|
||
|
|
width: actualWidth,
|
||
|
|
height: actualHeight,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export function initImageDiff(fileEl, canCreateNote, renderCommentBadge) {
|
||
|
|
const options = {
|
||
|
|
canCreateNote,
|
||
|
|
renderCommentBadge,
|
||
|
|
};
|
||
|
|
let diff;
|
||
|
|
|
||
|
|
// ImageFile needs to be invoked before initImageDiff so that badges
|
||
|
|
// can mount to the correct location
|
||
|
|
new ImageFile(fileEl); // eslint-disable-line no-new
|
||
|
|
|
||
|
|
if (fileEl.querySelector('.diff-file .js-single-image')) {
|
||
|
|
diff = new ImageDiff(fileEl, options);
|
||
|
|
diff.init();
|
||
|
|
} else if (fileEl.querySelector('.diff-file .js-replaced-image')) {
|
||
|
|
diff = new ReplacedImageDiff(fileEl, options);
|
||
|
|
diff.init();
|
||
|
|
}
|
||
|
|
|
||
|
|
return diff;
|
||
|
|
}
|