jingrow/jingrow
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

whiteboard编辑元素文本时保持图形元素可见

Browse Source
This commit is contained in:
jingrow 2026-05-04 13:27:03 +08:00
parent 234320fa51
commit c054c49fa5
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/core/features/whiteboard/renderer/BoardRenderer.ts
View File

@ -254,9 +254,10 @@ export class BoardRenderer {
// ===== 元素绘制 =====
private drawElement(el: BoardElement, board: BoardModel): void {
private drawElement(el: BoardElement, board: BoardModel, skipText = false): void {
// Skip rendering the element currently being edited (textarea takes over)
if (el.id === this.editingId) return
// But keep drawing the shape so the textarea has a visible background
if (el.id === this.editingId) skipText = true
this.ctx.save()
@ -275,11 +276,11 @@ export class BoardRenderer {
}
switch (el.type) {
case 'rectangle': this.drawRectangle(el); break
case 'ellipse': this.drawEllipse(el); break
case 'diamond': this.drawDiamond(el); break
case 'rectangle': this.drawRectangle(el, skipText); break
case 'ellipse': this.drawEllipse(el, skipText); break
case 'diamond': this.drawDiamond(el, skipText); break
case 'text': this.drawTextElement(el); break
case 'sticky-note': this.drawStickyNote(el); break
case 'sticky-note': this.drawStickyNote(el, skipText); break
case 'arrow': this.drawArrowElement(el, board); break
case 'line': this.drawLineElement(el); break
case 'freehand': this.drawFreehand(el); break
@ -291,7 +292,7 @@ export class BoardRenderer {
}
/** 绘制矩形 */
private drawRectangle(el: RectangleElement): void {
private drawRectangle(el: RectangleElement, skipText = false): void {
const { x, y, width, height, style } = el
const radius = Math.min(style.borderRadius ?? 4, width / 2, height / 2)
@ -312,14 +313,14 @@ export class BoardRenderer {
this.ctx.setLineDash([])
}
// 文本
if (el.text) {
// 文本（编辑时跳过，由 textarea 接管）
if (!skipText && el.text) {
this.drawElementText(el)
}
}
/** 绘制椭圆 */
private drawEllipse(el: EllipseElement): void {
private drawEllipse(el: EllipseElement, skipText = false): void {
const cx = el.x + el.width / 2
const cy = el.y + el.height / 2
const rx = el.width / 2
@ -341,13 +342,14 @@ export class BoardRenderer {
this.ctx.setLineDash([])
}
if (el.text) {
// 文本（编辑时跳过，由 textarea 接管）
if (!skipText && el.text) {
this.drawElementText(el)
}
}
/** 绘制菱形 */
private drawDiamond(el: DiamondElement): void {
private drawDiamond(el: DiamondElement, skipText = false): void {
const cx = el.x + el.width / 2
const cy = el.y + el.height / 2
const hw = el.width / 2
@ -373,7 +375,8 @@ export class BoardRenderer {
this.ctx.setLineDash([])
}
if (el.text) {
// 文本（编辑时跳过，由 textarea 接管）
if (!skipText && el.text) {
this.drawElementText(el)
}
}
@ -418,7 +421,7 @@ export class BoardRenderer {
}
/** 绘制便利贴 */
private drawStickyNote(el: StickyNoteElement): void {
private drawStickyNote(el: StickyNoteElement, skipText = false): void {
const { x, y, width, height, style } = el
// 阴影
@ -447,8 +450,8 @@ export class BoardRenderer {
this.ctx.closePath()
this.ctx.fill()
// 文本
if (el.text) {
// 文本（编辑时跳过，由 textarea 接管）
if (!skipText && el.text) {
this.drawElementText(el, 12)
}
}