fix(sheet): render viewport wrong size

packages/core/src/shared/rectangle.ts

@@ -283,4 +283,30 @@ export class Rectangle {
 
  return result;
  }
+
+ static hasIntersectionBetweenTwoBounds(
+ rect1: {
+ left: number;
+ top: number;
+ right: number;
+ bottom: number;
+ },
+ rect2: {
+ left: number;
+ top: number;
+ right: number;
+ bottom: number;
+ }
+ ) {
+ if (
+ rect1.left > rect2.right || // rect1 在 rect2 右侧
+ rect1.right < rect2.left || // rect1 在 rect2 左侧
+ rect1.top > rect2.bottom || // rect1 在 rect2 下方
+ rect1.bottom < rect2.top // rect1 在 rect2 上方
+ ) {
+ return false;
+ }
+
+ return true;
+ }
 }

packages/docs-ui/src/views/doc-canvas-view.ts

@@ -107,6 +107,8 @@ export class DocCanvasView extends RxDisposable {
  top: 0,
  bottom: 0,
  right: 0,
+ isRelativeX: true,
+ isRelativeY: true,
  isWheelPreventDefaultX: true,
  });
 

packages/engine-render/src/base-object.ts

@@ -24,7 +24,7 @@ import type { IObjectFullState, ITransformChangeState } from './basics/interface
 import { TRANSFORM_CHANGE_OBSERVABLE_TYPE } from './basics/interfaces';
 import { generateRandomKey, toPx } from './basics/tools';
 import { Transform } from './basics/transform';
-import type { IViewportBound, Vector2 } from './basics/vector2';
+import type { IViewportInfo, Vector2 } from './basics/vector2';
 import type { UniverRenderingContext } from './context';
 import type { Layer } from './layer';
 
@@ -87,6 +87,7 @@ export abstract class BaseObject extends Disposable {
  protected _oKey: string;
 
  protected _dirty: boolean = true;
+ protected _forceDirty: boolean = true;
 
  private _top: number = 0;
 
@@ -367,6 +368,10 @@ export abstract class BaseObject extends Disposable {
  return this;
  }
 
+ makeForceDirty(state: boolean = true) {
+ this._forceDirty = state;
+ }
+
  makeDirtyNoDebounce(state: boolean = true) {
  this._dirty = state;
  if (state) {
@@ -514,7 +519,7 @@ export abstract class BaseObject extends Disposable {
  return this;
  }
 
- isRender(bounds?: IViewportBound) {
+ isRender(bounds?: IViewportInfo) {
  if (this._forceRender) {
  return false;
  }
@@ -551,7 +556,7 @@ export abstract class BaseObject extends Disposable {
  this._makeDirtyMix();
  }
 
- render(ctx: UniverRenderingContext, bounds?: IViewportBound) {
+ render(ctx: UniverRenderingContext, bounds?: IViewportInfo) {
  /* abstract */
  }
 

packages/engine-render/src/basics/tools.ts

@@ -24,7 +24,7 @@ import type {
  LocaleService,
  Nullable,
 } from '@univerjs/core';
-import { BaselineOffset, DEFAULT_STYLES, FontStyleType, Tools } from '@univerjs/core';
+import { BaselineOffset, DEFAULT_STYLES, FontStyleType, Rectangle, Tools } from '@univerjs/core';
 import * as cjk from 'cjk-regex';
 
 import { FontCache } from '../components/docs/layout/shaping-engine/font-cache';
@@ -757,3 +757,79 @@ export function ptToPixel(pt: number) {
 export function pixelToPt(px: number) {
  return px * PX_TO_PT_RATIO;
 }
+
+/**
+ * 当前单元格在任意一个 viewRanges 中
+ * @param ranges
+ * @param rowIndex
+ * @param colIndex
+ * @returns
+ */
+export function inViewRanges(ranges: IRange[], rowIndex: number, colIndex: number) {
+ for (const range of ranges) {
+ if (rowIndex >= range.startRow && rowIndex <= range.endRow &&
+ colIndex >= range.startColumn && colIndex <= range.endColumn) {
+ return true;
+ }
+ }
+ return false;
+}
+
+/**
+ * 在非下方区域中
+ * @param ranges
+ * @param rowIndex
+ * @returns
+ */
+export function inCurrentAndAboveViewRanges(ranges: IRange[], rowIndex: number) {
+ for (const range of ranges) {
+ if (rowIndex > range.endRow) {
+ return false;
+ }
+ }
+ return true;
+}
+
+/**
+ * row 在任意一个 Range 中
+ * @param ranges
+ * @param rowIndex
+ * @returns
+ */
+export function inRowViewRanges(ranges: IRange[], rowIndex: number) {
+ let flag = false;
+ for (const range of ranges) {
+ if (rowIndex >= range.startRow && rowIndex <= range.endRow) {
+ flag = true;
+ break;
+ }
+ }
+ return flag;
+}
+
+/**
+ * 如果 range 有相交, 那么扩展到第一组 range 中.
+ * @param ranges
+ */
+export function mergeRangeIfIntersects(mainRanges: IRange[], ranges: IRange[]) {
+ for (const mainRange of mainRanges) {
+ for (const range of ranges) {
+ if (Rectangle.intersects(mainRange, range)) {
+ mainRange.startRow = Math.min(mainRange.startRow, range.startRow);
+ mainRange.endRow = Math.max(mainRange.endRow, range.endRow);
+ mainRange.startColumn = Math.min(mainRange.startColumn, range.startColumn);
+ mainRange.endColumn = Math.max(mainRange.endColumn, range.endColumn);
+ }
+ }
+ }
+ return mainRanges;
+}
+
+export function clampRanges(range: IRange) {
+ return {
+ startRow: Math.max(0, range.startRow),
+ startColumn: Math.max(0, range.startColumn),
+ endRow: Math.max(0, range.endRow),
+ endColumn: Math.max(0, range.endColumn),
+ };
+}

packages/engine-render/src/basics/transform.ts

@@ -111,6 +111,8 @@ export class Transform {
  this._m[1] *= sx;
  this._m[2] *= sy;
  this._m[3] *= sy;
+ this._m[4] *= sx;
+ this._m[5] *= sy;
  return this;
  }
 
@@ -387,6 +389,18 @@ export class Transform {
  return scaleMatrix;
  }
 
+ convert2DOMMatrix2D() {
+ const m = this.getMatrix();
+ return {
+ a: m[0],
+ b: m[1],
+ c: m[2],
+ d: m[3],
+ e: m[4],
+ f: m[5],
+ };
+ }
+
  // static createTransformByState(state: positionState) {
  // const newTr = new this();
  // let { x, y, angle, scaleX, scaleY, skewX, skewY, flipX, flipY } = state;

packages/engine-render/src/basics/vector2.ts

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
+import type { Canvas } from '../canvas';
+import type { SHEET_VIEWPORT_KEY } from '../components/sheets/interfaces';
 import type { DeepImmutable, FloatArray } from './i-events';
+import type { Transform } from './transform';
 
 export interface IPoint {
  x: number;
@@ -844,17 +847,64 @@ export interface IBoundRect {
 }
 
 export interface IBoundRectNoAngle {
+ /**
+ * 冻结区域相对 MainCanvas 的物理位置,
+ * left = n * colWidth + rowHeaderWidth
+ */
  left: number;
  top: number;
  right: number;
  bottom: number;
 }
 
-export interface IViewportBound {
+export interface IViewportInfo {
  viewBound: IBoundRectNoAngle;
  diffBounds: IBoundRectNoAngle[];
+
+ /**
+ * scroll right further diffX < 0
+ * previewBound.x - viewbound.x
+ */
  diffX: number;
  diffY: number;
+
+ /**
+ * The physical position of the frozen rows and columns on the canvas, used for drawImage.
+ * For example, if the freezing starts from the fourth column, the left position would be 4 * column + rowHeaderWidth.
+ * The physical position means the top and left values have already considered the scaling factor.
+ */
  viewPortPosition: IBoundRectNoAngle;
- viewPortKey?: string;
+ viewportKey: string | SHEET_VIEWPORT_KEY;
+ /**
+ * In the future, a number will be used to indicate the reason for the "dirty" status
+ * Here, a binary value is used to facilitate computation.
+ */
+ isDirty?: number;
+ isForceDirty?: boolean;
+
+ allowCache?: boolean;
+ cacheBound: IBoundRectNoAngle;
+ diffCacheBounds: IBoundRectNoAngle[];
+ cacheViewPortPosition: IBoundRectNoAngle;
+
+ shouldCacheUpdate: number;
+ sceneTrans: Transform;
+ cacheCanvas?: Canvas;
+
+ leftOrigin: number;
+ topOrigin: number;
+
+ bufferEdgeX: number;
+ bufferEdgeY: number;
+
+ updatePrevCacheBounds?: (viewbound: IBoundRectNoAngle) => void;
+}
+
+export interface IViewportInfos {
+ left: number;
+ right: number;
+ top: number;
+ bottom: number;
+ width: number;
+ height: number;
 }

packages/engine-render/src/canvas.ts

@@ -130,21 +130,18 @@ export class Canvas {
  // this.setWidth(width || 0);
  // this.setHeight(height || 0);
  this._pixelRatio = pixelRatioParam || getDevicePixelRatio();
+ const canvsElement = this.getCanvasEle();
 
- if (width) {
- this.getCanvasEle().width = width * this._pixelRatio;
-
- this._width = this.getCanvasEle().width / this._pixelRatio;
-
- this.getCanvasEle().style.width = `${this._width}px`;
+ if (canvsElement && width !== undefined) {
+ canvsElement.width = width * this._pixelRatio;
+ this._width = canvsElement.width / this._pixelRatio;
+ canvsElement.style.width = `${this._width}px`;
  }
 
- if (height) {
- this.getCanvasEle().height = height * this._pixelRatio;
-
- this._height = this.getCanvasEle().height / this._pixelRatio;
-
- this.getCanvasEle().style.height = `${this._height}px`;
+ if (canvsElement && height !== undefined) {
+ canvsElement.height = height * this._pixelRatio;
+ this._height = canvsElement.height / this._pixelRatio;
+ canvsElement.style.height = `${this._height}px`;
  }
 
  this.getContext().setTransform(this._pixelRatio, 0, 0, this._pixelRatio, 0, 0);

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

@@ -17,7 +17,7 @@
 import { DisposableCollection, sortRules, toDisposable } from '@univerjs/core';
 import type { IDisposable } from '@wendellhu/redi';
 import { BaseObject } from '../base-object';
-import type { IViewportBound } from '../basics/vector2';
+import type { IViewportInfo } from '../basics/vector2';
 import type { UniverRenderingContext } from '../context';
 import type { ComponentExtension } from './extension';
 
@@ -58,7 +58,7 @@ export class RenderComponent<T, U, V> extends BaseObject {
  return this._extensions.get(uKey);
  }
 
- draw(ctx: UniverRenderingContext, bounds?: IViewportBound) {
+ draw(ctx: UniverRenderingContext, bounds?: IViewportInfo) {
  /* abstract */
  }
 

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { IViewportBound } from '../../basics/vector2';
+import type { IViewportInfo } from '../../basics/vector2';
 import type { UniverRenderingContext } from '../../context';
 import { Rect } from '../../shape';
 import { Liquid } from './liquid';
@@ -40,7 +40,7 @@ export class DocBackground extends DocComponent {
  return new DocBackground(oKey, documentSkeleton, config);
  }
 
- override draw(ctx: UniverRenderingContext, bounds?: IViewportBound) {
+ override draw(ctx: UniverRenderingContext, bounds?: IViewportInfo) {
  const skeletonData = this.getSkeleton()?.getSkeletonData();
 
  if (skeletonData == null) {
@@ -103,7 +103,7 @@ export class DocBackground extends DocComponent {
  return this;
  }
 
- protected override _draw(ctx: UniverRenderingContext, bounds?: IViewportBound) {
+ protected override _draw(ctx: UniverRenderingContext, bounds?: IViewportInfo) {
  this.draw(ctx, bounds);
  }
 }

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

@@ -17,7 +17,7 @@
 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';
-import type { IBoundRectNoAngle, IViewportBound } from '../../basics/vector2';
+import type { IBoundRectNoAngle, IViewportInfo } from '../../basics/vector2';
 import type { UniverRenderingContext } from '../../context';
 import { RenderComponent } from '../component';
 import type { DOCS_EXTENSION_TYPE } from './doc-extension';
@@ -82,7 +82,7 @@ export abstract class DocComponent extends RenderComponent<
  }
  }
 
- override render(mainCtx: UniverRenderingContext, bounds?: IViewportBound) {
+ override render(mainCtx: UniverRenderingContext, bounds?: IViewportInfo) {
  if (!this.visible) {
  this.makeDirty(false);
  return this;
@@ -118,7 +118,7 @@ export abstract class DocComponent extends RenderComponent<
  };
  }
 
- isSkipByDiffBounds(page: IDocumentSkeletonPage, pageTop: number, pageLeft: number, bounds?: IViewportBound) {
+ isSkipByDiffBounds(page: IDocumentSkeletonPage, pageTop: number, pageLeft: number, bounds?: IViewportInfo) {
  if (bounds === null || bounds === undefined) {
  return false;
  }
@@ -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;
 }