@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -0,0 +1,772 @@
+/* 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: Object.assign(Object.assign({}, 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) {
+            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);
+        },
+        replaceImageWithUrl(imageUrl) {
+            changeImage(imageUrl);
+        },
+        getCurrentState() {
+            return state.current;
+        },
+    }), [state, changeImage]);
+    useEffect(() => {
+        if (imageUrl)
+            changeImage(imageUrl);
+    }, [imageUrl, changeImage]);
+    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' });
+        // NOTE: Guard check showSelection is falsy =>don't run code below
+        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();
+            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, showSelection]);
+    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 onStageMouseLeave = useCallback(() => {
+        if (selectionPosition.visible) {
+            setSelectionPosition(prev => (Object.assign(Object.assign({}, 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,
+        });
+        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]);
+    }, [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]);
+    // 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(() => {
+        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 })) || {
+            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 };
+        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 = Object.assign({ 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);
+                    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 (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) }))));
+});