Disable rotation globally

As described on https://github.com/fabricjs/fabric.js/issues/6420#issuecomment-650747872

Fixes rotation marker appearing when selecting, and when ungrouping

ts/image-occlusion/mask-editor.ts

@@ -103,6 +103,8 @@ function initCanvas(onChange: () => void): fabric.Canvas {
     // Disable uniform scaling
     canvas.uniformScaling = false;
     canvas.uniScaleKey = "none";
+    // disable rotation globally
+    delete fabric.Object.prototype.controls.mtr;
     moveShapeToCanvasBoundaries(canvas);
     canvas.on("object:modified", (evt) => {
         if (evt.target instanceof fabric.Polygon) {

ts/image-occlusion/tools/from-shapes.ts

@@ -4,7 +4,7 @@
 import { fabric } from "fabric";
 import type { Shape } from "image-occlusion/shapes";
 
-import { addBorder, disableRotation, enableUniformScaling } from "./lib";
+import { addBorder, enableUniformScaling } from "./lib";
 
 export const addShape = (
     canvas: fabric.Canvas,
@@ -12,7 +12,6 @@ export const addShape = (
 ): void => {
     const fabricShape = shape.toFabric(canvas);
     addBorder(fabricShape);
-    disableRotation(fabricShape);
     if (fabricShape.type === "i-text") {
         enableUniformScaling(canvas, fabricShape);
     }
@@ -28,7 +27,6 @@ export const addShapeGroup = (
         const fabricShape = shape.toFabric(canvas);
         addBorder(fabricShape);
         group.addWithUpdate(fabricShape);
-        disableRotation(group);
     });
     canvas.add(group);
 };

ts/image-occlusion/tools/lib.ts

@@ -60,6 +60,7 @@ export const groupShapes = (canvas: fabric.Canvas): void => {
     }
 
     canvas.getActiveObject().toGroup();
+
     redraw(canvas);
 };
 
@@ -120,7 +121,6 @@ const pasteItem = (canvas: fabric.Canvas): void => {
             top: clonedObj.top + 10,
             evented: true,
         });
-        disableRotation(clonedObj);
 
         if (clonedObj.type === "activeSelection") {
             // active selection needs a reference to the canvas.
@@ -236,12 +236,6 @@ const setShapePosition = (
     object.setCoords();
 };
 
-export function disableRotation(obj: fabric.Object): void {
-    obj.setControlsVisibility({
-        mtr: false,
-    });
-}
-
 export function enableUniformScaling(canvas: fabric.Canvas, obj: fabric.Object): void {
     obj.setControlsVisibility({ mb: false, ml: false, mt: false, mr: false });
     let timer: number;

ts/image-occlusion/tools/tool-ellipse.ts

@@ -3,7 +3,7 @@
 
 import { fabric } from "fabric";
 
-import { BORDER_COLOR, disableRotation, SHAPE_MASK_COLOR, stopDraw } from "./lib";
+import { BORDER_COLOR, SHAPE_MASK_COLOR, stopDraw } from "./lib";
 import { undoStack } from "./tool-undo-redo";
 
 export const drawEllipse = (canvas: fabric.Canvas): void => {
@@ -38,7 +38,6 @@ export const drawEllipse = (canvas: fabric.Canvas): void => {
             strokeUniform: true,
             noScaleCache: false,
         });
-        disableRotation(ellipse);
         canvas.add(ellipse);
     });
 

ts/image-occlusion/tools/tool-polygon.ts

@@ -4,7 +4,7 @@
 import { fabric } from "fabric";
 import type { PanZoom } from "panzoom";
 
-import { BORDER_COLOR, disableRotation, SHAPE_MASK_COLOR } from "./lib";
+import { BORDER_COLOR, SHAPE_MASK_COLOR } from "./lib";
 import { undoStack } from "./tool-undo-redo";
 
 let activeLine;
@@ -186,7 +186,6 @@ const generatePolygon = (canvas: fabric.Canvas, pointsList): void => {
         noScaleCache: false,
     });
     if (polygon.width > 5 && polygon.height > 5) {
-        disableRotation(polygon);
         canvas.add(polygon);
         canvas.setActiveObject(polygon);
         // view undo redo tools

ts/image-occlusion/tools/tool-rect.ts

@@ -3,7 +3,7 @@
 
 import { fabric } from "fabric";
 
-import { BORDER_COLOR, disableRotation, SHAPE_MASK_COLOR, stopDraw } from "./lib";
+import { BORDER_COLOR, SHAPE_MASK_COLOR, stopDraw } from "./lib";
 import { undoStack } from "./tool-undo-redo";
 
 export const drawRectangle = (canvas: fabric.Canvas): void => {
@@ -39,7 +39,6 @@ export const drawRectangle = (canvas: fabric.Canvas): void => {
             strokeUniform: true,
             noScaleCache: false,
         });
-        disableRotation(rect);
         canvas.add(rect);
     });
 

ts/image-occlusion/tools/tool-text.ts

@@ -3,14 +3,7 @@
 
 import { fabric } from "fabric";
 
-import {
-    disableRotation,
-    enableUniformScaling,
-    stopDraw,
-    TEXT_BACKGROUND_COLOR,
-    TEXT_FONT_FAMILY,
-    TEXT_PADDING,
-} from "./lib";
+import { enableUniformScaling, stopDraw, TEXT_BACKGROUND_COLOR, TEXT_FONT_FAMILY, TEXT_PADDING } from "./lib";
 import { undoStack } from "./tool-undo-redo";
 
 export const drawText = (canvas: fabric.Canvas): void => {
@@ -35,7 +28,6 @@ export const drawText = (canvas: fabric.Canvas): void => {
             backgroundColor: TEXT_BACKGROUND_COLOR,
             padding: TEXT_PADDING,
         });
-        disableRotation(text);
         enableUniformScaling(canvas, text);
         canvas.add(text);
         canvas.setActiveObject(text);