From 6664471c81795aa8382500aa45adeb44c630ac3b Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Wed, 31 Jul 2024 18:21:41 +0200
Subject: [PATCH] feat: add border color for each of the different 'chips'

add border color for each of the different 'chips' and reproduce the same chips design when adding a chip in the text panel
---
 .../annotations/AnnotationVariantItem.vue     | 10 ++-
 src/stores/annotations.ts                     |  3 +-
 src/utils/annotations.js                      | 64 ++++++++++++++-----
 src/utils/color.js                            |  7 ++
 4 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
index a3739534..e727dee8 100644
--- a/src/components/annotations/AnnotationVariantItem.vue
+++ b/src/components/annotations/AnnotationVariantItem.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex t-mb-1">
-          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]">
+          <div class="t-relative  t-rounded-3xl t-box-border t-w-75 t-h-8 t-border-2 t-p-[2px]" :style="{'border-color': getCurrentVariantItemColor(i)}" >
             <span v-if="variant.witness" v-html="variant.witness" class="t-text-sm"/>
             <span v-else class="t-text-sm"> - </span>
           </div>
@@ -11,6 +11,14 @@
 
 
 <script setup lang="ts">
+import  colors from '@/utils/color'
+import AnnotationIcon from './AnnotationIcon.vue';
+
+
+function getCurrentVariantItemColor(index){
+  return colors()[index]
+}
+
 
 export interface Props {
   annotation: Annotation
diff --git a/src/stores/annotations.ts b/src/stores/annotations.ts
index 2409658c..e5f94a53 100644
--- a/src/stores/annotations.ts
+++ b/src/stores/annotations.ts
@@ -137,7 +137,7 @@ export const useAnnotationsStore = defineStore('annotations', () => {
           console.log('selector', selector)
           AnnotationUtils.highlightTargets(selector, { operation: 'DEC' });
           AnnotationUtils.removeIcon(removeAnnotation);
-          AnnotationUtils.removeWitness(selector)
+          AnnotationUtils.removeWitness(selector, removeAnnotation)
         }
       };
 
@@ -151,7 +151,6 @@ export const useAnnotationsStore = defineStore('annotations', () => {
             if (selector) {
               AnnotationUtils.highlightTargets(selector, { level: -1 });
               AnnotationUtils.removeIcon(annotation);
-              //AnnotationUtils.removeWitness(selector)
             }
           });
         }
diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index e6e3f434..8c594e00 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -1,6 +1,7 @@
 import * as Utils from '@/utils/index';
 import { getIcon } from '@/utils/icons';
 import { i18n } from '@/i18n';
+import  colors from '@/utils/color'
 
 // utility functions that we can use as generic way for perform tranformation on annotations.
 
@@ -235,29 +236,58 @@ export function removeIcon(annotation) {
 
 export function addWitness(element, annotation) {
 
-  const witnessesList = annotation.body.value;
-  let witnessesString = ""
-  
-  witnessesList.forEach((variantItem) => {
-    witnessesString += " " + variantItem.witness;
+  const variantItemsList = annotation.body.value;
+  const parentOfElement = element.parentElement;
+  const indexOfElement = [].slice.call(parentOfElement.children).indexOf(element)
+
+  // get the number of variant items for this annotation and create a list of colors for the border color
+  const numberVariantItems = Object.keys(variantItemsList).length
+  const hexaDecimalColors = colors().slice(0, numberVariantItems)
+
+
+  //let prevElement = element;
+  let i = 0;
+  variantItemsList.forEach((variantItem) => {
+    const witHtmlElement = document.createElement("SPAN");
+    witHtmlElement.innerHTML = variantItem.witness;
+    witHtmlElement.classList.add('t-rounded-3xl', 't-box-border', 't-w-75', 't-h-8', 't-border-2', 't-p-[2px]', 't-text-sm', 't-ml-[3px]')
+    witHtmlElement.style.borderColor = hexaDecimalColors[i] //'t-border-'.concat(tailwindClassColors[i],'-600'))
+    i += 1;
+    // get the parent of the element, find its position in the parent div and then append it after it in order to show it after it - the style of the chip should be different from the element
+    //prevElement.after(witnessHtmlElement)
+    //prevElement = witnessHtmlElement
+    parentOfElement.insertBefore(witHtmlElement, parentOfElement.children[indexOfElement]);
   });
-
-  const witnessesHtmlEl = document.createElement("SPAN");
-  //witnessesHtmlEl.classList.add("t-rounded","t-box-border", "t-w-150", "t-h-8", "t-border-2", "t-p-1");
-  witnessesHtmlEl.innerHTML = witnessesString;
-  witnessesHtmlEl.classList.add('witnesses')
-
-  element.prepend(witnessesHtmlEl);
+  //element.after(witnessesHtml)
+ 
 }
 
-export function removeWitness(selector) {
+export function removeWitness(selector, removeAnnotation) {
   // selector: the selector of the annotated text
 
   const annotatedHtmlEl = document.getElementById(selector.split('#')[1])
-  const witnessHtmlEl = annotatedHtmlEl.getElementsByClassName('witnesses')[0]
-  if (witnessHtmlEl) {
-    witnessHtmlEl.remove();
-  }
+  const parentOfAnnotatedEl = annotatedHtmlEl.parentElement;
+  const variantItemsList = removeAnnotation.body.value;
+
+  const witnessesStringArray = getWitnesses(variantItemsList)
+  
+  parentOfAnnotatedEl.querySelectorAll('span').forEach( (element) => {
+    if (witnessesStringArray.includes(element.innerHTML)) {
+      element.remove()
+    }
+  })
+
+}
+
+function getWitnesses(variantItemsList) {
+  const witnessesStringArray = []
+
+  variantItemsList.forEach((variantItem) =>  {
+    const witnessString = variantItem.witness;
+    witnessesStringArray.push(witnessString)
+  });
+
+  return witnessesStringArray
 }
 
 export function getAnnotationListElement(id, container) {
diff --git a/src/utils/color.js b/src/utils/color.js
index f0e47879..6c78c012 100644
--- a/src/utils/color.js
+++ b/src/utils/color.js
@@ -7,3 +7,10 @@ export const getRGBColor = (hex, type) => {
 
   return `--color-${type}: ${r}, ${g}, ${b}; --color-${type}-accent: ${r - 15}, ${g - 15}, ${b - 15};`;
 };
+
+
+export default function colors() {
+  
+  const hexaDecimalColors = ['#FEF08A', '#BEF264', '#A8A29E', '#D8B4FE', '#A8A29E']
+  return hexaDecimalColors;
+}
\ No newline at end of file