diff --git a/docs/features/core.md b/docs/features/core.md index 49888d7..0ce2492 100644 --- a/docs/features/core.md +++ b/docs/features/core.md @@ -12,7 +12,7 @@ - [] Point - [x] Drag elements - [x] Move elements' index -- [] Rotate elements +- [x] Rotate elements - [x] Transform elements's size - [] Undo action record - [] Controll elements by data \ No newline at end of file diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 0a5b655..4f8daab 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -136,10 +136,7 @@ class Core { private _handlePoint(point: TypePoint) { - // console.log('handlePoint = ', point); - const [uuid, direction] = this[_helper].isPointInElementWrapperDot(point); - console.log('uuid, direction =', uuid, direction); if (uuid && direction) { this[_mode] = Mode.SELECT_ELEMENT_WRAPPER_DOT; diff --git a/packages/core/src/lib/calculate.ts b/packages/core/src/lib/calculate.ts index 5b746e7..22a6d72 100644 --- a/packages/core/src/lib/calculate.ts +++ b/packages/core/src/lib/calculate.ts @@ -5,6 +5,14 @@ import { } from '@idraw/types'; +export function parseRadianToAngle(radian: number): number { + return radian / Math.PI * 180; +} + +export function parseAngleToRadian(angle: number): number { + return angle / 180 * Math.PI; +} + export function calcElementCenter(elem: TypeElement): TypePoint { const p = { x: elem.x + elem.w / 2, @@ -13,17 +21,8 @@ export function calcElementCenter(elem: TypeElement): TypePo return p; } -export function translateRotateAngle(angle?: number) { - if (typeof angle === 'number' && (angle > 0 || angle <= 0)) { - const _angle = angle / 360 * (2 * Math.PI); - return _angle; - } else { - return 0; - } -} - -export function calcAngle(center: TypePoint, start: TypePoint, end: TypePoint): number { +export function calcRadian(center: TypePoint, start: TypePoint, end: TypePoint): number { const startAngle = calcLineAngle(center, start); const endAngle = calcLineAngle(center, end); if (endAngle !== null && startAngle !== null ) { diff --git a/packages/core/src/lib/draw.ts b/packages/core/src/lib/draw.ts index 5b24b68..2a97aa4 100644 --- a/packages/core/src/lib/draw.ts +++ b/packages/core/src/lib/draw.ts @@ -54,7 +54,7 @@ function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) { } const wrapper = config.selectedElementWrapper; - rotateContext(ctx, wrapper.translate, wrapper.angle || 0, () => { + rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { // draw wrapper's box ctx.beginPath(); ctx.setLineDash(wrapper.lineDash); diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts index 2ac7aa7..1b00101 100644 --- a/packages/core/src/lib/element.ts +++ b/packages/core/src/lib/element.ts @@ -8,7 +8,7 @@ import { } from '@idraw/types'; import util from './../util'; import { rotateElement } from './transform'; -import { calcAngle, calcElementCenter } from './calculate'; +import { calcRadian, calcElementCenter, parseRadianToAngle } from './calculate'; const { createUUID } = util.uuid; @@ -77,7 +77,7 @@ export class Element { const moveX = (point.x - prevPoint.x) / scale; const moveY = (point.y - prevPoint.y) / scale; const elem = data.elements[index]; - const { devicePixelRatio } = this._ctx.getSize(); + // const { devicePixelRatio } = this._ctx.getSize(); switch (direction) { case 'top-left': { @@ -124,12 +124,8 @@ export class Element { }; case 'rotate': { const center = calcElementCenter(elem); - const angle = calcAngle(center, prevPoint, point); - // if (!elem.angle) { - // elem.angle = 0; - // } - // console.log('angle =', angle / Math.PI * 180); - elem.angle = (elem.angle || 0) + angle * devicePixelRatio; + const radian = calcRadian(center, prevPoint, point); + elem.angle = (elem.angle || 0) + parseRadianToAngle(radian); break; }; default: { diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts index 69c2c4d..c49416f 100644 --- a/packages/core/src/lib/helper.ts +++ b/packages/core/src/lib/helper.ts @@ -10,8 +10,8 @@ import { TypePoint, TypeConfigStrict, } from '@idraw/types'; -import { translateRotateAngle, calcElementCenter } from './calculate'; -import { rotateContext } from './transform'; +import { parseAngleToRadian, calcElementCenter } from './calculate'; +import { rotateContext, } from './transform'; export class Helper implements TypeHelper { @@ -65,7 +65,7 @@ export class Helper implements TypeHelper { 'bottom-right', 'bottom', 'bottom-left', 'left', 'rotate', ]; - rotateContext(ctx, wrapper.translate, wrapper.angle || 0, () => { + rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => { for (let i = 0; i < dots.length; i ++) { const dot = dots[i]; ctx.beginPath(); @@ -150,7 +150,7 @@ export class Helper implements TypeHelper { }; if (typeof elem.angle === 'number' && (elem.angle > 0 || elem.angle < 0)) { - wrapper.angle = translateRotateAngle(elem.angle); + wrapper.radian = parseAngleToRadian(elem.angle); wrapper.translate = calcElementCenter(elem); } diff --git a/packages/core/src/lib/transform.ts b/packages/core/src/lib/transform.ts index 5dc690c..4438d38 100644 --- a/packages/core/src/lib/transform.ts +++ b/packages/core/src/lib/transform.ts @@ -4,7 +4,7 @@ import { TypeElement, TypeElemDesc, } from '@idraw/types'; -import { calcElementCenter, translateRotateAngle } from './calculate'; +import { calcElementCenter, parseAngleToRadian } from './calculate'; function rotateElement( ctx: TypeContext, @@ -12,28 +12,28 @@ function rotateElement( callback: (ctx: TypeContext) => void ) { const center: TypePoint = calcElementCenter(elem); - const angle = translateRotateAngle(elem.angle); - return rotateContext(ctx, center, angle || 0, callback); + const radian = parseAngleToRadian(elem.angle || 0); + return rotateContext(ctx, center, radian || 0, callback); } function rotateContext( ctx: TypeContext, center: TypePoint | undefined, - angle: number, + radian: number, callback: (ctx: TypeContext) => void ): void { - if (center && (angle > 0 || angle < 0)) { + if (center && (radian > 0 || radian < 0)) { ctx.translate(center.x, center.y); - ctx.rotate(angle); + ctx.rotate(radian); ctx.translate(- center.x, - center.y); } callback(ctx); - if (center && (angle > 0 || angle < 0)) { + if (center && (radian > 0 || radian < 0)) { ctx.translate(center.x, center.y); - ctx.rotate(- angle); + ctx.rotate(- radian); ctx.translate(- center.x, - center.y); } } diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts index 2abf98c..6e43bd5 100644 --- a/packages/types/src/lib/helper.ts +++ b/packages/types/src/lib/helper.ts @@ -22,7 +22,7 @@ type TypeHelperConfig = { lineDash: number[]; lineWidth: number; color: string; - angle?: number; + radian?: number; translate?: TypePoint; } }