@pixerate/editor-react 0.8.0 → 0.9.0

package/dist/image-editor/index.cjs

@@ -88,6 +88,22 @@ function useImageEditor(options = {}) {
   const toBlob = (0, import_react.useCallback)((opts) => controller.toBlob(opts), [controller]);
   const toJSON = (0, import_react.useCallback)(() => controller.toJSON(), [controller]);
   const loadJSON = (0, import_react.useCallback)((data) => controller.loadJSON(data), [controller]);
+  const renderMask = (0, import_react.useCallback)(
+    (opts) => controller.renderMask(opts),
+    [controller]
+  );
+  const toMaskDataURL = (0, import_react.useCallback)(
+    (opts) => controller.toMaskDataURL(opts),
+    [controller]
+  );
+  const applyInpaintedImage = (0, import_react.useCallback)(
+    (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
+    [controller]
+  );
+  const applyBackgroundRemovedImage = (0, import_react.useCallback)(
+    (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
+    [controller]
+  );
   return (0, import_react.useMemo)(
     () => ({
       controller,
@@ -124,7 +140,11 @@ function useImageEditor(options = {}) {
       toDataURL,
       toBlob,
       toJSON,
-      loadJSON
+      loadJSON,
+      renderMask,
+      toMaskDataURL,
+      applyInpaintedImage,
+      applyBackgroundRemovedImage
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, state, historyTicks]
@@ -141,7 +161,10 @@ var ImageEditor = ({
   className = "",
   style,
   onSave,
-  exportOptions
+  exportOptions,
+  onInpaint,
+  onRemoveBackground,
+  aiHooks
 }) => {
   const internalEditor = useImageEditor({ image: src });
   const editor = externalEditor || internalEditor;
@@ -150,6 +173,73 @@ var ImageEditor = ({
   const containerRef = (0, import_react2.useRef)(null);
   const [activeTab, setActiveTab] = (0, import_react2.useState)("crop");
   const [activeCropRatio, setActiveCropRatio] = (0, import_react2.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react2.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react2.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react2.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react2.useState)(false);
+  const [aiError, setAiError] = (0, import_react2.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react2.useState)(null);
+  const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
+  const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
+  const handleRemoveBackground = async () => {
+    if (!effectiveOnRemoveBg) {
+      setAiError("No background removal hook is configured.");
+      return;
+    }
+    setAiError(null);
+    setAiSuccess(null);
+    setIsRemovingBg(true);
+    try {
+      const imageDataUrl = await editor.toDataURL(exportOptions);
+      const result = await effectiveOnRemoveBg({ imageDataUrl });
+      if (typeof result === "string") {
+        await editor.applyBackgroundRemovedImage(result);
+        setAiSuccess("Background removed successfully!");
+      } else {
+        setAiSuccess("Background removal complete.");
+      }
+    } catch (err) {
+      setAiError(err?.message || "Failed to remove background.");
+    } finally {
+      setIsRemovingBg(false);
+    }
+  };
+  const handleInpaint = async () => {
+    if (!effectiveOnInpaint) {
+      setAiError("No inpainting hook is configured.");
+      return;
+    }
+    if (!inpaintPrompt.trim()) {
+      setAiError("Please enter an inpainting prompt.");
+      return;
+    }
+    setAiError(null);
+    setAiSuccess(null);
+    setIsInpainting(true);
+    try {
+      const imageDataUrl = await editor.toDataURL(exportOptions);
+      const maskDataUrl = await editor.toMaskDataURL({
+        useAnnotations: inpaintMaskMode === "annotations",
+        useCrop: inpaintMaskMode === "crop"
+      });
+      const result = await effectiveOnInpaint({
+        prompt: inpaintPrompt.trim(),
+        imageDataUrl,
+        maskDataUrl,
+        cropBox: inpaintMaskMode === "crop" ? editor.state.crop : null
+      });
+      if (typeof result === "string") {
+        await editor.applyInpaintedImage(result);
+        setAiSuccess("Inpainting applied successfully!");
+      } else {
+        setAiSuccess("Inpainting complete.");
+      }
+    } catch (err) {
+      setAiError(err?.message || "Failed to apply inpainting.");
+    } finally {
+      setIsInpainting(false);
+    }
+  };
   const [activeColor, setActiveColor] = (0, import_react2.useState)("#ef4444");
   const [strokeWidth, setStrokeWidth] = (0, import_react2.useState)(3);
   const [fontSize, setFontSize] = (0, import_react2.useState)(24);
@@ -605,6 +695,21 @@ var ImageEditor = ({
                 className: `px-3 py-1.5 rounded-md font-medium transition-colors ${activeTab === "depth" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
                 children: "Depth Mask"
               }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("ai");
+                  editor.setTool("select");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${activeTab === "ai" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                  "AI Tools"
+                ]
+              }
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
@@ -1204,6 +1309,110 @@ var ImageEditor = ({
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Invert Mask" })
                 ] })
               ] })
+            ] }),
+            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
+                    "Background Removal"
+                  ] }),
+                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleRemoveBackground,
+                    disabled: isRemovingBg || isInpainting,
+                    className: "mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
+                    children: isRemovingBg ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                      "Removing Background..."
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                      "Remove Background"
+                    ] })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m14 7 3 3" })
+                    ] }),
+                    "Generative Inpainting"
+                  ] }),
+                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "textarea",
+                    {
+                      id: "ai-inpaint-prompt-react",
+                      value: inpaintPrompt,
+                      onChange: (e) => setInpaintPrompt(e.target.value),
+                      placeholder: "e.g. replace sunglasses with steampunk goggles, remove person in background...",
+                      rows: 3,
+                      className: "w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setInpaintMaskMode("annotations"),
+                        className: `px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${inpaintMaskMode === "annotations" ? "bg-purple-600/30 border-purple-500 text-purple-200" : "bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200"}`,
+                        children: [
+                          "Drawn Shapes (",
+                          state.annotations.length,
+                          ")"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setInpaintMaskMode("crop"),
+                        className: `px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${inpaintMaskMode === "crop" ? "bg-purple-600/30 border-purple-500 text-purple-200" : "bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200"}`,
+                        children: [
+                          "Crop Box (",
+                          state.crop ? "Selected" : "Full",
+                          ")"
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleInpaint,
+                    disabled: isInpainting || isRemovingBg || !inpaintPrompt.trim(),
+                    className: "mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
+                    children: isInpainting ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                      "Generating Inpaint..."
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
+                      "Apply Inpainting"
+                    ] })
+                  }
+                )
+              ] }),
+              aiError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
             ] })
           ] })
         ] })