@antscorp/antsomi-ui 1.3.3-beta.2 → 1.3.3-beta.21

package/es/components/molecules/CaptureScreen/CaptureScreen.js

@@ -1,834 +1,834 @@
-// Libraries
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import clsx from 'clsx';
-// import html2canvas from 'html2canvas';
-import { toPng } from 'html-to-image';
-import { isEmpty } from 'lodash';
-// import { PositionCursorProps } from './components/Cursor/types';
-// Styled
-import { BorderOverlay, BoxColor, ContainerCapture, Divider, DrawerGroupItem, DrawerGroups, FlexCenter, FlexColumn, Heading, ImageIcon, OutlineRemoveContainer, PopupBySide, WrapperColor, WrapperDraggable, WrapperIcon, WrapperRemoveBtn, } from './styled';
-// Components
-import Icon from '@antscorp/icons';
-import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
-import { PopupDraggable } from '../PopupDraggable';
-import { Cursor } from './components/Cursor';
-import { CommentBox } from './components/CommentBox';
-import { Progress } from 'antd';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { DRAW_ACTION_LIST, DRAW_KEYS, COMMENT_BOX_DIMENSION_FIXED, OFFSET_CENTER, IGNORE_DRAW_ID_LIST, styleContainer, RECORD_KEYS, SIZE_ADJUST, styleRecordItem, styleDrawItem, } from './constants';
-import { ATTACH_KEYS } from '@antscorp/antsomi-ui/es/components/organism/Help/constants';
-// Hooks
-import { useImageEditor } from './hooks/useImageEditor';
-// Utils
-import { generateUniqueId, initDefaultColors } from './utils';
-import { ArrowGrowIcon, AudioRecordIcon, CheckSlimIcon, CommentIcon, FreeDrawIcon, HighlightIcon, InvisibleIcon, MuteIcon, PauseIcon, StopRecordIcon, } from '@antscorp/antsomi-ui/es/components/icons';
-const CaptureScreen = (props) => {
-    var _a, _b, _c;
-    const { captureType, src, defaultPositions, recorderConfigs, callback } = props;
-    const [isShowCursor, setIsShowCursor] = useState(false);
-    const [drawItemActive, setDrawItemActive] = useState('');
-    const [recordingItemActive, setRecordingItemActive] = useState('');
-    const [isMouseDowning, setIsMouseDowning] = useState(false);
-    const [isRecording, setIsRecording] = useState(false);
-    const [drawColors, setDrawColors] = useState(initDefaultColors());
-    const [commentInfoList, setCommentInfoList] = useState([]);
-    const [seconds, setSeconds] = useState(0);
-    const [minutes, setMinutes] = useState(0);
-    const [percentage, setPercentage] = useState(0);
-    const imageEditorRef = useRef(null);
-    const cursorRef = useRef(null);
-    const outlineRemoveContainerRef = useRef(null);
-    const wrapperRemoveBtnRef = useRef(null);
-    const timerIdRef = useRef(null);
-    const { editorInstance, canvasEditor, methods } = useImageEditor(imageEditorRef, {
-        preventCreateInstance: captureType !== ATTACH_KEYS.CAPTURE,
-    });
-    const { activateShapeMode, getSettings } = methods;
-    const handleMouseMove = useCallback(event => {
-        var _a;
-        event.preventDefault();
-        event.stopPropagation();
-        const positionX = event === null || event === void 0 ? void 0 : event.clientX;
-        const positionY = event === null || event === void 0 ? void 0 : event.clientY;
-        if (!isEmpty(cursorRef.current)) {
-            const cursorRefTemp = cursorRef.current;
-            cursorRefTemp.style.left = `${positionX}px`;
-            cursorRefTemp.style.top = `${positionY}px`;
-            (_a = imageEditorRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('hide-cursor');
-        }
-    }, []);
-    useEffect(() => {
-        let canvasUpper;
-        if (!isEmpty(editorInstance) && captureType === ATTACH_KEYS.CAPTURE) {
-            canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
-            if (canvasUpper &&
-                [DRAW_KEYS.PEN, DRAW_KEYS.COMMENT, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
-                canvasUpper.addEventListener('mousemove', handleMouseMove);
-            }
-        }
-        return () => {
-            if (canvasUpper) {
-                canvasUpper.removeEventListener('mousemove', handleMouseMove);
-            }
-        };
-    }, [editorInstance, captureType, drawItemActive, handleMouseMove]);
-    useEffect(() => {
-        let timerId;
-        if (isEmpty(drawItemActive) && isMouseDowning && captureType === ATTACH_KEYS.CAPTURE) {
-            timerId = setTimeout(() => {
-                setIsMouseDowning(false);
-            }, 300);
-        }
-        return () => {
-            clearTimeout(timerId);
-        };
-    }, [drawItemActive, isMouseDowning, captureType]);
-    useEffect(() => {
-        if (captureType === ATTACH_KEYS.CAPTURE) {
-            const canvasContainer = document.querySelector('.tui-image-editor-canvas-container');
-            const handleAddComment = event => {
-                try {
-                    event.stopPropagation();
-                    const canvasUpper = canvasContainer.querySelector('.upper-canvas');
-                    if (!canvasUpper)
-                        return;
-                    const pointerPosX = event.clientX;
-                    const pointerPosY = event.clientY;
-                    const clientX = canvasUpper.clientWidth;
-                    const clientY = canvasUpper.clientHeight;
-                    let isReverseAxisX = false;
-                    let isReverseAxisY = false;
-                    if (clientX - pointerPosX < COMMENT_BOX_DIMENSION_FIXED.width) {
-                        isReverseAxisX = true;
-                    }
-                    if (clientY - pointerPosY < COMMENT_BOX_DIMENSION_FIXED.height) {
-                        isReverseAxisY = true;
-                    }
-                    if (imageEditorRef &&
-                        imageEditorRef.current &&
-                        imageEditorRef.current.classList.contains('hide-cursor')) {
-                        setIsShowCursor(false);
-                        imageEditorRef.current.classList.remove('hide-cursor');
-                        canvasUpper.removeEventListener('mousemove', handleMouseMove);
-                    }
-                    setCommentInfoList(prevCommentList => {
-                        if (prevCommentList.length > 0 &&
-                            !prevCommentList[prevCommentList.length - 1].isSubmitted)
-                            return prevCommentList;
-                        const randomId = generateUniqueId();
-                        // Căn giữa CommentPoint Component theo cursor click
-                        const left = pointerPosX - OFFSET_CENTER;
-                        const top = pointerPosY - OFFSET_CENTER;
-                        const temp = [...prevCommentList];
-                        let newLatestCommentIndex = 1;
-                        if (temp.length > 0) {
-                            newLatestCommentIndex = temp[temp.length - 1].index + 1;
-                        }
-                        temp.push({
-                            left,
-                            top,
-                            content: '',
-                            id: randomId,
-                            color: drawColors[DRAW_KEYS.COMMENT],
-                            index: newLatestCommentIndex,
-                            isSubmitted: false,
-                            isReverseAxisX,
-                            isReverseAxisY,
-                        });
-                        return temp;
-                    });
-                }
-                catch (error) {
-                    // eslint-disable-next-line no-console
-                    console.log('error :>', error);
-                }
-            };
-            try {
-                if (canvasContainer && drawItemActive === DRAW_KEYS.COMMENT) {
-                    canvasContainer.addEventListener('mousedown', handleAddComment);
-                }
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.log('error :>', error);
-            }
-            return () => {
-                canvasContainer.removeEventListener('mousedown', handleAddComment);
-            };
-        }
-    }, [drawItemActive, drawColors, captureType, handleMouseMove]);
-    useEffect(() => {
-        let handleMouseUp;
-        let canvasUpper;
-        if (!isEmpty(editorInstance) && captureType === ATTACH_KEYS.CAPTURE) {
-            canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
-            if (canvasUpper) {
-                handleMouseUp = () => {
-                    setIsMouseDowning(false);
-                    if ([DRAW_KEYS.PEN, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
-                        canvasUpper.addEventListener('mousemove', handleMouseMove);
-                    }
-                };
-                canvasUpper.addEventListener('mouseup', handleMouseUp);
-            }
-            // reset lại draw type đang active và đưa draw về mode NORMAL sau khi add 1 object
-            editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.on('objectAdded', _data => {
-                setIsMouseDowning(false);
-            });
-        }
-        return () => {
-            if (canvasUpper && handleMouseUp) {
-                canvasUpper.removeEventListener('mouseup', handleMouseUp);
-            }
-        };
-    }, [editorInstance, captureType, drawItemActive, handleMouseMove]);
-    const handleClickDrawItem = useCallback((item, stroke) => {
-        try {
-            // Không được chuyển type draw khi chưa submit comment
-            if (commentInfoList.length > 0 && !commentInfoList[commentInfoList.length - 1].isSubmitted)
-                return;
-            const { key } = item;
-            if (!key)
-                return;
-            if (drawItemActive !== key) {
-                setDrawItemActive(key);
-            }
-            if (isEmpty(editorInstance))
-                return;
-            const color = stroke || drawColors[key];
-            const settings = getSettings(key, color);
-            switch (key) {
-                case DRAW_KEYS.CANCEL: {
-                    callback('CLOSE_DRAWER');
-                    break;
-                }
-                case DRAW_KEYS.HIGHLIGHT:
-                case DRAW_KEYS.HIDE: {
-                    if (key === DRAW_KEYS.HIGHLIGHT) {
-                        setIsShowCursor(true);
-                    }
-                    if (imageEditorRef &&
-                        imageEditorRef.current &&
-                        imageEditorRef.current.classList.contains('hide-cursor') &&
-                        key === DRAW_KEYS.HIDE) {
-                        imageEditorRef.current.classList.remove('hide-cursor');
-                    }
-                    const shapeType = [DRAW_KEYS.HIGHLIGHT, DRAW_KEYS.HIDE].includes(key)
-                        ? 'rect'
-                        : 'circle';
-                    editorInstance.setDrawingShape(shapeType, settings);
-                    activateShapeMode();
-                    break;
-                }
-                case DRAW_KEYS.PEN: {
-                    setIsShowCursor(true);
-                    editorInstance.stopDrawingMode();
-                    editorInstance.changeCursor('none');
-                    editorInstance.startDrawingMode('FREE_DRAWING', settings);
-                    break;
-                }
-                case DRAW_KEYS.ARROW: {
-                    setIsShowCursor(false);
-                    if (imageEditorRef &&
-                        imageEditorRef.current &&
-                        imageEditorRef.current.classList.contains('hide-cursor')) {
-                        imageEditorRef.current.classList.remove('hide-cursor');
-                    }
-                    editorInstance.stopDrawingMode();
-                    editorInstance.startDrawingMode('LINE_DRAWING', settings);
-                    break;
-                }
-                case DRAW_KEYS.DONE: {
-                    setIsShowCursor(false);
-                    if (imageEditorRef &&
-                        imageEditorRef.current &&
-                        imageEditorRef.current.classList.contains('hide-cursor')) {
-                        imageEditorRef.current.classList.remove('hide-cursor');
-                    }
-                    editorInstance.deactivateAll();
-                    editorInstance.stopDrawingMode();
-                    setDrawItemActive('');
-                    toPng(imageEditorRef.current, {
-                        filter: (element) => ![
-                            IGNORE_DRAW_ID_LIST.DRAW_ACTIONS,
-                            IGNORE_DRAW_ID_LIST.ICON_CLOSE,
-                            IGNORE_DRAW_ID_LIST.BORDER_OVERLAY,
-                        ].some(id => element.id === id),
-                    })
-                        .then(dataURL => {
-                        const imageName = editorInstance.getImageName();
-                        if (typeof callback === 'function') {
-                            callback('ON_DRAWER_DONE', { imageName, dataURL });
-                        }
-                    })
-                        .catch(error => {
-                        // eslint-disable-next-line no-console
-                        console.error('oops, something went wrong!', error);
-                    });
-                    // html2canvas(imageEditorRef.current as HTMLElement, {
-                    //   allowTaint: false,
-                    // ignoreElements: (element: Element) => {
-                    //   if (
-                    //     (
-                    //       [IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, IGNORE_DRAW_ID_LIST.ICON_CLOSE] as string[]
-                    //     ).includes(element.id)
-                    //   ) {
-                    //     return true;
-                    //   }
-                    //   return false;
-                    // },
-                    // }).then(canvas => {
-                    //   const dataURL = canvas.toDataURL('image/png');
-                    // console.log('insideee.dev - dataUrl :>', dataURL);
-                    // const imageName = editorInstance.getImageName();
-                    // if (typeof callback === 'function') {
-                    //   callback('ON_DRAWER_DONE', { imageName, dataURL });
-                    // }
-                    // });
-                    break;
-                }
-                case DRAW_KEYS.COMMENT: {
-                    setIsShowCursor(true);
-                    editorInstance.stopDrawingMode();
-                    editorInstance.changeCursor('cell');
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-    }, [
-        activateShapeMode,
-        callback,
-        commentInfoList,
-        drawColors,
-        drawItemActive,
-        editorInstance,
-        getSettings,
-    ]);
-    useEffect(() => {
-        try {
-            if (!isEmpty(editorInstance) && captureType === ATTACH_KEYS.CAPTURE) {
-                editorInstance.on('mousedown', () => {
-                    const canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
-                    if (canvasUpper) {
-                        canvasUpper.removeEventListener('mousemove', handleMouseMove);
-                    }
-                    if (editorInstance.getDrawingMode() !== 'NORMAL') {
-                        setIsMouseDowning(true);
-                    }
-                });
-            }
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.log(err);
-        }
-    }, [captureType, editorInstance, handleMouseMove, handleClickDrawItem]);
-    useEffect(() => {
-        if (captureType === ATTACH_KEYS.CAPTURE &&
-            isEmpty(drawItemActive) &&
-            !isEmpty(editorInstance)) {
-            handleClickDrawItem(DRAW_ACTION_LIST[0]);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [editorInstance]);
-    const handleSetColorByKey = (e, drawItem, itemColor) => {
-        e.stopPropagation();
-        // Không được chuyển type draw khi chưa submit comment
-        if (commentInfoList.length > 0 && !commentInfoList[commentInfoList.length - 1].isSubmitted)
-            return;
-        const { key } = drawItem;
-        setDrawColors(Object.assign(Object.assign({}, drawColors), { [key]: itemColor }));
-        if (isEmpty(editorInstance))
-            return;
-        handleClickDrawItem(drawItem, itemColor);
-    };
-    const handleChangeComment = (type, dataIn) => {
-        const commentIndex = commentInfoList.findIndex(item => item.id === dataIn.id);
-        if (commentIndex === -1)
-            return;
-        const tempCommentList = [...commentInfoList];
-        if (type === 'CHANGE_CONTENT') {
-            tempCommentList.splice(commentIndex, 1, dataIn);
-        }
-        else if (type === 'SUBMIT') {
-            const temp = Object.assign(Object.assign({}, dataIn), { isSubmitted: true });
-            tempCommentList.splice(commentIndex, 1, temp);
-        }
-        else if (type === 'CANCEL') {
-            tempCommentList.splice(commentIndex, 1);
-        }
-        setCommentInfoList(tempCommentList);
-        if (['SUBMIT', 'CANCEL'].includes(type) && imageEditorRef && imageEditorRef.current) {
-            const canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
-            if (canvasUpper &&
-                [DRAW_KEYS.COMMENT, DRAW_KEYS.HIGHLIGHT, DRAW_KEYS.PEN].includes(drawItemActive)) {
-                canvasUpper.addEventListener('mousemove', handleMouseMove);
-                imageEditorRef.current.classList.add('hide-cursor');
-                setIsShowCursor(true);
-            }
-        }
-    };
-    useEffect(() => {
-        if (!isEmpty(recorderConfigs) && recorderConfigs.recorder) {
-            recorderConfigs.recorder.onerror = (event) => {
-                // eslint-disable-next-line no-console
-                console.error('MediaRecorder error:', event.error);
-                setIsRecording(false);
-            };
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [recorderConfigs.recorder]);
-    useEffect(() => () => {
-        if (typeof callback === 'function') {
-            callback('RESET_POSITION_DRAG');
-        }
-        if (timerIdRef && timerIdRef.current) {
-            clearTimeout(timerIdRef.current);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const handleActionRecorderByType = useCallback((type) => {
-        var _a, _b;
-        try {
-            if (isEmpty(recorderConfigs) ||
-                !recorderConfigs.recorder ||
-                !recorderConfigs.streamTracks ||
-                !((_a = recorderConfigs.streamTracks) === null || _a === void 0 ? void 0 : _a.desktopStream) ||
-                !((_b = recorderConfigs.streamTracks) === null || _b === void 0 ? void 0 : _b.voiceStream))
-                return;
-            switch (type) {
-                case RECORD_KEYS.START: {
-                    const recordActionEle = document.getElementById(IGNORE_DRAW_ID_LIST.DRAW_ACTIONS);
-                    if (recordActionEle && (defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record)) {
-                        timerIdRef.current = setTimeout(() => {
-                            recordActionEle.style.transform = `translate(${defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record.x}px, ${defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record.y}px)`;
-                        }, 10);
-                    }
-                    recorderConfigs.recorder.start();
-                    setRecordingItemActive(type);
-                    setIsRecording(true);
-                    break;
-                }
-                case RECORD_KEYS.STOP: {
-                    if (['paused', 'recording'].includes(recorderConfigs.recorder.state)) {
-                        recorderConfigs.recorder.stop();
-                        setIsRecording(false);
-                    }
-                    const { desktopStream, voiceStream } = recorderConfigs.streamTracks;
-                    desktopStream.getTracks().forEach(track => track.stop());
-                    voiceStream.getTracks().forEach(track => track.stop());
-                    if (typeof callback === 'function') {
-                        callback('STOP_RECORDER', recorderConfigs);
-                    }
-                    setRecordingItemActive(type);
-                    break;
-                }
-                case RECORD_KEYS.PAUSE: {
-                    if (recorderConfigs.recorder.state === 'paused') {
-                        recorderConfigs.recorder.resume();
-                    }
-                    else {
-                        recorderConfigs.recorder.pause();
-                    }
-                    setRecordingItemActive(prev => (prev === RECORD_KEYS.PAUSE ? '' : type));
-                    break;
-                }
-                // case RECORD_KEYS.RESUME: {
-                //   setRecordingItemActive(type);
-                //   recorderConfigs.recorder.resume();
-                //   break;
-                // }
-                case RECORD_KEYS.MUTED:
-                case RECORD_KEYS.UNMUTE: {
-                    const { isMute, streamTracks } = recorderConfigs;
-                    const { voiceStream } = streamTracks;
-                    const audioTracks = voiceStream.getAudioTracks();
-                    audioTracks.forEach(track => {
-                        track.enabled = isMute;
-                    });
-                    setRecordingItemActive(type);
-                    callback('ON_CHANGE_MUTE');
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-    }, [callback, isRecording, recorderConfigs]);
-    useEffect(() => {
-        let intervalId;
-        const totalDuration = 2 * 60;
-        if (isRecording) {
-            intervalId = setInterval(() => {
-                var _a;
-                if (((_a = recorderConfigs.recorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
-                    setSeconds(prevSeconds => (prevSeconds === 59 ? 0 : prevSeconds + 1));
-                    if (seconds === 59) {
-                        setMinutes(prevMinutes => prevMinutes + 1);
-                    }
-                    const currentSeconds = minutes * 60 + seconds;
-                    const progressPercentage = (currentSeconds / totalDuration) * 100;
-                    setPercentage(Number(progressPercentage.toFixed(2)));
-                    if (minutes === 2 && seconds === 0) {
-                        clearInterval(intervalId);
-                        handleActionRecorderByType(RECORD_KEYS.STOP);
-                    }
-                }
-            }, 1000);
-        }
-        return () => {
-            if (intervalId) {
-                clearInterval(intervalId);
-            }
-        };
-    }, [
-        handleActionRecorderByType,
-        isRecording,
-        minutes,
-        (_a = recorderConfigs.recorder) === null || _a === void 0 ? void 0 : _a.state,
-        seconds,
-        percentage,
-    ]);
-    useEffect(() => {
-        let ignoreHoveringList;
-        let handleMouseEnterDrawActions;
-        let handleMouseOutDrawActions;
-        if (!isMouseDowning &&
-            captureType === ATTACH_KEYS.CAPTURE &&
-            [DRAW_KEYS.PEN, DRAW_KEYS.COMMENT, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
-            ignoreHoveringList = document.querySelectorAll(`.${IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER}`);
-            if (ignoreHoveringList.length > 0) {
-                handleMouseEnterDrawActions = event => {
-                    event.stopPropagation();
-                    if ((drawItemActive === DRAW_KEYS.COMMENT && commentInfoList.length === 0) ||
-                        (drawItemActive === DRAW_KEYS.COMMENT &&
-                            commentInfoList.length > 0 &&
-                            commentInfoList[commentInfoList.length - 1].isSubmitted) ||
-                        [DRAW_KEYS.PEN, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
-                        setIsShowCursor(false);
-                    }
-                };
-                handleMouseOutDrawActions = event => {
-                    event.stopPropagation();
-                    if ((drawItemActive === DRAW_KEYS.COMMENT && commentInfoList.length === 0) ||
-                        (drawItemActive === DRAW_KEYS.COMMENT &&
-                            commentInfoList.length > 0 &&
-                            commentInfoList[commentInfoList.length - 1].isSubmitted) ||
-                        [DRAW_KEYS.PEN, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
-                        setIsShowCursor(true);
-                    }
-                };
-                ignoreHoveringList.forEach(ignoreItem => {
-                    ignoreItem.addEventListener('mouseenter', handleMouseEnterDrawActions);
-                    ignoreItem.addEventListener('mouseleave', handleMouseOutDrawActions);
-                });
-            }
-        }
-        return () => {
-            if (!isEmpty(ignoreHoveringList)) {
-                ignoreHoveringList.forEach(ignoreItem => {
-                    ignoreItem.removeEventListener('mouseenter', handleMouseEnterDrawActions);
-                    ignoreItem.removeEventListener('mouseleave', handleMouseOutDrawActions);
-                });
-            }
-        };
-    }, [captureType, commentInfoList, drawItemActive, isMouseDowning]);
-    const setPositionOutlineRemoveContainer = useCallback(obj => {
-        const outlineRemoveContainer = outlineRemoveContainerRef.current || null;
-        const removeBtn = wrapperRemoveBtnRef.current || null;
-        const absCoords = {
-            left: obj.left,
-            top: obj.top,
-        };
-        const objWidth = obj.width * (obj.scaleX || 1);
-        const objHeight = obj.height * (obj.scaleY || 1);
-        if (outlineRemoveContainer) {
-            outlineRemoveContainer.style.width = `${SIZE_ADJUST * objWidth + obj.strokeWidth}px`;
-            outlineRemoveContainer.style.height = `${SIZE_ADJUST * objHeight + obj.strokeWidth}px`;
-            outlineRemoveContainer.style.left = `${absCoords.left}px`;
-            outlineRemoveContainer.style.top = `${absCoords.top}px`;
-        }
-        if (removeBtn) {
-            removeBtn.style.left = `${absCoords.left + objWidth / 2}px`;
-            removeBtn.style.top = `${absCoords.top - objHeight / 2}px`;
-        }
-    }, []);
-    // Handle Hover and remove object in canvas
-    useEffect(() => {
-        let handleDelete;
-        let handleRemoveBtnMouseEnter;
-        let handleRemoveBtnMouseLeave;
-        let currentObjectDrew = null;
-        let activeObject = null;
-        let isMouseDown = false;
-        const btnRemove = wrapperRemoveBtnRef.current || null;
-        const outlineRemoveContainer = outlineRemoveContainerRef.current || null;
-        if (captureType === ATTACH_KEYS.CAPTURE && canvasEditor) {
-            handleDelete = () => {
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                currentObjectDrew && canvasEditor.remove(currentObjectDrew);
-                if (btnRemove && outlineRemoveContainer) {
-                    btnRemove.style.display = 'none';
-                    outlineRemoveContainer.style.display = 'none';
-                }
-            };
-            handleRemoveBtnMouseEnter = () => {
-                if (!currentObjectDrew)
-                    return;
-                if (btnRemove && !isMouseDown) {
-                    btnRemove.style.display = 'flex';
-                }
-                setPositionOutlineRemoveContainer(currentObjectDrew);
-                if (outlineRemoveContainer && !isMouseDown) {
-                    outlineRemoveContainer.style.border = '2px dashed #707070';
-                    outlineRemoveContainer.style.display = 'block';
-                }
-                canvasEditor.renderAll();
-            };
-            handleRemoveBtnMouseLeave = () => {
-                if (!currentObjectDrew)
-                    return;
-                if (btnRemove && outlineRemoveContainer) {
-                    btnRemove.style.display = 'none';
-                    outlineRemoveContainer.style.border = 'none';
-                }
-            };
-            if (btnRemove) {
-                btnRemove.addEventListener('click', handleDelete);
-                btnRemove.addEventListener('mouseenter', handleRemoveBtnMouseEnter);
-                btnRemove.addEventListener('mouseleave', handleRemoveBtnMouseLeave);
-            }
-            canvasEditor.on('mouse:over', event => {
-                if (!event.target || activeObject === event.target)
-                    return;
-                const currentObj = event.target;
-                currentObjectDrew = currentObj;
-                setPositionOutlineRemoveContainer(currentObj);
-                if (!isMouseDown) {
-                    if (btnRemove) {
-                        btnRemove.style.display = 'flex';
-                    }
-                    if (outlineRemoveContainer) {
-                        outlineRemoveContainer.style.border = '2px dashed #707070';
-                        outlineRemoveContainer.style.display = 'block';
-                    }
-                }
-                canvasEditor.renderAll();
-            });
-            canvasEditor.on('mouse:down', () => {
-                isMouseDown = true;
-                // eslint-disable-next-line no-underscore-dangle
-                activeObject = canvasEditor._activeObject;
-                if (btnRemove && outlineRemoveContainer && activeObject) {
-                    btnRemove.style.display = 'none';
-                    outlineRemoveContainer.style.border = 'none';
-                }
-            });
-            canvasEditor.on('mouse:up', () => {
-                isMouseDown = false;
-            });
-            canvasEditor.on('mouse:out', e => {
-                if (!e.target)
-                    return;
-                if (btnRemove && outlineRemoveContainer) {
-                    btnRemove.style.display = 'none';
-                    outlineRemoveContainer.style.border = 'none';
-                }
-            });
-            canvasEditor.on('object:moving', () => {
-                if (btnRemove && outlineRemoveContainer) {
-                    btnRemove.style.display = 'none';
-                    outlineRemoveContainer.style.border = 'none';
-                }
-            });
-        }
-        return () => {
-            if (btnRemove) {
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                handleDelete && btnRemove.removeEventListener('click', handleDelete);
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                handleRemoveBtnMouseEnter &&
-                    btnRemove.removeEventListener('mouseenter', handleRemoveBtnMouseEnter);
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                handleRemoveBtnMouseLeave &&
-                    btnRemove.removeEventListener('mouseleave', handleRemoveBtnMouseLeave);
-            }
-        };
-    }, [captureType, canvasEditor, setPositionOutlineRemoveContainer]);
-    useEffect(() => {
-        if (captureType === ATTACH_KEYS.RECORD && isRecording) {
-            const drawActions = document.getElementById(IGNORE_DRAW_ID_LIST.DRAW_ACTIONS);
-            if (drawActions) {
-                drawActions.style.transform = 'translate(169px, 0px)';
-            }
-        }
-    }, [isRecording, captureType]);
-    const numberCommentCursor = useMemo(() => {
-        if (drawItemActive === DRAW_KEYS.COMMENT) {
-            if (!commentInfoList[commentInfoList.length - 1])
-                return 1;
-            return commentInfoList[commentInfoList.length - 1].index + 1;
-        }
-        return null;
-    }, [commentInfoList, drawItemActive]);
-    const renderIcon = (name, style) => ({
-        'icon-ants-highlight': React.createElement(HighlightIcon, { style: style }),
-        'icon-ants-comment': React.createElement(CommentIcon, { style: style }),
-        'icon-ants-free-draw': React.createElement(FreeDrawIcon, { style: style }),
-        'icon-ants-arrow-grow': React.createElement(ArrowGrowIcon, { style: style }),
-        'icon-ants-invisible': React.createElement(InvisibleIcon, { style: style }),
-        'icon-ants-check-slim': React.createElement(CheckSlimIcon, { style: style }),
-        'icon-ants-audio-record': React.createElement(AudioRecordIcon, { style: style }),
-        'icon-ants-mute': React.createElement(MuteIcon, { style: style }),
-        'icon-ants-pause': React.createElement(PauseIcon, { style: style }),
-        'icon-ants-stop-record': React.createElement(StopRecordIcon, { style: style }),
-    }[name]);
-    const renderDrawActionList = () => DRAW_ACTION_LIST.map(drawItem => {
-        var _a, _b, _c, _d;
-        if ((drawItem === null || drawItem === void 0 ? void 0 : drawItem.type) === 'divider') {
-            return React.createElement(Divider, { isVertical: true, key: drawItem.key, style: { width: styleDrawItem.SMALL } });
-        }
-        return (React.createElement(DrawerGroupItem, { key: drawItem.key, className: clsx({
-                active: drawItemActive === drawItem.key,
-                'hide-hover': [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key),
-            }), style: {
-                height: styleDrawItem.SMALL,
-                marginLeft: [DRAW_KEYS.HIGHLIGHT, DRAW_KEYS.DONE].includes(drawItem.key)
-                    ? '15px'
-                    : '8px',
-                marginRight: drawItem.key === DRAW_KEYS.HIDE ? '15px' : '8px',
-                width: ![DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key)
-                    ? styleDrawItem.MEDIUM
-                    : 'auto',
-            }, onClick: () => handleClickDrawItem(drawItem) },
-            React.createElement(FlexColumn, null, [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key) ? (React.createElement(Button, { type: drawItem.key === DRAW_KEYS.DONE ? 'primary' : 'default', style: { fontWeight: 'bold', flexDirection: 'row-reverse' }, icon: drawItem.key === DRAW_KEYS.DONE
-                    ? renderIcon('icon-ants-check-slim', {
-                        fontSize: '24px',
-                        color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`,
-                    })
-                    : undefined }, drawItem.label)) : (renderIcon(drawItem.icon, {
-                maxWidth: '24px',
-                fill: `${drawItemActive === drawItem.key
-                    ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary
-                    : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}`,
-            }))),
-            drawItem.isShowColorList && (React.createElement(PopupBySide, { className: "toggle-popup-by-side" },
-                React.createElement(Heading, null, drawItem.label),
-                React.createElement(WrapperColor, null, (_d = drawItem.colorList) === null || _d === void 0 ? void 0 : _d.map(itemColor => {
-                    var _a;
-                    return (React.createElement(BoxColor, { key: `${drawItem.key}-${itemColor}`, bgColor: itemColor, onClick: e => handleSetColorByKey(e, drawItem, itemColor) }, drawColors[drawItem.key] === itemColor && (
-                    // <Icon
-                    //   type="icon-ants-check-slim"
-                    //   style={{ color: `${THEME.token?.bw0}`, fontSize: '20px' }}
-                    // />
-                    React.createElement(CheckSlimIcon, { style: {
-                            fill: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`,
-                            maxWidth: '20px',
-                        } }))));
-                }))))));
-    });
-    const renderRecordActionList = () => {
-        var _a, _b, _c, _d;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(WrapperDraggable, { className: "cursor", style: { height: '100%' } },
-                React.createElement(FlexColumn, null,
-                    React.createElement(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5)' } }))),
-            React.createElement(Divider, { isVertical: true }),
-            !isRecording ? (React.createElement(DrawerGroupItem, { style: styleRecordItem, className: clsx({ active: recordingItemActive === RECORD_KEYS.STOP }), onClick: () => handleActionRecorderByType(RECORD_KEYS.START) },
-                React.createElement(FlexColumn, null,
-                    React.createElement(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon" })))) : (React.createElement(React.Fragment, null,
-                React.createElement(DrawerGroupItem, { className: clsx({
-                        active: recordingItemActive === RECORD_KEYS.STOP,
-                    }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.STOP) },
-                    React.createElement(FlexColumn, null, renderIcon('icon-ants-stop-record', {
-                        maxWidth: '24px',
-                        fill: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red8}`,
-                    }))),
-                React.createElement(DrawerGroupItem
-                // key={recordItem.key}
-                , { 
-                    // key={recordItem.key}
-                    className: clsx({
-                        active: recordingItemActive === RECORD_KEYS.PAUSE,
-                    }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.PAUSE) },
-                    React.createElement(FlexColumn, null, recordingItemActive === RECORD_KEYS.PAUSE ? (React.createElement(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon", style: { width: 22, height: 22 } })) : (renderIcon('icon-ants-pause', {
-                        maxWidth: '24px',
-                        fill: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon}`,
-                    })))))),
-            recorderConfigs && recorderConfigs.isMute ? (React.createElement(DrawerGroupItem, { className: clsx({
-                    active: recordingItemActive === RECORD_KEYS.UNMUTE,
-                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.UNMUTE) },
-                React.createElement(FlexColumn, null, renderIcon('icon-ants-mute', {
-                    maxWidth: '24px',
-                    fill: `${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}`,
-                })))) : (React.createElement(DrawerGroupItem, { className: clsx({
-                    active: recordingItemActive === RECORD_KEYS.MUTED,
-                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.MUTED) },
-                React.createElement(FlexColumn, null, renderIcon('icon-ants-audio-record', {
-                    maxWidth: '24px',
-                    fill: `${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon}`,
-                })))),
-            isRecording && (React.createElement(DrawerGroupItem, { style: Object.assign(Object.assign({}, styleRecordItem), { width: 130 }), className: "timer-recording" },
-                React.createElement(FlexCenter, null,
-                    React.createElement(Progress, { percent: percentage, showInfo: false, style: { width: 100, margin: 0 } }),
-                    React.createElement(Heading, { style: { whiteSpace: 'nowrap' } }, `${minutes}:${seconds
-                        .toString()
-                        .padStart(2, '0')}`))))));
-    };
-    const renderPopupAction = (type) => {
-        if (type === ATTACH_KEYS.RECORD) {
-            return (React.createElement(PopupDraggable, { bounds: "body", name: ATTACH_KEYS.RECORD, defaultPosition: defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: styleContainer, callback: callback }, renderRecordActionList()));
-        }
-        return (!isMouseDowning && (React.createElement(PopupDraggable, { defaultPosition: defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.capture, bounds: "body", name: ATTACH_KEYS.CAPTURE, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: Object.assign(Object.assign({}, styleContainer), { height: styleDrawItem.LARGE, minHeight: styleDrawItem.LARGE, padding: '0px 5px' }), callback: callback },
-            React.createElement(DrawerGroups, { id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, style: { height: styleDrawItem.LARGE } },
-                React.createElement(WrapperDraggable, { className: "cursor", style: {
-                        height: styleDrawItem.SMALL,
-                        width: styleDrawItem.MEDIUM,
-                        marginRight: 6,
-                        padding: 'unset',
-                    } },
-                    React.createElement(FlexColumn, null,
-                        React.createElement(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5' } }))),
-                React.createElement(Divider, { isVertical: true, style: { width: styleDrawItem.SMALL } }),
-                renderDrawActionList()))));
-    };
-    const renderCommentList = (commentList) => commentList.map(commentItem => (React.createElement(CommentBox, { key: commentItem.id, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, boxDimension: COMMENT_BOX_DIMENSION_FIXED, offset: OFFSET_CENTER, info: commentItem, onChangeComment: handleChangeComment })));
-    return (React.createElement(ContainerCapture, { imageURL: src, isRecord: captureType === ATTACH_KEYS.RECORD, ref: imageEditorRef },
-        React.createElement(Cursor, { drawItemType: drawItemActive, cursorRef: cursorRef, isShowCursor: isShowCursor && !isMouseDowning, isPointerBox: drawItemActive === DRAW_KEYS.COMMENT, bgColor: drawColors[drawItemActive], offset: OFFSET_CENTER }, numberCommentCursor),
-        captureType === ATTACH_KEYS.CAPTURE && (React.createElement(React.Fragment, null,
-            renderCommentList(commentInfoList),
-            React.createElement(BorderOverlay, { id: IGNORE_DRAW_ID_LIST.BORDER_OVERLAY, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER }),
-            React.createElement(WrapperIcon, { id: IGNORE_DRAW_ID_LIST.ICON_CLOSE, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, 
-                // isRecord={captureType === ATTACH_KEYS.RECORD}
-                onClick: () => callback('CLOSE_DRAWER') },
-                React.createElement(Icon, { type: "icon-ants-remove-slim", style: { color: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`, fontSize: '12px' } })),
-            React.createElement(OutlineRemoveContainer, { ref: outlineRemoveContainerRef }),
-            React.createElement(WrapperRemoveBtn, { ref: wrapperRemoveBtnRef, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER },
-                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}` } })))),
-        renderPopupAction(captureType)));
-};
-CaptureScreen.defaultProps = {
-    isOpen: false,
-    src: '',
-    alt: 'CaptureScreen',
-    defaultPositions: {
-        capture: null,
-        record: null,
-    },
-    callback: () => { },
-};
-export { CaptureScreen };
+// Libraries
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+// import html2canvas from 'html2canvas';
+import { toPng } from 'html-to-image';
+import { isEmpty } from 'lodash';
+// import { PositionCursorProps } from './components/Cursor/types';
+// Styled
+import { BorderOverlay, BoxColor, ContainerCapture, Divider, DrawerGroupItem, DrawerGroups, FlexCenter, FlexColumn, Heading, ImageIcon, OutlineRemoveContainer, PopupBySide, WrapperColor, WrapperDraggable, WrapperIcon, WrapperRemoveBtn, } from './styled';
+// Components
+import Icon from '@antscorp/icons';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopupDraggable } from '../PopupDraggable';
+import { Cursor } from './components/Cursor';
+import { CommentBox } from './components/CommentBox';
+import { Progress } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { DRAW_ACTION_LIST, DRAW_KEYS, COMMENT_BOX_DIMENSION_FIXED, OFFSET_CENTER, IGNORE_DRAW_ID_LIST, styleContainer, RECORD_KEYS, SIZE_ADJUST, styleRecordItem, styleDrawItem, } from './constants';
+import { ATTACH_KEYS } from '@antscorp/antsomi-ui/es/components/organism/Help/constants';
+// Hooks
+import { useImageEditor } from './hooks/useImageEditor';
+// Utils
+import { generateUniqueId, initDefaultColors } from './utils';
+import { ArrowGrowIcon, AudioRecordIcon, CheckSlimIcon, CommentIcon, FreeDrawIcon, HighlightIcon, InvisibleIcon, MuteIcon, PauseIcon, StopRecordIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+const CaptureScreen = (props) => {
+    var _a, _b, _c;
+    const { captureType, src, defaultPositions, recorderConfigs, callback } = props;
+    const [isShowCursor, setIsShowCursor] = useState(false);
+    const [drawItemActive, setDrawItemActive] = useState('');
+    const [recordingItemActive, setRecordingItemActive] = useState('');
+    const [isMouseDowning, setIsMouseDowning] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const [drawColors, setDrawColors] = useState(initDefaultColors());
+    const [commentInfoList, setCommentInfoList] = useState([]);
+    const [seconds, setSeconds] = useState(0);
+    const [minutes, setMinutes] = useState(0);
+    const [percentage, setPercentage] = useState(0);
+    const imageEditorRef = useRef(null);
+    const cursorRef = useRef(null);
+    const outlineRemoveContainerRef = useRef(null);
+    const wrapperRemoveBtnRef = useRef(null);
+    const timerIdRef = useRef(null);
+    const { editorInstance, canvasEditor, methods } = useImageEditor(imageEditorRef, {
+        preventCreateInstance: captureType !== ATTACH_KEYS.CAPTURE,
+    });
+    const { activateShapeMode, getSettings } = methods;
+    const handleMouseMove = useCallback(event => {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        const positionX = event === null || event === void 0 ? void 0 : event.clientX;
+        const positionY = event === null || event === void 0 ? void 0 : event.clientY;
+        if (!isEmpty(cursorRef.current)) {
+            const cursorRefTemp = cursorRef.current;
+            cursorRefTemp.style.left = `${positionX}px`;
+            cursorRefTemp.style.top = `${positionY}px`;
+            (_a = imageEditorRef.current) === null || _a === void 0 ? void 0 : _a.classList.add('hide-cursor');
+        }
+    }, []);
+    useEffect(() => {
+        let canvasUpper;
+        if (!isEmpty(editorInstance) && captureType === ATTACH_KEYS.CAPTURE) {
+            canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
+            if (canvasUpper &&
+                [DRAW_KEYS.PEN, DRAW_KEYS.COMMENT, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
+                canvasUpper.addEventListener('mousemove', handleMouseMove);
+            }
+        }
+        return () => {
+            if (canvasUpper) {
+                canvasUpper.removeEventListener('mousemove', handleMouseMove);
+            }
+        };
+    }, [editorInstance, captureType, drawItemActive, handleMouseMove]);
+    useEffect(() => {
+        let timerId;
+        if (isEmpty(drawItemActive) && isMouseDowning && captureType === ATTACH_KEYS.CAPTURE) {
+            timerId = setTimeout(() => {
+                setIsMouseDowning(false);
+            }, 300);
+        }
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, [drawItemActive, isMouseDowning, captureType]);
+    useEffect(() => {
+        if (captureType === ATTACH_KEYS.CAPTURE) {
+            const canvasContainer = document.querySelector('.tui-image-editor-canvas-container');
+            const handleAddComment = event => {
+                try {
+                    event.stopPropagation();
+                    const canvasUpper = canvasContainer.querySelector('.upper-canvas');
+                    if (!canvasUpper)
+                        return;
+                    const pointerPosX = event.clientX;
+                    const pointerPosY = event.clientY;
+                    const clientX = canvasUpper.clientWidth;
+                    const clientY = canvasUpper.clientHeight;
+                    let isReverseAxisX = false;
+                    let isReverseAxisY = false;
+                    if (clientX - pointerPosX < COMMENT_BOX_DIMENSION_FIXED.width) {
+                        isReverseAxisX = true;
+                    }
+                    if (clientY - pointerPosY < COMMENT_BOX_DIMENSION_FIXED.height) {
+                        isReverseAxisY = true;
+                    }
+                    if (imageEditorRef &&
+                        imageEditorRef.current &&
+                        imageEditorRef.current.classList.contains('hide-cursor')) {
+                        setIsShowCursor(false);
+                        imageEditorRef.current.classList.remove('hide-cursor');
+                        canvasUpper.removeEventListener('mousemove', handleMouseMove);
+                    }
+                    setCommentInfoList(prevCommentList => {
+                        if (prevCommentList.length > 0 &&
+                            !prevCommentList[prevCommentList.length - 1].isSubmitted)
+                            return prevCommentList;
+                        const randomId = generateUniqueId();
+                        // Căn giữa CommentPoint Component theo cursor click
+                        const left = pointerPosX - OFFSET_CENTER;
+                        const top = pointerPosY - OFFSET_CENTER;
+                        const temp = [...prevCommentList];
+                        let newLatestCommentIndex = 1;
+                        if (temp.length > 0) {
+                            newLatestCommentIndex = temp[temp.length - 1].index + 1;
+                        }
+                        temp.push({
+                            left,
+                            top,
+                            content: '',
+                            id: randomId,
+                            color: drawColors[DRAW_KEYS.COMMENT],
+                            index: newLatestCommentIndex,
+                            isSubmitted: false,
+                            isReverseAxisX,
+                            isReverseAxisY,
+                        });
+                        return temp;
+                    });
+                }
+                catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.log('error :>', error);
+                }
+            };
+            try {
+                if (canvasContainer && drawItemActive === DRAW_KEYS.COMMENT) {
+                    canvasContainer.addEventListener('mousedown', handleAddComment);
+                }
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.log('error :>', error);
+            }
+            return () => {
+                canvasContainer.removeEventListener('mousedown', handleAddComment);
+            };
+        }
+    }, [drawItemActive, drawColors, captureType, handleMouseMove]);
+    useEffect(() => {
+        let handleMouseUp;
+        let canvasUpper;
+        if (!isEmpty(editorInstance) && captureType === ATTACH_KEYS.CAPTURE) {
+            canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
+            if (canvasUpper) {
+                handleMouseUp = () => {
+                    setIsMouseDowning(false);
+                    if ([DRAW_KEYS.PEN, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
+                        canvasUpper.addEventListener('mousemove', handleMouseMove);
+                    }
+                };
+                canvasUpper.addEventListener('mouseup', handleMouseUp);
+            }
+            // reset lại draw type đang active và đưa draw về mode NORMAL sau khi add 1 object
+            editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.on('objectAdded', _data => {
+                setIsMouseDowning(false);
+            });
+        }
+        return () => {
+            if (canvasUpper && handleMouseUp) {
+                canvasUpper.removeEventListener('mouseup', handleMouseUp);
+            }
+        };
+    }, [editorInstance, captureType, drawItemActive, handleMouseMove]);
+    const handleClickDrawItem = useCallback((item, stroke) => {
+        try {
+            // Không được chuyển type draw khi chưa submit comment
+            if (commentInfoList.length > 0 && !commentInfoList[commentInfoList.length - 1].isSubmitted)
+                return;
+            const { key } = item;
+            if (!key)
+                return;
+            if (drawItemActive !== key) {
+                setDrawItemActive(key);
+            }
+            if (isEmpty(editorInstance))
+                return;
+            const color = stroke || drawColors[key];
+            const settings = getSettings(key, color);
+            switch (key) {
+                case DRAW_KEYS.CANCEL: {
+                    callback('CLOSE_DRAWER');
+                    break;
+                }
+                case DRAW_KEYS.HIGHLIGHT:
+                case DRAW_KEYS.HIDE: {
+                    if (key === DRAW_KEYS.HIGHLIGHT) {
+                        setIsShowCursor(true);
+                    }
+                    if (imageEditorRef &&
+                        imageEditorRef.current &&
+                        imageEditorRef.current.classList.contains('hide-cursor') &&
+                        key === DRAW_KEYS.HIDE) {
+                        imageEditorRef.current.classList.remove('hide-cursor');
+                    }
+                    const shapeType = [DRAW_KEYS.HIGHLIGHT, DRAW_KEYS.HIDE].includes(key)
+                        ? 'rect'
+                        : 'circle';
+                    editorInstance.setDrawingShape(shapeType, settings);
+                    activateShapeMode();
+                    break;
+                }
+                case DRAW_KEYS.PEN: {
+                    setIsShowCursor(true);
+                    editorInstance.stopDrawingMode();
+                    editorInstance.changeCursor('none');
+                    editorInstance.startDrawingMode('FREE_DRAWING', settings);
+                    break;
+                }
+                case DRAW_KEYS.ARROW: {
+                    setIsShowCursor(false);
+                    if (imageEditorRef &&
+                        imageEditorRef.current &&
+                        imageEditorRef.current.classList.contains('hide-cursor')) {
+                        imageEditorRef.current.classList.remove('hide-cursor');
+                    }
+                    editorInstance.stopDrawingMode();
+                    editorInstance.startDrawingMode('LINE_DRAWING', settings);
+                    break;
+                }
+                case DRAW_KEYS.DONE: {
+                    setIsShowCursor(false);
+                    if (imageEditorRef &&
+                        imageEditorRef.current &&
+                        imageEditorRef.current.classList.contains('hide-cursor')) {
+                        imageEditorRef.current.classList.remove('hide-cursor');
+                    }
+                    editorInstance.deactivateAll();
+                    editorInstance.stopDrawingMode();
+                    setDrawItemActive('');
+                    toPng(imageEditorRef.current, {
+                        filter: (element) => ![
+                            IGNORE_DRAW_ID_LIST.DRAW_ACTIONS,
+                            IGNORE_DRAW_ID_LIST.ICON_CLOSE,
+                            IGNORE_DRAW_ID_LIST.BORDER_OVERLAY,
+                        ].some(id => element.id === id),
+                    })
+                        .then(dataURL => {
+                        const imageName = editorInstance.getImageName();
+                        if (typeof callback === 'function') {
+                            callback('ON_DRAWER_DONE', { imageName, dataURL });
+                        }
+                    })
+                        .catch(error => {
+                        // eslint-disable-next-line no-console
+                        console.error('oops, something went wrong!', error);
+                    });
+                    // html2canvas(imageEditorRef.current as HTMLElement, {
+                    //   allowTaint: false,
+                    // ignoreElements: (element: Element) => {
+                    //   if (
+                    //     (
+                    //       [IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, IGNORE_DRAW_ID_LIST.ICON_CLOSE] as string[]
+                    //     ).includes(element.id)
+                    //   ) {
+                    //     return true;
+                    //   }
+                    //   return false;
+                    // },
+                    // }).then(canvas => {
+                    //   const dataURL = canvas.toDataURL('image/png');
+                    // console.log('insideee.dev - dataUrl :>', dataURL);
+                    // const imageName = editorInstance.getImageName();
+                    // if (typeof callback === 'function') {
+                    //   callback('ON_DRAWER_DONE', { imageName, dataURL });
+                    // }
+                    // });
+                    break;
+                }
+                case DRAW_KEYS.COMMENT: {
+                    setIsShowCursor(true);
+                    editorInstance.stopDrawingMode();
+                    editorInstance.changeCursor('cell');
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log('error :>', error);
+        }
+    }, [
+        activateShapeMode,
+        callback,
+        commentInfoList,
+        drawColors,
+        drawItemActive,
+        editorInstance,
+        getSettings,
+    ]);
+    useEffect(() => {
+        try {
+            if (!isEmpty(editorInstance) && captureType === ATTACH_KEYS.CAPTURE) {
+                editorInstance.on('mousedown', () => {
+                    const canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
+                    if (canvasUpper) {
+                        canvasUpper.removeEventListener('mousemove', handleMouseMove);
+                    }
+                    if (editorInstance.getDrawingMode() !== 'NORMAL') {
+                        setIsMouseDowning(true);
+                    }
+                });
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.log(err);
+        }
+    }, [captureType, editorInstance, handleMouseMove, handleClickDrawItem]);
+    useEffect(() => {
+        if (captureType === ATTACH_KEYS.CAPTURE &&
+            isEmpty(drawItemActive) &&
+            !isEmpty(editorInstance)) {
+            handleClickDrawItem(DRAW_ACTION_LIST[0]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editorInstance]);
+    const handleSetColorByKey = (e, drawItem, itemColor) => {
+        e.stopPropagation();
+        // Không được chuyển type draw khi chưa submit comment
+        if (commentInfoList.length > 0 && !commentInfoList[commentInfoList.length - 1].isSubmitted)
+            return;
+        const { key } = drawItem;
+        setDrawColors(Object.assign(Object.assign({}, drawColors), { [key]: itemColor }));
+        if (isEmpty(editorInstance))
+            return;
+        handleClickDrawItem(drawItem, itemColor);
+    };
+    const handleChangeComment = (type, dataIn) => {
+        const commentIndex = commentInfoList.findIndex(item => item.id === dataIn.id);
+        if (commentIndex === -1)
+            return;
+        const tempCommentList = [...commentInfoList];
+        if (type === 'CHANGE_CONTENT') {
+            tempCommentList.splice(commentIndex, 1, dataIn);
+        }
+        else if (type === 'SUBMIT') {
+            const temp = Object.assign(Object.assign({}, dataIn), { isSubmitted: true });
+            tempCommentList.splice(commentIndex, 1, temp);
+        }
+        else if (type === 'CANCEL') {
+            tempCommentList.splice(commentIndex, 1);
+        }
+        setCommentInfoList(tempCommentList);
+        if (['SUBMIT', 'CANCEL'].includes(type) && imageEditorRef && imageEditorRef.current) {
+            const canvasUpper = document.querySelector('.tui-image-editor-canvas-container .upper-canvas');
+            if (canvasUpper &&
+                [DRAW_KEYS.COMMENT, DRAW_KEYS.HIGHLIGHT, DRAW_KEYS.PEN].includes(drawItemActive)) {
+                canvasUpper.addEventListener('mousemove', handleMouseMove);
+                imageEditorRef.current.classList.add('hide-cursor');
+                setIsShowCursor(true);
+            }
+        }
+    };
+    useEffect(() => {
+        if (!isEmpty(recorderConfigs) && recorderConfigs.recorder) {
+            recorderConfigs.recorder.onerror = (event) => {
+                // eslint-disable-next-line no-console
+                console.error('MediaRecorder error:', event.error);
+                setIsRecording(false);
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [recorderConfigs.recorder]);
+    useEffect(() => () => {
+        if (typeof callback === 'function') {
+            callback('RESET_POSITION_DRAG');
+        }
+        if (timerIdRef && timerIdRef.current) {
+            clearTimeout(timerIdRef.current);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const handleActionRecorderByType = useCallback((type) => {
+        var _a, _b;
+        try {
+            if (isEmpty(recorderConfigs) ||
+                !recorderConfigs.recorder ||
+                !recorderConfigs.streamTracks ||
+                !((_a = recorderConfigs.streamTracks) === null || _a === void 0 ? void 0 : _a.desktopStream) ||
+                !((_b = recorderConfigs.streamTracks) === null || _b === void 0 ? void 0 : _b.voiceStream))
+                return;
+            switch (type) {
+                case RECORD_KEYS.START: {
+                    const recordActionEle = document.getElementById(IGNORE_DRAW_ID_LIST.DRAW_ACTIONS);
+                    if (recordActionEle && (defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record)) {
+                        timerIdRef.current = setTimeout(() => {
+                            recordActionEle.style.transform = `translate(${defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record.x}px, ${defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record.y}px)`;
+                        }, 10);
+                    }
+                    recorderConfigs.recorder.start();
+                    setRecordingItemActive(type);
+                    setIsRecording(true);
+                    break;
+                }
+                case RECORD_KEYS.STOP: {
+                    if (['paused', 'recording'].includes(recorderConfigs.recorder.state)) {
+                        recorderConfigs.recorder.stop();
+                        setIsRecording(false);
+                    }
+                    const { desktopStream, voiceStream } = recorderConfigs.streamTracks;
+                    desktopStream.getTracks().forEach(track => track.stop());
+                    voiceStream.getTracks().forEach(track => track.stop());
+                    if (typeof callback === 'function') {
+                        callback('STOP_RECORDER', recorderConfigs);
+                    }
+                    setRecordingItemActive(type);
+                    break;
+                }
+                case RECORD_KEYS.PAUSE: {
+                    if (recorderConfigs.recorder.state === 'paused') {
+                        recorderConfigs.recorder.resume();
+                    }
+                    else {
+                        recorderConfigs.recorder.pause();
+                    }
+                    setRecordingItemActive(prev => (prev === RECORD_KEYS.PAUSE ? '' : type));
+                    break;
+                }
+                // case RECORD_KEYS.RESUME: {
+                //   setRecordingItemActive(type);
+                //   recorderConfigs.recorder.resume();
+                //   break;
+                // }
+                case RECORD_KEYS.MUTED:
+                case RECORD_KEYS.UNMUTE: {
+                    const { isMute, streamTracks } = recorderConfigs;
+                    const { voiceStream } = streamTracks;
+                    const audioTracks = voiceStream.getAudioTracks();
+                    audioTracks.forEach(track => {
+                        track.enabled = isMute;
+                    });
+                    setRecordingItemActive(type);
+                    callback('ON_CHANGE_MUTE');
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log('error :>', error);
+        }
+    }, [callback, isRecording, recorderConfigs]);
+    useEffect(() => {
+        let intervalId;
+        const totalDuration = 2 * 60;
+        if (isRecording) {
+            intervalId = setInterval(() => {
+                var _a;
+                if (((_a = recorderConfigs.recorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording') {
+                    setSeconds(prevSeconds => (prevSeconds === 59 ? 0 : prevSeconds + 1));
+                    if (seconds === 59) {
+                        setMinutes(prevMinutes => prevMinutes + 1);
+                    }
+                    const currentSeconds = minutes * 60 + seconds;
+                    const progressPercentage = (currentSeconds / totalDuration) * 100;
+                    setPercentage(Number(progressPercentage.toFixed(2)));
+                    if (minutes === 2 && seconds === 0) {
+                        clearInterval(intervalId);
+                        handleActionRecorderByType(RECORD_KEYS.STOP);
+                    }
+                }
+            }, 1000);
+        }
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
+        };
+    }, [
+        handleActionRecorderByType,
+        isRecording,
+        minutes,
+        (_a = recorderConfigs.recorder) === null || _a === void 0 ? void 0 : _a.state,
+        seconds,
+        percentage,
+    ]);
+    useEffect(() => {
+        let ignoreHoveringList;
+        let handleMouseEnterDrawActions;
+        let handleMouseOutDrawActions;
+        if (!isMouseDowning &&
+            captureType === ATTACH_KEYS.CAPTURE &&
+            [DRAW_KEYS.PEN, DRAW_KEYS.COMMENT, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
+            ignoreHoveringList = document.querySelectorAll(`.${IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER}`);
+            if (ignoreHoveringList.length > 0) {
+                handleMouseEnterDrawActions = event => {
+                    event.stopPropagation();
+                    if ((drawItemActive === DRAW_KEYS.COMMENT && commentInfoList.length === 0) ||
+                        (drawItemActive === DRAW_KEYS.COMMENT &&
+                            commentInfoList.length > 0 &&
+                            commentInfoList[commentInfoList.length - 1].isSubmitted) ||
+                        [DRAW_KEYS.PEN, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
+                        setIsShowCursor(false);
+                    }
+                };
+                handleMouseOutDrawActions = event => {
+                    event.stopPropagation();
+                    if ((drawItemActive === DRAW_KEYS.COMMENT && commentInfoList.length === 0) ||
+                        (drawItemActive === DRAW_KEYS.COMMENT &&
+                            commentInfoList.length > 0 &&
+                            commentInfoList[commentInfoList.length - 1].isSubmitted) ||
+                        [DRAW_KEYS.PEN, DRAW_KEYS.HIGHLIGHT].includes(drawItemActive)) {
+                        setIsShowCursor(true);
+                    }
+                };
+                ignoreHoveringList.forEach(ignoreItem => {
+                    ignoreItem.addEventListener('mouseenter', handleMouseEnterDrawActions);
+                    ignoreItem.addEventListener('mouseleave', handleMouseOutDrawActions);
+                });
+            }
+        }
+        return () => {
+            if (!isEmpty(ignoreHoveringList)) {
+                ignoreHoveringList.forEach(ignoreItem => {
+                    ignoreItem.removeEventListener('mouseenter', handleMouseEnterDrawActions);
+                    ignoreItem.removeEventListener('mouseleave', handleMouseOutDrawActions);
+                });
+            }
+        };
+    }, [captureType, commentInfoList, drawItemActive, isMouseDowning]);
+    const setPositionOutlineRemoveContainer = useCallback(obj => {
+        const outlineRemoveContainer = outlineRemoveContainerRef.current || null;
+        const removeBtn = wrapperRemoveBtnRef.current || null;
+        const absCoords = {
+            left: obj.left,
+            top: obj.top,
+        };
+        const objWidth = obj.width * (obj.scaleX || 1);
+        const objHeight = obj.height * (obj.scaleY || 1);
+        if (outlineRemoveContainer) {
+            outlineRemoveContainer.style.width = `${SIZE_ADJUST * objWidth + obj.strokeWidth}px`;
+            outlineRemoveContainer.style.height = `${SIZE_ADJUST * objHeight + obj.strokeWidth}px`;
+            outlineRemoveContainer.style.left = `${absCoords.left}px`;
+            outlineRemoveContainer.style.top = `${absCoords.top}px`;
+        }
+        if (removeBtn) {
+            removeBtn.style.left = `${absCoords.left + objWidth / 2}px`;
+            removeBtn.style.top = `${absCoords.top - objHeight / 2}px`;
+        }
+    }, []);
+    // Handle Hover and remove object in canvas
+    useEffect(() => {
+        let handleDelete;
+        let handleRemoveBtnMouseEnter;
+        let handleRemoveBtnMouseLeave;
+        let currentObjectDrew = null;
+        let activeObject = null;
+        let isMouseDown = false;
+        const btnRemove = wrapperRemoveBtnRef.current || null;
+        const outlineRemoveContainer = outlineRemoveContainerRef.current || null;
+        if (captureType === ATTACH_KEYS.CAPTURE && canvasEditor) {
+            handleDelete = () => {
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                currentObjectDrew && canvasEditor.remove(currentObjectDrew);
+                if (btnRemove && outlineRemoveContainer) {
+                    btnRemove.style.display = 'none';
+                    outlineRemoveContainer.style.display = 'none';
+                }
+            };
+            handleRemoveBtnMouseEnter = () => {
+                if (!currentObjectDrew)
+                    return;
+                if (btnRemove && !isMouseDown) {
+                    btnRemove.style.display = 'flex';
+                }
+                setPositionOutlineRemoveContainer(currentObjectDrew);
+                if (outlineRemoveContainer && !isMouseDown) {
+                    outlineRemoveContainer.style.border = '2px dashed #707070';
+                    outlineRemoveContainer.style.display = 'block';
+                }
+                canvasEditor.renderAll();
+            };
+            handleRemoveBtnMouseLeave = () => {
+                if (!currentObjectDrew)
+                    return;
+                if (btnRemove && outlineRemoveContainer) {
+                    btnRemove.style.display = 'none';
+                    outlineRemoveContainer.style.border = 'none';
+                }
+            };
+            if (btnRemove) {
+                btnRemove.addEventListener('click', handleDelete);
+                btnRemove.addEventListener('mouseenter', handleRemoveBtnMouseEnter);
+                btnRemove.addEventListener('mouseleave', handleRemoveBtnMouseLeave);
+            }
+            canvasEditor.on('mouse:over', event => {
+                if (!event.target || activeObject === event.target)
+                    return;
+                const currentObj = event.target;
+                currentObjectDrew = currentObj;
+                setPositionOutlineRemoveContainer(currentObj);
+                if (!isMouseDown) {
+                    if (btnRemove) {
+                        btnRemove.style.display = 'flex';
+                    }
+                    if (outlineRemoveContainer) {
+                        outlineRemoveContainer.style.border = '2px dashed #707070';
+                        outlineRemoveContainer.style.display = 'block';
+                    }
+                }
+                canvasEditor.renderAll();
+            });
+            canvasEditor.on('mouse:down', () => {
+                isMouseDown = true;
+                // eslint-disable-next-line no-underscore-dangle
+                activeObject = canvasEditor._activeObject;
+                if (btnRemove && outlineRemoveContainer && activeObject) {
+                    btnRemove.style.display = 'none';
+                    outlineRemoveContainer.style.border = 'none';
+                }
+            });
+            canvasEditor.on('mouse:up', () => {
+                isMouseDown = false;
+            });
+            canvasEditor.on('mouse:out', e => {
+                if (!e.target)
+                    return;
+                if (btnRemove && outlineRemoveContainer) {
+                    btnRemove.style.display = 'none';
+                    outlineRemoveContainer.style.border = 'none';
+                }
+            });
+            canvasEditor.on('object:moving', () => {
+                if (btnRemove && outlineRemoveContainer) {
+                    btnRemove.style.display = 'none';
+                    outlineRemoveContainer.style.border = 'none';
+                }
+            });
+        }
+        return () => {
+            if (btnRemove) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                handleDelete && btnRemove.removeEventListener('click', handleDelete);
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                handleRemoveBtnMouseEnter &&
+                    btnRemove.removeEventListener('mouseenter', handleRemoveBtnMouseEnter);
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                handleRemoveBtnMouseLeave &&
+                    btnRemove.removeEventListener('mouseleave', handleRemoveBtnMouseLeave);
+            }
+        };
+    }, [captureType, canvasEditor, setPositionOutlineRemoveContainer]);
+    useEffect(() => {
+        if (captureType === ATTACH_KEYS.RECORD && isRecording) {
+            const drawActions = document.getElementById(IGNORE_DRAW_ID_LIST.DRAW_ACTIONS);
+            if (drawActions) {
+                drawActions.style.transform = 'translate(169px, 0px)';
+            }
+        }
+    }, [isRecording, captureType]);
+    const numberCommentCursor = useMemo(() => {
+        if (drawItemActive === DRAW_KEYS.COMMENT) {
+            if (!commentInfoList[commentInfoList.length - 1])
+                return 1;
+            return commentInfoList[commentInfoList.length - 1].index + 1;
+        }
+        return null;
+    }, [commentInfoList, drawItemActive]);
+    const renderIcon = (name, style) => ({
+        'icon-ants-highlight': React.createElement(HighlightIcon, { style: style }),
+        'icon-ants-comment': React.createElement(CommentIcon, { style: style }),
+        'icon-ants-free-draw': React.createElement(FreeDrawIcon, { style: style }),
+        'icon-ants-arrow-grow': React.createElement(ArrowGrowIcon, { style: style }),
+        'icon-ants-invisible': React.createElement(InvisibleIcon, { style: style }),
+        'icon-ants-check-slim': React.createElement(CheckSlimIcon, { style: style }),
+        'icon-ants-audio-record': React.createElement(AudioRecordIcon, { style: style }),
+        'icon-ants-mute': React.createElement(MuteIcon, { style: style }),
+        'icon-ants-pause': React.createElement(PauseIcon, { style: style }),
+        'icon-ants-stop-record': React.createElement(StopRecordIcon, { style: style }),
+    }[name]);
+    const renderDrawActionList = () => DRAW_ACTION_LIST.map(drawItem => {
+        var _a, _b, _c, _d;
+        if ((drawItem === null || drawItem === void 0 ? void 0 : drawItem.type) === 'divider') {
+            return React.createElement(Divider, { isVertical: true, key: drawItem.key, style: { width: styleDrawItem.SMALL } });
+        }
+        return (React.createElement(DrawerGroupItem, { key: drawItem.key, className: clsx({
+                active: drawItemActive === drawItem.key,
+                'hide-hover': [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key),
+            }), style: {
+                height: styleDrawItem.SMALL,
+                marginLeft: [DRAW_KEYS.HIGHLIGHT, DRAW_KEYS.DONE].includes(drawItem.key)
+                    ? '15px'
+                    : '8px',
+                marginRight: drawItem.key === DRAW_KEYS.HIDE ? '15px' : '8px',
+                width: ![DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key)
+                    ? styleDrawItem.MEDIUM
+                    : 'auto',
+            }, onClick: () => handleClickDrawItem(drawItem) },
+            React.createElement(FlexColumn, null, [DRAW_KEYS.DONE, DRAW_KEYS.CANCEL].includes(drawItem.key) ? (React.createElement(Button, { type: drawItem.key === DRAW_KEYS.DONE ? 'primary' : 'default', style: { fontWeight: 'bold', flexDirection: 'row-reverse' }, icon: drawItem.key === DRAW_KEYS.DONE
+                    ? renderIcon('icon-ants-check-slim', {
+                        fontSize: '24px',
+                        color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`,
+                    })
+                    : undefined }, drawItem.label)) : (renderIcon(drawItem.icon, {
+                maxWidth: '24px',
+                fill: `${drawItemActive === drawItem.key
+                    ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary
+                    : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}`,
+            }))),
+            drawItem.isShowColorList && (React.createElement(PopupBySide, { className: "toggle-popup-by-side" },
+                React.createElement(Heading, null, drawItem.label),
+                React.createElement(WrapperColor, null, (_d = drawItem.colorList) === null || _d === void 0 ? void 0 : _d.map(itemColor => {
+                    var _a;
+                    return (React.createElement(BoxColor, { key: `${drawItem.key}-${itemColor}`, bgColor: itemColor, onClick: e => handleSetColorByKey(e, drawItem, itemColor) }, drawColors[drawItem.key] === itemColor && (
+                    // <Icon
+                    //   type="icon-ants-check-slim"
+                    //   style={{ color: `${THEME.token?.bw0}`, fontSize: '20px' }}
+                    // />
+                    React.createElement(CheckSlimIcon, { style: {
+                            fill: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`,
+                            maxWidth: '20px',
+                        } }))));
+                }))))));
+    });
+    const renderRecordActionList = () => {
+        var _a, _b, _c, _d;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(WrapperDraggable, { className: "cursor", style: { height: '100%' } },
+                React.createElement(FlexColumn, null,
+                    React.createElement(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5)' } }))),
+            React.createElement(Divider, { isVertical: true }),
+            !isRecording ? (React.createElement(DrawerGroupItem, { style: styleRecordItem, className: clsx({ active: recordingItemActive === RECORD_KEYS.STOP }), onClick: () => handleActionRecorderByType(RECORD_KEYS.START) },
+                React.createElement(FlexColumn, null,
+                    React.createElement(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon" })))) : (React.createElement(React.Fragment, null,
+                React.createElement(DrawerGroupItem, { className: clsx({
+                        active: recordingItemActive === RECORD_KEYS.STOP,
+                    }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.STOP) },
+                    React.createElement(FlexColumn, null, renderIcon('icon-ants-stop-record', {
+                        maxWidth: '24px',
+                        fill: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red8}`,
+                    }))),
+                React.createElement(DrawerGroupItem
+                // key={recordItem.key}
+                , { 
+                    // key={recordItem.key}
+                    className: clsx({
+                        active: recordingItemActive === RECORD_KEYS.PAUSE,
+                    }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.PAUSE) },
+                    React.createElement(FlexColumn, null, recordingItemActive === RECORD_KEYS.PAUSE ? (React.createElement(ImageIcon, { src: "https://st-media-template.antsomi.com/upload/2023/06/16/440878f6-0cc1-465e-b978-44bd4f348199.png", alt: "start-recording-icon", style: { width: 22, height: 22 } })) : (renderIcon('icon-ants-pause', {
+                        maxWidth: '24px',
+                        fill: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon}`,
+                    })))))),
+            recorderConfigs && recorderConfigs.isMute ? (React.createElement(DrawerGroupItem, { className: clsx({
+                    active: recordingItemActive === RECORD_KEYS.UNMUTE,
+                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.UNMUTE) },
+                React.createElement(FlexColumn, null, renderIcon('icon-ants-mute', {
+                    maxWidth: '24px',
+                    fill: `${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}`,
+                })))) : (React.createElement(DrawerGroupItem, { className: clsx({
+                    active: recordingItemActive === RECORD_KEYS.MUTED,
+                }), style: styleRecordItem, onClick: () => handleActionRecorderByType(RECORD_KEYS.MUTED) },
+                React.createElement(FlexColumn, null, renderIcon('icon-ants-audio-record', {
+                    maxWidth: '24px',
+                    fill: `${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon}`,
+                })))),
+            isRecording && (React.createElement(DrawerGroupItem, { style: Object.assign(Object.assign({}, styleRecordItem), { width: 130 }), className: "timer-recording" },
+                React.createElement(FlexCenter, null,
+                    React.createElement(Progress, { percent: percentage, showInfo: false, style: { width: 100, margin: 0 } }),
+                    React.createElement(Heading, { style: { whiteSpace: 'nowrap' } }, `${minutes}:${seconds
+                        .toString()
+                        .padStart(2, '0')}`))))));
+    };
+    const renderPopupAction = (type) => {
+        if (type === ATTACH_KEYS.RECORD) {
+            return (React.createElement(PopupDraggable, { bounds: "body", name: ATTACH_KEYS.RECORD, defaultPosition: defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.record, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: styleContainer, callback: callback }, renderRecordActionList()));
+        }
+        return (!isMouseDowning && (React.createElement(PopupDraggable, { defaultPosition: defaultPositions === null || defaultPositions === void 0 ? void 0 : defaultPositions.capture, bounds: "body", name: ATTACH_KEYS.CAPTURE, isHiddenClose: true, isHiddenResizing: true, id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, styleContainer: Object.assign(Object.assign({}, styleContainer), { height: styleDrawItem.LARGE, minHeight: styleDrawItem.LARGE, padding: '0px 5px' }), callback: callback },
+            React.createElement(DrawerGroups, { id: IGNORE_DRAW_ID_LIST.DRAW_ACTIONS, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, style: { height: styleDrawItem.LARGE } },
+                React.createElement(WrapperDraggable, { className: "cursor", style: {
+                        height: styleDrawItem.SMALL,
+                        width: styleDrawItem.MEDIUM,
+                        marginRight: 6,
+                        padding: 'unset',
+                    } },
+                    React.createElement(FlexColumn, null,
+                        React.createElement(Icon, { type: "icon-ants-double-three-dots", style: { fontSize: '24px', color: 'rgba(89, 89, 89, 0.5' } }))),
+                React.createElement(Divider, { isVertical: true, style: { width: styleDrawItem.SMALL } }),
+                renderDrawActionList()))));
+    };
+    const renderCommentList = (commentList) => commentList.map(commentItem => (React.createElement(CommentBox, { key: commentItem.id, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, boxDimension: COMMENT_BOX_DIMENSION_FIXED, offset: OFFSET_CENTER, info: commentItem, onChangeComment: handleChangeComment })));
+    return (React.createElement(ContainerCapture, { imageURL: src, isRecord: captureType === ATTACH_KEYS.RECORD, ref: imageEditorRef },
+        React.createElement(Cursor, { drawItemType: drawItemActive, cursorRef: cursorRef, isShowCursor: isShowCursor && !isMouseDowning, isPointerBox: drawItemActive === DRAW_KEYS.COMMENT, bgColor: drawColors[drawItemActive], offset: OFFSET_CENTER }, numberCommentCursor),
+        captureType === ATTACH_KEYS.CAPTURE && (React.createElement(React.Fragment, null,
+            renderCommentList(commentInfoList),
+            React.createElement(BorderOverlay, { id: IGNORE_DRAW_ID_LIST.BORDER_OVERLAY, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER }),
+            React.createElement(WrapperIcon, { id: IGNORE_DRAW_ID_LIST.ICON_CLOSE, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER, 
+                // isRecord={captureType === ATTACH_KEYS.RECORD}
+                onClick: () => callback('CLOSE_DRAWER') },
+                React.createElement(Icon, { type: "icon-ants-remove-slim", style: { color: `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`, fontSize: '12px' } })),
+            React.createElement(OutlineRemoveContainer, { ref: outlineRemoveContainerRef }),
+            React.createElement(WrapperRemoveBtn, { ref: wrapperRemoveBtnRef, className: IGNORE_DRAW_ID_LIST.CLASS_PREVENT_HOVER },
+                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon}` } })))),
+        renderPopupAction(captureType)));
+};
+CaptureScreen.defaultProps = {
+    isOpen: false,
+    src: '',
+    alt: 'CaptureScreen',
+    defaultPositions: {
+        capture: null,
+        record: null,
+    },
+    callback: () => { },
+};
+export { CaptureScreen };