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: make core private name symbol

Browse source
This commit is contained in:
chenshenhai 2021-05-28 13:44:26 +08:00
parent 6051247f18
commit e8ff4981f6
3 changed files with 85 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/core/example/main.js
View file

@ -22,6 +22,9 @@ const core = new Core(mount, {
height: 400,
devicePixelRatio: 4
});
console.log('core ===', core);
core.setData(data);
doScale(core, defaultConf.scale);
doScroll(core, defaultConf);

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

@ -18,41 +18,54 @@ enum Mode {
PAINTING = 'painting',
}
const _board = Symbol('_board');
const _data = Symbol('_data');
const _opts = Symbol('_opts');
const _config = Symbol('_config');
const _renderer = Symbol('_renderer');
const _element = Symbol('_element');
const _helper = Symbol('_helper');
const _hasInited = Symbol('_hasInited');
const _mode = Symbol('_mode');
const _selectedUUID = Symbol('_selectedUUID');
const _prevPoint = Symbol('_prevPoint');
const _selectedDotDirection = Symbol('_selectedDotDirection');
class Core {
private _board: Board;
private _data: TypeData;
private _opts: Options;
private _config: TypeConfigStrict;
private _renderer: Renderer;
private _element: Element;
private _helper: Helper;
private _hasInited: boolean = false;
private _mode: Mode = Mode.NULL;
private [_board]: Board;
private [_data]: TypeData;
private [_opts]: Options;
private [_config]: TypeConfigStrict;
private [_renderer]: Renderer;
private [_element]: Element;
private [_helper]: Helper;
private [_hasInited]: boolean = false;
private [_mode]: Mode = Mode.NULL;
private _selectedUUID: string | null = null;
private _prevPoint: TypePoint | null = null;
private _selectedDotDirection: TypeHelperWrapperDotDirection | null = null;
private [_selectedUUID]: string | null = null;
private [_prevPoint]: TypePoint | null = null;
private [_selectedDotDirection]: TypeHelperWrapperDotDirection | null = null;
constructor(mount: HTMLDivElement, opts: Options, config: TypeConfig) {
this._data = { elements: [] };
this._opts = opts;
this._config = mergeConfig(config);
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[_data] = { elements: [] };
this[_opts] = opts;
this[_config] = mergeConfig(config);
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._initEvent();
this._hasInited = true;
this[_hasInited] = true;
}
draw() {
this._helper.updateConfig(this._data, {
selectedUUID: this._selectedUUID,
devicePixelRatio: this._opts.devicePixelRatio,
scale: this._board.getTransform().scale // TODO
this[_helper].updateConfig(this[_data], {
selectedUUID: this[_selectedUUID],
devicePixelRatio: this[_opts].devicePixelRatio,
scale: this[_board].getTransform().scale // TODO
});
this._renderer.render(this._data, this._helper.getConfig());
this[_renderer].render(this[_data], this[_helper].getConfig());
}
// TODO
@ -62,78 +75,78 @@ class Core {
}
scale(ratio: number) {
this._board.scale(ratio);
this[_board].scale(ratio);
}
scrollX(x: number) {
this._board.scrollX(x);
this[_board].scrollX(x);
}
scrollY(y: number) {
this._board.scrollY(y);
this[_board].scrollY(y);
}
getData(): TypeData {
return JSON.parse(JSON.stringify(this._data));
return JSON.parse(JSON.stringify(this[_data]));
}
setData(data: TypeData) {
return this._data = this._element.initData(data);
return this[_data] = this[_element].initData(data);
}
private _initEvent() {
if (this._hasInited === true) {
if (this[_hasInited] === true) {
return;
}
this._board.on('point', this._handlePoint.bind(this));
this._board.on('moveStart', this._handleMoveStart.bind(this));
this._board.on('move', this._handleMove.bind(this));
this._board.on('moveEnd', this._handleMoveEnd.bind(this));
this[_board].on('point', this._handlePoint.bind(this));
this[_board].on('moveStart', this._handleMoveStart.bind(this));
this[_board].on('move', this._handleMove.bind(this));
this[_board].on('moveEnd', this._handleMoveEnd.bind(this));
}
private _handlePoint(point: TypePoint) {
const [uuid, direction] = this._helper.isPointInElementWrapperDot(point);
const [uuid, direction] = this[_helper].isPointInElementWrapperDot(point);
if (uuid && direction) {
this._mode = Mode.SELECT_ELEMENT_WRAPPER_DOT;
this._selectedDotDirection = direction;
this._selectedUUID = uuid;
this[_mode] = Mode.SELECT_ELEMENT_WRAPPER_DOT;
this[_selectedDotDirection] = direction;
this[_selectedUUID] = uuid;
} else {
const [index, uuid] = this._element.isPointInElement(point, this._data);
const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
if (index >= 0) {
this._mode = Mode.SELECT_ELEMENT;
this._selectedUUID = uuid;
this[_mode] = Mode.SELECT_ELEMENT;
this[_selectedUUID] = uuid;
this.draw();
}
}
}
private _handleMoveStart(point: TypePoint) {
this._prevPoint = point;
this[_prevPoint] = point;
}
private _handleMove(point: TypePoint) {
if (this._selectedUUID) {
if (this._mode === Mode.SELECT_ELEMENT) {
this._dragElement(this._selectedUUID, point, this._prevPoint);
if (typeof this[_selectedUUID] === 'string') {
if (this[_mode] === Mode.SELECT_ELEMENT) {
this._dragElement(this[_selectedUUID] as string, point, this[_prevPoint]);
this.draw();
} else if (this._mode === Mode.SELECT_ELEMENT_WRAPPER_DOT && this._selectedDotDirection) {
this._transfromElement(this._selectedUUID, point, this._prevPoint, this._selectedDotDirection);
} else if (this[_mode] === Mode.SELECT_ELEMENT_WRAPPER_DOT && this[_selectedDotDirection]) {
this._transfromElement(this[_selectedUUID] as string, point, this[_prevPoint], this[_selectedDotDirection] as TypeHelperWrapperDotDirection);
}
}
this._prevPoint = point;
this[_prevPoint] = point;
}
private _handleMoveEnd(point: TypePoint) {
this._selectedUUID = null;
this._prevPoint = null;
this[_selectedUUID] = null;
this[_prevPoint] = null;
}
private _dragElement(uuid: string, point: TypePoint, prevPoint: TypePoint|null) {
if (!prevPoint) {
return;
}
this._element.dragElement(this._data, uuid, point, prevPoint, this._board.getContext().getTransform().scale);
this[_element].dragElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale);
this.draw();
}
@ -141,7 +154,7 @@ class Core {
if (!prevPoint) {
return;
}
this._element.transformElement(this._data, uuid, point, prevPoint, this._board.getContext().getTransform().scale, direction);
this[_element].transformElement(this[_data], uuid, point, prevPoint, this[_board].getContext().getTransform().scale, direction);
this.draw();
}
}

32
packages/idraw/src/index.ts
View file

@ -1,21 +1,21 @@
import { TypeData } from '@idraw/types';
// import { TypeData } from '@idraw/types';
const data: TypeData = {
elements: [
{
x: 0,
y: 0,
w: 0,
h: 0,
type: 'circle',
desc: {
color: '#f0f0f0',
}
}
]
}
// const data: TypeData = {
// elements: [
// {
// x: 0,
// y: 0,
// w: 0,
// h: 0,
// type: 'circle',
// desc: {
// color: '#f0f0f0',
// }
// }
// ]
// }
console.log('data =', data)
// console.log('data =', data)
class IDraw {
render() {