@antscorp/antsomi-ui 1.3.2 → 1.3.3

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

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