Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: rename getDisplayContext2D and getOriginContext2D

Browse source
This commit is contained in:
chenshenhai 2021-11-15 22:01:36 +08:00
parent 04960a7cd0
commit b147b19b32
20 changed files with 361 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/board/__tests__/__snapshots__/index.test.ts.snap
View file

@ -168,5 +168,27 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

22
packages/board/__tests__/__snapshots__/other-api.test.ts.snap
View file

@ -168,5 +168,27 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": -2400,
"dy": -1600,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

88
packages/board/__tests__/__snapshots__/scale.test.ts.snap
View file

@ -168,6 +168,28 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": 200,
"dy": 0,
"img": <canvas />,
"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": <canvas />,
"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": <canvas />,
"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": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

22
packages/board/__tests__/__snapshots__/scroll.test.ts.snap
View file

@ -168,5 +168,27 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": -2400,
"dy": -1600,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

22
packages/board/__tests__/__snapshots__/wheel.test.ts.snap
View file

@ -168,6 +168,28 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": -2400,
"dy": -1600,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
Object {
"props": Object {
"height": 80,

4
packages/board/__tests__/index.test.ts
View file

@ -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();

4
packages/board/__tests__/other-api.test.ts
View file

@ -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();

16
packages/board/__tests__/scale.test.ts
View file

@ -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();

4
packages/board/__tests__/scroll.test.ts
View file

@ -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();

4
packages/board/__tests__/wheel.test.ts
View file

@ -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();

55
packages/board/src/index.ts
View file

@ -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<T extends keyof TypeBoardEventArgMap >(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,

12
packages/board/src/names.ts
View file

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

22
packages/core/__tests__/__snapshots__/index.test.ts.snap
View file

@ -589,5 +589,27 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": 0,
"dy": 0,
"img": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

44
packages/core/__tests__/__snapshots__/move.test.ts.snap
View file

@ -589,6 +589,28 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": 0,
"dy": 0,
"img": <canvas />,
"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": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

4
packages/core/__tests__/index.test.ts
View file

@ -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();

8
packages/core/__tests__/move.test.ts
View file

@ -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();

8
packages/core/src/index.ts
View file

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

44
packages/idraw/__tests__/__snapshots__/index.test.ts.snap
View file

@ -589,6 +589,28 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
"dHeight": 150,
"dWidth": 300,
"dx": 0,
"dy": 0,
"img": <canvas />,
"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": <canvas />,
"sHeight": 150,
"sWidth": 300,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

8
packages/idraw/__tests__/index.test.ts
View file

@ -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();

2
packages/idraw/src/mixins/file.ts
View file

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