Merge branch 'refs/heads/recogito#115-fix-spans-underlying-offset' in…

…to staging # Conflicts: # packages/extension-tei/test/index.html
oleksandr-danylchenko · Jul 1, 2024 · 14ba5bf · 14ba5bf
2 parents a66e9d5 + dfdaeb9
commit 14ba5bf
Show file tree

Hide file tree

Showing 4 changed files with 489 additions and 476 deletions.
diff --git a/packages/extension-tei/test/index.html b/packages/extension-tei/test/index.html
@@ -6,83 +6,87 @@
     <link rel="stylesheet" href="CETEIcean.css">
     <script type="module" src="../src/index.ts"></script>
     <style>
-      html, body {
-        background: #e2e2e2;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-      }
-
-      #content {
-        max-width: 800px;
-        background-color: #fff;
-        padding: 40px;
-        border-style: solid;
-        border-color: #cfcfcf;
-        border-width: 0 1px;
-        position: relative;
-      }
-
-      #content img {
-        max-width: 100%;
-      }
-
-      h1 {
-        margin: 0;
-        padding: 0 0 20px 0;
-      }
-
-      p {
-        font-size: 17px;
-        line-height: 160%;
-      }
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
+
+        html, body {
+            background: #e2e2e2;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        #content {
+            max-width: 800px;
+            background-color: #fff;
+            padding: 40px;
+            border-style: solid;
+            border-color: #cfcfcf;
+            border-width: 0 1px;
+            position: relative;
+        }
+
+        #content img {
+            max-width: 100%;
+        }
+
+        h1 {
+            margin: 0;
+            padding: 0 0 20px 0;
+        }
+
+        p {
+            font-size: 17px;
+            line-height: 160%;
+        }
     </style>
   </head>
 
   <body>
-    <div id="content">
-    </div>
+  <div id="content">
+  </div>
+
+  <script type="module">
+		import CETEI from 'CETEIcean';
+		import { createTextAnnotator } from '@soomo/text-annotator';
+		import { TEIPlugin } from '../src/index.ts';
 
-    <script type="module">
-      import CETEI from 'CETEIcean';
-      import { createTextAnnotator } from '@soomo/text-annotator';
-      import { TEIPlugin } from '../src/index.ts';
+		import '@soomo/text-annotator/dist/text-annotator.css';
 
-      import '@soomo/text-annotator/dist/text-annotator.css';
+		window.onload = async function () {
+			var CETEIcean = new CETEI();
 
-      window.onload = async function() {
-        var CETEIcean = new CETEI();
+			CETEIcean.getHTML5('macbeth.xml', data => {
+				document.getElementById('content').appendChild(data);
 
-        CETEIcean.getHTML5('macbeth.xml', data => {
-          document.getElementById('content').appendChild(data);
-
-          var anno = TEIPlugin(createTextAnnotator(document.getElementById('content')));
+				var anno = TEIPlugin(createTextAnnotator(document.getElementById('content')));
 
-          anno.loadAnnotations('annotations.json');
+				anno.loadAnnotations('annotations.json');
 
-          anno.on('createAnnotation', annotation => {
-            console.log('createAnnotation', annotation);
-          });
+				anno.on('createAnnotation', annotation => {
+					console.log('createAnnotation', annotation);
+				});
 
-          anno.on('updateAnnotation', (annotation, previous) => {
-            console.log('updateAnnotation', annotation);
-          });
+				anno.on('updateAnnotation', (annotation, previous) => {
+					console.log('updateAnnotation', annotation);
+				});
 
-          anno.on('deleteAnnotation', (annotation) => {
-            console.log('deleteAnnotation', annotation);
-          });
+				anno.on('deleteAnnotation', (annotation) => {
+					console.log('deleteAnnotation', annotation);
+				});
 
-          anno.on('selectionChanged', (annotations) => {
-            console.log('selectionChanged', annotations);
-          });
+				anno.on('selectionChanged', (annotations) => {
+					console.log('selectionChanged', annotations);
+				});
 
-          anno.on('viewportIntersect', (annotations) => {
-            console.log('viewport', annotations);
-          });
-        });
-      }
-    </script>
+				anno.on('viewportIntersect', (annotations) => {
+					console.log('viewport', annotations);
+				});
+			});
+		};
+  </script>
   </body>
 </html>
diff --git a/packages/text-annotator-react/test/index.html b/packages/text-annotator-react/test/index.html
@@ -5,49 +5,53 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RecogitoJS React</title>
     <style>
-      html, body {
-        background: #fff;
-        padding: 40px;
-        margin: 0;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-      }
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
 
-      h1 {
-        margin: 0;
-        padding: 0 0 20px 0;
-      }
-
-      p {
-        font-size: 17px;
-        line-height: 160%;
-      }
+        html, body {
+            background: #fff;
+            padding: 40px;
+            margin: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
 
-      .popup {
-        background-color: #fff;
-        border: 1px solid gray;
-        padding: 20px;
-      }
+        h1 {
+            margin: 0;
+            padding: 0 0 20px 0;
+        }
 
-      #debug {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        background-color: rgba(0, 0, 0, 0.65);
-        color: #fff;
-      }
+        p {
+            font-size: 17px;
+            line-height: 160%;
+        }
 
-      #debug p {
-        padding: 0;
-        margin: 0;
-      }
+        .popup {
+            background-color: #fff;
+            border: 1px solid gray;
+            padding: 20px;
+        }
+
+        #debug {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.65);
+            color: #fff;
+        }
+
+        #debug p {
+            padding: 0;
+            margin: 0;
+        }
     </style>
   </head>
   <body>
-    <div id="root"></div>
-    <!-- div id="debug"></div -->
-    <script type="module" src="./index.tsx"></script>
+  <div id="root"></div>
+  <!-- div id="debug"></div -->
+  <script type="module" src="./index.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.ts b/packages/text-annotator/src/highlight/span/spansRenderer.ts
@@ -85,7 +85,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
             span.style.borderBottomWidth = `${style.underlineThickness}px`;
 
           if (style.underlineOffset)
-            span.style.paddingBottom = `${style.underlineOffset}px`;
+            span.style.height = `${rect.height + style.underlineOffset}px`
 
           highlightLayer.appendChild(span);
         }