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

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

@@ -1,79 +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};
-    `;
-}}
-`;
+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/components/Cursor/types.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface CursorProps {
-    drawItemType: string;
-    isShowCursor: boolean;
-    cursorRef?: React.RefObject<HTMLDivElement>;
-    bgColor?: string;
-    isPointerBox?: boolean;
-    offset: number;
-    children?: any;
-}
+import React from 'react';
+export interface CursorProps {
+    drawItemType: string;
+    isShowCursor: boolean;
+    cursorRef?: React.RefObject<HTMLDivElement>;
+    bgColor?: string;
+    isPointerBox?: boolean;
+    offset: number;
+    children?: any;
+}

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

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

package/es/components/molecules/CaptureScreen/constants.d.ts

@@ -1,41 +1,41 @@
-import { CSSProperties } from 'react';
-import { BoxDimensionProps } from './components/CommentBox/types';
-import { DrawItemProps } from './types';
-export declare const OFFSET_CENTER = 20;
-export declare const SIZE_ADJUST = 1;
-export declare enum IGNORE_DRAW_ID_LIST {
-    ICON_CLOSE = "antsomi-package-close-draw-icon",
-    BORDER_OVERLAY = "antsomi-package-border-overlay",
-    DRAW_ACTIONS = "antsomi-package-draw-action-options",
-    CLASS_PREVENT_HOVER = "antsomi-package-ignore-hovering-draw"
-}
-export declare const COMMENT_BOX_DIMENSION_FIXED: BoxDimensionProps;
-export declare const styleDrawItem: {
-    MEDIUM: number;
-    SMALL: number;
-    LARGE: number;
-};
-export declare const styleRecordItem: CSSProperties;
-export declare const styleContainer: CSSProperties;
-export declare enum DRAW_KEYS {
-    NULL = "null",
-    HIGHLIGHT = "highlight",
-    COMMENT = "comment",
-    PEN = "pen",
-    ARROW = "arrow",
-    HIDE = "hide",
-    DONE = "done",
-    CANCEL = "cancel"
-}
-export declare enum RECORD_KEYS {
-    DRAGGABLE = "draggable",
-    NULL = "null",
-    START = "start_recorder",
-    STOP = "stop_recorder",
-    PAUSE = "pause_recorder",
-    RESUME = "resume_recorder",
-    UNMUTE = "unmute_recorder",
-    MUTED = "muted_recorder",
-    TIMELINE = "timeline_recorder"
-}
-export declare const DRAW_ACTION_LIST: Array<DrawItemProps>;
+import { CSSProperties } from 'react';
+import { BoxDimensionProps } from './components/CommentBox/types';
+import { DrawItemProps } from './types';
+export declare const OFFSET_CENTER = 20;
+export declare const SIZE_ADJUST = 1;
+export declare enum IGNORE_DRAW_ID_LIST {
+    ICON_CLOSE = "antsomi-package-close-draw-icon",
+    BORDER_OVERLAY = "antsomi-package-border-overlay",
+    DRAW_ACTIONS = "antsomi-package-draw-action-options",
+    CLASS_PREVENT_HOVER = "antsomi-package-ignore-hovering-draw"
+}
+export declare const COMMENT_BOX_DIMENSION_FIXED: BoxDimensionProps;
+export declare const styleDrawItem: {
+    MEDIUM: number;
+    SMALL: number;
+    LARGE: number;
+};
+export declare const styleRecordItem: CSSProperties;
+export declare const styleContainer: CSSProperties;
+export declare enum DRAW_KEYS {
+    NULL = "null",
+    HIGHLIGHT = "highlight",
+    COMMENT = "comment",
+    PEN = "pen",
+    ARROW = "arrow",
+    HIDE = "hide",
+    DONE = "done",
+    CANCEL = "cancel"
+}
+export declare enum RECORD_KEYS {
+    DRAGGABLE = "draggable",
+    NULL = "null",
+    START = "start_recorder",
+    STOP = "stop_recorder",
+    PAUSE = "pause_recorder",
+    RESUME = "resume_recorder",
+    UNMUTE = "unmute_recorder",
+    MUTED = "muted_recorder",
+    TIMELINE = "timeline_recorder"
+}
+export declare const DRAW_ACTION_LIST: Array<DrawItemProps>;

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

@@ -1,118 +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,
-    },
-];
+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.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
-import { ImageEditorInstanceProps } from '../types';
-export declare const useImageEditor: (imageEditorRef: RefObject<HTMLDivElement>, options?: {
-    preventCreateInstance: boolean;
-}) => ImageEditorInstanceProps;
+import { RefObject } from 'react';
+import { ImageEditorInstanceProps } from '../types';
+export declare const useImageEditor: (imageEditorRef: RefObject<HTMLDivElement>, options?: {
+    preventCreateInstance: boolean;
+}) => ImageEditorInstanceProps;