@antscorp/antsomi-ui 1.3.2 → 1.3.3

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

@@ -0,0 +1,255 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+// Libraries
+import styled, { css } from 'styled-components';
+import { Typography } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Components
+const { Text: AntText } = Typography;
+export const ContainerCapture = styled.div `
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 99999;
+
+  /* border: 5px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7}; */
+  /* background-color: rgba(0, 0, 0, 0.15); */
+
+  z-index: 9999;
+
+  ${props => props.imageURL &&
+    css `
+      display: block;
+      background-image: url(${props.imageURL});
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-origin: border-box;
+      -webkit-user-select: none;
+      margin: auto;
+      cursor: pointer;
+      background-color: hsl(0, 0%, 90%);
+      transition: background-color 300ms;
+    `}
+
+  * > * {
+    box-sizing: border-box;
+  }
+
+  .tui-image-editor-canvas-container,
+  .lower-canvas,
+  .upper-canvas {
+    max-width: 100% !important;
+    max-height: 100% !important;
+  }
+
+  .tui-image-editor-canvas-container {
+    /* border: 5px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue7}; */
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  &.hide-cursor .tui-image-editor-canvas-container .upper-canvas {
+    cursor: none !important;
+  }
+
+  ${props => {
+    var _a;
+    return props.isRecord &&
+        css `
+      position: unset;
+      width: 0px;
+      height: 0px;
+      /* border: 5px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7}; */
+    `;
+}}
+`;
+export const BorderOverlay = styled.div `
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  border: 5px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue7};
+  box-sizing: border-box;
+  clip-path: polygon(
+    5px 5px,
+    5px 100%,
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    5px 100%,
+    5px calc(100% - 5px),
+    calc(100% - 5px) calc(100% - 5px),
+    calc(100% - 5px) 5px
+  );
+`;
+export const FlexColumn = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+export const FlexCenter = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: ${props => (props.isRecord ? -5 : 0)}px;
+  right: ${props => (props.isRecord ? -5 : 0)}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7};
+  z-index: 10;
+`;
+export const DrawerGroups = styled.div `
+  display: flex;
+  align-items: center;
+  height: 52px;
+  background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0};
+  z-index: 9999;
+`;
+export const WrapperDraggable = styled.strong `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  cursor: move;
+`;
+export const DrawerGroupItem = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* padding: 10px; */
+  cursor: pointer;
+
+  &:not(.active):hover {
+    background-color: #deeffe;
+    transition: all 0.3s linear;
+  }
+
+  &.active {
+    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary};
+    background-color: #deeffe;
+  }
+
+  &:hover .toggle-popup-by-side {
+    display: block;
+  }
+
+  &.timer-recording:hover,
+  &.hide-hover:hover {
+    background-color: unset;
+  }
+
+  ::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 20px;
+    background-color: transparent;
+    position: absolute;
+    bottom: 80%;
+    left: 0px;
+  }
+`;
+export const Divider = styled.div `
+  background-image: linear-gradient(to right, #d2d2d2 33%, rgba(255, 255, 255, 0) 0%);
+  background-position: center center;
+  background-repeat: repeat-x;
+  background-size: 4px 2px;
+  margin: 0 10px;
+  height: 2px;
+  max-width: 100%;
+
+  ${props => props.isVertical &&
+    css `
+      margin: 0 -12px;
+      width: 36px;
+      transform: rotate(90deg);
+      background-size: 5px 2px;
+    `}
+`;
+export const PopupBySide = styled.div `
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: -6px;
+  display: none;
+  padding: 8px 10px 10px;
+  width: 124px;
+  min-height: 110px;
+  border-radius: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.borderRadius}px;
+  box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
+  background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw0};
+  cursor: default;
+`;
+export const Heading = styled(AntText) `
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
+  font-size: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.fontSize};
+  font-weight: normal !important;
+`;
+export const WrapperColor = styled.div `
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+`;
+export const BoxColor = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  background-color: ${props => props.bgColor || '#0f2eae'};
+  cursor: pointer;
+`;
+export const ImageIcon = styled.img `
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+`;
+export const OutlineRemoveContainer = styled.div `
+  position: absolute;
+  display: none;
+  width: 200px;
+  height: 200px;
+  overflow: visible;
+  clip-path: polygon(
+    2px 2px,
+    2px 100%,
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    2px 100%,
+    2px calc(100% - 2px),
+    calc(100% - 2px) calc(100% - 2px),
+    calc(100% - 2px) 2px
+  );
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+`;
+export const WrapperRemoveBtn = styled.div `
+  position: absolute;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+`;

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

@@ -0,0 +1,64 @@
+export const blackTheme = {
+    'common.bi.image': '',
+    'common.bisize.width': '0px',
+    'common.bisize.height': '0px',
+    'common.backgroundImage': 'none',
+    'common.backgroundColor': '#1e1e1e',
+    'common.border': '0px',
+    // header
+    'header.backgroundImage': 'none',
+    'header.backgroundColor': 'transparent',
+    'header.border': '0px',
+    // load button
+    'loadButton.backgroundColor': '#fff',
+    'loadButton.border': '1px solid #ddd',
+    'loadButton.color': '#222',
+    'loadButton.fontFamily': "'Noto Sans', sans-serif",
+    'loadButton.fontSize': '12px',
+    // download button
+    'downloadButton.backgroundColor': '#fdba3b',
+    'downloadButton.border': '1px solid #fdba3b',
+    'downloadButton.color': '#fff',
+    'downloadButton.fontFamily': "'Noto Sans', sans-serif",
+    'downloadButton.fontSize': '12px',
+    // main icons
+    'menu.normalIcon.color': '#8a8a8a',
+    'menu.activeIcon.color': '#555555',
+    'menu.disabledIcon.color': '#434343',
+    'menu.hoverIcon.color': '#e9e9e9',
+    'menu.iconSize.width': '24px',
+    'menu.iconSize.height': '24px',
+    // submenu icons
+    'submenu.normalIcon.color': '#8a8a8a',
+    'submenu.activeIcon.color': '#e9e9e9',
+    'submenu.iconSize.width': '32px',
+    'submenu.iconSize.height': '32px',
+    // submenu primary color
+    'submenu.backgroundColor': '#1e1e1e',
+    'submenu.partition.color': '#3c3c3c',
+    // submenu labels
+    'submenu.normalLabel.color': '#8a8a8a',
+    'submenu.normalLabel.fontWeight': 'lighter',
+    'submenu.activeLabel.color': '#fff',
+    'submenu.activeLabel.fontWeight': 'lighter',
+    // checkbox style
+    'checkbox.border': '0px',
+    'checkbox.backgroundColor': '#fff',
+    // range style
+    'range.pointer.color': '#fff',
+    'range.bar.color': '#666',
+    'range.subbar.color': '#d1d1d1',
+    'range.disabledPointer.color': '#414141',
+    'range.disabledBar.color': '#282828',
+    'range.disabledSubbar.color': '#414141',
+    'range.value.color': '#fff',
+    'range.value.fontWeight': 'lighter',
+    'range.value.fontSize': '11px',
+    'range.value.border': '1px solid #353535',
+    'range.value.backgroundColor': '#151515',
+    'range.title.color': '#fff',
+    'range.title.fontWeight': 'lighter',
+    // colorpicker style
+    'colorpicker.button.border': '1px solid #1e1e1e',
+    'colorpicker.title.color': '#fff',
+};

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

@@ -0,0 +1,64 @@
+export const whiteTheme = {
+    'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
+    'common.bisize.width': '251px',
+    'common.bisize.height': '21px',
+    'common.backgroundImage': './img/bg.png',
+    'common.backgroundColor': '#fff',
+    'common.border': '1px solid #c1c1c1',
+    // header
+    'header.backgroundImage': 'none',
+    'header.backgroundColor': 'transparent',
+    'header.border': '0px',
+    // load button
+    'loadButton.backgroundColor': '#fff',
+    'loadButton.border': '1px solid #ddd',
+    'loadButton.color': '#222',
+    'loadButton.fontFamily': "'Noto Sans', sans-serif",
+    'loadButton.fontSize': '12px',
+    // download button
+    'downloadButton.backgroundColor': '#fdba3b',
+    'downloadButton.border': '1px solid #fdba3b',
+    'downloadButton.color': '#fff',
+    'downloadButton.fontFamily': "'Noto Sans', sans-serif",
+    'downloadButton.fontSize': '12px',
+    // main icons
+    'menu.normalIcon.color': '#8a8a8a',
+    'menu.activeIcon.color': '#555555',
+    'menu.disabledIcon.color': '#434343',
+    'menu.hoverIcon.color': '#e9e9e9',
+    'menu.iconSize.width': '24px',
+    'menu.iconSize.height': '24px',
+    // submenu icons
+    'submenu.normalIcon.color': '#8a8a8a',
+    'submenu.activeIcon.color': '#555555',
+    'submenu.iconSize.width': '32px',
+    'submenu.iconSize.height': '32px',
+    // submenu primary color
+    'submenu.backgroundColor': 'transparent',
+    'submenu.partition.color': '#e5e5e5',
+    // submenu labels
+    'submenu.normalLabel.color': '#858585',
+    'submenu.normalLabel.fontWeight': 'normal',
+    'submenu.activeLabel.color': '#000',
+    'submenu.activeLabel.fontWeight': 'normal',
+    // checkbox style
+    'checkbox.border': '1px solid #ccc',
+    'checkbox.backgroundColor': '#fff',
+    // rango style
+    'range.pointer.color': '#333',
+    'range.bar.color': '#ccc',
+    'range.subbar.color': '#606060',
+    'range.disabledPointer.color': '#d3d3d3',
+    'range.disabledBar.color': 'rgba(85,85,85,0.06)',
+    'range.disabledSubbar.color': 'rgba(51,51,51,0.2)',
+    'range.value.color': '#000',
+    'range.value.fontWeight': 'normal',
+    'range.value.fontSize': '11px',
+    'range.value.border': '0',
+    'range.value.backgroundColor': '#f5f5f5',
+    'range.title.color': '#000',
+    'range.title.fontWeight': 'lighter',
+    // colorpicker style
+    'colorpicker.button.border': '0px',
+    'colorpicker.title.color': '#000',
+};

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

@@ -0,0 +1,108 @@
+import ImageEditor from 'tui-image-editor';
+import { DRAW_KEYS } from './constants';
+import { ATTACH_KEYS } from '@antscorp/antsomi-ui/es/components/organism/Help/constants';
+import { StreamTrackProps } from '@antscorp/antsomi-ui/es/components/organism/Help/types';
+import { ControlPosition } from 'react-draggable';
+interface RecorderConfigProps {
+    isMute: boolean;
+    recorder?: MediaRecorder;
+    streamTracks?: StreamTrackProps;
+}
+export interface ControlPositionProps {
+    [ATTACH_KEYS.CAPTURE]: ControlPosition;
+    [ATTACH_KEYS.RECORD]: ControlPosition;
+}
+export interface IImageEditorProps {
+    src?: string;
+    alt?: string;
+    recorderConfigs: RecorderConfigProps;
+    defaultPositions?: ControlPositionProps;
+    captureType: CaptureTypeProps;
+    callback: Function;
+}
+export type CaptureTypeProps = ATTACH_KEYS.CAPTURE | ATTACH_KEYS.RECORD;
+export interface IncludeUIOptionProps {
+    loadImage?: {
+        path: string;
+        name: string;
+    };
+    theme?: any;
+    menu?: string[];
+    initMenu?: string;
+    uiSize?: {
+        width: string;
+        height: string;
+    };
+    menuBarPosition?: string;
+    usageStatistics?: boolean;
+}
+export interface SelectionStyleConfigProps {
+    cornerStyle?: string;
+    cornerSize?: number;
+    cornerColor?: string;
+    cornerStrokeColor?: string;
+    transparentCorners?: boolean;
+    lineWidth?: number;
+    borderColor?: string;
+    rotatingPointOffset?: number;
+}
+export interface EditorConfigProps {
+    includeUI?: IncludeUIOptionProps;
+    cssMaxWidth?: number;
+    cssMaxHeight?: number;
+    usageStatistics?: boolean;
+    selectionStyle?: SelectionStyleConfigProps;
+}
+export interface DrawItemProps {
+    key: string;
+    icon: string;
+    type?: string;
+    label?: string;
+    isShowColorList: boolean;
+    colorList?: Array<string>;
+}
+export interface MethodImageEditorProps {
+    activateShapeMode: Function;
+    activateTextMode: Function;
+    getSettings: Function;
+}
+export interface ImageEditorInstanceProps {
+    editorInstance: ImageEditor | null;
+    canvasEditor: any;
+    methods: MethodImageEditorProps;
+}
+export type ColorListProps = '#0f2eae' | '#212b37' | '#1e6be5' | '#17bb84' | '#f5b108' | '#f71007';
+export type ColorKeys = DRAW_KEYS.HIGHLIGHT | DRAW_KEYS.COMMENT | DRAW_KEYS.PEN | DRAW_KEYS.ARROW | DRAW_KEYS.HIDE;
+export interface ShapeOptionProps {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    width?: number;
+    height?: number;
+    rx?: number;
+    ry?: number;
+    left?: number;
+    top?: number;
+    isRegular?: boolean;
+}
+interface ArrowTypeProps {
+    tail?: 'chevron' | 'triangle';
+    head?: 'chevron' | 'triangle';
+}
+export interface DrawingModeOptionProps {
+    width?: number;
+    color?: string;
+    arrowType?: ArrowTypeProps;
+}
+export interface CommentListProps {
+    id: string;
+    index: number;
+    color: string;
+    content?: string;
+    isSubmitted: boolean;
+    left: number;
+    top: number;
+    isReverseAxisX: boolean;
+    isReverseAxisY: boolean;
+}
+export {};

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

@@ -0,0 +1 @@
+import { ATTACH_KEYS } from '@antscorp/antsomi-ui/es/components/organism/Help/constants';

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

@@ -0,0 +1,62 @@
+// Themes
+// import { blackTheme } from './themes/black';
+// Constants
+import { DRAW_KEYS } from './constants';
+export const getEditorConfigs = () => ({
+    selectionStyle: {
+        cornerSize: 20,
+        rotatingPointOffset: 70,
+    },
+    usageStatistics: false,
+});
+export const initDefaultColors = () => ({
+    [DRAW_KEYS.HIGHLIGHT]: '#0f2eae',
+    [DRAW_KEYS.COMMENT]: '#0f2eae',
+    [DRAW_KEYS.PEN]: '#0f2eae',
+    [DRAW_KEYS.ARROW]: '#0f2eae',
+    [DRAW_KEYS.HIDE]: '#0f2eae',
+});
+export const base64ToFile = (dataUrl, filename) => {
+    const arr = dataUrl.split(',');
+    if (arr.length) {
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = window.atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, { type: mime });
+    }
+};
+export const convertBlobToFile = (blob, fileName) => {
+    const file = new File([blob], fileName);
+    return file;
+};
+export const generateUniqueId = () => {
+    const randomId = Math.random().toString(36).substring(2);
+    const timestamp = Date.now().toString(36);
+    return randomId + timestamp;
+};
+export const mergeAudioStreams = (desktopStream, voiceStream) => {
+    const context = new AudioContext();
+    const destination = context.createMediaStreamDestination();
+    let hasDesktop = false;
+    let hasVoice = false;
+    if (desktopStream && desktopStream.getAudioTracks().length > 0) {
+        // If you don't want to share Audio from the desktop it should still work with just the voice.
+        const source1 = context.createMediaStreamSource(desktopStream);
+        const desktopGain = context.createGain();
+        desktopGain.gain.value = 0.7;
+        source1.connect(desktopGain).connect(destination);
+        hasDesktop = true;
+    }
+    if (voiceStream && voiceStream.getAudioTracks().length > 0) {
+        const source2 = context.createMediaStreamSource(voiceStream);
+        const voiceGain = context.createGain();
+        voiceGain.gain.value = 0.7;
+        source2.connect(voiceGain).connect(destination);
+        hasVoice = true;
+    }
+    return hasDesktop || hasVoice ? destination.stream.getAudioTracks() : [];
+};

package/es/components/molecules/Card/Card.js

@@ -0,0 +1,2 @@
+import { Card as AntdCard } from 'antd';
+export const Card = AntdCard;