From f41b605b7106e51183db9c797173faaa00fe09ed Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Fri, 28 May 2021 14:32:46 +0800 Subject: [PATCH] feat: implement core move up/down element --- package.json | 1 - packages/core/example/css/index.css | 4 +++ packages/core/example/lib/element.js | 44 +++++++++++++--------------- packages/core/src/index.ts | 44 ++++++++++++++++++++++------ packages/core/src/lib/helper.ts | 9 +++++- 5 files changed, 67 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 22d24f5..f129581 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "rollup-plugin-typescript2": "^0.30.0", "serve-handler": "^6.1.3", "ts-node": "^9.1.1", - "tslib": "^2.2.0", "typescript": "^4.2.3" } } diff --git a/packages/core/example/css/index.css b/packages/core/example/css/index.css index caff957..4ee4a38 100644 --- a/packages/core/example/css/index.css +++ b/packages/core/example/css/index.css @@ -86,6 +86,10 @@ html, body { cursor: pointer; } +.btn-hidden { + visibility: hidden; +} + .elem-item-btn:hover { color: #4183c4; border-color: #4183c4; diff --git a/packages/core/example/lib/element.js b/packages/core/example/lib/element.js index c1887b6..43d1dc5 100644 --- a/packages/core/example/lib/element.js +++ b/packages/core/example/lib/element.js @@ -12,44 +12,40 @@ export function doElemens(core) { function renderElemens(core) { const data = core.getData(); const elems = data.elements; - const items = elems.map((ele) => { - return ` + const items = []; + for (let i = elems.length - 1; i >= 0; i --) { + const ele = elems[i]; + items.push(`
${ele.name || 'Unnamed'} - Up - Down + Up + Down
- `; - }); + `); + } dom.innerHTML = items.join(''); } function listenElements(core) { - const names = dom.querySelectorAll('[data-elem-name]'); - const upBtns = dom.querySelectorAll('[data-elem-btn-up]'); - const downBtns = dom.querySelectorAll('[data-elem-btn-down]'); - names.forEach((el) => { - el.addEventListener('click', () => { + dom.addEventListener('click', (e) => { + if (!e.path[0]) { + return; + } + const el = e.path[0]; + if (el.hasAttribute('data-elem-name')) { const uuid = el.getAttribute('data-elem-name'); - core.selectElement(uuid); - }, false); - }); - - upBtns.forEach((el) => { - el.addEventListener('click', () => { + core.selectElementByUUID(uuid); + } else if (el.hasAttribute('data-elem-btn-up')) { const uuid = el.getAttribute('data-elem-btn-up'); core.moveUpElement(uuid); renderElemens(core); - }, false); - }); - - downBtns.forEach((el) => { - el.addEventListener('click', () => { + } else if (el.hasAttribute('data-elem-btn-down')) { const uuid = el.getAttribute('data-elem-btn-down'); core.moveDownElement(uuid); renderElemens(core); - }, false); - }) + } + }, true); + } diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 38bef8b..4826372 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -68,10 +68,40 @@ class Core { this[_renderer].render(this[_data], this[_helper].getConfig()); } - // TODO selectElement(index: number) { - // TODO - console.log('index'); + if (this[_data].elements[index]) { + const uuid = this[_data].elements[index].uuid; + this[_mode] = Mode.SELECT_ELEMENT; + this[_selectedUUID] = uuid; + this.draw(); + } + } + + selectElementByUUID(uuid: string) { + const index = this[_helper].getElementIndexByUUID(uuid); + if (typeof index === 'number' && index >= 0) { + this.selectElement(index); + } + } + + moveUpElement(uuid: string) { + const index = this[_helper].getElementIndexByUUID(uuid); + if (typeof index === 'number' && index >= 0 && index < this[_data].elements.length - 1) { + const temp = this[_data].elements[index]; + this[_data].elements[index] = this[_data].elements[index + 1]; + this[_data].elements[index + 1] = temp; + } + this.draw(); + } + + moveDownElement(uuid: string) { + const index = this[_helper].getElementIndexByUUID(uuid); + if (typeof index === 'number' && index > 0 && index < this[_data].elements.length) { + const temp = this[_data].elements[index]; + this[_data].elements[index] = this[_data].elements[index - 1]; + this[_data].elements[index - 1] = temp; + } + this.draw(); } scale(ratio: number) { @@ -111,12 +141,8 @@ class Core { this[_selectedDotDirection] = direction; this[_selectedUUID] = uuid; } else { - const [index, uuid] = this[_element].isPointInElement(point, this[_data]); - if (index >= 0) { - this[_mode] = Mode.SELECT_ELEMENT; - this[_selectedUUID] = uuid; - this.draw(); - } + const [index] = this[_element].isPointInElement(point, this[_data]); + this.selectElement(index); } } diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 6fe3829..e29ba43 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -16,7 +16,6 @@ export class Helper implements TypeHelper { private _helperConfig: TypeHelperConfig; private _coreConfig: TypeConfigStrict; private _ctx: TypeContext; - // private _helperConfig: TypeConfig; constructor(ctx: TypeContext, config: TypeConfigStrict) { this._ctx = ctx; @@ -38,6 +37,14 @@ export class Helper implements TypeHelper { return JSON.parse(JSON.stringify(this._helperConfig)); } + getElementIndexByUUID(uuid: string): number | null { + const index = this._helperConfig.elementIndexMap[uuid]; + if (index >= 0) { + return index + } + return null; + } + isPointInElementWrapperDot(p: TypePoint): [string | null | undefined, TypeHelperWrapperDotDirection | null] { const ctx = this._ctx; const uuid = this._helperConfig?.selectedElementWrapper?.uuid;