上一篇
#4 从零开始制作在线 代码编辑器

删除 与 BackSpace 与 Delete

BackSpace

为了方便. 这里所说的删除的只考虑以下两种键的最简单的删除行为:

1. BackSpace 往左边删除一个字符
2. Delete 往右边删除一个字符

有选区状态时所做的删除或者替换. 这里不考虑哦.

因为做了简化. 这里的流程就会比较简单. 要说明的是:
当光标位于行首时. 再使用BackSpace 的时候. 要删除当前行.
把这个方法加在 harusame-line.js 中

code

@path serval/script/harusame-line.js
// 只有部分代码

/**
 * 删除指定行
 */
self.deleteLine = function (v_line_number) {
    var $line_container = document.querySelector('.line-container') // 同样. 这里暂时这么写...
    var $line = self.getLineContentByLogicalY(v_line_number).parentNode.parentNode
    $line_container.removeChild($line)
}

@path serval/script/harusame-serval.js
// 只有部分代码
  
/**
 * KEY: BackSpace  
 * 0. 阻止默认行为
 * 1. 如果光标在首行首列, 什么都不干
 * 2. 如果光标在该行第0个位置
 *      2.1. 得到光标后的内容(left_content), 删除当前行
 *      2.2. 修正行号 -> 暂时是这样
 *      2.3. 光标上移一行, 且放置到该行最后一列
 *      2.4. 将上一行的残留下来的内容(left_content) 追加到该行末尾
 * 3. 其他情况下
 *      3.1. 光标往左移动一列
 *      3.2. 删除一个字符
 */
Serval.prototype.keydownHandler.'8': function (event) {
    event.preventDefault() /* 0 */
    var self = this
    self.allocTask(function (v_cursor) {
        var $line = v_cursor.line.$line_content
        var textContent = $line.textContent
        var logicalX = v_cursor.logicalX
        var left_content = textContent.substring(logicalX, textContent.length)

        var logicalY = v_cursor.logicalY
        if (logicalY === 0) {
            if (logicalX === 0) {
                return /* 2 */
            }
        } else {
            if (logicalX === 0) { /* 2 */
                Line.deleteLine(v_cursor.logicalY) /* 2.1 */
                Line.fixLineNumber(v_cursor.logicalY) /* 2.2 */

                v_cursor.logicalY -= 1 /* 2.3 */
                v_cursor.logicalX = v_cursor.line.$line_content.textContent /* 2.3 */

                var $line = v_cursor.line.$line_content
                var textContent = $line.textContent
                $line.textContent = textContent + left_content /* 2.4 */

                return
            }
        }

        v_cursor.logicalX -= 1 /* 3.1 */
        $line.textContent = textContent.substring(0, logicalX - 1) + left_content /* 3.2 */
    })
},

效果是这样... 很普通. 见 图5-1

图5-1.gif

Delete

Delete 的原理同 BackSpace. 但是还是有一些差异. 在做的时候. 能感受到之前代码的不合理(蠢).

在 Delete 中. 当光标位于 最后一行 最后一列 时. 需要先得到一共有几行. 才能做比较. 可是问题在于访问 Line.max_line_number 会触发它的 getter. 并且修改了数据. 见 图5-2. 这是一个看似简单但是会充满麻烦的行为. 毕竟每次访问. 他都在变. 导致在做 最后一行 最后一列 的判断时. 只要按下 一次以上的 Delete. 这个判断就会失效.

图5-2.png

先把问题补了吧...

1. 把 ++ 改成 删掉 (这里暂时这么改... 事实上没有必要控制 getter setter 了)

2. 每次调用 Line.generateLine 的时候. 最大行数加一.

3. 同样地. 每次调用Line.deleteLine的时候. 最大行数减一.

code

@path serval/script/harusame-serval.js
// 部分代码

/**
 * KEY: Delete
 * 0. 阻止默认行为
 * 1. 如果光标在最后一行最后一列, 什么都不干
 * 2. 如果光标在该行最后一个位置
 *      2.1. 得到下一行的光标后的内容(left_content, 另外 也肯定是该行全部的内容)
 *      2.2. 删除下一行
 *      2.3. 修正行号 -> 暂时是这样
 *      2.4. 将 left_content 内容 追加到当前行末尾
 * 3. 其他情况下
 *      3.1. 向右删除一个字符
 */
Serval.prototype.keydownHandler.  '46': function (event) {
    event.preventDefault() /* 0 */
    var self = this
    self.allocTask(function (v_cursor) {
        var $line = v_cursor.line.$line_content
        var textContent = $line.textContent
        var logicalX = v_cursor.logicalX
        var left_content = textContent.substring(logicalX + 1, textContent.length)

        var logicalY = v_cursor.logicalY
        var max = Line.max_line_number - 1
        console.log('max', max)
        if (logicalY === max) {
            if (logicalX === textContent.length) {
                return /* 1 */
            }
        } else {
            if (logicalX === textContent.length) {

                var left_content = Line.getLineContentByLogicalY(logicalY + 1).textContent /* 2.1 */
                Line.deleteLine(logicalY + 1) /* 2.2 */
                Line.fixLineNumber(v_cursor.logicalY) /* 2.3 */

                $line.textContent = v_cursor.line.$line_content.textContent + left_content /* 2.4 */
                return
            }
        }
        $line.textContent = textContent.substring(0, logicalX) + left_content /* 3.1 */
    })
},  

看看效果的说. 很普通. 见图 5-3. 顺便又试了下 BackSpace

图5-3.gif

选区 与 selection

在进行复制等操作前. 需要让计算姬知道哪些对象需要操作. 选区就是这样一个东西. 感觉也没什么好说的.

编写选区的整体思路

鉴于常识与操作习惯. 这里规定一个光标只能有一个选区 并且 选择的内容必须是连续的.

对于一个选区... 只要

1. 拥有起点与终点. 由于区域已经规定必须是连续的. 那么
2. 他所包含的区域就可以计算出来.
3. 选区中的内容才可以获得.
4. 选区也才可以绘制出来.

但是有个问题!

可能很早之前说了.? 终点总是光标的当前位置. 所以只要记下选区的起点就行了.

然而所说的起点并不是 鼠标按下时候(onmousedown)的那个点.! 这里为了方便记录. 把鼠标按下时候的那个点叫做 基准点 ..

因为选区可能是从 基准点开始往左/左上角拉 或者 往右/右下角拉. 图5-4 这样.

图5-4.gif

需要做一个判断来确定选区真正的 起点 和 终点. 这样

1. 绘制选区才会比较方便的找准点...
2. 截取内容时. 才会正确?.(下面会说这个问号是为什么)

获得选区内容

观察已有的编辑器功能. 可以了解到选区的创建方式:

1. 按下 鼠标的时候确定一个选区基准点
2. 拖动 鼠标来选取内容. (也就是根据选区基准点 与 光标当前位置 计算选区起点与终点. 之后根据起点与终点绘制视图).
3. 放开 鼠标后确定选取的内容. (实际上步骤同2)

这里也刚好对应三个常用的鼠标事件:

1. 按下 - onmousedown
2. 拖动 - onmousemove
3. 放开 - onmouseup

具体功能逻辑的话... 其实原理很简单.. 只是由于设计上的问题. 导致代码暂时有点臃肿. 就直接通过代码来显示了.

绘制选区视图

最后是关于选区的视图...

根据选区必须是连续的特性以及盒子模型一般是矩形的特性... 可以将选区分为三种类型 以方便地适应所有情况. 见 图5-5.

图5-5.png

1. 只有一行的: 用一个带背景颜色的<div class="selection-part" /> 并控制他的偏移量与宽度 来显示
2. 只有二行的: 那就用二个<div class="selection-part" />
3. 多于三行的: 无论多少行都可以用三个来表示<div class="selection-part" />

记得最初的时候创建了selected-container.

就把 <div class="selection-part" /> 放进这层中. 另外 selected-container 这名字好有问题... 不如改成 selection. 再加上这几个 container 有明确的覆盖关系... 最终会改成 selection-layer 这种形式 可能比较好一点... 这里暂时不会改

code - 获得选区内容

首先来绑定事件... 因为逻辑比较清晰啦... 这里是就直接先调用还不存在的函数... 然后再去写函数内部的具体逻辑..（从界面进入到逻辑）

@path serval/script/harusame-serval.js
// 目标代码

Serval.prototype._bindMouseEvent: function () {
    var self = this

    var isMouseDown = false

    /**
     * addEventListener 是指自己写的方法，见最下面
     * 当 mousedown 时，就对光标位置进行计算
     * 1. 取消鼠标默认的行为，否则 2 不会生效
     * 2. 让编辑器总是能够接受键盘事件
     * 3. 定位鼠标
     * 4. 设置选区基准点
     * 5. 记忆鼠标已经点击还未弹起， 用来避免鼠标没有点击就一直更新选区
     */
    addEventListener(self.$serval_container, 'mousedown', function (event) {
        event.preventDefault() /* 1 */

        self.$inputer.focus() /* 2 */

        self.allocTask(function (v_cursor) {
            v_cursor.psysicalY = event.layerY /* 3 */
            v_cursor.psysicalX = event.layerX /* 3 */

            v_cursor.setSelectionBase() /* 4 */
        })

        isMouseDown = true /* 5 */
    })

    /**
     * 这里先不管触发的频次是否频繁什么的...
     * 1. 当 mousemove 时 且 鼠标 按下 时，更新光标位置
     * 2. 更新选区起点 与 终点 与 视图
     */
    addEventListener(self.$serval_container, 'mousemove', function (event) {
        event.preventDefault()
        if (isMouseDown) { 
            self.allocTask(function (v_cursor) {
                v_cursor.psysicalY = event.layerY /* 1 */
                v_cursor.psysicalX = event.layerX /* 1 */

                v_cursor.updateSelection() /* 2 */
            })
        }
    })

    /**
     * 1. 标记鼠标已经弹起
     * 2. 更新光标位置
     * 3. 更新选区起点 与 终点 与 视图
     * 4. 当存在选区的时候
     *      4.1. 获得选区内容， ---> 这里先测试下是否能获取到选区内容 <---
     */
    addEventListener(self.$serval_container, 'mouseup', function (event) {
        event.preventDefault()

        isMouseDown = false /* 1 */

        self.allocTask(function (v_cursor) {
            v_cursor.psysicalY = event.layerY /* 2 */
            v_cursor.psysicalX = event.layerX /* 2 */

            v_cursor.updateSelection() /* 3 */

            if (v_cursor.isSelectionExist()) { /* 4 */
                console.log(v_cursor.getSelectionContent()) /* 4.1 */
            }
        })
    })
},

@path serval/script/harusame-cursor.js

/**
 * 设定选区基准点
 */
Cursor.prototype.setSelectionBase: function () {
    this.mousedown_point = {
        logicalY: this.logicalY,
        logicalX: this.logicalX,
        psysicalY: this.psysicalY,
        psysicalX: this.psysicalX
    }
},

/**
 * 更新选区
 */
Cursor.prototype.updateSelection: function () {
    this.findSelection()
    // this.updateSelectionView() 用来更新选区视图
},

/**
 * 找到选区的 起点 与 终点
 * @ 这个函数名字不怎么合适.. 而且代码很丑..
 * @ 如果把坐标单独做成一个类 就会好看很多(大概
 * @ 甚至可以比如 point_end = this.mousedown_point
 * @ 但是就现在来说的话干脆就让他更臃肿 反而好看点.(大概 
 * @ _(:3」∠)_
 */
Cursor.prototype.findSelection: function () {
    var point_start = {}
    var point_end = {}

    if (this.logicalY < this.mousedown_point.logicalY) {
        point_start.logicalY = this.logicalY
        point_start.logicalX = this.logicalX
        point_start.psysicalY = this.psysicalY
        point_start.psysicalX = this.psysicalX

        point_end.logicalY = this.mousedown_point.logicalY
        point_end.logicalX = this.mousedown_point.logicalX
        point_end.psysicalY = this.mousedown_point.psysicalY
        point_end.psysicalX = this.mousedown_point.psysicalX
    } else if (this.logicalY === this.mousedown_point.logicalY) {
        if (this.logicalX < this.mousedown_point.logicalX) {
            point_start.logicalY = this.logicalY
            point_start.logicalX = this.logicalX
            point_start.psysicalY = this.psysicalY
            point_start.psysicalX = this.psysicalX

            point_end.logicalY = this.mousedown_point.logicalY
            point_end.logicalX = this.mousedown_point.logicalX
            point_end.psysicalY = this.mousedown_point.psysicalY
            point_end.psysicalX = this.mousedown_point.psysicalX
        } else {
            point_start.logicalY = this.mousedown_point.logicalY
            point_start.logicalX = this.mousedown_point.logicalX
            point_start.psysicalY = this.mousedown_point.psysicalY
            point_start.psysicalX = this.mousedown_point.psysicalX

            point_end.logicalY = this.logicalY
            point_end.logicalX = this.logicalX
            point_end.psysicalY = this.psysicalY
            point_end.psysicalX = this.psysicalX
        }
    } else {
        point_start.logicalY = this.mousedown_point.logicalY
        point_start.logicalX = this.mousedown_point.logicalX
        point_start.psysicalY = this.mousedown_point.psysicalY
        point_start.psysicalX = this.mousedown_point.psysicalX

        point_end.logicalY = this.logicalY
        point_end.logicalX = this.logicalX
        point_end.psysicalY = this.psysicalY
        point_end.psysicalX = this.psysicalX
    }

    this.selection_start = point_start
    this.selection_end = point_end
},

/**
 * 判断是否有选区
 */
Cursor.prototype.isSelectionExist: function () {
    if (this.logicalY === this.mousedown_point.logicalY && this.logicalX === this.mousedown_point  .logicalX) {
        return false
    }
    return true
},

/**
 * 获得选区内容
 * 1. 如果选区只有一行
 *      1.1. 截取 起点 与 终点 的内容，且不需要换行
 * 2. 如果选区只有二行
 *      2.1. 截取 起点 到 起点行末尾 的内容
 *      2.2. 截取 终点行开始 到 终点 的内容，且不需要换行
 * 3. 如果选区大于二行
 *      3.1. 截取 起点 到 起点行末尾 的内容
 *      3.2. 遍历除了 起点行 与 终点行 的其他行
 *          3.2.1. 截取该行的整段内容
 *      3.3. 截取 终点行开始 到 终点 的内容，且不需要换行
 */
getSelectionContent: function () {
    var point_start = this.selection_start
    var point_end = this.selection_end

    var result = ''
    var count = point_end.logicalY - point_start.logicalY
    var start_line_text = Line.getLineContentByLogicalY(point_start.logicalY).textContent

    /* 1 */
    if (count === 0) {
        console.log('--> 选区类型 : 一行 <--')
        result += start_line_text.substring(point_start.logicalX, point_end.logicalX) /* 1.1 */

    /* 2 */
    } else if (count === 1) {
        console.log('--> 选区类型 : 二行 <--')
        result += start_line_text.substring(point_start.logicalX, start_line_text.length) + '\n' /* 2.1 */

        var end_line_text = Line.getLineContentByLogicalY(point_end.logicalY).textContent
        result += end_line_text.substring(0, point_end.logicalX) /* 2.2 */

    /* 3 */
    } else {
        console.log('--> 选区类型 : 多行 <--')
        result += start_line_text.substring(point_start.logicalX, start_line_text.length) + '\n' /* 3.1 */

        /* 3.2 */
        for (var i = point_start.logicalY + 1; i < point_end.logicalY; i++) {
            result += Line.getLineContentByLogicalY(i).textContent + '\n' /* 3.2.1 */
        }

        var end_line_text = Line.getLineContentByLogicalY(point_end.logicalY).textContent
        result += end_line_text.substring(0, point_end.logicalX) /* 3.3 */
    }

    return result
},

就是这样.先来调试一下.保证选区数据是返回正确的再来做视图哦... 来看看效果... 见图5-6.

图5-6.gif

... 嗯嗯.. 内容能用各种姿势获取到.~

这里额外说一下... 好早之前的版本中忘记做了单行选区的 选区起点 终点的判断
会产生比如这样的事情 textContent.substring(6, 0). 但这并没有报错...

见挺靠谱的文档 MDN 其中说到了

If indexStart is greater than indexEnd, then the effect of substring() is as if the two arguments were swapped; for example, str.substring(1, 0) == str.substring(0, 1).

感觉有点神奇... 会做这样的处理...

code - 获得选区内容

确保选区的数据获得是正确的之后. 来尝试做选区的视图部分...

简化的选区视图

编辑器中的选区视图

之前也说过.. 这里的选区最多只会划分为三段... 这是为了防止操作太多的DOM起见...(偷懒.
当然像一般的编辑器那样. 每一行单独一段高亮的选区也不是不行啦... 只是还没做就感觉会卡(hen)卡(ma)的(fan).

CSS

为了能快地看到成型后的效果. 先以最快速度把<div class="selection-part" /> 塞进 <div class="selected-container /> 中. 再来做 js 的部分.

1. 因为选区的样式已经很直观了... 这里就先写的 css.

.selection-content {
    position: absolute;
    top: 0;
    left: 0; 

    right: 0; 
    /* 
     * 这里用 right: 0 让宽度铺满一行
     * 不用 width: 100% 是因为在个人习惯调试的时候尽量不麻烦其他元素节点的样式
     * 并且此时任意一个父类也还没有设置 overflow: hidden; 就换了个方法_(:3」∠)...
     */
    
    height: 20px;
    
    background-color: rgba(120, 120, 120, .5); // 随便挑一个常用的灰色做测试
}

2. 再放进 <div class="selected-container /> 中. 嗯嗯..放这里

@path serval/script/harusame-template.js

Template.editor = function () {
    // ...

    /*
     * before:
     * var $selected_container = SatoriDom.compile(e('div', {'class': 'selected-container'})
     */
    var $selected_container = SatoriDom.compile(e('div', {'class': 'selected-container'}, [
        e('div', {'class': 'selection-part'}),
        e('div', {'class': 'selection-part'}),
        e('div', {'class': 'selection-part'})
    ]))

    // ...
}

3. 嗯嗯... 这就是效果. 见图5-7

图5-7.png

4. 这里先模拟实际效果. 再把模拟的过程转化为用 js 来控制:
   选区的控制是通过改变 top left right 与 height 来实现的.
   见图5-5 中 (这里复制过来了..

图5-5.png

先规定一下:

• 选区中的最上面这行. 比如 1 3 7 行. 之后记为 $selection_top

• 选区中的中间的部分. 比如 8-9 行. 之后记为 $selection_middle

• 选区中的最下面这行. 比如 4 10 行. 之后记为 $selection_bottom

模拟过程比如像这样. 见图5-8:

图5-8.gif

可以看到由于样式方面的原因.(可能算是问题).. 计算选区视图大小的时候要额外算上行号所在的空间的宽度. 是 50px.

绘制视图的整个流程就是:

当 mousemove 或者 mouseup 的时候. 比对当前光标的位置 与 选区起点 是否出了偏差 (计算 logicalY)... 如果有就更新选区视图

1. 计算并存储两点间的 Y 上的差
   var diffY = point_end.logicalY - point_start.logicalY

2.1. 如果 diffY === 0. 更新
$selection_top 的 DOM 的 top left

2.2. 如果 diffY === 1. 更新
$selection_top 的 top left &&
$selection_bottom 的 top right

2.3. 如果 diffY > 1. 更新
$selection_top 的 top left &&
$selection_middle 的 top height &&
$selection_bottom 的 top right

JS

现在测试都基本没问题了. 如果测试内容对实际要做的东西会有干扰. 就考虑删掉哦.. 有以下这个:

还原为

然后在 template 中加入这个

@path serval/script/harusame-template.js

/**
 * 选区片段
 */
selectionPart: function () {
    return SatoriDom.compile(
        e('div', {'class': 'selection-part'})
    )
}

接下来把之前想要做的流程转换为代码..

@path serval/script/harusame-cursor.js

/**
 * 1. 光标本身的元素节点
 * 2. 之前所说的基准点可以做一个初始化.
 */
var Cursor = function (config) {
    // ...

    this.mousedown_point = {}   /* 2 */

    this.$selection_top = Template.selectionPart()
    this.$selection_middle = Template.selectionPart()
    this.$selection_bottom = Template.selectionPart()

    // ...
}

/**
 * 更新选区的 值 与 视图
 */
Cursor.prototype.updateSelection: function () {
    this.findSelection()
    this.updateSelectionView()
},

/**
 * 更新选区视图
 */
Cursor.prototype.updateSelectionView: function () {
    var point_start = this.selection_start
    var point_end = this.selection_end

    var diffY = point_end.logicalY - point_start.logicalY

    switch (diffY) {

        case 0:
            this.$selection_top.style.cssText =
                'top:' + point_start.psysicalY + 'px;' +
                'right:' + (750 - point_end.psysicalX) + 'px;' +
                'left:' + (50 + point_start.psysicalX) + 'px;' +
                'display:' + 'block;'

            this.$selection_middle.style.display = 'none'

            this.$selection_bottom.style.display = 'none'

            break

        case 1:
            this.$selection_top.style.cssText =
                'top:' + point_start.psysicalY + 'px;' +
                'right:' + 0 + 'px;' +
                'left:' + (50 + point_start.psysicalX) + 'px;' +
                'display: block;'

            this.$selection_middle.style.display = 'none'

            this.$selection_bottom.style.cssText =
                'top:' + point_end.psysicalY + 'px;' +
                'right:' + (750 - point_end.psysicalX) + 'px;' +
                'left:' + 50 + 'px;' +
                'display: block;'

            break

        default:
            this.$selection_top.style.cssText =
                'top:' + point_start.psysicalY + 'px;' +
                'right:' + 0 + 'px;' +
                'left:' + (50 + point_start.psysicalX) + 'px;' +
                'display: block;'

            this.$selection_middle.style.cssText =
                'top:' + (point_start.psysicalY + Line.line_height) + 'px;' +
                'left:' + 50 + 'px;' +
                'height:' + (point_end.psysicalY - point_start.psysicalY - Line.line_height) + 'px;' +
                'display: block;'

            this.$selection_bottom.style.cssText =
                'top:' + point_end.psysicalY + 'px;' +
                'right:' + (750 - point_end.psysicalX) + 'px;' +
                'left:' + 50 + 'px;' +
                'display: block;'

            break
    }
},

来看看有没有问题... 见 图5-9.

图5-9.gif

嗯... 选区应该没有什么问题.

说起来示例gif 里的内容都是无意义的数字之类的...因为复制粘贴什么的还没有做..就暂时用这些代替了..

接下来可能是 复制 剪切 粘贴 Home End ↑ ↓ ← → ...
感觉内容好多... 其实感觉依旧好水_(:3」∠)...

在做完这些最基础的功能之后... 重新调整与优化代码.. 之后再做多个光标.. 代码高亮&&智能提示 之类的东西

CHANGELOG

2017年8月10日14:14:00
F 在 getSelectionContent 中 修复了多余的 \n

上一篇
#4 从零开始制作在线 代码编辑器

下一篇
#6 从零开始制作在线 代码编辑器