@antscorp/antsomi-ui 1.3.5-beta.26 → 1.3.5-beta.261

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

@@ -0,0 +1,555 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable default-case */
+import Icon from '@antscorp/icons';
+import { Flex } from 'antd';
+import * as Konva from 'konva';
+import { cloneDeep } from 'lodash';
+import React, { useCallback, useReducer, useRef, useState } from 'react';
+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, PAINT_OPTIONS, ShapeObject } from './constants';
+import { initialReducer, reducer } from './reducer';
+import { IconButtonStyled } from './styled';
+import { downloadURI, getTransformData } from './utils';
+export const ImageEditor = React.memo(({ width, height }) => {
+    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);
+    // 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, initialReducer);
+    const { current: { arrows, circles, imageCoordinate, rectangles, scribbles, image }, } = state;
+    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.decode().then(() => {
+            const originalWidth = image.width;
+            const originalHeight = image.height;
+            const ratio = originalWidth / originalHeight;
+            image.width = originalWidth > originalHeight ? width * 0.8 : height * 0.96 * ratio;
+            image.height = originalWidth > originalHeight ? (width * 0.8) / ratio : height * 0.96;
+            dispatch({
+                type: 'SET_NEW_STATE',
+                payload: {
+                    image,
+                    imageCoordinate: Object.assign(Object.assign({}, imageCoordinate), { id: uuidV4(), x: (width - image.width) / 2, y: (height - image.height) / 2, width: image.width, height: image.height }),
+                    saveHistory: true,
+                },
+            });
+        });
+    }, [height, width, imageCoordinate]);
+    const onImportImageSelect = useCallback((e) => {
+        var _a;
+        if ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[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();
+    }, []);
+    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();
+        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: [] } });
+        dispatch({ type: 'SET_ARROWS', payload: { arrows: [] } });
+        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([]);
+    }, []);
+    const removeOrDuplicateShape = useCallback((isDuplicate) => {
+        var _a;
+        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,
+                                Object.assign(Object.assign({}, 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,
+                                Object.assign(Object.assign({}, 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,
+                                Object.assign(Object.assign({}, 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,
+                                Object.assign(Object.assign({}, 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);
+        (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.nodes([]);
+    }, [arrows, circles, rectangles, scribbles, selectedId, selectedShape]);
+    useKeyEventCanvas('keydown', event => {
+        var _a, _b;
+        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:
+                (_a = transformerRef === null || transformerRef === void 0 ? void 0 : transformerRef.current) === null || _a === void 0 ? void 0 : _a.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([]);
+                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 => {
+        var _a, _b;
+        if (!((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.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]));
+    });
+    const onStageMouseUp = useCallback(() => {
+        var _a, _b, _c;
+        isPaintRef.current = false;
+        if (drawAction !== DrawAction.Select)
+            dispatch({ type: 'SAVE_HISTORY' });
+        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();
+            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);
+        }
+    }, [drawAction, selectionPosition.visible]);
+    const currentShapeRef = useRef();
+    const onStageMouseDown = useCallback(() => {
+        if (drawAction !== DrawAction.Crop)
+            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 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, Object.assign({ id, points: [x, y], color }, DEFAULT_TRANSFORM)],
+                    },
+                });
+                break;
+            }
+            case DrawAction.Circle: {
+                dispatch({
+                    type: 'SET_CIRCLES',
+                    payload: {
+                        circles: [...circles, Object.assign({ id, x, y, radius: 1, color }, DEFAULT_TRANSFORM)],
+                    },
+                });
+                break;
+            }
+            case DrawAction.Rectangle: {
+                dispatch({
+                    type: 'SET_RECTANGLES',
+                    payload: {
+                        rectangles: [
+                            ...rectangles,
+                            Object.assign({ 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, Object.assign({ 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 === null || stageRef === void 0 ? void 0 : 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;
+        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 })));
+                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),
+                    },
+                });
+                break;
+            }
+            case DrawAction.Circle: {
+                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),
+                    },
+                });
+                break;
+            }
+            case DrawAction.Rectangle: {
+                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),
+                    },
+                });
+                break;
+            }
+            case DrawAction.Crop: {
+                setCropZone(prevRectangle => prevRectangle
+                    ? Object.assign(Object.assign({}, 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
+                            ? Object.assign(Object.assign({}, prevArrow), { points: [prevArrow.points[0], prevArrow.points[1], x, y] }) : prevArrow),
+                    },
+                });
+                break;
+            }
+        }
+    }, [drawAction, arrows, circles, rectangles, scribbles]);
+    const onApplyCropClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!cropZone)
+            return;
+        const dataUri = yield ((_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,
+        }));
+        onClear();
+        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]);
+    }, [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([]);
+    }, [selectionPosition.visible]);
+    return (React.createElement("div", { style: { width: `${width}px` } },
+        React.createElement(Flex, { justify: "space-between", align: "center", style: { marginBottom: '6px' } },
+            React.createElement(Flex, { gap: 4 },
+                PAINT_OPTIONS.map(({ id, label, icon }) => (React.createElement(IconButtonStyled, { 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(IconButtonStyled, { "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(IconButtonStyled, { "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"))),
+        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(Flex, { style: {
+                width: `${width}px`,
+                height: `${height}px`,
+                border: '1px solid #666',
+                marginTop: '16px',
+            } },
+            React.createElement(Stage, { id: "image-editor", width: width, height: height, ref: stageRef, onMouseUp: onStageMouseUp, onMouseDown: onStageMouseDown, onMouseMove: onStageMouseMove },
+                React.createElement(Layer, null,
+                    React.createElement(KonvaRect, { x: 0, y: 0, height: width, width: height, fill: "white", 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: Object.assign(Object.assign({}, imageCoordinate), { x: attrs.x, y: attrs.y }),
+                                        saveHistory: true,
+                                    },
+                                });
+                        }, onTransformEnd: e => {
+                            dispatch({
+                                type: 'SET_IMAGE_COORDINATE',
+                                payload: {
+                                    imageCoordinate: Object.assign(Object.assign(Object.assign({}, imageCoordinate), { 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,
+                    React.createElement(KonvaRect, Object.assign({}, selectionPosition, { ref: selectionRectangleRef, fill: "rgba(0,0,200,0.4)" })),
+                    React.createElement(Transformer, { ref: transformerRef, ignoreStroke: true }))),
+            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) }))));
+});

package/es/components/molecules/ImageEditor/reducer.d.ts

@@ -0,0 +1,80 @@
+import { Arrow, Circle, Rectangle, Scribble } from './types';
+type ImageCoordinate = {
+    x: number;
+    y: number;
+    rotation: number;
+    id: string;
+    width?: number;
+    height?: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+interface CanvasState {
+    scribbles: Scribble[];
+    rectangles: Rectangle[];
+    circles: Circle[];
+    arrows: Arrow[];
+    image?: HTMLImageElement;
+    imageCoordinate: ImageCoordinate;
+}
+type ReducerAction = {
+    type: 'SET_SCRIBBLES';
+    payload: {
+        scribbles: Scribble[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_RECTANGLES';
+    payload: {
+        rectangles: Rectangle[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_CIRCLES';
+    payload: {
+        circles: Circle[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_ARROWS';
+    payload: {
+        arrows: Arrow[];
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_IMAGE';
+    payload: {
+        image: HTMLImageElement | undefined;
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_IMAGE_COORDINATE';
+    payload: {
+        imageCoordinate: ImageCoordinate;
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SET_NEW_STATE';
+    payload: Partial<CanvasState> & {
+        saveHistory?: boolean;
+    };
+} | {
+    type: 'SAVE_HISTORY';
+    payload?: {};
+} | {
+    type: 'UNDO';
+    payload?: {};
+} | {
+    type: 'REDO';
+    payload?: {};
+};
+interface HistoryReducer {
+    history: CanvasState[];
+    historyStep: number;
+    current: CanvasState;
+}
+export declare const initialReducer: HistoryReducer;
+export declare const reducer: (state: HistoryReducer, action: ReducerAction) => HistoryReducer;
+export {};