refactor: 组件在矩阵模式下增加最小宽高的限制

2022-01-26 14:15:34 +08:00 · 2022-01-26 14:15:34 +08:00 · 6f7a8c56da
commit 6f7a8c56da
parent 2307af50cb
16 changed files with 100 additions and 25 deletions
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@ -539,6 +539,20 @@ export default {
    curGap() {
      return (this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix) ? this.componentGap : 0
    },
+    miniWidth() {
+      return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleWidth * (this.element.miniSizex || 1) : 0
+    },
+    miniHeight() {
+      if (this.element.auxiliaryMatrix) {
+        if (this.element.component === 'de-number-range') {
+          return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.element.miniSizey || 2) : 0
+        } else {
+          return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.element.miniSizey || 1) : 0
+        }
+      } else {
+        return 0
+      }
+    },
    ...mapState([
      'editor',
      'curCanvasScale',
@ -1190,8 +1204,10 @@ export default {
        newH = restrictToBounds(newH, 0, this.parentHeight)
      }
      // 外部传参限制大小
-      newW = restrictToBounds(newW, this.minW || 0, this.maxW)
-      newH = restrictToBounds(newH, this.minH || 0, this.maxH)
+      // newW = restrictToBounds(newW, this.minW || 0, this.maxW)
+      // newH = restrictToBounds(newH, this.minH || 0, this.maxH)
+      newW = restrictToBounds(newW, this.miniWidth || 0, this.maxW)
+      newH = restrictToBounds(newH, this.miniHeight || 0, this.maxH)
      // 纵横比
      if (this.lockAspectRatio) {
        // console.log(this.lockAspectRatio, this.aspectFactor)
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@ -102,6 +102,16 @@ export default {
    linkageInfo() {
      return this.targetLinkageInfo[this.element.propValue.viewId]
    },
+    miniHeight() {
+      let miniHeight = this.curComponent.miniSizey || 1
+      if (this.element.component === 'de-number-range') {
+        miniHeight = this.curComponent.miniSizey || 2
+      }
+      return miniHeight
+    },
+    miniWidth() {
+      return this.curComponent.miniSizex || 1
+    },
    ...mapState([
      'menuTop',
      'menuLeft',
@ -146,6 +156,8 @@ export default {
        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.sizey = this.curComponent.sizey > this.miniHeight ? this.curComponent.sizey : this.miniHeight
+        this.curComponent.sizex = this.curComponent.sizex > this.miniWidth ? this.curComponent.sizex : this.miniWidth
        this.curComponent.auxiliaryMatrix = true
        this.$emit('amAddItem')
      }
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -939,7 +939,8 @@ export default {
      'curLinkageView',
      'doSnapshotIndex',
      'componentGap',
-      'mobileLayoutStatus'
+      'mobileLayoutStatus',
+      'curCanvasScale'
    ])
  },
  watch: {
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@ -11,6 +11,8 @@ export const BASE_MOBILE_STYLE = {
  y: 1,
  sizex: 6,
  sizey: 4,
+  miniSizex: 1,
+  miniSizey: 1,
  auxiliaryMatrix: true
 }

@ -158,7 +160,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 2
+    sizey: 2,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '10002',
@ -181,7 +185,9 @@ const list = [
      textAlign: '',
      color: '',
      backgroundColor: ''
-    }
+    },
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '10003',
@ -199,7 +205,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 6
+    sizey: 6,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '10003-1',
@ -215,7 +223,9 @@ const list = [
      width: 600,
      height: 300,
      borderRadius: ''
-    }
+    },
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '10004',
@ -237,7 +247,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 6
+    sizey: 6,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '10005',
@ -256,7 +268,9 @@ const list = [
    y: 36,
    sizex: 10,
    sizey: 6,
-    auxiliaryMatrix: true
+    auxiliaryMatrix: true,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '10006',
@ -285,7 +299,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 10
+    sizey: 10,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '30001',
@ -322,7 +338,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 2
+    sizey: 2,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '20001',
@ -341,7 +359,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 5
+    sizey: 5,
+    miniSizex: 1,
+    miniSizey: 1
  },
  {
    id: '20002',
@ -360,7 +380,9 @@ const list = [
    x: 1,
    y: 1,
    sizex: 10,
-    sizey: 5
+    sizey: 5,
+    miniSizex: 1,
+    miniSizey: 1
  }
 ]

--- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
@ -25,7 +25,9 @@ const drawPanel = {
    },
    value: '测试按钮'
  },
-  component: 'de-button'
+  component: 'de-button',
+  miniSizex: 1,
+  miniSizey: 1
 }

 class ButtonSureServiceImpl extends WidgetService {
--- a/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
@ -34,7 +34,9 @@ const drawPanel = {
    textAlign: '',
    color: ''
  },
-  component: 'de-number-range'
+  component: 'de-number-range',
+  miniSizex: 1,
+  miniSizey: 2
 }

 class NumberRangeServiceImpl extends WidgetService {
--- a/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
@ -24,7 +24,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'tree-filter',
-  component: 'de-select-grid'
+  component: 'de-select-grid',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
@ -24,7 +24,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'tree-filter',
-  component: 'de-select'
+  component: 'de-select',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@ -19,7 +19,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'text-filter',
-  component: 'de-input-search'
+  component: 'de-input-search',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
@ -24,7 +24,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'text-filter',
-  component: 'de-select-grid'
+  component: 'de-select-grid',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@ -24,7 +24,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'text-filter',
-  component: 'de-select'
+  component: 'de-select',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@ -33,7 +33,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'time-filter',
-  component: 'de-date'
+  component: 'de-date',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@ -44,7 +44,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'time-filter',
-  component: 'de-date'
+  component: 'de-date',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@ -39,7 +39,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'time-filter',
-  component: 'de-date'
+  component: 'de-date',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',
--- a/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
@ -28,7 +28,9 @@ const drawPanel = {
    textAlign: '',
    color: ''
  },
-  component: 'de-quarter'
+  component: 'de-quarter',
+  miniSizex: 1,
+  miniSizey: 1
 }

 class TimeQuarterServiceImpl extends WidgetService {
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@ -38,7 +38,9 @@ const dialogPanel = {
    manualModify: false
  },
  defaultClass: 'time-filter',
-  component: 'de-date'
+  component: 'de-date',
+  miniSizex: 1,
+  miniSizey: 1
 }
 const drawPanel = {
  type: 'custom',