Revize e02e004e

Generating css

webapp/components/annotation/DocumentAnnotationView.tsx

@@ -5 +5 @@
 import { useContext } from 'react';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
 import { Button } from 'antd';
+import { DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME } from '../../constants';
 
 export function DocumentAnnotationView() {
     const { annotation } = useContext(AnnotationContext);
@@ -13 +14 @@
         return <p>Probíhá načítání anotace ...</p>;
     }
 
+    function getCss() {
+
+        let css = 'span.annotation {border-bottom: 2px solid;}\n';
+        css += 'span {line-height: 30px}\n';
+        css +=
+            'span[end="1"] {border-end-end-radius: 0px; border-right: 1px solid darkgray}\n';
+        css +=
+            'span[start="1"] {border-end-start-radius: 0px; border-left: 1px solid darkgray}\n';
+
+        for (const info of annotation?.cssInfo ?? []) {
+            css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${info.instanceId}"] { border-color:${info.color}; padding-bottom: ${info.padding}px }\n`;
+        }
+
+        return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
+    }
+
     return (
         <div>
+            {getCss()}
             <div
                 dangerouslySetInnerHTML={{ __html: annotation.documentToRender ?? '' }}
             />

webapp/constants.ts

@@ -17 +17 @@
 export const COLOR_ERROR = 'indianred';
 
 export const BORDER_RADIUS = 4;
+
+export const DOCUMENT_TAG_ID_ATTRIBUTE_NAME = 'aswi-tag-id';
+export const DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME = 'aswi-tag-instance';
+export const DOCUMENT_OCCURRENCE_ID_ATTRIBUTE_NAME = 'aswi-tag-ef-id';