Home Explore Help
Register Sign In
RoyLiu
/
pdf-reader-web
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

optimization markup logic

* code format
RoyLiu 4 years ago
parent
d57832a0d2
commit
2cda00fe00
4 changed files with 17 additions and 30 deletions
Split View Show Diff Stats
  1. 2 1
      components/Page/styled.ts
  2. 2 2
      components/Viewer/styled.ts
  3. 5 25
      helpers/markup.ts
  4. 8 2
      pages/_document.js

+ 2 - 1
components/Page/styled.ts
View File 

@@ -37,6 +37,7 @@ export const TextLayer = styled.div`
 
   bottom: 0;
 
   margin: auto;
 
   overflow: hidden;
 
+  opacity: 0.3;
 
   line-height: 1;
 
 
   & > span {
 
@@ -48,7 +49,7 @@ export const TextLayer = styled.div`
 
 
     ::selection {
 
       color: transparent;
 
-      background: #d6eaff;
 
+      background: rgba(0, 0, 255, 1);
 
     }
 
   }
 
 `;

+ 2 - 2
components/Viewer/styled.ts
View File 

@@ -1,6 +1,6 @@
 
 import styled from 'styled-components';
 
 
-export const OuterWrapper = styled('div')<{isFull: boolean}>`
 
+export const OuterWrapper = styled('div')<{ isFull: boolean }>`
 
   position: fixed;
 
   left: ${props => (props.isFull ? 0 : '267px')};
 
   right: 0;
 
@@ -12,7 +12,7 @@ export const OuterWrapper = styled('div')<{isFull: boolean}>`
 
   transition: all 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
 `;
 
 
-export const Wrapper = styled('div')<{width: number}>`
 
+export const Wrapper = styled('div')<{ width: number }>`
 
   display: inline-flex;
 
   flex-direction: column;
 
   width: ${props => props.width}px;

+ 5 - 25
helpers/markup.ts
View File 

@@ -96,6 +96,7 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 
   // @ts-ignore
 
   const textElements = [...textLayer.childNodes];
 
+  let inRange = false;
 
 
   textElements.forEach((ele: HTMLElement) => {
 
     const { offsetTop, offsetLeft, offsetHeight, offsetWidth } = ele;
 
@@ -117,36 +118,15 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
 
       // in start element
 
       coords.left = startX;
 
       position.push(coords);
 
+      inRange = true;
 
     } 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 (
 
-      offsetLeft > startX &&
 
-      offsetRight < endX &&
 
-      offsetTop >= startY &&
 
-      offsetBottom <= endY
 
-    ) {
 
-      // in line
 
+      inRange = false;
 
+    } else if (inRange) {
 
+      // middle element
 
       position.push(coords);
 
-    } else if (offsetTop >= startY - 3 && offsetBottom <= endY + 3) {
 
-      if (
 
-        (offsetLeft > startX &&
 
-          offsetTop >= startY - 3 &&
 
-          offsetBottom < endY - offsetHeight) ||
 
-        (offsetRight < endX &&
 
-          offsetBottom <= endY + 3 &&
 
-          offsetTop > startY + offsetHeight)
 
-      ) {
 
-        // in first line and end line
 
-        position.push(coords);
 
-      }
 
     }
 
   });

+ 8 - 2
pages/_document.js
View File 

@@ -5,7 +5,9 @@ import { ServerStyleSheet } from 'styled-components';
 
 class MyDocument extends Document {
 
   static getInitialProps({ renderPage }) {
 
     const sheet = new ServerStyleSheet();
 
-    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
 
+    const page = renderPage(App => props =>
 
+      sheet.collectStyles(<App {...props} />)
 
+    );
 
     const styleTags = sheet.getStyleElement();
 
     return { ...page, styleTags };
 
   }
 
@@ -14,7 +16,11 @@ class MyDocument extends Document {
 
     return (
 
       <html lang="en">
 
         <Head>
 
-          <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
 
+          <link
 
+            rel="shortcut icon"
 
+            type="image/x-icon"
 
+            href="/static/favicon.ico"
 
+          />
 
           {this.props.styleTags}
 
         </Head>
 
         <body>