Skip to content

Commit fff82ca

Browse files
author
Guillaume Chau
committed
refactor(widget): resizable mixin
1 parent 242403f commit fff82ca

File tree

2 files changed

+113
-91
lines changed

2 files changed

+113
-91
lines changed

‎packages/@vue/cli-ui/src/components/Widget.vue

Lines changed: 11 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
import Vue from 'vue'
128128
import Prompts from '../mixins/Prompts'
129129
import Movable from '../mixins/Movable'
130+
import Resizable from '../mixins/Resizable'
130131
131132
import WIDGET_REMOVE from '../graphql/widgetRemove.gql'
132133
import WIDGET_MOVE from '../graphql/widgetMove.gql'
@@ -169,6 +170,11 @@ export default {
169170
Movable({
170171
field: 'widget',
171172
gridSize: GRID_SIZE
173+
}),
174+
175+
Resizable({
176+
field: 'widget',
177+
gridSize: GRID_SIZE
172178
})
173179
],
174180
@@ -186,7 +192,6 @@ export default {
186192
187193
data () {
188194
return {
189-
resizeState: null,
190195
showConfig: false,
191196
injected: {
192197
data: this.widget,
@@ -250,23 +255,6 @@ export default {
250255
}
251256
},
252257
253-
created () {
254-
this.resizeHandles = [
255-
'top-left',
256-
'top',
257-
'top-right',
258-
'right',
259-
'bottom-right',
260-
'bottom',
261-
'bottom-left',
262-
'left'
263-
]
264-
},
265-
266-
beforeDestroy () {
267-
this.removeResizeListeners()
268-
},
269-
270258
methods: {
271259
getPositionStyle (x, y) {
272260
return {
@@ -325,6 +313,10 @@ export default {
325313
})
326314
},
327315
316+
select () {
317+
state.selectedWidget = this.widget
318+
},
319+
328320
async onMoved () {
329321
await this.$apollo.mutate({
330322
mutation: WIDGET_MOVE,
@@ -340,78 +332,7 @@ export default {
340332
})
341333
},
342334
343-
// Resizing
344-
345-
select () {
346-
state.selectedWidget = this.widget
347-
},
348-
349-
removeResizeListeners () {
350-
window.removeEventListener('mousemove', this.onResizeMove)
351-
window.removeEventListener('mouseup', this.onResizeEnd)
352-
},
353-
354-
updateResizeState (e) {
355-
const mouseDeltaX = (e.clientX - this.$_initalMousePosition.x) / 0.7
356-
const mouseDeltaY = (e.clientY - this.$_initalMousePosition.y) / 0.7
357-
const handle = this.$_resizeHandle
358-
let dX = 0
359-
let dY = 0
360-
let dWidth = 0
361-
let dHeight = 0
362-
// TODO
363-
if (handle.includes('right')) {
364-
dWidth = mouseDeltaX
365-
}
366-
if (handle.includes('bottom')) {
367-
dHeight = mouseDeltaY
368-
}
369-
let gridDX = Math.round(dX / GRID_SIZE)
370-
let gridDY = Math.round(dY / GRID_SIZE)
371-
let gridDWidth = Math.round(dWidth / GRID_SIZE)
372-
let gridDHeight = Math.round(dHeight / GRID_SIZE)
373-
if (this.widget.width + gridDWidth < this.widget.definition.minWidth) {
374-
gridDWidth = this.widget.definition.minWidth - this.widget.width
375-
}
376-
if (this.widget.width + gridDWidth > this.widget.definition.maxWidth) {
377-
gridDWidth = this.widget.definition.maxWidth - this.widget.width
378-
}
379-
if (this.widget.height + gridDHeight < this.widget.definition.minHeight) {
380-
gridDHeight = this.widget.definition.minHeight - this.widget.height
381-
}
382-
if (this.widget.height + gridDHeight > this.widget.definition.maxHeight) {
383-
gridDHeight = this.widget.definition.maxHeight - this.widget.height
384-
}
385-
this.resizeState = {
386-
x: this.widget.x + gridDX,
387-
y: this.widget.y + gridDY,
388-
width: this.widget.width + gridDWidth,
389-
height: this.widget.height + gridDHeight,
390-
pxX: this.widget.x * GRID_SIZE + dX,
391-
pxY: this.widget.y * GRID_SIZE + dY,
392-
pxWidth: this.widget.width * GRID_SIZE + dWidth,
393-
pxHeight: this.widget.height * GRID_SIZE + dHeight
394-
}
395-
},
396-
397-
onResizeStart (e, handle) {
398-
this.$_initalMousePosition = {
399-
x: e.clientX,
400-
y: e.clientY
401-
}
402-
this.$_resizeHandle = handle
403-
this.updateResizeState(e)
404-
window.addEventListener('mousemove', this.onResizeMove)
405-
window.addEventListener('mouseup', this.onResizeEnd)
406-
},
407-
408-
onResizeMove (e) {
409-
this.updateResizeState(e)
410-
},
411-
412-
async onResizeEnd (e) {
413-
this.updateResizeState(e)
414-
this.removeResizeListeners()
335+
async onResized () {
415336
await this.$apollo.mutate({
416337
mutation: WIDGET_MOVE,
417338
variables: {
@@ -424,7 +345,6 @@ export default {
424345
}
425346
}
426347
})
427-
this.resizeState = null
428348
}
429349
}
430350
}

‎packages/@vue/cli-ui/src/mixins/Resizable.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
export default function ({
2+
gridSize,
3+
field
4+
}) {
5+
// @vue/component
6+
return {
7+
data () {
8+
return {
9+
resizeState: null
10+
}
11+
},
12+
13+
created () {
14+
this.resizeHandles = [
15+
'top-left',
16+
'top',
17+
'top-right',
18+
'right',
19+
'bottom-right',
20+
'bottom',
21+
'bottom-left',
22+
'left'
23+
]
24+
},
25+
26+
beforeDestroy () {
27+
this.removeResizeListeners()
28+
},
29+
30+
methods: {
31+
removeResizeListeners () {
32+
window.removeEventListener('mousemove', this.onResizeMove)
33+
window.removeEventListener('mouseup', this.onResizeEnd)
34+
},
35+
36+
updateResizeState (e) {
37+
const mouseDeltaX = (e.clientX - this.$_initalMousePosition.x) / 0.7
38+
const mouseDeltaY = (e.clientY - this.$_initalMousePosition.y) / 0.7
39+
const handle = this.$_resizeHandle
40+
let dX = 0
41+
let dY = 0
42+
let dWidth = 0
43+
let dHeight = 0
44+
// TODO
45+
if (handle.includes('right')) {
46+
dWidth = mouseDeltaX
47+
}
48+
if (handle.includes('bottom')) {
49+
dHeight = mouseDeltaY
50+
}
51+
let gridDX = Math.round(dX / gridSize)
52+
let gridDY = Math.round(dY / gridSize)
53+
let gridDWidth = Math.round(dWidth / gridSize)
54+
let gridDHeight = Math.round(dHeight / gridSize)
55+
if (this[field].width + gridDWidth < this[field].definition.minWidth) {
56+
gridDWidth = this[field].definition.minWidth - this[field].width
57+
}
58+
if (this[field].width + gridDWidth > this[field].definition.maxWidth) {
59+
gridDWidth = this[field].definition.maxWidth - this[field].width
60+
}
61+
if (this[field].height + gridDHeight < this[field].definition.minHeight) {
62+
gridDHeight = this[field].definition.minHeight - this[field].height
63+
}
64+
if (this[field].height + gridDHeight > this[field].definition.maxHeight) {
65+
gridDHeight = this[field].definition.maxHeight - this[field].height
66+
}
67+
this.resizeState = {
68+
x: this[field].x + gridDX,
69+
y: this[field].y + gridDY,
70+
width: this[field].width + gridDWidth,
71+
height: this[field].height + gridDHeight,
72+
pxX: this[field].x * gridSize + dX,
73+
pxY: this[field].y * gridSize + dY,
74+
pxWidth: this[field].width * gridSize + dWidth,
75+
pxHeight: this[field].height * gridSize + dHeight
76+
}
77+
},
78+
79+
onResizeStart (e, handle) {
80+
this.$_initalMousePosition = {
81+
x: e.clientX,
82+
y: e.clientY
83+
}
84+
this.$_resizeHandle = handle
85+
this.updateResizeState(e)
86+
window.addEventListener('mousemove', this.onResizeMove)
87+
window.addEventListener('mouseup', this.onResizeEnd)
88+
},
89+
90+
onResizeMove (e) {
91+
this.updateResizeState(e)
92+
},
93+
94+
async onResizeEnd (e) {
95+
this.updateResizeState(e)
96+
this.removeResizeListeners()
97+
if (this.onResized) await this.onResized()
98+
this.resizeState = null
99+
}
100+
}
101+
}
102+
}

0 commit comments

Comments
 (0)