@antscorp/antsomi-ui 2.0.6 → 2.0.8-3.text-editor-beta.1

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

@@ -1,3 +1,4 @@
+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';
@@ -65,7 +66,14 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 type: 'SET_NEW_STATE',
                 payload: {
                     image,
-                    imageCoordinate: Object.assign(Object.assign({}, IMAGE_COORDINATE), { id: uuidV4(), x: (width - image.width) / 2, y: (height - image.height) / 2, width: image.width, height: image.height }),
+                    imageCoordinate: {
+                        ...IMAGE_COORDINATE,
+                        id: uuidV4(),
+                        x: (width - image.width) / 2,
+                        y: (height - image.height) / 2,
+                        width: image.width,
+                        height: image.height,
+                    },
                     saveHistory: true,
                 },
             });
@@ -74,9 +82,8 @@ export const ImageEditor = React.forwardRef((props, ref) => {
     // NOTE: format canvas action (as methods) to ref with forwardRef and useImperativeHandle
     useImperativeHandle(ref, () => ({
         getBase64(options) {
-            var _a, _b;
-            (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
-            return (_b = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _b === void 0 ? void 0 : _b.toDataURL(options);
+            transformerRef?.current?.nodes([]);
+            return stageRef?.current?.toDataURL(options);
         },
         replaceImageWithUrl(imageUrl) {
             changeImage(imageUrl);
@@ -90,24 +97,20 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             changeImage(imageUrl);
     }, [imageUrl, changeImage]);
     const onImportImageSelect = useCallback((e) => {
-        var _a;
-        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) {
+        if (e.target.files?.[0]) {
             changeImage(URL.createObjectURL(e.target.files[0]));
         }
         e.target.files = null;
     }, [changeImage]);
     const fileRef = useRef(null);
     const onImportImageClick = useCallback(() => {
-        var _a;
-        (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        fileRef?.current?.click();
     }, []);
     const onExportClick = useCallback(() => {
-        var _a;
-        const dataUri = (_a = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL();
+        const dataUri = stageRef?.current?.toDataURL();
         downloadURI(dataUri, 'image.png');
     }, []);
     const onClear = useCallback(() => {
-        var _a;
         dispatch({ type: 'SET_RECTANGLES', payload: { rectangles: [] } });
         dispatch({ type: 'SET_CIRCLES', payload: { circles: [] } });
         dispatch({ type: 'SET_SCRIBBLES', payload: { scribbles: [] } });
@@ -115,10 +118,9 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         dispatch({ type: 'SET_IMAGE', payload: { image: undefined, saveHistory: true } });
         setCropZone(undefined);
         setDrawAction(DrawAction.Select);
-        (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
+        transformerRef?.current?.nodes([]);
     }, []);
     const removeOrDuplicateShape = useCallback((isDuplicate) => {
-        var _a;
         if (!selectedShape)
             return;
         switch (selectedShape) {
@@ -131,7 +133,11 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                             saveHistory: true,
                             arrows: [
                                 ...arrows,
-                                Object.assign(Object.assign({}, arrows[currSelect]), { points: arrows[currSelect].points.map((item, idx) => idx % 2 === 0 ? item + 25 : item + 10), id: uuidV4() }),
+                                {
+                                    ...arrows[currSelect],
+                                    points: arrows[currSelect].points.map((item, idx) => idx % 2 === 0 ? item + 25 : item + 10),
+                                    id: uuidV4(),
+                                },
                             ],
                         },
                     });
@@ -151,7 +157,11 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                             saveHistory: true,
                             scribbles: [
                                 ...scribbles,
-                                Object.assign(Object.assign({}, scribbles[currSelect]), { points: scribbles[currSelect].points.map(item => item + 25), id: uuidV4() }),
+                                {
+                                    ...scribbles[currSelect],
+                                    points: scribbles[currSelect].points.map(item => item + 25),
+                                    id: uuidV4(),
+                                },
                             ],
                         },
                     });
@@ -175,7 +185,12 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                             saveHistory: true,
                             rectangles: [
                                 ...rectangles,
-                                Object.assign(Object.assign({}, rectangles[currSelect]), { x: rectangles[currSelect].x + 25, y: rectangles[currSelect].y + 25, id: uuidV4() }),
+                                {
+                                    ...rectangles[currSelect],
+                                    x: rectangles[currSelect].x + 25,
+                                    y: rectangles[currSelect].y + 25,
+                                    id: uuidV4(),
+                                },
                             ],
                         },
                     });
@@ -199,7 +214,12 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                             saveHistory: true,
                             circles: [
                                 ...circles,
-                                Object.assign(Object.assign({}, circles[currSelect]), { x: circles[currSelect].x + 25, y: circles[currSelect].y + 25, id: uuidV4() }),
+                                {
+                                    ...circles[currSelect],
+                                    x: circles[currSelect].x + 25,
+                                    y: circles[currSelect].y + 25,
+                                    id: uuidV4(),
+                                },
                             ],
                         },
                     });
@@ -223,10 +243,9 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         }
         setSelectedId(undefined);
         setSelectedShape(undefined);
-        (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
+        transformerRef?.current?.nodes([]);
     }, [arrows, circles, rectangles, scribbles, selectedId, selectedShape]);
     useKeyEventCanvas('keydown', event => {
-        var _a, _b;
         event.preventDefault();
         switch (true) {
             case event.code === 'Delete':
@@ -236,11 +255,11 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 removeOrDuplicateShape(true);
                 break;
             case event.code === 'KeyZ' && event.ctrlKey && !event.shiftKey:
-                (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
+                transformerRef?.current?.nodes([]);
                 dispatch({ type: 'UNDO' });
                 break;
             case event.code === 'KeyZ' && event.ctrlKey && event.shiftKey:
-                (_b = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _b === void 0 ? void 0 : _b.nodes([]);
+                transformerRef?.current?.nodes([]);
                 dispatch({ type: 'REDO' });
                 break;
             case event.code === 'KeyV' && event.ctrlKey:
@@ -257,13 +276,11 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         }
     });
     useDropFile('#image-editor', e => {
-        var _a, _b;
-        if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files[0]))
+        if (!e?.dataTransfer?.files[0])
             return;
-        changeImage(URL.createObjectURL((_b = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files[0]));
+        changeImage(URL.createObjectURL(e?.dataTransfer?.files[0]));
     });
     const onStageMouseUp = useCallback(() => {
-        var _a, _b, _c;
         isPaintRef.current = false;
         if (drawAction !== DrawAction.Select)
             dispatch({ type: 'SAVE_HISTORY' });
@@ -271,11 +288,11 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         if (!showSelection)
             return;
         if (selectionPosition.visible) {
-            setSelectionPosition(prev => (Object.assign(Object.assign({}, prev), { visible: false })));
-            const shapes = ((_a = stageRef.current) === null || _a === void 0 ? void 0 : _a.find('.shape')) || [];
-            const box = (_b = selectionRectangleRef.current) === null || _b === void 0 ? void 0 : _b.getClientRect();
+            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()));
-            (_c = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _c === void 0 ? void 0 : _c.nodes(selected);
+            transformerRef?.current?.nodes(selected);
         }
     }, [drawAction, selectionPosition.visible, showSelection]);
     const currentShapeRef = useRef();
@@ -284,10 +301,10 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             setCropZone(undefined);
         // if (drawAction === DrawAction.Select) return;
         isPaintRef.current = true;
-        const stage = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current;
-        const pos = stage === null || stage === void 0 ? void 0 : stage.getPointerPosition();
-        const x = (pos === null || pos === void 0 ? void 0 : pos.x) || 0;
-        const y = (pos === null || pos === void 0 ? void 0 : pos.y) || 0;
+        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) {
@@ -299,7 +316,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 dispatch({
                     type: 'SET_SCRIBBLES',
                     payload: {
-                        scribbles: [...scribbles, Object.assign({ id, points: [x, y], color }, DEFAULT_TRANSFORM)],
+                        scribbles: [...scribbles, { id, points: [x, y], color, ...DEFAULT_TRANSFORM }],
                     },
                 });
                 break;
@@ -308,7 +325,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 dispatch({
                     type: 'SET_CIRCLES',
                     payload: {
-                        circles: [...circles, Object.assign({ id, x, y, radius: 1, color }, DEFAULT_TRANSFORM)],
+                        circles: [...circles, { id, x, y, radius: 1, color, ...DEFAULT_TRANSFORM }],
                     },
                 });
                 break;
@@ -319,7 +336,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                     payload: {
                         rectangles: [
                             ...rectangles,
-                            Object.assign({ id, x, y, width: 1, height: 1, color }, DEFAULT_TRANSFORM),
+                            { id, x, y, width: 1, height: 1, color, ...DEFAULT_TRANSFORM },
                         ],
                     },
                 });
@@ -333,7 +350,7 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 dispatch({
                     type: 'SET_ARROWS',
                     payload: {
-                        arrows: [...arrows, Object.assign({ id, points: [x, y, x, y], color }, DEFAULT_TRANSFORM)],
+                        arrows: [...arrows, { id, points: [x, y, x, y], color, ...DEFAULT_TRANSFORM }],
                     },
                 });
                 break;
@@ -343,23 +360,32 @@ export const ImageEditor = React.forwardRef((props, ref) => {
     const onStageMouseMove = useCallback(() => {
         if (!isPaintRef.current)
             return;
-        const stage = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current;
+        const stage = stageRef?.current;
         const id = currentShapeRef.current;
-        const pos = stage === null || stage === void 0 ? void 0 : stage.getPointerPosition();
-        const x = (pos === null || pos === void 0 ? void 0 : pos.x) || 0;
-        const y = (pos === null || pos === void 0 ? void 0 : pos.y) || 0;
+        const pos = stage?.getPointerPosition();
+        const x = pos?.x || 0;
+        const y = pos?.y || 0;
         switch (drawAction) {
             case DrawAction.Select: {
                 // setSelectionVisible(true);
-                setSelectionPosition(prev => (Object.assign(Object.assign({}, prev), { width: x - prev.x, height: y - prev.y, visible: Math.abs(x - prev.x) > 4 || Math.abs(y - prev.y) > 4 })));
+                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 === null || scribbles === void 0 ? void 0 : scribbles.map(prevScribble => prevScribble.id === id
-                            ? Object.assign(Object.assign({}, prevScribble), { points: [...prevScribble.points, x, y] }) : prevScribble),
+                        scribbles: scribbles?.map(prevScribble => prevScribble.id === id
+                            ? {
+                                ...prevScribble,
+                                points: [...prevScribble.points, x, y],
+                            }
+                            : prevScribble),
                     },
                 });
                 break;
@@ -368,8 +394,12 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 dispatch({
                     type: 'SET_CIRCLES',
                     payload: {
-                        circles: circles === null || circles === void 0 ? void 0 : circles.map(prevCircle => prevCircle.id === id
-                            ? Object.assign(Object.assign({}, prevCircle), { radius: Math.pow((Math.pow((x - prevCircle.x), 2) + Math.pow((y - prevCircle.y), 2)), 0.5) }) : prevCircle),
+                        circles: circles?.map(prevCircle => prevCircle.id === id
+                            ? {
+                                ...prevCircle,
+                                radius: ((x - prevCircle.x) ** 2 + (y - prevCircle.y) ** 2) ** 0.5,
+                            }
+                            : prevCircle),
                     },
                 });
                 break;
@@ -378,15 +408,25 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                 dispatch({
                     type: 'SET_RECTANGLES',
                     payload: {
-                        rectangles: rectangles === null || rectangles === void 0 ? void 0 : rectangles.map(prevRectangle => prevRectangle.id === id
-                            ? Object.assign(Object.assign({}, prevRectangle), { height: y - prevRectangle.y, width: x - prevRectangle.x }) : prevRectangle),
+                        rectangles: rectangles?.map(prevRectangle => prevRectangle.id === id
+                            ? {
+                                ...prevRectangle,
+                                height: y - prevRectangle.y,
+                                width: x - prevRectangle.x,
+                            }
+                            : prevRectangle),
                     },
                 });
                 break;
             }
             case DrawAction.Crop: {
                 setCropZone(prevRectangle => prevRectangle
-                    ? Object.assign(Object.assign({}, prevRectangle), { height: y - prevRectangle.y, width: x - prevRectangle.x }) : prevRectangle);
+                    ? {
+                        ...prevRectangle,
+                        height: y - prevRectangle.y,
+                        width: x - prevRectangle.x,
+                    }
+                    : prevRectangle);
                 break;
             }
             case DrawAction.Arrow: {
@@ -394,7 +434,11 @@ export const ImageEditor = React.forwardRef((props, ref) => {
                     type: 'SET_ARROWS',
                     payload: {
                         arrows: arrows.map(prevArrow => prevArrow.id === id
-                            ? Object.assign(Object.assign({}, prevArrow), { points: [prevArrow.points[0], prevArrow.points[1], x, y] }) : prevArrow),
+                            ? {
+                                ...prevArrow,
+                                points: [prevArrow.points[0], prevArrow.points[1], x, y],
+                            }
+                            : prevArrow),
                     },
                 });
                 break;
@@ -403,38 +447,35 @@ export const ImageEditor = React.forwardRef((props, ref) => {
     }, [drawAction, arrows, circles, rectangles, scribbles]);
     const onStageMouseLeave = useCallback(() => {
         if (selectionPosition.visible) {
-            setSelectionPosition(prev => (Object.assign(Object.assign({}, prev), { visible: false })));
+            setSelectionPosition(prev => ({ ...prev, visible: false }));
         }
     }, [selectionPosition]);
     const onApplyCropClick = useCallback(() => {
-        var _a;
         if (!cropZone)
             return;
-        const dataUri = (_a = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current) === null || _a === void 0 ? void 0 : _a.toDataURL({
-            x: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.x) + 2,
-            y: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.y) + 2,
-            width: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.width) - 4,
-            height: (cropZone === null || cropZone === void 0 ? void 0 : cropZone.height) - 4,
+        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) => {
-        var _a;
         if (drawAction !== DrawAction.Select)
             return;
         const { currentTarget } = e || {};
         setSelectedId(id);
         setSelectedShape(shape);
-        (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([currentTarget]);
+        transformerRef?.current?.nodes([currentTarget]);
     }, [drawAction]);
     const isDraggable = drawAction === DrawAction.Select;
     const onBgClick = useCallback(() => {
-        var _a;
         if (selectionPosition.visible)
             return;
-        (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
+        transformerRef?.current?.nodes([]);
     }, [selectionPosition.visible]);
     // const getSnapLines = (excludedShape) => {
     const getSnapLines = useCallback(() => {
@@ -458,18 +499,17 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         };
     }, []);
     const getShapeSnappingEdges = useCallback(() => {
-        var _a, _b;
         const stage = stageRef.current;
         const tr = transformerRef.current;
         if (!tr || !stage)
             return;
-        const box = ((_a = stage.findOne('.back')) === null || _a === void 0 ? void 0 : _a.getClientRect({ relativeTo: stage })) || {
+        const box = stage.findOne('.back')?.getClientRect({ relativeTo: stage }) || {
             x: 0,
             y: 0,
             height: 0,
             width: 0,
         };
-        const absPos = ((_b = stage.findOne('.back')) === null || _b === void 0 ? void 0 : _b.absolutePosition()) || { x: 0, y: 0 };
+        const absPos = stage.findOne('.back')?.absolutePosition() || { x: 0, y: 0 };
         return {
             vertical: [
                 // Left vertical edge
@@ -558,11 +598,21 @@ export const ImageEditor = React.forwardRef((props, ref) => {
             const vLines = [];
             lines.forEach((l) => {
                 if (l.orientation === 'H') {
-                    const line = Object.assign({ points: [-6000, 0, 6000, 0], x: 0, y: l.snapLine }, lineStyle);
+                    const line = {
+                        points: [-6000, 0, 6000, 0],
+                        x: 0,
+                        y: l.snapLine,
+                        ...lineStyle,
+                    };
                     hLines.push(line);
                 }
                 else if (l.orientation === 'V') {
-                    const line = Object.assign({ points: [0, -6000, 0, 6000], x: l.snapLine, y: 0 }, lineStyle);
+                    const line = {
+                        points: [0, -6000, 0, 6000],
+                        x: l.snapLine,
+                        y: 0,
+                        ...lineStyle,
+                    };
                     vLines.push(line);
                 }
             });
@@ -616,157 +666,141 @@ export const ImageEditor = React.forwardRef((props, ref) => {
         target.setAbsolutePosition(newPos);
         // selectedNode.setAbsolutePosition(newPos);
     }, [getShapeSnappingEdges, getSnapLines, drawLines]);
-    return (React.createElement("div", { style: Object.assign({ width: `${width}px` }, (style || {})) },
-        React.createElement(Flex, { justify: "space-between", align: "center", style: { marginBottom: '6px', display: hideAction ? 'none' : 'flex' } },
-            React.createElement(Flex, { gap: 4 },
-                PAINT_OPTIONS.map(({ id, label, icon }) => (React.createElement(Button, { key: id, "aria-label": label, icon: React.createElement(Icon, { type: icon, style: { fontSize: '16px' } }), onClick: () => {
-                        var _a;
-                        (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
-                        setCropZone(undefined);
-                        setDrawAction(id);
-                    }, type: id === drawAction ? 'primary' : 'default' }))),
-                React.createElement(Popover, { content: React.createElement(SketchPicker, { color: color, onChangeComplete: selectedColor => setColor(selectedColor.hex) }) },
-                    React.createElement("div", { style: {
-                            backgroundColor: color,
-                            height: '30px',
-                            width: '30px',
-                            borderRadius: '3px',
-                            cursor: 'pointer',
-                        } })),
-                React.createElement(Button, { "aria-label": "Clear", icon: React.createElement(Icon, { type: "icon-ants-remove-circle", style: { fontSize: '16px' } }), onClick: onClear })),
-            React.createElement(Flex, { gap: 4, align: "center", style: { height: '100%' } },
-                React.createElement(Button, { "aria-label": "Help", icon: React.createElement(Icon, { type: "icon-ants-help", style: { fontSize: '16px' } }), onClick: () => setOpenHelper(true) }),
-                React.createElement("input", { type: "file", ref: fileRef, onChange: onImportImageSelect, style: { display: 'none' }, accept: "image/*" }),
-                React.createElement(Button, { onClick: onImportImageClick }, "Import Image"),
-                React.createElement(Button, { onClick: onExportClick }, "Export"))),
-        hideAction ? null : (React.createElement(Flex, { gap: 4 },
-            React.createElement(Button, { onClick: () => {
-                    var _a;
-                    (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
-                    setDrawAction(DrawAction.Crop);
-                }, type: DrawAction.Crop === drawAction ? 'primary' : 'default' }, "Crop"),
-            DrawAction.Crop === drawAction ? (React.createElement(React.Fragment, null,
-                React.createElement(Button, { onClick: () => setCropZone(undefined), danger: true }, "Cancel Crop"),
-                React.createElement(Button, { onClick: () => onApplyCropClick() }, "Apply Crop"))) : null,
-            React.createElement(Button, { onClick: () => {
-                    var _a;
-                    (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
-                    dispatch({ type: 'UNDO' });
-                }, style: { marginLeft: 'auto' } }, "Undo"),
-            React.createElement(Button, { onClick: () => {
-                    var _a;
-                    (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
-                    dispatch({ type: 'REDO' });
-                } }, "Redo"))),
-        React.createElement(StageWrapperStyled, { "$width": width, "$height": height, className: className || '' },
-            React.createElement(Stage, { id: "image-editor", width: width, height: height, ref: stageRef, onMouseUp: onStageMouseUp, onMouseDown: onStageMouseDown, onMouseMove: onStageMouseMove, onMouseLeave: onStageMouseLeave },
-                React.createElement(Layer, null,
-                    React.createElement(KonvaRect, { x: 0, y: 0, height: width, width: height, fill: "transparent", id: "bg", onClick: onBgClick }),
-                    image && (React.createElement(KonvaImage, Object.assign({ 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: Object.assign({ width: e.target.width(), height: e.target.height() }, getTransformData(e)),
-                                    saveHistory: true,
-                                },
-                            });
-                        } }))),
-                    arrows.map(arrow => (React.createElement(KonvaArrow, Object.assign({ key: arrow.id }, 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 ? Object.assign(Object.assign({}, 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
-                                        ? Object.assign(Object.assign(Object.assign({}, item), { points: e.target.attrs.points }), getTransformData(e)) : item),
-                                    saveHistory: true,
-                                },
-                            });
-                        } })))),
-                    rectangles.map(rectangle => (React.createElement(KonvaRect, Object.assign({ key: rectangle.id }, rectangle, { name: "shape", stroke: rectangle === null || rectangle === void 0 ? void 0 : 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 ? Object.assign(Object.assign({}, 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
-                                        ? Object.assign(Object.assign(Object.assign({}, item), { width: e.target.width(), height: e.target.height() }), getTransformData(e)) : item),
-                                    saveHistory: true,
-                                },
-                            });
-                        } })))),
-                    circles.map(circle => (React.createElement(KonvaCircle, Object.assign({ key: circle.id }, circle, { name: "shape", stroke: circle === null || circle === void 0 ? void 0 : 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 ? Object.assign(Object.assign({}, 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
-                                        ? Object.assign(Object.assign(Object.assign({}, item), { radius: e.target.attrs.radius }), getTransformData(e)) : item),
-                                    saveHistory: true,
-                                },
-                            });
-                        } })))),
-                    scribbles.map(scribble => (React.createElement(KonvaLine, Object.assign({ key: scribble.id }, scribble, { name: "shape", lineCap: "round", lineJoin: "round", stroke: scribble === null || scribble === void 0 ? void 0 : 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 ? Object.assign(Object.assign({}, 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
-                                        ? Object.assign(Object.assign(Object.assign({}, item), { points: e.target.attrs.points }), getTransformData(e)) : item),
-                                    saveHistory: true,
-                                },
-                            });
-                        } })))),
-                    cropZone ? (React.createElement(KonvaRect, Object.assign({}, cropZone, { dashEnabled: true, dash: [6], stroke: "red", strokeWidth: 2 }))) : null,
-                    showSelection ? (React.createElement(KonvaRect, Object.assign({}, selectionPosition, { ref: selectionRectangleRef, fill: "rgba(0,0,200,0.4)" }))) : null,
-                    React.createElement(Transformer, { ref: transformerRef, ignoreStroke: true, onDragMove: e => onTransformerMove(e.target), onDragEnd: () => {
-                            setHLines([]);
-                            setVLines([]);
-                        } }),
-                    hLines.map((item, i) => (React.createElement(KonvaLine, Object.assign({ key: i }, item)))),
-                    vLines.map((item, i) => (React.createElement(KonvaLine, Object.assign({ key: i }, item)))))),
-            !hideAction && DrawAction.Select === drawAction && selectedId ? (React.createElement(Flex, { style: { marginLeft: '16px' } },
-                React.createElement(Flex, { vertical: true, gap: 4 },
-                    React.createElement(Button, { onClick: () => removeOrDuplicateShape(), icon: React.createElement(Icon, { type: "icon-ants-outline-delete" }), danger: true }),
-                    React.createElement(Button, { onClick: () => removeOrDuplicateShape(true), icon: React.createElement(Icon, { type: "icon-ants-copy-report" }) })))) : null,
-            React.createElement(ModalShortcut, { open: openHelper, onCancel: () => setOpenHelper(false) }))));
+    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) })] })] }));
 });