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

chore: add e2e testing of board scroll

Browse source
This commit is contained in:
chenshenhai 2021-06-13 20:33:10 +08:00
parent 6d9b085516
commit 13cf6dbcd6
4 changed files with 107 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
__tests__/snapshot/board/examples/test/scroll.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

88
packages/board/examples/test/scroll.html Normal file
View file

@ -0,0 +1,88 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,body { margin: 0; padding: 0; }
#mount canvas {
margin-top: 40px;
margin-left: 50px;
border: 1px solid #aaaaaa40;
/* border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40; */
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const opts = {
width: 600,
height: 400,
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4,
canScroll: true,
}
const board = new Board(mount, opts);
// board.on('wheelX', (deltaX) => {
// console.log('deltaX =', deltaX);
// })
// board.on('wheelY', (deltaY) => {
// console.log('deltaY =', deltaY);
// })
const ctx = board.getContext();
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(260, 260, 200, 100);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(500 - 10, 500 - 10, 200, 100);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(600, 600, 200, 100);
ctx.setFillStyle('#cccccc');
ctx.fillRect(790, 790, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(500 - 10, 450 - 10, 20, 20);
// board.scale(1.5);
board.scrollX(-200);
board.scrollY(-250);
// board.scale(1);
// const result = board.scale(1);
const result = board.scale(1);
console.log('result =', result);
board.draw();
</script>
</body>
</html>

12
packages/board/examples/test/wheel.html
View file

@ -73,21 +73,15 @@
ctx.fillRect(500 - 10, 450 - 10, 20, 20);
// board.scale(1.5);
// board.scrollX(-600);
// board.scrollY(-600);
board.scrollX(-200);
board.scrollY(-250);
// board.scale(1);
// const result = board.scale(1);
const result = board.scale(3);
const result = board.scale(1);
console.log('result =', result);
board.draw();
// setTimeout(() => {
// const result = board.scale(2);
// console.log('result =', result);
// board.draw();
// }, 5000)
</script>
</body>

31
scripts/screen.config.js
View file

@ -1,19 +1,20 @@
const pageList = [
{ path: 'board/examples/test/main.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/scale-001.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/scale-002.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/scale-005.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/text.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/image.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/test/scale-001.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/test/scale-002.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/test/scale-003.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/main.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/scale-001.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/scale-002.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/scale-004.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/scale-005.html', w: 600, h: 400, delay: 500 },
{ path: 'board/examples/test/scroll.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/features/text.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/features/image.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/test/scale-001.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/test/scale-002.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
// { path: 'core/examples/test.html', w: 600, h: 600, delay: 8000 },
]