From b147b19b32356033bbef26f1932e5de0e71dbbef Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 15 Nov 2021 22:01:36 +0800 Subject: [PATCH] refactor: rename getDisplayContext2D and getOriginContext2D --- .../__snapshots__/index.test.ts.snap | 22 +++++ .../__snapshots__/other-api.test.ts.snap | 22 +++++ .../__snapshots__/scale.test.ts.snap | 88 +++++++++++++++++++ .../__snapshots__/scroll.test.ts.snap | 22 +++++ .../__snapshots__/wheel.test.ts.snap | 22 +++++ packages/board/__tests__/index.test.ts | 4 +- packages/board/__tests__/other-api.test.ts | 4 +- packages/board/__tests__/scale.test.ts | 16 ++-- packages/board/__tests__/scroll.test.ts | 4 +- packages/board/__tests__/wheel.test.ts | 4 +- packages/board/src/index.ts | 55 ++++++++---- packages/board/src/names.ts | 12 ++- .../__snapshots__/index.test.ts.snap | 22 +++++ .../__tests__/__snapshots__/move.test.ts.snap | 44 ++++++++++ packages/core/__tests__/index.test.ts | 4 +- packages/core/__tests__/move.test.ts | 8 +- packages/core/src/index.ts | 8 +- .../__snapshots__/index.test.ts.snap | 44 ++++++++++ packages/idraw/__tests__/index.test.ts | 8 +- packages/idraw/src/mixins/file.ts | 2 +- 20 files changed, 361 insertions(+), 54 deletions(-) diff --git a/packages/board/__tests__/__snapshots__/index.test.ts.snap b/packages/board/__tests__/__snapshots__/index.test.ts.snap index 3b5e7ad..49f584a 100644 --- a/packages/board/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/index.test.ts.snap @@ -168,5 +168,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap index dcf4c82..ff9ac7e 100644 --- a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap @@ -168,5 +168,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": -2400, + "dy": -1600, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/board/__tests__/__snapshots__/scale.test.ts.snap b/packages/board/__tests__/__snapshots__/scale.test.ts.snap index fa27093..bd59c39 100644 --- a/packages/board/__tests__/__snapshots__/scale.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/scale.test.ts.snap @@ -168,6 +168,28 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 200, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; @@ -339,6 +361,28 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 200, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; @@ -510,6 +554,28 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; @@ -681,5 +747,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 600, + "dy": 400, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap index d2b1942..47ad42e 100644 --- a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap @@ -168,5 +168,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": -2400, + "dy": -1600, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap index c9d2232..8da0ae8 100644 --- a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap @@ -168,6 +168,28 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": -2400, + "dy": -1600, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, Object { "props": Object { "height": 80, diff --git a/packages/board/__tests__/index.test.ts b/packages/board/__tests__/index.test.ts index f9178c0..9a8bb4c 100644 --- a/packages/board/__tests__/index.test.ts +++ b/packages/board/__tests__/index.test.ts @@ -30,12 +30,12 @@ describe('@idraw/board', () => { }); board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/board/__tests__/other-api.test.ts b/packages/board/__tests__/other-api.test.ts index 14033d5..940ebda 100644 --- a/packages/board/__tests__/other-api.test.ts +++ b/packages/board/__tests__/other-api.test.ts @@ -42,12 +42,12 @@ describe('@idraw/board', () => { board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/board/__tests__/scale.test.ts b/packages/board/__tests__/scale.test.ts index 746dd39..0a2644d 100644 --- a/packages/board/__tests__/scale.test.ts +++ b/packages/board/__tests__/scale.test.ts @@ -33,12 +33,12 @@ describe('@idraw/board', () => { expect(result).toStrictEqual({"position":{"top":100,"bottom":100,"left":150,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}}) board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); @@ -75,12 +75,12 @@ describe('@idraw/board', () => { expect(result).toStrictEqual({"position":{"top":0,"bottom":-50,"left":50,"right":50},"size":{"x":25,"y":0,"w":500,"h":450}}) board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); @@ -119,12 +119,12 @@ describe('@idraw/board', () => { expect(result).toStrictEqual({"position":{"top":50,"bottom":50,"left":0,"right":0},"size":{"x":0,"y":25,"w":600,"h":300}}) board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); @@ -163,12 +163,12 @@ describe('@idraw/board', () => { expect(result).toStrictEqual({"position":{"top":0,"bottom":-80,"left":0,"right":-200},"size":{"x":0,"y":0,"w":800,"h":480}}) board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/board/__tests__/scroll.test.ts b/packages/board/__tests__/scroll.test.ts index 9443979..28b2ee8 100644 --- a/packages/board/__tests__/scroll.test.ts +++ b/packages/board/__tests__/scroll.test.ts @@ -42,12 +42,12 @@ describe('@idraw/board', () => { board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/board/__tests__/wheel.test.ts b/packages/board/__tests__/wheel.test.ts index 28cd07a..d5e49e9 100644 --- a/packages/board/__tests__/wheel.test.ts +++ b/packages/board/__tests__/wheel.test.ts @@ -43,12 +43,12 @@ describe('@idraw/board', () => { board.draw(); - const originCtx = board.getOriginContext(); + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = board.getDisplayContext(); + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/board/src/index.ts b/packages/board/src/index.ts index 8cde7fd..67cadd9 100644 --- a/packages/board/src/index.ts +++ b/packages/board/src/index.ts @@ -1,6 +1,7 @@ import { TypeScreenPosition, TypeScreenSize, TypeScreenContext, TypePoint, TypePointCursor, - TypeBoardOptions, TypeBoardSizeOptions, TypePlugin, TypeContext } from '@idraw/types'; + TypeBoardOptions, TypeBoardSizeOptions, TypePlugin, TypeContext, +} from '@idraw/types'; import util from '@idraw/util'; import { ScreenWatcher } from './lib/screen-watcher'; import { setStyle } from './lib/style'; @@ -9,8 +10,8 @@ import { Scroller } from './lib/scroller'; import { Screen } from './lib/screen'; import { TempData } from './lib/temp'; import { - _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, _displayCtx, - _originCtx, _watcher, _render, _parsePrivateOptions, _scroller, + _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, + _watcher, _render, _parsePrivateOptions, _scroller, _helperCanvas, _helperCtx, _initEvent, _doScrollX, _doScrollY, _doMoveScroll, _resetContext, _screen, _tempData } from './names'; @@ -23,14 +24,16 @@ type PrivateOptions = TypeBoardOptions & { } class Board { + + private [_hasRendered] = false; + private [_canvas]: HTMLCanvasElement; + private [_helperCanvas]: HTMLCanvasElement; private [_displayCanvas]: HTMLCanvasElement; private [_mount]: HTMLDivElement; private [_opts]: PrivateOptions; - private [_hasRendered] = false; private [_ctx]: TypeContext; - private [_displayCtx]: CanvasRenderingContext2D; - private [_originCtx]: CanvasRenderingContext2D; + private [_helperCtx]: TypeContext; // private [_watcher]: Watcher; private [_watcher]: ScreenWatcher; private [_scroller]: Scroller; @@ -42,17 +45,20 @@ class Board { this[_mount] = mount; this[_canvas] = document.createElement('canvas'); + this[_helperCanvas] = document.createElement('canvas'); this[_displayCanvas] = document.createElement('canvas'); this[_mount].appendChild(this[_displayCanvas]); this[_opts] = this[_parsePrivateOptions](opts); - this[_originCtx] = this[_canvas].getContext('2d') as CanvasRenderingContext2D; - this[_displayCtx] = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D; - this[_ctx] = new Context(this[_originCtx], this[_opts]); + const originCtx = this[_canvas].getContext('2d') as CanvasRenderingContext2D; + const displayCtx = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D; + const helperCtx = this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D; + this[_ctx] = new Context(originCtx, this[_opts]); + this[_helperCtx] = new Context(helperCtx, this[_opts]); this[_screen] = new Screen(this[_ctx], this[_opts]); // this[_watcher] = new Watcher(this[_displayCanvas]); this[_watcher] = new ScreenWatcher(this[_displayCanvas], this[_ctx]); this[_scroller] = new Scroller( - this[_displayCtx], { + displayCtx, { width: opts.width, height: opts.height, devicePixelRatio: opts.devicePixelRatio || 1, @@ -61,21 +67,30 @@ class Board { this[_render](); } - getDisplayContext(): CanvasRenderingContext2D { - return this[_displayCtx]; + getDisplayContext2D(): CanvasRenderingContext2D { + return this[_displayCanvas].getContext('2d') as CanvasRenderingContext2D; } - getOriginContext(): CanvasRenderingContext2D { - return this[_originCtx]; + getOriginContext2D(): CanvasRenderingContext2D { + return this[_ctx].getContext(); + } + + getHelperContext2D(): CanvasRenderingContext2D { + return this[_helperCtx].getContext(); } getContext(): TypeContext { return this[_ctx]; } + getHelperContext(): TypeContext { + return this[_helperCtx]; + } + scale(scaleRatio: number): TypeScreenContext { if (scaleRatio > 0) { this[_ctx].setTransform({ scale: scaleRatio }); + this[_helperCtx].setTransform({ scale: scaleRatio }); } const { position, size } = this[_screen].calcScreen(); return { position, size}; @@ -90,6 +105,7 @@ class Board { }) if (x >= 0 || x < 0) { this[_ctx].setTransform({ scrollX: x }); + this[_helperCtx].setTransform({ scrollX: x }) } const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen(); this[_watcher].setStatusMap({ @@ -110,6 +126,7 @@ class Board { }) if (y >= 0 || y < 0) { this[_ctx].setTransform({ scrollY: y }); + this[_helperCtx].setTransform({ scrollY: y }); } const { position, size, canScrollXNext, canScrollYNext, canScrollXPrev, canScrollYPrev } = this[_screen].calcScreen(); this[_watcher].setStatusMap({ @@ -128,9 +145,13 @@ class Board { draw(): TypeScreenContext { this.clear(); const { position, deviceSize, size } = this[_screen].calcScreen(); - this[_displayCtx].drawImage( + const displayCtx = this[_displayCanvas].getContext('2d'); + displayCtx?.drawImage( this[_canvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h ); + displayCtx?.drawImage( + this[_helperCanvas], deviceSize.x, deviceSize.y, deviceSize.w, deviceSize.h + ); if (this[_opts].canScroll === true) { this[_scroller].draw(position); } @@ -142,7 +163,8 @@ class Board { } clear() { - this[_displayCtx].clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height); + const displayCtx = this[_displayCanvas].getContext('2d'); + displayCtx?.clearRect(0, 0, this[_displayCanvas].width, this[_displayCanvas].height); } on(name: T, callback: (p: TypeBoardEventArgMap[T]) => void) { @@ -172,6 +194,7 @@ class Board { this[_opts] = { ...this[_opts], ...opts }; this[_resetContext](); this[_ctx].resetSize(opts); + this[_helperCtx].resetSize(opts); this[_screen].resetSize(opts); this[_scroller].resetSize({ width: this[_opts].width, diff --git a/packages/board/src/names.ts b/packages/board/src/names.ts index 08ce95b..44c9383 100644 --- a/packages/board/src/names.ts +++ b/packages/board/src/names.ts @@ -1,14 +1,12 @@ const _canvas = Symbol('_canvas'); const _displayCanvas = Symbol('_displayCanvas'); -const _maskCanvas = Symbol('_maskCanvas'); +const _helperCanvas = Symbol('_helperCanvas'); const _mount = Symbol('_mount'); const _opts = Symbol('_opts'); const _hasRendered = Symbol('_hasRendered'); const _ctx = Symbol('_ctx'); -const _maskCtx = Symbol('_maskCtx'); +const _helperCtx = Symbol('_helperCtx'); -const _displayCtx = Symbol('_displayCtx'); -const _originCtx = Symbol('_originCtx'); const _watcher = Symbol('_watcher'); const _render = Symbol('_render'); const _parsePrivateOptions = Symbol('_parsePrivateOptions'); @@ -23,8 +21,8 @@ const _screen = Symbol('_screen'); const _tempData = Symbol('_tempData'); export { - _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, _displayCtx, - _originCtx, _watcher, _render, _parsePrivateOptions, _scroller, + _canvas, _displayCanvas, _mount, _opts, _hasRendered, _ctx, + _watcher, _render, _parsePrivateOptions, _scroller, _initEvent, _doScrollX, _doScrollY, _doMoveScroll, _resetContext, - _screen, _tempData, _maskCtx, _maskCanvas, + _screen, _tempData, _helperCtx, _helperCanvas, }; \ No newline at end of file diff --git a/packages/core/__tests__/__snapshots__/index.test.ts.snap b/packages/core/__tests__/__snapshots__/index.test.ts.snap index c6d8653..c9ebfdb 100644 --- a/packages/core/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/core/__tests__/__snapshots__/index.test.ts.snap @@ -589,5 +589,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/core/__tests__/__snapshots__/move.test.ts.snap b/packages/core/__tests__/__snapshots__/move.test.ts.snap index 78db278..f4e1987 100644 --- a/packages/core/__tests__/__snapshots__/move.test.ts.snap +++ b/packages/core/__tests__/__snapshots__/move.test.ts.snap @@ -589,6 +589,28 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; @@ -1181,5 +1203,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/core/__tests__/index.test.ts b/packages/core/__tests__/index.test.ts index d8bb18f..39a0a88 100644 --- a/packages/core/__tests__/index.test.ts +++ b/packages/core/__tests__/index.test.ts @@ -29,12 +29,12 @@ describe("@idraw/core", () => { requestAnimationFrameMock.triggerNextAnimationFrame(); - const originCtx = core.__getOriginContext(); + const originCtx = core.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = core.__getDisplayContext(); + const displayCtx = core.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/core/__tests__/move.test.ts b/packages/core/__tests__/move.test.ts index 7e6556c..9affd56 100644 --- a/packages/core/__tests__/move.test.ts +++ b/packages/core/__tests__/move.test.ts @@ -37,12 +37,12 @@ describe("@idraw/core", () => { requestAnimationFrameMock.triggerNextAnimationFrame(); - const originCtx = idraw.__getOriginContext(); + const originCtx = idraw.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = idraw.__getDisplayContext(); + const displayCtx = idraw.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); @@ -67,12 +67,12 @@ describe("@idraw/core", () => { requestAnimationFrameMock.triggerNextAnimationFrame(); - const originCtx = idraw.__getOriginContext(); + const originCtx = idraw.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = idraw.__getDisplayContext(); + const displayCtx = idraw.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index be153b3..9e8bc2a 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -230,12 +230,12 @@ class Core { return this[_board].getContext(); } - __getDisplayContext(): CanvasRenderingContext2D { - return this[_board].getDisplayContext(); + __getDisplayContext2D(): CanvasRenderingContext2D { + return this[_board].getDisplayContext2D(); } - __getOriginContext(): CanvasRenderingContext2D { - return this[_board].getOriginContext(); + __getOriginContext2D(): CanvasRenderingContext2D { + return this[_board].getOriginContext2D(); } diff --git a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap index 90c61c3..d80b4ad 100644 --- a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap @@ -589,6 +589,28 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; @@ -1181,5 +1203,27 @@ Array [ ], "type": "drawImage", }, + Object { + "props": Object { + "dHeight": 150, + "dWidth": 300, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 150, + "sWidth": 300, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/idraw/__tests__/index.test.ts b/packages/idraw/__tests__/index.test.ts index 616be2b..435e296 100644 --- a/packages/idraw/__tests__/index.test.ts +++ b/packages/idraw/__tests__/index.test.ts @@ -36,12 +36,12 @@ describe("idraw", () => { requestAnimationFrameMock.triggerNextAnimationFrame(); - const originCtx = idraw.__getOriginContext(); + const originCtx = idraw.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = idraw.__getDisplayContext(); + const displayCtx = idraw.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); @@ -87,12 +87,12 @@ describe("idraw", () => { requestAnimationFrameMock.triggerNextAnimationFrame(); - const originCtx = idraw.__getOriginContext(); + const originCtx = idraw.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - const displayCtx = idraw.__getDisplayContext(); + const displayCtx = idraw.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); diff --git a/packages/idraw/src/mixins/file.ts b/packages/idraw/src/mixins/file.ts index b05a3ac..2c22274 100644 --- a/packages/idraw/src/mixins/file.ts +++ b/packages/idraw/src/mixins/file.ts @@ -16,7 +16,7 @@ export async function exportDataURL( function listenRenderFrameComplete() { idraw.off('drawFrameComplete', listenRenderFrameComplete); idraw[_tempData].set('isDownloading', false); - const ctx = idraw.__getOriginContext(); + const ctx = idraw.__getOriginContext2D(); const canvas = ctx.canvas; dataURL = canvas.toDataURL(type, quality); resolve(dataURL);