fix(web): face selection box position resetting on browser resize (#26766)

web/src/lib/components/asset-viewer/face-editor/face-editor.svelte

@@ -74,6 +74,7 @@
 
     canvas.add(faceRect);
     canvas.setActiveObject(faceRect);
+    setDefaultFaceRectanglePosition(faceRect);
   };
 
   onMount(async () => {
@@ -93,9 +94,19 @@
     };
   });
 
-  $effect(() => {
+  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
     const { offsetX, offsetY } = imageContentMetrics;
 
+    faceRect.set({
+      top: offsetY + 200,
+      left: offsetX + 200,
+    });
+
+    faceRect.setCoords();
+    positionFaceSelector();
+  };
+
+  $effect(() => {
     if (!canvas) {
       return;
     }
@@ -109,14 +120,20 @@
       return;
     }
 
-    faceRect.set({
+    if (!isFaceRectIntersectingCanvas(faceRect, canvas)) {
-      top: offsetY + 200,
+      setDefaultFaceRectanglePosition(faceRect);
-      left: offsetX + 200,
+    }
   });
 
-    faceRect.setCoords();
+  const isFaceRectIntersectingCanvas = (faceRect: Rect, canvas: Canvas) => {
-    positionFaceSelector();
+    const faceBox = faceRect.getBoundingRect();
-  });
+    return !(
+      0 > faceBox.left + faceBox.width ||
+      0 > faceBox.top + faceBox.height ||
+      canvas.width < faceBox.left ||
+      canvas.height < faceBox.top
+    );
+  };
 
   const cancel = () => {
     isFaceEditMode.value = false;