feat: add operation.disableScale and operation.disableRotate to Element

packages/core/examples/features/lib/data/rect.js

@@ -61,6 +61,10 @@ const data = {
         borderWidth: 10,
         borderColor: "#bd0b64",
       },
+      operation: {
+        disbaleScale: true,
+        disbaleRotate: true,
+      }
     },
   ],
 };

packages/core/src/lib/draw/wrapper.ts

@@ -26,20 +26,23 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
     ctx.closePath();
     
     if (wrapper.lock !== true) {
-      // draw wrapper's rotate line
-      ctx.beginPath();
-      ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
-      ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
-      ctx.stroke();
-      ctx.closePath();
+      if (wrapper.controllers.rotate.invisible !== true) {
+        // draw wrapper's rotate line
+        ctx.beginPath();
+        ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
+        ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
+        ctx.stroke();
+        ctx.closePath();
 
-      // draw wrapper's rotate
-      ctx.beginPath();
-      ctx.setLineDash([]);
-      ctx.setLineWidth(wrapper.controllerSize / 2);
-      ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
-      ctx.stroke();
-      ctx.closePath();
+        // draw wrapper's rotate
+        ctx.beginPath();
+        ctx.setLineDash([]);
+        ctx.setLineWidth(wrapper.controllerSize / 2);
+        ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
+        ctx.stroke();
+        ctx.closePath();
+      }
+      
 
       // draw wrapper's controllers
       ctx.setFillStyle(wrapper.color);

packages/core/src/lib/helper.ts

@@ -142,16 +142,18 @@ export class Helper implements TypeHelper {
       }
     });
     if (selectedControllerDirection === null) {
-      rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
-        const controller = wrapper.controllers.rotate;
-        ctx.beginPath();
-        ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
-        ctx.closePath();
-        if (ctx.isPointInPath(p.x, p.y)) {
-          selectedControllerDirection = 'rotate';
-          hoverControllerDirection =  'rotate';
-        }
-      });
+      const controller = wrapper.controllers.rotate;
+      if (controller.invisible !== true) {
+        rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
+          ctx.beginPath();
+          ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
+          ctx.closePath();
+          if (ctx.isPointInPath(p.x, p.y)) {
+            selectedControllerDirection = 'rotate';
+            hoverControllerDirection =  'rotate';
+          }
+        });
+      }
     }
     return {uuid, selectedControllerDirection, hoverControllerDirection, directIndex};
   }
@@ -329,42 +331,47 @@ export class Helper implements TypeHelper {
         topLeft: {
           x: elem.x - controllerSize - bw,
           y: elem.y - controllerSize - bw,
-          invisible: hideObliqueDirection,
+          invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true,
         },
         top: {
           x: elem.x + elem.w / 2,
           y: elem.y - controllerSize - bw,
+          invisible: elem?.operation?.disbaleScale === true,
         },
         topRight: {
           x: elem.x + elem.w + controllerSize + bw,
           y: elem.y - controllerSize - bw,
-          invisible: hideObliqueDirection,
+          invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true,
         },
         right: {
           x: elem.x + elem.w + controllerSize + bw,
           y: elem.y + elem.h / 2,
+          invisible: elem?.operation?.disbaleScale === true
         },
         bottomRight: {
           x: elem.x + elem.w + controllerSize + bw,
           y: elem.y + elem.h + controllerSize + bw,
-          invisible: hideObliqueDirection,
+          invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true,
         },
         bottom: {
           x: elem.x + elem.w / 2,
           y: elem.y + elem.h + controllerSize + bw,
+          invisible: elem?.operation?.disbaleScale === true,
         },
         bottomLeft: {
           x: elem.x - controllerSize - bw,
           y: elem.y + elem.h + controllerSize + bw,
-          invisible: hideObliqueDirection,
+          invisible: hideObliqueDirection || elem?.operation?.disbaleScale === true,
         },
         left: {
           x: elem.x - controllerSize - bw,
           y: elem.y + elem.h / 2,
+          invisible: elem?.operation?.disbaleScale === true
         },
         rotate: {
           x: elem.x + elem.w / 2,
           y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw,
+          invisible: elem?.operation?.disbaleRotate === true
         }
       },
       lineWidth: lineWidth,

packages/types/src/lib/element.ts

@@ -9,6 +9,8 @@ type TypeElementAttrs = {
   operation?: {
     lock?: boolean,
     invisible?: boolean,
+    disbaleScale?: boolean,
+    disbaleRotate?: boolean,
   }
   extension?: {[key: string]: any} | any;
 }