feat(free-dom): wrap支持指定扩展值

packages/core/__tests__/freedom.spec.ts

@@ -494,7 +494,7 @@ describe('expand size', () => {
     await nextTick()
     const scene = wrapper.findComponent({ name: 'FreeDomWrap' })
     const rect = window.getComputedStyle(scene.element.querySelector('.vv-free-dom--scene')!)
-    expect(rect.width).toBe('101px')
+    expect(rect.width).toBe('110px')
     expect(rect.height).toBe('100px')
   })
 
@@ -511,7 +511,7 @@ describe('expand size', () => {
     const scene = wrapper.findComponent({ name: 'FreeDomWrap' })
     const rect = window.getComputedStyle(scene.element.querySelector('.vv-free-dom--scene')!)
     expect(rect.width).toBe('100px')
-    expect(rect.height).toBe('101px')
+    expect(rect.height).toBe('110px')
   })
 
   test('expand width&height', async () => {
@@ -521,6 +521,22 @@ describe('expand size', () => {
     const wrapper = await renderDemo(nodeList, { autoExpand: true })
     await nextTick()
 
+    const dnd = wrapper.findComponent({ name: 'FreeDom' })
+    simulateMoveFromTo(dnd, 0, 0, 80, 80)
+    await nextTick()
+    const scene = wrapper.findComponent({ name: 'FreeDomWrap' })
+    const rect = window.getComputedStyle(scene.element.querySelector('.vv-free-dom--scene')!)
+    expect(rect.width).toBe('110px')
+    expect(rect.height).toBe('110px')
+  })
+
+  test('expand 1px', async () => {
+    const nodeList = [
+      { style: { w: 20, h: 20, x: 0, y: 0 } },
+    ]
+    const wrapper = await renderDemo(nodeList, { autoExpand: 1 })
+    await nextTick()
+
     const dnd = wrapper.findComponent({ name: 'FreeDom' })
     simulateMoveFromTo(dnd, 0, 0, 80, 80)
     await nextTick()

packages/core/src/components/freeDomWrap.ts

@@ -25,7 +25,7 @@ export const freeDomWrapProps = {
     type: Number,
     default: 2,
   },
-  autoExpand: [Boolean, Object] as PropType<boolean | { width?: boolean, height?: boolean }>,
+  autoExpand: [Number, Boolean, Object] as PropType<boolean | number | { width?: boolean | number, height?: boolean | number }>,
   manualDiff: Boolean,
   showLine: {
     type: Boolean,
@@ -106,26 +106,29 @@ export const FreeDomWrap = defineComponent({
     const selectedNodes = computed(() => nodes.value.filter(node => node.node.selected))
 
     const expandSize = (node: INode) => {
-      let expandWidth = props.autoExpand === true
-      let expandHeight = props.autoExpand === true
+      let expandWidth = props.autoExpand
+      let expandHeight = props.autoExpand
       if (typeof props.autoExpand === 'object') {
-        expandWidth = !!props.autoExpand.width
-        expandHeight = !!props.autoExpand.height
+        expandWidth = props.autoExpand.width
+        expandHeight = props.autoExpand.height
       }
 
       if (!expandWidth && !expandHeight) return
 
+      const offsetWidth = typeof expandWidth === 'number' ? expandWidth : 10
+      const offsetHeight = typeof expandHeight === 'number' ? expandHeight : 10
+
       const {
         x = 0,
         width: nw = 0,
         y = 0,
         height: nh = 0,
       } = node.node._rect
       if (expandWidth && width.value && x + nw >= width.value) {
-        width.value += 1
+        width.value += offsetWidth
       }
       if (expandHeight && height.value && y + nh >= height.value) {
-        height.value += 1
+        height.value += offsetHeight
       }
     }
     // 根据容器内元素的缩放或拖动行为计算参考线

packages/core/src/style/resize-dom.scss

@@ -43,11 +43,12 @@
 .vv-resize-dom--handler__rb {
   bottom: 0;
   right: 0;
-  cursor: nw-resize
+  cursor: nw-resize;
 }
 
 .vv-resize-dom--handler {
   position: absolute;
+  z-index: 1;
   width: 20px;
   height: 20px;
   padding: 0 3px 3px 0;

packages/index.md

@@ -78,7 +78,7 @@ title: '首页'
 | disabled-batch | boolean | ❌ | false | - | 是否禁用批量选择
 | scale | array | ❌ | - | ['t', 'r', 'l', 'b', 'lt', 'lb', 'rt', 'rb'] | 所有元素允许缩放的方向
 | lock-aspect-ratio | boolean | ❌ | false | - | 所有元素缩放时是否按当前宽高比计算
-| auto-expand | boolean \| <Desc desc="{ width: boolean, height: boolean }">Object</Desc> | ❌ | - | - | 是否在元素到达边界时自动扩展宽度或高度
+| auto-expand | boolean \| number \| <Desc desc="{ width: boolean \| number, height: boolean \| number }">Object</Desc> | ❌ | - | - | 是否在元素到达边界时自动扩展宽度或高度, 如果设置开启，默认自动扩展10px
 
 ### free-scene 事件
 | 事件名 | 详情 | 类型 |