Media editor minor improvements

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