refactor(widget): zoom factor

Guillaume Chau · Guillaume Chau · commit 0325be1d1ea0 · 2018-09-24T14:43:06.000+02:00
diff --git a/packages/@vue/cli-ui/src/components/Widget.vue b/packages/@vue/cli-ui/src/components/Widget.vue
@@ -138,6 +138,7 @@ import WIDGET_CONFIG_OPEN from '../graphql/widgetConfigOpen.gql'
 import WIDGET_CONFIG_SAVE from '../graphql/widgetConfigSave.gql'
 
 const GRID_SIZE = 200
+const ZOOM = 0.7
 
 const state = new Vue({
   data: {
@@ -169,12 +170,14 @@ export default {
 
     Movable({
       field: 'widget',
-      gridSize: GRID_SIZE
+      gridSize: GRID_SIZE,
+      zoom: ZOOM
     }),
 
     Resizable({
       field: 'widget',
-      gridSize: GRID_SIZE
+      gridSize: GRID_SIZE,
+      zoom: ZOOM
     })
   ],
 
@@ -353,6 +356,8 @@ export default {
 <style lang="stylus" scoped>
 @import "~@/style/imports"
 
+$zoom = .7
+
 .shell,
 .move-ghost,
 .resize-ghost
@@ -461,15 +466,15 @@ export default {
 
 .customizing
   .wrapper
-    border-radius ($br / .7)
+    border-radius ($br / $zoom)
 
   .content-wrapper
     opacity .5
     filter blur(8px)
 
   .customize-overlay
     /deep/ > *
-      transform scale(1/.7)
+      transform scale(1/$zoom)
 
   .resize-handle
     position absolute
@@ -515,7 +520,7 @@ export default {
   z-index 10000
   .backdrop
     background rgba($vue-ui-color-accent, .2)
-    border-radius ($br / .7)
+    border-radius ($br / $zoom)
     .vue-ui-dark-mode &
       background rgba(lighten($vue-ui-color-accent, 60%), .2)
 
@@ -551,6 +556,6 @@ export default {
   &.v-enter,
   &.v-leave-to
     .shell
-      transform scale(.7)
+      transform scale($zoom)
       opacity 0
 </style>
diff --git a/packages/@vue/cli-ui/src/mixins/Movable.js b/packages/@vue/cli-ui/src/mixins/Movable.js
@@ -1,6 +1,7 @@
 export default function movable ({
   gridSize,
-  field
+  field,
+  zoom
 }) {
   // @vue/component
   return {
@@ -23,8 +24,8 @@ export default function movable ({
       updateMoveState (e) {
         const mouseDeltaX = e.clientX - this.$_initalMousePosition.x
         const mouseDeltaY = e.clientY - this.$_initalMousePosition.y
-        const pxX = this[field].x * gridSize + mouseDeltaX / 0.7
-        const pxY = this[field].y * gridSize + mouseDeltaY / 0.7
+        const pxX = this[field].x * gridSize + mouseDeltaX / zoom
+        const pxY = this[field].y * gridSize + mouseDeltaY / zoom
         let x = Math.round(pxX / gridSize)
         let y = Math.round(pxY / gridSize)
         if (x < 0) x = 0
diff --git a/packages/@vue/cli-ui/src/mixins/Resizable.js b/packages/@vue/cli-ui/src/mixins/Resizable.js
@@ -1,6 +1,7 @@
 export default function ({
   gridSize,
-  field
+  field,
+  zoom
 }) {
   // @vue/component
   return {
@@ -47,8 +48,8 @@ export default function ({
       },
 
       updateResizeState (e) {
-        const mouseDeltaX = (e.clientX - this.$_initalMousePosition.x) / 0.7
-        const mouseDeltaY = (e.clientY - this.$_initalMousePosition.y) / 0.7
+        const mouseDeltaX = (e.clientX - this.$_initalMousePosition.x) / zoom
+        const mouseDeltaY = (e.clientY - this.$_initalMousePosition.y) / zoom
         const handle = this.$_resizeHandle
         let dX = 0
         let dY = 0
