test: #677

packages/engine-render/src/components/docs/doc-component.ts

@@ -146,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;
 }

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);
  }
 }

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) {

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)

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) {

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) {