From 0e22e48f12b0085a93bc1c44b1cee3644867b9bb Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Fri, 24 Sep 2021 23:11:41 +0800 Subject: [PATCH] fix: fix scale-direction for element --- packages/core/examples/features/lib/main.js | 13 ++-- packages/core/src/lib/element.ts | 81 ++++++++++++++++++++- packages/core/src/lib/helper.ts | 36 +++++---- packages/core/src/lib/mapper.ts | 4 +- packages/core/src/lib/temp.ts | 2 + packages/core/src/mixins/event.ts | 8 +- 6 files changed, 114 insertions(+), 30 deletions(-) diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index 4f6f1c6..eed6942 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -84,13 +84,12 @@ function initEvent() { core.on('screenDoubleClickElement', (p) => { console.log('screenDoubleClickElement ===', p) }) + core.on('drawFrame', () => { + console.log(' === drawFrame === ') + }) + core.on('drawFrameComplete', () => { + console.log(' === drawFrameComplete === ') + }) } -// // TODO -core.on('drawFrame', () => { - console.log(' === drawFrame === ') -}) -core.on('drawFrameComplete', () => { - console.log(' === drawFrameComplete === ') -}) \ No newline at end of file diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index b1f832b..0da089c 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -96,16 +96,20 @@ export class Element { if (data.elements[index]?.operation?.lock === true) { return null; } - const moveX = (point.x - prevPoint.x) / scale; - const moveY = (point.y - prevPoint.y) / scale; + let moveX = (point.x - prevPoint.x) / scale; + let moveY = (point.y - prevPoint.y) / scale; const elem = data.elements[index]; // const { devicePixelRatio } = this._ctx.getSize(); + // if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) { + // moveY = (point.y - prevPoint.y) / scale; + // } + switch (direction) { case 'top-left': { if (elem.w - moveX > 0 && elem.h - moveY > 0) { elem.x += moveX; - elem.y += moveY; + elem.y -= moveY; elem.w -= moveX; elem.h -= moveY; } @@ -113,9 +117,17 @@ export class Element { } case 'top': { if (elem.h - moveY > 0) { - elem.y += moveY; + // elem.y += moveY; + const p = calcuScaleElemPosition(elem, moveX, moveY, direction); + // // elem.x = p.x; + elem.y = p.y; elem.h -= moveY; + // console.log(p); + + // elem.y += moveY; + // elem.h -= moveY; } + break; } case 'top-right': { @@ -200,3 +212,64 @@ export class Element { } } + + +function calcuScaleElemPosition( + elem: TypeElement, + moveX: number, + moveY: number, + direction: TypeHelperWrapperDotDirection +): TypePoint { + const p = { x: elem.x, y: elem.y }; + let angle = elem.angle; + if (angle < 0) { + angle = Math.max(0, 360 + angle); + } + switch (direction) { + case 'top-left': { + break; + } + case 'top': { + // if (elem.angle < 90) { + // p.x = p.x - moveY * Math.sin(parseRadian(elem.angle)); + // p.y = p.y + moveY * Math.cos(parseRadian(elem.angle)); + // // parseRadian(elem.angle) + // // p.y += moveY; + // } else { + // p.y += moveY; + // } + + // TODO + parseRadian(elem.angle) + + p.y += moveY; + break; + } + case 'top-right': { + break; + } + case 'right': { + break; + } + case 'bottom-right': { + break; + } + case 'bottom': { + break; + } + case 'bottom-left': { + break; + } + case 'left': { + break; + } + default: { + break; + } + } + return p; +} + +function parseRadian(angle: number) { + return angle * Math.PI / 180; +} \ No newline at end of file diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index df2df08..1b22a3e 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -51,17 +51,19 @@ export class Helper implements TypeHelper { } isPointInElementWrapperDot(p: TypePoint, data?: TypeData): - [ - string | null | undefined, - TypeHelperWrapperDotDirection | null, - number | null, - ] { + { + uuid: string | null | undefined, + selectedDotDirection: TypeHelperWrapperDotDirection | null, + hoverDotDirection: TypeHelperWrapperDotDirection | null, + directIndex: number | null, + } { const ctx = this._ctx; const uuid = this._helperConfig?.selectedElementWrapper?.uuid || null; - let directIdx = null; - let direction: TypeHelperWrapperDotDirection | null = null; + let directIndex = null; + let selectedDotDirection: TypeHelperWrapperDotDirection | null = null; + let hoverDotDirection: TypeHelperWrapperDotDirection | null = null; if (!this._helperConfig.selectedElementWrapper) { - return [uuid, direction, directIdx]; + return {uuid, selectedDotDirection, directIndex, hoverDotDirection}; } const wrapper = this._helperConfig.selectedElementWrapper; const dots = [ @@ -84,6 +86,7 @@ export class Helper implements TypeHelper { 'bottom', 'bottom-right', ]; + let hoverDirectionNames = util.data.deepClone(directionNames); let angleMoveNum = 0; if (data && uuid) { @@ -112,9 +115,10 @@ export class Helper implements TypeHelper { } } if (angleMoveNum > 0) { - directionNames = directionNames.slice(-angleMoveNum).concat(directionNames.slice(0, -angleMoveNum)) + hoverDirectionNames = hoverDirectionNames.slice(-angleMoveNum).concat(hoverDirectionNames.slice(0, -angleMoveNum)) } + rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { for (let i = 0; i < dots.length; i ++) { const dot = dots[i]; @@ -122,26 +126,28 @@ export class Helper implements TypeHelper { ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); ctx.closePath(); if (ctx.isPointInPath(p.x, p.y)) { - direction = directionNames[i]; + selectedDotDirection = directionNames[i]; + hoverDotDirection = hoverDirectionNames[i]; } - if (direction) { - directIdx = i; + if (selectedDotDirection) { + directIndex = i; break; } } }); - if (direction === null) { + if (selectedDotDirection === null) { rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { const dot = wrapper.dots.rotate; ctx.beginPath(); ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); ctx.closePath(); if (ctx.isPointInPath(p.x, p.y)) { - direction = 'rotate'; + selectedDotDirection = 'rotate'; + hoverDotDirection = 'rotate'; } }); } - return [uuid, direction, directIdx]; + return {uuid, selectedDotDirection, hoverDotDirection, directIndex}; } isPointInElementList(p: TypePoint, data: TypeData): boolean { diff --git a/packages/core/src/lib/mapper.ts b/packages/core/src/lib/mapper.ts index 2c52a6f..728f769 100644 --- a/packages/core/src/lib/mapper.ts +++ b/packages/core/src/lib/mapper.ts @@ -46,7 +46,9 @@ export class Mapper { if (!this.isEffectivePoint(p)) { return { cursor, elementUUID}; } - const [uuid, direction] = this[_helper].isPointInElementWrapperDot(p, data); + const { uuid, hoverDotDirection } = this[_helper].isPointInElementWrapperDot(p, data); + + const direction = hoverDotDirection; if (uuid && direction) { switch (direction) { case 'top-right' : { diff --git a/packages/core/src/lib/temp.ts b/packages/core/src/lib/temp.ts index 323b4ed..b4f6cd9 100644 --- a/packages/core/src/lib/temp.ts +++ b/packages/core/src/lib/temp.ts @@ -10,6 +10,7 @@ type TempDataDesc = { selectedUUIDList: string[], hoverUUID: string | null, selectedDotDirection: TypeHelperWrapperDotDirection | null, + hoverDotDirection: TypeHelperWrapperDotDirection | null, prevPoint: TypePoint | null, } @@ -23,6 +24,7 @@ function createData(): TempDataDesc { selectedUUIDList: [], hoverUUID: null, selectedDotDirection: null, + hoverDotDirection: null, prevPoint: null, } } diff --git a/packages/core/src/mixins/event.ts b/packages/core/src/mixins/event.ts index c192bcb..58fd6df 100644 --- a/packages/core/src/mixins/event.ts +++ b/packages/core/src/mixins/event.ts @@ -66,11 +66,13 @@ function handlePoint(core: Core) { // Coontroll Element-List core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST); } else { - const [uuid, direction] = core[_helper].isPointInElementWrapperDot(point, core[_data]); - if (uuid && direction) { + const { + uuid, selectedDotDirection + } = core[_helper].isPointInElementWrapperDot(point, core[_data]); + if (uuid && selectedDotDirection) { // Controll Element-Wrapper core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_DOT); - core[_tempData].set('selectedDotDirection', direction); + core[_tempData].set('selectedDotDirection', selectedDotDirection); core[_tempData].set('selectedUUID', uuid); } else { const [index, uuid] = core[_element].isPointInElement(point, core[_data]);