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

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)

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')
       }

frontend/src/components/canvas/components/Editor/index.vue

@@ -939,7 +939,8 @@ export default {
       'curLinkageView',
       'doSnapshotIndex',
       'componentGap',
-      'mobileLayoutStatus'
+      'mobileLayoutStatus',
+      'curCanvasScale'
     ])
   },
   watch: {

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
   }
 ]
 

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 {

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 {

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',

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',

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',

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',

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',

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',

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',

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',

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 {

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',