Media editor minor improvements

Co-authored-by: Josh Perez <60019601+josh-signal@users.noreply.github.com>

ts/components/MediaEditor.tsx

@@ -399,6 +399,7 @@ export const MediaEditor = ({
 
   const [canRedo, setCanRedo] = useState(false);
   const [canUndo, setCanUndo] = useState(false);
+  const [canCrop, setCanCrop] = useState(false);
   const [cropAspectRatioLock, setcropAspectRatioLock] = useState(false);
   const [drawTool, setDrawTool] = useState<DrawTool>(DrawTool.Pen);
   const [drawWidth, setDrawWidth] = useState<DrawWidth>(DrawWidth.Regular);
@@ -572,6 +573,13 @@ export const MediaEditor = ({
           width,
         });
 
+        rect.on('modified', () => {
+          const { height: currHeight, width: currWidth } =
+            rect.getBoundingRect(true);
+
+          setCanCrop(currHeight < height || currWidth < width);
+        });
+
         rect.on('deselected', () => {
           setEditMode(undefined);
         });
@@ -589,6 +597,8 @@ export const MediaEditor = ({
         }
       });
     }
+
+    setCanCrop(false);
   }, [editMode, fabricCanvas, imageState.height, imageState.width, zoom]);
 
   useEffect(() => {
@@ -857,6 +867,7 @@ export const MediaEditor = ({
         <button
           aria-label={i18n('MediaEditor__crop--crop')}
           className="MediaEditor__crop-toolbar--button MediaEditor__crop-toolbar--crop"
+          disabled={!canCrop}
           onClick={() => {
             if (!fabricCanvas) {
               return;

ts/mediaEditor/MediaEditorFabricCropRect.ts

@@ -85,6 +85,7 @@ MediaEditorFabricCropRect.prototype.controls = {
     x: -0.5,
     y: -0.5,
     actionHandler: fabric.controlsUtils.scalingEqually,
+    cursorStyle: 'nwse-resize',
     render: (
       ctx: CanvasRenderingContext2D,
       left: number,
@@ -111,6 +112,7 @@ MediaEditorFabricCropRect.prototype.controls = {
     x: 0.5,
     y: -0.5,
     actionHandler: fabric.controlsUtils.scalingEqually,
+    cursorStyle: 'nesw-resize',
     render: (
       ctx: CanvasRenderingContext2D,
       left: number,
@@ -137,6 +139,7 @@ MediaEditorFabricCropRect.prototype.controls = {
     x: -0.5,
     y: 0.5,
     actionHandler: fabric.controlsUtils.scalingEqually,
+    cursorStyle: 'nesw-resize',
     render: (
       ctx: CanvasRenderingContext2D,
       left: number,
@@ -163,6 +166,7 @@ MediaEditorFabricCropRect.prototype.controls = {
     x: 0.5,
     y: 0.5,
     actionHandler: fabric.controlsUtils.scalingEqually,
+    cursorStyle: 'nwse-resize',
     render: (
       ctx: CanvasRenderingContext2D,
       left: number,

ts/mediaEditor/MediaEditorFabricPath.ts

@@ -2,14 +2,20 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { fabric } from 'fabric';
-import { customFabricObjectControls } from './util/customFabricObjectControls';
 
 export class MediaEditorFabricPath extends fabric.Path {
   constructor(
     path?: string | Array<fabric.Point>,
     options?: fabric.IPathOptions
   ) {
-    super(path, { fill: undefined, lockScalingFlip: true, ...(options || {}) });
+    super(path, {
+      evented: false,
+      fill: undefined,
+      hasControls: false,
+      lockScalingFlip: true,
+      selectable: false,
+      ...(options || {}),
+    });
   }
 
   static override fromObject(
@@ -26,4 +32,3 @@ export class MediaEditorFabricPath extends fabric.Path {
 
 MediaEditorFabricPath.prototype.type = 'MediaEditorFabricPath';
 MediaEditorFabricPath.prototype.borderColor = '#ffffff';
-MediaEditorFabricPath.prototype.controls = customFabricObjectControls;

ts/mediaEditor/util/customFabricObjectControls.ts

@@ -8,7 +8,7 @@ const resizeControl = new fabric.Control({
   cursorStyleHandler: () => 'se-resize',
   render: (ctx: CanvasRenderingContext2D, left: number, top: number) => {
     // circle
-    const size = 9;
+    const size = 12;
     ctx.save();
     ctx.fillStyle = '#fff';
     ctx.strokeStyle = '#fff';
@@ -18,7 +18,7 @@ const resizeControl = new fabric.Control({
     ctx.fill();
 
     // arrows NW & SE
-    const arrowSize = 4;
+    const arrowSize = 5;
     ctx.fillStyle = '#3b3b3b';
     ctx.strokeStyle = '#3b3b3b';
     ctx.beginPath();
@@ -96,7 +96,7 @@ const deleteControl = new fabric.Control({
   },
   render: (ctx: CanvasRenderingContext2D, left: number, top: number) => {
     // circle
-    const size = 9;
+    const size = 12;
     ctx.save();
     ctx.fillStyle = '#000';
     ctx.strokeStyle = '#000';
@@ -106,7 +106,7 @@ const deleteControl = new fabric.Control({
     ctx.fill();
 
     // x
-    const xSize = 3;
+    const xSize = 4;
     ctx.fillStyle = '#fff';
     ctx.strokeStyle = '#fff';
     ctx.beginPath();