低代码实现之-拖拽与辅助线

先上效果图炸波🐟

拖拽实现

这里我们使用react-draggable三方库，由于它默认的Draggable是去动态修改元素的transform，和我们设计的初衷背离，于是使用其DraggableCore模块去自定义拖拽方式,具体实现参考官方文档，这里不再多赘述

<DraggableCore
        onDrag={drag}
        onStop={stop}
        onStart={start}
      >
        {
          React.cloneElement(
            this.props.children
          )
        }
</DraggableCore>

辅助线

如何得到正确的辅助线 需要几步？

• 一：得到当前拖拽元素的left top值
• 二：获得当前拖拽元素 和 参考元素(画布上非当前拖拽元素的其他元素)的相关信息,包括:width,height,left,top等
• 三：遍历对比元素，通过如下x、y轴的分析生成辅助线数组
• 四：根据当前拖拽元素的left top筛选出应该显示的辅助线

步骤一 获取元素的left top

drag = (ev: DraggableEvent, b: DraggableData) => {
  // 动态计算当前的left top
  const dragX = b.lastX - this.lastX;
  const dragY = b.lastY - this.lastY;
};

步骤二 获取当前元素 和 参考元素

简单概述就是一次map和一次filter 此处省略...

步骤三 生成辅助线

y轴辅助线情况分解

图中B为拖拽中的当前元素，A为静态参考元素，triggerTop为横辅助线触发条件，lineTop为横辅助线的y坐标

顶对底应理解为当前元素的顶部对齐参考元素的底部，其他方向也应如此理解，前者为当前元素，后者为参考元素

• 顶对顶 ： triggerTop = A.top, lineTop = A.top
• 顶对底 ： triggerTop = A.top - B.height, lineTop = A.top
• 中对中 ： triggerTop = A.top + A.height/2 - B.height/2, lineTop = A.top + A/height/2
• 底对顶 ： triggerTop = A.top + A.height, lineTop = A.top + A.height
• 底对底 ： triggerTop = A.tio + A.height - B.height, lineTop = A.top + A.height

如图所示，产生y轴方向的辅助线有以上5种情况，根据这5种情况，可以用 当前元素(target) 和 参考元素(compare) 的信息创建出一组我们需要的数据

x轴辅助线情况分解

有了y轴的分析经验，相信x轴也会不攻自破，triggerLeft为竖辅助线触发条件，lineLeft为竖辅助线的x坐标

• 左对左 ： triggerLeft = A.left, lineLeft = A.left
• 左对右 ： triggerLeft = A.left + A.width, lineLeft = A.left + A.width
• 中对中 ： triggerLeft = A.left+ A.width/2 - B.width/2, lineLeft = A.left + A.width/ 2
• 右对右 ： triggerLeft: A.left + A.width - B.width, lineLeft = A.left + A.width
• 右对左 ： triggerLeft = A.left - B.width, lineLeft = A.left

转换成代码:

const directionsMap = {
  y: [
    {
      name: '顶对顶',
      calc: (compare) => ({
        lineTop: compare.t,
        triggerTop: compare.t
      })
    },
    {
      name: '底对顶',
      calc: (compare, target) => ({
        lineTop: compare.t,
        triggerTop: compare.t - target.h
      })
    },
    {
      name: '中对中',
      calc: (compare, target) => ({
        lineTop: compare.t + compare.h / 2,
        triggerTop: compare.t + compare.h / 2 - target.h / 2
      })
    },
    {
      name: '顶对底',
      calc: (compare) => ({
        lineTop: compare.t + compare.h,
        triggerTop: compare.t + compare.h
      })
    },
    {
      name: '底对底',
      calc: (compare, target) => ({
        lineTop: compare.t + compare.h,
        triggerTop: compare.t + compare.h - target.h
      })
    }],
  x: [
    {
      name: '左对左',
      calc: (compare) => ({
        lineLeft: compare.l,
        triggerLeft: compare.l
      })
    },
    {
      name: '左对右',
      calc: (compare) => ({
        lineLeft: compare.l + compare.w,
        triggerLeft: compare.l + compare.w
      })
    },
    {
      name: '中对中',
      calc: (compare, target) => ({
        lineLeft: compare.l + compare.w / 2,
        triggerLeft: compare.l + compare.w / 2 - target.w / 2
      })
    },
    {
      name: '右对右',
      calc: (compare, target) => ({
        lineLeft: compare.l + compare.w,
        triggerLeft: compare.l + compare.w - target.w
      })
    },
    {
      name: '右对左',
      calc: (compare, target) => ({
        lineLeft: compare.l,
        triggerLeft: compare.l - target.w
      })
    },
  ],
};


  calcLines(values, target, compares) {
    let {x, y} = values;
    // threshold为临界阀值 默认5
    const { threshold } = this.props;
    const lines: { y: YLine[], x: XLine[] } = {
      y: [],
      x: []
    };

    for (let i = 0; i < compares.length; i++) { // 和其他所有参考物遍历
      const compare = compares[i];
      directionsMap.y.forEach((item) => { // 构造横辅助线数据
        lines.y.push(item.calc(compare, target));
      });
      directionsMap.x.forEach((item) => { // 构造竖辅助线数据
        lines.x.push(item.calc(compare, target));
      })
    }
  }

步骤四 筛选辅助线

    let yLine = null, xLine = null;

    for (let i = 0; i < lines.y.length; i++) {
      const { triggerTop, lineTop } = lines.y[i];
      if (Math.abs(y - triggerTop) < threshold) {
        // 满足竖辅助线出现条件 为xLine赋值
        yLine = lineTop;
        // 实现吸附效果
        y = triggerTop;
        break;
      }
    }
    for (let j = 0; j <lines.x.length; j++) {
      const { triggerLeft, lineLeft } = lines.x[j];
      if (Math.abs(x - triggerLeft) < threshold) {
        // 满足竖辅助线出现条件 为xLine赋值
        xLine = lineLeft;
        // 实现吸附效果
        x = triggerLeft;
        break;
      }
    }

    if (yLine !== this.state.yLine || xLine !== this.state.xLine) {
      // 需要展示的横、竖辅助线
      this.setState({
        yLine,
        xLine,
      });
    }

    return { x, y }; // 拖拽元素的最终位置