From 742359edf34a83ca705fdbf2d70ce58140d31134 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Wed, 24 Nov 2021 19:06:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BC=98=E5=8C=96=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E9=80=9F=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/core/draw/Draw.ts | 35 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index b34bea8..a624b6e 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -175,8 +175,8 @@ export class Draw { rowFlex: this.elementList?.[1]?.rowFlex }) } + this.ctx.save() for (let i = 0; i < this.elementList.length; i++) { - this.ctx.save() const curRow: IRow = rowList[rowList.length - 1] const element = this.elementList[i] const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin) @@ -236,8 +236,8 @@ export class Draw { } curRow.elementList.push(rowElement) } - this.ctx.restore() } + this.ctx.restore() this.rowList = rowList } @@ -248,6 +248,18 @@ export class Draw { isSetCursor = true, isComputeRowList = true } = payload || {} + // 计算行信息 + const { margins } = this.options + if (isComputeRowList) { + this._computeRowList() + // 计算高度是否超出 + const rowHeight = this.rowList.reduce((pre, cur) => cur.height + pre, 0) + if (rowHeight > this.canvas.height - margins[0] - margins[2]) { + const height = Math.ceil(rowHeight + margins[0] + margins[2]) + this.canvas.height = height + this.canvas.style.height = `${height}px` + } + } // 清除光标等副作用 this.cursor.recoveryCursor() this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) @@ -258,13 +270,8 @@ export class Draw { // 绘制背景 this.background.render(canvasRect) // 绘制页边距 - const { margins } = this.options const leftTopPoint: [number, number] = [margins[3], margins[0]] this.margin.render(canvasRect) - // 计算行信息 - if (isComputeRowList) { - this._computeRowList() - } // 渲染元素 let x = leftTopPoint[0] let y = leftTopPoint[1] @@ -333,7 +340,6 @@ export class Draw { x = leftTopPoint[0] y += curRow.height } - // 搜索匹配绘制 if (this.searchMatchList) { this.search.render() @@ -346,19 +352,6 @@ export class Draw { this.position.setCursorPosition(positionList[curIndex!] || null) this.cursor.drawCursor() } - // canvas高度自适应计算 - const lastPosition = positionList[positionList.length - 1] - const { coordinate: { leftBottom, leftTop } } = lastPosition - if (leftBottom[1] > this.canvas.height - margins[2]) { - const height = Math.ceil(leftBottom[1] + (leftBottom[1] - leftTop[1]) + margins[2]) - this.canvas.height = height - this.canvas.style.height = `${height}px` - this.render({ - curIndex, - isSubmitHistory: false, - isComputeRowList: false - }) - } // 历史记录用于undo、redo if (isSubmitHistory) { const self = this