1 files changed, 29 insertions, 20 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index e62718ec4..66ab858e2 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -389,27 +389,35 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._props.bringToFront?.(cropping);
         return cropping;
     };
-    removeBackground = () => {
-        const batch = UndoManager.StartBatch('remove image background');
-        ImageUtils.removeImgBackground(this.Document[Id], this.choosePath(ImageCast(this.dataDoc[this.fieldKey])?.url)).then(imgBlob =>
-            ImageUtils.createImageDocFromBlob(
-                imgBlob,
-                {
-                    _nativeWidth: Doc.NativeWidth(this.Document),
-                    _nativeHeight: Doc.NativeHeight(this.Document),
-                    x: NumCast(this.Document.x) + NumCast(this.Document._width),
-                    y: NumCast(this.Document.y),
-                    _width: NumCast(this.Document._width),
-                    _height: (NumCast(this.Document._height) / (NumCast(this.Document._width) || 1)) * NumCast(this.Document._width),
-                    title: 'bgdRemoved:' + this.Document.title,
-                },
-                this.Document[Id] + '_noBgd'
-            ).then(imageSnapshot => {
-                this._props.addDocument?.(imageSnapshot);
-                batch.end();
-            })
-        );
+    createLoadingDoc = () => {
+        const loading = Docs.Create.LoadingDocument('background removed', {
+            x: NumCast(this.Document.x) + NumCast(this.Document._width),
+            y: NumCast(this.Document.y),
+            backgroundColor: 'transparent',
+            _width: NumCast(this.Document._width),
+            _height: (NumCast(this.Document._height) / (NumCast(this.Document._width) || 1)) * NumCast(this.Document._width),
+            title: 'bgdRemoved:' + this.Document.title,
+        });
+        Doc.addCurrentlyLoading(loading);
+        this._props.addDocument?.(loading);
+        return loading;
     };
+    replaceImage = (imgBlob: Blob | undefined, loading: Doc) => {
+        const batch2 = UndoManager.StartBatch('remove mask background');
+        ImageUtils.createImageDocFromBlob(imgBlob, { _nativeWidth: Doc.NativeWidth(this.Document), _nativeHeight: Doc.NativeHeight(this.Document) }, this.Document[Id] + '_fgdMask', loading).then(() => {
+            Doc.removeCurrentlyLoading(loading);
+            batch2.end();
+        });
+    };
+    removeBackground = undoable(() => {
+        const loading = this.createLoadingDoc();
+        ImageUtils.removeImgBackground(this.Document[Id], this.choosePath(ImageCast(this.dataDoc[this.fieldKey])?.url)).then(imageBlob => this.replaceImage(imageBlob, loading));
+    }, 'create image background placeholder');
+
+    maskForeground = undoable(() => {
+        const loading = this.createLoadingDoc();
+        ImageUtils.maskForeground(this.Document[Id], this.choosePath(ImageCast(this.dataDoc[this.fieldKey])?.url)).then(imageBlob => this.replaceImage(imageBlob, loading));
+    }, 'create image mask placeholder');
 
     docEditorView = () => {
         const field = Cast(this.dataDoc[this.fieldKey], ImageField);
@@ -659,6 +667,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             funcs.push({ description: 'Copy path', event: () => ClientUtils.CopyText(this.choosePath(field.url)), icon: 'copy' });
             funcs.push({ description: 'Open Image Editor', event: this.docEditorView, icon: 'pencil-alt' });
             funcs.push({ description: 'Remove Background', event: this.removeBackground, icon: 'pencil-alt' });
+            funcs.push({ description: 'Mask Foreground', event: this.maskForeground, icon: 'pencil-alt' });
             this.layoutDoc.ai &&
                 funcs.push({
                     description: 'Regenerate AI Image',