鼠标交互事件vscode 鼠标移入后矩形由下往上生长

要实现鼠标移入后矩形由下往上生长的效果，可以使用 VS Code 提供的扩展 API 中的 `window.createTextEditorDecorationType()` 方法创建一个文本编辑器装饰类型，再将其应用到编辑器中。

具体的步骤如下：

1. 在扩展的 `activate()` 方法中，使用 `window.createTextEditorDecorationType()` 方法创建一个文本编辑器装饰类型，指定其样式。例如，可以设置一个矩形的背景颜色、边框颜色和边框宽度等。

const decorationType = vscode.window.createTextEditorDecorationType({
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    borderColor: '#fff',
    borderWidth: '1px',
    borderStyle: 'solid'
});

2. 在 `activate()` 方法中，注册一个鼠标移入事件监听器，使用 `TextEditor.onMouseMove()` 方法监听鼠标移动事件。在监听器中，获取鼠标所在的文本行号和列号，并使用 `TextEditorDecorationType` 的 `range` 属性设置装饰范围，即要添加装饰的位置和长度。

let mouseMoveDisposable = vscode.window.onDidChangeTextEditorSelection(event => {
    let editor = vscode.window.activeTextEditor;
    if (!editor) {
        return;
    }

    let position = editor.selection.active;
    let line = editor.document.lineAt(position);
    let start = line.range.start;
    let end = new vscode.Position(start.line, start.character + 1);
    let range = new vscode.Range(start, end);
    let decoration = { range };

    editor.setDecorations(decorationType, [decoration]);
});

3. 在 `deactivate()` 方法中，取消注册鼠标移入事件监听器，防止内存泄漏。

export function deactivate() {
    if (mouseMoveDisposable) {
        mouseMoveDisposable.dispose();
    }
}

这样就可以实现鼠标移入后矩形由下往上生长的效果了。完整的示例代码如下：

import * as vscode from 'vscode';

let decorationType: vscode.TextEditorDecorationType;
let mouseMoveDisposable: vscode.Disposable;

export function activate(context: vscode.ExtensionContext) {
    decorationType = vscode.window.createTextEditorDecorationType({
        backgroundColor: 'rgba(255, 255, 255, 0.2)',
        borderColor: '#fff',
        borderWidth: '1px',
        borderStyle: 'solid'
    });

    mouseMoveDisposable = vscode.window.onDidChangeTextEditorSelection(event => {
        let editor = vscode.window.activeTextEditor;
        if (!editor) {
            return;
        }

        let position = editor.selection.active;
        let line = editor.document.lineAt(position);
        let start = line.range.start;
        let end = new vscode.Position(start.line, start.character + 1);
        let range = new vscode.Range(start, end);
        let decoration = { range };

        editor.setDecorations(decorationType, [decoration]);
    });
}

export function deactivate() {
    if (mouseMoveDisposable) {
        mouseMoveDisposable.dispose();
    }
}