@bindu-dashing/dam-solution-v2 5.9.267 → 5.9.268

package/build/MyDrive/ImageEditor/EditImage.js

@@ -48,9 +48,23 @@ const ImageEditorComponent = ({ file, handleClose, }) => {
     const [state, setState] = useState({
         loading: false,
         confirmOpen: false,
+        bgLoading: false,
     });
-    const { loading, confirmOpen } = state;
+    const { loading, confirmOpen, bgLoading } = state;
     const editorRef = useRef(null);
+    const handleRemoveBackground = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        setState((prev) => (Object.assign(Object.assign({}, prev), { bgLoading: true })));
+        try {
+            yield ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.removeBackground());
+        }
+        catch (error) {
+            showNotification(get(error, "message", SOMETHING_WENT_WRONG), NotificationStatus.ERROR);
+        }
+        finally {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { bgLoading: false })));
+        }
+    });
     const invalidateAfterChange = () => {
         // Prefix-only invalidation so we hit every relevant query regardless of
         // its second key segment (folderId, picker id, mode, etc.). Going by
@@ -191,7 +205,7 @@ const ImageEditorComponent = ({ file, handleClose, }) => {
     });
     const openConfirm = () => setState((prev) => (Object.assign(Object.assign({}, prev), { confirmOpen: true })));
     const closeConfirm = () => setState((prev) => (Object.assign(Object.assign({}, prev), { confirmOpen: false })));
-    return (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-h-screen", children: [_jsxs("div", { className: "md-lib-shrink-0 md-lib-bg-darkPrimaryBg md-lib-py-3 md-lib-px-5 md-lib-flex md-lib-justify-between md-lib-items-center md-lib-relative md-lib-z-[100]", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-5", children: [_jsx(GoArrowLeftIcon, { className: "md-lib-text-darkTextColor md-lib-cursor-pointer", size: 24, onClick: handleClose }), _jsx("h4", { className: "md-lib-font-semibold md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-w-96", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") })] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(CustomButton, { size: "large", onClick: handleClose, label: "Cancel", type: "default", className: "md-lib-bg-secondaryColor md-lib-hover:bg-secondaryHoverColor md-lib-border-none" }), _jsx(CustomButton, { size: "large", type: "primary", icon: _jsx(PiFloppyDiskIcon, { size: 24 }), onClick: openConfirm, label: "Save", loading: loading })] })] }), _jsx("div", { className: "md-lib-flex-1 md-lib-overflow-hidden md-lib-relative", children: _jsx(TuiImageEditor, { ref: editorRef, file: file, path: get(file, "s3Path") }) }), confirmOpen && (_jsx("div", { style: {
+    return (_jsxs("div", { className: "md-lib-flex md-lib-flex-col md-lib-h-screen", children: [_jsxs("div", { className: "md-lib-shrink-0 md-lib-bg-darkPrimaryBg md-lib-py-3 md-lib-px-5 md-lib-flex md-lib-justify-between md-lib-items-center md-lib-relative md-lib-z-[100]", children: [_jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-5", children: [_jsx(GoArrowLeftIcon, { className: "md-lib-text-darkTextColor md-lib-cursor-pointer", size: 24, onClick: handleClose }), _jsx("h4", { className: "md-lib-font-semibold md-lib-text-darkTextColor md-lib-text-base md-lib-truncate md-lib-w-96", title: get(file, "name", "N/A"), children: get(file, "name", "N/A") })] }), _jsxs("div", { className: "md-lib-flex md-lib-items-center md-lib-gap-4", children: [_jsx(CustomButton, { size: "large", onClick: handleRemoveBackground, label: bgLoading ? "Removing Background..." : "Remove Background", type: "default", loading: bgLoading, disabled: loading, className: "md-lib-bg-secondaryColor md-lib-hover:bg-secondaryHoverColor md-lib-border-none" }), _jsx(CustomButton, { size: "large", onClick: handleClose, label: "Cancel", type: "default", disabled: bgLoading, className: "md-lib-bg-secondaryColor md-lib-hover:bg-secondaryHoverColor md-lib-border-none" }), _jsx(CustomButton, { size: "large", type: "primary", icon: _jsx(PiFloppyDiskIcon, { size: 24 }), onClick: openConfirm, label: "Save", loading: loading, disabled: bgLoading })] })] }), _jsx("div", { className: "md-lib-flex-1 md-lib-overflow-hidden md-lib-relative", children: _jsx(TuiImageEditor, { ref: editorRef, file: file, path: get(file, "s3Path") }) }), confirmOpen && (_jsx("div", { style: {
                     position: "fixed",
                     inset: 0,
                     zIndex: 2000,

package/build/MyDrive/ImageEditor/TuiImageEditor.d.ts

@@ -6,5 +6,6 @@ declare const TuiImageEditor: React.ForwardRefExoticComponent<{
     path: string;
 } & React.RefAttributes<{
     getEditedFile: () => Promise<File | null>;
+    removeBackground: () => Promise<void>;
 }>>;
 export default TuiImageEditor;

package/build/MyDrive/ImageEditor/TuiImageEditor.js

@@ -12,6 +12,7 @@ import { get } from "lodash";
 import { useEffect, useRef, forwardRef, useImperativeHandle, useMemo, useState, } from "react";
 import ImageEditor from "tui-image-editor";
 import "tui-image-editor/dist/tui-image-editor.css";
+import { removeBackground as imglyRemoveBackground } from "@imgly/background-removal";
 import { useDamConfig } from "../../hocs/DamConfigContext";
 import { createApiClient } from "../../hocs/configureAxios";
 import { GET_BASE64_USING_PATH_URL } from "../../utilities/constants/apiUrls";
@@ -98,6 +99,39 @@ const TuiImageEditor = forwardRef(({ file, path }, ref) => {
                 });
             });
         },
+        // Runs an in-browser ML model (@imgly/background-removal — WASM/ONNX, no
+        // server, image never leaves the browser) to cut out the subject and make
+        // the background transparent. Works on any background color, unlike the
+        // "Remove White" filter. Operates on the current canvas (so prior
+        // crop/rotate are kept) and reloads the transparent PNG back in, after
+        // which Save exports PNG and the alpha survives.
+        removeBackground() {
+            return __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d;
+                if (!editorInstance.current)
+                    return;
+                const currentDataURL = editorInstance.current.toDataURL();
+                const cutoutBlob = yield imglyRemoveBackground(currentDataURL);
+                const cutoutURL = URL.createObjectURL(cutoutBlob);
+                try {
+                    const result = yield editorInstance.current.loadImageFromURL(cutoutURL, get(file, "name", "background-removed"));
+                    // Refit the editor to the (possibly new) image dimensions.
+                    (_b = (_a = editorInstance.current.ui) === null || _a === void 0 ? void 0 : _a.resizeEditor) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                        imageSize: {
+                            oldWidth: get(result, "oldWidth"),
+                            oldHeight: get(result, "oldHeight"),
+                            newWidth: get(result, "newWidth"),
+                            newHeight: get(result, "newHeight"),
+                        },
+                    });
+                    // The cutout is a fresh base image; drop the now-irrelevant history.
+                    (_d = (_c = editorInstance.current).clearUndoStack) === null || _d === void 0 ? void 0 : _d.call(_c);
+                }
+                finally {
+                    URL.revokeObjectURL(cutoutURL);
+                }
+            });
+        },
     }));
     return (_jsx("div", { className: "md-lib-w-full md-lib-h-full", style: { position: "relative" }, children: _jsx("div", { ref: editorRef, className: "mb-4 md-lib-h-full" }) }));
 });

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@bindu-dashing/dam-solution-v2",
-  "version": "5.9.267",
+  "version": "5.9.268",
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "@imgly/background-removal": "^1.7.0",
     "@react-pdf-viewer/core": "^3.12.0",
     "@react-pdf-viewer/default-layout": "^3.12.0",
     "@react-pdf-viewer/zoom": "^3.12.0",