代码编辑器光标与选区设计完全指南

/* 位置 (Position) 表示编辑器中的一个位置 */
class Position {
    constructor(line, column) {
        this.line = line;   // 行号（从0开始）
        this.column = column; // 列号（从0开始）
    }
}

/* Range 表示一个选区范围 */
class Range {
    constructor(start, end) {
        this.start = start; // 选区起始位置
        this.end = end;   // 选区结束位置
    }

    /* 获取选区文本 */
    getText() {
        return Document.getTextInRange(this);
    }

    /* 判断是否为空（光标位置）*/
    isEmpty() {
        return this.start.line === this.end.line &&
               this.start.column === this.end.column;
    }
}

/* 光标渲染配置 */
const CURSOR_CONFIG = {
    blinkDelay: 530,        // 闪烁间隔（毫秒）
    blinkOn: 0.5,            // 闪烁占空比
    width: 2,                  // 光标宽度（像素）
    color: '#34d399',        // 光标颜色
    style: 'block'           // block | line | underline
};

/* 计算光标的屏幕坐标 */
function getCursorCoordinates(position, editor) {
    const lineElement = editor.getLineElement(position.line);
    const font = editor.getFont();
    const lineHeight = editor.getLineHeight();

    // 获取该位置之前的字符宽度
    const textBeforeCursor = lineElement.getText().slice(0, position.column);
    const charWidth = measureTextWidth(textBeforeCursor, font);

    return {
        x: lineElement.getBoundingClientRect().left + charWidth,
        y: position.line * lineHeight,
        height: lineHeight
    };
}

/* 选区渲染管理器 */
class SelectionRenderer {
    constructor(editor) {
        this.editor = editor;
        this.decorations = [];
    }

    /* 更新选区渲染 */
    updateSelections(selections) {
        // 清除旧的高亮
        this.clearDecorations();

        // 为每个选区创建高亮装饰
        selections.forEach(selection => {
            if (selection.isEmpty()) {
                // 空选区只显示光标
                this.renderCursor(selection.start);
            } else {
                // 非空选区显示高亮
                this.renderSelection(selection);
            }
        });
    }

    renderSelection(selection) {
        const startPos = getCoordinates(selection.start);
        const endPos = getCoordinates(selection.end);

        // 创建高亮元素
        const decoration = document.createElement('div');
        decoration.className = 'selection-highlight';
        decoration.style.left = startPos.x + 'px';
        decoration.style.top = startPos.y + 'px';
        decoration.style.width = (endPos.x - startPos.x) + 'px';
        decoration.style.height = endPos.height + 'px';

        this.editor.getContentDom().appendChild(decoration);
        this.decorations.push(decoration);
    }
}

/* 多光标管理 */
class MultiCursorManager {
    constructor(editor) {
        this.editor = editor;
        this.primaryCursor = null;
        this.secondaryCursors = [];
    }

    /* 添加次级光标（Alt+Click 或 Ctrl+D）*/
    addSecondaryCursor(position) {
        const cursor = new Cursor(position);
        this.secondaryCursors.push(cursor);
        this.renderCursors();
    }

    /* 在所有光标位置插入相同文本 */
    insertAtAllCursors(text) {
        const positions = this.getAllCursorPositions();
        const edit = new EditOperation();

        positions.forEach(pos => {
            edit.insert(pos, text);
        });

        this.editor.applyEdit(edit);
    }

    getAllCursorPositions() {
        const positions = [this.primaryCursor.position];
        this.secondaryCursors.forEach(cursor => {
            positions.push(cursor.position);
        });
        return positions;
    }
}

/* 光标移动命令 */
const CursorCommands = {
    /* 移动到行首 */
    moveToLineStart: (position, document) => {
        return new Position(position.line, 0);
    },

    /* 移动到行尾 */
    moveToLineEnd: (position, document) => {
        const lineLength = document.getLineLength(position.line);
        return new Position(position.line, lineLength);
    },

    /* 移动到单词开头 */
    moveToWordStart: (position, document) => {
        const line = document.getLine(position.line);
        let column = position.column;

        // 向前查找单词边界
        while (column > 0 && isWordChar(line[column - 1])) {
            column--;
        }

        return new Position(position.line, column);
    },

    /* 移动到单词结尾 */
    moveToWordEnd: (position, document) => {
        const line = document.getLine(position.line);
        let column = position.column;

        while (column < line.length && isWordChar(line[column])) {
            column++;
        }

        return new Position(position.line, column);
    }
};