add parameter of tool type

* fix cannot delete when open markup tool

components/FreeTextOption/index.tsx

@@ -19,7 +19,7 @@ const TextOption: React.SFC<OptionPropsType> = ({
   color,
   opacity,
   setDataState = (): void => {
-    // do nothing
+    // do something
   },
 }: OptionPropsType) => {
   const { t } = useTranslation('sidebar');

components/FullScreenButton/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import Icon from '../Icon';
+
+import { ToggleButton } from './styled';
+
+type Props = {
+  displayMode: string;
+  toggleDisplayMode: (state: string) => void;
+};
+
+const FullScreenButton: React.FC<Props> = ({
+  displayMode,
+  toggleDisplayMode,
+}: Props) => {
+  return (
+    <ToggleButton>
+      {displayMode === 'normal' ? (
+        <Icon
+          glyph="tool-close"
+          onClick={(): void => {
+            toggleDisplayMode('full');
+          }}
+        />
+      ) : (
+        <Icon
+          glyph="tool-open"
+          onClick={(): void => {
+            toggleDisplayMode('normal');
+          }}
+        />
+      )}
+    </ToggleButton>
+  );
+};
+
+export default FullScreenButton;

components/FullScreenButton/styled.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const ToggleButton = styled.div`
+  position: fixed;
+  right: 20px;
+  bottom: 15px;
+  z-index: 2;
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.32);
+  border-radius: 40px;
+  width: 80px;
+  height: 80px;
+`;
+
+export default ToggleButton;

components/ShapeOption/data.tsx

@@ -3,13 +3,13 @@ import Icon from '../Icon';
 
 export const shapeOptions = [
   {
-    key: 'circle',
-    content: <Icon glyph="circle" />,
+    key: 'square',
+    content: <Icon glyph="square" />,
     child: '',
   },
   {
-    key: 'square',
-    content: <Icon glyph="square" />,
+    key: 'circle',
+    content: <Icon glyph="circle" />,
     child: '',
   },
   {
@@ -26,13 +26,13 @@ export const shapeOptions = [
 
 export const typeOptions = [
   {
-    key: 'border',
-    content: <Icon glyph="border" />,
+    key: 'fill',
+    content: <Icon glyph="fill" />,
     child: '',
   },
   {
-    key: 'fill',
-    content: <Icon glyph="fill" />,
+    key: 'border',
+    content: <Icon glyph="border" />,
     child: '',
   },
 ];

components/Toolbar/index.tsx

@@ -7,7 +7,7 @@ import SelectBox from '../SelectBox';
 import Divider from '../Divider';
 import { scaleCheck } from '../../helpers/utility';
 
-import { Container, ToggleButton } from './styled';
+import { Container } from './styled';
 import dataset from './data';
 
 type Props = {
@@ -19,10 +19,10 @@ type Props = {
   handleCounterclockwiseRotation: () => void;
   handleZoomIn: () => void;
   handleZoomOut: () => void;
+  handleMouseOver: () => void;
   scale: number;
   viewport: ViewportType;
   displayMode: string;
-  toggleDisplayMode: (state: string) => void;
   handleHandClick: () => void;
   hidden: boolean;
 };
@@ -36,19 +36,17 @@ const Toolbar: React.FC<Props> = ({
   handleCounterclockwiseRotation,
   handleZoomIn,
   handleZoomOut,
+  handleMouseOver,
   scale,
   viewport,
   displayMode,
-  toggleDisplayMode,
   handleHandClick,
   hidden,
 }: Props) => {
   const { t } = useTranslation('toolbar');
   const data = dataset(t);
 
-  const handleScaleSelect = async (
-    selected: SelectOptionType
-  ): Promise<any> => {
+  const handleScaleSelect = (selected: SelectOptionType) => {
     if (selected.child === 'fit') {
       const screenWidth = window.document.body.offsetWidth - 288;
       const originPdfWidth = viewport.width / scale;
@@ -60,67 +58,44 @@ const Toolbar: React.FC<Props> = ({
   };
 
   return (
-    <>
-      <Container hidden={hidden} displayMode={displayMode}>
-        <Pagination
-          totalPage={totalPage}
-          currentPage={currentPage}
-          onChange={setCurrentPage}
-        />
-        <Divider />
-        <Icon
-          glyph="hand"
-          style={{ width: '30px' }}
-          onClick={handleHandClick}
-        />
-        <Icon
-          glyph="zoom-in"
-          style={{ width: '30px' }}
-          onClick={handleZoomIn}
-        />
-        <Icon
-          glyph="zoom-out"
-          style={{ width: '30px' }}
-          onClick={handleZoomOut}
-        />
-        <SelectBox
-          options={data.scaleOptions}
-          style={{ width: '94px' }}
-          useInput
-          isDivide
-          onChange={handleScaleSelect}
-          defaultValue={`${Math.round(scale * 100)} %`}
-        />
-        <Divider />
-        <Icon
-          glyph="rotate-left"
-          style={{ width: '30px' }}
-          onClick={handleCounterclockwiseRotation}
-        />
-        <Icon
-          glyph="rotate-right"
-          style={{ width: '30px' }}
-          onClick={handleClockwiseRotation}
-        />
-      </Container>
-      <ToggleButton>
-        {displayMode === 'normal' ? (
-          <Icon
-            glyph="tool-close"
-            onClick={(): void => {
-              toggleDisplayMode('full');
-            }}
-          />
-        ) : (
-          <Icon
-            glyph="tool-open"
-            onClick={(): void => {
-              toggleDisplayMode('normal');
-            }}
-          />
-        )}
-      </ToggleButton>
-    </>
+    <Container
+      onMouseOver={handleMouseOver}
+      hidden={hidden}
+      displayMode={displayMode}
+    >
+      <Pagination
+        totalPage={totalPage}
+        currentPage={currentPage}
+        onChange={setCurrentPage}
+      />
+      <Divider />
+      <Icon glyph="hand" style={{ width: '30px' }} onClick={handleHandClick} />
+      <Icon glyph="zoom-in" style={{ width: '30px' }} onClick={handleZoomIn} />
+      <Icon
+        glyph="zoom-out"
+        style={{ width: '30px' }}
+        onClick={handleZoomOut}
+      />
+      <SelectBox
+        options={data.scaleOptions}
+        style={{ width: '94px' }}
+        useInput
+        isDivide
+        onChange={handleScaleSelect}
+        defaultValue={`${Math.round(scale * 100)} %`}
+      />
+      <Divider />
+      <Icon
+        glyph="rotate-left"
+        style={{ width: '30px' }}
+        onClick={handleCounterclockwiseRotation}
+      />
+      <Icon
+        glyph="rotate-right"
+        style={{ width: '30px' }}
+        onClick={handleClockwiseRotation}
+      />
+    </Container>
   );
 };
 

components/Toolbar/styled.ts

@@ -6,7 +6,6 @@ const closeToolbar = keyframes`
     opacity: 1;
   }
   to {
-    pointer-events: none;
     opacity: 0;
   }
 `;
@@ -42,13 +41,4 @@ export const Container = styled('div')<{
       : ''}
 `;
 
-export const ToggleButton = styled.div`
-  position: fixed;
-  right: 20px;
-  bottom: 15px;
-  z-index: 2;
-  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.32);
-  border-radius: 40px;
-  width: 80px;
-  height: 80px;
-`;
+export default Container;

containers/FreehandTools.tsx

@@ -53,7 +53,6 @@ const FreehandTools: React.FC<Props> = ({
 
   const handleMouseDown = useCallback(
     (event: MouseEvent | TouchEvent): void => {
-      event.preventDefault();
       const pageEle = (event.target as HTMLElement).parentNode as HTMLElement;
       switchPdfViewerScrollState('hidden');
 

containers/FullScreenButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import FullScreenButton from '../components/FullScreenButton';
+
+import useActions from '../actions';
+import useStore from '../store';
+
+const FullScreenButtonContainer = () => {
+  const [{ displayMode }, dispatch] = useStore();
+
+  const { toggleDisplayMode } = useActions(dispatch);
+
+  return (
+    <FullScreenButton
+      displayMode={displayMode}
+      toggleDisplayMode={toggleDisplayMode}
+    />
+  );
+};
+
+export default FullScreenButtonContainer;

containers/MarkupTools.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'react-i18next';
 
 // import Button from '../components/Button';
@@ -19,6 +20,8 @@ const MarkupTools: React.FC = () => {
   const [{ sidebarState }, dispatch] = useStore();
   const { setSidebar } = useActions(dispatch);
 
+  const router = useRouter();
+
   // const onClickSidebar = (state: string): void => {
   //   if (state === sidebarState) {
   //     setSidebar('');
@@ -54,6 +57,14 @@ const MarkupTools: React.FC = () => {
   //   </Button>
   // );
 
+  useEffect(() => {
+    if (router.query.tool === 'freehand') {
+      setSidebar('freehand');
+    } else {
+      setSidebar('highlight');
+    }
+  }, [router]);
+
   return (
     <>
       <HighlightTools

containers/PdfPage.tsx

@@ -4,7 +4,6 @@ import Page from '../components/Page';
 import Annotation from './Annotation';
 import { getPdfPage } from '../helpers/pdf';
 
-import useActions from '../actions';
 import useStore from '../store';
 
 type Props = {
@@ -14,10 +13,18 @@ type Props = {
 
 const PdfPage: React.FC<Props> = ({ index, renderingState }: Props) => {
   const [
-    { viewport, pdf, rotation, annotations, scale, watermark, currentPage },
-    dispatch,
+    {
+      viewport,
+      pdf,
+      rotation,
+      annotations,
+      scale,
+      watermark,
+      currentPage,
+      queryString,
+      matchesMap,
+    },
   ] = useStore();
-  const { setTextDivs } = useActions(dispatch);
 
   const getAnnotationWithPage = (
     arr: AnnotationType[],
@@ -48,8 +55,9 @@ const PdfPage: React.FC<Props> = ({ index, renderingState }: Props) => {
       rotation={rotation}
       watermark={watermark}
       annotations={getAnnotationWithPage(annotations, index)}
-      setTextDivs={setTextDivs}
       currentPage={currentPage}
+      queryString={queryString}
+      matchesMap={matchesMap}
     />
   );
 };

containers/PdfPages.tsx

@@ -28,7 +28,7 @@ const PdfPages: React.FC<Props> = ({ scrollToUpdate }: Props) => {
         <PdfPage
           key={key}
           index={i}
-          renderingState={_.range(1, 4).includes(i) ? 'RENDERING' : 'LOADING'}
+          renderingState={_.range(1, 3).includes(i) ? 'RENDERING' : 'LOADING'}
         />
       );
       pagesContent.push(component);
@@ -39,7 +39,7 @@ const PdfPages: React.FC<Props> = ({ scrollToUpdate }: Props) => {
 
   const updatePages = (): void => {
     const renderingIndexQueue = _.range(currentPage - 1, currentPage + 2);
-    let index = currentPage - 4;
+    let index = currentPage - 3;
     const end = currentPage + 3;
 
     while (currentPage) {

containers/ShapeTools.tsx

@@ -31,10 +31,10 @@ const Shape: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
   const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
   const [uuid, setUuid] = useState('');
   const [data, setData] = useState({
-    shape: 'circle',
-    type: 'border',
+    shape: 'square',
+    type: 'fill',
     color: '#FBB705',
-    opacity: 100,
+    opacity: 35,
     width: 3,
   });
   const [cursorPosition, setRef] = useCursorPosition();
@@ -124,7 +124,6 @@ const Shape: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
   );
 
   const handleMouseDown = (event: MouseEvent | TouchEvent): void => {
-    event.preventDefault();
     switchPdfViewerScrollState('hidden');
 
     const pageEle = (event.target as HTMLElement).parentNode as HTMLElement;

containers/Toolbar.tsx

@@ -14,13 +14,12 @@ const Toolbar: React.FC = () => {
     dispatch,
   ] = useStore();
   const [hideToolbar, setHideToolbar] = useState(false);
-  let scrollTimeout: any = null;
+  let scrollTimeout = 0;
 
   const {
     setCurrentPage: setCurrentPageAction,
     changeScale,
     changeRotate,
-    toggleDisplayMode,
     setSidebar,
   } = useActions(dispatch);
 
@@ -76,6 +75,10 @@ const Toolbar: React.FC = () => {
     setHideToolbar(false);
   };
 
+  const handleMouseOver = (): void => {
+    setHideToolbar(false);
+  };
+
   useEffect(() => {
     const viewer = document.getElementById('pdf_viewer');
 
@@ -113,10 +116,10 @@ const Toolbar: React.FC = () => {
       handleZoomIn={handleZoomIn}
       handleZoomOut={handleZoomOut}
       handleHandClick={handleHandClick}
+      handleMouseOver={handleMouseOver}
       scale={scale}
       viewport={viewport}
       displayMode={displayMode}
-      toggleDisplayMode={toggleDisplayMode}
       hidden={hideToolbar}
     />
   );

pages/index.tsx

@@ -4,6 +4,7 @@ import { NextPage } from 'next';
 import Navbar from '../containers/Navbar';
 import Sidebar from '../containers/Sidebar';
 import Toolbar from '../containers/Toolbar';
+import FullScreenButton from '../containers/FullScreenButton';
 import Placeholder from '../containers/Placeholder';
 import PdfViewer from '../containers/PdfViewer';
 import AutoSave from '../containers/AutoSave';
@@ -11,16 +12,17 @@ import Loading from '../containers/Loading';
 import Embed from '../components/Embed';
 
 const index: NextPage = () => (
-  <div>
+  <>
     <Navbar />
     <Sidebar />
     <Toolbar />
     <Placeholder />
     <PdfViewer />
+    <FullScreenButton />
     <AutoSave />
     <Loading />
     <Embed />
-  </div>
+  </>
 );
 
 export default index;