npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.232 → 1.3.5-beta.234 - Mend

@antscorp/antsomi-ui 1.3.5-beta.232 → 1.3.5-beta.234

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.d.ts CHANGED Viewed

@@ -37,3 +37,15 @@ export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdva
     formatDisplay: string;
     timeFormatDisplay: string;
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export declare const getFormatDisplayFromValueType: (type?: TAdvancedType, valueType?: ValueTypes) => string;

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.js CHANGED Viewed

@@ -8,6 +8,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
+import { ADVANCED_RANGE_PICKER_FORMAT } from '../AdvancedRangePicker/constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 dayjs.extend(utc);
@@ -209,3 +210,29 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
     }
     return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export const getFormatDisplayFromValueType = (type, valueType) => {
+    switch (valueType) {
+        case 'YEAR_MONTH_DAY_HOUR':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:00:00' : 'YYYY-MM-DD HH:59:59';
+        case 'YEAR_MONTH_DAY_MINUTE':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:mm:00' : 'YYYY-MM-DD HH:mm:59';
+        case 'YEAR_MONTH_DAY_SECOND':
+            return ADVANCED_RANGE_PICKER_FORMAT.general;
+        case 'YEAR_MONTH_DAY':
+        default:
+            return type === 'startDate'
+                ? ADVANCED_RANGE_PICKER_FORMAT.startDate
+                : ADVANCED_RANGE_PICKER_FORMAT.endDate;
+    }
+};

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
     className?: string;
     valueType?: ValueTypes;
+    /**
+     * If true => auto generate time format from valueType props; else use hard config
+     */
+    useFormatMapping?: boolean;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     startDateConfig?: TDateConfig;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js CHANGED Viewed

@@ -15,11 +15,12 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Instance
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { getFormatDisplayFromValueType } from '../AdvancedPicker/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { className, valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, isViewMode, onChange, } = props;
+    const { className, valueType, useFormatMapping, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, isViewMode, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,9 +56,17 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20, align: "end", className: className || '' },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: useFormatMapping
+                ? getFormatDisplayFromValueType('startDate', valueType)
+                : ADVANCED_RANGE_PICKER_FORMAT.startDate,
+            // format={ADVANCED_RANGE_PICKER_FORMAT.startDate}
+            errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode }),
         separator || null,
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: useFormatMapping
+                ? getFormatDisplayFromValueType('endDate', valueType)
+                : ADVANCED_RANGE_PICKER_FORMAT.endDate,
+            // format={ADVANCED_RANGE_PICKER_FORMAT.endDate}
+            errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

package/es/components/molecules/ImageEditor/components/ModalShortcut.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ModalShortcutProps {
+    open: boolean;
+    onCancel: () => void;
+}
+declare const ModalShortcut: React.FC<ModalShortcutProps>;
+export default ModalShortcut;

package/es/components/molecules/ImageEditor/components/ModalShortcut.js ADDED Viewed

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ModalV2 } from '../../ModalV2';
+import { Flex } from 'antd';
+import { Text } from '../../../atoms';
+import styled from 'styled-components';
+const RowStyled = styled(Flex) `
+  border-bottom: 1px solid #ccc;
+  padding: 6px 0;
+  &:last-child {
+    border-bottom: none;
+  }
+  .row-text {
+    font-size: 14px;
+  }
+  .header {
+    font-weight: bold;
+  }
+  .shortcut {
+    border: 1px solid #ccc;
+    padding: 4px 0;
+    width: 120px;
+    text-align: center;
+    border-radius: 4px;
+  }
+`;
+const SHORTCUT_LIST = [
+    { command: 'Delete', shortcut: 'Delete/Del' },
+    { command: 'Duplicate', shortcut: 'Ctrl + D' },
+    { command: 'Undo', shortcut: 'Ctrl + Z' },
+    { command: 'Redo', shortcut: 'Ctrl + Shift + Z' },
+];
+const ModalShortcut = props => {
+    const { open, onCancel } = props;
+    return (React.createElement(ModalV2, { open: open, onCancel: onCancel, footer: null, destroyOnClose: true, title: "Keyboard shortcut" },
+        React.createElement(Flex, { vertical: true },
+            React.createElement(RowStyled, { justify: "space-between" },
+                React.createElement(Text, { className: "row-text header" }, "Commands"),
+                React.createElement(Text, { className: "row-text header" }, "Shortcut")),
+            SHORTCUT_LIST.map(({ command, shortcut }) => (React.createElement(RowStyled, { key: command, justify: "space-between", align: "center" },
+                React.createElement(Text, { className: "row-text" }, command),
+                React.createElement(Text, { className: "row-text shortcut" }, shortcut)))))));
+};
+export default ModalShortcut;

package/es/components/molecules/ImageEditor/constants.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+export declare enum DrawAction {
+    Select = "select",
+    Rectangle = "rectangle",
+    Circle = "circle",
+    Scribble = "freedraw",
+    Arrow = "arrow",
+    Crop = "crop"
+}
+export declare enum ShapeObject {
+    Scribbles = "scribbles",
+    Rectangles = "rectangles",
+    Circles = "circles",
+    Arrows = "arrows",
+    Image = "image"
+}
+export declare const PAINT_OPTIONS: {
+    id: DrawAction;
+    label: string;
+    icon: string;
+}[];
+export declare const DEFAULT_TRANSFORM: {
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+export declare const IMAGE_COORDINATE: {
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    id: string;
+    x: number;
+    y: number;
+};

package/es/components/molecules/ImageEditor/constants.js ADDED Viewed

@@ -0,0 +1,32 @@
+export var DrawAction;
+(function (DrawAction) {
+    DrawAction["Select"] = "select";
+    DrawAction["Rectangle"] = "rectangle";
+    DrawAction["Circle"] = "circle";
+    DrawAction["Scribble"] = "freedraw";
+    DrawAction["Arrow"] = "arrow";
+    DrawAction["Crop"] = "crop";
+})(DrawAction || (DrawAction = {}));
+export var ShapeObject;
+(function (ShapeObject) {
+    ShapeObject["Scribbles"] = "scribbles";
+    ShapeObject["Rectangles"] = "rectangles";
+    ShapeObject["Circles"] = "circles";
+    ShapeObject["Arrows"] = "arrows";
+    ShapeObject["Image"] = "image";
+})(ShapeObject || (ShapeObject = {}));
+export const PAINT_OPTIONS = [
+    { id: DrawAction.Select, label: 'Select Shapes', icon: 'icon-ants-cursor' },
+    { id: DrawAction.Rectangle, label: 'Draw Rectangle Shape', icon: 'icon-ants-square-outline' },
+    { id: DrawAction.Circle, label: 'Draw Cirle Shape', icon: 'icon-ants-circle-outline' },
+    { id: DrawAction.Arrow, label: 'Draw Arrow Shape', icon: 'icon-ants-arrow-up-square' },
+    { id: DrawAction.Scribble, label: 'Scribble', icon: 'icon-ants-pencil' },
+];
+export const DEFAULT_TRANSFORM = {
+    rotation: 0,
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+};
+export const IMAGE_COORDINATE = Object.assign({ id: 'image_id', x: 0, y: 0 }, DEFAULT_TRANSFORM);

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

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

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

@@ -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 ADDED Viewed

@@ -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 {};

package/es/components/molecules/ImageEditor/reducer.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { IMAGE_COORDINATE } from './constants';
+const initialState = {
+    scribbles: [],
+    rectangles: [],
+    arrows: [],
+    circles: [],
+    image: undefined,
+    imageCoordinate: IMAGE_COORDINATE,
+};
+export const initialReducer = {
+    history: [initialState],
+    historyStep: 0,
+    current: initialState,
+};
+export const reducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case 'SET_SCRIBBLES':
+        case 'SET_RECTANGLES':
+        case 'SET_CIRCLES':
+        case 'SET_ARROWS':
+        case 'SET_IMAGE':
+        case 'SET_IMAGE_COORDINATE':
+        case 'SET_NEW_STATE': {
+            const newHistoryStep = state.historyStep + 1;
+            const newState = Object.assign(Object.assign({}, state.current), payload);
+            return Object.assign(Object.assign({}, state), { history: payload.saveHistory
+                    ? state.history.slice(0, newHistoryStep).concat([newState])
+                    : state.history, historyStep: payload.saveHistory ? newHistoryStep : state.historyStep, current: newState });
+        }
+        case 'SAVE_HISTORY': {
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, history: state.history.slice(0, state.historyStep + 1).concat([state.current]) });
+            break;
+        }
+        case 'UNDO': {
+            if (state.historyStep === 0) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep - 1, current: state.history[state.historyStep - 1] });
+        }
+        case 'REDO': {
+            if (state.historyStep === state.history.length - 1) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, current: state.history[state.historyStep + 1] });
+        }
+        default:
+            break;
+    }
+    return state;
+};

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

@@ -0,0 +1,4 @@
+/// <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>;

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

@@ -0,0 +1,8 @@
+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;
+  }
+`;

package/es/components/molecules/ImageEditor/types.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+export type Shape = {
+    id: string;
+    color: string;
+    x?: number;
+    y?: number;
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+export type Rectangle = Shape & {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export type Circle = Shape & {
+    radius: number;
+    x: number;
+    y: number;
+};
+export type Scribble = Shape & {
+    points: number[];
+};
+export type Arrow = Shape & {
+    points: [number, number, number, number];
+};
+export type CropZone = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/es/components/molecules/ImageEditor/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/es/components/molecules/ImageEditor/utils.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+/**
+ * Creates a link with the specified URI and name, triggers a download, and removes the link from the document.
+ *
+ * @param {string | undefined} uri - The URI to download from.
+ * @param {string} name - The name to save the file as.
+ */
+export declare const downloadURI: (uri: string | undefined, name: string) => void;
+/**
+ * Returns an object with specific transformation data extracted from the Konva event object.
+ *
+ * @param e - The Konva event object containing transformation data.
+ * @return An object with x, y, rotation, scaleX, scaleY, skewX, and skewY properties.
+ */
+export declare const getTransformData: (e: KonvaEventObject<Event>) => {
+    x: any;
+    y: any;
+    rotation: any;
+    scaleX: any;
+    scaleY: any;
+    skewX: any;
+    skewY: any;
+};

package/es/components/molecules/ImageEditor/utils.js ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * Creates a link with the specified URI and name, triggers a download, and removes the link from the document.
+ *
+ * @param {string | undefined} uri - The URI to download from.
+ * @param {string} name - The name to save the file as.
+ */
+export const downloadURI = (uri, name) => {
+    const link = document.createElement('a');
+    link.download = name;
+    link.href = uri || '';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+/**
+ * Returns an object with specific transformation data extracted from the Konva event object.
+ *
+ * @param e - The Konva event object containing transformation data.
+ * @return An object with x, y, rotation, scaleX, scaleY, skewX, and skewY properties.
+ */
+export const getTransformData = (e) => ({
+    x: e.target.attrs.x,
+    y: e.target.attrs.y,
+    rotation: e.target.attrs.rotation,
+    scaleX: e.target.attrs.scaleX,
+    scaleY: e.target.attrs.scaleY,
+    skewX: e.target.attrs.skewX,
+    skewY: e.target.attrs.skewY,
+});

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js CHANGED Viewed

@@ -2,16 +2,12 @@ import React, { useMemo } from 'react';
 import { Image } from 'antd';
 import { Button } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
-import { checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const BigImage = React.memo(props => {
     const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, onClickDefaultButton, } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
-    const urlNoCache = url
-        ? url.includes('nocache') || url.startsWith('data:image')
-            ? url
-            : `${url}?nocache=${timeGenerated}`
-        : undefined;
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
     const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
     return (React.createElement("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
         url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache })) : null,

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js CHANGED Viewed

@@ -1,15 +1,11 @@
 import React, { useMemo } from 'react';
 import { Image } from 'antd';
-import { checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const SmallImage = React.memo(props => {
     const { url, isSelected, index, onClick, showSkeleton } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
-    const urlNoCache = url
-        ? url.includes('nocache') || url.startsWith('data:image')
-            ? url
-            : `${url}?nocache=${timeGenerated}`
-        : undefined;
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
     const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
     return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%",
         // src={imageUrl}

package/es/components/molecules/index.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export { RadioGroup } from './RadioGroup';
 export { InputSearch } from './InputSearch';
 export { UploadImage } from './UploadImage';
 export { IconSelection } from './IconSelection';
+export { ImageEditor as ImageResize } from './ImageEditor';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';

package/es/components/molecules/index.js CHANGED Viewed

@@ -17,6 +17,7 @@ export { RadioGroup } from './RadioGroup';
 export { InputSearch } from './InputSearch';
 export { UploadImage } from './UploadImage';
 export { IconSelection } from './IconSelection';
+export { ImageEditor as ImageResize } from './ImageEditor';
 export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';

package/es/hooks/index.d.ts CHANGED Viewed

@@ -16,3 +16,6 @@ export * from './useUnmount';
 export * from './createEffectWithTarget ';
 export * from './useEffectWithTarget';
 export * from './useMutationObserver';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';

package/es/hooks/index.js CHANGED Viewed

@@ -35,3 +35,6 @@ export * from './useUnmount';
 export * from './createEffectWithTarget ';
 export * from './useEffectWithTarget';
 export * from './useMutationObserver';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';

package/es/hooks/useDragEvent.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const useDragEvent: (keyEvent: 'dragenter' \| 'dragexit' \| 'dragover' \| 'drop', selector: string, callback: (event: DragEvent) => void) => void;

package/es/hooks/useDragEvent.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export const useDragEvent = (keyEvent, selector, callback) => {
+    useEffect(() => {
+        var _a;
+        const handleDragEvent = (event) => {
+            callback(event);
+        };
+        (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener(keyEvent, handleDragEvent);
+        return () => {
+            var _a;
+            (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.removeEventListener(keyEvent, handleDragEvent);
+        };
+    }, [keyEvent, selector, callback]);
+};

package/es/hooks/useDropFile.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const useDropFile: (selector: string, callback: (event: DragEvent) => void) => void;

package/es/hooks/useDropFile.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { useDragEvent } from './useDragEvent';
+export const useDropFile = (selector, callback) => {
+    useDragEvent('dragenter', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('dragover', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('dragexit', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('drop', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+        callback(e);
+    });
+};

package/es/hooks/useKeyEventCanvas.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const useKeyEventCanvas: (keyEvent: 'keydown' \| 'keyup', callback: (event: KeyboardEvent) => void) => void;

package/es/hooks/useKeyEventCanvas.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+export const useKeyEventCanvas = (keyEvent, callback) => {
+    const lastDownTarget = useRef(null);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (lastDownTarget.current.localName !== 'canvas')
+                return;
+            callback(event);
+        };
+        const setLastDownTarget = event => {
+            lastDownTarget.current = event.target;
+        };
+        document.addEventListener('mousedown', setLastDownTarget);
+        document.addEventListener(keyEvent, handleKeyDown);
+        return () => {
+            document.removeEventListener(keyEvent, handleKeyDown);
+            document.removeEventListener('mousedown', setLastDownTarget);
+        };
+    }, [keyEvent, callback]);
+};

package/es/utils/common.d.ts CHANGED Viewed

@@ -84,4 +84,4 @@ export declare const simplifyString: (str: string) => string;
  */
 export declare const searchStringQuery: (str: string, queryStr: string) => boolean;
 export declare const isExistedImage: (imageUrl: string) => boolean;
-export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string | undefined;
+export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string;

package/es/utils/common.js CHANGED Viewed

@@ -476,10 +476,13 @@ export const isExistedImage = (imageUrl) => {
     }
 };
 export const getUrlNoCache = (url = '', cacheValue = 0) => {
-    const urlNoCache = url
-        ? url.includes('nocache') || url.startsWith('data:image')
-            ? url
-            : `${url}?nocache=${cacheValue}`
-        : undefined;
+    let urlNoCache = url;
+    if (urlNoCache.includes('nocache') || url.startsWith('data:image')) {
+        urlNoCache = url;
+    }
+    else {
+        const newUrl = new URL(url);
+        newUrl.searchParams.append('nocache', `${cacheValue}`);
+    }
     return urlNoCache;
 };

package/es/utils/templateListing.js CHANGED Viewed

@@ -10,5 +10,20 @@ export const getCategoriesFromObjectTemplate = (objectTemplate) => {
     });
     return categories;
 };
-export const checkShowSkeletonBaseUrl = (url = '') => `${url || ''}`.includes('base64-img') &&
-    ['jn_thumb_', 'v_thumb_'].every(prefix => !`${url || ''}`.includes(prefix));
+export const checkShowSkeletonBaseUrl = (url = '') => {
+    if (url.includes('type')) {
+        switch (true) {
+            case url.includes('media'):
+                return true;
+            case url.includes('email'): {
+                return false;
+            }
+            default:
+                return false;
+        }
+    }
+    else {
+        return (`${url || ''}`.includes('base64-img') &&
+            ['jn_thumb_', 'v_thumb_'].every(prefix => !`${url || ''}`.includes(prefix)));
+    }
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.232",
+  "version": "1.3.5-beta.234",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -93,6 +93,7 @@
     "i18next": "21.6.16",
     "i18next-browser-languagedetector": "6.1.2",
     "immer": "3.0.0",
+    "konva": "^9.3.6",
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "pako": "2.0.4",
@@ -103,6 +104,7 @@
     "react-cookie": "^7.1.4",
     "react-draggable": "^4.4.5",
     "react-frame-component": "^5.2.6",
+    "react-konva": "^18.2.10",
     "react-markdown": "^8.0.7",
     "react-resizable": "^3.0.5",
     "react-syntax-highlighter": "^15.5.0",
@@ -115,7 +117,8 @@
     "uniqid": "^5.4.0",
     "use-context-selector": "^1.4.4",
     "use-immer": "^0.9.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.2",
+    "use-image": "^1.1.1"
   },
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",