Merge branch 'develop' into 'master'

Develop

See merge request cloud/external/kangaroo_client!1

components/Highlight/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import AnnotationSelector from '../AnnotationSelector';
 import Markup from '../Markup';
 import { rectCalc } from '../../helpers/position';
+import { strip } from '../../helpers/utility';
 
 import { Popper } from './styled';
 
@@ -35,6 +36,7 @@ const Highlight: React.SFC<AnnotationElementPropsType> = ({
             opacity={transparency || 0}
             markupType={obj_type}
             isCovered={isCovered}
+            scale={scale}
           />
         );
       })}
@@ -44,7 +46,7 @@ const Highlight: React.SFC<AnnotationElementPropsType> = ({
           onUpdate={onUpdate}
           onDelete={onDelete}
           colorProps={bdcolor}
-          opacityProps={transparency ? transparency * 100 : 0}
+          opacityProps={transparency ? strip(transparency * 100) : 0}
         />
       </Popper>
     ) : (

components/Highlight/styled.ts

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
 
-export const Popper = styled('div')<{position: Record<string, any>}>`
+export const Popper = styled('div')<{ position: Record<string, any> }>`
   position: absolute;
   top: ${props => props.position.y}px;
   left: ${props => props.position.x}px;
   transform: translate(-50%, -80px);
   z-index: 10;
 `;
+
+export default Popper;

components/HighlightOption/data.ts

@@ -3,18 +3,22 @@ export default {
     {
       key: 'highlight',
       icon: 'highlight',
+      color: '#FCFF36',
     },
     {
       key: 'underline',
       icon: 'underline',
+      color: '#27BEFD',
     },
     {
       key: 'squiggly',
       icon: 'squiggly',
+      color: '#02FF36',
     },
     {
       key: 'strikeout',
       icon: 'strikeout',
+      color: '#FF1B89',
     },
   ],
 };

components/HighlightOption/index.tsx

@@ -35,7 +35,7 @@ const HighlightOption: React.SFC<OptionPropsType> = ({
               key={ele.key}
               selected={type === ele.key}
               onClick={(): void => {
-                setDataState({ type: ele.key });
+                setDataState({ type: ele.key, color: ele.color });
               }}
             >
               <Icon glyph={ele.icon} />

components/Markup/index.tsx

@@ -8,6 +8,7 @@ type Props = {
   opacity: number;
   markupType: string;
   isCovered?: boolean;
+  scale: number;
 };
 
 const index: React.SFC<Props> = ({
@@ -16,6 +17,7 @@ const index: React.SFC<Props> = ({
   opacity,
   markupType,
   isCovered,
+  scale,
 }: Props) => (
   <Markup
     position={position}
@@ -23,6 +25,7 @@ const index: React.SFC<Props> = ({
     opacity={opacity}
     markupType={markupType}
     isCovered={isCovered}
+    scale={scale}
   />
 );
 

components/Markup/styled.ts

@@ -4,8 +4,8 @@ const MarkupStyle: Record<string, any> = {
   Highlight: css<{ isCovered: boolean; bdcolor: string }>`
     background-color: ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
   `,
-  Underline: css<{ isCovered: boolean; bdcolor: string }>`
-    border-bottom: 2px solid
+  Underline: css<{ isCovered: boolean; bdcolor: string; scale: number }>`
+    border-bottom: ${props => props.scale * 2}px solid
       ${props => (props.isCovered ? '#297fb8' : props.bdcolor)};
   `,
   Squiggly: css<{ isCovered: boolean; bdcolor: string }>`
@@ -47,11 +47,11 @@ const MarkupStyle: Record<string, any> = {
       background-position: 0px -22px;
     }
   `,
-  StrikeOut: css<{ isCovered: boolean; bdcolor: string }>`
+  StrikeOut: css<{ isCovered: boolean; bdcolor: string; scale: number }>`
     &:after {
       content: '';
       position: absolute;
-      height: 2px;
+      height: ${props => props.scale * 2}px;
       width: 100%;
       left: 0;
       top: 40%;
@@ -67,6 +67,7 @@ const Markup = styled('div')<{
   markupType: string;
   opacity: number;
   isCovered?: boolean;
+  scale: number;
 }>`
   position: absolute;
   cursor: pointer;

helpers/annotation.ts

@@ -68,7 +68,7 @@ export const parseAnnotationFromXml = (xmlString: string): AnnotationType[] => {
             ? parseInt(cur.attributes.width.value, 10)
             : 0,
           transparency: cur.attributes.opacity
-            ? parseFloat(cur.attributes.opacity.value).toFixed(2)
+            ? cur.attributes.opacity.value
             : 1,
           content: getContent(type, cur) || undefined,
           fcolor: cur.attributes['interior-color']

helpers/markup.ts

@@ -108,35 +108,43 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
       right: offsetRight,
     };
 
-    if (
+    if (startElement === ele && endElement === ele) {
+      // in same element
+      coords.left = startX;
+      coords.right = endX;
+      position.push(coords);
+    } else if (startElement === ele) {
+      // in start element
+      coords.left = startX;
+      position.push(coords);
+    } else if (endElement === ele) {
+      // in end element
+      coords.right = endX;
+      position.push(coords);
+    } else if (
       offsetTop >= startY + offsetHeight &&
       offsetBottom <= endY - offsetHeight
     ) {
+      // in row
       position.push(coords);
-    } else if (offsetTop >= startY - 2 && offsetBottom <= endY + 2) {
-      if (startElement === endElement && startElement === ele) {
-        // start and end same element
-        coords.left = startX;
-        coords.right = endX;
-        position.push(coords);
-      } else if (startElement === ele) {
-        // start element
-        coords.left = startX;
-        position.push(coords);
-      } else if (endElement === ele) {
-        // end element
-        coords.right = endX;
-        position.push(coords);
-      } else if (
-        (startX < offsetLeft && endX > offsetRight) ||
+    } else if (
+      offsetLeft > startX &&
+      offsetRight < endX &&
+      offsetTop >= startY &&
+      offsetBottom <= endY
+    ) {
+      // in line
+      position.push(coords);
+    } else if (offsetTop >= startY - 3 && offsetBottom <= endY + 3) {
+      if (
         (offsetLeft > startX &&
-          offsetTop <= startY + 2 &&
-          endY > startY + offsetHeight) ||
+          offsetTop >= startY - 3 &&
+          offsetBottom < endY - offsetHeight) ||
         (offsetRight < endX &&
-          offsetBottom >= endY - 2 &&
-          startY < endY - offsetHeight)
+          offsetBottom <= endY + 3 &&
+          offsetTop > startY + offsetHeight)
       ) {
-        // middle element
+        // in first line and end line
         position.push(coords);
       }
     }
@@ -144,8 +152,8 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
 
   for (let i = 1; i < position.length; i += 1) {
     if (
-      position[i].top >= position[i - 1].top - 2 &&
-      position[i].bottom <= position[i - 1].bottom + 2
+      position[i].top >= position[i - 1].top - 4 &&
+      position[i].bottom <= position[i - 1].bottom + 4
     ) {
       position[i - 1].right = position[i].left;
     }

helpers/utility.ts

@@ -322,3 +322,7 @@ export const printPdf = async (url: string) => {
       }
     });
 };
+
+export const strip = (number: number): number => {
+  return parseFloat(parseFloat(number.toString()).toPrecision(12));
+};