From a7901d71faf161edc7b72b8fe43278b438b1b514 Mon Sep 17 00:00:00 2001 From: lumixraku Date: Tue, 14 May 2024 13:08:33 +0800 Subject: [PATCH] fix: #700 --- .../src/components/sheets/spreadsheet.ts | 31 ++++++++----------- packages/engine-render/src/viewport.ts | 6 ++-- 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/engine-render/src/components/sheets/spreadsheet.ts b/packages/engine-render/src/components/sheets/spreadsheet.ts index bea1e0f70551..fdb0697bc9b6 100644 --- a/packages/engine-render/src/components/sheets/spreadsheet.ts +++ b/packages/engine-render/src/components/sheets/spreadsheet.ts @@ -118,7 +118,6 @@ export class Spreadsheet extends SheetComponent { * diffRange 根据 diffCacheBounds 得到 * @param ctx * @param viewportInfo - * @returns */ override draw(ctx: UniverRenderingContext, viewportInfo: IViewportInfo) { // const { parent = { scaleX: 1, scaleY: 1 } } = this; @@ -128,7 +127,7 @@ export class Spreadsheet extends SheetComponent { if (!spreadsheetSkeleton) { return; } - + this._drawAuxiliary(ctx, viewportInfo); const parentScale = this.getParentScale(); const diffRanges = this._refreshIncrementalState && viewportInfo?.diffCacheBounds @@ -243,8 +242,8 @@ export class Spreadsheet extends SheetComponent { this._dirtyBounds = dirtyBounds; } - renderByViewport(mainCtx: UniverRenderingContext, viewportBoundsInfo: IViewportInfo, spreadsheetSkeleton: SpreadsheetSkeleton) { - const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportBoundsInfo as Required; + renderByViewport(mainCtx: UniverRenderingContext, viewportInfo: IViewportInfo, spreadsheetSkeleton: SpreadsheetSkeleton) { + const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportInfo as Required; const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton; const { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform(); const bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio; @@ -252,7 +251,6 @@ export class Spreadsheet extends SheetComponent { const cacheCtx = cacheCanvas.getContext(); cacheCtx.save(); - const { left, top, right, bottom } = viewPortPosition; const dw = right - left + rowHeaderWidth; const dh = bottom - top + columnHeaderHeight; @@ -260,15 +258,15 @@ export class Spreadsheet extends SheetComponent { 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 }); + this.refreshCacheCanvas(viewportInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY }); } } else if (diffBounds.length !== 0 || diffX !== 0 || diffY !== 0) { // scrolling && no dirty - this.paintNewAreaOfCacheCanvas(viewportBoundsInfo, { + this.paintNewAreaOfCacheCanvas(viewportInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY, scaleX, scaleY, columnHeaderHeight, rowHeaderWidth, }); } - // support for browser native zoom + // support for browser native zoom (only windows has this problem) const sourceLeft = bufferEdgeSizeX * Math.min(1, window.devicePixelRatio); const sourceTop = bufferEdgeSizeY * Math.min(1, window.devicePixelRatio); this._applyCache(cacheCanvas, mainCtx, sourceLeft, sourceTop, dw, dh, left, top, dw, dh); @@ -344,7 +342,7 @@ export class Spreadsheet extends SheetComponent { /** * 整个 viewport 重绘 */ - refreshCacheCanvas(viewportBoundsInfo: IViewportInfo, param: { + refreshCacheCanvas(viewportInfo: IViewportInfo, param: { cacheCanvas: Canvas; cacheCtx: UniverRenderingContext; mainCtx: UniverRenderingContext; topOrigin: number; leftOrigin: number; @@ -368,7 +366,7 @@ export class Spreadsheet extends SheetComponent { cacheCtx.translateWithPrecision(m.e / m.a - leftOrigin + bufferEdgeX, m.f / m.d - topOrigin + bufferEdgeY); // extension 绘制时按照内容的左上角计算, 不考虑 rowHeaderWidth - this.draw(cacheCtx, viewportBoundsInfo); + this.draw(cacheCtx, viewportInfo); cacheCtx.restore(); } @@ -399,7 +397,6 @@ export class Spreadsheet extends SheetComponent { const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton; mainCtx.translateWithPrecision(rowHeaderWidth, columnHeaderHeight); - this._drawAuxiliary(mainCtx, viewportInfo); const { viewPortKey } = viewportInfo; // scene --> layer, getObjects --> viewport.render(object) --> spreadsheet @@ -450,27 +447,25 @@ export class Spreadsheet extends SheetComponent { } const pixelRatio = cacheCanvas.getPixelRatio(); - const cacheCtx = cacheCanvas.getContext(); cacheCtx.save(); ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); cacheCtx.setTransform(1, 0, 0, 1, 0, 0); - // Math.round(num * scale) / scale; const fn = (num: number, scale: number) => { - return Math.round(num * scale) / scale; + return Math.round(num * scale); }; ctx.imageSmoothingEnabled = false; // ctx.imageSmoothingEnabled = true; // ctx.imageSmoothingQuality = 'high'; ctx.drawImage( cacheCanvas.getCanvasEle(), - fn(sx, pixelRatio) * pixelRatio, - fn(sy, pixelRatio) * pixelRatio, + fn(sx, pixelRatio), + fn(sy, pixelRatio), sw * pixelRatio, sh * pixelRatio, - fn(dx, pixelRatio) * pixelRatio, - fn(dy, pixelRatio) * pixelRatio, + fn(dx, pixelRatio), + fn(dy, pixelRatio), dw * pixelRatio, dh * pixelRatio ); diff --git a/packages/engine-render/src/viewport.ts b/packages/engine-render/src/viewport.ts index cdf57105b19e..a05a5715b930 100644 --- a/packages/engine-render/src/viewport.ts +++ b/packages/engine-render/src/viewport.ts @@ -268,8 +268,8 @@ export class Viewport { cacheCanvas.getCanvasEle().style.zIndex = '100'; cacheCanvas.getCanvasEle().style.position = 'fixed'; cacheCanvas.getCanvasEle().style.background = '#fff'; - cacheCanvas.getCanvasEle().style.pointerEvents = 'none'; // 禁用事件响应 - cacheCanvas.getCanvasEle().style.border = '1px solid black'; // 设置边框样式 + cacheCanvas.getCanvasEle().style.pointerEvents = 'none'; + 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% 0%'; @@ -881,7 +881,7 @@ export class Viewport { } - // eslint-disable-next-line complexity + // eslint-disable-next-line complexity, max-lines-per-function onMouseWheel(evt: IWheelEvent, state: EventState) { if (!this._scrollBar || this.isActive === false) { return;