@antscorp/antsomi-ui 1.3.2 → 1.3.3

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

@@ -0,0 +1,80 @@
+// Libraries
+import React, { useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
+// Components
+import Icon from '@antscorp/icons';
+import { Space, Button } from 'antd';
+// Constanst
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+// Styled
+import { CommentBoxed, CommentPoint, RoundedDashed, TextArea, WrapperIcon } from './styled';
+const LIMIT_CONTENT_COMMENT = 200;
+const CommentBox = (props) => {
+    var _a;
+    const { info, offset, className, boxDimension, onChangeComment } = props;
+    const [activeDrags, setActiveDrags] = useState(0);
+    const [positionDrag] = useState({
+        top: info.top,
+        left: info.left,
+    });
+    const [debouncedPosition, _positionOriginal, setPositionDrag] = useDebounce(positionDrag, 400);
+    const handleStart = () => {
+        setActiveDrags(activeDrags + 1);
+    };
+    const handleStop = () => {
+        setActiveDrags(activeDrags - 1);
+    };
+    const handleDrag = (_e, _ui) => {
+        try {
+            const left = _ui.node.offsetLeft;
+            const top = _ui.node.offsetTop;
+            setPositionDrag({
+                left,
+                top,
+            });
+        }
+        catch (error) {
+            console.log('error :>', error);
+        }
+    };
+    useEffect(() => {
+        if (typeof onChangeComment === 'function') {
+            onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), debouncedPosition));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debouncedPosition]);
+    return (React.createElement(Draggable, { bounds: "canvas", onDrag: handleDrag, onStart: handleStart, onStop: handleStop },
+        React.createElement(CommentPoint, { color: info.color, isSubmitted: info.isSubmitted, id: info.id, offset: offset, left: info.left, top: info.top, className: `${className} comment-point` },
+            info.index,
+            React.createElement(CommentBoxed, { boxDimension: boxDimension, isReverseAxisX: info.isReverseAxisX, isReverseAxisY: info.isReverseAxisY, className: className },
+                React.createElement(Space, { direction: "vertical", size: 10 },
+                    React.createElement(TextArea, { placeholder: "Enter comment \u2026", value: info.content, disabled: info.isSubmitted, maxLength: LIMIT_CONTENT_COMMENT, onChange: event => {
+                            const { value } = event === null || event === void 0 ? void 0 : event.target;
+                            if (value && value.length <= LIMIT_CONTENT_COMMENT) {
+                                onChangeComment('CHANGE_CONTENT', Object.assign(Object.assign({}, info), { content: value }));
+                            }
+                        } }),
+                    !info.isSubmitted && (React.createElement(Space, { size: 15 },
+                        React.createElement(Button, { type: "primary", disabled: !info.content, style: { height: 28 }, onClick: () => onChangeComment('SUBMIT', info) }, "Comment"),
+                        React.createElement(Button, { style: { height: 28 }, onClick: () => onChangeComment('CANCEL', info) }, "Cancel"))))),
+            React.createElement(RoundedDashed, { offset: offset, className: "rounded-dashed" }),
+            React.createElement(WrapperIcon, { className: "icon-close-comment", onClick: e => {
+                    e.stopPropagation();
+                    onChangeComment('CANCEL', info);
+                } },
+                React.createElement(Icon, { type: "icon-ants-remove-trash", style: { fontSize: '20px', color: `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon}` } })))));
+};
+CommentBox.defaultProps = {
+    info: {
+        id: 'random_id',
+        top: 50,
+        left: 50,
+        index: 1,
+        isSubmitted: false,
+    },
+    offset: 20,
+    onChangeComment: () => { },
+};
+export { CommentBox };

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

@@ -0,0 +1,136 @@
+var _a, _b, _c, _d, _e, _f;
+// Libraries
+import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const CommentPoint = styled.div `
+  position: fixed;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: ${props => props.offset * 2}px;
+  height: ${props => props.offset * 2}px;
+  border-radius: 50%;
+
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
+  /* background-color: ${props => { var _a; return props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${props.color}`; }}; */
+  background-color: ${props => { var _a; return (props.color ? props.color : `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}`); }};
+  /* color: ${props => { var _a, _b; return (props.isSubmitted ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue8}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0}`); }}; */
+  color: ${props => { var _a, _b; return (props.color ? `${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0}` : `${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText}`); }};
+  font-size: 16px;
+
+  /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
+  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+  z-index: 99;
+  cursor: grab;
+
+  :hover {
+    z-index: 999999;
+  }
+
+  :hover .icon-close-comment,
+  :hover .rounded-dashed {
+    display: block;
+  }
+`;
+export const RoundedDashed = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  border: 2px dashed #707070;
+  width: ${props => props.offset * 2 + 1}px;
+  height: ${props => props.offset * 2 + 1}px;
+`;
+export const CommentBoxed = styled.div `
+  position: absolute;
+  width: ${props => props.boxDimension.width}px;
+  /* height: 170px; */
+  max-height: ${props => props.boxDimension.height}px;
+  padding: 15px;
+  border-radius: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius}px;
+
+  box-shadow: 0px 11px 15px 0 rgba(0, 0, 0, 0.2);
+  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
+  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  cursor: grab;
+
+  ::before {
+    content: '';
+    position: absolute;
+    display: block;
+    border: 16px solid transparent;
+  }
+
+  :hover ~ .icon-close-comment,
+  :hover ~ .rounded-dashed {
+    display: none;
+  }
+
+  /* Tính toán lại vị trí của box comment khi box bị che */
+  ${props => {
+    var _a, _b;
+    return props.isReverseAxisY
+        ? css `
+          bottom: 50%;
+          border-bottom-left-radius: 0px;
+
+          ::before {
+            bottom: 0;
+            border-bottom-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+          }
+        `
+        : css `
+          top: 50%;
+          border-top-left-radius: 0px;
+
+          ::before {
+            top: 0;
+            border-top-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0};
+          }
+        `;
+}}
+
+  ${props => props.isReverseAxisX
+    ? css `
+          right: calc(100% + 24px);
+
+          ::before {
+            right: -15px;
+          }
+        `
+    : css `
+          left: calc(100% + 24px);
+
+          ::before {
+            left: -15px;
+          }
+        `}
+`;
+export const TextArea = styled.textarea `
+  width: 300px;
+  height: 100px;
+  padding: 10px;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  outline: none;
+  font-family: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontFamily};
+  font-size: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.fontSize}px;
+  color: #999999;
+  resize: none;
+`;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: 0;
+  left: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+
+  display: none;
+  z-index: 10;
+`;

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

@@ -0,0 +1,17 @@
+// Libraries
+import React from 'react';
+// Styled
+import { DottedCursor, PlusCursor, TooltipDrag } from './styled';
+// Constants
+import { DRAW_KEYS } from '../../constants';
+const Cursor = (props) => {
+    const { bgColor, cursorRef, drawItemType, isShowCursor, isPointerBox, offset, children } = props;
+    if (!isShowCursor)
+        return null;
+    if (drawItemType === DRAW_KEYS.HIGHLIGHT) {
+        return (React.createElement(PlusCursor, { ref: cursorRef },
+            React.createElement(TooltipDrag, null, "Click & drag to draw")));
+    }
+    return (React.createElement(DottedCursor, { isPointerBox: isPointerBox, offset: offset, ref: cursorRef, bgColor: bgColor }, children));
+};
+export { Cursor };

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

@@ -0,0 +1,79 @@
+var _a, _b, _c, _d, _e;
+// Libraries
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Constants
+import styled, { css } from 'styled-components';
+export const PlusCursor = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  width: 30px;
+  height: 30px;
+  /* border-radius: 50%; */
+  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  background-position: center;
+  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  cursor: none;
+  pointer-events: none;
+  z-index: 999999;
+`;
+export const TooltipDrag = styled.div `
+  position: absolute;
+  top: 50%;
+  /* left: 50%; */
+  left: calc(100% + 10px);
+  /* transform: translate(-50%, -50%); */
+  transform: translateY(-50%);
+  height: 30px;
+  padding: 0px 8px;
+  border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
+  background-color: #515151;
+  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
+  font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
+  line-height: 30px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  user-select: none;
+  z-index: 9999;
+`;
+export const DottedCursor = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${props => props.bgColor || '#0f2eae'};
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 3px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0};
+  box-sizing: border-box;
+  cursor: none;
+  pointer-events: none;
+  z-index: 999999;
+
+  ${props => {
+    var _a, _b, _c;
+    return props.isPointerBox &&
+        css `
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: ${props.offset * 2}px;
+      height: ${props.offset * 2}px;
+      border-radius: 50%;
+
+      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+      color: ${props.bgColor ? props.bgColor : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw0};
+      font-size: 16px;
+
+      font-family: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontFamily};
+    `;
+}}
+`;

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

@@ -0,0 +1,118 @@
+var _a, _b;
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const OFFSET_CENTER = 20;
+export const SIZE_ADJUST = 1.0;
+export var IGNORE_DRAW_ID_LIST;
+(function (IGNORE_DRAW_ID_LIST) {
+    IGNORE_DRAW_ID_LIST["ICON_CLOSE"] = "antsomi-package-close-draw-icon";
+    IGNORE_DRAW_ID_LIST["BORDER_OVERLAY"] = "antsomi-package-border-overlay";
+    IGNORE_DRAW_ID_LIST["DRAW_ACTIONS"] = "antsomi-package-draw-action-options";
+    IGNORE_DRAW_ID_LIST["CLASS_PREVENT_HOVER"] = "antsomi-package-ignore-hovering-draw";
+})(IGNORE_DRAW_ID_LIST || (IGNORE_DRAW_ID_LIST = {}));
+export const COMMENT_BOX_DIMENSION_FIXED = {
+    width: 330,
+    height: 170,
+};
+export const styleDrawItem = {
+    MEDIUM: 33,
+    SMALL: 31,
+    LARGE: 43,
+};
+export const styleRecordItem = {
+    height: '100%',
+    padding: 10,
+};
+export const styleContainer = {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 133,
+    width: 'auto',
+    height: 52,
+    padding: '0px 10px',
+    boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.2)',
+    backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0,
+    borderRadius: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.borderRadius,
+    top: 'unset',
+    bottom: '20px',
+    right: '50%',
+    zIndex: 999,
+};
+export var DRAW_KEYS;
+(function (DRAW_KEYS) {
+    DRAW_KEYS["NULL"] = "null";
+    DRAW_KEYS["HIGHLIGHT"] = "highlight";
+    DRAW_KEYS["COMMENT"] = "comment";
+    DRAW_KEYS["PEN"] = "pen";
+    DRAW_KEYS["ARROW"] = "arrow";
+    DRAW_KEYS["HIDE"] = "hide";
+    DRAW_KEYS["DONE"] = "done";
+    DRAW_KEYS["CANCEL"] = "cancel";
+})(DRAW_KEYS || (DRAW_KEYS = {}));
+export var RECORD_KEYS;
+(function (RECORD_KEYS) {
+    RECORD_KEYS["DRAGGABLE"] = "draggable";
+    RECORD_KEYS["NULL"] = "null";
+    RECORD_KEYS["START"] = "start_recorder";
+    RECORD_KEYS["STOP"] = "stop_recorder";
+    RECORD_KEYS["PAUSE"] = "pause_recorder";
+    RECORD_KEYS["RESUME"] = "resume_recorder";
+    RECORD_KEYS["UNMUTE"] = "unmute_recorder";
+    RECORD_KEYS["MUTED"] = "muted_recorder";
+    RECORD_KEYS["TIMELINE"] = "timeline_recorder";
+})(RECORD_KEYS || (RECORD_KEYS = {}));
+export const DRAW_ACTION_LIST = [
+    {
+        key: DRAW_KEYS.HIGHLIGHT,
+        icon: 'icon-ants-highlight',
+        label: 'Highlight',
+        isShowColorList: true,
+        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
+    },
+    {
+        key: DRAW_KEYS.COMMENT,
+        icon: 'icon-ants-comment',
+        label: 'Comment',
+        isShowColorList: true,
+        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
+    },
+    {
+        key: DRAW_KEYS.PEN,
+        icon: 'icon-ants-free-draw',
+        label: 'Pen',
+        isShowColorList: true,
+        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
+    },
+    {
+        key: DRAW_KEYS.ARROW,
+        icon: 'icon-ants-arrow-grow',
+        label: 'Arrow',
+        isShowColorList: true,
+        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
+    },
+    {
+        key: DRAW_KEYS.HIDE,
+        icon: 'icon-ants-invisible',
+        label: 'Hide',
+        isShowColorList: true,
+        colorList: ['#0f2eae', '#212b37', '#1e6be5', '#17bb84', '#f5b108', '#f71007'],
+    },
+    {
+        key: DRAW_KEYS.NULL,
+        icon: 'icon-ants-laptop',
+        type: 'divider',
+        isShowColorList: false,
+    },
+    {
+        key: DRAW_KEYS.DONE,
+        icon: 'icon-ants-check-slim',
+        label: 'Done',
+        isShowColorList: false,
+    },
+    {
+        key: DRAW_KEYS.CANCEL,
+        icon: 'icon-ants-check-slim',
+        label: 'Cancel',
+        isShowColorList: false,
+    },
+];

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

@@ -0,0 +1,103 @@
+// Libraries
+import { useState, useRef, useEffect } from 'react';
+import ImageEditor from '@antscorp/image-editor';
+// Utils
+import { getEditorConfigs } from '../utils';
+// Constants
+import { DRAW_KEYS } from '../constants';
+export const useImageEditor = (imageEditorRef, options) => {
+    const [_triggerOut, setTriggerOut] = useState(1);
+    const editorInstance = useRef(null);
+    const canvasEditor = useRef(null);
+    const { preventCreateInstance = false } = options || {};
+    useEffect(() => {
+        let timerId;
+        try {
+            if (!preventCreateInstance) {
+                (editorInstance.current = new ImageEditor(imageEditorRef.current, getEditorConfigs()));
+                canvasEditor.current = editorInstance.current.getCanvas();
+                const canvas = canvasEditor.current;
+                if (canvas) {
+                    timerId = setTimeout(() => {
+                        canvas.setWidth(window.innerWidth);
+                        canvas.setHeight(window.innerHeight);
+                        editorInstance.current
+                            .loadImageFromURL(editorInstance.current.toDataURL())
+                            .then(_result => {
+                            editorInstance.current.clearUndoStack();
+                        });
+                    }, 300);
+                }
+                setTriggerOut(prev => prev + 1);
+            }
+        }
+        catch (err) {
+            console.log(err);
+        }
+        return () => {
+            if (!preventCreateInstance) {
+                editorInstance.current.destroy();
+            }
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        };
+    }, [imageEditorRef, preventCreateInstance]);
+    const activateShapeMode = () => {
+        if (!preventCreateInstance && editorInstance.current.getDrawingMode() !== 'SHAPE') {
+            editorInstance.current.stopDrawingMode();
+            editorInstance.current.startDrawingMode('SHAPE');
+        }
+    };
+    const activateTextMode = () => {
+        if (!preventCreateInstance && editorInstance.current.getDrawingMode() !== 'TEXT') {
+            editorInstance.current.stopDrawingMode();
+            editorInstance.current.startDrawingMode('TEXT');
+        }
+    };
+    const getSettings = (key, color) => {
+        switch (key) {
+            case DRAW_KEYS.PEN: {
+                return {
+                    width: 9,
+                    color,
+                };
+            }
+            case DRAW_KEYS.HIGHLIGHT: {
+                return {
+                    stroke: color,
+                    strokeWidth: 3,
+                    fill: 'transparent',
+                };
+            }
+            case DRAW_KEYS.HIDE: {
+                return {
+                    stroke: 'transparent',
+                    strokeWidth: 0,
+                    fill: color,
+                };
+            }
+            case DRAW_KEYS.ARROW: {
+                return {
+                    width: 9,
+                    color,
+                    arrowType: {
+                        tail: 'triangle',
+                    },
+                };
+            }
+            default: {
+                return {};
+            }
+        }
+    };
+    return {
+        editorInstance: preventCreateInstance ? null : editorInstance.current,
+        canvasEditor: canvasEditor.current,
+        methods: {
+            activateTextMode,
+            activateShapeMode,
+            getSettings,
+        },
+    };
+};