test: #677

dream-num · May 14, 2024 · 4b411d1 · 4b411d1
1 parent bd841eb
commit 4b411d1
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 28 deletions.
diff --git a/packages/engine-render/src/components/docs/doc-component.ts b/packages/engine-render/src/components/docs/doc-component.ts
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import type { Nullable } from '@univerjs/core';
-
 import { RENDER_CLASS_TYPE } from '../../basics/const';
 import type { IDocumentSkeletonGlyph, IDocumentSkeletonLine, IDocumentSkeletonPage } from '../../basics/i-document-skeleton-cached';
 import { PageLayoutType } from '../../basics/i-document-skeleton-cached';
@@ -148,5 +146,5 @@ export abstract class DocComponent extends RenderComponent<
         return false;
     }
 
-    protected abstract _draw(ctx: UniverRenderingContext, bounds?: IViewportBound): void;
+    protected abstract _draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
 }
diff --git a/packages/engine-render/src/components/sheets/sheet-component.ts b/packages/engine-render/src/components/sheets/sheet-component.ts
@@ -82,7 +82,7 @@ export abstract class SheetComponent extends RenderComponent<SpreadsheetSkeleton
         endColumn: number
     ): Nullable<{ startRow: number; startColumn: number; endRow: number; endColumn: number }>;
 
-    protected abstract _draw(ctx: UniverRenderingContext, bounds?: IViewportBound): void;
+    protected abstract _draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
 
     /**
      * TODO: DR-Univer, fix as unknown as
@@ -94,7 +94,7 @@ export abstract class SheetComponent extends RenderComponent<SpreadsheetSkeleton
 }
 
 export abstract class SpreadsheetHeader extends SheetComponent {
-    protected override _draw(ctx: UniverRenderingContext, bounds?: IViewportBound): void {
+    protected override _draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void {
         this.draw(ctx, bounds);
     }
 }
diff --git 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<IViewportInfo>;
+        const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportBoundsInfo as Required<IViewportInfo>;
         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
@@ -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;
@@ -840,7 +847,7 @@ export class Viewport {
             isDirty: this.isDirty ? 0b10 : 0b00,
             isForceDirty: this.isForceDirty,
             allowCache: this._allowCache,
-            cacheBound: this.cacheBound,
+            cacheBound: this.cacheBound!,
             diffCacheBounds,
             cacheViewPortPosition,
             shouldCacheUpdate,
@@ -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
@@ -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
@@ -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) {

diff --git a/packages/sheets-ui/src/controllers/zoom.controller.ts b/packages/sheets-ui/src/controllers/zoom.controller.ts