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

test: add scroll testing for @idraw/core

Browse source
This commit is contained in:
chenshenhai 2021-08-14 11:33:30 +08:00
parent 3bf2ea751d
commit 27269cfccd
10 changed files with 158 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 56 KiB

BIN
__tests__/snapshot/board/examples/test/transform-large.html.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 72 KiB

BIN
__tests__/snapshot/board/examples/test/transform-small.html.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
__tests__/snapshot/core/examples/test/update-element.html.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 164 KiB

After

Width:  |  Height:  |  Size: 164 KiB

22
__tests__/util/browser.js
View file

@ -1,22 +0,0 @@
function mouseDown(x,y){
const event = new MouseEvent('mousedown', {
screenX: x,
screenY: y,
clientX: x,
clientY: y,
});
const elem = document.elementFromPoint(x,y);
elem.dispatchEvent(event);
}
function mouseUp(x,y){
const event = new MouseEvent('mouseup', {
screenX: x,
screenY: y,
clientX: x,
clientY: y,
});
const elem = document.elementFromPoint(x,y);
elem.dispatchEvent(event);
}

168
packages/board/examples/test/scroll.html
View file

@ -4,12 +4,9 @@
<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; */
.box canvas {
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),
@ -17,78 +14,123 @@
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
.list {
width: 910px;
overflow: hidden;
border-top: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}
.box {
width: 300;
height: 200;
float: left;
border-right: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="mount"></div>
<div class="list">
<div class="box" id="mount-1"></div>
<div class="box" id="mount-2"></div>
</div>
<script src="./../../dist/index.global.js"></script>
<script>
const Board = window.iDrawBoard;
const mount = document.querySelector('#mount');
const opts = {
width: 600,
height: 400,
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4,
canScroll: true,
scrollConfig: {
color: '#666666',
lineWidth: 16
var opts = {
width: 300,
height: 200,
contextWidth: 500,
contextHeight: 450,
devicePixelRatio: 4,
canScroll: true,
scrollConfig: {
color: '#666666',
lineWidth: 8
}
}
function drawBoard(board) {
const ctx = board.getContext();
// ctx.setFillStyle('#ffffff');
// ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(5, 5, 100, 60);
ctx.setFillStyle('#cccccc');
ctx.fillRect(40, 40, 100, 60);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(80, 80, 100, 60);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(130, 130, 100, 50);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(250 - 5, 250 - 5, 100, 50);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(300, 300, 100, 50);
ctx.setFillStyle('#cccccc');
ctx.fillRect(380, 380, 100, 50);
ctx.setFillStyle('#000');
ctx.fillRect(250 - 5, 225 - 5, 10, 10);
}
const board = new Board(mount, opts);
// board.on('wheelX', (deltaX) => {
// console.log('deltaX =', deltaX);
// })
// board.on('wheelY', (deltaY) => {
// console.log('deltaY =', deltaY);
// })
</script>
<script>
(function() {
const Board = window.iDrawBoard;
const mount = document.querySelector('#mount-1');
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();
drawBoard(board)
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
// board.scale(1.5);
board.scrollX(-100);
board.scrollY(-125);
// board.scale(1);
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
// const result = board.scale(1);
const result = board.scale(1);
console.log('result =', result);
board.draw();
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();
console.log('scrollLineWidth = ', board.getScrollLineWidth())
console.log('scrollLineWidth = ', board.getScrollLineWidth())
})()
</script>
<script type="module">
import event from './../../../../scripts/browser/event.js';
(function() {
const Board = window.iDrawBoard;
const mount = document.querySelector('#mount-2');
const board = new Board(mount, opts);
drawBoard(board)
board.draw();
setTimeout(() => {
event.wheelX(100, {
clientX: 350,
clientY: 100,
});
event.wheelY(125, {
clientX: 350,
clientY: 100,
});
}, 500);
})()
</script>
</body>
</html>

60
packages/board/examples/test/transform-large.html
View file

@ -1,60 +0,0 @@
<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 {
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.iDrawBoard;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
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(400 - 10, 300 - 10, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(300 - 10, 200 - 10, 20, 20);
board.scale(2);
board.scrollX(-600);
board.scrollY(-400);
board.draw();
</script>
</body>
</html>

58
packages/board/examples/test/transform-small.html
View file

@ -1,58 +0,0 @@
<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 {
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.iDrawBoard;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
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(400 - 10, 300 - 10, 200, 100);
ctx.setFillStyle('#000');
ctx.fillRect(300 - 10, 200 - 10, 20, 20);
board.scale(0.5);
board.draw();
</script>
</body>
</html>

52
scripts/browser/event.js Normal file
View file

@ -0,0 +1,52 @@
function mouseDown(x,y){
const event = new MouseEvent('mousedown', {
screenX: x,
screenY: y,
clientX: x,
clientY: y,
});
const elem = document.elementFromPoint(x,y);
elem.dispatchEvent(event);
}
function mouseUp(x,y){
const event = new MouseEvent('mouseup', {
screenX: x,
screenY: y,
clientX: x,
clientY: y,
});
const elem = document.elementFromPoint(x,y);
elem.dispatchEvent(event);
}
function wheelX(x, opts = { clientX: 0, clientY: 0 }){
const event = new WheelEvent('wheel', {
deltaX: x,
deltaY: 0,
clientX: opts.clientX || 0,
clientY: opts.clientY || 0
});
const elem = document.elementFromPoint(opts.clientX, opts.clientY);
elem.dispatchEvent(event);
}
function wheelY(y, opts = { clientX: 0, clientY: 0 }){
const event = new WheelEvent('wheel', {
deltaX: 0,
deltaY: y,
clientX: opts.clientX || 0,
clientY: opts.clientY || 0
});
const elem = document.elementFromPoint(opts.clientX, opts.clientY);
elem.dispatchEvent(event);
}
export default {
mouseDown,
mouseUp,
wheelX,
wheelY,
}

4
scripts/screen.config.js
View file

@ -1,9 +1,7 @@
const pageList = [
{ 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.html', w: 920, h: 420, delay: 500 },
{ path: 'board/examples/test/scroll.html', w: 700, h: 500, delay: 500 },
{ path: 'board/examples/test/scroll.html', w: 620, h: 210, delay: 500 },
{ path: 'board/examples/test/reset-size.html', w: 400, h: 300, delay: 500 },
{ path: 'core/examples/test/rect.html', w: 600, h: 400, delay: 500 },
{ path: 'core/examples/test/circle.html', w: 600, h: 400, delay: 500 },