feat: paper base setting dialog

src/components/editor/dialogs/SettingDialog.vue

@@ -11,13 +11,13 @@
  <p>
  Substrate Type: 
  <span :key="key">
- <select v-model="substrate">
+ <select v-model="substrateType" @change="onSwitchSubstrate">
  <option value="glass"> Glass </option>
  <option value="paper"> Paper </option>
  </select>
  </span>
  </p>
- <p v-if="substrate == 'glass'">
+ <p v-if="substrateType == 'glass'">
  Canvas Grid:
  <span :key="keyInput">
  <input
@@ -26,7 +26,7 @@
  min="500"
  max="5000"
  step="500"
- :value="gridUnit.current"
+ :value="grid"
  @change="autoAdjust"
  @blur="onGridBlur"
  title="grid scale"
@@ -42,22 +42,27 @@
  </span>
  </p>
  <p v-else>
+ Canvas Grid:
+ <span :key="key">
+ <select :value=1300>
+ <option value=1300> 1300 </option>
+ </select>
+ </span>
  <span>
- Currently not supported
+  um
  </span>
  </p>
  </div>
  <div class="confirm-dialog__actions">
- <mdc-button v-if="substrate == 'glass'" @click="onConfirm" class="confirm-dialog__delete-btn" unelevated>Apply</mdc-button>
- <mdc-button v-else disabled unelevated>Apply</mdc-button>
- <mdc-button @click="closeDialog" v-if="parseInt(gridUnit.current) > 0">Cancel</mdc-button>
+ <mdc-button @click="onConfirm" class="confirm-dialog__delete-btn" unelevated>Apply</mdc-button>
+ <mdc-button @click="closeDialog">Cancel</mdc-button>
  </div>
  </dialog>
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
-import { newProject, _updateGridUnit } from '@/store/types'
+import { mapState, mapActions } from 'vuex'
+import { newProject } from '@/store/types'
 import dialogPolyfill from 'dialog-polyfill/dialog-polyfill'
 import { mapFields } from 'vuex-map-fields'
 
@@ -73,11 +78,25 @@ export default {
  return {
  key: 0,
  keyInput: 0,
- substrate: 'glass',
- invalidInput: false
+ substrateType: 'glass',
+ invalidInput: false,
+ grid: 0
  }
  },
  computed: {
+ parameterTable() {
+ return {
+ 'glass': {
+ 'cornerSize': 5,
+ 'gapSize': 0.5
+ },
+ 'paper': {
+ 'cornerSize': 0,
+ 'gapSize': 30
+ }
+ }
+ },
+
  ...mapFields([
  'app.gridUnit',
  'app.chip'
@@ -89,19 +108,25 @@ export default {
  },
  methods: {
  openDialog () {
+ this.substrateType = this.project.substrate
+ this.grid = this.gridUnit.current
  if (!this.$el.showModal) {
  dialogPolyfill.registerDialog(this.$el)
  }
  this.$el.showModal()
  },
 
  onConfirm () {
+ if (this.invalidInput) {
+ return
+ }
  this.newProject({
+ substrate: this.substrateType,
  height: this.chip.height,
  width: this.chip.width,
- gridUnit: this.gridUnit.current,
- cornerSize: 5,
- gapSize: 0.5
+ gridUnit: this.grid,
+ cornerSize: this.parameterTable[this.substrateType].cornerSize,
+ gapSize: this.parameterTable[this.substrateType].gapSize
  })
  this.closeDialog()
  },
@@ -134,13 +159,21 @@ export default {
  newVal = 500
  this.invalidInput = true
  }
- this._updateGridUnit(newVal)
+ this.grid = newVal
  if (this.invalidInput) {
  this.keyInput++
  }
  },
- ...mapActions([newProject]),
- ...mapMutations([_updateGridUnit])
+
+ onSwitchSubstrate (e) {
+ if (e.target.value === 'paper') {
+ this.grid = 1300
+ } else {
+ this.grid = 2000
+ }
+ },
+
+ ...mapActions([newProject])
  }
 }
 </script>

src/factories/projectFactory.js

@@ -1,10 +1,11 @@
 import shortid from 'shortid'
 import newPage from './pageFactory'
 
-function newProject (title, gridUnit, cornerSize, gapSize, height, width) {
+function newProject (title, substrate, gridUnit, cornerSize, gapSize, height, width) {
  return {
  id: shortid.generate(),
  title: title,
+ substrate: substrate,
  gridUnit: gridUnit,
  cornerSize: cornerSize,
  gapSize: gapSize,

src/factories/stateFactory.js

@@ -1,6 +1,6 @@
 import newProject from './projectFactory'
 
-function newState (height, width, gridUnit, cornerSize, gapSize, project) {
+function newState (substrate, height, width, gridUnit, cornerSize, gapSize, project) {
  const h = height / gridUnit
  const w = width / gridUnit
  const _matrix = []
@@ -18,6 +18,7 @@ function newState (height, width, gridUnit, cornerSize, gapSize, project) {
  }
  return {
  app: {
+ substrate: substrate,
  svgContent: '',
  apiStatus: false,
  isLoading: false,
@@ -59,7 +60,7 @@ function newState (height, width, gridUnit, cornerSize, gapSize, project) {
  isAuthorized: false,
  authenticatedUser: null
  },
- project: project || newProject('My Project', gridUnit, cornerSize, gapSize, height, width)
+ project: project || newProject('My Project', substrate, gridUnit, cornerSize, gapSize, height, width)
  }
 }
 

src/store/actions/projectAct.js

@@ -288,6 +288,7 @@ const projectActions = {
  const _project = JSON.parse(atob(project))
  if (!_project.gridUnit || !_project.chip) {
  store.replaceState(newState(
+ state.app.substrate,
  parseInt(state.app.chip.height),
  parseInt(state.app.chip.width),
  parseInt(2000),
@@ -297,12 +298,13 @@ const projectActions = {
  ))
  commit(types.addProject)
  } else {
- store.replaceState(newState(parseInt(_project.chip.height), parseInt(_project.chip.width), parseInt(_project.gridUnit), _project.cornerSize, _project.gapSize, _project))
+ store.replaceState(newState(state.app.substrate, parseInt(_project.chip.height), parseInt(_project.chip.width), parseInt(_project.gridUnit), _project.cornerSize, _project.gapSize, _project))
  commit(types.addProject)
  await dispatch(types.checkAuth)
  }
  } else {
  store.replaceState(newState(
+ state.app.substrate,
  parseInt(state.app.chip.height),
  parseInt(state.app.chip.width),
  parseInt(2000),
@@ -322,6 +324,7 @@ const projectActions = {
  */
  [types.resetProject]: async function ({ state, dispatch }) {
  await dispatch(types.newProject, {
+ substrate: state.app.substrate,
  height: state.app.chip.height,
  width: state.app.chip.width,
  gridUnit: state.app.gridUnit ? state.app.gridUnit.origin : 2000,
@@ -335,10 +338,10 @@ const projectActions = {
  * (or better to say, resets vuegg to initial state)
  */
  [types.newProject]: async function ({ dispatch, commit }, payload) {
- const { height, width, gridUnit, cornerSize, gapSize } = payload
+ const { substrate, height, width, gridUnit, cornerSize, gapSize } = payload
  commit(types._toggleBlockLoadingStatus, true)
 
- store.replaceState(newState(height, width, gridUnit, cornerSize, gapSize))
+ store.replaceState(newState(substrate, height, width, gridUnit, cornerSize, gapSize))
  commit(types.deleteProject)
 
  await dispatch(types.checkAuth)