cleaned up image background removal code a bit and added undo

1 files changed, 21 insertions, 18 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c4a731078..e62718ec4 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -390,22 +390,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return cropping;
     };
     removeBackground = () => {
-        const field = ImageCast(this.dataDoc[this.fieldKey]);
-        if (field && this._props.addDocument) {
-            const doc = this.Document;
-            const width = NumCast(doc._width) || 1;
-            const height = NumCast(doc._height);
-            const options ={
-                _nativeWidth: Doc.NativeWidth(doc),
-                _nativeHeight: Doc.NativeHeight(doc),
-                x: NumCast(doc.x) + width,
-                y: NumCast(doc.y),
-                _width: 150,
-                _height: (height / width) * 150,
-                title: 'bgremoved:' + doc.title,
-            }
-            ImageUtils.removeImgBackground(options, this._props.addDocument, this.Document[Id], Doc.NativeWidth(doc), Doc.NativeHeight(doc), this.choosePath(field.url));
-        }
+        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();
+            })
+        );
     };
 
     docEditorView = () => {
@@ -648,7 +651,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         file: (file => {
                             const ext = file ? extname(file) : '';
                             return file?.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
-                        })(ImageCast(this.Document[this.fieldKey])?.url.href),
+                        })(field.url.href),
                     }).then(text => alert(text));
                 },
                 icon: 'expand-arrows-alt',
@@ -716,7 +719,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                   }
               );
 
-    choosePath = (url: URL) => {
+    choosePath = (url: URL | undefined) => {
         if (!url?.href) return '';
         const lower = url.href.toLowerCase();
         if (url.protocol === 'data') return url.href;