diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 8a1c749..d971a63 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -25,7 +25,7 @@ class Core { private _hasInited: boolean = false; private _mode: Mode = Mode.NULL; - private _selectedIndex: number = -1; + private _selectedUUID: string | null = null; private _prevPoint: TypePoint | null = null; constructor(mount: HTMLDivElement, opts: Options) { @@ -63,7 +63,7 @@ class Core { } setData(data: TypeData) { - return this._data = data; + return this._data = this._element.initData(data); } private _initEvent() { @@ -77,9 +77,10 @@ class Core { } private _handlePoint(point: TypePoint) { - this._selectedIndex = this._element.isPointInElement(point, this._data); - if (this._selectedIndex >= 0) { + const [index, uuid] = this._element.isPointInElement(point, this._data); + if (index >= 0) { this._mode = Mode.SELECT_ELEMENT; + this._selectedUUID = uuid } } @@ -89,22 +90,24 @@ class Core { private _handleMove(point: TypePoint) { if (this._mode === Mode.SELECT_ELEMENT) { - this._dragElement(this._selectedIndex, point, this._prevPoint); + if (this._selectedUUID) { + this._dragElement(this._selectedUUID, point, this._prevPoint); + } } this._prevPoint = point; this.draw(); } private _handleMoveEnd(point: TypePoint) { - this._selectedIndex = -1; + this._selectedUUID = null; this._prevPoint = null; } - private _dragElement(selectedIndex: number, point: TypePoint, prevPoint: TypePoint|null) { + private _dragElement(uuid: string, point: TypePoint, prevPoint: TypePoint|null) { if (!prevPoint) { return; } - this._element.dragElement(this._data, selectedIndex, point, prevPoint, this._board.getContext().getTransform().scale); + this._element.dragElement(this._data, uuid, point, prevPoint, this._board.getContext().getTransform().scale); this.draw(); prevPoint = point; } diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index c209350..4311f43 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -1,4 +1,7 @@ import { TypeContext, TypePoint, TypeData } from '@idraw/types'; +import util from './../util'; + +const { createUUID } = util.uuid; export class Element { private _ctx: TypeContext; @@ -7,9 +10,19 @@ export class Element { this._ctx = ctx; } - isPointInElement(p: TypePoint, data: TypeData) { + initData (data: TypeData) { + data.elements.forEach((elem) => { + if (!(elem.uuid && typeof elem.uuid === 'string')) { + elem.uuid = createUUID(); + } + }); + return data; + } + + isPointInElement(p: TypePoint, data: TypeData): [number, string | null] { const ctx = this._ctx; let idx = -1; + let uuid = null for (let i = data.elements.length - 1; i >= 0; i--) { const ele = data.elements[i]; ctx.beginPath(); @@ -20,13 +33,15 @@ export class Element { ctx.closePath(); if (ctx.isPointInPath(p.x, p.y)) { idx = i; + uuid = ele.uuid; break; } } - return idx; + return [idx, uuid]; } - dragElement(data: TypeData, index: number, point: TypePoint, prevPoint: TypePoint, scale: number) { + dragElement(data: TypeData, uuid: string, point: TypePoint, prevPoint: TypePoint, scale: number) { + const index = this.getElementIndex(data, uuid); if (data.elements[index]) { const moveX = point.x - prevPoint.x; const moveY = point.y - prevPoint.y; @@ -35,10 +50,15 @@ export class Element { } } - createTransformWrapper(data: TypeData, index: number) { - if (!data.elements[index]) { - return; + getElementIndex(data: TypeData, uuid: string) { + let idx = -1; + for (let i = 0; i < data.elements.length; i++) { + if (data.elements[i].uuid === uuid) { + idx = i; + break; + } } - + return idx; } + } diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts new file mode 100644 index 0000000..ea90408 --- /dev/null +++ b/packages/core/src/lib/helper.ts @@ -0,0 +1,22 @@ +import { + TypeData, + TypeHelper, + TypeHelperConfig, + TypeHelperCreateOpts, + TypeElemDesc +} from '@idraw/types'; + +export class Helper implements TypeHelper { + + constructor() {} + + createConfig( + data: TypeData, + opts: TypeHelperCreateOpts ): TypeHelperConfig { + const config = { + elementMap: {} + } + + return config + } +} \ No newline at end of file diff --git a/packages/core/src/util/index.ts b/packages/core/src/util/index.ts index f7c5dbc..8447878 100644 --- a/packages/core/src/util/index.ts +++ b/packages/core/src/util/index.ts @@ -2,6 +2,7 @@ import { loadImage } from './loader'; import { delay, compose, throttle } from './time'; import { downloadImageFromCanvas } from './file'; import { toColorHexStr, toColorHexNum, isColorStr } from './color'; +import { createUUID } from './uuid'; export default { time: { @@ -19,5 +20,8 @@ export default { toColorHexStr, toColorHexNum, isColorStr, + }, + uuid: { + createUUID } } \ No newline at end of file diff --git a/packages/core/src/util/uuid.ts b/packages/core/src/util/uuid.ts new file mode 100644 index 0000000..efc4334 --- /dev/null +++ b/packages/core/src/util/uuid.ts @@ -0,0 +1,6 @@ +export function createUUID(): string { + function str4() { + return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); + } + return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`; +} \ No newline at end of file diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 56adeca..ef0799e 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -1,4 +1,5 @@ export * from './lib/data'; export * from './lib/board'; export * from './lib/paint'; -export * from './lib/element'; \ No newline at end of file +export * from './lib/element'; +export * from './lib/helper'; \ No newline at end of file diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts index b9ce722..8394215 100644 --- a/packages/types/src/lib/element.ts +++ b/packages/types/src/lib/element.ts @@ -1,7 +1,7 @@ import { TypePaintData } from './paint'; type TypeElement = { - uuid?: string; + uuid: string; x: number; y: number; w: number; diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts new file mode 100644 index 0000000..d092f7c --- /dev/null +++ b/packages/types/src/lib/helper.ts @@ -0,0 +1,25 @@ +import { TypeData } from './data'; +import { TypeElement, TypeElemDesc } from './element'; + +// type test = {[uuid string]: TypeElement} + +type TypeHelperConfig = { + elementMap: {[key: string]: TypeElement} +} + +type TypeHelperCreateOpts = { + selectedIndex: number +} + +interface TypeHelper { + createConfig( + data: TypeData, + opts: TypeHelperCreateOpts + ): TypeHelperConfig; +} + +export { + TypeHelper, + TypeHelperConfig, + TypeHelperCreateOpts, +} \ No newline at end of file