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

feat: @idraw/core add scroll helper

Browse source
This commit is contained in:
chenshenhai 2021-06-12 14:17:27 +08:00
parent 90a78c137a
commit edaf15bc65
9 changed files with 142 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,7 +30,6 @@
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4,
canScroll: true,
}
const board = new Board(mount, opts);
board.on('wheelX', (deltaX) => {

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

@ -25,7 +25,6 @@ type Options = {
contextWidth: number;
contextHeight: number;
devicePixelRatio?: number;
canScroll?: boolean;
}
type PrivateOptions = Options & {
@ -132,6 +131,10 @@ class Board {
this[_watcher].off(name, callback);
}
getScreenInfo() {
return this[_calcScreen]();
}
private [_render]() {
if (this[_hasRendered] === true) {
return;

44
packages/core/examples/test/scroll.html Normal file
View file

@ -0,0 +1,44 @@
<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,
canScroll: true
});
core.initData(data);
const result = core.scale(1);
console.log('scale: ', result);
core.draw();
</script>
</body>
</html>

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

@ -69,16 +69,22 @@ class Core {
this[_board] = new Board(mount, this[_opts]);
this[_renderer] = new Renderer(this[_board]);
this[_element] = new Element(this[_board].getContext());
this[_helper] = new Helper(this[_board].getContext(), this[_config]);
this[_helper] = new Helper(this[_board], this[_config]);
this._initEvent();
this[_hasInited] = true;
}
draw(): void {
const transfrom = this[_board].getTransform();
this[_helper].updateConfig(this[_data], {
width: this[_opts].width,
height: this[_opts].height,
canScroll: this[_opts].canScroll === true,
selectedUUID: this[_selectedUUID],
devicePixelRatio: this[_opts].devicePixelRatio,
scale: this[_board].getTransform().scale,
scale: transfrom.scale,
scrollX: transfrom.scrollX,
scrollY: transfrom.scrollY,
});
this[_renderer].render(this[_data], this[_helper].getConfig());
}

6
packages/core/src/lib/draw/index.ts
View file

@ -12,7 +12,10 @@ import { drawRect } from './rect';
import { drawImage } from './image';
import { drawSVG } from './svg';
import { drawText } from './text';
import { drawElementWrapper } from './wrapper';
import {
drawElementWrapper,
drawDisplayContextScrollWrapper,
} from './wrapper';
const { isColorStr } = util.color;
@ -55,5 +58,6 @@ export function drawContext(
}
}
drawElementWrapper(ctx, helperConfig);
drawDisplayContextScrollWrapper(ctx, helperConfig)
}

8
packages/core/src/lib/draw/wrapper.ts
View file

@ -55,3 +55,11 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
});
}
export function drawDisplayContextScrollWrapper(ctx: TypeContext, config: TypeHelperConfig) {
console.log('config?.displayContextScrollWrapper = ', config?.displayContextScrollWrapper);
if (!config?.displayContextScrollWrapper) {
return;
}
}

63
packages/core/src/lib/helper.ts
View file

@ -10,17 +10,23 @@ import {
TypePoint,
TypeConfigStrict,
} from '@idraw/types';
import Board from '@idraw/board';
import util from '@idraw/util';
import { parseAngleToRadian, calcElementCenter } from './calculate';
import { rotateContext, } from './transform';
const { deepClone } = util.data;
export class Helper implements TypeHelper {
private _helperConfig: TypeHelperConfig;
private _coreConfig: TypeConfigStrict;
private _ctx: TypeContext;
private _board: Board;
constructor(ctx: TypeContext, config: TypeConfigStrict) {
this._ctx = ctx;
constructor(board: Board, config: TypeConfigStrict) {
this._board = board;
this._ctx = this._board.getContext();
this._coreConfig = config;
this._helperConfig = {
elementIndexMap: {}
@ -33,11 +39,11 @@ export class Helper implements TypeHelper {
): void {
this._updateElementIndex(data);
this._updateSelectedElementWrapper(data, opts);
this._updateDisplayContextScrollWrapper(data, opts);
}
getConfig(): TypeHelperConfig {
// TODO
return JSON.parse(JSON.stringify(this._helperConfig));
return deepClone(this._helperConfig);
}
getElementIndexByUUID(uuid: string): number | null {
@ -159,4 +165,53 @@ export class Helper implements TypeHelper {
this._helperConfig.selectedElementWrapper = wrapper;
}
private _updateDisplayContextScrollWrapper(data: TypeData, opts: TypeHelperUpdateOpts) {
if (opts.canScroll !== true) {
return;
}
const { width, height } = opts;
const sliderMinSize = 50;
const lineSize = 16;
const { position } = this._board.getScreenInfo();
let xSize = 0;
let ySize = 0;
if (position.left <= 0 || position.right <= 0) {
xSize = Math.max(
sliderMinSize, width - (
Math.abs(position.left < 0 ? position.left : 0) + Math.abs(position.right < 0 ? position.right : 0)
)
);
if (xSize >= width) xSize = 0;
}
if (position.top <= 0 || position.bottom <= 0) {
ySize = Math.max(
sliderMinSize, height - (
Math.abs(position.top < 0 ? position.top : 0) + Math.abs(position.bottom < 0 ? position.bottom : 0)
)
);
if (ySize >= height) ySize = 0;
}
let translateX = 0;
if (xSize > 0) {
translateX = width * Math.abs(position.left) / (Math.abs(position.left) + Math.abs(position.right));
translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
}
let translateY = 0;
if (ySize > 0) {
translateY = height * Math.abs(position.top) / (Math.abs(position.top) + Math.abs(position.bottom));
translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
}
this._helperConfig.displayContextScrollWrapper = {
lineSize,
xSize,
ySize,
translateY,
translateX,
color: '#e0e0e0'
};
}
}

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

@ -4,6 +4,7 @@ type TypeCoreOptions = {
devicePixelRatio: number;
contextWidth: number;
contextHeight: number;
canScroll?: boolean;
}
export {

13
packages/types/src/lib/helper.ts
View file

@ -28,13 +28,26 @@ type TypeHelperConfig = {
color: string;
radian?: number;
translate?: TypePoint;
},
displayContextScrollWrapper?: {
lineSize: number,
xSize: number,
ySize: number,
translateY: number,
translateX: number,
color: string,
}
}
type TypeHelperUpdateOpts = {
width: number;
height: number;
selectedUUID?: string | null;
devicePixelRatio: number;
scale: number;
canScroll: boolean;
scrollX: number;
scrollY: number;
}
interface TypeHelper {