diff --git a/ts/image-occlusion/mask-editor.ts b/ts/image-occlusion/mask-editor.ts index 85c12b705..974634da4 100644 --- a/ts/image-occlusion/mask-editor.ts +++ b/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) { diff --git a/ts/image-occlusion/tools/from-shapes.ts b/ts/image-occlusion/tools/from-shapes.ts index a0014a35c..132b3d180 100644 --- a/ts/image-occlusion/tools/from-shapes.ts +++ b/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); }; diff --git a/ts/image-occlusion/tools/lib.ts b/ts/image-occlusion/tools/lib.ts index b8e663660..349ab2342 100644 --- a/ts/image-occlusion/tools/lib.ts +++ b/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; diff --git a/ts/image-occlusion/tools/tool-ellipse.ts b/ts/image-occlusion/tools/tool-ellipse.ts index 66d10fa92..884258dc8 100644 --- a/ts/image-occlusion/tools/tool-ellipse.ts +++ b/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); }); diff --git a/ts/image-occlusion/tools/tool-polygon.ts b/ts/image-occlusion/tools/tool-polygon.ts index f2dbef51a..1df00687b 100644 --- a/ts/image-occlusion/tools/tool-polygon.ts +++ b/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 diff --git a/ts/image-occlusion/tools/tool-rect.ts b/ts/image-occlusion/tools/tool-rect.ts index df957f7da..8a07968cf 100644 --- a/ts/image-occlusion/tools/tool-rect.ts +++ b/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); }); diff --git a/ts/image-occlusion/tools/tool-text.ts b/ts/image-occlusion/tools/tool-text.ts index 46ff8cf3f..91acb183c 100644 --- a/ts/image-occlusion/tools/tool-text.ts +++ b/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);