Commit e21e1ae0 authored by Tom Quirk's avatar Tom Quirk

Remove redundant 'presentationContainer' ref

presentationContainer was found to be redundant and
unnecssary
parent c590762c
...@@ -102,8 +102,8 @@ export default { ...@@ -102,8 +102,8 @@ export default {
this.overlayPosition = {}; this.overlayPosition = {};
} }
const { presentationContainer } = this.$refs; const { presentationViewport } = this.$refs;
if (!presentationContainer) return; if (!presentationViewport) return;
// default to center // default to center
this.overlayPosition = { this.overlayPosition = {
...@@ -112,10 +112,10 @@ export default { ...@@ -112,10 +112,10 @@ export default {
}; };
// if the overlay overflows, then don't center // if the overlay overflows, then don't center
if (this.overlayDimensions.width > presentationContainer.offsetWidth) { if (this.overlayDimensions.width > presentationViewport.offsetWidth) {
this.overlayPosition.left = '0'; this.overlayPosition.left = '0';
} }
if (this.overlayDimensions.height > presentationContainer.offsetHeight) { if (this.overlayDimensions.height > presentationViewport.offsetHeight) {
this.overlayPosition.top = '0'; this.overlayPosition.top = '0';
} }
}, },
...@@ -243,12 +243,12 @@ export default { ...@@ -243,12 +243,12 @@ export default {
this.isDraggingDesign = false; this.isDraggingDesign = false;
}, },
isDesignOverflowing() { isDesignOverflowing() {
const { presentationContainer } = this.$refs; const { presentationViewport } = this.$refs;
if (!presentationContainer) return false; if (!presentationViewport) return false;
return ( return (
presentationContainer.scrollWidth > presentationContainer.offsetWidth || presentationViewport.scrollWidth > presentationViewport.offsetWidth ||
presentationContainer.scrollHeight > presentationContainer.offsetHeight presentationViewport.scrollHeight > presentationViewport.offsetHeight
); );
}, },
}, },
...@@ -269,10 +269,7 @@ export default { ...@@ -269,10 +269,7 @@ export default {
@touchend="onPresentationMouseup" @touchend="onPresentationMouseup"
@touchcancel="onPresentationMouseup" @touchcancel="onPresentationMouseup"
> >
<div <div class="h-100 w-100 d-flex align-items-center position-relative">
ref="presentationContainer"
class="h-100 w-100 d-flex align-items-center position-relative"
>
<design-image <design-image
v-if="image" v-if="image"
:image="image" :image="image"
......
...@@ -216,10 +216,8 @@ describe('Design management design presentation component', () => { ...@@ -216,10 +216,8 @@ describe('Design management design presentation component', () => {
}); });
it('sets overlay position correctly when overlay is smaller than viewport', () => { it('sets overlay position correctly when overlay is smaller than viewport', () => {
jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetWidth', 'get').mockReturnValue(200); jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get').mockReturnValue(200);
jest jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get').mockReturnValue(200);
.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetHeight', 'get')
.mockReturnValue(200);
wrapper.vm.setOverlayPosition(); wrapper.vm.setOverlayPosition();
expect(wrapper.vm.overlayPosition).toEqual({ expect(wrapper.vm.overlayPosition).toEqual({
...@@ -229,10 +227,8 @@ describe('Design management design presentation component', () => { ...@@ -229,10 +227,8 @@ describe('Design management design presentation component', () => {
}); });
it('sets overlay position correctly when overlay width is larger than viewports', () => { it('sets overlay position correctly when overlay width is larger than viewports', () => {
jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetWidth', 'get').mockReturnValue(50); jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get').mockReturnValue(50);
jest jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get').mockReturnValue(200);
.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetHeight', 'get')
.mockReturnValue(200);
wrapper.vm.setOverlayPosition(); wrapper.vm.setOverlayPosition();
expect(wrapper.vm.overlayPosition).toEqual({ expect(wrapper.vm.overlayPosition).toEqual({
...@@ -242,8 +238,8 @@ describe('Design management design presentation component', () => { ...@@ -242,8 +238,8 @@ describe('Design management design presentation component', () => {
}); });
it('sets overlay position correctly when overlay height is larger than viewports', () => { it('sets overlay position correctly when overlay height is larger than viewports', () => {
jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetWidth', 'get').mockReturnValue(200); jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetWidth', 'get').mockReturnValue(200);
jest.spyOn(wrapper.vm.$refs.presentationContainer, 'offsetHeight', 'get').mockReturnValue(50); jest.spyOn(wrapper.vm.$refs.presentationViewport, 'offsetHeight', 'get').mockReturnValue(50);
wrapper.vm.setOverlayPosition(); wrapper.vm.setOverlayPosition();
expect(wrapper.vm.overlayPosition).toEqual({ expect(wrapper.vm.overlayPosition).toEqual({
...@@ -405,7 +401,7 @@ describe('Design management design presentation component', () => { ...@@ -405,7 +401,7 @@ describe('Design management design presentation component', () => {
`('sets lastDragPosition when design $scenario', ({ width, height }) => { `('sets lastDragPosition when design $scenario', ({ width, height }) => {
createComponent(); createComponent();
mockRefDimensions( mockRefDimensions(
wrapper.vm.$refs.presentationContainer, wrapper.vm.$refs.presentationViewport,
{ width: 100, height: 100 }, { width: 100, height: 100 },
{ width, height }, { width, height },
); );
...@@ -424,7 +420,7 @@ describe('Design management design presentation component', () => { ...@@ -424,7 +420,7 @@ describe('Design management design presentation component', () => {
createComponent({}, { lastDragPosition }); createComponent({}, { lastDragPosition });
mockRefDimensions( mockRefDimensions(
wrapper.vm.$refs.presentationContainer, wrapper.vm.$refs.presentationViewport,
{ width: 100, height: 100 }, { width: 100, height: 100 },
{ width: 50, height: 50 }, { width: 50, height: 50 },
); );
...@@ -451,7 +447,7 @@ describe('Design management design presentation component', () => { ...@@ -451,7 +447,7 @@ describe('Design management design presentation component', () => {
// mock a design that overflows // mock a design that overflows
mockRefDimensions( mockRefDimensions(
wrapper.vm.$refs.presentationContainer, wrapper.vm.$refs.presentationViewport,
{ width: 10, height: 10 }, { width: 10, height: 10 },
{ width: 20, height: 20 }, { width: 20, height: 20 },
0, 0,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment