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

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

@@ -1,7 +1 @@
-import React from 'react';
-interface ImageEditorProps {
-    width: number;
-    height: number;
-}
-export declare const ImageEditor: React.FC<ImageEditorProps>;
-export {};
+export { ImageEditor, ImageResizeHandle } from './ImageEditor';

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

@@ -1,555 +1 @@
-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) }))));
-});
+export { ImageEditor } from './ImageEditor';

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

@@ -11,7 +11,7 @@ type ImageCoordinate = {
     skewX: number;
     skewY: number;
 };
-interface CanvasState {
+export interface CanvasState {
     scribbles: Scribble[];
     rectangles: Rectangle[];
     circles: Circle[];

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export declare const IconButtonStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {}, never>;
+export declare const StageWrapperStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $width: number;
+    $height: number;
+}, never>;

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

@@ -1,8 +1,14 @@
 import styled from 'styled-components';
-import { Button } from '../../atoms';
-export const IconButtonStyled = styled(Button) `
-  &.antsomi-btn-default.antsomi-btn-icon-only {
-    width: 30px !important;
-    height: 30px !important;
-  }
+import { Flex } from '../../atoms';
+// export const IconButtonStyled = styled(Button)`
+//   &.antsomi-btn-default.antsomi-btn-icon-only {
+//     width: 30px !important;
+//     height: 30px !important;
+//   }
+// `;
+export const StageWrapperStyled = styled(Flex) `
+  width: ${props => `${props.$width}px`};
+  height: ${props => `${props.$height}px`};
+  border: 1px solid #666;
+  margin-top: 16px;
 `;

package/es/components/molecules/ImageResizeTuiEditor/ImageResizeTuiEditor.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ImageResizeHandle } from './types';
+interface ImageResizeTuiEditorProps {
+    className: string;
+    imageUrl: string | undefined;
+    width: number;
+    height: number;
+    defaultValue: any;
+    hideAction: boolean;
+}
+declare const ImageResizeTuiEditor: React.ForwardRefExoticComponent<ImageResizeTuiEditorProps & React.RefAttributes<ImageResizeHandle>>;
+export { ImageResizeTuiEditor };