From 5b9be61e1b3fd6424cedbbba70a477d13ae0df04 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Fri, 2 Sep 2022 18:26:55 +0200
Subject: [PATCH 01/10] Feature Tooltip angefangen

---
 src/components/NetworkMap.vue | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index f03fc63..a069657 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -144,6 +144,21 @@
           {{ showRole ? " / " + getRoleShort(mark.d.role) : "" }}
         </text>
         <text
+            class="tooltip"
+            :x="mark.x"
+            :y="mark.y"
+            :text-anchor="mark.x < 0 ? 'end' : 'start'"
+            :dx="mark.x < 0 ? -3 : 3"
+            :dy="mark.y < 0 ? -7 : 10"
+        >
+          {{ mark.d.name }}
+          <br/>{{ mark.d.role }}
+
+        </text>
+        <text
+          @mouseover="showTooltip(mark)"
+          :data-mark="1"
+          class="hover"
           v-if="alteriNames"
           :x="mark.x"
           :y="mark.y"
@@ -217,8 +232,12 @@ interface ConnectionMark {
 
 export default defineComponent({
   components: {},
-
-  setup: function (props, { emit }) {
+  data() {
+    return {
+      hover: false,
+    };
+  },
+  setup(props, { emit }) {
     const store = useStore();
 
     const isEditMode = computed(() => {
@@ -339,6 +358,10 @@ export default defineComponent({
       return buffer.sort((a, b) => b.d.distance - a.d.distance);
     });
 
+    function showTooltip(mark: any) {
+      console.log(mark);
+    }
+
     const connectionMarks = computed((): Array<ConnectionMark> => {
       return store.state.nwk.connections.map((conn) => {
         const coords1 = alteriCoords.value.get(conn.id1);
@@ -357,7 +380,6 @@ export default defineComponent({
         };
       });
     });
-
     return {
       egoShape: computed(() =>
         shapeByGender(true, store.state.nwk.ego.currentGender)
@@ -366,6 +388,7 @@ export default defineComponent({
       isConnectMode,
       clickAlter,
       alteriMarks,
+      showTooltip,
       connectionMarks,
       showAge: computed(() => store.state.view.ageInNwk),
       showRole: computed(() => store.state.view.roleInNwk),
@@ -401,6 +424,10 @@ text {
   user-select: none;
 }
 
+.tooltip{
+
+}
+
 .textbg {
   stroke: white;
   stroke-width: 3;

From b35010d263caec3f6ec6653494ab658c850d764f Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Sun, 4 Sep 2022 21:16:27 +0200
Subject: [PATCH 02/10] Feature Tooltip erweitert

---
 src/components/NetworkMap.vue | 82 +++++++++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 14 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index a069657..df1b6a0 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -143,20 +143,23 @@
           {{ showAge && mark.d.age.length >= 1 ? "/ " + mark.d.age : "" }}
           {{ showRole ? " / " + getRoleShort(mark.d.role) : "" }}
         </text>
+
         <text
-            class="tooltip"
+            v-if="alteriNames && useTextBG"
+            vector-effect="non-scaling-stroke"
             :x="mark.x"
             :y="mark.y"
             :text-anchor="mark.x < 0 ? 'end' : 'start'"
             :dx="mark.x < 0 ? -3 : 3"
-            :dy="mark.y < 0 ? -7 : 10"
+            :dy="mark.y < 0 ? -1 : 4"
         >
-          {{ mark.d.name }}
-          <br/>{{ mark.d.role }}
-
+          <tspan class="toolhover" :x="mark.x" :y="mark.y" :dx="mark.x < 0 ? -3 : 3" :dy="mark.y < 0 ? -10 : -4">{{ mark.d.name }}</tspan>
+          <tspan class="toolhover" :x="mark.x" :y="mark.y" :dx="mark.x < 0 ? -3 : 3" :dy="mark.y < 0 ? -6 : -1">{{ mark.d.role }}</tspan>
         </text>
+
         <text
-          @mouseover="showTooltip(mark)"
+          @mouseover="showTooltip(mark, true)"
+          @mouseleave="showTooltip(mark, false)"
           :data-mark="1"
           class="hover"
           v-if="alteriNames"
@@ -232,11 +235,6 @@ interface ConnectionMark {
 
 export default defineComponent({
   components: {},
-  data() {
-    return {
-      hover: false,
-    };
-  },
   setup(props, { emit }) {
     const store = useStore();
 
@@ -292,6 +290,38 @@ export default defineComponent({
       return getRoleAbbrev(role);
     };
 
+    /*const toolinfo = (mark: AlterMark) => {
+      let div = document.createElement("div")
+      let p = document.createElement("p")
+      let p1 = document.createElement("p1")
+      let content = document.createTextNode(mark.d.name)
+      let content2 = document.createTextNode(mark.d.role)
+      p.appendChild(content)
+      p1.appendChild(content2)
+      div.appendChild(p)
+      div.appendChild(p1)
+
+      const map = document.querySelector("#nwkmap")
+      var tooltop = 0
+      var toolleft = 0
+      if (map != undefined){
+        const mapY = map.getBoundingClientRect().top + map.getBoundingClientRect().height/2 - 50
+        const mapX = map.getBoundingClientRect().left + map.getBoundingClientRect().width/2
+        tooltop = mapY + mark.y
+        toolleft = mapX + mark.x
+        console.log(mapY)
+        console.log(mapX)
+        console.log(mark.y)
+        console.log(mark.x)
+      }
+      div.style.position = "absolute"
+      div.style.left = toolleft + "px"
+      div.style.top = tooltop + "px"
+
+
+      document.body.appendChild(div)
+    }*/
+
     let clickTimeoutId: number | null = null;
     const clickAlter = (alter: Alter) => {
       if (isConnectMode.value && store.state.view.editIndex != null) {
@@ -358,8 +388,18 @@ export default defineComponent({
       return buffer.sort((a, b) => b.d.distance - a.d.distance);
     });
 
-    function showTooltip(mark: any) {
-      console.log(mark);
+    function showTooltip(mark: any, active: boolean) {
+      //toolinfo(mark)
+      var element = document.querySelectorAll(".toolhover")
+      if (active){
+        element = document.querySelectorAll(".toolhover-active")
+      }
+      for (var i = 0; i < element.length; i++) {
+        var e = element[i]
+        active ? e.classList.remove("toolhover-active") : e.classList.remove("toolhover")
+        active ? e.classList.add("toolhover") : e.classList.add("toolhover-active")
+      }
+
     }
 
     const connectionMarks = computed((): Array<ConnectionMark> => {
@@ -388,6 +428,7 @@ export default defineComponent({
       isConnectMode,
       clickAlter,
       alteriMarks,
+      //toolinfo,
       showTooltip,
       connectionMarks,
       showAge: computed(() => store.state.view.ageInNwk),
@@ -424,8 +465,21 @@ text {
   user-select: none;
 }
 
-.tooltip{
+.toolhover{
+  display: none;
+}
+
+.toolhover-active{
+  display: block;
+}
 
+.tooltip {
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  hyphens: none;
+  width: 10px;
+  display: flex;
+  background-color: red;
 }
 
 .textbg {

From e99d2a17ad544c35f0b592713b4c5542f1415ac3 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Tue, 6 Sep 2022 18:06:26 +0200
Subject: [PATCH 03/10] =?UTF-8?q?Feature=20Tooltip=20richtige=20Person=20a?=
 =?UTF-8?q?usgew=C3=A4hlt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NetworkMap.vue | 100 +++++++++++++++++-----------------
 1 file changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index df1b6a0..c724da8 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -145,22 +145,50 @@
         </text>
 
         <text
-            v-if="alteriNames && useTextBG"
-            vector-effect="non-scaling-stroke"
+          v-if="alteriNames && useTextBG"
+          vector-effect="non-scaling-stroke"
+          :x="mark.x"
+          :y="mark.y"
+          :text-anchor="mark.x < 0 ? 'end' : 'start'"
+          :dx="mark.x < 0 ? -3 : 3"
+          :dy="mark.y < 0 ? -1 : 4"
+        >
+          <tspan
+            class="toolhover"
+            :markid="mark.d.id"
             :x="mark.x"
             :y="mark.y"
-            :text-anchor="mark.x < 0 ? 'end' : 'start'"
             :dx="mark.x < 0 ? -3 : 3"
-            :dy="mark.y < 0 ? -1 : 4"
-        >
-          <tspan class="toolhover" :x="mark.x" :y="mark.y" :dx="mark.x < 0 ? -3 : 3" :dy="mark.y < 0 ? -10 : -4">{{ mark.d.name }}</tspan>
-          <tspan class="toolhover" :x="mark.x" :y="mark.y" :dx="mark.x < 0 ? -3 : 3" :dy="mark.y < 0 ? -6 : -1">{{ mark.d.role }}</tspan>
+            :dy="mark.y < 0 ? -15 : -10"
+          >
+            {{ mark.d.name }}
+          </tspan>
+          <tspan
+            class="toolhover"
+            :markid="mark.d.id"
+            :x="mark.x"
+            :y="mark.y"
+            :dx="mark.x < 0 ? -3 : 3"
+            :dy="mark.y < 0 ? -10 : -5"
+          >
+            {{ mark.d.role }}
+          </tspan>
+
+          <tspan
+            class="toolhover"
+            :markid="mark.d.id"
+            :x="mark.x"
+            :y="mark.y"
+            :dx="mark.x < 0 ? -3 : 3"
+            :dy="mark.y < 0 ? -5 : 0"
+          >
+            {{ mark.d.age }}
+          </tspan>
         </text>
 
         <text
           @mouseover="showTooltip(mark, true)"
           @mouseleave="showTooltip(mark, false)"
-          :data-mark="1"
           class="hover"
           v-if="alteriNames"
           :x="mark.x"
@@ -290,38 +318,6 @@ export default defineComponent({
       return getRoleAbbrev(role);
     };
 
-    /*const toolinfo = (mark: AlterMark) => {
-      let div = document.createElement("div")
-      let p = document.createElement("p")
-      let p1 = document.createElement("p1")
-      let content = document.createTextNode(mark.d.name)
-      let content2 = document.createTextNode(mark.d.role)
-      p.appendChild(content)
-      p1.appendChild(content2)
-      div.appendChild(p)
-      div.appendChild(p1)
-
-      const map = document.querySelector("#nwkmap")
-      var tooltop = 0
-      var toolleft = 0
-      if (map != undefined){
-        const mapY = map.getBoundingClientRect().top + map.getBoundingClientRect().height/2 - 50
-        const mapX = map.getBoundingClientRect().left + map.getBoundingClientRect().width/2
-        tooltop = mapY + mark.y
-        toolleft = mapX + mark.x
-        console.log(mapY)
-        console.log(mapX)
-        console.log(mark.y)
-        console.log(mark.x)
-      }
-      div.style.position = "absolute"
-      div.style.left = toolleft + "px"
-      div.style.top = tooltop + "px"
-
-
-      document.body.appendChild(div)
-    }*/
-
     let clickTimeoutId: number | null = null;
     const clickAlter = (alter: Alter) => {
       if (isConnectMode.value && store.state.view.editIndex != null) {
@@ -389,17 +385,15 @@ export default defineComponent({
     });
 
     function showTooltip(mark: any, active: boolean) {
-      //toolinfo(mark)
-      var element = document.querySelectorAll(".toolhover")
-      if (active){
-        element = document.querySelectorAll(".toolhover-active")
-      }
+      var element = document.querySelectorAll(`[markid="${mark.d.id}"]`);
       for (var i = 0; i < element.length; i++) {
-        var e = element[i]
-        active ? e.classList.remove("toolhover-active") : e.classList.remove("toolhover")
-        active ? e.classList.add("toolhover") : e.classList.add("toolhover-active")
+        active
+          ? element[i].classList.remove("toolhover")
+          : element[i].classList.remove("toolhover-active");
+        active
+          ? element[i].classList.add("toolhover-active")
+          : element[i].classList.add("toolhover");
       }
-
     }
 
     const connectionMarks = computed((): Array<ConnectionMark> => {
@@ -465,11 +459,15 @@ text {
   user-select: none;
 }
 
-.toolhover{
+.toolhover {
   display: none;
 }
 
-.toolhover-active{
+.rect {
+  fill: #0c2c78;
+}
+
+.toolhover-active {
   display: block;
 }
 

From b46ecb1580dc202279d631f233ed561eb1646fff Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 21 Sep 2022 14:06:25 +0200
Subject: [PATCH 04/10] =?UTF-8?q?Rect=20zu=20Tooltip=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NetworkMap.vue | 79 ++++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index c724da8..a8e3ac0 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -110,41 +110,20 @@
       </g>
 
       <g v-for="mark in alteriMarks" :key="mark.d.id">
-        <line
-          v-if="connections && mark.d.edgeType >= 1"
-          :class="{ select: mark.selected }"
-          x1="0"
-          y1="0"
-          :x2="mark.x"
-          :y2="mark.y"
-          :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
-        />
-        <use
-          :href="'#' + mark.shape"
-          :x="mark.x"
-          :y="mark.y"
-          class="mark clickAble"
-          width="4"
-          height="4"
-          transform="translate(-2,-2)"
-          @click.stop="clickAlter(mark.d)"
-        />
-        <text
-          v-if="alteriNames && useTextBG"
-          class="textbg"
-          vector-effect="non-scaling-stroke"
-          :x="mark.x"
-          :y="mark.y"
-          :text-anchor="mark.x < 0 ? 'end' : 'start'"
+        <rect
+          style="fill: white"
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x < 0 ? mark.x - 42.5 : mark.x + 0.5"
+          :y="mark.y < 0 ? mark.y - 38.5 : mark.y - 30"
+          :rect-anchor="mark.x < 0 ? 'end' : 'start'"
           :dx="mark.x < 0 ? -3 : 3"
-          :dy="mark.y < 0 ? -1 : 4"
-        >
-          {{ mark.label }}
-          {{ showAge && mark.d.age.length >= 1 ? "/ " + mark.d.age : "" }}
-          {{ showRole ? " / " + getRoleShort(mark.d.role) : "" }}
-        </text>
-
+          :dy="mark.y < 0 ? -15 : -10"
+          width="40"
+          height="30"
+        ></rect>
         <text
+          id="div_template"
           v-if="alteriNames && useTextBG"
           vector-effect="non-scaling-stroke"
           :x="mark.x"
@@ -185,6 +164,40 @@
             {{ mark.d.age }}
           </tspan>
         </text>
+      </g>
+
+      <g v-for="mark in alteriMarks" :key="mark.d.id">
+        <line
+          v-if="connections && mark.d.edgeType >= 1"
+          :class="{ select: mark.selected }"
+          x1="0"
+          y1="0"
+          :x2="mark.x"
+          :y2="mark.y"
+          :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : null"
+        />
+        <use
+          :href="'#' + mark.shape"
+          :x="mark.x"
+          :y="mark.y"
+          class="mark clickAble"
+          width="4"
+          height="4"
+          transform="translate(-2,-2)"
+          @click="clickAlter(mark.d)"
+        />
+        <text
+          v-if="alteriNames && useTextBG"
+          class="textbg"
+          vector-effect="non-scaling-stroke"
+          :x="mark.x"
+          :y="mark.y"
+          :text-anchor="mark.x < 0 ? 'end' : 'start'"
+          :dx="mark.x < 0 ? -3 : 3"
+          :dy="mark.y < 0 ? -1 : 4"
+        >
+          {{ mark.label }}
+        </text>
 
         <text
           @mouseover="showTooltip(mark, true)"

From dd5457fd2b24fdc0aab6304fb5f0aeb7ef6aac1e Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Fri, 30 Sep 2022 12:22:34 +0200
Subject: [PATCH 05/10] =?UTF-8?q?Ecken=20abgerundet=20und=20erste=20Anpass?=
 =?UTF-8?q?ungsschritte=20(gr=C3=B6=C3=9Fe=20von=20Rect)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NetworkMap.vue |  71 ++++++++++--------
 src/components/ToolTip.vue    | 131 ++++++++++++++++++++++++++++++++++
 2 files changed, 171 insertions(+), 31 deletions(-)
 create mode 100644 src/components/ToolTip.vue

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index a8e3ac0..d80b483 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -87,40 +87,24 @@
     </text>
 
     <g id="marks">
-      <g v-for="mark in alteriMarks" :key="'shadow' + mark.d.id">
-        <circle
-          v-if="mark.selected"
-          :cx="mark.x"
-          :cy="mark.y"
-          r="4"
-          fill="url('#selected-gradient')"
-        />
-      </g>
-
-      <g v-if="connections">
-        <line
-          v-for="(mark, index) in connectionMarks"
-          :key="'conn' + index"
-          :x1="mark.x1"
-          :y1="mark.y1"
-          :x2="mark.x2"
-          :y2="mark.y2"
-          :class="{ select: mark.selected }"
-        />
-      </g>
-
       <g v-for="mark in alteriMarks" :key="mark.d.id">
         <rect
           style="fill: white"
           class="toolhover"
           :markid="mark.d.id"
-          :x="mark.x < 0 ? mark.x - 42.5 : mark.x + 0.5"
-          :y="mark.y < 0 ? mark.y - 38.5 : mark.y - 30"
+          :x="mark.x < 0 ? mark.x - 25.5 : mark.x + 2.5"
+          :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
+          :rx="2.5"
+          :ry="2.5"
           :rect-anchor="mark.x < 0 ? 'end' : 'start'"
           :dx="mark.x < 0 ? -3 : 3"
-          :dy="mark.y < 0 ? -15 : -10"
-          width="40"
-          height="30"
+          :dy="mark.y < 0 ? -15 : -11"
+          :width="
+            mark.d.role.length < mark.d.name.length
+              ? mark.d.name.length * 2.5
+              : mark.d.role.length * 2.5
+          "
+          :height="30"
         ></rect>
         <text
           id="div_template"
@@ -137,7 +121,7 @@
             :markid="mark.d.id"
             :x="mark.x"
             :y="mark.y"
-            :dx="mark.x < 0 ? -3 : 3"
+            :dx="mark.x < 0 ? -4 : 4"
             :dy="mark.y < 0 ? -15 : -10"
           >
             {{ mark.d.name }}
@@ -147,7 +131,7 @@
             :markid="mark.d.id"
             :x="mark.x"
             :y="mark.y"
-            :dx="mark.x < 0 ? -3 : 3"
+            :dx="mark.x < 0 ? -4 : 4"
             :dy="mark.y < 0 ? -10 : -5"
           >
             {{ mark.d.role }}
@@ -158,13 +142,34 @@
             :markid="mark.d.id"
             :x="mark.x"
             :y="mark.y"
-            :dx="mark.x < 0 ? -3 : 3"
+            :dx="mark.x < 0 ? -4 : 4"
             :dy="mark.y < 0 ? -5 : 0"
           >
             {{ mark.d.age }}
           </tspan>
         </text>
       </g>
+      <g v-for="mark in alteriMarks" :key="'shadow' + mark.d.id">
+        <circle
+          v-if="mark.selected"
+          :cx="mark.x"
+          :cy="mark.y"
+          r="4"
+          fill="url('#selected-gradient')"
+        />
+      </g>
+
+      <g v-if="connections">
+        <line
+          v-for="(mark, index) in connectionMarks"
+          :key="'conn' + index"
+          :x1="mark.x1"
+          :y1="mark.y1"
+          :x2="mark.x2"
+          :y2="mark.y2"
+          :class="{ select: mark.selected }"
+        />
+      </g>
 
       <g v-for="mark in alteriMarks" :key="mark.d.id">
         <line
@@ -276,7 +281,8 @@ interface ConnectionMark {
 
 export default defineComponent({
   components: {},
-  setup(props, { emit }) {
+
+  setup: function (props, { emit }) {
     const store = useStore();
 
     const isEditMode = computed(() => {
@@ -397,6 +403,7 @@ export default defineComponent({
       return buffer.sort((a, b) => b.d.distance - a.d.distance);
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function showTooltip(mark: any, active: boolean) {
       var element = document.querySelectorAll(`[markid="${mark.d.id}"]`);
       for (var i = 0; i < element.length; i++) {
@@ -482,6 +489,7 @@ text {
 
 .toolhover-active {
   display: block;
+  position: absolute;
 }
 
 .tooltip {
@@ -491,6 +499,7 @@ text {
   width: 10px;
   display: flex;
   background-color: red;
+  position: absolute;
 }
 
 .textbg {
diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
new file mode 100644
index 0000000..590bcc3
--- /dev/null
+++ b/src/components/ToolTip.vue
@@ -0,0 +1,131 @@
+<template>
+  <svg id="tooltip" width="100%" height="100%" viewBox="-105 -105 210 210">
+    <g v-for="mark in alter" :key="mark.d.id">
+      <rect
+        style="fill: white"
+        class="toolhover"
+        :markid="mark.d.id"
+        :x="mark.x < 0 ? mark.x - 20.5 : mark.x + 2.5"
+        :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
+        :rx="2.5"
+        :ry="2.5"
+        :rect-anchor="mark.x < 0 ? 'end' : 'start'"
+        :dx="mark.x < 0 ? -3 : 3"
+        :dy="mark.y < 0 ? -15 : -11"
+        :width="
+          mark.d.role.length < mark.d.name.length
+            ? mark.d.name.length * 2.6
+            : mark.d.role.length * 2.6
+        "
+        :height="30"
+      ></rect>
+      <text
+        id="div_template"
+        v-if="alter && useTextBG"
+        vector-effect="non-scaling-stroke"
+        :x="mark.x"
+        :y="mark.y"
+        :text-anchor="mark.x < 0 ? 'end' : 'start'"
+        :dx="mark.x < 0 ? -3 : 3"
+        :dy="mark.y < 0 ? -1 : 4"
+      >
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -15 : -10"
+        >
+          {{ mark.d.name }}
+        </tspan>
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -10 : -5"
+        >
+          {{ mark.d.role }}
+        </tspan>
+
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -5 : 0"
+        >
+          {{ mark.d.age }}
+        </tspan>
+      </text>
+    </g>
+  </svg>
+</template>
+
+<script>
+import { alteriNames } from "@/components/NetworkMap.vue";
+import { computed, onMounted } from "vue";
+import * as d3 from "d3";
+
+d3.selectAll("tooltip").on("mouseover", function () {
+  d3.select(this).raise();
+});
+
+export default {
+  setup: function () {
+    const alter = alteriNames;
+
+    onMounted(() => {
+      console.log(alteriNames);
+    });
+    return {
+      alter,
+      useTextBG: computed(
+        () =>
+          !(
+            /Safari/.test(navigator.userAgent) &&
+            /Apple Computer/.test(navigator.vendor)
+          )
+      ),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "~bulma/sass/base/_all.sass";
+
+text {
+  font-family: $family-primary;
+  font-size: 4px;
+}
+
+.toolhover {
+  display: none;
+}
+
+.rect {
+  fill: #0c2c78;
+}
+
+.toolhover-active {
+  display: block;
+}
+
+.tooltip {
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  hyphens: none;
+  width: 10px;
+  display: flex;
+  background-color: red;
+}
+
+.textbg {
+  stroke: white;
+  stroke-width: 3;
+}
+</style>

From 49e06ed33da1d8f91e78c72b81bdf10092c1bfec Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Fri, 30 Sep 2022 14:37:31 +0200
Subject: [PATCH 06/10] =?UTF-8?q?Alter=20Notiz=20wird=20ab=20bestimmter=20?=
 =?UTF-8?q?l=C3=A4nge=20abgek=C3=BCrzt=20und=20rect=20ist=20im=20Vordergru?=
 =?UTF-8?q?nd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NetworkMap.vue | 146 +++++++++++++++++++---------------
 1 file changed, 84 insertions(+), 62 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index d80b483..cc677fc 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -87,68 +87,6 @@
     </text>
 
     <g id="marks">
-      <g v-for="mark in alteriMarks" :key="mark.d.id">
-        <rect
-          style="fill: white"
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x < 0 ? mark.x - 25.5 : mark.x + 2.5"
-          :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
-          :rx="2.5"
-          :ry="2.5"
-          :rect-anchor="mark.x < 0 ? 'end' : 'start'"
-          :dx="mark.x < 0 ? -3 : 3"
-          :dy="mark.y < 0 ? -15 : -11"
-          :width="
-            mark.d.role.length < mark.d.name.length
-              ? mark.d.name.length * 2.5
-              : mark.d.role.length * 2.5
-          "
-          :height="30"
-        ></rect>
-        <text
-          id="div_template"
-          v-if="alteriNames && useTextBG"
-          vector-effect="non-scaling-stroke"
-          :x="mark.x"
-          :y="mark.y"
-          :text-anchor="mark.x < 0 ? 'end' : 'start'"
-          :dx="mark.x < 0 ? -3 : 3"
-          :dy="mark.y < 0 ? -1 : 4"
-        >
-          <tspan
-            class="toolhover"
-            :markid="mark.d.id"
-            :x="mark.x"
-            :y="mark.y"
-            :dx="mark.x < 0 ? -4 : 4"
-            :dy="mark.y < 0 ? -15 : -10"
-          >
-            {{ mark.d.name }}
-          </tspan>
-          <tspan
-            class="toolhover"
-            :markid="mark.d.id"
-            :x="mark.x"
-            :y="mark.y"
-            :dx="mark.x < 0 ? -4 : 4"
-            :dy="mark.y < 0 ? -10 : -5"
-          >
-            {{ mark.d.role }}
-          </tspan>
-
-          <tspan
-            class="toolhover"
-            :markid="mark.d.id"
-            :x="mark.x"
-            :y="mark.y"
-            :dx="mark.x < 0 ? -4 : 4"
-            :dy="mark.y < 0 ? -5 : 0"
-          >
-            {{ mark.d.age }}
-          </tspan>
-        </text>
-      </g>
       <g v-for="mark in alteriMarks" :key="'shadow' + mark.d.id">
         <circle
           v-if="mark.selected"
@@ -242,6 +180,82 @@
       width="220"
       height="220"
     />
+    <g v-for="mark in alteriMarks" :key="mark.d.id">
+      <rect
+        style="fill: white"
+        class="toolhover"
+        :markid="mark.d.id"
+        :x="mark.x < 0 ? mark.x - 25.5 : mark.x + 2.5"
+        :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
+        :rx="2.5"
+        :ry="2.5"
+        :rect-anchor="mark.x < 0 ? 'end' : 'start'"
+        :dx="mark.x < 0 ? -3 : 3"
+        :dy="mark.y < 0 ? -15 : -11"
+        :width="
+          mark.d.role.length < mark.d.name.length
+            ? mark.d.name.length * 2.5
+            : mark.d.role.length * 2.5
+        "
+        :height="30"
+      ></rect>
+      <text
+        id="div_template"
+        class="text"
+        v-if="alteriNames && useTextBG"
+        vector-effect="non-scaling-stroke"
+        :x="mark.x"
+        :y="mark.y"
+        :text-anchor="mark.x < 0 ? 'end' : 'start'"
+        :dx="mark.x < 0 ? -3 : 3"
+        :dy="mark.y < 0 ? -1 : 4"
+      >
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -25 : -20"
+        >
+          {{ mark.d.name }}
+        </tspan>
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -20 : -15"
+        >
+          {{ mark.d.role }}
+        </tspan>
+
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -15 : -10"
+        >
+          {{ mark.d.age }}
+        </tspan>
+
+        <tspan
+          class="toolhover"
+          :markid="mark.d.id"
+          :x="mark.x"
+          :y="mark.y"
+          :dx="mark.x < 0 ? -4 : 4"
+          :dy="mark.y < 0 ? -10 : -5"
+        >
+          {{
+            mark.d.note < 8 ? mark.d.note : mark.d.note.substring(0, 15) + "..."
+          }}
+        </tspan>
+      </text>
+    </g>
   </svg>
 </template>
 
@@ -502,6 +516,14 @@ text {
   position: absolute;
 }
 
+.text {
+  display: block;
+  width: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .textbg {
   stroke: white;
   stroke-width: 3;

From fdc2b36aad49102452f8f8473ceb62c37b7b5bda Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Mon, 3 Oct 2022 13:01:59 +0200
Subject: [PATCH 07/10] =?UTF-8?q?Tooltip=20in=20andere=20vue=20Datei=20geb?=
 =?UTF-8?q?racht,=20rect-Breite=20passt=20sich=20korrekt=20an,=20lange=20N?=
 =?UTF-8?q?amen=20&=20Rollen=20werden=20abgek=C3=BCrzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NetworkMap.vue |  80 +-------------
 src/components/ToolTip.vue    | 189 +++++++++++++++++++---------------
 2 files changed, 108 insertions(+), 161 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index cc677fc..6e975b8 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -180,82 +180,7 @@
       width="220"
       height="220"
     />
-    <g v-for="mark in alteriMarks" :key="mark.d.id">
-      <rect
-        style="fill: white"
-        class="toolhover"
-        :markid="mark.d.id"
-        :x="mark.x < 0 ? mark.x - 25.5 : mark.x + 2.5"
-        :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
-        :rx="2.5"
-        :ry="2.5"
-        :rect-anchor="mark.x < 0 ? 'end' : 'start'"
-        :dx="mark.x < 0 ? -3 : 3"
-        :dy="mark.y < 0 ? -15 : -11"
-        :width="
-          mark.d.role.length < mark.d.name.length
-            ? mark.d.name.length * 2.5
-            : mark.d.role.length * 2.5
-        "
-        :height="30"
-      ></rect>
-      <text
-        id="div_template"
-        class="text"
-        v-if="alteriNames && useTextBG"
-        vector-effect="non-scaling-stroke"
-        :x="mark.x"
-        :y="mark.y"
-        :text-anchor="mark.x < 0 ? 'end' : 'start'"
-        :dx="mark.x < 0 ? -3 : 3"
-        :dy="mark.y < 0 ? -1 : 4"
-      >
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -25 : -20"
-        >
-          {{ mark.d.name }}
-        </tspan>
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -20 : -15"
-        >
-          {{ mark.d.role }}
-        </tspan>
-
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -15 : -10"
-        >
-          {{ mark.d.age }}
-        </tspan>
-
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -10 : -5"
-        >
-          {{
-            mark.d.note < 8 ? mark.d.note : mark.d.note.substring(0, 15) + "..."
-          }}
-        </tspan>
-      </text>
-    </g>
+    <ToolTip :marks="alteriMarks" :names="alteriNames" :text="useTextBG" />
   </svg>
 </template>
 
@@ -271,6 +196,7 @@ import { shapeByGender } from "@/data/Gender";
 import { TAB_BASE, TAB_CONNECTIONS } from "@/store/viewOptionsModule";
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { getRoleAbbrev } from "../data/Roles";
+import ToolTip from "@/components/ToolTip.vue";
 
 interface AlterMark {
   d: Alter;
@@ -294,7 +220,7 @@ interface ConnectionMark {
 // emit "map-click" (which is not currently used)
 
 export default defineComponent({
-  components: {},
+  components: { ToolTip },
 
   setup: function (props, { emit }) {
     const store = useStore();
diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index 590bcc3..1aab39c 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -1,100 +1,111 @@
 <template>
-  <svg id="tooltip" width="100%" height="100%" viewBox="-105 -105 210 210">
-    <g v-for="mark in alter" :key="mark.d.id">
-      <rect
-        style="fill: white"
+  <g v-for="mark in marks" :key="mark.d.id">
+    <rect
+      style="fill: white"
+      class="toolhover"
+      :markid="mark.d.id"
+      :x="getXPos(mark)"
+      :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
+      :rx="2.5"
+      :ry="2.5"
+      :rect-anchor="mark.x < 0 ? 'end' : 'start'"
+      :dx="mark.x < 0 ? -3 : 3"
+      :dy="mark.y < 0 ? -15 : -11"
+      :width="calcWidth(mark)"
+      :height="30"
+    ></rect>
+    <text
+      id="div_template"
+      class="text"
+      v-if="names && text"
+      vector-effect="non-scaling-stroke"
+      :x="mark.x"
+      :y="mark.y"
+      :text-anchor="mark.x < 0 ? 'end' : 'start'"
+      :dx="mark.x < 0 ? -3 : 3"
+      :dy="mark.y < 0 ? -1 : 4"
+    >
+      <tspan
         class="toolhover"
         :markid="mark.d.id"
-        :x="mark.x < 0 ? mark.x - 20.5 : mark.x + 2.5"
-        :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
-        :rx="2.5"
-        :ry="2.5"
-        :rect-anchor="mark.x < 0 ? 'end' : 'start'"
-        :dx="mark.x < 0 ? -3 : 3"
-        :dy="mark.y < 0 ? -15 : -11"
-        :width="
-          mark.d.role.length < mark.d.name.length
-            ? mark.d.name.length * 2.6
-            : mark.d.role.length * 2.6
-        "
-        :height="30"
-      ></rect>
-      <text
-        id="div_template"
-        v-if="alter && useTextBG"
-        vector-effect="non-scaling-stroke"
         :x="mark.x"
         :y="mark.y"
-        :text-anchor="mark.x < 0 ? 'end' : 'start'"
-        :dx="mark.x < 0 ? -3 : 3"
-        :dy="mark.y < 0 ? -1 : 4"
+        :dx="mark.x < 0 ? -4 : 4"
+        :dy="mark.y < 0 ? -25 : -20"
       >
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -15 : -10"
-        >
-          {{ mark.d.name }}
-        </tspan>
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -10 : -5"
-        >
-          {{ mark.d.role }}
-        </tspan>
+        {{ mark.d.name }}
+      </tspan>
+      <tspan
+        class="toolhover"
+        :markid="mark.d.id"
+        :x="mark.x"
+        :y="mark.y"
+        :dx="mark.x < 0 ? -4 : 4"
+        :dy="mark.y < 0 ? -20 : -15"
+      >
+        {{
+          mark.d.role < maxWordLength
+            ? mark.d.role
+            : mark.d.role.substring(0, maxWordLength) + "..."
+        }}
+      </tspan>
 
-        <tspan
-          class="toolhover"
-          :markid="mark.d.id"
-          :x="mark.x"
-          :y="mark.y"
-          :dx="mark.x < 0 ? -4 : 4"
-          :dy="mark.y < 0 ? -5 : 0"
-        >
-          {{ mark.d.age }}
-        </tspan>
-      </text>
-    </g>
-  </svg>
-</template>
+      <tspan
+        class="toolhover"
+        :markid="mark.d.id"
+        :x="mark.x"
+        :y="mark.y"
+        :dx="mark.x < 0 ? -4 : 4"
+        :dy="mark.y < 0 ? -15 : -10"
+      >
+        {{ mark.d.age }}
+      </tspan>
 
+      <tspan
+        class="toolhover"
+        :markid="mark.d.id"
+        :x="mark.x"
+        :y="mark.y"
+        :dx="mark.x < 0 ? -4 : 4"
+        :dy="mark.y < 0 ? -10 : -5"
+      >
+        {{
+          mark.d.note < maxWordLength
+            ? mark.d.note
+            : mark.d.note.substring(0, maxWordLength) + "..."
+        }}
+      </tspan>
+    </text>
+  </g>
+</template>
 <script>
-import { alteriNames } from "@/components/NetworkMap.vue";
-import { computed, onMounted } from "vue";
-import * as d3 from "d3";
-
-d3.selectAll("tooltip").on("mouseover", function () {
-  d3.select(this).raise();
-});
-
 export default {
-  setup: function () {
-    const alter = alteriNames;
-
-    onMounted(() => {
-      console.log(alteriNames);
-    });
-    return {
-      alter,
-      useTextBG: computed(
-        () =>
-          !(
-            /Safari/.test(navigator.userAgent) &&
-            /Apple Computer/.test(navigator.vendor)
-          )
-      ),
-    };
+  props: {
+    marks: Array,
+    text: Boolean,
+    names: Boolean,
+  },
+  data() {
+    return { maxWordLength: 20, offset: 2.5 };
+  },
+  methods: {
+    getXPos(mark) {
+      const width = this.calcWidth(mark) + this.offset;
+      const pos = mark.x < 0 ? mark.x - width : mark.x + this.offset;
+      return pos;
+    },
+    calcWidth(mark) {
+      let width =
+        mark.d.role.length < mark.d.name.length
+          ? mark.d.name.length * this.offset
+          : mark.d.role.length * this.offset;
+      if (width > this.maxWordLength * this.offset)
+        width = this.maxWordLength * this.offset;
+      return width;
+    },
   },
 };
 </script>
-
 <style scoped lang="scss">
 @import "~bulma/sass/base/_all.sass";
 
@@ -113,6 +124,7 @@ text {
 
 .toolhover-active {
   display: block;
+  position: absolute;
 }
 
 .tooltip {
@@ -122,6 +134,15 @@ text {
   width: 10px;
   display: flex;
   background-color: red;
+  position: absolute;
+}
+
+.text {
+  display: block;
+  width: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .textbg {

From cd803e69c991fa73587e91ba6639297147c99b47 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Wed, 5 Oct 2022 16:34:14 +0200
Subject: [PATCH 08/10] =?UTF-8?q?H=C3=B6he=20angepasst,=20Anzeigelogik=20v?=
 =?UTF-8?q?erbessert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolTip.vue | 108 +++++++++++++++++++++++++++++++------
 1 file changed, 92 insertions(+), 16 deletions(-)

diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index 1aab39c..478c11c 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -5,14 +5,14 @@
       class="toolhover"
       :markid="mark.d.id"
       :x="getXPos(mark)"
-      :y="mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5"
+      :y="getYPos(mark)"
       :rx="2.5"
       :ry="2.5"
       :rect-anchor="mark.x < 0 ? 'end' : 'start'"
       :dx="mark.x < 0 ? -3 : 3"
       :dy="mark.y < 0 ? -15 : -11"
       :width="calcWidth(mark)"
-      :height="30"
+      :height="calcHeight(mark)"
     ></rect>
     <text
       id="div_template"
@@ -25,28 +25,48 @@
       :dx="mark.x < 0 ? -3 : 3"
       :dy="mark.y < 0 ? -1 : 4"
     >
+      <tspan
+        class="toolhover name"
+        :markid="mark.d.id"
+        :x="mark.x"
+        :y="mark.y"
+        :dx="mark.x < 0 ? -4 : 4"
+        :dy="getTextYPos('name', mark)"
+      >
+        {{
+          mark.d.name.length < maxWordLength
+            ? mark.d.name
+            : mark.d.name.substring(0, maxWordLength + 1) + "..."
+        }}
+      </tspan>
       <tspan
         class="toolhover"
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
         :dx="mark.x < 0 ? -4 : 4"
-        :dy="mark.y < 0 ? -25 : -20"
+        :dy="getTextYPos('role', mark)"
       >
-        {{ mark.d.name }}
+        {{
+          mark.d.role.length < maxWordLength
+            ? "Rolle: " + mark.d.role
+            : "Rolle: " + mark.d.role.substring(0, maxWordLength + 1) + "..."
+        }}
       </tspan>
+
       <tspan
         class="toolhover"
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
         :dx="mark.x < 0 ? -4 : 4"
-        :dy="mark.y < 0 ? -20 : -15"
+        :dy="getTextYPos('gender', mark)"
+        v-if="mark.d.currentGender != 'nicht festgelegt'"
       >
         {{
-          mark.d.role < maxWordLength
-            ? mark.d.role
-            : mark.d.role.substring(0, maxWordLength) + "..."
+          mark.d.human
+            ? "Geschlecht: " + mark.d.currentGender
+            : "Kategorie: " + mark.d.currentGender
         }}
       </tspan>
 
@@ -56,9 +76,26 @@
         :x="mark.x"
         :y="mark.y"
         :dx="mark.x < 0 ? -4 : 4"
-        :dy="mark.y < 0 ? -15 : -10"
+        :dy="getTextYPos('age', mark)"
+        v-if="mark.d.age.length > 0"
+      >
+        {{ "Alter: " + mark.d.age }}
+      </tspan>
+
+      <tspan
+        class="toolhover"
+        :markid="mark.d.id"
+        :x="mark.x"
+        :y="mark.y"
+        :dx="mark.x < 0 ? -4 : 4"
+        :dy="getTextYPos('note1', mark)"
+        v-if="mark.d.note.length > 0"
       >
-        {{ mark.d.age }}
+        {{
+          mark.d.note.length < maxWordLength
+            ? "Notiz: " + mark.d.note
+            : "Notiz: " + mark.d.note.substring(0, maxWordLength + 1) + "-"
+        }}
       </tspan>
 
       <tspan
@@ -67,12 +104,10 @@
         :x="mark.x"
         :y="mark.y"
         :dx="mark.x < 0 ? -4 : 4"
-        :dy="mark.y < 0 ? -10 : -5"
+        :dy="getTextYPos('note2', mark)"
       >
         {{
-          mark.d.note < maxWordLength
-            ? mark.d.note
-            : mark.d.note.substring(0, maxWordLength) + "..."
+          mark.d.note.substring(maxWordLength + 1, maxWordLength * 2) + "..."
         }}
       </tspan>
     </text>
@@ -86,7 +121,7 @@ export default {
     names: Boolean,
   },
   data() {
-    return { maxWordLength: 20, offset: 2.5 };
+    return { maxWordLength: 20, offset: 2.5, defaultHeight: 15 };
   },
   methods: {
     getXPos(mark) {
@@ -99,10 +134,47 @@ export default {
         mark.d.role.length < mark.d.name.length
           ? mark.d.name.length * this.offset
           : mark.d.role.length * this.offset;
-      if (width > this.maxWordLength * this.offset)
+      if (width > this.maxWordLength * this.offset || mark.d.note.length > 0)
         width = this.maxWordLength * this.offset;
       return width;
     },
+    getTextYPos(attribute, mark) {
+      const attributesNotNull = {
+        note2: mark.d.note.length > this.maxWordLength,
+        note1: mark.d.note.length > 0,
+        age: mark.d.age.length > 0,
+        gender: mark.d.currentGender != "nicht festgelegt",
+        role: true,
+        name: true,
+      };
+      let startPosition = mark.y < 0 ? -5 : 0;
+      for (const attr in attributesNotNull) {
+        if (attributesNotNull[attr]) {
+          startPosition -= 5;
+          if (attr == attribute) {
+            return startPosition;
+          }
+        }
+      }
+      return startPosition;
+    },
+    calcHeight(mark) {
+      let heightText = this.getTextYPos(null, mark) * -1;
+      if (heightText < this.defaultHeight) {
+        return this.defaultHeight;
+      }
+      //heightText -= this.defaultHeight;
+      return heightText + 5;
+    },
+    getYPos(mark) {
+      //mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5
+      const defaultPos = mark.y < 0 ? mark.y - 4.5 : mark.y;
+      console.log(
+        mark.d.currentGender != undefined ||
+          mark.d.currentGender != "nicht festgelegt"
+      );
+      return defaultPos - this.calcHeight(mark);
+    },
   },
 };
 </script>
@@ -114,6 +186,10 @@ text {
   font-size: 4px;
 }
 
+.name {
+  font-weight: bold;
+}
+
 .toolhover {
   display: none;
 }

From 2ff76977447a4eae514d3dedfc6fe83a21d4a5c7 Mon Sep 17 00:00:00 2001
From: julia221501 <sakura.ju22150@gmail.com>
Date: Thu, 6 Oct 2022 12:07:24 +0200
Subject: [PATCH 09/10] =?UTF-8?q?Hover=20auch=20auf=20Punkten,=20Notiz=20w?=
 =?UTF-8?q?ird=20bei=20Leertaste=20getrennt=20und=20nicht=20im=20Wort,=20g?=
 =?UTF-8?q?esamter=20Tooltip=20Text=20nun=20linksb=C3=BCndig,=20Rahmen=20u?=
 =?UTF-8?q?m=20rect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NetworkMap.vue | 31 +++------------------
 src/components/ToolTip.vue    | 51 +++++++++++++++++++++--------------
 2 files changed, 35 insertions(+), 47 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 6e975b8..9543b85 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -120,10 +120,12 @@
           :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : null"
         />
         <use
+          @mouseover="showTooltip(mark, true)"
+          @mouseleave="showTooltip(mark, false)"
           :href="'#' + mark.shape"
           :x="mark.x"
           :y="mark.y"
-          class="mark clickAble"
+          class="mark clickAble hover"
           width="4"
           height="4"
           transform="translate(-2,-2)"
@@ -382,7 +384,6 @@ export default defineComponent({
       isConnectMode,
       clickAlter,
       alteriMarks,
-      //toolinfo,
       showTooltip,
       connectionMarks,
       showAge: computed(() => store.state.view.ageInNwk),
@@ -415,31 +416,7 @@ export default defineComponent({
 text {
   font-family: $family-primary;
   font-size: 4px;
-  -webkit-user-select: none; /* Safari */
-  user-select: none;
-}
-
-.toolhover {
-  display: none;
-}
-
-.rect {
-  fill: #0c2c78;
-}
-
-.toolhover-active {
-  display: block;
-  position: absolute;
-}
-
-.tooltip {
-  overflow-wrap: break-word;
-  white-space: pre-line;
-  hyphens: none;
-  width: 10px;
-  display: flex;
-  background-color: red;
-  position: absolute;
+  cursor: pointer;
 }
 
 .text {
diff --git a/src/components/ToolTip.vue b/src/components/ToolTip.vue
index 478c11c..f81e0b9 100644
--- a/src/components/ToolTip.vue
+++ b/src/components/ToolTip.vue
@@ -1,7 +1,7 @@
 <template>
   <g v-for="mark in marks" :key="mark.d.id">
     <rect
-      style="fill: white"
+      style="fill: white; stroke: lightgrey; stroke-width: 0.4"
       class="toolhover"
       :markid="mark.d.id"
       :x="getXPos(mark)"
@@ -21,7 +21,7 @@
       vector-effect="non-scaling-stroke"
       :x="mark.x"
       :y="mark.y"
-      :text-anchor="mark.x < 0 ? 'end' : 'start'"
+      :text-anchor="'start'"
       :dx="mark.x < 0 ? -3 : 3"
       :dy="mark.y < 0 ? -1 : 4"
     >
@@ -30,7 +30,7 @@
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
-        :dx="mark.x < 0 ? -4 : 4"
+        :dx="mark.x < 0 ? -calcWidth(mark) : 5.5"
         :dy="getTextYPos('name', mark)"
       >
         {{
@@ -44,11 +44,11 @@
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
-        :dx="mark.x < 0 ? -4 : 4"
+        :dx="mark.x < 0 ? -calcWidth(mark) : 5.5"
         :dy="getTextYPos('role', mark)"
       >
         {{
-          mark.d.role.length < maxWordLength
+          mark.d.role.length <= maxWordLength
             ? "Rolle: " + mark.d.role
             : "Rolle: " + mark.d.role.substring(0, maxWordLength + 1) + "..."
         }}
@@ -59,7 +59,7 @@
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
-        :dx="mark.x < 0 ? -4 : 4"
+        :dx="mark.x < 0 ? -calcWidth(mark) : 5.5"
         :dy="getTextYPos('gender', mark)"
         v-if="mark.d.currentGender != 'nicht festgelegt'"
       >
@@ -75,11 +75,11 @@
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
-        :dx="mark.x < 0 ? -4 : 4"
+        :dx="mark.x < 0 ? -calcWidth(mark) : 5.5"
         :dy="getTextYPos('age', mark)"
         v-if="mark.d.age.length > 0"
       >
-        {{ "Alter: " + mark.d.age }}
+        {{ "Alter: " + mark.d.age + " Jahre" }}
       </tspan>
 
       <tspan
@@ -87,14 +87,18 @@
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
-        :dx="mark.x < 0 ? -4 : 4"
+        :dx="mark.x < 0 ? -calcWidth(mark) : 5.5"
         :dy="getTextYPos('note1', mark)"
         v-if="mark.d.note.length > 0"
       >
         {{
           mark.d.note.length < maxWordLength
             ? "Notiz: " + mark.d.note
-            : "Notiz: " + mark.d.note.substring(0, maxWordLength + 1) + "-"
+            : "Notiz: " +
+              mark.d.note.substring(
+                0,
+                mark.d.note.slice(0, maxWordLength).lastIndexOf(" ") + 1
+              )
         }}
       </tspan>
 
@@ -103,11 +107,20 @@
         :markid="mark.d.id"
         :x="mark.x"
         :y="mark.y"
-        :dx="mark.x < 0 ? -4 : 4"
+        :dx="mark.x < 0 ? -calcWidth(mark) : 5.5"
         :dy="getTextYPos('note2', mark)"
+        v-if="mark.d.note.length > this.maxWordLength"
       >
         {{
-          mark.d.note.substring(maxWordLength + 1, maxWordLength * 2) + "..."
+          mark.d.note.length > maxWordLength * 2 + 6
+            ? mark.d.note.substring(
+                mark.d.note.slice(0, maxWordLength).lastIndexOf(" ") + 1,
+                maxWordLength * 2 + 6
+              ) + "..."
+            : mark.d.note.substring(
+                mark.d.note.slice(0, maxWordLength).lastIndexOf(" ") + 1,
+                maxWordLength * 2 + 6
+              )
         }}
       </tspan>
     </text>
@@ -133,10 +146,10 @@ export default {
       let width =
         mark.d.role.length < mark.d.name.length
           ? mark.d.name.length * this.offset
-          : mark.d.role.length * this.offset;
+          : mark.d.role.length * this.offset + 7;
       if (width > this.maxWordLength * this.offset || mark.d.note.length > 0)
-        width = this.maxWordLength * this.offset;
-      return width;
+        width = this.maxWordLength * this.offset + 7;
+      return mark.x < 0 ? width + 3.5 : width + 2;
     },
     getTextYPos(attribute, mark) {
       const attributesNotNull = {
@@ -164,15 +177,11 @@ export default {
         return this.defaultHeight;
       }
       //heightText -= this.defaultHeight;
-      return heightText + 5;
+      return mark.y < 0 ? heightText + 2 : heightText + 7;
     },
     getYPos(mark) {
       //mark.y < 0 ? mark.y - 34.5 : mark.y - 30.5
       const defaultPos = mark.y < 0 ? mark.y - 4.5 : mark.y;
-      console.log(
-        mark.d.currentGender != undefined ||
-          mark.d.currentGender != "nicht festgelegt"
-      );
       return defaultPos - this.calcHeight(mark);
     },
   },
@@ -196,6 +205,8 @@ text {
 
 .rect {
   fill: #0c2c78;
+  stroke: grey;
+  stroke-width: 2;
 }
 
 .toolhover-active {

From b06c9c2a313cef207460e911732f22293d473c45 Mon Sep 17 00:00:00 2001
From: Alexander Rind <1217527+alex-rind@users.noreply.github.com>
Date: Mon, 17 Oct 2022 15:18:28 +0200
Subject: [PATCH 10/10] recommit some bug fixes that got lost

---
 src/components/NetworkMap.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index 9543b85..8d4e8f4 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -117,7 +117,7 @@
           y1="0"
           :x2="mark.x"
           :y2="mark.y"
-          :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : null"
+          :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
         />
         <use
           @mouseover="showTooltip(mark, true)"
@@ -129,7 +129,7 @@
           width="4"
           height="4"
           transform="translate(-2,-2)"
-          @click="clickAlter(mark.d)"
+          @click.stop="clickAlter(mark.d)"
         />
         <text
           v-if="alteriNames && useTextBG"
@@ -142,6 +142,8 @@
           :dy="mark.y < 0 ? -1 : 4"
         >
           {{ mark.label }}
+          {{ showAge && mark.d.age.length >= 1 ? "/ " + mark.d.age : "" }}
+          {{ showRole ? " / " + getRoleShort(mark.d.role) : "" }}
         </text>
 
         <text