Restored width & height properties
This commit is contained in:
parent
f7df9ddb52
commit
35faecb06b
|
@ -57,6 +57,8 @@ export default {
|
||||||
positionType: IMAGE_DIFF_POSITION_TYPE,
|
positionType: IMAGE_DIFF_POSITION_TYPE,
|
||||||
x: this.diffFileCommentForm.x,
|
x: this.diffFileCommentForm.x,
|
||||||
y: this.diffFileCommentForm.y,
|
y: this.diffFileCommentForm.y,
|
||||||
|
width: this.diffFileCommentForm.width,
|
||||||
|
height: this.diffFileCommentForm.height,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
@ -50,15 +50,39 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(['toggleDiscussion']),
|
...mapActions(['toggleDiscussion']),
|
||||||
...mapActions('diffs', ['openDiffFileCommentForm']),
|
...mapActions('diffs', ['openDiffFileCommentForm']),
|
||||||
getPosition(discussion) {
|
getImageDimensions() {
|
||||||
return {
|
return {
|
||||||
left: `${discussion.position.x}px`,
|
width: this.$parent.width,
|
||||||
top: `${discussion.position.y}px`,
|
height: this.$parent.height,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getPositionForObject(meta) {
|
||||||
|
const { x, y, width, height } = meta;
|
||||||
|
const imageWidth = this.getImageDimensions().width;
|
||||||
|
const imageHeight = this.getImageDimensions().height;
|
||||||
|
const widthRatio = imageWidth / width;
|
||||||
|
const heightRatio = imageHeight / height;
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: Math.round(x * widthRatio),
|
||||||
|
y: Math.round(y * heightRatio),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
getPosition(discussion) {
|
||||||
|
const { x, y } = this.getPositionForObject(discussion.position);
|
||||||
|
|
||||||
|
return {
|
||||||
|
left: `${x}px`,
|
||||||
|
top: `${y}px`,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
clickedImage(x, y) {
|
clickedImage(x, y) {
|
||||||
|
const { width, height } = this.getImageDimensions();
|
||||||
|
|
||||||
this.openDiffFileCommentForm({
|
this.openDiffFileCommentForm({
|
||||||
fileHash: this.fileHash,
|
fileHash: this.fileHash,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
x,
|
x,
|
||||||
y,
|
y,
|
||||||
});
|
});
|
||||||
|
|
|
@ -49,6 +49,8 @@ export function getFormData(params) {
|
||||||
new_line: noteTargetLine ? noteTargetLine.newLine : null,
|
new_line: noteTargetLine ? noteTargetLine.newLine : null,
|
||||||
x: params.x,
|
x: params.x,
|
||||||
y: params.y,
|
y: params.y,
|
||||||
|
width: params.width,
|
||||||
|
height: params.height,
|
||||||
});
|
});
|
||||||
|
|
||||||
const postData = {
|
const postData = {
|
||||||
|
|
|
@ -21,7 +21,7 @@ module Gitlab
|
||||||
end
|
end
|
||||||
|
|
||||||
def complete?
|
def complete?
|
||||||
x && y
|
x && y && width && height
|
||||||
end
|
end
|
||||||
|
|
||||||
def to_h
|
def to_h
|
||||||
|
|
|
@ -62,7 +62,13 @@ describe('DiffContent', () => {
|
||||||
vm.diffFile.oldSha = 'ABC';
|
vm.diffFile.oldSha = 'ABC';
|
||||||
vm.diffFile.viewPath = '';
|
vm.diffFile.viewPath = '';
|
||||||
vm.diffFile.discussions = [{ ...discussionsMockData }];
|
vm.diffFile.discussions = [{ ...discussionsMockData }];
|
||||||
vm.$store.state.diffs.commentForms.push({ fileHash: vm.diffFile.fileHash, x: 10, y: 20 });
|
vm.$store.state.diffs.commentForms.push({
|
||||||
|
fileHash: vm.diffFile.fileHash,
|
||||||
|
x: 10,
|
||||||
|
y: 20,
|
||||||
|
width: 100,
|
||||||
|
height: 200,
|
||||||
|
});
|
||||||
|
|
||||||
vm.$nextTick(done);
|
vm.$nextTick(done);
|
||||||
});
|
});
|
||||||
|
@ -96,6 +102,8 @@ describe('DiffContent', () => {
|
||||||
positionType: 'image',
|
positionType: 'image',
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 20,
|
y: 20,
|
||||||
|
width: 100,
|
||||||
|
height: 200,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,10 +1,14 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
|
import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
|
||||||
import { createStore } from '~/mr_notes/stores';
|
import { createStore } from '~/mr_notes/stores';
|
||||||
import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
|
import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
|
||||||
import { imageDiffDiscussions } from '../mock_data/diff_discussions';
|
import { imageDiffDiscussions } from '../mock_data/diff_discussions';
|
||||||
|
|
||||||
describe('Diffs image diff overlay component', () => {
|
describe('Diffs image diff overlay component', () => {
|
||||||
|
const dimensions = {
|
||||||
|
width: 100,
|
||||||
|
height: 200,
|
||||||
|
};
|
||||||
let Component;
|
let Component;
|
||||||
let vm;
|
let vm;
|
||||||
|
|
||||||
|
@ -13,9 +17,10 @@ describe('Diffs image diff overlay component', () => {
|
||||||
|
|
||||||
extendStore(store);
|
extendStore(store);
|
||||||
|
|
||||||
vm = mountComponentWithStore(Component, {
|
vm = createComponentWithStore(Component, store, {
|
||||||
store,
|
discussions: [...imageDiffDiscussions],
|
||||||
props: { discussions: [...imageDiffDiscussions], fileHash: 'ABC', ...props },
|
fileHash: 'ABC',
|
||||||
|
...props,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -29,12 +34,16 @@ describe('Diffs image diff overlay component', () => {
|
||||||
|
|
||||||
it('renders comment badges', () => {
|
it('renders comment badges', () => {
|
||||||
createComponent();
|
createComponent();
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(2);
|
expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders index of discussion in badge', () => {
|
it('renders index of discussion in badge', () => {
|
||||||
createComponent();
|
createComponent();
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
expect(vm.$el.querySelectorAll('.js-image-badge')[0].textContent.trim()).toBe('1');
|
expect(vm.$el.querySelectorAll('.js-image-badge')[0].textContent.trim()).toBe('1');
|
||||||
expect(vm.$el.querySelectorAll('.js-image-badge')[1].textContent.trim()).toBe('2');
|
expect(vm.$el.querySelectorAll('.js-image-badge')[1].textContent.trim()).toBe('2');
|
||||||
|
@ -42,12 +51,16 @@ describe('Diffs image diff overlay component', () => {
|
||||||
|
|
||||||
it('renders icon when showCommentIcon is true', () => {
|
it('renders icon when showCommentIcon is true', () => {
|
||||||
createComponent({ showCommentIcon: true });
|
createComponent({ showCommentIcon: true });
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
expect(vm.$el.querySelector('.js-image-badge svg')).not.toBe(null);
|
expect(vm.$el.querySelector('.js-image-badge svg')).not.toBe(null);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sets badge comment positions', () => {
|
it('sets badge comment positions', () => {
|
||||||
createComponent();
|
createComponent();
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.left).toBe('10px');
|
expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.left).toBe('10px');
|
||||||
expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.top).toBe('10px');
|
expect(vm.$el.querySelectorAll('.js-image-badge')[0].style.top).toBe('10px');
|
||||||
|
@ -62,12 +75,16 @@ describe('Diffs image diff overlay component', () => {
|
||||||
...imageDiffDiscussions[0],
|
...imageDiffDiscussions[0],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(1);
|
expect(vm.$el.querySelectorAll('.js-image-badge').length).toBe(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('dispatches openDiffFileCommentForm when clcking overlay', () => {
|
it('dispatches openDiffFileCommentForm when clicking overlay', () => {
|
||||||
createComponent({ canComment: true });
|
createComponent({ canComment: true });
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
spyOn(vm.$store, 'dispatch').and.stub();
|
spyOn(vm.$store, 'dispatch').and.stub();
|
||||||
|
|
||||||
|
@ -77,18 +94,24 @@ describe('Diffs image diff overlay component', () => {
|
||||||
fileHash: 'ABC',
|
fileHash: 'ABC',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
|
width: 100,
|
||||||
|
height: 200,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('toggle discussion', () => {
|
describe('toggle discussion', () => {
|
||||||
it('disables buttons when shouldToggleDiscussion is false', () => {
|
it('disables buttons when shouldToggleDiscussion is false', () => {
|
||||||
createComponent({ shouldToggleDiscussion: false });
|
createComponent({ shouldToggleDiscussion: false });
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
expect(vm.$el.querySelector('.js-image-badge').hasAttribute('disabled')).toBe(true);
|
expect(vm.$el.querySelector('.js-image-badge').hasAttribute('disabled')).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('dispatches toggleDiscussion when clicking image badge', () => {
|
it('dispatches toggleDiscussion when clicking image badge', () => {
|
||||||
createComponent();
|
createComponent();
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
|
|
||||||
spyOn(vm.$store, 'dispatch').and.stub();
|
spyOn(vm.$store, 'dispatch').and.stub();
|
||||||
|
|
||||||
|
@ -107,6 +130,8 @@ describe('Diffs image diff overlay component', () => {
|
||||||
y: 10,
|
y: 10,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
spyOn(vm, 'getImageDimensions').and.returnValue(dimensions);
|
||||||
|
vm.$mount();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders comment form badge', () => {
|
it('renders comment form badge', () => {
|
||||||
|
|
|
@ -499,6 +499,8 @@ export const imageDiffDiscussions = [
|
||||||
position: {
|
position: {
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 10,
|
y: 10,
|
||||||
|
width: 100,
|
||||||
|
height: 200,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -506,6 +508,8 @@ export const imageDiffDiscussions = [
|
||||||
position: {
|
position: {
|
||||||
x: 5,
|
x: 5,
|
||||||
y: 5,
|
y: 5,
|
||||||
|
width: 100,
|
||||||
|
height: 200,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
Loading…
Reference in New Issue