landaiqing/voidraft
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 20 Wiki Activity

🐛 Fixed some known issues

Browse Source
This commit is contained in:
landaiqing
2025-12-12 22:56:22 +08:00
parent 4e611db349
commit d16905c0a3
6 changed files with 214 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/views/editor/extensions/codeblock/decorations.ts
View File

@@ -150,15 +150,19 @@ const blockLayer = layer({
// 转换为视口坐标进行后续计算
const fromCoordsTop = fromLineBlock.top + view.documentTop;
let toCoordsBottom = toLineBlock.bottom + view.documentTop;
// 对最后一个块进行特殊处理，让它直接延伸到底部
if (idx === blocks.length - 1) {
const editorHeight = view.dom.clientHeight;
const contentBottom = toCoordsBottom - view.documentTop + view.documentPadding.top;
// 计算需要添加到最后一个块的额外高度，以覆盖 scrollPastEnd 添加的额外滚动空间
// scrollPastEnd 会在文档底部添加相当于 scrollDOM.clientHeight 的额外空间
// 当滚动到最底部时，顶部仍会显示一行（defaultLineHeight），需要减去这部分
const editorHeight = view.scrollDOM.clientHeight;
const extraHeight = editorHeight - (
view.defaultLineHeight + // 当滚动到最底部时，顶部仍显示一行
view.documentPadding.top +
8 // 额外的边距调整
);
// 让最后一个块直接延伸到编辑器底部
if (contentBottom < editorHeight) {
const extraHeight = editorHeight - contentBottom - 10;
if (extraHeight > 0) {
toCoordsBottom += extraHeight;
}
}

152
frontend/src/views/editor/extensions/minimap/blockManager.ts
View File

@@ -11,6 +11,7 @@ import {
Highlight,
LineSpan,
FontInfo,
UpdateFontInfoRequest,
} from './worker/protocol';
import crelt from 'crelt';
@@ -26,6 +27,11 @@ interface Block {
rendering: boolean;
requestId: number;
lastUsed: number; // LRU 时间戳
// 高亮缓存
cachedHighlights: Highlight[] | null;
cachedLines: LineSpan[][] | null;
cachedTextSlice: string | null;
cachedTextOffset: number;
}
export class BlockManager {
@@ -34,6 +40,7 @@ export class BlockManager {
private fontInfoMap = new Map<string, FontInfo>();
private fontDirty = true;
private fontVersion = 0;
private sentFontTags = new Set<string>(); // 已发送给 Worker 的字体标签
private measureCache: { charWidth: number; lineHeight: number; version: number } | null = null;
private displayText: 'blocks' | 'characters' = 'characters';
private themeClasses: Set<string>;
@@ -150,6 +157,10 @@ export class BlockManager {
markAllDirty(): void {
for (const block of this.blocks.values()) {
block.dirty = true;
// 清除缓存，强制重新收集数据
block.cachedHighlights = null;
block.cachedLines = null;
block.cachedTextSlice = null;
}
}
@@ -185,11 +196,19 @@ export class BlockManager {
this.blocks.delete(index);
} else if (affectedBlocks.has(index)) {
block.dirty = true;
// 清除缓存
block.cachedHighlights = null;
block.cachedLines = null;
block.cachedTextSlice = null;
if (hasLineCountChange) {
markRest = true; // 从这个块开始，后续块都需要更新
}
} else if (markRest) {
block.dirty = true;
// 清除缓存
block.cachedHighlights = null;
block.cachedLines = null;
block.cachedTextSlice = null;
}
}
@@ -320,6 +339,10 @@ export class BlockManager {
rendering: false,
requestId: 0,
lastUsed: now,
cachedHighlights: null,
cachedLines: null,
cachedTextSlice: null,
cachedTextOffset: 0,
};
this.blocks.set(index, block);
} else {
@@ -344,51 +367,65 @@ export class BlockManager {
this.renderingCount++;
const { startLine, endLine } = block;
const linesSnapshot = getLinesSnapshot(state);
const tree = syntaxTree(state);
// Collect highlights
const highlights: Highlight[] = [];
if (tree.length > 0 && startLine <= state.doc.lines) {
const highlighter: Highlighter = {
style: (tags) => highlightingFor(state, tags),
};
const startPos = state.doc.line(startLine).from;
const endPos = state.doc.line(Math.min(endLine, state.doc.lines)).to;
let highlights: Highlight[];
let lines: LineSpan[][];
let textSlice: string;
let textOffset: number;
highlightTree(tree, highlighter, (from, to, tags) => {
highlights.push({ from, to, tags });
}, startPos, endPos);
}
// 只有当块是 dirty 时才重新收集数据，否则使用缓存
if (block.dirty || !block.cachedHighlights) {
const linesSnapshot = getLinesSnapshot(state);
const tree = syntaxTree(state);
// Extract relevant lines
const startIdx = startLine - 1;
const endIdx = Math.min(endLine, linesSnapshot.length);
const lines: LineSpan[][] = linesSnapshot.slice(startIdx, endIdx).map(line =>
line.map(span => ({ from: span.from, to: span.to, folded: span.folded }))
);
// Collect highlights
highlights = [];
if (tree.length > 0 && startLine <= state.doc.lines) {
const highlighter: Highlighter = {
style: (tags) => highlightingFor(state, tags),
};
const startPos = state.doc.line(startLine).from;
const endPos = state.doc.line(Math.min(endLine, state.doc.lines)).to;
// Get text slice
let textOffset = 0;
let textEnd = 0;
if (lines.length > 0 && lines[0].length > 0) {
textOffset = lines[0][0].from;
const lastLine = lines[lines.length - 1];
if (lastLine.length > 0) {
textEnd = lastLine[lastLine.length - 1].to;
highlightTree(tree, highlighter, (from, to, tags) => {
highlights.push({ from, to, tags });
}, startPos, endPos);
}
}
const textSlice = state.doc.sliceString(textOffset, textEnd);
// Build font info map
const fontInfoMap: Record<string, FontInfo> = {};
for (const hl of highlights) {
if (!fontInfoMap[hl.tags]) {
const info = this.getFontInfo(hl.tags);
fontInfoMap[hl.tags] = info;
// Extract relevant lines
const startIdx = startLine - 1;
const endIdx = Math.min(endLine, linesSnapshot.length);
lines = linesSnapshot.slice(startIdx, endIdx).map(line =>
line.map(span => ({ from: span.from, to: span.to, folded: span.folded }))
);
// Get text slice
textOffset = 0;
let textEnd = 0;
if (lines.length > 0 && lines[0].length > 0) {
textOffset = lines[0][0].from;
const lastLine = lines[lines.length - 1];
if (lastLine.length > 0) {
textEnd = lastLine[lastLine.length - 1].to;
}
}
textSlice = state.doc.sliceString(textOffset, textEnd);
// 缓存数据
block.cachedHighlights = highlights;
block.cachedLines = lines;
block.cachedTextSlice = textSlice;
block.cachedTextOffset = textOffset;
} else {
// 使用缓存的数据
highlights = block.cachedHighlights;
lines = block.cachedLines!;
textSlice = block.cachedTextSlice!;
textOffset = block.cachedTextOffset;
}
fontInfoMap[''] = this.getFontInfo('');
// 确保字体信息已发送给 Worker
this.ensureFontInfoSent(highlights);
const blockLines = endLine - startLine + 1;
const request: BlockRequest = {
@@ -403,8 +440,6 @@ export class BlockManager {
lines,
textSlice,
textOffset,
fontInfoMap,
defaultFont: fontInfoMap[''],
displayText: this.displayText,
charWidth,
lineHeight,
@@ -414,6 +449,43 @@ export class BlockManager {
this.worker.postMessage(request);
}
/**
* 确保字体信息已发送给 Worker
* 增量发送：只发送新的标签
*/
private ensureFontInfoSent(highlights: Highlight[]): void {
if (!this.worker) return;
// 收集新的标签
const newTags: string[] = [];
for (const hl of highlights) {
if (!this.sentFontTags.has(hl.tags)) {
newTags.push(hl.tags);
}
}
// 默认字体标签
if (!this.sentFontTags.has('')) {
newTags.push('');
}
// 如果没有新标签，不需要发送
if (newTags.length === 0) return;
// 构建新标签的字体信息
const fontInfoMap: Record<string, FontInfo> = {};
for (const tag of newTags) {
fontInfoMap[tag] = this.getFontInfo(tag);
this.sentFontTags.add(tag);
}
const updateRequest: UpdateFontInfoRequest = {
type: 'updateFontInfo',
fontInfoMap,
defaultFont: this.getFontInfo(''),
};
this.worker.postMessage(updateRequest);
}
private evictOldBlocks(): void {
if (this.blocks.size <= MAX_BLOCKS) return;
@@ -432,6 +504,7 @@ export class BlockManager {
private refreshFontCache(): void {
this.fontInfoMap.clear();
this.measureCache = null;
this.sentFontTags.clear(); // 需要重新发送字体信息给 Worker
// 注意：fontDirty 在成功渲染块后才设为 false
this.fontVersion++;
this.markAllDirty();
@@ -496,3 +569,4 @@ export class BlockManager {
}
}

20
frontend/src/views/editor/extensions/minimap/worker/block.worker.ts
View File

@@ -6,6 +6,10 @@ import {
FontInfo,
} from './protocol';
// 缓存字体信息，只在主题变化时更新
let cachedFontInfoMap: Record<string, FontInfo> = {};
let cachedDefaultFont: FontInfo = { color: '#000', font: '12px monospace', lineHeight: 14 };
function post(msg: ToMainMessage, transfer?: Transferable[]): void {
self.postMessage(msg, { transfer });
}
@@ -107,14 +111,16 @@ function renderBlock(request: BlockRequest): void {
endLine,
width,
height,
fontInfoMap,
defaultFont,
displayText,
charWidth,
lineHeight,
gutterOffset,
} = request;
// 使用缓存的字体信息
const fontInfoMap = cachedFontInfoMap;
const defaultFont = cachedDefaultFont;
// Create OffscreenCanvas for this block
const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext('2d');
@@ -245,12 +251,22 @@ function drawTextBlocks(
function handleMessage(msg: ToWorkerMessage): void {
switch (msg.type) {
case 'init':
// 重置字体缓存
cachedFontInfoMap = {};
cachedDefaultFont = { color: '#000', font: '12px monospace', lineHeight: 14 };
post({ type: 'ready' });
break;
case 'updateFontInfo':
// 增量合并字体信息
Object.assign(cachedFontInfoMap, msg.fontInfoMap);
cachedDefaultFont = msg.defaultFont;
break;
case 'renderBlock':
renderBlock(msg);
break;
case 'destroy':
// 清理缓存
cachedFontInfoMap = {};
break;
}
}

13
frontend/src/views/editor/extensions/minimap/worker/protocol.ts
View File

@@ -25,6 +25,15 @@ export interface FontInfo {
lineHeight: number;
}
/**
* 更新字体信息（主题变化时发送一次）
*/
export interface UpdateFontInfoRequest {
type: 'updateFontInfo';
fontInfoMap: Record<string, FontInfo>;
defaultFont: FontInfo;
}
export interface BlockRequest {
type: 'renderBlock';
blockId: number;
@@ -37,8 +46,6 @@ export interface BlockRequest {
lines: LineSpan[][];
textSlice: string;
textOffset: number;
fontInfoMap: Record<string, FontInfo>;
defaultFont: FontInfo;
displayText: 'blocks' | 'characters';
charWidth: number;
lineHeight: number;
@@ -53,7 +60,7 @@ export interface DestroyRequest {
type: 'destroy';
}
export type ToWorkerMessage = BlockRequest | InitRequest | DestroyRequest;
export type ToWorkerMessage = BlockRequest | InitRequest | DestroyRequest | UpdateFontInfoRequest;
export interface BlockComplete {
type: 'blockComplete';