如何拿react做一个codepen编辑器

折腾两天也做出一个codepen的大概模型，目前只兼容了chrome。前端代码用的react作为ui库

分析codepen

首先要分析codepen的编辑器界面

codepen编辑器样式

• 红色圈起来的地方是由codemirror完成的，只要看源码就知道了
• 蓝色标注的两个拖拽bar，可以修改窗口大小

这两条里 codemirror实现的只要引入就行了，主要难点就在如何做出一个可以任意调整分块大小的编辑器容器。

设计模型

由codepen设计可以看出，每个拖拽的bar可以影响两边的窗口，当其中一边窗口大小不够的时候，会影响那一边相邻的窗口。
假设有3个窗口 A,B,C 拖拽bar有 AB和BC。

• 拖拽AB向右侧移动的时候，A窗口会增加宽度，B窗口减小宽度，当B窗口为0的时候，C窗口会相应减少宽度，返回过来BC向左也是一样的。

推广到n个窗口的时候，情况是类似的。

• 这里将拖拽的距离设置为消费的能量cost
• 拖拽bar其中一侧会增加cost的宽度，另外一侧会由一个或者多个窗口消费cost。
• 如果另一侧不能完全消费cost，那么增加宽度那侧 也不能增加全部cost

按照上面的约束条件，我们就可以设计出拖拽代码

/***
 *  widths 是一个数组 表示所有窗口的对应宽度
 *  index  表示当前拖拽bar的坐标，由1开始到widths.length-1;
 *  cost   是一次拖拽距离
 **/
function dragResize(widths, index, cost) {
    if (cost > 0) {  // 正向拖拽
        let noCost = cost;// 记录有多少距离没有消费
        for (let i = index; i < widths.length; i++) {
            noCost = calcuCost(widths, i, noCost);
            if (noCost == 0) break;
        }
        //另一侧窗口的增加距离为 总消耗 - 未消耗
        widths[index - 1] += cost - noCost;
    } else if (cost < 0) { // 反向拖拽
        cost = -cost;
        let noCost = cost;// 记录有多少距离没有消费
        for (let i = index - 1; i > -1; i--) {
            noCost = calcuCost(widths, i, noCost);
            if (noCost == 0) break;
        }
        //另一侧窗口的增加距离为 总消耗 - 未消耗
        widths[index] += cost - noCost;
    }
}

/**
 *  计算消耗 并返回剩余未消耗
 */
function calcuCost(widths, index, noCost) {
    let result = widths[index] - noCost;
    if (result <= 0) {
        // 记录窗口的消费 如果result<=0表示这个窗口不能消耗完全
        noCost = -result; // 剩余多少没有被消费
        widths[index] = 0;// 由于消耗不完 所以它的最后宽度变为0
        return noCost;
    } else {
        //记录窗口的消费 如果result>0 表示到这个窗口已经完全消费了拖拽距离
        widths[i] = result;// 窗口设置为剩余的宽度
        return 0;
    }
}

其实上下拖拽也是同理的，只要把widths换成height就可以了。

浏览器拖拽工具类

正常拖拽设计流程就是 mousedown，mousemove，mouseup。mousedown的时候开始监听mousemove，mouseup的时候停止监听。

• 如果监听元素mousemove 鼠标移出元素之后就会产生事件中断的问题
  所以这里mousemove和mouseup都监听的document的事件。
• 监听document的mousemove 鼠标移出到浏览器窗口外 ，也会产生事件中断的问题。
  所以可以采用captureEvents。只要调用了captureEvents 无论鼠标是否在窗口内都可以监听到。

拖拽所关心的事情

• 每次移动 鼠标当前位置与上次位置的距离变化 dx，dy
• 每次移动 从鼠标按下到现在总位置变化 px, py
• 何时停止移动

/**
 *   拖拽中回调函数
 *   dx  鼠标在x轴的变化距离
 *   dy  鼠标在y轴的变化距离
 *   px  鼠标从开始移动 到现在的总x轴变化距离
 *   py  鼠标从开始移动 到现在的总y轴变化距离
 **/
function onDrag(dx,dy,px,py) {
}

/**
 *   拖拽结束回调函数
 *   dx  鼠标在x轴的变化距离
 *   dy  鼠标在y轴的变化距离
 *   px  鼠标从开始移动 到现在的总x轴变化距离
 *   py  鼠标从开始移动 到现在的总y轴变化距离
 **/
function onDragEnd(dx,dy,px,py) {
}


/**
 *  拖拽函数 调用时机需要在鼠标按下时候
 *  startX 起始鼠标x轴坐标
 *  startY 起始鼠标y轴坐标
 *  onDrag 拖拽中监听函数
 *  onDragEnd 拖拽结束监听函数
 */
function drag(startX, startY, onDrag, onDragEnd) {
    let prevX = startX;
    let prevY = startY;

    function mouseMove(e) {
        onDrag(e.pageX - prevX, e.pageY - prevY, e.pageX - startX, e.pageY - startY);
        prevX = e.pageX;
        prevY = e.pageY;
    }

    function mouseUp(e) {
        onDragEnd(e.pageX - prevX, e.pageY - prevY, e.pageX - startX, e.pageY - startY);
        document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        document.removeEventListener('mousemove', mouseMove);
        document.removeEventListener('mouseup', mouseUp);
    }

    document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
    document.addEventListener('mousemove', mouseMove);
    document.addEventListener('mouseup', mouseUp);
}

效果图

这里贴一张效果图。

效果图