@nice2dev/ui-graphics 1.0.0

package/dist/cjs/photo/usePhotoEditor.js

@@ -0,0 +1,640 @@
+'use strict';
+
+var React = require('react');
+var i18n = require('../core/i18n.js');
+var photoFilters = require('./photoFilters.js');
+var photoOverlays = require('./photoOverlays.js');
+var photoEditorActions = require('./photoEditorActions.js');
+
+/**
+ * usePhotoEditor.ts — Custom hook encapsulating all PhotoEditor state & logic.
+ *
+ * Extracts ~500 lines of state, effects, callbacks, and memoised values
+ * out of the god-component so that the main component file is pure composition.
+ */
+// ── Hook ──
+function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initialState }) {
+    const { t: _t } = i18n.useNiceTranslation();
+    const t = (key, def) => _t(key, def);
+    // ── State ──
+    // Image
+    const [image, setImage] = React.useState(null);
+    const [loading, setLoading] = React.useState(true);
+    // Tabs
+    const [activeTab, setActiveTabRaw] = React.useState("filters");
+    const [cropMode, setCropMode] = React.useState(false);
+    // Filter
+    const [selectedFilter, setSelectedFilter] = React.useState("none");
+    const [filterIntensity, setFilterIntensity] = React.useState(1);
+    const [filterCategory, setFilterCategory] = React.useState("all");
+    const [filterParams] = React.useState({});
+    // Adjustments
+    const [adjustments, setAdjustments] = React.useState({ ...photoFilters.DEFAULT_ADJUSTMENTS });
+    // Transform
+    const [rotation, setRotation] = React.useState(0);
+    const [flipH, setFlipH] = React.useState(false);
+    const [flipV, setFlipV] = React.useState(false);
+    // Crop
+    const [cropRect, setCropRect] = React.useState(null);
+    const [cropAspect, setCropAspect] = React.useState(null);
+    const [cropDragging, setCropDragging] = React.useState(null);
+    const [cropStart, setCropStart] = React.useState(null);
+    // Compare
+    const [showCompare, setShowCompare] = React.useState(false);
+    const [comparePosition, setComparePosition] = React.useState(50);
+    const [compareDragging, setCompareDragging] = React.useState(false);
+    // Zoom
+    const [zoom, setZoom] = React.useState(1);
+    // Overlays
+    const [overlays, setOverlays] = React.useState([]);
+    const [selectedOverlayId, setSelectedOverlayId] = React.useState(null);
+    const [overlayDragging, setOverlayDragging] = React.useState(false);
+    const [overlayDragStart, setOverlayDragStart] = React.useState(null);
+    // Sticker / emoji
+    const [emojiCat, setEmojiCat] = React.useState(photoOverlays.EMOJI_CATALOG[0].id);
+    // Text overlay
+    const [textDraft, setTextDraft] = React.useState("Tekst");
+    const [textColor, setTextColor] = React.useState("#ffffff");
+    const [textBold, setTextBold] = React.useState(true);
+    const [textItalic, setTextItalic] = React.useState(false);
+    const [textOutline, setTextOutline] = React.useState(true);
+    const [textFontSize, setTextFontSize] = React.useState(36);
+    const [textBg, setTextBg] = React.useState(false);
+    // Shape
+    const [shapeStroke, setShapeStroke] = React.useState("#ffffff");
+    const [shapeFill, setShapeFill] = React.useState("");
+    const [shapeStrokeW, setShapeStrokeW] = React.useState(3);
+    // Frame
+    const [frameColor, setFrameColor] = React.useState("#ffffff");
+    const [frameThick, setFrameThick] = React.useState(3);
+    // Drawing
+    const [drawColor, setDrawColor] = React.useState("#ff0000");
+    const [drawWidth, setDrawWidth] = React.useState(4);
+    const [isDrawing, setIsDrawing] = React.useState(false);
+    const [livePoints, setLivePoints] = React.useState([]);
+    const drawingOverlayRef = React.useRef(null);
+    // History
+    const [history, setHistory] = React.useState([]);
+    const [historyIdx, setHistoryIdx] = React.useState(-1);
+    const suppressHistoryRef = React.useRef(false);
+    // Canvas refs
+    const mainCanvasRef = React.useRef(null);
+    const compareCanvasRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    // ── Derived ──
+    const accent = playerColor;
+    const accentDim = playerColor + "55";
+    const selectedOverlay = React.useMemo(() => { var _a; return (_a = overlays.find(o => o.id === selectedOverlayId)) !== null && _a !== void 0 ? _a : null; }, [overlays, selectedOverlayId]);
+    // Tab setter (auto-toggle cropMode)
+    const setActiveTab = React.useCallback((tab) => {
+        setActiveTabRaw(tab);
+        setCropMode(tab === "crop");
+    }, []);
+    // ── History ──
+    const pushHistory = React.useCallback(() => {
+        if (suppressHistoryRef.current)
+            return;
+        const state = {
+            selectedFilter,
+            filterIntensity,
+            adjustments: { ...adjustments },
+            rotation,
+            flipH,
+            flipV,
+            cropRect: cropRect ? { ...cropRect } : null,
+            overlays: overlays.map(o => ({ ...o })),
+        };
+        setHistory(prev => [...prev.slice(0, historyIdx + 1), state]);
+        setHistoryIdx(prev => prev + 1);
+    }, [selectedFilter, filterIntensity, adjustments, rotation, flipH, flipV, cropRect, overlays, historyIdx]);
+    const restoreState = React.useCallback((s) => {
+        suppressHistoryRef.current = true;
+        setSelectedFilter(s.selectedFilter);
+        setFilterIntensity(s.filterIntensity);
+        setAdjustments({ ...s.adjustments });
+        setRotation(s.rotation);
+        setFlipH(s.flipH);
+        setFlipV(s.flipV);
+        setCropRect(s.cropRect ? { ...s.cropRect } : null);
+        setOverlays(s.overlays.map(o => ({ ...o })));
+        setSelectedOverlayId(null);
+        setTimeout(() => { suppressHistoryRef.current = false; }, 50);
+    }, []);
+    const undo = React.useCallback(() => {
+        if (historyIdx > 0) {
+            const newIdx = historyIdx - 1;
+            setHistoryIdx(newIdx);
+            restoreState(history[newIdx]);
+        }
+    }, [historyIdx, history, restoreState]);
+    const redo = React.useCallback(() => {
+        if (historyIdx < history.length - 1) {
+            const newIdx = historyIdx + 1;
+            setHistoryIdx(newIdx);
+            restoreState(history[newIdx]);
+        }
+    }, [historyIdx, history, restoreState]);
+    // ── Load image ──
+    React.useEffect(() => {
+        const img = new Image();
+        img.onload = () => {
+            setImage(img);
+            setLoading(false);
+            setCropRect({ x: 0, y: 0, w: img.naturalWidth, h: img.naturalHeight });
+        };
+        img.onerror = () => setLoading(false);
+        if (src instanceof File || src instanceof Blob) {
+            img.src = URL.createObjectURL(src);
+        }
+        else {
+            img.crossOrigin = "anonymous";
+            img.src = src;
+        }
+        return () => {
+            if (img.src.startsWith("blob:"))
+                URL.revokeObjectURL(img.src);
+        };
+    }, [src]);
+    // Push initial history once image loads
+    React.useEffect(() => {
+        if (image && history.length === 0) {
+            if (initialState) {
+                const prev = photoOverlays.deserializeEditorState(initialState);
+                if (prev) {
+                    suppressHistoryRef.current = true;
+                    setSelectedFilter(prev.filter);
+                    setFilterIntensity(prev.filterIntensity);
+                    setAdjustments({ ...prev.adjustments });
+                    setRotation(prev.rotation);
+                    setFlipH(prev.flipH);
+                    setFlipV(prev.flipV);
+                    if (prev.cropRect)
+                        setCropRect(prev.cropRect);
+                    if (prev.overlays)
+                        setOverlays(prev.overlays);
+                    setTimeout(() => { suppressHistoryRef.current = false; }, 50);
+                }
+            }
+            pushHistory();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [image]);
+    // ── Render main canvas ──
+    const renderMain = React.useCallback(() => {
+        if (!image || !mainCanvasRef.current)
+            return;
+        photoFilters.renderToCanvas(mainCanvasRef.current, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropMode ? null : cropRect, rotation, flipH, flipV);
+        if (overlays.length > 0 || livePoints.length > 1) {
+            const ctx = mainCanvasRef.current.getContext("2d");
+            if (ctx) {
+                const cw = mainCanvasRef.current.width;
+                const ch = mainCanvasRef.current.height;
+                if (overlays.length > 0)
+                    photoOverlays.renderAllOverlays(ctx, overlays, cw, ch);
+                if (livePoints.length > 1)
+                    photoOverlays.renderLiveStroke(ctx, livePoints, drawColor, drawWidth, cw, ch);
+            }
+        }
+    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, cropMode, rotation, flipH, flipV, overlays, livePoints, drawColor, drawWidth]);
+    React.useEffect(() => { renderMain(); }, [renderMain]);
+    // Render compare canvas (original)
+    React.useEffect(() => {
+        if (!image || !compareCanvasRef.current || !showCompare)
+            return;
+        const canvas = compareCanvasRef.current;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const crop = cropRect !== null && cropRect !== void 0 ? cropRect : { x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight };
+        canvas.width = crop.w;
+        canvas.height = crop.h;
+        ctx.drawImage(image, crop.x, crop.y, crop.w, crop.h, 0, 0, crop.w, crop.h);
+    }, [image, showCompare, cropRect]);
+    // ── Filter thumbnails ──
+    const filteredList = React.useMemo(() => {
+        if (filterCategory === "all")
+            return photoFilters.PHOTO_FILTERS;
+        return photoFilters.PHOTO_FILTERS.filter(f => f.category === filterCategory || f.id === "none");
+    }, [filterCategory]);
+    const generateThumbnail = React.useCallback((canvas, filter) => {
+        if (!image)
+            return;
+        const size = 64;
+        canvas.width = size;
+        canvas.height = size;
+        const ctx = canvas.getContext("2d", { willReadFrequently: true });
+        if (!ctx)
+            return;
+        const s = Math.min(image.naturalWidth, image.naturalHeight);
+        const sx = (image.naturalWidth - s) / 2;
+        const sy = (image.naturalHeight - s) / 2;
+        ctx.drawImage(image, sx, sy, s, s, 0, 0, size, size);
+        if (filter.id !== "none") {
+            const imgData = ctx.getImageData(0, 0, size, size);
+            const filtered = filter.apply(imgData, { intensity: 1 });
+            ctx.putImageData(filtered, 0, 0);
+        }
+    }, [image]);
+    // ── Crop interaction ──
+    const getCanvasScale = React.useCallback(() => {
+        if (!mainCanvasRef.current || !containerRef.current || !image)
+            return { sx: 1, sy: 1, ox: 0, oy: 0 };
+        const rect = mainCanvasRef.current.getBoundingClientRect();
+        const cw = mainCanvasRef.current.width;
+        const ch = mainCanvasRef.current.height;
+        return { sx: cw / rect.width, sy: ch / rect.height, ox: rect.left, oy: rect.top };
+    }, [image]);
+    const handleCropMouseDown = React.useCallback((e, handle) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCropDragging(handle);
+        setCropStart({ mx: e.clientX, my: e.clientY, rect: { ...cropRect } });
+    }, [cropRect]);
+    React.useEffect(() => {
+        if (!cropDragging || !cropStart || !cropRect || !image)
+            return;
+        const handleMove = (e) => {
+            const scale = getCanvasScale();
+            const dx = (e.clientX - cropStart.mx) * scale.sx;
+            const dy = (e.clientY - cropStart.my) * scale.sy;
+            const r = { ...cropStart.rect };
+            const minSize = 20;
+            if (cropDragging === "move") {
+                r.x = Math.max(0, Math.min(image.naturalWidth - r.w, r.x + dx));
+                r.y = Math.max(0, Math.min(image.naturalHeight - r.h, r.y + dy));
+            }
+            else {
+                if (cropDragging.includes("w")) {
+                    r.x += dx;
+                    r.w -= dx;
+                }
+                if (cropDragging.includes("e")) {
+                    r.w += dx;
+                }
+                if (cropDragging.includes("n")) {
+                    r.y += dy;
+                    r.h -= dy;
+                }
+                if (cropDragging.includes("s")) {
+                    r.h += dy;
+                }
+                if (r.w < minSize) {
+                    r.w = minSize;
+                }
+                if (r.h < minSize) {
+                    r.h = minSize;
+                }
+                if (cropAspect) {
+                    if (cropDragging.includes("w") || cropDragging.includes("e")) {
+                        r.h = r.w / cropAspect;
+                    }
+                    else {
+                        r.w = r.h * cropAspect;
+                    }
+                }
+                r.x = Math.max(0, r.x);
+                r.y = Math.max(0, r.y);
+                r.w = Math.min(r.w, image.naturalWidth - r.x);
+                r.h = Math.min(r.h, image.naturalHeight - r.y);
+            }
+            setCropRect(r);
+            setCropStart({ mx: e.clientX, my: e.clientY, rect: r });
+        };
+        const handleUp = () => {
+            setCropDragging(null);
+            setCropStart(null);
+            pushHistory();
+        };
+        window.addEventListener("mousemove", handleMove);
+        window.addEventListener("mouseup", handleUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleUp);
+        };
+    }, [cropDragging, cropStart, cropRect, image, cropAspect, getCanvasScale, pushHistory]);
+    // Compare slider drag
+    React.useEffect(() => {
+        if (!compareDragging)
+            return;
+        const handleMove = (e) => {
+            if (!containerRef.current)
+                return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const pct = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+            setComparePosition(pct);
+        };
+        const handleUp = () => setCompareDragging(false);
+        window.addEventListener("mousemove", handleMove);
+        window.addEventListener("mouseup", handleUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMove);
+            window.removeEventListener("mouseup", handleUp);
+        };
+    }, [compareDragging]);
+    // ── Keyboard shortcuts ──
+    React.useEffect(() => {
+        const handleKey = (e) => {
+            if (e.ctrlKey && e.key === "z") {
+                e.preventDefault();
+                undo();
+            }
+            if (e.ctrlKey && e.key === "y") {
+                e.preventDefault();
+                redo();
+            }
+        };
+        window.addEventListener("keydown", handleKey);
+        return () => window.removeEventListener("keydown", handleKey);
+    }, [undo, redo]);
+    // ── Adjustments ──
+    const handleAdjChange = React.useCallback((key, value) => {
+        setAdjustments(prev => ({ ...prev, [key]: value }));
+    }, []);
+    const handleAdjChangeEnd = React.useCallback(() => pushHistory(), [pushHistory]);
+    // ── Overlay helpers ──
+    const addOverlay = React.useCallback((ov) => {
+        setOverlays(prev => [...prev, ov]);
+        setSelectedOverlayId(ov.id);
+        setTimeout(() => pushHistory(), 30);
+    }, [pushHistory]);
+    const updateOverlay = React.useCallback((id, patch) => {
+        setOverlays(prev => prev.map(o => o.id === id ? { ...o, ...patch } : o));
+    }, []);
+    const deleteOverlay = React.useCallback((id) => {
+        setOverlays(prev => prev.filter(o => o.id !== id));
+        if (selectedOverlayId === id)
+            setSelectedOverlayId(null);
+        setTimeout(() => pushHistory(), 30);
+    }, [selectedOverlayId, pushHistory]);
+    const moveOverlayForward = React.useCallback((id) => {
+        setOverlays(prev => {
+            const idx = prev.findIndex(o => o.id === id);
+            if (idx < 0 || idx >= prev.length - 1)
+                return prev;
+            const copy = [...prev];
+            [copy[idx], copy[idx + 1]] = [copy[idx + 1], copy[idx]];
+            return copy;
+        });
+    }, []);
+    const moveOverlayBack = React.useCallback((id) => {
+        setOverlays(prev => {
+            const idx = prev.findIndex(o => o.id === id);
+            if (idx <= 0)
+                return prev;
+            const copy = [...prev];
+            [copy[idx - 1], copy[idx]] = [copy[idx], copy[idx - 1]];
+            return copy;
+        });
+    }, []);
+    // ── Canvas fraction from mouse event ──
+    const getCanvasFraction = React.useCallback((e) => {
+        if (!mainCanvasRef.current)
+            return { fx: 0.5, fy: 0.5 };
+        const rect = mainCanvasRef.current.getBoundingClientRect();
+        return {
+            fx: Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)),
+            fy: Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height)),
+        };
+    }, []);
+    // ── Canvas mouse handlers ──
+    const handleCanvasMouseDown = React.useCallback((e) => {
+        var _a, _b, _c, _d;
+        if (cropMode)
+            return;
+        const { fx, fy } = getCanvasFraction(e);
+        if (activeTab === "draw") {
+            e.preventDefault();
+            setIsDrawing(true);
+            setLivePoints([[fx, fy]]);
+            return;
+        }
+        for (let i = overlays.length - 1; i >= 0; i--) {
+            const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 1;
+            const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 1;
+            if (photoOverlays.hitTestOverlay(overlays[i], fx, fy, cw, ch)) {
+                setSelectedOverlayId(overlays[i].id);
+                setOverlayDragging(true);
+                setOverlayDragStart({ mx: fx, my: fy, ox: overlays[i].x, oy: overlays[i].y });
+                e.preventDefault();
+                return;
+            }
+        }
+        setSelectedOverlayId(null);
+    }, [cropMode, activeTab, getCanvasFraction, overlays]);
+    const handleCanvasMouseMove = React.useCallback((e) => {
+        const { fx, fy } = getCanvasFraction(e);
+        if (isDrawing) {
+            setLivePoints(prev => [...prev, [fx, fy]]);
+            return;
+        }
+        if (overlayDragging && overlayDragStart && selectedOverlayId) {
+            const dx = fx - overlayDragStart.mx;
+            const dy = fy - overlayDragStart.my;
+            updateOverlay(selectedOverlayId, {
+                x: Math.max(0, Math.min(1, overlayDragStart.ox + dx)),
+                y: Math.max(0, Math.min(1, overlayDragStart.oy + dy)),
+            });
+        }
+    }, [getCanvasFraction, isDrawing, overlayDragging, overlayDragStart, selectedOverlayId, updateOverlay]);
+    const handleCanvasMouseUp = React.useCallback(() => {
+        if (isDrawing && livePoints.length > 1) {
+            const stroke = { points: [...livePoints], color: drawColor, width: drawWidth, opacity: 1 };
+            if (!drawingOverlayRef.current) {
+                const dOv = photoOverlays.createDrawingOverlay();
+                dOv.strokes.push(stroke);
+                drawingOverlayRef.current = dOv;
+                setOverlays(prev => [...prev, dOv]);
+            }
+            else {
+                const id = drawingOverlayRef.current.id;
+                setOverlays(prev => prev.map(o => o.id === id && o.type === "drawing"
+                    ? { ...o, strokes: [...o.strokes, stroke] }
+                    : o));
+            }
+            setLivePoints([]);
+            setIsDrawing(false);
+            pushHistory();
+            return;
+        }
+        setIsDrawing(false);
+        setLivePoints([]);
+        if (overlayDragging) {
+            setOverlayDragging(false);
+            setOverlayDragStart(null);
+            pushHistory();
+        }
+    }, [isDrawing, livePoints, drawColor, drawWidth, overlayDragging, pushHistory]);
+    // ── Actions ──
+    const buildExportParams = React.useCallback(() => {
+        if (!image)
+            return null;
+        return { image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays };
+    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays]);
+    const handleSave = React.useCallback(async () => {
+        if (!image || !mainCanvasRef.current)
+            return;
+        const exportCanvas = document.createElement("canvas");
+        photoFilters.renderToCanvas(exportCanvas, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropRect, rotation, flipH, flipV);
+        if (overlays.length > 0) {
+            const ctx = exportCanvas.getContext("2d");
+            if (ctx)
+                photoOverlays.renderAllOverlays(ctx, overlays, exportCanvas.width, exportCanvas.height);
+        }
+        const file = await photoFilters.canvasToFile(exportCanvas, "player-photo.jpg", 0.92);
+        const editorState = photoOverlays.serializeEditorState({
+            filter: selectedFilter,
+            filterIntensity,
+            adjustments: { ...adjustments },
+            rotation,
+            flipH,
+            flipV,
+            cropRect: cropRect ? { ...cropRect } : null,
+            overlays,
+        });
+        onSave(file, editorState);
+    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays, onSave]);
+    const handleReset = React.useCallback(() => {
+        setSelectedFilter("none");
+        setFilterIntensity(1);
+        setAdjustments({ ...photoFilters.DEFAULT_ADJUSTMENTS });
+        setRotation(0);
+        setFlipH(false);
+        setFlipV(false);
+        setOverlays([]);
+        setSelectedOverlayId(null);
+        if (image) {
+            setCropRect({ x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight });
+        }
+        setCropMode(false);
+        setZoom(1);
+        pushHistory();
+    }, [image, pushHistory]);
+    const handleDownload = React.useCallback(async () => {
+        const p = buildExportParams();
+        if (!p)
+            return;
+        const blob = await photoEditorActions.getExportBlob(p);
+        if (blob)
+            photoEditorActions.handleDownloadBlob(blob);
+    }, [buildExportParams]);
+    const handleCopyToClipboard = React.useCallback(async () => {
+        const p = buildExportParams();
+        if (!p)
+            return;
+        await photoEditorActions.handleCopyImageToClipboard(p);
+    }, [buildExportParams]);
+    const handleShareNative = React.useCallback(async () => {
+        const p = buildExportParams();
+        if (!p)
+            return;
+        const blob = await photoEditorActions.getExportBlob(p);
+        if (blob)
+            await photoEditorActions.handleNativeShare(blob);
+    }, [buildExportParams]);
+    // ── Return ──
+    return {
+        t,
+        playerColor,
+        onCancel,
+        accent,
+        accentDim,
+        image,
+        loading,
+        activeTab,
+        setActiveTab,
+        setCropMode,
+        selectedFilter,
+        setSelectedFilter,
+        filterIntensity,
+        setFilterIntensity,
+        filterCategory,
+        setFilterCategory,
+        filteredList,
+        generateThumbnail,
+        adjustments,
+        handleAdjChange,
+        handleAdjChangeEnd,
+        rotation,
+        setRotation,
+        flipH,
+        setFlipH,
+        flipV,
+        setFlipV,
+        zoom,
+        setZoom,
+        cropMode,
+        cropRect,
+        setCropRect,
+        cropAspect,
+        setCropAspect,
+        handleCropMouseDown,
+        showCompare,
+        setShowCompare,
+        comparePosition,
+        setCompareDragging,
+        overlays,
+        setOverlays,
+        selectedOverlayId,
+        setSelectedOverlayId,
+        selectedOverlay,
+        addOverlay,
+        updateOverlay,
+        deleteOverlay,
+        moveOverlayForward,
+        moveOverlayBack,
+        emojiCat,
+        setEmojiCat,
+        textDraft,
+        setTextDraft,
+        textColor,
+        setTextColor,
+        textBold,
+        setTextBold,
+        textItalic,
+        setTextItalic,
+        textOutline,
+        setTextOutline,
+        textFontSize,
+        setTextFontSize,
+        textBg,
+        setTextBg,
+        shapeStroke,
+        setShapeStroke,
+        shapeFill,
+        setShapeFill,
+        shapeStrokeW,
+        setShapeStrokeW,
+        frameColor,
+        setFrameColor,
+        frameThick,
+        setFrameThick,
+        drawColor,
+        setDrawColor,
+        drawWidth,
+        setDrawWidth,
+        drawingOverlayRef,
+        historyIdx,
+        historyLength: history.length,
+        undo,
+        redo,
+        pushHistory,
+        handleSave,
+        handleReset,
+        handleDownload,
+        handleCopyToClipboard,
+        handleShareNative,
+        mainCanvasRef,
+        compareCanvasRef,
+        containerRef,
+        handleCanvasMouseDown,
+        handleCanvasMouseMove,
+        handleCanvasMouseUp,
+        createEmojiOverlay: photoOverlays.createEmojiOverlay,
+        createTextOverlay: photoOverlays.createTextOverlay,
+        createShapeOverlay: photoOverlays.createShapeOverlay,
+        createFrameOverlay: photoOverlays.createFrameOverlay,
+    };
+}
+
+exports.usePhotoEditor = usePhotoEditor;
+//# sourceMappingURL=usePhotoEditor.js.map