重构designerProps resizable/translatable，同时新增rotatable为更灵活的自由布局做准备

[janryWang]

之前的写法有点丑，而且想要实现更灵活的自由布局限制性也挺大的，实现的拖拽算法逻辑也不方便维护

{
     resizable: {
      width(node, element) {
        const width = Number(
          node.props?.style?.width ?? element.getBoundingClientRect().width
        )
        return {
          plus: () => {
            node.props = node.props || {}
            node.props.style = node.props.style || {}
            node.props.style.width = width + 10
          },
          minus: () => {
            node.props = node.props || {}
            node.props.style = node.props.style || {}
            node.props.style.width = width - 10
          },
        }
      },
      height(node, element) {
        const height = Number(
          node.props?.style?.height ?? element.getBoundingClientRect().height
        )
        return {
          plus: () => {
            node.props = node.props || {}
            node.props.style = node.props.style || {}
            node.props.style.height = height + 10
          },
          minus: () => {
            node.props = node.props || {}
            node.props.style = node.props.style || {}
            node.props.style.height = height - 10
          },
        }
      },
    },
    translatable: {
      x(node, element, diffX) {
        const left =
          parseInt(node.props?.style?.left ?? element?.style.left) || 0
        const rect = element.getBoundingClientRect()
        return {
          translate: () => {
            node.props = node.props || {}
            node.props.style = node.props.style || {}
            node.props.style.position = 'absolute'
            node.props.style.width = rect.width
            node.props.style.height = rect.height
            node.props.style.left = left + parseInt(String(diffX)) + 'px'
          },
        }
      },
      y(node, element, diffY) {
        const top = parseInt(node.props?.style?.top ?? element?.style.top) || 0
        const rect = element.getBoundingClientRect()
        return {
          translate: () => {
            node.props = node.props || {}
            node.props.style = node.props.style || {}
            node.props.style.position = 'absolute'
            node.props.style.width = rect.width
            node.props.style.height = rect.height
            node.props.style.top = top + parseInt(String(diffY)) + 'px'
          },
        }
      },
    },
}

后面会改成

{
     resizable: {
        grid:{
          width:-1, // -1代表网格宽度以元素宽度为基准，0代表无网格，大于0代表按某个网格宽度拖拽
          height:-1
        },
        width(node,value) {//用户只需要将拖拽计算出来的宽度赋值给组件的属性上即可
          node.props['x-component-props'].style.width = value
        },
        height(node,value) {//用户只需要将拖拽计算出来的高度赋值给组件的属性上即可
          node.props['x-component-props'].style.height = value
        },

      },
      translatable:{
        grid:{
          width:-1, // -1代表网格宽度以元素宽度为基准，0代表无网格，大于0代表按某个网格宽度拖拽
          height:-1
        },
        left(node,value){//用户只需要将拖拽计算出来的左侧偏移量赋值给组件的属性上即可

        },
        top(node,value){//用户只需要将拖拽计算出来的顶部偏移量赋值给组件的属性上即可

        }
      },
      rotatable:{
        arc:{
           radius:5, //半径步长
           angle:5, //旋转步长
        },
        roundRadius(node,value){//用户只需要将拖拽计算出来的圆角半径赋值给组件的属性上即可

        },
        rotateAngle(node,value){//用户只需要将拖拽计算出来的旋转角度赋值给组件的属性上即可

        }
      }
}

[janryWang]

注意，这里存在Break Change

[yaximi111]

焯