@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

package/es/components/molecules/ImageEditor/ImageEditor.js

@@ -0,0 +1,806 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable default-case */
+import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState, } from 'react';
+import Icon from '@antscorp/icons';
+import { Flex } from 'antd';
+import * as Konva from 'konva';
+import { cloneDeep } from 'lodash';
+import { SketchPicker } from 'react-color';
+import { Arrow as KonvaArrow, Circle as KonvaCircle, Image as KonvaImage, Line as KonvaLine, Rect as KonvaRect, Layer, Stage, Transformer, } from 'react-konva';
+import { v4 as uuidV4 } from 'uuid';
+import { Button, Popover } from '../../atoms';
+import ModalShortcut from './components/ModalShortcut';
+import { useDropFile, useKeyEventCanvas } from '@antscorp/antsomi-ui/es/hooks';
+import { DEFAULT_TRANSFORM, DrawAction, IMAGE_COORDINATE, PAINT_OPTIONS, ShapeObject, } from './constants';
+import { initialReducer, reducer } from './reducer';
+import { downloadURI, getTransformData } from './utils';
+import { StageWrapperStyled } from './styled';
+const SNAP_THRESHOLD = 5;
+export const ImageEditor = React.forwardRef((props, ref) => {
+    const { defaultValue, className, width, height, hideAction, imageUrl = '', showSelection, style, } = props;
+    const [color, setColor] = useState('#000');
+    const [drawAction, setDrawAction] = useState(DrawAction.Select);
+    const [cropZone, setCropZone] = useState();
+    const [selectedId, setSelectedId] = useState();
+    const [selectedShape, setSelectedShape] = useState();
+    const [openHelper, setOpenHelper] = useState(false);
+    // NOTE: use for snap line feature
+    const [hLines, setHLines] = useState([]);
+    const [vLines, setVLines] = useState([]);
+    // TODO: START - handle selection
+    const [selectionPosition, setSelectionPosition] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        visible: false,
+    });
+    // Konva.default.Util.haveIntersection
+    const [state, dispatch] = useReducer(reducer, defaultValue
+        ? { history: [defaultValue], historyStep: 0, current: defaultValue }
+        : initialReducer);
+    const { current: { arrows, circles, imageCoordinate, rectangles, scribbles, image }, } = state;
+    useEffect(() => {
+        // NOTE: reset initial reducer when change image (in ImageSlider)
+        dispatch({ type: 'RESET', payload: defaultValue || initialReducer.current });
+    }, [defaultValue]);
+    // const [imageFromUrl] = useImage(imageUrl);
+    // // console.log(imageUrl, '🚀 ~ ImageEditor ~ imageFromUrl:', imageUrl);
+    const stageRef = useRef(null);
+    const transformerRef = useRef(null);
+    const selectionRectangleRef = useRef(null);
+    const isPaintRef = useRef(false);
+    const changeImage = useCallback((imageUrl) => {
+        const image = new Image();
+        image.src = imageUrl;
+        image.crossOrigin = 'Anonymous';
+        image.decode().then(() => {
+            const originalWidth = image.width;
+            const originalHeight = image.height;
+            const ratio = originalWidth / originalHeight;
+            image.width = originalWidth > originalHeight ? width : height * ratio;
+            // image.width = originalWidth > originalHeight ? width * 0.8 : height * 0.96 * ratio;
+            image.height = originalWidth > originalHeight ? width / ratio : height;
+            // image.height = originalWidth > originalHeight ? (width * 0.8) / ratio : height * 0.96;
+            dispatch({
+                type: 'SET_NEW_STATE',
+                payload: {
+                    image,
+                    imageCoordinate: {
+                        ...IMAGE_COORDINATE,
+                        id: uuidV4(),
+                        x: (width - image.width) / 2,
+                        y: (height - image.height) / 2,
+                        width: image.width,
+                        height: image.height,
+                    },
+                    saveHistory: true,
+                },
+            });
+        });
+    }, [height, width]);
+    // NOTE: format canvas action (as methods) to ref with forwardRef and useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        getBase64(options) {
+            transformerRef?.current?.nodes([]);
+            return stageRef?.current?.toDataURL(options);
+        },
+        replaceImageWithUrl(imageUrl) {
+            changeImage(imageUrl);
+        },
+        getCurrentState() {
+            return state.current;
+        },
+    }), [state, changeImage]);
+    useEffect(() => {
+        if (imageUrl)
+            changeImage(imageUrl);
+    }, [imageUrl, changeImage]);
+    const onImportImageSelect = useCallback((e) => {
+        if (e.target.files?.[0]) {
+            changeImage(URL.createObjectURL(e.target.files[0]));
+        }
+        e.target.files = null;
+    }, [changeImage]);
+    const fileRef = useRef(null);
+    const onImportImageClick = useCallback(() => {
+        fileRef?.current?.click();
+    }, []);
+    const onExportClick = useCallback(() => {
+        const dataUri = stageRef?.current?.toDataURL();
+        downloadURI(dataUri, 'image.png');
+    }, []);
+    const onClear = useCallback(() => {
+        dispatch({ type: 'SET_RECTANGLES', payload: { rectangles: [] } });
+        dispatch({ type: 'SET_CIRCLES', payload: { circles: [] } });
+        dispatch({ type: 'SET_SCRIBBLES', payload: { scribbles: [] } });
+        dispatch({ type: 'SET_ARROWS', payload: { arrows: [] } });
+        dispatch({ type: 'SET_IMAGE', payload: { image: undefined, saveHistory: true } });
+        setCropZone(undefined);
+        setDrawAction(DrawAction.Select);
+        transformerRef?.current?.nodes([]);
+    }, []);
+    const removeOrDuplicateShape = useCallback((isDuplicate) => {
+        if (!selectedShape)
+            return;
+        switch (selectedShape) {
+            case ShapeObject.Arrows: {
+                const currSelect = arrows.findIndex(item => item.id === selectedId);
+                if (isDuplicate)
+                    dispatch({
+                        type: 'SET_ARROWS',
+                        payload: {
+                            saveHistory: true,
+                            arrows: [
+                                ...arrows,
+                                {
+                                    ...arrows[currSelect],
+                                    points: arrows[currSelect].points.map((item, idx) => idx % 2 === 0 ? item + 25 : item + 10),
+                                    id: uuidV4(),
+                                },
+                            ],
+                        },
+                    });
+                else {
+                    const cloneObject = cloneDeep(arrows);
+                    cloneObject.splice(currSelect, 1);
+                    dispatch({ type: 'SET_ARROWS', payload: { saveHistory: true, arrows: cloneObject } });
+                }
+                break;
+            }
+            case ShapeObject.Scribbles: {
+                const currSelect = scribbles.findIndex(item => item.id === selectedId);
+                if (isDuplicate) {
+                    dispatch({
+                        type: 'SET_SCRIBBLES',
+                        payload: {
+                            saveHistory: true,
+                            scribbles: [
+                                ...scribbles,
+                                {
+                                    ...scribbles[currSelect],
+                                    points: scribbles[currSelect].points.map(item => item + 25),
+                                    id: uuidV4(),
+                                },
+                            ],
+                        },
+                    });
+                }
+                else {
+                    const cloneObject = cloneDeep(scribbles);
+                    cloneObject.splice(currSelect, 1);
+                    dispatch({
+                        type: 'SET_SCRIBBLES',
+                        payload: { saveHistory: true, scribbles: cloneObject },
+                    });
+                }
+                break;
+            }
+            case ShapeObject.Rectangles: {
+                const currSelect = rectangles.findIndex(item => item.id === selectedId);
+                if (isDuplicate) {
+                    dispatch({
+                        type: 'SET_RECTANGLES',
+                        payload: {
+                            saveHistory: true,
+                            rectangles: [
+                                ...rectangles,
+                                {
+                                    ...rectangles[currSelect],
+                                    x: rectangles[currSelect].x + 25,
+                                    y: rectangles[currSelect].y + 25,
+                                    id: uuidV4(),
+                                },
+                            ],
+                        },
+                    });
+                }
+                else {
+                    const cloneObject = cloneDeep(rectangles);
+                    cloneObject.splice(currSelect, 1);
+                    dispatch({
+                        type: 'SET_RECTANGLES',
+                        payload: { saveHistory: true, rectangles: cloneObject },
+                    });
+                }
+                break;
+            }
+            case ShapeObject.Circles: {
+                const currSelect = circles.findIndex(item => item.id === selectedId);
+                if (isDuplicate) {
+                    dispatch({
+                        type: 'SET_CIRCLES',
+                        payload: {
+                            saveHistory: true,
+                            circles: [
+                                ...circles,
+                                {
+                                    ...circles[currSelect],
+                                    x: circles[currSelect].x + 25,
+                                    y: circles[currSelect].y + 25,
+                                    id: uuidV4(),
+                                },
+                            ],
+                        },
+                    });
+                }
+                else {
+                    const cloneObject = cloneDeep(circles);
+                    cloneObject.splice(currSelect, 1);
+                    dispatch({
+                        type: 'SET_CIRCLES',
+                        payload: { saveHistory: true, circles: cloneObject },
+                    });
+                }
+                break;
+            }
+            case ShapeObject.Image: {
+                if (isDuplicate)
+                    return;
+                dispatch({ type: 'SET_IMAGE', payload: { image: undefined, saveHistory: true } });
+                break;
+            }
+        }
+        setSelectedId(undefined);
+        setSelectedShape(undefined);
+        transformerRef?.current?.nodes([]);
+    }, [arrows, circles, rectangles, scribbles, selectedId, selectedShape]);
+    useKeyEventCanvas('keydown', event => {
+        event.preventDefault();
+        switch (true) {
+            case event.code === 'Delete':
+                removeOrDuplicateShape();
+                break;
+            case event.code === 'KeyD' && event.ctrlKey:
+                removeOrDuplicateShape(true);
+                break;
+            case event.code === 'KeyZ' && event.ctrlKey && !event.shiftKey:
+                transformerRef?.current?.nodes([]);
+                dispatch({ type: 'UNDO' });
+                break;
+            case event.code === 'KeyZ' && event.ctrlKey && event.shiftKey:
+                transformerRef?.current?.nodes([]);
+                dispatch({ type: 'REDO' });
+                break;
+            case event.code === 'KeyV' && event.ctrlKey:
+                navigator.clipboard.read().then(clipboardContents => {
+                    if (!clipboardContents[0].types.includes('image/png'))
+                        return;
+                    clipboardContents[0]
+                        .getType('image/png')
+                        .then(blob => changeImage(URL.createObjectURL(blob)));
+                });
+                break;
+            default:
+                break;
+        }
+    });
+    useDropFile('#image-editor', e => {
+        if (!e?.dataTransfer?.files[0])
+            return;
+        changeImage(URL.createObjectURL(e?.dataTransfer?.files[0]));
+    });
+    const onStageMouseUp = useCallback(() => {
+        isPaintRef.current = false;
+        if (drawAction !== DrawAction.Select)
+            dispatch({ type: 'SAVE_HISTORY' });
+        // NOTE: Guard check showSelection is falsy =>don't run code below
+        if (!showSelection)
+            return;
+        if (selectionPosition.visible) {
+            setSelectionPosition(prev => ({ ...prev, visible: false }));
+            const shapes = stageRef.current?.find('.shape') || [];
+            const box = selectionRectangleRef.current?.getClientRect();
+            const selected = shapes.filter(shape => Konva.default.Util.haveIntersection(box, shape.getClientRect()));
+            transformerRef?.current?.nodes(selected);
+        }
+    }, [drawAction, selectionPosition.visible, showSelection]);
+    const currentShapeRef = useRef();
+    const onStageMouseDown = useCallback(() => {
+        if (drawAction !== DrawAction.Crop)
+            setCropZone(undefined);
+        // if (drawAction === DrawAction.Select) return;
+        isPaintRef.current = true;
+        const stage = stageRef?.current;
+        const pos = stage?.getPointerPosition();
+        const x = pos?.x || 0;
+        const y = pos?.y || 0;
+        const id = uuidV4();
+        currentShapeRef.current = id;
+        switch (drawAction) {
+            case DrawAction.Select: {
+                setSelectionPosition({ x, y, width: 1, height: 1, visible: false });
+                break;
+            }
+            case DrawAction.Scribble: {
+                dispatch({
+                    type: 'SET_SCRIBBLES',
+                    payload: {
+                        scribbles: [...scribbles, { id, points: [x, y], color, ...DEFAULT_TRANSFORM }],
+                    },
+                });
+                break;
+            }
+            case DrawAction.Circle: {
+                dispatch({
+                    type: 'SET_CIRCLES',
+                    payload: {
+                        circles: [...circles, { id, x, y, radius: 1, color, ...DEFAULT_TRANSFORM }],
+                    },
+                });
+                break;
+            }
+            case DrawAction.Rectangle: {
+                dispatch({
+                    type: 'SET_RECTANGLES',
+                    payload: {
+                        rectangles: [
+                            ...rectangles,
+                            { id, x, y, width: 1, height: 1, color, ...DEFAULT_TRANSFORM },
+                        ],
+                    },
+                });
+                break;
+            }
+            case DrawAction.Crop: {
+                setCropZone({ id, x, y, width: 1, height: 1 });
+                break;
+            }
+            case DrawAction.Arrow: {
+                dispatch({
+                    type: 'SET_ARROWS',
+                    payload: {
+                        arrows: [...arrows, { id, points: [x, y, x, y], color, ...DEFAULT_TRANSFORM }],
+                    },
+                });
+                break;
+            }
+        }
+    }, [drawAction, color, arrows, circles, rectangles, scribbles]);
+    const onStageMouseMove = useCallback(() => {
+        if (!isPaintRef.current)
+            return;
+        const stage = stageRef?.current;
+        const id = currentShapeRef.current;
+        const pos = stage?.getPointerPosition();
+        const x = pos?.x || 0;
+        const y = pos?.y || 0;
+        switch (drawAction) {
+            case DrawAction.Select: {
+                // setSelectionVisible(true);
+                setSelectionPosition(prev => ({
+                    ...prev,
+                    width: x - prev.x,
+                    height: y - prev.y,
+                    visible: Math.abs(x - prev.x) > 4 || Math.abs(y - prev.y) > 4,
+                }));
+                break;
+            }
+            case DrawAction.Scribble: {
+                dispatch({
+                    type: 'SET_SCRIBBLES',
+                    payload: {
+                        scribbles: scribbles?.map(prevScribble => prevScribble.id === id
+                            ? {
+                                ...prevScribble,
+                                points: [...prevScribble.points, x, y],
+                            }
+                            : prevScribble),
+                    },
+                });
+                break;
+            }
+            case DrawAction.Circle: {
+                dispatch({
+                    type: 'SET_CIRCLES',
+                    payload: {
+                        circles: circles?.map(prevCircle => prevCircle.id === id
+                            ? {
+                                ...prevCircle,
+                                radius: ((x - prevCircle.x) ** 2 + (y - prevCircle.y) ** 2) ** 0.5,
+                            }
+                            : prevCircle),
+                    },
+                });
+                break;
+            }
+            case DrawAction.Rectangle: {
+                dispatch({
+                    type: 'SET_RECTANGLES',
+                    payload: {
+                        rectangles: rectangles?.map(prevRectangle => prevRectangle.id === id
+                            ? {
+                                ...prevRectangle,
+                                height: y - prevRectangle.y,
+                                width: x - prevRectangle.x,
+                            }
+                            : prevRectangle),
+                    },
+                });
+                break;
+            }
+            case DrawAction.Crop: {
+                setCropZone(prevRectangle => prevRectangle
+                    ? {
+                        ...prevRectangle,
+                        height: y - prevRectangle.y,
+                        width: x - prevRectangle.x,
+                    }
+                    : prevRectangle);
+                break;
+            }
+            case DrawAction.Arrow: {
+                dispatch({
+                    type: 'SET_ARROWS',
+                    payload: {
+                        arrows: arrows.map(prevArrow => prevArrow.id === id
+                            ? {
+                                ...prevArrow,
+                                points: [prevArrow.points[0], prevArrow.points[1], x, y],
+                            }
+                            : prevArrow),
+                    },
+                });
+                break;
+            }
+        }
+    }, [drawAction, arrows, circles, rectangles, scribbles]);
+    const onStageMouseLeave = useCallback(() => {
+        if (selectionPosition.visible) {
+            setSelectionPosition(prev => ({ ...prev, visible: false }));
+        }
+    }, [selectionPosition]);
+    const onApplyCropClick = useCallback(() => {
+        if (!cropZone)
+            return;
+        const dataUri = stageRef?.current?.toDataURL({
+            x: cropZone?.x + 2,
+            y: cropZone?.y + 2,
+            width: cropZone?.width - 4,
+            height: cropZone?.height - 4,
+        });
+        onClear();
+        if (dataUri)
+            changeImage(dataUri);
+    }, [cropZone, changeImage, onClear]);
+    const onShapeClick = useCallback((e, id, shape) => {
+        if (drawAction !== DrawAction.Select)
+            return;
+        const { currentTarget } = e || {};
+        setSelectedId(id);
+        setSelectedShape(shape);
+        transformerRef?.current?.nodes([currentTarget]);
+    }, [drawAction]);
+    const isDraggable = drawAction === DrawAction.Select;
+    const onBgClick = useCallback(() => {
+        if (selectionPosition.visible)
+            return;
+        transformerRef?.current?.nodes([]);
+    }, [selectionPosition.visible]);
+    // const getSnapLines = (excludedShape) => {
+    const getSnapLines = useCallback(() => {
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        // Center snap lines
+        const vertical = [stage.width() / 2];
+        const horizontal = [stage.height() / 2];
+        // NOTE: 💥💥💥 Don't remove the code below (placeholder for generate snap lines between objects to others)
+        // stage.find('.shape').forEach(shape => {
+        //   if (shape === excludedShape) return;
+        //   const box = shape.getClientRect({ relativeTo: stage });
+        //   vertical.push(box.x, box.x + box.width, box.x + box.width / 2);
+        //   horizontal.push(box.y, box.y + box.height, box.y + box.height / 2);
+        // });
+        // NOTE: 💥💥💥 Don't remove the code above
+        return {
+            vertical,
+            horizontal,
+        };
+    }, []);
+    const getShapeSnappingEdges = useCallback(() => {
+        const stage = stageRef.current;
+        const tr = transformerRef.current;
+        if (!tr || !stage)
+            return;
+        const box = stage.findOne('.back')?.getClientRect({ relativeTo: stage }) || {
+            x: 0,
+            y: 0,
+            height: 0,
+            width: 0,
+        };
+        const absPos = stage.findOne('.back')?.absolutePosition() || { x: 0, y: 0 };
+        return {
+            vertical: [
+                // Left vertical edge
+                {
+                    guide: box.x,
+                    offset: absPos.x - box.x,
+                    snap: 'start',
+                },
+                // Center vertical edge
+                {
+                    guide: box.x + box.width / 2,
+                    offset: absPos.x - box.x - box.width / 2,
+                    snap: 'center',
+                },
+                // Right vertical edge
+                {
+                    guide: box.x + box.width,
+                    offset: absPos.x - box.x - box.width,
+                    snap: 'end',
+                },
+            ],
+            horizontal: [
+                // Top horizontal edge
+                {
+                    guide: box.y,
+                    offset: absPos.y - box.y,
+                    snap: 'start',
+                },
+                // Center horizontal edge
+                {
+                    guide: box.y + box.height / 2,
+                    offset: absPos.y - box.y - box.height / 2,
+                    snap: 'center',
+                },
+                // Bottom horizontal edge
+                {
+                    guide: box.y + box.height,
+                    offset: absPos.y - box.y - box.height,
+                    snap: 'end',
+                },
+            ],
+        };
+    }, []);
+    const getClosestSnapLines = (possibleSnapLines, shapeSnappingEdges) => {
+        const getAllSnapLines = direction => {
+            const result = [];
+            possibleSnapLines[direction].forEach(snapLine => {
+                shapeSnappingEdges[direction].forEach(snappingEdge => {
+                    const diff = Math.abs(snapLine - snappingEdge.guide);
+                    // If the distance between the line and the shape is less than the threshold, we will consider it a snapping point.
+                    if (diff > SNAP_THRESHOLD)
+                        return;
+                    const { snap, offset } = snappingEdge;
+                    result.push({ snapLine, diff, snap, offset });
+                });
+            });
+            return result;
+        };
+        const resultV = getAllSnapLines('vertical');
+        const resultH = getAllSnapLines('horizontal');
+        const closestSnapLines = [];
+        const getSnapLine = ({ snapLine, offset, snap }, orientation) => ({
+            snapLine,
+            offset,
+            orientation,
+            snap,
+        });
+        // find closest vertical and horizontal snappping lines
+        const [minV] = resultV.sort((a, b) => a.diff - b.diff);
+        const [minH] = resultH.sort((a, b) => a.diff - b.diff);
+        if (minV)
+            closestSnapLines.push(getSnapLine(minV, 'V'));
+        if (minH)
+            closestSnapLines.push(getSnapLine(minH, 'H'));
+        return closestSnapLines;
+    };
+    const drawLines = useCallback((lines = []) => {
+        if (lines.length > 0) {
+            const lineStyle = {
+                stroke: 'rgb(255, 81, 12)',
+                strokeWidth: 1,
+                name: 'guid-line',
+                dash: [4, 6],
+            };
+            const hLines = [];
+            const vLines = [];
+            lines.forEach((l) => {
+                if (l.orientation === 'H') {
+                    const line = {
+                        points: [-6000, 0, 6000, 0],
+                        x: 0,
+                        y: l.snapLine,
+                        ...lineStyle,
+                    };
+                    hLines.push(line);
+                }
+                else if (l.orientation === 'V') {
+                    const line = {
+                        points: [0, -6000, 0, 6000],
+                        x: l.snapLine,
+                        y: 0,
+                        ...lineStyle,
+                    };
+                    vLines.push(line);
+                }
+            });
+            // Set state
+            setHLines(hLines);
+            setVLines(vLines);
+        }
+    }, []);
+    const onTransformerMove = useCallback((target) => {
+        // const target = transformerRef.current;
+        if (!target)
+            return;
+        // const [selectedNode] = target.getNodes();
+        // if (!selectedNode) return;
+        const possibleSnappingLines = getSnapLines();
+        // const possibleSnappingLines = getSnapLines(selectedNode);
+        const selectedShapeSnappingEdges = getShapeSnappingEdges();
+        const closestSnapLines = getClosestSnapLines(possibleSnappingLines, selectedShapeSnappingEdges);
+        // Do nothing if no snapping lines
+        if (closestSnapLines.length === 0) {
+            setHLines([]);
+            setVLines([]);
+            return;
+        }
+        // draw the lines
+        drawLines(closestSnapLines);
+        const orgAbsPos = target.absolutePosition();
+        const absPos = target.absolutePosition();
+        // Find new position
+        closestSnapLines.forEach(l => {
+            const position = l.snapLine + l.offset;
+            if (l.orientation === 'V') {
+                absPos.x = position;
+            }
+            else if (l.orientation === 'H') {
+                absPos.y = position;
+            }
+        });
+        // calculate the difference between original and new position
+        const vecDiff = {
+            x: orgAbsPos.x - absPos.x,
+            y: orgAbsPos.y - absPos.y,
+        };
+        // apply the difference to the selected shape.
+        const nodeAbsPos = target.getAbsolutePosition();
+        // const nodeAbsPos = selectedNode.getAbsolutePosition();
+        const newPos = {
+            x: nodeAbsPos.x - vecDiff.x,
+            y: nodeAbsPos.y - vecDiff.y,
+        };
+        target.setAbsolutePosition(newPos);
+        // selectedNode.setAbsolutePosition(newPos);
+    }, [getShapeSnappingEdges, getSnapLines, drawLines]);
+    return (_jsxs("div", { style: { width: `${width}px`, ...(style || {}) }, children: [_jsxs(Flex, { justify: "space-between", align: "center", style: { marginBottom: '6px', display: hideAction ? 'none' : 'flex' }, children: [_jsxs(Flex, { gap: 4, children: [PAINT_OPTIONS.map(({ id, label, icon }) => (_jsx(Button, { "aria-label": label, icon: _jsx(Icon, { type: icon, style: { fontSize: '16px' } }), onClick: () => {
+                                    transformerRef?.current?.nodes([]);
+                                    setCropZone(undefined);
+                                    setDrawAction(id);
+                                }, type: id === drawAction ? 'primary' : 'default' }, id))), _jsx(Popover, { content: _jsx(SketchPicker, { color: color, onChangeComplete: selectedColor => setColor(selectedColor.hex) }), children: _jsx("div", { style: {
+                                        backgroundColor: color,
+                                        height: '30px',
+                                        width: '30px',
+                                        borderRadius: '3px',
+                                        cursor: 'pointer',
+                                    } }) }), _jsx(Button, { "aria-label": "Clear", icon: _jsx(Icon, { type: "icon-ants-remove-circle", style: { fontSize: '16px' } }), onClick: onClear })] }), _jsxs(Flex, { gap: 4, align: "center", style: { height: '100%' }, children: [_jsx(Button, { "aria-label": "Help", icon: _jsx(Icon, { type: "icon-ants-help", style: { fontSize: '16px' } }), onClick: () => setOpenHelper(true) }), _jsx("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }), _jsx(Button, { onClick: onImportImageClick, children: "Import Image" }), _jsx(Button, { onClick: onExportClick, children: "Export" })] })] }), hideAction ? null : (_jsxs(Flex, { gap: 4, children: [_jsx(Button, { onClick: () => {
+                            transformerRef?.current?.nodes([]);
+                            setDrawAction(DrawAction.Crop);
+                        }, type: DrawAction.Crop === drawAction ? 'primary' : 'default', children: "Crop" }), DrawAction.Crop === drawAction ? (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setCropZone(undefined), danger: true, children: "Cancel Crop" }), _jsx(Button, { onClick: () => onApplyCropClick(), children: "Apply Crop" })] })) : null, _jsx(Button, { onClick: () => {
+                            transformerRef?.current?.nodes([]);
+                            dispatch({ type: 'UNDO' });
+                        }, style: { marginLeft: 'auto' }, children: "Undo" }), _jsx(Button, { onClick: () => {
+                            transformerRef?.current?.nodes([]);
+                            dispatch({ type: 'REDO' });
+                        }, children: "Redo" })] })), _jsxs(StageWrapperStyled, { "$width": width, "$height": height, className: className || '', children: [_jsx(Stage, { id: "image-editor", width: width, height: height, ref: stageRef, onMouseUp: onStageMouseUp, onMouseDown: onStageMouseDown, onMouseMove: onStageMouseMove, onMouseLeave: onStageMouseLeave, children: _jsxs(Layer, { children: [_jsx(KonvaRect, { x: 0, y: 0, height: width, width: height, fill: "transparent", id: "bg", onClick: onBgClick }), image && (_jsx(KonvaImage, { image: image, ...imageCoordinate, name: "shape", onClick: e => onShapeClick(e, imageCoordinate.id, ShapeObject.Image), onTap: e => onShapeClick(e, imageCoordinate.id, ShapeObject.Image), draggable: isDraggable, onDragEnd: ({ target: { attrs } }) => {
+                                        if (isDraggable)
+                                            dispatch({
+                                                type: 'SET_IMAGE_COORDINATE',
+                                                payload: {
+                                                    imageCoordinate: { x: attrs.x, y: attrs.y },
+                                                    saveHistory: true,
+                                                },
+                                            });
+                                    }, onTransformEnd: e => {
+                                        dispatch({
+                                            type: 'SET_IMAGE_COORDINATE',
+                                            payload: {
+                                                imageCoordinate: {
+                                                    width: e.target.width(),
+                                                    height: e.target.height(),
+                                                    ...getTransformData(e),
+                                                },
+                                                saveHistory: true,
+                                            },
+                                        });
+                                    } })), arrows.map(arrow => (_jsx(KonvaArrow, { ...arrow, name: "shape", fill: arrow.color, stroke: arrow.color, strokeWidth: 4, onClick: e => onShapeClick(e, arrow.id, ShapeObject.Arrows), onTap: e => onShapeClick(e, arrow.id, ShapeObject.Arrows), draggable: isDraggable, strokeScaleEnabled: false, onDragEnd: ({ target: { attrs } }) => {
+                                        if (isDraggable)
+                                            dispatch({
+                                                type: 'SET_ARROWS',
+                                                payload: {
+                                                    arrows: arrows.map(item => item.id === arrow.id ? { ...item, x: attrs.x, y: attrs.y } : item),
+                                                    saveHistory: true,
+                                                },
+                                            });
+                                    }, onTransformEnd: e => {
+                                        dispatch({
+                                            type: 'SET_ARROWS',
+                                            payload: {
+                                                arrows: arrows.map(item => item.id === arrow.id
+                                                    ? {
+                                                        ...item,
+                                                        points: e.target.attrs.points,
+                                                        ...getTransformData(e),
+                                                    }
+                                                    : item),
+                                                saveHistory: true,
+                                            },
+                                        });
+                                    } }, arrow.id))), rectangles.map(rectangle => (_jsx(KonvaRect, { ...rectangle, name: "shape", stroke: rectangle?.color, strokeWidth: 4, onClick: e => onShapeClick(e, rectangle.id, ShapeObject.Rectangles), onTap: e => onShapeClick(e, rectangle.id, ShapeObject.Rectangles), draggable: isDraggable, strokeScaleEnabled: false, onDragEnd: ({ target: { attrs } }) => {
+                                        if (isDraggable)
+                                            dispatch({
+                                                type: 'SET_RECTANGLES',
+                                                payload: {
+                                                    rectangles: rectangles.map(item => item.id === rectangle.id ? { ...item, x: attrs.x, y: attrs.y } : item),
+                                                    saveHistory: true,
+                                                },
+                                            });
+                                    }, onTransformEnd: e => {
+                                        dispatch({
+                                            type: 'SET_RECTANGLES',
+                                            payload: {
+                                                rectangles: rectangles.map(item => item.id === rectangle.id
+                                                    ? {
+                                                        ...item,
+                                                        width: e.target.width(),
+                                                        height: e.target.height(),
+                                                        ...getTransformData(e),
+                                                    }
+                                                    : item),
+                                                saveHistory: true,
+                                            },
+                                        });
+                                    } }, rectangle.id))), circles.map(circle => (_jsx(KonvaCircle, { ...circle, name: "shape", stroke: circle?.color, strokeWidth: 4, onClick: e => onShapeClick(e, circle.id, ShapeObject.Circles), onTap: e => onShapeClick(e, circle.id, ShapeObject.Circles), draggable: isDraggable, strokeScaleEnabled: false, onDragEnd: ({ target: { attrs } }) => {
+                                        if (isDraggable)
+                                            dispatch({
+                                                type: 'SET_CIRCLES',
+                                                payload: {
+                                                    circles: circles.map(item => item.id === circle.id ? { ...item, x: attrs.x, y: attrs.y } : item),
+                                                    saveHistory: true,
+                                                },
+                                            });
+                                    }, onTransformEnd: e => {
+                                        dispatch({
+                                            type: 'SET_CIRCLES',
+                                            payload: {
+                                                circles: circles.map(item => item.id === circle.id
+                                                    ? {
+                                                        ...item,
+                                                        radius: e.target.attrs.radius,
+                                                        ...getTransformData(e),
+                                                    }
+                                                    : item),
+                                                saveHistory: true,
+                                            },
+                                        });
+                                    } }, circle.id))), scribbles.map(scribble => (_jsx(KonvaLine, { ...scribble, name: "shape", lineCap: "round", lineJoin: "round", stroke: scribble?.color, strokeWidth: 4, onClick: e => onShapeClick(e, scribble.id, ShapeObject.Scribbles), onTap: e => onShapeClick(e, scribble.id, ShapeObject.Scribbles), draggable: isDraggable, strokeScaleEnabled: false, onDragEnd: ({ target: { attrs } }) => {
+                                        if (isDraggable)
+                                            dispatch({
+                                                type: 'SET_SCRIBBLES',
+                                                payload: {
+                                                    scribbles: scribbles.map(item => item.id === scribble.id ? { ...item, x: attrs.x, y: attrs.y } : item),
+                                                    saveHistory: true,
+                                                },
+                                            });
+                                    }, onTransformEnd: e => {
+                                        dispatch({
+                                            type: 'SET_SCRIBBLES',
+                                            payload: {
+                                                scribbles: scribbles.map(item => item.id === scribble.id
+                                                    ? {
+                                                        ...item,
+                                                        points: e.target.attrs.points,
+                                                        ...getTransformData(e),
+                                                    }
+                                                    : item),
+                                                saveHistory: true,
+                                            },
+                                        });
+                                    } }, scribble.id))), cropZone ? (_jsx(KonvaRect, { ...cropZone, dashEnabled: true, dash: [6], stroke: "red", strokeWidth: 2 })) : null, showSelection ? (_jsx(KonvaRect, { ...selectionPosition, ref: selectionRectangleRef, fill: "rgba(0,0,200,0.4)" })) : null, _jsx(Transformer, { ref: transformerRef, ignoreStroke: true, onDragMove: e => onTransformerMove(e.target), onDragEnd: () => {
+                                        setHLines([]);
+                                        setVLines([]);
+                                    } }), hLines.map((item, i) => (_jsx(KonvaLine, { ...item }, i))), vLines.map((item, i) => (_jsx(KonvaLine, { ...item }, i)))] }) }), !hideAction && DrawAction.Select === drawAction && selectedId ? (_jsx(Flex, { style: { marginLeft: '16px' }, children: _jsxs(Flex, { vertical: true, gap: 4, children: [_jsx(Button, { onClick: () => removeOrDuplicateShape(), icon: _jsx(Icon, { type: "icon-ants-outline-delete" }), danger: true }), _jsx(Button, { onClick: () => removeOrDuplicateShape(true), icon: _jsx(Icon, { type: "icon-ants-copy-report" }) })] }) })) : null, _jsx(ModalShortcut, { open: openHelper, onCancel: () => setOpenHelper(false) })] })] }));
+});