From 0e22e48f12b0085a93bc1c44b1cee3644867b9bb Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Fri, 24 Sep 2021 23:11:41 +0800 Subject: [PATCH 01/13] 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 4f6f1c65c..eed694206 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 b1f832b3a..0da089c55 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 df2df08ed..1b22a3e86 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 2c52a6f10..728f7699e 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 323b4edd4..b4f6cd93b 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 c192bcb1f..58fd6df29 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]); From 3d63c4241e565752eaaff3f2caba59dc27ace47b Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 25 Sep 2021 00:09:12 +0800 Subject: [PATCH 02/13] fix: fix scale-top-direction for element --- packages/core/src/lib/element.ts | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index 0da089c55..85af863a5 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -118,7 +118,7 @@ export class Element { case 'top': { if (elem.h - moveY > 0) { // elem.y += moveY; - const p = calcuScaleElemPosition(elem, moveX, moveY, direction); + const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); // // elem.x = p.x; elem.y = p.y; elem.h -= moveY; @@ -218,7 +218,8 @@ function calcuScaleElemPosition( elem: TypeElement, moveX: number, moveY: number, - direction: TypeHelperWrapperDotDirection + direction: TypeHelperWrapperDotDirection, + scale: number, ): TypePoint { const p = { x: elem.x, y: elem.y }; let angle = elem.angle; @@ -230,19 +231,14 @@ function calcuScaleElemPosition( 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; + 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; + } break; } case 'top-right': { From 7485d14b98fee9c1ed4ea0330801fada69ae95ca Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 26 Sep 2021 17:07:50 +0800 Subject: [PATCH 03/13] fix: update scale-top-direction for element --- .../core/examples/features/lib/data/rect.js | 2 +- packages/core/src/lib/element.ts | 44 +++++++++++++++---- 2 files changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js index 3dd844f0b..88b508e86 100644 --- a/packages/core/examples/features/lib/data/rect.js +++ b/packages/core/examples/features/lib/data/rect.js @@ -40,7 +40,7 @@ const data = { w: 200, h: 20, type: "rect", - angle: 45, + angle: 60, desc: { bgColor: "#c0c0c0", borderRadius: 20, diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index 85af863a5..c9221b4e9 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -121,7 +121,7 @@ export class Element { const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); // // elem.x = p.x; elem.y = p.y; - elem.h -= moveY; + elem.h = p.h; // console.log(p); // elem.y += moveY; @@ -220,8 +220,8 @@ function calcuScaleElemPosition( moveY: number, direction: TypeHelperWrapperDotDirection, scale: number, -): TypePoint { - const p = { x: elem.x, y: elem.y }; +): TypePoint & { w: number, h: number } { + const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h }; let angle = elem.angle; if (angle < 0) { angle = Math.max(0, 360 + angle); @@ -231,13 +231,41 @@ function calcuScaleElemPosition( 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; + // // console.log('elem.angle =', elem.angle, moveY); + if (elem.angle <= 90 && elem.angle > 0) { + // const radian = parseRadian(elem.angle); + // let moveDist = 0; + // if (elem.angle < 45) { + // moveDist = moveY / Math.cos(radian) + // } else { + // moveDist = -moveX / Math.sin(radian) + // } + // let centerX = p.x + elem.w / 2; + // let centerY = p.y + elem.h / 2; + // centerX = centerX - moveDist * Math.sin(radian); + // centerY = centerY + moveDist * Math.cos(radian); + // if (p.h - moveDist > 0) { + // p.h = p.h - moveDist; + // p.x = centerX - p.w / 2; + // p.y = centerY - p.h / 2; + // } + + const radian = parseRadian(elem.angle); + let moveDist = 0; + if (elem.angle < 45) { + moveDist = moveY / Math.cos(radian) + } else { + moveDist = -moveX / Math.sin(radian) + } + if (p.h - moveDist > 0) { + p.h = p.h - moveDist; + p.x = p.x - moveDist * Math.sin(radian) + p.y = p.y + moveDist * Math.cos(radian); + } + } else { p.y += moveY; + p.h -= moveY; } break; } From 730a9c9acf988672750bb994796f1094b77e7e07 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sun, 26 Sep 2021 22:27:39 +0800 Subject: [PATCH 04/13] fix: update scale-top-direction for element --- packages/core/examples/features/css/index.css | 4 +- .../core/examples/features/lib/data/rect.js | 8 +- packages/core/examples/features/lib/main.js | 2 +- packages/core/src/lib/element.ts | 89 ++++++++++--------- 4 files changed, 52 insertions(+), 51 deletions(-) diff --git a/packages/core/examples/features/css/index.css b/packages/core/examples/features/css/index.css index b9f15cae9..a594d2c50 100644 --- a/packages/core/examples/features/css/index.css +++ b/packages/core/examples/features/css/index.css @@ -13,8 +13,8 @@ html, body { background-image: linear-gradient(#aaaaaa2a 1px, transparent 0), linear-gradient(90deg, #aaaaaa2a 1px, transparent 0), - linear-gradient(#aaaaaa1a 1px, transparent 0), - linear-gradient(90deg, #aaaaaa1a 1px, transparent 0); + linear-gradient(#aaaaaa4a 1px, transparent 0), + linear-gradient(90deg, #aaaaaa4a 1px, transparent 0); background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; } diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js index 88b508e86..6d2c9e9b3 100644 --- a/packages/core/examples/features/lib/data/rect.js +++ b/packages/core/examples/features/lib/data/rect.js @@ -35,12 +35,12 @@ const data = { }, { name: "rect-003", - x: 160, - y: 160, - w: 200, + x: 250, + y: 150, + w: 150, h: 20, type: "rect", - angle: 60, + angle: 45, desc: { bgColor: "#c0c0c0", borderRadius: 20, diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js index eed694206..12b7e4493 100644 --- a/packages/core/examples/features/lib/main.js +++ b/packages/core/examples/features/lib/main.js @@ -34,7 +34,7 @@ const core = new Core(mount, { color: '#e91e63', dotSize: 8, lineWidth: 1, - lineDash: [12, 12], + // lineDash: [12, 12], }, }); diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index c9221b4e9..4de4463c8 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -116,18 +116,10 @@ export class Element { break; } case 'top': { - if (elem.h - moveY > 0) { - // elem.y += moveY; - const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // // elem.x = p.x; - elem.y = p.y; - elem.h = p.h; - // console.log(p); - - // elem.y += moveY; - // elem.h -= moveY; - } - + const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + elem.x = p.x; + elem.y = p.y; + elem.h = p.h; break; } case 'top-right': { @@ -231,42 +223,51 @@ function calcuScaleElemPosition( break; } case 'top': { - // // console.log('elem.angle =', elem.angle, moveY); - if (elem.angle <= 90 && elem.angle > 0) { - // const radian = parseRadian(elem.angle); - // let moveDist = 0; - // if (elem.angle < 45) { - // moveDist = moveY / Math.cos(radian) - // } else { - // moveDist = -moveX / Math.sin(radian) - // } - // let centerX = p.x + elem.w / 2; - // let centerY = p.y + elem.h / 2; - // centerX = centerX - moveDist * Math.sin(radian); - // centerY = centerY + moveDist * Math.cos(radian); - // if (p.h - moveDist > 0) { - // p.h = p.h - moveDist; - // p.x = centerX - p.w / 2; - // p.y = centerY - p.h / 2; - // } - - const radian = parseRadian(elem.angle); - let moveDist = 0; - if (elem.angle < 45) { - moveDist = moveY / Math.cos(radian) - } else { - moveDist = -moveX / Math.sin(radian) + if (elem.angle === 0) { + p.y += moveY; + p.h -= moveY; + } else if (elem.angle > 0 || elem.angle < 0) { + const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + let moveDist = moveY; + let centerX = p.x + elem.w / 2; + let centerY = p.y + elem.h / 2; + if (angle < 90) { + moveDist = -moveY; // TODO + const radian = parseRadian(angle); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); + } else if (angle < 180) { + moveDist = moveX; // TODO + const radian = parseRadian(angle - 90); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + } else if (angle < 270) { + moveDist = moveY; // TODO + const radian = parseRadian(angle - 180); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.sin(radian); + centerY = centerY + centerMoveDist * Math.cos(radian); + } else if (angle < 360) { + moveDist = -moveX; // TODO + const radian = parseRadian(angle - 270); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.cos(radian); + centerY = centerY - centerMoveDist * Math.sin(radian); } - if (p.h - moveDist > 0) { - p.h = p.h - moveDist; - p.x = p.x - moveDist * Math.sin(radian) - p.y = p.y + moveDist * Math.cos(radian); + if (p.h + moveDist > 0) { + p.h = p.h + moveDist; + p.x = centerX - p.w / 2; + p.y = centerY - p.h / 2; } - } else { - p.y += moveY; - p.h -= moveY; + if (p.h - moveY > 0) { + p.y += moveY; + p.h -= moveY; + } } + break; } case 'top-right': { From 064dfdbbecc16924c31e3cd53d3398c65c4a5788 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 09:57:54 +0800 Subject: [PATCH 05/13] fix: update scale-direction for element --- .../core/examples/features/lib/data/rect.js | 4 +- packages/core/src/lib/element.ts | 188 +++++++++++------- 2 files changed, 121 insertions(+), 71 deletions(-) diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js index 6d2c9e9b3..141967b9b 100644 --- a/packages/core/examples/features/lib/data/rect.js +++ b/packages/core/examples/features/lib/data/rect.js @@ -50,8 +50,8 @@ const data = { }, { name: "rect-004", - x: 400 - 10, - y: 300 - 10, + x: 400 - 50, + y: 300 - 50, w: 200, h: 100, type: "rect", diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index 4de4463c8..b11326d95 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -105,76 +105,97 @@ export class Element { // 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.w -= moveX; - elem.h -= moveY; - } - break; - } - case 'top': { - const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - elem.x = p.x; - elem.y = p.y; - elem.h = p.h; - break; - } - case 'top-right': { - if (elem.h - moveY > 0 && elem.w + moveX > 0) { - elem.y += moveY; - elem.w += moveX; - elem.h -= moveY; - } - break; - } - case 'right': { - if (elem.w + moveX > 0) { - elem.w += moveX; - } - break; - } - case 'bottom-right': { - if (elem.w + moveX > 0 && elem.h + moveY > 0) { - elem.w += moveX; - elem.h += moveY; - } - break; - } - case 'bottom': { - if (elem.h + moveY > 0) { - elem.h += moveY; - } - break; - } - case 'bottom-left': { - if (elem.w - moveX > 0 && elem.h + moveY > 0) { - elem.x += moveX; - elem.w -= moveX; - elem.h += moveY; - } - break; - } - case 'left': { - if (elem.w - moveX > 0) { - elem.x += moveX; - elem.w -= moveX; - } - break; - } - case 'rotate': { - const center = calcElementCenter(elem); - const radian = calcRadian(center, prevPoint, point); - elem.angle = (elem.angle || 0) + parseRadianToAngle(radian); - break; - } - default: { - break; - } + if ([ + 'top-left', 'top', 'top-right', 'right', + 'bottom-right', 'bottom', 'bottom-left', 'left' + ].includes(direction)) { + const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + elem.x = p.x; + elem.y = p.y; + elem.w = p.w; + elem.h = p.h; + } else if (direction === 'rotate') { + const center = calcElementCenter(elem); + const radian = calcRadian(center, prevPoint, point); + elem.angle = (elem.angle || 0) + parseRadianToAngle(radian); } + // switch (direction) { + // case 'top-left': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'top': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'top-right': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'right': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'bottom-right': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'bottom': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'bottom-left': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'left': { + // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); + // elem.x = p.x; + // elem.y = p.y; + // elem.w = p.w; + // elem.h = p.h; + // break; + // } + // case 'rotate': { + // const center = calcElementCenter(elem); + // const radian = calcRadian(center, prevPoint, point); + // elem.angle = (elem.angle || 0) + parseRadianToAngle(radian); + // break; + // } + // default: { + // break; + // } + // } + this.limitElementAttrs(elem); return { @@ -220,6 +241,12 @@ function calcuScaleElemPosition( } switch (direction) { case 'top-left': { + if (elem.w - moveX > 0 && elem.h - moveY > 0) { + p.x += moveX; + p.y += moveY; + p.w -= moveX; + p.h -= moveY; + } break; } case 'top': { @@ -267,25 +294,48 @@ function calcuScaleElemPosition( p.h -= moveY; } } - break; } case 'top-right': { + if (elem.h - moveY > 0 && elem.w + moveX > 0) { + p.y += moveY; + p.w += moveX; + p.h -= moveY; + } break; } case 'right': { + if (elem.w + moveX > 0) { + p.w += moveX; + } break; } case 'bottom-right': { + if (elem.w + moveX > 0 && elem.h + moveY > 0) { + p.w += moveX; + p.h += moveY; + } break; } case 'bottom': { + if (elem.h + moveY > 0) { + p.h += moveY; + } break; } case 'bottom-left': { + if (elem.w - moveX > 0 && elem.h + moveY > 0) { + p.x += moveX; + p.w -= moveX; + p.h += moveY; + } break; } case 'left': { + if (elem.w - moveX > 0) { + p.x += moveX; + p.w -= moveX; + } break; } default: { From 3f3fe56aaf6eebd79117d30dc8437e684c802138 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 12:36:22 +0800 Subject: [PATCH 06/13] fix: update scale-top-direction for element when it rotated --- packages/core/src/lib/element.ts | 386 ++++++++++++++++++++++++------- 1 file changed, 296 insertions(+), 90 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index b11326d95..e9985c77c 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -120,82 +120,6 @@ export class Element { elem.angle = (elem.angle || 0) + parseRadianToAngle(radian); } - // switch (direction) { - // case 'top-left': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'top': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'top-right': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'right': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'bottom-right': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'bottom': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'bottom-left': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'left': { - // const p = calcuScaleElemPosition(elem, moveX, moveY, direction, scale); - // elem.x = p.x; - // elem.y = p.y; - // elem.w = p.w; - // elem.h = p.h; - // break; - // } - // case 'rotate': { - // const center = calcElementCenter(elem); - // const radian = calcRadian(center, prevPoint, point); - // elem.angle = (elem.angle || 0) + parseRadianToAngle(radian); - // break; - // } - // default: { - // break; - // } - // } - this.limitElementAttrs(elem); return { @@ -241,43 +165,64 @@ function calcuScaleElemPosition( } switch (direction) { case 'top-left': { + // if (elem.angle === 0) { + // // TODO + // } else if (elem.angle > 0 || elem.angle < 0) { + // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // if (angle < 90) { + // // TODO + // } else if (angle < 180) { + // // TODO + // } else if (angle < 270) { + // // TODO + // } else if (angle < 360) { + // // TODO + // } + // } else { + // // TODO + // } + if (elem.w - moveX > 0 && elem.h - moveY > 0) { p.x += moveX; p.y += moveY; p.w -= moveX; p.h -= moveY; } + + break; } case 'top': { if (elem.angle === 0) { - p.y += moveY; - p.h -= moveY; + if (p.h - moveY > 0) { + p.y += moveY; + p.h -= moveY; + } } else if (elem.angle > 0 || elem.angle < 0) { const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); - let moveDist = moveY; + let moveDist = calcMoveDist(moveX, moveY); let centerX = p.x + elem.w / 2; let centerY = p.y + elem.h / 2; if (angle < 90) { - moveDist = -moveY; // TODO + moveDist = 0 - changeMoveDistDirect(moveDist, moveY); const radian = parseRadian(angle); const centerMoveDist = moveDist / 2; centerX = centerX + centerMoveDist * Math.sin(radian); centerY = centerY - centerMoveDist * Math.cos(radian); } else if (angle < 180) { - moveDist = moveX; // TODO + moveDist = changeMoveDistDirect(moveDist, moveX); const radian = parseRadian(angle - 90); const centerMoveDist = moveDist / 2; centerX = centerX + centerMoveDist * Math.cos(radian); centerY = centerY + centerMoveDist * Math.sin(radian); } else if (angle < 270) { - moveDist = moveY; // TODO + moveDist = changeMoveDistDirect(moveDist, moveY); const radian = parseRadian(angle - 180); const centerMoveDist = moveDist / 2; centerX = centerX - centerMoveDist * Math.sin(radian); centerY = centerY + centerMoveDist * Math.cos(radian); } else if (angle < 360) { - moveDist = -moveX; // TODO + moveDist = 0 - changeMoveDistDirect(moveDist, moveX); const radian = parseRadian(angle - 270); const centerMoveDist = moveDist / 2; centerX = centerX - centerMoveDist * Math.cos(radian); @@ -297,20 +242,119 @@ function calcuScaleElemPosition( break; } case 'top-right': { - if (elem.h - moveY > 0 && elem.w + moveX > 0) { - p.y += moveY; - p.w += moveX; - p.h -= moveY; - } + // if (elem.angle === 0) { + if (p.h - moveY > 0) { + p.y += moveY; + p.h -= moveY; + } + // } else if (elem.angle > 0 || elem.angle < 0) { + // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // let moveDist = moveY; + // let centerX = p.x + elem.w / 2; + // let centerY = p.y + elem.h / 2; + // if (angle < 90) { + // moveDist = -moveY; // TODO + // const radian = parseRadian(angle); + // const centerMoveDist = moveDist / 2; + // centerX = centerX + centerMoveDist * Math.sin(radian); + // centerY = centerY - centerMoveDist * Math.cos(radian); + // } else if (angle < 180) { + // moveDist = moveX; // TODO + // const radian = parseRadian(angle - 90); + // const centerMoveDist = moveDist / 2; + // centerX = centerX + centerMoveDist * Math.cos(radian); + // centerY = centerY + centerMoveDist * Math.sin(radian); + // } else if (angle < 270) { + // moveDist = moveY; // TODO + // const radian = parseRadian(angle - 180); + // const centerMoveDist = moveDist / 2; + // centerX = centerX - centerMoveDist * Math.sin(radian); + // centerY = centerY + centerMoveDist * Math.cos(radian); + // } else if (angle < 360) { + // moveDist = -moveX; // TODO + // const radian = parseRadian(angle - 270); + // const centerMoveDist = moveDist / 2; + // centerX = centerX - centerMoveDist * Math.cos(radian); + // centerY = centerY - centerMoveDist * Math.sin(radian); + // } + // if (p.h + moveDist > 0) { + // p.h = p.h + moveDist; + // p.x = centerX - p.w / 2; + // p.y = centerY - p.h / 2; + // } + // } else { + // if (p.h - moveY > 0) { + // p.y += moveY; + // p.h -= moveY; + // } + // } break; } case 'right': { - if (elem.w + moveX > 0) { - p.w += moveX; + if (elem.angle === 0) { + if (elem.w + moveX > 0) { + p.w += moveX; + } + } else if (elem.angle > 0 || elem.angle < 0) { + const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + let moveDist = moveY; + let centerX = p.x + elem.w / 2; + let centerY = p.y + elem.h / 2; + if (angle < 90) { + moveDist = -moveY; // TODO + const radian = parseRadian(angle); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); + } else if (angle < 180) { + moveDist = moveX; // TODO + const radian = parseRadian(angle - 90); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + } else if (angle < 270) { + moveDist = moveY; // TODO + const radian = parseRadian(angle - 180); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.sin(radian); + centerY = centerY + centerMoveDist * Math.cos(radian); + } else if (angle < 360) { + moveDist = -moveX; // TODO + const radian = parseRadian(angle - 270); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.cos(radian); + centerY = centerY - centerMoveDist * Math.sin(radian); + } + if (p.h + moveDist > 0) { + p.h = p.h + moveDist; + p.x = centerX - p.w / 2; + p.y = centerY - p.h / 2; + } + } else { + if (elem.w + moveX > 0) { + p.w += moveX; + } } + break; } case 'bottom-right': { + // if (elem.angle === 0) { + // // TODO + // } else if (elem.angle > 0 || elem.angle < 0) { + // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // if (angle < 90) { + // // TODO + // } else if (angle < 180) { + // // TODO + // } else if (angle < 270) { + // // TODO + // } else if (angle < 360) { + // // TODO + // } + // } else { + // // TODO + // } if (elem.w + moveX > 0 && elem.h + moveY > 0) { p.w += moveX; p.h += moveY; @@ -318,12 +362,44 @@ function calcuScaleElemPosition( break; } case 'bottom': { + // if (elem.angle === 0) { + // // TODO + // } else if (elem.angle > 0 || elem.angle < 0) { + // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // if (angle < 90) { + // // TODO + // } else if (angle < 180) { + // // TODO + // } else if (angle < 270) { + // // TODO + // } else if (angle < 360) { + // // TODO + // } + // } else { + // // TODO + // } if (elem.h + moveY > 0) { p.h += moveY; } break; } case 'bottom-left': { + // if (elem.angle === 0) { + // // TODO + // } else if (elem.angle > 0 || elem.angle < 0) { + // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // if (angle < 90) { + // // TODO + // } else if (angle < 180) { + // // TODO + // } else if (angle < 270) { + // // TODO + // } else if (angle < 360) { + // // TODO + // } + // } else { + // // TODO + // } if (elem.w - moveX > 0 && elem.h + moveY > 0) { p.x += moveX; p.w -= moveX; @@ -332,6 +408,22 @@ function calcuScaleElemPosition( break; } case 'left': { + // if (elem.angle === 0) { + // // TODO + // } else if (elem.angle > 0 || elem.angle < 0) { + // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // if (angle < 90) { + // // TODO + // } else if (angle < 180) { + // // TODO + // } else if (angle < 270) { + // // TODO + // } else if (angle < 360) { + // // TODO + // } + // } else { + // // TODO + // } if (elem.w - moveX > 0) { p.x += moveX; p.w -= moveX; @@ -347,4 +439,118 @@ function calcuScaleElemPosition( function parseRadian(angle: number) { return angle * Math.PI / 180; +} + +// function getMoveDistance(elem: TypeElement, +// moveX: number, +// moveY: number, +// direction: TypeHelperWrapperDotDirection, +// scale: number, +// ): { +// distanceX: number, +// distanceY: number, +// distance: number, +// distanceLength: number, +// } { +// const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h }; +// let angle = elem.angle; +// if (angle < 0) { +// angle = Math.max(0, 360 + angle); +// } +// let distanceX: number = moveX; +// let distanceY: number = moveY; +// let distanceLength: number = Math.sqrt(moveX * moveX + moveY * moveY); +// let distance: number = distanceLength; +// switch (direction) { +// case 'top-left': { +// break; +// } +// case 'top': { +// if (elem.angle === 0) { +// distance = moveY > 0 ? distance : -distance; +// } else if (elem.angle > 0 || elem.angle < 0) { +// distance = moveY > 0 ? distance : -distance; +// if (angle < 90) { +// moveDist = -moveY; // TODO +// } else if (angle < 180) { +// moveDist = moveX; // TODO +// const radian = parseRadian(angle - 90); +// const centerMoveDist = moveDist / 2; +// centerX = centerX + centerMoveDist * Math.cos(radian); +// centerY = centerY + centerMoveDist * Math.sin(radian); +// } else if (angle < 270) { +// moveDist = moveY; // TODO +// const radian = parseRadian(angle - 180); +// const centerMoveDist = moveDist / 2; +// centerX = centerX - centerMoveDist * Math.sin(radian); +// centerY = centerY + centerMoveDist * Math.cos(radian); +// } else if (angle < 360) { +// moveDist = -moveX; // TODO +// const radian = parseRadian(angle - 270); +// const centerMoveDist = moveDist / 2; +// centerX = centerX - centerMoveDist * Math.cos(radian); +// centerY = centerY - centerMoveDist * Math.sin(radian); +// } +// if (p.h + moveDist > 0) { +// p.h = p.h + moveDist; +// p.x = centerX - p.w / 2; +// p.y = centerY - p.h / 2; +// } +// } else { +// if (p.h - moveY > 0) { +// p.y += moveY; +// p.h -= moveY; +// } +// } +// break; +// } +// case 'top-right': { +// if (elem.h - moveY > 0 && elem.w + moveX > 0) { +// p.y += moveY; +// p.w += moveX; +// p.h -= moveY; +// } +// break; +// } +// case 'right': { +// if (elem.w + moveX > 0) { +// p.w += moveX; +// } +// break; +// } +// case 'bottom-right': { +// if (elem.w + moveX > 0 && elem.h + moveY > 0) { +// p.w += moveX; +// p.h += moveY; +// } +// break; +// } +// case 'bottom': { +// if (elem.h + moveY > 0) { +// p.h += moveY; +// } +// break; +// } +// case 'bottom-left': { +// if (elem.w - moveX > 0 && elem.h + moveY > 0) { +// p.x += moveX; +// p.w -= moveX; +// p.h += moveY; +// } +// break; +// } +// default: { +// break; +// } +// } +// return { distanceX, distanceY, distanceLength, distance }; +// } + + +function calcMoveDist(moveX: number, moveY: number) { + return Math.sqrt(moveX * moveX + moveY * moveY); +} + +function changeMoveDistDirect(moveDist: number, moveDirect: number) { + return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist); } \ No newline at end of file From 3c3a3bd4ba85e91c677c901a9dd8a110db1b9a3f Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 13:46:50 +0800 Subject: [PATCH 07/13] fix: update scale-right-direction for element when it rotated --- packages/core/src/lib/element.ts | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index e9985c77c..63f20dd35 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -297,36 +297,37 @@ function calcuScaleElemPosition( } } else if (elem.angle > 0 || elem.angle < 0) { const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); - let moveDist = moveY; + let moveDist = calcMoveDist(moveX, moveY); let centerX = p.x + elem.w / 2; let centerY = p.y + elem.h / 2; if (angle < 90) { - moveDist = -moveY; // TODO + moveDist = changeMoveDistDirect(moveDist, moveY); const radian = parseRadian(angle); const centerMoveDist = moveDist / 2; - centerX = centerX + centerMoveDist * Math.sin(radian); - centerY = centerY - centerMoveDist * Math.cos(radian); + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); } else if (angle < 180) { - moveDist = moveX; // TODO + moveDist = changeMoveDistDirect(moveDist, moveY); const radian = parseRadian(angle - 90); const centerMoveDist = moveDist / 2; - centerX = centerX + centerMoveDist * Math.cos(radian); - centerY = centerY + centerMoveDist * Math.sin(radian); + centerX = centerX - centerMoveDist * Math.sin(radian); + centerY = centerY + centerMoveDist * Math.cos(radian); } else if (angle < 270) { - moveDist = moveY; // TODO + moveDist = changeMoveDistDirect(moveDist, moveY); const radian = parseRadian(angle - 180); const centerMoveDist = moveDist / 2; - centerX = centerX - centerMoveDist * Math.sin(radian); - centerY = centerY + centerMoveDist * Math.cos(radian); + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + moveDist = 0 - moveDist; } else if (angle < 360) { - moveDist = -moveX; // TODO + moveDist = changeMoveDistDirect(moveDist, moveX); const radian = parseRadian(angle - 270); const centerMoveDist = moveDist / 2; - centerX = centerX - centerMoveDist * Math.cos(radian); - centerY = centerY - centerMoveDist * Math.sin(radian); + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); } if (p.h + moveDist > 0) { - p.h = p.h + moveDist; + p.w = p.w + moveDist; p.x = centerX - p.w / 2; p.y = centerY - p.h / 2; } From b30a45a8b5b42974b9527e43e5426acc5a2a8fe9 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 14:23:20 +0800 Subject: [PATCH 08/13] fix: update scale-bottom-direction for element when it rotated --- packages/core/src/lib/element.ts | 62 ++++++++++++++++++++++---------- 1 file changed, 44 insertions(+), 18 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index 63f20dd35..db575c178 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -363,25 +363,51 @@ function calcuScaleElemPosition( break; } case 'bottom': { - // if (elem.angle === 0) { - // // TODO - // } else if (elem.angle > 0 || elem.angle < 0) { - // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); - // if (angle < 90) { - // // TODO - // } else if (angle < 180) { - // // TODO - // } else if (angle < 270) { - // // TODO - // } else if (angle < 360) { - // // TODO - // } - // } else { - // // TODO - // } - if (elem.h + moveY > 0) { - p.h += moveY; + if (elem.angle === 0) { + if (elem.h + moveY > 0) { + p.h += moveY; + } + } else if (elem.angle > 0 || elem.angle < 0) { + const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + let moveDist = calcMoveDist(moveX, moveY); + let centerX = p.x + elem.w / 2; + let centerY = p.y + elem.h / 2; + if (angle < 90) { + moveDist = changeMoveDistDirect(moveDist, moveY); + const radian = parseRadian(angle); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.sin(radian); + centerY = centerY + centerMoveDist * Math.cos(radian); + } else if (angle < 180) { + moveDist = 0 - changeMoveDistDirect(moveDist, moveX); + const radian = parseRadian(angle - 90); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.cos(radian); + centerY = centerY - centerMoveDist * Math.sin(radian); + } else if (angle < 270) { + moveDist = changeMoveDistDirect(moveDist, moveX); + const radian = parseRadian(angle - 180); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); + } else if (angle < 360) { + moveDist = changeMoveDistDirect(moveDist, moveX); + const radian = parseRadian(angle - 270); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + } + if (p.h + moveDist > 0) { + p.h = p.h + moveDist; + p.x = centerX - p.w / 2; + p.y = centerY - p.h / 2; + } + } else { + if (elem.h + moveY > 0) { + p.h += moveY; + } } + break; } case 'bottom-left': { From e2e7af3024b00231e639434bfb0848addc12c805 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 15:00:19 +0800 Subject: [PATCH 09/13] fix: update scale-left-direction for element when it rotated --- packages/core/src/lib/element.ts | 64 ++++++++++++++++++++++---------- 1 file changed, 45 insertions(+), 19 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index db575c178..a4071ded8 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -435,25 +435,51 @@ function calcuScaleElemPosition( break; } case 'left': { - // if (elem.angle === 0) { - // // TODO - // } else if (elem.angle > 0 || elem.angle < 0) { - // // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); - // if (angle < 90) { - // // TODO - // } else if (angle < 180) { - // // TODO - // } else if (angle < 270) { - // // TODO - // } else if (angle < 360) { - // // TODO - // } - // } else { - // // TODO - // } - if (elem.w - moveX > 0) { - p.x += moveX; - p.w -= moveX; + if (elem.angle === 0) { + if (elem.w - moveX > 0) { + p.x += moveX; + p.w -= moveX; + } + } else if (elem.angle > 0 || elem.angle < 0) { + const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + let moveDist = calcMoveDist(moveX, moveY); + let centerX = p.x + elem.w / 2; + let centerY = p.y + elem.h / 2; + if (angle < 90) { + moveDist = 0 - changeMoveDistDirect(moveDist, moveX); + const radian = parseRadian(angle); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.cos(radian); + centerY = centerY - centerMoveDist * Math.sin(radian); + } else if (angle < 180) { + moveDist = changeMoveDistDirect(moveDist, moveX); + const radian = parseRadian(angle - 90); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); + } else if (angle < 270) { + moveDist = changeMoveDistDirect(moveDist, moveY); + const radian = parseRadian(angle - 180); + const centerMoveDist = moveDist / 2; + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + } else if (angle < 360) { + moveDist = changeMoveDistDirect(moveDist, moveY); + const radian = parseRadian(angle - 270); + const centerMoveDist = moveDist / 2; + centerX = centerX - centerMoveDist * Math.sin(radian); + centerY = centerY + centerMoveDist * Math.cos(radian); + } + if (p.h + moveDist > 0) { + p.w = p.w + moveDist; + p.x = centerX - p.w / 2; + p.y = centerY - p.h / 2; + } + } else { + if (elem.w - moveX > 0) { + p.x += moveX; + p.w -= moveX; + } } break; } From dda2310393a4d555d18ed3a1ba5561077e0f6cc7 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 15:05:12 +0800 Subject: [PATCH 10/13] fix: update scale-direction for element when it rotated --- packages/core/src/lib/element.ts | 108 +------------------------------ 1 file changed, 2 insertions(+), 106 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index a4071ded8..b7e6a365c 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -326,7 +326,7 @@ function calcuScaleElemPosition( centerX = centerX + centerMoveDist * Math.sin(radian); centerY = centerY - centerMoveDist * Math.cos(radian); } - if (p.h + moveDist > 0) { + if (p.w + moveDist > 0) { p.w = p.w + moveDist; p.x = centerX - p.w / 2; p.y = centerY - p.h / 2; @@ -470,7 +470,7 @@ function calcuScaleElemPosition( centerX = centerX - centerMoveDist * Math.sin(radian); centerY = centerY + centerMoveDist * Math.cos(radian); } - if (p.h + moveDist > 0) { + if (p.w + moveDist > 0) { p.w = p.w + moveDist; p.x = centerX - p.w / 2; p.y = centerY - p.h / 2; @@ -494,110 +494,6 @@ function parseRadian(angle: number) { return angle * Math.PI / 180; } -// function getMoveDistance(elem: TypeElement, -// moveX: number, -// moveY: number, -// direction: TypeHelperWrapperDotDirection, -// scale: number, -// ): { -// distanceX: number, -// distanceY: number, -// distance: number, -// distanceLength: number, -// } { -// const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h }; -// let angle = elem.angle; -// if (angle < 0) { -// angle = Math.max(0, 360 + angle); -// } -// let distanceX: number = moveX; -// let distanceY: number = moveY; -// let distanceLength: number = Math.sqrt(moveX * moveX + moveY * moveY); -// let distance: number = distanceLength; -// switch (direction) { -// case 'top-left': { -// break; -// } -// case 'top': { -// if (elem.angle === 0) { -// distance = moveY > 0 ? distance : -distance; -// } else if (elem.angle > 0 || elem.angle < 0) { -// distance = moveY > 0 ? distance : -distance; -// if (angle < 90) { -// moveDist = -moveY; // TODO -// } else if (angle < 180) { -// moveDist = moveX; // TODO -// const radian = parseRadian(angle - 90); -// const centerMoveDist = moveDist / 2; -// centerX = centerX + centerMoveDist * Math.cos(radian); -// centerY = centerY + centerMoveDist * Math.sin(radian); -// } else if (angle < 270) { -// moveDist = moveY; // TODO -// const radian = parseRadian(angle - 180); -// const centerMoveDist = moveDist / 2; -// centerX = centerX - centerMoveDist * Math.sin(radian); -// centerY = centerY + centerMoveDist * Math.cos(radian); -// } else if (angle < 360) { -// moveDist = -moveX; // TODO -// const radian = parseRadian(angle - 270); -// const centerMoveDist = moveDist / 2; -// centerX = centerX - centerMoveDist * Math.cos(radian); -// centerY = centerY - centerMoveDist * Math.sin(radian); -// } -// if (p.h + moveDist > 0) { -// p.h = p.h + moveDist; -// p.x = centerX - p.w / 2; -// p.y = centerY - p.h / 2; -// } -// } else { -// if (p.h - moveY > 0) { -// p.y += moveY; -// p.h -= moveY; -// } -// } -// break; -// } -// case 'top-right': { -// if (elem.h - moveY > 0 && elem.w + moveX > 0) { -// p.y += moveY; -// p.w += moveX; -// p.h -= moveY; -// } -// break; -// } -// case 'right': { -// if (elem.w + moveX > 0) { -// p.w += moveX; -// } -// break; -// } -// case 'bottom-right': { -// if (elem.w + moveX > 0 && elem.h + moveY > 0) { -// p.w += moveX; -// p.h += moveY; -// } -// break; -// } -// case 'bottom': { -// if (elem.h + moveY > 0) { -// p.h += moveY; -// } -// break; -// } -// case 'bottom-left': { -// if (elem.w - moveX > 0 && elem.h + moveY > 0) { -// p.x += moveX; -// p.w -= moveX; -// p.h += moveY; -// } -// break; -// } -// default: { -// break; -// } -// } -// return { distanceX, distanceY, distanceLength, distance }; -// } function calcMoveDist(moveX: number, moveY: number) { From 328c363bca478c78040fd30f1d4009650766c388 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 17:05:17 +0800 Subject: [PATCH 11/13] fix: update scale-topRight-direction for element when it rotated --- packages/core/src/lib/element.ts | 92 +++++++++++++++++--------------- 1 file changed, 50 insertions(+), 42 deletions(-) diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index b7e6a365c..fb8fa9e18 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -242,52 +242,60 @@ function calcuScaleElemPosition( break; } case 'top-right': { - // if (elem.angle === 0) { + if (elem.angle === 0) { if (p.h - moveY > 0) { p.y += moveY; p.h -= moveY; } - // } else if (elem.angle > 0 || elem.angle < 0) { - // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); - // let moveDist = moveY; - // let centerX = p.x + elem.w / 2; - // let centerY = p.y + elem.h / 2; - // if (angle < 90) { - // moveDist = -moveY; // TODO - // const radian = parseRadian(angle); - // const centerMoveDist = moveDist / 2; - // centerX = centerX + centerMoveDist * Math.sin(radian); - // centerY = centerY - centerMoveDist * Math.cos(radian); - // } else if (angle < 180) { - // moveDist = moveX; // TODO - // const radian = parseRadian(angle - 90); - // const centerMoveDist = moveDist / 2; - // centerX = centerX + centerMoveDist * Math.cos(radian); - // centerY = centerY + centerMoveDist * Math.sin(radian); - // } else if (angle < 270) { - // moveDist = moveY; // TODO - // const radian = parseRadian(angle - 180); - // const centerMoveDist = moveDist / 2; - // centerX = centerX - centerMoveDist * Math.sin(radian); - // centerY = centerY + centerMoveDist * Math.cos(radian); - // } else if (angle < 360) { - // moveDist = -moveX; // TODO - // const radian = parseRadian(angle - 270); - // const centerMoveDist = moveDist / 2; - // centerX = centerX - centerMoveDist * Math.cos(radian); - // centerY = centerY - centerMoveDist * Math.sin(radian); - // } - // if (p.h + moveDist > 0) { - // p.h = p.h + moveDist; - // p.x = centerX - p.w / 2; - // p.y = centerY - p.h / 2; - // } - // } else { - // if (p.h - moveY > 0) { - // p.y += moveY; - // p.h -= moveY; - // } - // } + } else if (elem.angle > 0 || elem.angle < 0) { + const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + let moveDist = calcMoveDist(moveX, moveY); + let centerX = p.x + elem.w / 2; + let centerY = p.y + elem.h / 2; + let moveDistW: number = 0; + let moveDistH: number = 0; + if (angle < 90) { + const radianDist = Math.atan(Math.tan(Math.abs(moveY)/Math.abs(moveX))) + const radian = parseRadian(angle); + const radianResult = radianDist + radian; + moveDistH = moveDist * Math.sin(radianResult); + moveDistW = moveDist * Math.cos(radianResult); + moveDistH = 0 - changeMoveDistDirect(moveDistH, moveY); + moveDistW = changeMoveDistDirect(moveDistW, moveX); + { + // top direct + const radian = parseRadian(angle); + const centerMoveDist = moveDistH / 2; + centerX = centerX + centerMoveDist * Math.sin(radian); + centerY = centerY - centerMoveDist * Math.cos(radian); + } + { + // right direct + const radian = parseRadian(angle); + const centerMoveDist = moveDistW / 2; + centerX = centerX + centerMoveDist * Math.cos(radian); + centerY = centerY + centerMoveDist * Math.sin(radian); + } + + } else if (angle < 180) { + // TODO + } else if (angle < 270) { + // TODO + } else if (angle < 360) { + // TODO + } + if (p.h + moveDistH > 0 && p.w + moveDistW > 0) { + p.h = p.h + moveDistH; + p.w = p.w + moveDistW; + p.x = centerX - p.w / 2; + p.y = centerY - p.h / 2; + } + } else { + if (p.h - moveY > 0) { + p.y += moveY; + p.h -= moveY; + } + } break; } case 'right': { From 23ffe970b15b28171091d079470ef6fdeb7e4bd0 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 19:01:02 +0800 Subject: [PATCH 12/13] fix: update scale-direction for element when it rotated --- packages/core/src/lib/draw/wrapper.ts | 20 ++-- packages/core/src/lib/element.ts | 144 ++++++++++++++++---------- packages/core/src/lib/helper.ts | 11 ++ packages/types/src/lib/helper.ts | 22 ++-- 4 files changed, 125 insertions(+), 72 deletions(-) diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts index f72abbd07..797afeae3 100644 --- a/packages/core/src/lib/draw/wrapper.ts +++ b/packages/core/src/lib/draw/wrapper.ts @@ -44,13 +44,21 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { // draw wrapper's dots ctx.setFillStyle(wrapper.color); [ - wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right, - wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left, + wrapper.dots.topLeft, + wrapper.dots.top, + wrapper.dots.topRight, + wrapper.dots.right, + wrapper.dots.bottomRight, + wrapper.dots.bottom, + wrapper.dots.bottomLeft, + wrapper.dots.left, ].forEach((dot) => { - ctx.beginPath(); - ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); - ctx.fill(); - ctx.closePath(); + if (dot.invisible !== true) { + ctx.beginPath(); + ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); + ctx.fill(); + ctx.closePath(); + } }); } else { // draw wrapper's lock dots, diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index fb8fa9e18..e40b91e65 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -12,6 +12,7 @@ import { calcRadian, calcElementCenter, parseRadianToAngle } from './calculate'; import { limitAngle, limitNum } from './value'; const { createUUID } = util.uuid; +const limitQbliqueAngle = 30; export class Element { private _ctx: TypeContext; @@ -165,6 +166,9 @@ function calcuScaleElemPosition( } switch (direction) { case 'top-left': { + + // TODO + // if (elem.angle === 0) { // // TODO // } else if (elem.angle > 0 || elem.angle < 0) { @@ -193,7 +197,7 @@ function calcuScaleElemPosition( break; } case 'top': { - if (elem.angle === 0) { + if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) { if (p.h - moveY > 0) { p.y += moveY; p.h -= moveY; @@ -242,64 +246,90 @@ function calcuScaleElemPosition( break; } case 'top-right': { - if (elem.angle === 0) { - if (p.h - moveY > 0) { - p.y += moveY; - p.h -= moveY; - } - } else if (elem.angle > 0 || elem.angle < 0) { - const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); - let moveDist = calcMoveDist(moveX, moveY); - let centerX = p.x + elem.w / 2; - let centerY = p.y + elem.h / 2; - let moveDistW: number = 0; - let moveDistH: number = 0; - if (angle < 90) { - const radianDist = Math.atan(Math.tan(Math.abs(moveY)/Math.abs(moveX))) - const radian = parseRadian(angle); - const radianResult = radianDist + radian; - moveDistH = moveDist * Math.sin(radianResult); - moveDistW = moveDist * Math.cos(radianResult); - moveDistH = 0 - changeMoveDistDirect(moveDistH, moveY); - moveDistW = changeMoveDistDirect(moveDistW, moveX); - { - // top direct - const radian = parseRadian(angle); - const centerMoveDist = moveDistH / 2; - centerX = centerX + centerMoveDist * Math.sin(radian); - centerY = centerY - centerMoveDist * Math.cos(radian); - } - { - // right direct - const radian = parseRadian(angle); - const centerMoveDist = moveDistW / 2; - centerX = centerX + centerMoveDist * Math.cos(radian); - centerY = centerY + centerMoveDist * Math.sin(radian); - } - - } else if (angle < 180) { - // TODO - } else if (angle < 270) { - // TODO - } else if (angle < 360) { - // TODO - } - if (p.h + moveDistH > 0 && p.w + moveDistW > 0) { - p.h = p.h + moveDistH; - p.w = p.w + moveDistW; - p.x = centerX - p.w / 2; - p.y = centerY - p.h / 2; - } - } else { - if (p.h - moveY > 0) { - p.y += moveY; - p.h -= moveY; - } + if (p.h - moveY > 0) { + p.y += moveY; + p.h -= moveY; } + // // TODO + // if (elem.angle === 0) { + // if (p.h - moveY > 0) { + // p.y += moveY; + // p.h -= moveY; + // } + // } else if (elem.angle > 0 || elem.angle < 0) { + // const angle = elem.angle > 0 ? elem.angle : Math.max(0, elem.angle + 360); + // let moveDist = calcMoveDist(moveX, moveY); + // let centerX = p.x + elem.w / 2; + // let centerY = p.y + elem.h / 2; + // let moveDistW: number = 0; + // let moveDistH: number = 0; + // if (angle < 90) { + // const radianDist = Math.atan(Math.tan(Math.abs(moveY)/Math.abs(moveX))) + // const radian = parseRadian(angle); + // const radianResult = radianDist + radian; + // moveDistH = moveDist * Math.sin(radianResult); + // moveDistW = moveDist * Math.cos(radianResult); + // moveDistH = 0 - changeMoveDistDirect(moveDistH, moveY); + // moveDistW = changeMoveDistDirect(moveDistW, moveX); + // { + // // top direct + // const radian = parseRadian(angle); + // const centerMoveDist = moveDistH / 2; + // centerX = centerX + centerMoveDist * Math.sin(radian); + // centerY = centerY - centerMoveDist * Math.cos(radian); + // } + // { + // // right direct + // const radian = parseRadian(angle); + // const centerMoveDist = moveDistW / 2; + // centerX = centerX + centerMoveDist * Math.cos(radian); + // centerY = centerY + centerMoveDist * Math.sin(radian); + // } + + // } else if (angle < 180) { + // const radianDist = Math.atan(Math.tan(Math.abs(moveX)/Math.abs(moveY))) + // const radian = parseRadian(angle); + // const radianResult = radianDist + radian; + // moveDistH = moveDist * Math.sin(radianResult); + // moveDistW = moveDist * Math.cos(radianResult); + // moveDistH = changeMoveDistDirect(moveDistH, moveY); + // moveDistW = changeMoveDistDirect(moveDistW, moveX); + // { + // // top direct + // const radian = parseRadian(angle - 90); + // const centerMoveDist = moveDistH / 2; + // centerX = centerX + centerMoveDist * Math.cos(radian); + // centerY = centerY + centerMoveDist * Math.sin(radian); + // } + // { + // // right direct TODO + // const radian = parseRadian(angle - 90); + // const centerMoveDist = moveDistW / 2; + // centerX = centerX - centerMoveDist * Math.sin(radian); + // centerY = centerY + centerMoveDist * Math.cos(radian); + // } + + // } else if (angle < 270) { + // // TODO + // } else if (angle < 360) { + // // TODO + // } + // if (p.h + moveDistH > 0 && p.w + moveDistW > 0) { + // p.h = p.h + moveDistH; + // // p.w = p.w + moveDistW; + // p.x = centerX - p.w / 2; + // p.y = centerY - p.h / 2; + // } + // } else { + // if (p.h - moveY > 0) { + // p.y += moveY; + // p.h -= moveY; + // } + // } break; } case 'right': { - if (elem.angle === 0) { + if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) { if (elem.w + moveX > 0) { p.w += moveX; } @@ -371,7 +401,7 @@ function calcuScaleElemPosition( break; } case 'bottom': { - if (elem.angle === 0) { + if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) { if (elem.h + moveY > 0) { p.h += moveY; } @@ -443,7 +473,7 @@ function calcuScaleElemPosition( break; } case 'left': { - if (elem.angle === 0) { + if (elem.angle === 0 || Math.abs(elem.angle) < limitQbliqueAngle) { if (elem.w - moveX > 0) { p.x += moveX; p.w -= moveX; diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 1b22a3e86..7c6c0c6db 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -122,6 +122,9 @@ export class Helper implements TypeHelper { rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { for (let i = 0; i < dots.length; i ++) { const dot = dots[i]; + if (dot.invisible === true) { + continue; + } ctx.beginPath(); ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2); ctx.closePath(); @@ -311,6 +314,10 @@ export class Helper implements TypeHelper { const rotateLimit = 12; // @ts-ignore const bw = elem.desc?.borderWidth || 0; + let hideObliqueDirection = false; + if (typeof elem.angle === 'number' && Math.abs(elem.angle) > 30) { + hideObliqueDirection = true; + } const wrapper: TypeHeplerSelectedElementWrapper = { uuid: elem.uuid, @@ -320,6 +327,7 @@ export class Helper implements TypeHelper { topLeft: { x: elem.x - dotSize - bw, y: elem.y - dotSize - bw, + invisible: hideObliqueDirection, }, top: { x: elem.x + elem.w / 2, @@ -328,6 +336,7 @@ export class Helper implements TypeHelper { topRight: { x: elem.x + elem.w + dotSize + bw, y: elem.y - dotSize - bw, + invisible: hideObliqueDirection, }, right: { x: elem.x + elem.w + dotSize + bw, @@ -336,6 +345,7 @@ export class Helper implements TypeHelper { bottomRight: { x: elem.x + elem.w + dotSize + bw, y: elem.y + elem.h + dotSize + bw, + invisible: hideObliqueDirection, }, bottom: { x: elem.x + elem.w / 2, @@ -344,6 +354,7 @@ export class Helper implements TypeHelper { bottomLeft: { x: elem.x - dotSize - bw, y: elem.y + elem.h + dotSize + bw, + invisible: hideObliqueDirection, }, left: { x: elem.x - dotSize - bw, diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts index 0adb6cc3f..5e098391d 100644 --- a/packages/types/src/lib/helper.ts +++ b/packages/types/src/lib/helper.ts @@ -3,20 +3,24 @@ import { TypePoint } from './board'; // type test = {[uuid string]: TypeElement} +type TypeDot = TypePoint & { + invisible?: boolean; +}; + type TypeHeplerSelectedElementWrapper = { uuid: string; dotSize: number; lock: boolean; dots: { - topLeft: TypePoint, - top: TypePoint, - topRight: TypePoint, - right: TypePoint, - bottomRight: TypePoint, - bottom: TypePoint, - bottomLeft: TypePoint, - left: TypePoint, - rotate: TypePoint, + topLeft: TypeDot, + top: TypeDot, + topRight: TypeDot, + right: TypeDot, + bottomRight: TypeDot, + bottom: TypeDot, + bottomLeft: TypeDot, + left: TypeDot, + rotate: TypeDot, }, lineDash: number[]; lineWidth: number; From d06864a90bc0b2cc44db65a7cefa63a35b9b0f57 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 27 Sep 2021 19:14:59 +0800 Subject: [PATCH 13/13] fix: scale-direction for element when it rotated --- packages/core/src/constant/element.ts | 3 +++ packages/core/src/constant/static.ts | 4 ++-- packages/core/src/lib/element.ts | 8 ++++---- packages/core/src/lib/helper.ts | 5 ++++- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/core/src/constant/element.ts b/packages/core/src/constant/element.ts index d5d122921..b2bbcdb7f 100644 --- a/packages/core/src/constant/element.ts +++ b/packages/core/src/constant/element.ts @@ -10,3 +10,6 @@ const elementTypes = { export const elementNames = Object.keys(elementTypes); + +// limitQbliqueAngle +export const LIMIT_QBLIQUE_ANGLE = 15; \ No newline at end of file diff --git a/packages/core/src/constant/static.ts b/packages/core/src/constant/static.ts index 2e60c6f01..3c961155e 100644 --- a/packages/core/src/constant/static.ts +++ b/packages/core/src/constant/static.ts @@ -8,5 +8,5 @@ export enum Mode { export enum CursorStatus { DRAGGING = 'dragging', - NULL = 'null' -} \ No newline at end of file + NULL = 'null', +} diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index e40b91e65..6fbfb4d41 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -10,9 +10,10 @@ import util from '@idraw/util'; import { rotateElement } from './transform'; import { calcRadian, calcElementCenter, parseRadianToAngle } from './calculate'; import { limitAngle, limitNum } from './value'; +import { LIMIT_QBLIQUE_ANGLE } from './../constant/element'; const { createUUID } = util.uuid; -const limitQbliqueAngle = 30; +const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE; export class Element { private _ctx: TypeContext; @@ -246,8 +247,9 @@ function calcuScaleElemPosition( break; } case 'top-right': { - if (p.h - moveY > 0) { + if (p.h - moveY > 0 && p.w + moveX > 0) { p.y += moveY; + p.w += moveX; p.h -= moveY; } // // TODO @@ -532,8 +534,6 @@ function parseRadian(angle: number) { return angle * Math.PI / 180; } - - function calcMoveDist(moveX: number, moveY: number) { return Math.sqrt(moveX * moveX + moveY * moveY); } diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 7c6c0c6db..5a38f0c0a 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -8,6 +8,9 @@ import Board from '@idraw/board'; import util from '@idraw/util'; import { parseAngleToRadian, calcElementCenter } from './calculate'; import { rotateContext, rotateElement } from './transform'; +import { LIMIT_QBLIQUE_ANGLE } from './../constant/element'; + +const limitQbliqueAngle = LIMIT_QBLIQUE_ANGLE; const { deepClone } = util.data; @@ -315,7 +318,7 @@ export class Helper implements TypeHelper { // @ts-ignore const bw = elem.desc?.borderWidth || 0; let hideObliqueDirection = false; - if (typeof elem.angle === 'number' && Math.abs(elem.angle) > 30) { + if (typeof elem.angle === 'number' && Math.abs(elem.angle) > limitQbliqueAngle) { hideObliqueDirection = true; }