test(facade): fix canvas mock

fix: new viewport need more param222

test: mock canvas

fix: rm useless

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

@@ -875,7 +875,7 @@ export interface IViewportInfo {
  * 例如冻结从第四列开始, left 就是 4 * column + rowHeaderWidth
  */
  viewPortPosition: IBoundRectNoAngle;
- viewPortKey: string;
+ viewportKey: string;
  /**
  * 后续会通过 number 来表示究竟是什么原因导致的标脏 这里采用二进制数值方便运算
  */

packages/engine-render/src/components/sheets/extensions/background.ts

@@ -48,7 +48,7 @@ export class Background extends SheetExtension {
  parentScale: IScale,
  spreadsheetSkeleton: SpreadsheetSkeleton,
  diffRanges: IRange[],
- { viewRanges, checkOutOfViewBound }: { viewRanges: IRange[]; checkOutOfViewBound: boolean; viewPortKey: string }
+ { viewRanges, checkOutOfViewBound }: { viewRanges: IRange[]; checkOutOfViewBound: boolean; viewportKey: string }
  ) {
  const { stylesCache } = spreadsheetSkeleton;
  const { background, backgroundPositions } = stylesCache;

packages/engine-render/src/components/sheets/extensions/font.ts

@@ -57,7 +57,7 @@ export class Font extends SheetExtension {
  parentScale: IScale,
  spreadsheetSkeleton: SpreadsheetSkeleton,
  diffRanges: IRange[],
- moreBoundsInfo: { viewRanges: IRange[]; checkOutOfViewBound?: boolean; viewPortKey: string }
+ moreBoundsInfo: { viewRanges: IRange[]; checkOutOfViewBound?: boolean; viewportKey: string }
  ) {
  const { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo;
  const { stylesCache, dataMergeCache, overflowCache, worksheet } = spreadsheetSkeleton;

packages/engine-render/src/components/sheets/spreadsheet.ts

@@ -392,19 +392,24 @@ export class Spreadsheet extends SheetComponent {
  const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
  mainCtx.translateWithPrecision(rowHeaderWidth, columnHeaderHeight);
 
- const { viewPortKey } = viewportInfo;
+ const { viewportKey: viewPortKey } = viewportInfo;
  // scene --> layer, getObjects --> viewport.render(object) --> spreadsheet
  // zIndex 0 spreadsheet this.getObjectsByOrder() ---> [spreadsheet]
  // zIndex 2 rowHeader & colHeader & freezeBorder this.getObjectsByOrder() ---> [SpreadsheetRowHeader, SpreadsheetColumnHeader, _Rect]
  // zIndex 3 selection this.getObjectsByOrder() ---> [group]
 
  // SpreadsheetRowHeader SpreadsheetColumnHeader 并不在 spreadsheet 中处理
- if (['viewMain', 'viewMainLeftTop', 'viewMainTop', 'viewMainLeft'].includes(viewPortKey)) {
+ if (this.sheetContentViewport().includes(viewPortKey)) {
  if (viewportInfo && viewportInfo.cacheCanvas) {
  this.renderByViewport(mainCtx, viewportInfo, spreadsheetSkeleton);
  } else {
  this._draw(mainCtx, viewportInfo);
  }
+ } else if (this.sheetHeaderViewport().includes(viewPortKey)) {
+ // doing nothing, other components(SpreadsheetRowHeader...) will render
+ } else {
+ // embed in doc & slide
+ this._draw(mainCtx, viewportInfo);
  }
 
  mainCtx.restore();
@@ -683,6 +688,14 @@ export class Spreadsheet extends SheetComponent {
  }
  }
 
+ sheetContentViewport() {
+ return ['viewMain', 'viewMainLeftTop', 'viewMainTop', 'viewMainLeft'];
+ }
+
+ sheetHeaderViewport() {
+ return ['viewRowTop', 'viewRowBottom', 'viewColumnLeft', 'viewColumnRight', 'viewLeftTop'];
+ }
+
  private _clearBackground(ctx: UniverRenderingContext, backgroundPositions?: ObjectMatrix<ISelectionCellWithCoord>) {
  backgroundPositions?.forValue((row, column, cellInfo) => {
  let { startY, endY, startX, endX } = cellInfo;

packages/engine-render/src/viewport.ts

@@ -247,10 +247,10 @@ export class Viewport {
  initCacheCanvas(props?: IViewProps) {
  if (props?.allowCache) {
  this._cacheCanvas = new UniverCanvas();
+ this.bufferEdgeX = props?.bufferEdgeX || 0;
+ this.bufferEdgeY = props?.bufferEdgeY || 0;
  }
- this._allowCache = props?.allowCache || true;
- this.bufferEdgeX = props?.bufferEdgeX || 0;
- this.bufferEdgeY = props?.bufferEdgeY || 0;
+ this._allowCache = props?.allowCache || false;
  }
 
  /**
@@ -736,7 +736,7 @@ export class Viewport {
  bottom: 0,
  right: 0,
  },
- viewPortKey: this.viewportKey,
+ viewportKey: this.viewportKey,
  // isDirty: this.isDirty,
  isForceDirty: this.isForceDirty,
  allowCache: false,
@@ -839,7 +839,7 @@ export class Viewport {
  diffX,
  diffY,
  viewPortPosition,
- viewPortKey: this.viewportKey,
+ viewportKey: this.viewportKey,
  isDirty: this.isDirty ? 0b10 : 0b00,
  isForceDirty: this.isForceDirty,
  allowCache: this._allowCache,
@@ -1464,7 +1464,9 @@ export class Viewport {
  */
  private _resizeHandler() {
  if (!this._cacheCanvas) return;
- const mainCanvas = this.scene.getEngine().getCanvas();
+ const engine = this.scene.getEngine();
+ if (!engine) return;
+ const mainCanvas = engine.getCanvas();
  const width = mainCanvas.getWidth();
  const height = mainCanvas.getHeight();
  this._mainCanvasW = width;

packages/facade/jest.setup.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http:https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { vi } from 'vitest';
+
+vi.stubGlobal('jest', vi);

packages/facade/package.json

@@ -88,11 +88,11 @@
  "@univerjs/sheets-ui": "workspace:*",
  "@univerjs/ui": "workspace:*",
  "@wendellhu/redi": "0.15.2",
+ "jest-canvas-mock": "^2.5.2",
  "jsdom": "^24.0.0",
  "rxjs": "^7.8.1",
  "typescript": "^5.4.5",
  "vite": "^5.2.11",
- "vitest": "^1.6.0",
- "vitest-canvas-mock": "^0.3.3"
+ "vitest": "^1.6.0"
  }
 }

packages/facade/src/apis/__tests__/facade.spec.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { ICellData, IStyleData, Nullable } from '@univerjs/core';
 import { ICommandService, IUniverInstanceService } from '@univerjs/core';
 import { SetRangeValuesCommand, SetRangeValuesMutation, SetStyleCommand } from '@univerjs/sheets';
 import type { Injector } from '@wendellhu/redi';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { RenderComponentType, SheetComponent } from '@univerjs/engine-render';
 import { IRenderManagerService } from '@univerjs/engine-render';
@@ -48,10 +48,6 @@ describe('Test FUniver', () => {
  ) => Nullable<IStyleData>;
  let getSheetRenderComponent: (unitId: string, viewKey: SHEET_VIEW_KEY) => Nullable<RenderComponentType>;
 
- beforeEach(() => {
- vi.stubGlobal('jest', vi);
- });
-
  beforeEach(() => {
  const testBed = createFacadeTestBed();
  get = testBed.get;

packages/facade/src/apis/sheets/__tests__/f-range.spec.ts

@@ -83,7 +83,7 @@ describe('Test FRange', () => {
  it('Range setValue', () => {
  const activeSheet = univerAPI.getActiveWorkbook()?.getActiveSheet();
 
- // A1 sets the number
+ // // A1 sets the number
  const range1 = activeSheet?.getRange(0, 0, 1, 1);
  range1?.setValue(1);
 
@@ -190,7 +190,6 @@ describe('Test FRange', () => {
  activeSheet?.getRange(0, 0)?.setBackgroundColor('red');
  const range = activeSheet?.getRange(0, 0);
  expect(range?.getCellStyleData()?.bg?.rgb).toBe('red');
-
  activeSheet?.getRange(0, 0, 2, 2)?.setFontWeight('bold');
  expect(range?.getCellStyleData()?.bl).toBe(1);
  });

packages/facade/src/apis/sheets/__tests__/f-sheet-hooks.spec.ts

@@ -18,7 +18,7 @@ import type { ICellData, IStyleData, Nullable, UnitModel, Workbook } from '@univ
 import { ICommandService, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
 import { SetHorizontalTextAlignCommand, SetRangeValuesCommand, SetRangeValuesMutation, SetStyleCommand, SetTextWrapCommand, SetVerticalTextAlignCommand } from '@univerjs/sheets';
 import type { Injector } from '@wendellhu/redi';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { Subject } from 'rxjs';
 
 import type { IDragCellPosition, IHoverCellPosition } from '@univerjs/sheets-ui';
@@ -77,10 +77,6 @@ describe('Test FSheetHooks', () => {
  let sheetHooks: FSheetHooks;
  let workbook: Workbook;
 
- beforeEach(() => {
- vi.stubGlobal('jest', vi);
- });
-
  beforeEach(() => {
  // Initialize the subject
  hoverCurrentCell$ = new Subject<Nullable<IHoverCellPosition>>();

packages/facade/src/apis/sheets/__tests__/f-workbook.spec.ts

@@ -18,7 +18,7 @@ import type { ICellData, IStyleData, Nullable } from '@univerjs/core';
 import { ICommandService, IUniverInstanceService } from '@univerjs/core';
 import { InsertSheetCommand, InsertSheetMutation, RemoveSheetCommand, RemoveSheetMutation, SetHorizontalTextAlignCommand, SetRangeValuesCommand, SetRangeValuesMutation, SetStyleCommand, SetTextWrapCommand, SetVerticalTextAlignCommand, SetWorksheetActiveOperation } from '@univerjs/sheets';
 import type { Injector } from '@wendellhu/redi';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import type { FUniver } from '../../facade';
 import { createFacadeTestBed } from '../../__tests__/create-test-bed';
@@ -40,10 +40,6 @@ describe('Test FWorkbook', () => {
  endColumn: number
  ) => Nullable<IStyleData>;
 
- beforeEach(() => {
- vi.stubGlobal('jest', vi);
- });
-
  beforeEach(() => {
  const testBed = createFacadeTestBed();
  get = testBed.get;

packages/facade/src/apis/sheets/__tests__/f-worksheet.spec.ts

@@ -18,7 +18,7 @@ import type { ICellData, IStyleData, Nullable } from '@univerjs/core';
 import { ICommandService, IUniverInstanceService } from '@univerjs/core';
 import { SetHorizontalTextAlignCommand, SetRangeValuesCommand, SetRangeValuesMutation, SetStyleCommand, SetTextWrapCommand, SetVerticalTextAlignCommand } from '@univerjs/sheets';
 import type { Injector } from '@wendellhu/redi';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import type { FUniver } from '../../facade';
 import { createFacadeTestBed } from '../../__tests__/create-test-bed';
@@ -40,10 +40,6 @@ describe('Test FWorksheet', () => {
  endColumn: number
  ) => Nullable<IStyleData>;
 
- beforeEach(() => {
- vi.stubGlobal('jest', vi);
- });
-
  beforeEach(() => {
  const testBed = createFacadeTestBed();
  get = testBed.get;

packages/facade/vite.config.ts

@@ -3,25 +3,11 @@ import pkg from './package.json';
 
 export default ({ mode }) => createViteConfig({
  test: {
- setupFiles: ['./vitest.setup.ts'],
+ setupFiles: [
+ './jest.setup.ts',
+ './vitest.setup.ts',
+ ],
  environment: 'jsdom',
- deps: {
- optimizer: {
- web: {
- include: ['vitest-canvas-mock'],
- },
- },
- },
- poolOptions: {
- threads: {
- singleThread: true,
- },
- },
- environmentOptions: {
- jsdom: {
- resources: 'usable',
- },
- },
  },
 }, {
  mode,

packages/facade/vitest.setup.ts

@@ -14,5 +14,23 @@
  * limitations under the License.
  */
 
-import 'vitest-canvas-mock';
+import getCanvasWindow from 'jest-canvas-mock/lib/window';
+import { vi } from 'vitest';
 
+const apis = [
+ 'Path2D',
+ 'CanvasGradient',
+ 'CanvasPattern',
+ 'CanvasRenderingContext2D',
+ 'DOMMatrix',
+ 'ImageData',
+ 'TextMetrics',
+ 'ImageBitmap',
+ 'createImageBitmap',
+] as const;
+
+const canvasWindow = getCanvasWindow({ document: window.document });
+
+apis.forEach((api) => {
+ vi.stubGlobal(api, canvasWindow[api]);
+});

packages/slides/src/views/render/adaptors/spreadsheet-adaptor.ts

@@ -189,6 +189,7 @@ export class SpreadsheetAdaptor extends ObjectAdaptor {
  bottom: 0,
  top: columnHeaderHeightScale,
  width: rowHeaderWidthScale,
+ isRelativeY: true,
  isWheelPreventDefaultX: true,
  });