feat: new context menu logic

src/components/editor/common/ContextMenu/index.vue

@@ -33,6 +33,12 @@ export default {
  },
  zoom: {
  type: Number
+ },
+ clipboardLength: {
+ type: Number
+ },
+ selectedElementsLength: {
+ type: Number
  }
  },
  data: function () {
@@ -67,9 +73,18 @@ export default {
  menu () {
  if (this.specialState) {
  return [ { name: 'select', action: 'select' } ]
+ } else if (this.selectedElementsLength === 0) {
+ if (this.clipboardLength > 0) {
+ return [
+ { name: 'draw', action: 'draw' },
+ { name: 'paste', action: 'paste' }
+ ]
+ }
+ return [
+ { name: 'draw', action: 'draw' }
+ ]
  }
  return [
- { name: 'select', action: 'select' },
  { name: 'copy', action: 'copy' },
  { name: 'paste', action: 'paste' },
  { name: 'cut', action: 'cut' },
@@ -85,6 +100,9 @@ export default {
  case 'select':
  this.$emit('clearState')
  break
+ case 'draw':
+ this.$emit('draw')
+ break
  case 'copy':
  this.$emit('copy')
  break

src/components/editor/main/Stage.vue

@@ -37,7 +37,10 @@
  :axis="rightClickPoint"
  :zoom="zoom" 
  :specialState="paint || moveStage"
+ :clipboardLength="clipboard.length"
+ :selectedElementsLength="selectedElements.length"
  @clearState="clearState"
+ @draw="drawState"
  @delete="deleteHandler"
  @copy="copyHandler"
  @cut="cutHandler"
@@ -157,6 +160,11 @@ export default {
  this.moveStage = false
  },
 
+ drawState () {
+ this.paint = true
+ this.moveStage = false
+ },
+
  checkCollision (selectedEls) {
  if (selectedEls.length > 0) {
  const unit = this.gridUnit.current / 10