feat: implement full rotate func of elements

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

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;

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<keyof TypeElemDesc>): TypePoint {
   const p = {
     x: elem.x + elem.w / 2,
@@ -13,17 +21,8 @@ export function calcElementCenter(elem: TypeElement<keyof TypeElemDesc>): 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 ) {

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);

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: {

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);
     }
 

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);
   }
 }

packages/types/src/lib/helper.ts

@@ -22,7 +22,7 @@ type TypeHelperConfig = {
     lineDash: number[];
     lineWidth: number;
     color: string;
-    angle?: number;
+    radian?: number;
     translate?: TypePoint;
   }
 }