@avament-pub/image-editor 0.1.0

package/dist/use-image-editor.js

@@ -0,0 +1,773 @@
+"use client";
+import * as React from "react";
+import { IMAGE_EDITOR_COLORS, IMAGE_EDITOR_DEFAULT_TEXT_SIZE, IMAGE_EDITOR_DEFAULT_TEXT_WIDTH, defaultResolveSrc, editedAttachmentFileName, isShapeDrawTool, rotateImageDataUrl, shapeFillAndStroke, } from "./image-editor-utils";
+import { useLatestRef } from "./use-latest-ref";
+const HISTORY_LIMIT = 40;
+const HISTORY_PROPS = ["isBackground", "annotationId"];
+function isBackgroundObject(obj) {
+    return Boolean(obj === null || obj === void 0 ? void 0 : obj.isBackground);
+}
+function newAnnotationId() {
+    return `ann-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+export function useImageEditor({ src, fileName, labels, resolveSrc, onSave, }) {
+    var _a;
+    const hostRef = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    const textInputRef = React.useRef(null);
+    const fabricRef = React.useRef(null);
+    const drawingRef = React.useRef(false);
+    const startRef = React.useRef(null);
+    const draftObjectRef = React.useRef(null);
+    const historyRef = React.useRef([]);
+    const historyIndexRef = React.useRef(-1);
+    const applyingHistoryRef = React.useRef(false);
+    const viewportRef = React.useRef({ width: 0, height: 0, zoom: 1 });
+    const [tool, setTool] = React.useState("pen");
+    const [color, setColor] = React.useState(IMAGE_EDITOR_COLORS[0]);
+    const [strokeWidth, setStrokeWidth] = React.useState(4);
+    const [shapeStyle, setShapeStyle] = React.useState("outline");
+    const [cropDraft, setCropDraft] = React.useState(null);
+    const [ready, setReady] = React.useState(false);
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [canUndo, setCanUndo] = React.useState(false);
+    const [canRedo, setCanRedo] = React.useState(false);
+    const [textEditor, setTextEditor] = React.useState(null);
+    const toolRef = useLatestRef(tool);
+    const colorRef = useLatestRef(color);
+    const strokeRef = useLatestRef(strokeWidth);
+    const shapeStyleRef = useLatestRef(shapeStyle);
+    const editingTextIdRef = useLatestRef((_a = textEditor === null || textEditor === void 0 ? void 0 : textEditor.id) !== null && _a !== void 0 ? _a : null);
+    const labelsRef = useLatestRef(labels);
+    const resolveSrcRef = useLatestRef(resolveSrc);
+    const syncHistoryButtons = React.useCallback(() => {
+        setCanUndo(historyIndexRef.current > 0);
+        setCanRedo(historyIndexRef.current < historyRef.current.length - 1);
+    }, []);
+    const markBackgroundObjects = React.useCallback((canvas) => {
+        canvas.getObjects().forEach((obj) => {
+            if (isBackgroundObject(obj)) {
+                obj.set({
+                    selectable: false,
+                    evented: false,
+                    hasControls: false,
+                    lockMovementX: true,
+                    lockMovementY: true,
+                });
+            }
+        });
+    }, []);
+    const syncObjectInteractivity = React.useCallback((canvas, currentTool) => {
+        const allowSelect = currentTool === "select" ||
+            isShapeDrawTool(currentTool) ||
+            currentTool === "text";
+        canvas.selection = allowSelect;
+        canvas.skipTargetFind = currentTool === "pen" || currentTool === "crop";
+        canvas.defaultCursor =
+            currentTool === "eraser"
+                ? "cell"
+                : currentTool === "pen"
+                    ? "crosshair"
+                    : "default";
+        canvas.hoverCursor =
+            currentTool === "eraser" ? "cell" : allowSelect ? "move" : "crosshair";
+        canvas.getObjects().forEach((obj) => {
+            if (isBackgroundObject(obj)) {
+                obj.set({ selectable: false, evented: false });
+                return;
+            }
+            if (currentTool === "eraser") {
+                obj.set({
+                    selectable: false,
+                    evented: true,
+                    hasControls: false,
+                });
+                return;
+            }
+            const interactive = allowSelect;
+            obj.set({
+                selectable: interactive,
+                evented: interactive,
+                hasControls: interactive,
+            });
+        });
+        canvas.requestRenderAll();
+    }, []);
+    const pushHistory = React.useCallback(() => {
+        const canvas = fabricRef.current;
+        if (!canvas || applyingHistoryRef.current)
+            return;
+        const json = JSON.stringify(canvas.toObject([...HISTORY_PROPS]));
+        const next = historyRef.current.slice(0, historyIndexRef.current + 1);
+        if (next[next.length - 1] === json) {
+            syncHistoryButtons();
+            return;
+        }
+        next.push(json);
+        while (next.length > HISTORY_LIMIT)
+            next.shift();
+        historyRef.current = next;
+        historyIndexRef.current = next.length - 1;
+        syncHistoryButtons();
+    }, [syncHistoryButtons]);
+    const findObjectByAnnotationId = React.useCallback((id) => {
+        var _a;
+        const canvas = fabricRef.current;
+        if (!canvas)
+            return null;
+        return ((_a = canvas.getObjects().find((obj) => {
+            return obj.annotationId === id;
+        })) !== null && _a !== void 0 ? _a : null);
+    }, []);
+    const applyHistory = React.useCallback(async (index) => {
+        const canvas = fabricRef.current;
+        const snapshot = historyRef.current[index];
+        if (!canvas || !snapshot)
+            return;
+        applyingHistoryRef.current = true;
+        drawingRef.current = false;
+        startRef.current = null;
+        draftObjectRef.current = null;
+        setCropDraft(null);
+        setTextEditor(null);
+        try {
+            await canvas.loadFromJSON(JSON.parse(snapshot));
+            const { width, height, zoom } = viewportRef.current;
+            if (width && height) {
+                canvas.setDimensions({ width, height });
+                canvas.setZoom(zoom || 1);
+            }
+            markBackgroundObjects(canvas);
+            syncObjectInteractivity(canvas, toolRef.current);
+            canvas.discardActiveObject();
+            canvas.requestRenderAll();
+            historyIndexRef.current = index;
+            syncHistoryButtons();
+        }
+        catch (_a) {
+            setError(labelsRef.current.loadFailed);
+        }
+        finally {
+            applyingHistoryRef.current = false;
+        }
+    }, [
+        labelsRef,
+        markBackgroundObjects,
+        syncHistoryButtons,
+        syncObjectInteractivity,
+        toolRef,
+    ]);
+    const fitCanvasToHost = React.useCallback((naturalW, naturalH) => {
+        const host = hostRef.current;
+        const canvas = fabricRef.current;
+        if (!host || !canvas)
+            return { width: naturalW, height: naturalH, zoom: 1 };
+        const maxW = Math.max(280, host.clientWidth - 8);
+        const maxH = Math.max(240, host.clientHeight - 8);
+        const zoom = Math.min(1, maxW / naturalW, maxH / naturalH);
+        const width = Math.max(1, Math.round(naturalW * zoom));
+        const height = Math.max(1, Math.round(naturalH * zoom));
+        canvas.setDimensions({ width, height });
+        canvas.setZoom(zoom);
+        viewportRef.current = { width, height, zoom };
+        return { width, height, zoom };
+    }, []);
+    const commitTextEditor = React.useCallback(() => {
+        var _a;
+        const editing = textEditor;
+        if (!editing)
+            return;
+        const obj = findObjectByAnnotationId(editing.id);
+        if (obj && typeof obj.set === "function") {
+            const nextText = editing.value.trim() || labelsRef.current.textPlaceholder;
+            obj.set("text", nextText);
+            (_a = fabricRef.current) === null || _a === void 0 ? void 0 : _a.requestRenderAll();
+            pushHistory();
+        }
+        setTextEditor(null);
+    }, [findObjectByAnnotationId, labelsRef, pushHistory, textEditor]);
+    React.useEffect(() => {
+        if (!textEditor)
+            return;
+        const id = window.setTimeout(() => { var _a; return (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+        return () => window.clearTimeout(id);
+    }, [textEditor]);
+    React.useEffect(() => {
+        let disposed = false;
+        let fabricCanvas = null;
+        const boot = async () => {
+            var _a;
+            if (!canvasRef.current || !hostRef.current)
+                return;
+            setError(null);
+            setReady(false);
+            try {
+                const fabric = await import("fabric");
+                const { Canvas, FabricImage, PencilBrush, Line, Rect, Ellipse, Textbox, Triangle, Group, } = fabric;
+                const resolver = (_a = resolveSrcRef.current) !== null && _a !== void 0 ? _a : defaultResolveSrc;
+                const objectUrl = await resolver(src);
+                if (disposed || !canvasRef.current)
+                    return;
+                const image = await FabricImage.fromURL(objectUrl);
+                if (disposed)
+                    return;
+                const naturalW = image.width || 1;
+                const naturalH = image.height || 1;
+                fabricCanvas = new Canvas(canvasRef.current, {
+                    selection: true,
+                    preserveObjectStacking: true,
+                    backgroundColor: "#0b1220",
+                });
+                fabricRef.current = fabricCanvas;
+                image.set({
+                    left: 0,
+                    top: 0,
+                    originX: "left",
+                    originY: "top",
+                    selectable: false,
+                    evented: false,
+                    hasControls: false,
+                });
+                image.isBackground = true;
+                fabricCanvas.add(image);
+                fabricCanvas.sendObjectToBack(image);
+                fitCanvasToHost(naturalW, naturalH);
+                const brush = new PencilBrush(fabricCanvas);
+                brush.color = colorRef.current;
+                brush.width = strokeRef.current;
+                fabricCanvas.freeDrawingBrush = brush;
+                fabricCanvas.isDrawingMode = toolRef.current === "pen";
+                syncObjectInteractivity(fabricCanvas, toolRef.current);
+                const pointerFromEvent = (event) => {
+                    if (!event || !fabricCanvas)
+                        return null;
+                    const point = fabricCanvas.getScenePoint(event);
+                    return { x: point.x, y: point.y };
+                };
+                const clearDraft = () => {
+                    if (draftObjectRef.current && fabricCanvas) {
+                        fabricCanvas.remove(draftObjectRef.current);
+                        draftObjectRef.current = null;
+                    }
+                };
+                const createArrowGroup = (x1, y1, x2, y2) => {
+                    const stroke = colorRef.current;
+                    const width = strokeRef.current;
+                    const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
+                    const head = Math.max(14, width * 4);
+                    const line = new Line([x1, y1, x2, y2], {
+                        stroke,
+                        strokeWidth: width,
+                        selectable: false,
+                        evented: false,
+                    });
+                    const headShape = new Triangle({
+                        left: x2,
+                        top: y2,
+                        originX: "center",
+                        originY: "center",
+                        width: head,
+                        height: head,
+                        fill: stroke,
+                        angle: angle + 90,
+                        selectable: false,
+                        evented: false,
+                    });
+                    return new Group([line, headShape], {
+                        selectable: false,
+                        evented: false,
+                    });
+                };
+                fabricCanvas.on("mouse:down", (opt) => {
+                    var _a, _b;
+                    if (!fabricCanvas || applyingHistoryRef.current)
+                        return;
+                    const currentTool = toolRef.current;
+                    const target = opt.target;
+                    if (currentTool === "eraser") {
+                        if (target && !isBackgroundObject(target)) {
+                            fabricCanvas.remove(target);
+                            fabricCanvas.discardActiveObject();
+                            fabricCanvas.requestRenderAll();
+                            pushHistory();
+                        }
+                        return;
+                    }
+                    if (target &&
+                        !isBackgroundObject(target) &&
+                        (isShapeDrawTool(currentTool) ||
+                            currentTool === "text" ||
+                            currentTool === "select")) {
+                        drawingRef.current = false;
+                        if (currentTool === "text" &&
+                            (target.type === "textbox" || target.type === "Textbox")) {
+                            const id = (_a = target.annotationId) !== null && _a !== void 0 ? _a : newAnnotationId();
+                            target.annotationId = id;
+                            setTextEditor({
+                                id,
+                                value: String((_b = target.text) !== null && _b !== void 0 ? _b : ""),
+                            });
+                        }
+                        return;
+                    }
+                    const p = pointerFromEvent(opt.e);
+                    if (!p)
+                        return;
+                    if (currentTool === "select" || currentTool === "pen")
+                        return;
+                    if (currentTool === "text") {
+                        const id = newAnnotationId();
+                        const box = new Textbox(labelsRef.current.textPlaceholder, {
+                            left: p.x,
+                            top: p.y,
+                            width: IMAGE_EDITOR_DEFAULT_TEXT_WIDTH,
+                            fill: colorRef.current,
+                            fontSize: IMAGE_EDITOR_DEFAULT_TEXT_SIZE,
+                            editable: false,
+                            selectable: true,
+                            evented: true,
+                            hasControls: true,
+                            lockUniScaling: false,
+                            objectCaching: false,
+                        });
+                        box.annotationId = id;
+                        fabricCanvas.add(box);
+                        fabricCanvas.setActiveObject(box);
+                        fabricCanvas.requestRenderAll();
+                        setTextEditor({
+                            id,
+                            value: labelsRef.current.textPlaceholder,
+                        });
+                        pushHistory();
+                        return;
+                    }
+                    if (currentTool === "line" ||
+                        currentTool === "arrow" ||
+                        currentTool === "rect" ||
+                        currentTool === "ellipse" ||
+                        currentTool === "crop") {
+                        drawingRef.current = true;
+                        startRef.current = p;
+                        clearDraft();
+                        setCropDraft(null);
+                        fabricCanvas.discardActiveObject();
+                    }
+                });
+                fabricCanvas.on("mouse:move", (opt) => {
+                    if (!fabricCanvas || !drawingRef.current || !startRef.current)
+                        return;
+                    const currentTool = toolRef.current;
+                    const p = pointerFromEvent(opt.e);
+                    if (!p)
+                        return;
+                    const start = startRef.current;
+                    clearDraft();
+                    let draft = null;
+                    if (currentTool === "line") {
+                        draft = new Line([start.x, start.y, p.x, p.y], {
+                            stroke: colorRef.current,
+                            strokeWidth: strokeRef.current,
+                            selectable: false,
+                            evented: false,
+                        });
+                    }
+                    else if (currentTool === "arrow") {
+                        draft = createArrowGroup(start.x, start.y, p.x, p.y);
+                    }
+                    else if (currentTool === "rect" || currentTool === "crop") {
+                        const left = Math.min(start.x, p.x);
+                        const top = Math.min(start.y, p.y);
+                        const width = Math.abs(p.x - start.x);
+                        const height = Math.abs(p.y - start.y);
+                        const paint = currentTool === "crop"
+                            ? {
+                                fill: "rgba(12, 102, 228, 0.15)",
+                                stroke: "#0c66e4",
+                            }
+                            : shapeFillAndStroke(colorRef.current, shapeStyleRef.current);
+                        draft = new Rect({
+                            left,
+                            top,
+                            width,
+                            height,
+                            fill: paint.fill,
+                            stroke: paint.stroke,
+                            strokeWidth: currentTool === "crop" ? 2 : strokeRef.current,
+                            strokeDashArray: currentTool === "crop" ? [6, 4] : undefined,
+                            selectable: false,
+                            evented: false,
+                        });
+                        if (currentTool === "crop") {
+                            setCropDraft({ x: left, y: top, w: width, h: height });
+                        }
+                    }
+                    else if (currentTool === "ellipse") {
+                        const left = Math.min(start.x, p.x);
+                        const top = Math.min(start.y, p.y);
+                        const width = Math.abs(p.x - start.x);
+                        const height = Math.abs(p.y - start.y);
+                        const paint = shapeFillAndStroke(colorRef.current, shapeStyleRef.current);
+                        draft = new Ellipse({
+                            left: left + width / 2,
+                            top: top + height / 2,
+                            rx: width / 2,
+                            ry: height / 2,
+                            fill: paint.fill,
+                            stroke: paint.stroke,
+                            strokeWidth: strokeRef.current,
+                            selectable: false,
+                            evented: false,
+                        });
+                    }
+                    if (draft) {
+                        draftObjectRef.current = draft;
+                        fabricCanvas.add(draft);
+                        fabricCanvas.requestRenderAll();
+                    }
+                });
+                fabricCanvas.on("mouse:up", () => {
+                    if (!fabricCanvas || !drawingRef.current)
+                        return;
+                    const currentTool = toolRef.current;
+                    drawingRef.current = false;
+                    startRef.current = null;
+                    if (currentTool === "crop")
+                        return;
+                    if (draftObjectRef.current) {
+                        const id = newAnnotationId();
+                        draftObjectRef.current.annotationId = id;
+                        draftObjectRef.current.set({
+                            selectable: true,
+                            evented: true,
+                            hasControls: true,
+                        });
+                        fabricCanvas.setActiveObject(draftObjectRef.current);
+                        draftObjectRef.current = null;
+                        pushHistory();
+                    }
+                });
+                fabricCanvas.on("path:created", (opt) => {
+                    const path = opt.path;
+                    if (path)
+                        path.annotationId = newAnnotationId();
+                    pushHistory();
+                });
+                fabricCanvas.on("object:modified", () => {
+                    pushHistory();
+                });
+                fabricCanvas.on("mouse:dblclick", (opt) => {
+                    var _a, _b;
+                    const target = opt.target;
+                    if (!target || isBackgroundObject(target))
+                        return;
+                    if (target.type !== "textbox" && target.type !== "Textbox")
+                        return;
+                    const id = (_a = target.annotationId) !== null && _a !== void 0 ? _a : newAnnotationId();
+                    target.annotationId = id;
+                    setTextEditor({
+                        id,
+                        value: String((_b = target.text) !== null && _b !== void 0 ? _b : ""),
+                    });
+                });
+                historyRef.current = [
+                    JSON.stringify(fabricCanvas.toObject([...HISTORY_PROPS])),
+                ];
+                historyIndexRef.current = 0;
+                syncHistoryButtons();
+                setReady(true);
+            }
+            catch (_b) {
+                if (!disposed) {
+                    setError(labelsRef.current.loadFailed);
+                }
+            }
+        };
+        void boot();
+        return () => {
+            disposed = true;
+            fabricCanvas === null || fabricCanvas === void 0 ? void 0 : fabricCanvas.dispose();
+            fabricRef.current = null;
+        };
+    }, [
+        colorRef,
+        fitCanvasToHost,
+        labelsRef,
+        pushHistory,
+        resolveSrcRef,
+        shapeStyleRef,
+        src,
+        strokeRef,
+        syncHistoryButtons,
+        syncObjectInteractivity,
+        toolRef,
+    ]);
+    React.useEffect(() => {
+        const canvas = fabricRef.current;
+        if (!canvas)
+            return;
+        canvas.isDrawingMode = tool === "pen";
+        if (canvas.freeDrawingBrush) {
+            canvas.freeDrawingBrush.color = color;
+            canvas.freeDrawingBrush.width = strokeWidth;
+        }
+        syncObjectInteractivity(canvas, tool);
+        if (tool !== "crop") {
+            setCropDraft(null);
+            if (draftObjectRef.current) {
+                canvas.remove(draftObjectRef.current);
+                draftObjectRef.current = null;
+                canvas.requestRenderAll();
+            }
+        }
+    }, [tool, color, strokeWidth, syncObjectInteractivity]);
+    const handleToolChange = (next) => {
+        if (textEditor && next !== "text") {
+            commitTextEditor();
+        }
+        setTool(next);
+    };
+    const handleUndo = React.useCallback(async () => {
+        if (historyIndexRef.current <= 0)
+            return;
+        await applyHistory(historyIndexRef.current - 1);
+    }, [applyHistory]);
+    const handleRedo = React.useCallback(async () => {
+        if (historyIndexRef.current >= historyRef.current.length - 1)
+            return;
+        await applyHistory(historyIndexRef.current + 1);
+    }, [applyHistory]);
+    const handleDeleteSelected = React.useCallback(() => {
+        const canvas = fabricRef.current;
+        if (!canvas)
+            return;
+        const active = canvas.getActiveObjects();
+        if (!active.length)
+            return;
+        let removed = false;
+        active.forEach((obj) => {
+            if (isBackgroundObject(obj))
+                return;
+            canvas.remove(obj);
+            removed = true;
+        });
+        if (!removed)
+            return;
+        canvas.discardActiveObject();
+        canvas.requestRenderAll();
+        pushHistory();
+    }, [pushHistory]);
+    React.useEffect(() => {
+        if (!ready)
+            return;
+        const onKeyDown = (event) => {
+            if (editingTextIdRef.current)
+                return;
+            const target = event.target;
+            if (target &&
+                (target.tagName === "INPUT" ||
+                    target.tagName === "TEXTAREA" ||
+                    target.isContentEditable)) {
+                return;
+            }
+            if (busy)
+                return;
+            if (event.key === "Delete" || event.key === "Backspace") {
+                event.preventDefault();
+                handleDeleteSelected();
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "z") {
+                event.preventDefault();
+                if (event.shiftKey)
+                    void handleRedo();
+                else
+                    void handleUndo();
+            }
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "y") {
+                event.preventDefault();
+                void handleRedo();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [
+        busy,
+        editingTextIdRef,
+        handleDeleteSelected,
+        handleRedo,
+        handleUndo,
+        ready,
+    ]);
+    const applyCrop = async () => {
+        const canvas = fabricRef.current;
+        if (!canvas || !cropDraft)
+            return;
+        if (cropDraft.w < 4 || cropDraft.h < 4)
+            return;
+        setBusy(true);
+        try {
+            if (draftObjectRef.current) {
+                canvas.remove(draftObjectRef.current);
+                draftObjectRef.current = null;
+            }
+            const multiplier = 1 / (canvas.getZoom() || 1);
+            const dataUrl = canvas.toDataURL({
+                format: "png",
+                multiplier,
+                left: cropDraft.x,
+                top: cropDraft.y,
+                width: cropDraft.w,
+                height: cropDraft.h,
+            });
+            const { FabricImage } = await import("fabric");
+            const cropped = await FabricImage.fromURL(dataUrl);
+            canvas.clear();
+            canvas.backgroundColor = "#0b1220";
+            cropped.set({
+                left: 0,
+                top: 0,
+                originX: "left",
+                originY: "top",
+                selectable: false,
+                evented: false,
+                hasControls: false,
+            });
+            cropped.isBackground = true;
+            canvas.add(cropped);
+            fitCanvasToHost(cropped.width || cropDraft.w, cropped.height || cropDraft.h);
+            setCropDraft(null);
+            setTool("select");
+            pushHistory();
+        }
+        catch (_a) {
+            setError(labelsRef.current.cropFailed);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const applyRotate = async (direction) => {
+        const canvas = fabricRef.current;
+        if (!canvas || busy)
+            return;
+        if (textEditor)
+            commitTextEditor();
+        setBusy(true);
+        setError(null);
+        try {
+            if (draftObjectRef.current) {
+                canvas.remove(draftObjectRef.current);
+                draftObjectRef.current = null;
+            }
+            setCropDraft(null);
+            canvas.discardActiveObject();
+            canvas.requestRenderAll();
+            const multiplier = 1 / (canvas.getZoom() || 1);
+            const dataUrl = canvas.toDataURL({
+                format: "png",
+                multiplier,
+            });
+            const rotated = await rotateImageDataUrl(dataUrl, direction);
+            const { FabricImage } = await import("fabric");
+            const image = await FabricImage.fromURL(rotated.dataUrl);
+            canvas.clear();
+            canvas.backgroundColor = "#0b1220";
+            image.set({
+                left: 0,
+                top: 0,
+                originX: "left",
+                originY: "top",
+                selectable: false,
+                evented: false,
+                hasControls: false,
+            });
+            image.isBackground = true;
+            canvas.add(image);
+            fitCanvasToHost(image.width || rotated.width, image.height || rotated.height);
+            syncObjectInteractivity(canvas, toolRef.current);
+            pushHistory();
+        }
+        catch (_a) {
+            setError(labelsRef.current.rotateFailed);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const handleSave = async () => {
+        const canvas = fabricRef.current;
+        if (!canvas)
+            return;
+        if (textEditor)
+            commitTextEditor();
+        setBusy(true);
+        setError(null);
+        try {
+            if (draftObjectRef.current) {
+                canvas.remove(draftObjectRef.current);
+                draftObjectRef.current = null;
+            }
+            canvas.discardActiveObject();
+            canvas.requestRenderAll();
+            const multiplier = 1 / (canvas.getZoom() || 1);
+            const dataUrl = canvas.toDataURL({
+                format: "jpeg",
+                quality: 0.92,
+                multiplier,
+            });
+            const response = await fetch(dataUrl);
+            const blob = await response.blob();
+            const file = new File([blob], editedAttachmentFileName(fileName), {
+                type: "image/jpeg",
+                lastModified: Date.now(),
+            });
+            await onSave(file);
+        }
+        catch (_a) {
+            setError(labelsRef.current.saveFailed);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const updateTextValue = (value) => {
+        var _a;
+        setTextEditor((prev) => (prev ? Object.assign(Object.assign({}, prev), { value }) : prev));
+        if (!textEditor)
+            return;
+        const obj = findObjectByAnnotationId(textEditor.id);
+        if (obj) {
+            obj.set("text", value.trim() || labels.textPlaceholder);
+            (_a = fabricRef.current) === null || _a === void 0 ? void 0 : _a.requestRenderAll();
+        }
+    };
+    return {
+        hostRef,
+        canvasRef,
+        textInputRef,
+        tool,
+        color,
+        strokeWidth,
+        shapeStyle,
+        cropDraft,
+        ready,
+        busy,
+        error,
+        canUndo,
+        canRedo,
+        textEditor,
+        setColor,
+        setStrokeWidth,
+        setShapeStyle,
+        handleToolChange,
+        handleUndo,
+        handleRedo,
+        applyCrop,
+        applyRotate,
+        handleSave,
+        commitTextEditor,
+        updateTextValue,
+        dismissTextEditor: () => setTextEditor(null),
+    };
+}
+//# sourceMappingURL=use-image-editor.js.map