@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.2

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

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