From 7c09c533efedd7df58b5575fbf65ea2eed5e688b Mon Sep 17 00:00:00 2001 From: lumixraku Date: Mon, 13 May 2024 12:06:24 +0800 Subject: [PATCH] test: #677 --- .../src/components/sheets/spreadsheet.ts | 14 ++++----- packages/engine-render/src/viewport.ts | 30 ++++++++++++------- .../src/render/data-bar.render.ts | 2 +- .../src/render/icon.render.ts | 2 +- 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/packages/engine-render/src/components/sheets/spreadsheet.ts b/packages/engine-render/src/components/sheets/spreadsheet.ts index 9aa442cb459..bea1e0f7055 100644 --- a/packages/engine-render/src/components/sheets/spreadsheet.ts +++ b/packages/engine-render/src/components/sheets/spreadsheet.ts @@ -136,7 +136,6 @@ export class Spreadsheet extends SheetComponent { : undefined; const viewRanges = [spreadsheetSkeleton.getRowColumnSegmentByViewBound(viewportInfo?.cacheBound)]; const extensions = this.getExtensionsByOrder(); - for (const extension of extensions) { // const timeKey = `extension ${viewportInfo.viewPortKey}:${extension.constructor.name}`; // console.time(timeKey); @@ -232,8 +231,8 @@ export class Spreadsheet extends SheetComponent { * @param state */ override makeDirty(state: boolean = true) { + (this.getParent() as Scene)?.getViewports().forEach((vp) => vp.markDirty(state)); super.makeDirty(state); - (this.getParent() as Scene)?.getViewports().forEach((vp) => vp.markDirty()); if (state === false) { this._dirtyBounds = []; } @@ -245,7 +244,7 @@ export class Spreadsheet extends SheetComponent { } renderByViewport(mainCtx: UniverRenderingContext, viewportBoundsInfo: IViewportInfo, spreadsheetSkeleton: SpreadsheetSkeleton) { - const { diffBounds, diffX, diffY, viewPortPosition, isDirty, isForceDirty, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY } = viewportBoundsInfo as Required; + const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportBoundsInfo as Required; const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton; const { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform(); const bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio; @@ -257,12 +256,13 @@ export class Spreadsheet extends SheetComponent { const { left, top, right, bottom } = viewPortPosition; const dw = right - left + rowHeaderWidth; const dh = bottom - top + columnHeaderHeight; - + const isForceDirty = isViewportForceDirty || this.isForceDirty(); + const isDirty = isViewportDirty || this.isDirty(); if (diffBounds.length === 0 || (diffX === 0 && diffY === 0) || isForceDirty || isDirty) { if (isDirty || isForceDirty) { this.refreshCacheCanvas(viewportBoundsInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY }); } - } else if (diffBounds.length !== 0 || diffX !== 0 || diffY === 0) { + } else if (diffBounds.length !== 0 || diffX !== 0 || diffY !== 0) { // scrolling && no dirty this.paintNewAreaOfCacheCanvas(viewportBoundsInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeight, rowHeaderWidth, @@ -383,7 +383,6 @@ export class Spreadsheet extends SheetComponent { if (!spreadsheetSkeleton) { return; } - spreadsheetSkeleton.calculateWithoutClearingCache(viewportInfo); const segment = spreadsheetSkeleton.rowColumnSegment; @@ -394,7 +393,6 @@ export class Spreadsheet extends SheetComponent { ) { return; } - mainCtx.save(); @@ -434,7 +432,6 @@ export class Spreadsheet extends SheetComponent { * @param dy * @param dw * @param dh - * @returns */ protected _applyCache( cacheCanvas: Canvas, @@ -532,7 +529,6 @@ export class Spreadsheet extends SheetComponent { * draw gridlines * @param ctx * @param bounds - * @returns */ // eslint-disable-next-line max-lines-per-function private _drawAuxiliary(ctx: UniverRenderingContext, bounds?: IViewportInfo) { diff --git a/packages/engine-render/src/viewport.ts b/packages/engine-render/src/viewport.ts index e3e63a8a25c..9e2065dc2e0 100644 --- a/packages/engine-render/src/viewport.ts +++ b/packages/engine-render/src/viewport.ts @@ -172,7 +172,7 @@ export class Viewport { /** * viewbound of cache area, cache area is slightly bigger than viewbound. */ - private _cacheBound: IBoundRectNoAngle; + private _cacheBound: IBoundRectNoAngle | null; private _preCacheBound: IBoundRectNoAngle | null; /** @@ -245,7 +245,6 @@ export class Viewport { this._resizeHandler(); }); this._resizeHandler(); - // this._testDisplayCache(); } initCacheCanvas(props?: IViewProps) { @@ -273,8 +272,8 @@ export class Viewport { cacheCanvas.getCanvasEle().style.border = '1px solid black'; // 设置边框样式 cacheCanvas.getCanvasEle().style.transformOrigin = '100% 100%'; cacheCanvas.getCanvasEle().style.transform = 'scale(0.5)'; - cacheCanvas.getCanvasEle().style.translate = '20% 20%'; - cacheCanvas.getCanvasEle().style.opacity = '0.9'; + cacheCanvas.getCanvasEle().style.translate = '20% 0%'; + cacheCanvas.getCanvasEle().style.opacity = '1'; document.body.appendChild(cacheCanvas.getCanvasEle()); }; if (['viewMain', 'viewMainLeftTop', 'viewMainTop', 'viewMainLeft'].includes(this.viewportKey)) { @@ -387,6 +386,18 @@ export class Viewport { return this._cacheBound; } + set cacheBound(val) { + this._cacheBound = val; + } + + get preCacheBound() { + return this._preCacheBound; + } + + set preCacheBound(val: IBoundRectNoAngle | null) { + this._preCacheBound = val; + } + enable() { this._active = true; } @@ -433,10 +444,7 @@ export class Viewport { // } // }); this._setWithAndHeight(position); - - this._resizeCacheCanvasAndScrollBar(); - this.markForceDirty(); } setPadding(param: IPosition) { @@ -800,10 +808,9 @@ export class Viewport { const viewBound = { - // 这里若对 top left 做 Math.floor 对 right bottom Math.ceil 操作, 放大后, 贴图会模糊 - top: topLeft.y, left: topLeft.x, right: bottomRight.x, + top: topLeft.y, bottom: bottomRight.y, }; this._viewBound = viewBound; @@ -1083,6 +1090,8 @@ export class Viewport { const canvasW = width !== 0 ? width + this.bufferEdgeX * 2 * scaleX : 0; const canvasH = height !== 0 ? height + this.bufferEdgeY * 2 * scaleY : 0; this._cacheCanvas?.setSize(canvasW, canvasH); + this.cacheBound = null; + this.preCacheBound = null; const contentWidth = (this._scene.width - this._paddingEndX) * this._scene.scaleX; const contentHeight = (this._scene.height - this._paddingEndY) * this._scene.scaleY; @@ -1267,9 +1276,9 @@ export class Viewport { expandBounds(value: { top: number; left: number; bottom: number; right: number }) { const onePixelFix = FIX_ONE_PIXEL_BLUR_OFFSET * 2; return { + right: value.right + this.bufferEdgeX + onePixelFix, left: Math.max(this.leftOrigin, value.left - this.bufferEdgeX) - onePixelFix, top: Math.max(this.topOrigin, value.top - this.bufferEdgeY) - onePixelFix, - right: value.right + this.bufferEdgeX + onePixelFix, bottom: value.bottom + this.bufferEdgeY + onePixelFix, } as IBoundRectNoAngle; } @@ -1284,6 +1293,7 @@ export class Viewport { private _shouldCacheUpdate(viewBound: IBoundRectNoAngle, cacheBounds: IBoundRectNoAngle | null, diffX: number, diffY: number): number { + if (!this._cacheCanvas) return 0b00; if (!cacheBounds) return 0b01; const viewBoundOutCacheArea = !(viewBound.right <= cacheBounds.right && viewBound.top >= cacheBounds.top && viewBound.left >= cacheBounds.left && viewBound.bottom <= cacheBounds.bottom) diff --git a/packages/sheets-conditional-formatting/src/render/data-bar.render.ts b/packages/sheets-conditional-formatting/src/render/data-bar.render.ts index 68d30dd4ec1..44b17d2717e 100644 --- a/packages/sheets-conditional-formatting/src/render/data-bar.render.ts +++ b/packages/sheets-conditional-formatting/src/render/data-bar.render.ts @@ -42,7 +42,7 @@ export class DataBar extends SheetExtension { return false; } ctx.save(); - ctx.globalCompositeOperation = 'destination-over'; + // ctx.globalCompositeOperation = 'destination-over'; Range.foreach(spreadsheetSkeleton.rowColumnSegment, (row, col) => { const cellData = worksheet.getCell(row, col) as IDataBarCellData; if (cellData && cellData.dataBar) { diff --git a/packages/sheets-conditional-formatting/src/render/icon.render.ts b/packages/sheets-conditional-formatting/src/render/icon.render.ts index 6776aed1ac2..3bf3184d768 100644 --- a/packages/sheets-conditional-formatting/src/render/icon.render.ts +++ b/packages/sheets-conditional-formatting/src/render/icon.render.ts @@ -54,7 +54,7 @@ export class ConditionalFormattingIcon extends SheetExtension { return false; } ctx.save(); - ctx.globalCompositeOperation = 'destination-over'; + // ctx.globalCompositeOperation = 'destination-over'; Range.foreach(spreadsheetSkeleton.rowColumnSegment, (row, col) => { const cellData = worksheet.getCell(row, col) as IIconSetCellData; if (cellData?.iconSet) {