fix: move canvas scale ratio to vuex

ly525 · Oct 11, 2020 · 4c3679c · 4c3679c
1 parent 6e23b00
commit 4c3679c
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 13 deletions.
diff --git a/front-end/h5/src/components/core/editor/canvas/index.js b/front-end/h5/src/components/core/editor/canvas/index.js
@@ -6,16 +6,16 @@ import RenderPreviewCanvas from './preview'
 export default {
   name: 'EditorCanvas',
   data: () => ({
-    isPreviewMode: false,
-    scaleRate: 1
+    isPreviewMode: false
   }),
   computed: {
     ...mapState('editor', {
       editingPage: state => state.editingPage,
       editingElement: state => state.editingElement,
       elements: state => state.editingPage.elements,
       pages: state => state.work.pages,
-      work: state => state.work
+      work: state => state.work,
+      scaleRate: state => state.scaleRate
     }),
     ...mapState('loading', [
       'saveWork_loading',

diff --git a/front-end/h5/src/components/core/editor/fixed-tools/index.js b/front-end/h5/src/components/core/editor/fixed-tools/index.js
@@ -1,10 +1,15 @@
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import hotkeys from 'hotkeys-js'
 import fixedTools from './options'
 
 export default {
+  computed: {
+    ...mapState('editor', {
+      scaleRate: state => state.scaleRate
+    })
+  },
   methods: {
-    ...mapActions('editor', ['pageManager'])
+    ...mapActions('editor', ['pageManager', 'elementManager', 'updateScaleRate'])
   },
   render () {
     return (

diff --git a/front-end/h5/src/components/core/editor/fixed-tools/options.js b/front-end/h5/src/components/core/editor/fixed-tools/options.js
@@ -41,14 +41,14 @@ const fixedTools = [
   {
     i18nTooltip: 'editor.fixedTool.zoomOut',
     icon: 'plus',
-    action: function () { this.scaleRate += 0.25 },
+    action: function () { this.updateScaleRate(0.25) },
     hotkey: 'ctrl&=,⌘&=',
     hotkeyTooltip: '(ctrl +)'
   },
   {
     i18nTooltip: 'editor.fixedTool.zoomIn',
     icon: 'minus',
-    action: function () { this.scaleRate -= 0.25 },
+    action: function () { this.updateScaleRate(-0.25) },
     hotkey: 'ctrl&-,⌘&-',
     hotkeyTooltip: '(ctrl -)'
   },

diff --git a/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js b/front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
@@ -3,7 +3,7 @@ import UsageTip from './usage-tip'
 import LoadNpmPlugins from './load-npm-plugins.vue'
 import langMixin from 'core/mixins/i18n'
 import dragMixin from 'core/mixins/drag'
-import loadPluginsMixin from 'core/plugins'
+import loadPluginsMixin from 'core/plugins/index'
 import { mapActions } from 'vuex'
 
 export default {

diff --git a/front-end/h5/src/components/core/mixins/drag.js b/front-end/h5/src/components/core/mixins/drag.js
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2020-05-17 17:21:04
  * @LastEditors: ly525
- * @LastEditTime: 2020-10-10 23:27:21
+ * @LastEditTime: 2020-10-11 17:20:39
  * @FilePath: /luban-h5/front-end/h5/src/components/core/mixins/drag.js
  * @Github: https://github.com/ly525/luban-h5
  * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
@@ -50,7 +50,6 @@ class Drag {
   }
 
   _mouseup (e) {
-    console.log('mouseup')
     this.mouseup(e)
     this.toggleListener('remove')
   }

diff --git a/front-end/h5/src/components/core/store/modules/canvas.js b/front-end/h5/src/components/core/store/modules/canvas.js
@@ -0,0 +1,18 @@
+// actions
+export const actions = {
+  updateScaleRate ({ commit }, payload) {
+    commit('updateScaleRate', payload)
+  }
+}
+
+// mutations
+export const mutations = {
+  /**
+   *
+   * @param {*} state
+   * @param {Number} scaleRateDiff 放大: 0.25, 缩小: -0.25
+   */
+  updateScaleRate (state, scaleRateDiff) {
+    state.scaleRate += scaleRateDiff
+  }
+}
diff --git a/front-end/h5/src/components/core/store/modules/editor.js b/front-end/h5/src/components/core/store/modules/editor.js
@@ -1,5 +1,6 @@
 // initial state
 import Work from 'core/models/work'
+import { actions as canvasActions, mutations as canvasMutations } from './canvas'
 import { actions as pageActions, mutations as pageMutations } from './page'
 import { actions as elementActions, mutations as elementMutations } from './element'
 import { actions as workActions, mutations as workMutations } from './work'
@@ -13,7 +14,8 @@ const state = {
     uuidMap2Name: {},
     formRecords: []
   },
-  workTemplates: []
+  workTemplates: [],
+  scaleRate: 1
 }
 
 // getters
@@ -23,14 +25,16 @@ const getters = {}
 const actions = {
   ...elementActions,
   ...pageActions,
-  ...workActions
+  ...workActions,
+  ...canvasActions
 }
 
 // mutations
 const mutations = {
   ...elementMutations,
   ...pageMutations,
-  ...workMutations
+  ...workMutations,
+  ...canvasMutations
 }
 
 export default {