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

feat: @idraw/core add resetSize method

Browse source
This commit is contained in:
chenshenhai 2021-06-16 13:06:31 +08:00
parent 5025ae7520
commit 528644273d
6 changed files with 86 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
__tests__/snapshot/core/examples/test/reset-size.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

2
docs/todo/board.md
View file

@ -1,3 +1,3 @@
# @idraw/board
* [] Reset board's size
* [x] Reset board's size

72
packages/core/examples/test/reset-size.html Normal file
View file

@ -0,0 +1,72 @@
<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 type="module">
import { getData } from './data.js';
const { Core } = window.iDraw;
const data = getData();
const core = new Core(
document.querySelector('#mount'), {
width: 600,
height: 400,
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4,
}, {
scrollWrapper: {
use: true,
}
});
core.initData(data);
core.addElement({
name: 'text-001',
x: 790,
y: 790,
w: 200,
h: 100,
type: 'text',
desc: {
fontSize: 20,
color: '#333333',
text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
fontFamily: '',
borderRadius: 20,
borderWidth: 2,
borderColor: '#bd0b64',
}
})
core.scale(1);
core.draw();
core.resetSize({
width: 300,
height: 200,
contextWidth: 990,
contextHeight: 890,
devicePixelRatio: 3,
});
core.scale(0.5);
</script>
</body>
</html>

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

@ -1,13 +1,9 @@
import {
TypeData,
TypePoint,
TypeData, TypePoint, TypeBoardSizeOptions,
TypeHelperWrapperDotDirection,
TypeConfig,
TypeConfigStrict,
TypeElement,
TypeElemDesc,
TypeCoreOptions,
TypeScreenContext,
TypeConfig, TypeConfigStrict,
TypeElement, TypeElemDesc,
TypeCoreOptions, TypeScreenContext,
} from '@idraw/types';
import Board from '@idraw/board';
import util from '@idraw/util';
@ -97,6 +93,12 @@ class Core {
this[_renderer].render(this[_data], this[_helper].getConfig());
}
resetSize(opts: TypeBoardSizeOptions) {
this[_opts] = { ...this[_opts], ...opts };
this[_board].resetSize(opts);
this.draw();
}
selectElement(index: number, opts?: { useMode?: boolean }): void {
if (this[_data].elements[index]) {
const uuid = this[_data].elements[index].uuid;

1
packages/types/src/lib/core.ts
View file

@ -1,3 +1,4 @@
type TypeCoreOptions = {
width: number;
height: number;

2
scripts/screen.config.js
View file

@ -16,6 +16,8 @@ const pageList = [
{ 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/reset-size.html', w: 300, h: 300, delay: 500 },
// { path: 'core/examples/test.html', w: 600, h: 600, delay: 8000 },
]