fix: fix scale-direction for element

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 === ')
-})

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<keyof TypeElemDesc>,
+  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;
+}

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 {

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

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,
   }
 }

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