Merge branch 'main' into clique_analysis

README.md

@@ -1,7 +1,7 @@
 # easyNWK Web
 
 This project aims to provide a modern web-based version of the easyNWK.
-The easyNWK is an egocentric network visualization tool for social workers and
+The easyNWK is an egocentered network visualization tool for social workers and
 healthcare professionals based on the book
 [Soziale Diagnostik](https://www.vandenhoeck-ruprecht-verlage.com/themen-entdecken/paedagogik-soziale-arbeit/soziale-arbeit/26908/soziale-diagnostik)
 by Peter Pantuček-Eisenbacher.

src/assets/main.scss

@@ -39,9 +39,9 @@ $panel-shadow: none;
 .panel-block,
 .panel-heading,
 .panel-tabs {
-  border-bottom: 1px solid #dbdbdb;
-  border-left: 1px solid #dbdbdb;
-  border-right: 1px solid #dbdbdb;
+  border-bottom: 1px solid #C6C6C6;
+  border-left: 1px solid #C6C6C6;
+  border-right: 1px solid #C6C6C6;
 }
 
 // equal height with or without large icon
@@ -54,3 +54,10 @@ $panel-shadow: none;
 .clickAble {
   cursor: pointer;
 }
+
+.textarea,
+.input,
+.select select,
+.button {
+  border-color: #aaa;
+}

src/components/EgoHeader.vue

@@ -51,7 +51,7 @@ export default defineComponent({
 #ego {
   display: flex;
   align-items: center;
-  color: black
+  color: black;
 }
 
 #ego > :last-child {

src/components/NetworkMap.vue

@@ -36,8 +36,8 @@
         />
       </symbol>
       <radialGradient id="selected-gradient">
-        <stop offset="60%" stop-color="rgb(0, 80, 150)" stop-opacity="0.25" />
-        <stop offset="100%" stop-color="rgb(0, 80, 150)" stop-opacity="0" />
+        <stop offset="60%" stop-color="rgb(28, 135, 230)" stop-opacity="0.25" />
+        <stop offset="100%" stop-color="rgb(28, 135, 230)" stop-opacity="0" />
       </radialGradient>
       <filter id="dilate-and-xor">
         <!-- h/t https://stackoverflow.com/a/63287731/1140589 -->
@@ -69,7 +69,7 @@
           v-if="mark.selected"
           :cx="mark.x"
           :cy="mark.y"
-          r="4"
+          :r="iconSize * 1.5"
           fill="url('#selected-gradient')"
         />
       </g>
@@ -88,7 +88,7 @@
 
       <g v-for="mark in alteriMarks" :key="mark.d.id">
         <line
-          v-if="connections && mark.d.edgeType >= 1"
+          v-if="connectionsEgo && mark.d.edgeType >= 1"
           :class="{ select: mark.selected }"
           :x1="egoCoords[0]"
           :y1="egoCoords[1]"
@@ -104,7 +104,7 @@
           :x="mark.x"
           :y="mark.y"
           :text-anchor="mark.x < 0 ? 'end' : 'start'"
-          :dx="mark.x < 0 ? -3 : 3"
+          :dx="mark.x < 0 ? -0.7 * iconSize : 0.7 * iconSize"
           :dy="mark.y < 0 ? -1 : 4"
         >
           {{ mark.label }}
@@ -117,7 +117,7 @@
           :x="mark.x"
           :y="mark.y"
           :text-anchor="mark.x < 0 ? 'end' : 'start'"
-          :dx="mark.x < 0 ? -3 : 3"
+          :dx="mark.x < 0 ? -0.7 * iconSize : 0.7 * iconSize"
           :dy="mark.y < 0 ? -1 : 4"
         >
           {{ mark.label }}
@@ -131,17 +131,18 @@
         :x="egoCoords[0]"
         :y="egoCoords[1]"
         class="mark"
-        width="4"
-        height="4"
-        transform="translate(-2,-2)"
+        :width="iconSize"
+        :height="iconSize"
+        :transform="iconTranslate"
         v-if="!emoji || !egoEmoji"
       />
       <text
         v-if="emoji && egoEmoji"
         :x="egoCoords[0]"
-        :y="egoCoords[1] + 1"
+        :y="egoCoords[1] + iconSize / 4"
         class="mark"
-        style="font-size: 4px; cursor: pointer; text-anchor: middle"
+        style="cursor: pointer"
+        :style="{ 'font-size': iconSize + 'px' }"
       >
         {{ egoEmoji }}
       </text>
@@ -152,11 +153,11 @@
         <template v-if="mark.d.emoji && emoji">
           <text
             :key="mark.d.id"
-            :x="mark.x - 3"
-            :y="mark.y + 1"
+            :x="mark.x"
+            :y="mark.y + iconSize / 4"
             class="mark clickAble"
             @click.stop="clickAlter(mark.d)"
-            style="font-size: 4px; cursor: pointer"
+            :style="{ 'font-size': iconSize + 'px' }"
           >
             {{ mark.d.emoji }}
           </text>
@@ -168,9 +169,9 @@
             :x="mark.x"
             :y="mark.y"
             class="mark clickAble"
-            width="4"
-            height="4"
-            transform="translate(-2,-2)"
+            :width="iconSize"
+            :height="iconSize"
+            :transform="iconTranslate"
             @click.stop="clickAlter(mark.d)"
           />
         </template>
@@ -687,6 +688,7 @@ export default defineComponent({
           clearTimeout(clickTimeoutId);
           clickTimeoutId = null;
           console.log(alter.name + " dblclick");
+          console.log("Text here");
 
           // open form
           store.commit("openAlterFormById", { alterId: alter.id });
@@ -776,11 +778,19 @@ export default defineComponent({
       alteriMarks,
       connectionMarks,
       labelSize: computed(() => store.state.view.labelSizeInNwk),
+      iconSize: computed(() => store.state.view.iconSizeInNwk),
+      iconTranslate: computed(
+        () =>
+          `translate(${store.state.view.iconSizeInNwk / -2},${
+            store.state.view.iconSizeInNwk / -2
+          })`
+      ),
       showAge: computed(() => store.state.view.ageInNwk),
       showRole: computed(() => store.state.view.roleInNwk),
       getRoleShort,
       alteriNames: computed(() => store.state.view.alteriNames),
       connections: computed(() => store.state.view.connections),
+      connectionsEgo: computed(() => store.state.view.connectionsEgo),
       emoji: computed(() => store.state.view.emoji),
       brushBtns,
       isClusterConnectPossible,
@@ -841,7 +851,9 @@ line {
 line.select {
   // stroke: rgb(136, 159, 213);
   // stroke: rgb($fhstpblue, 0.6);
-  stroke: rgb(102, 150, 192);
+  stroke: rgb(28, 135, 230);
+  stroke-dasharray: 5, 1;
+  //altes blau rgb(102, 150, 192);
 }
 
 #position {
@@ -854,12 +866,16 @@ line.select {
   fill: $color-primary-0;
 }
 
-.mark {
+use.mark {
   fill: rgb(54, 54, 54);
   stroke: white;
   stroke-width: 0.2;
 }
 
+text.mark {
+  text-anchor: middle;
+}
+
 .edithint {
   fill: rgba(lightgray, 0.5);
   font-size: 1em;

src/components/ViewOptionsPanel.vue

@@ -42,7 +42,7 @@
             <input
               type="range"
               id="text-size"
-              min="2"
+              min="3"
               max="13"
               v-model="textSize"
               :disabled="!alteriNames"
@@ -58,26 +58,48 @@
           </div>
           <div class="control">
             <label class="checkbox">
-              <input type="checkbox" v-model="connections" />
-              <span>{{ t("connectionson") }}</span>
+              <input type="checkbox" v-model="connectionsEgo" />
+              <span>{{ t("connectionsego") }}</span>
             </label>
           </div>
           <div class="control">
             <label class="checkbox">
-              <input type="checkbox" v-model="emoji" />
-              <span>{{ t("emojion") }}</span>
+              <input type="checkbox" v-model="connections" />
+              <span>{{ t("connectionson") }}</span>
             </label>
           </div>
+          <div class="control">
+            <label for="text-size">{{ t("changesizeEmoji") }}</label>
+            &nbsp;
+            <input
+              type="range"
+              id="icon-size"
+              min="3"
+              max="8"
+              v-model="iconSize"
+            />
+          </div>
         </div>
         <div>
           <div class="control">
-            <button class="button" @click.stop="togglePseudonyms">
+            <button
+              class="button"
+              @click.stop="togglePseudonyms"
+              style="margin-right: 1vw"
+            >
               <span class="icon">
                 <font-awesome-icon icon="user-secret" />
               </span>
               <span v-if="pseudonyms">{{ t("anonymiseoff") }}</span>
               <span v-else>{{ t("anonymiseon") }}</span>
             </button>
+            <button class="button" @click.stop="toggleEmoji">
+              <span class="icon">
+                <font-awesome-icon icon="icons" />
+              </span>
+              <span v-if="emoji">{{ t("emojioff") }}</span>
+              <span v-else>{{ t("emojion") }}</span>
+            </button>
           </div>
         </div>
       </div>
@@ -126,6 +148,15 @@ export default defineComponent({
       },
     });
 
+    const iconSize = computed({
+      get(): number {
+        return store.state.view.iconSizeInNwk;
+      },
+      set(value: number) {
+        store.commit("view/setIconSizeInNwk", value);
+      },
+    });
+
     // getter & setter for checkboxes
     function accessFlag(flag: keyof ViewOptionsFlags) {
       return computed({
@@ -142,14 +173,21 @@ export default defineComponent({
     return {
       pseudonyms: computed(() => store.state.pseudonym.active),
       togglePseudonyms: () => store.commit("pseudonym/toggle"),
+      toggleEmoji: () =>
+        store.commit("view/updateFlag", {
+          flag: "emoji",
+          value: !store.state.view.emoji,
+        }),
       horizons: accessFlag("horizons"),
       connections: accessFlag("connections"),
+      connectionsEgo: accessFlag("connectionsEgo"),
       emoji: accessFlag("emoji"),
       alteriNames: accessFlag("alteriNames"),
       isOpen,
       showAge: accessFlag("ageInNwk"),
       showRole: accessFlag("roleInNwk"),
       textSize,
+      iconSize,
       //markSize,
       //changeMarkSize,
     };

src/data/AlterCategories.ts

@@ -25,7 +25,7 @@ export const CATEGORY_TRANSLATIONS: Record<string, Record<string, string>> = {
   //   de: "Kreis 3 + 2 + 1",
   //   en: "Circle 3 + 2 + 1",
   // },
-  "prof. Hilfe": {
+  "Prof. Hilfe": {
     de: "Prof. Hilfe",
     en: "Professional Help",
   },

src/data/ViewOptions.ts

@@ -1,6 +1,7 @@
 export interface ViewOptionsFlags {
   horizons: boolean;
   connections: boolean;
+  connectionsEgo: boolean;
   emoji: boolean;
   alteriNames: boolean;
   ageInNwk: boolean;
@@ -9,18 +10,21 @@ export interface ViewOptionsFlags {
 
 export interface ViewOptions extends ViewOptionsFlags {
   labelSizeInNwk: number;
+  iconSizeInNwk: number;
 }
 
 export function initDefaultViewOptions(): ViewOptions {
   return {
     // pseudonyms: true,
     horizons: false,
     connections: true,
+    connectionsEgo: true,
     emoji: false,
     alteriNames: true,
     ageInNwk: false,
     roleInNwk: false,
 
     labelSizeInNwk: 5,
+    iconSizeInNwk: 4,
   };
 }

src/de.ts

@@ -77,8 +77,10 @@ export default {
         changesize: "Textgröße:",
         anonymiseon: "Anonymisieren",
         horizonson: "Horizonte",
-        connectionson: "Verbindungen",
-        emojion: "Emojis",
+        connectionson: "Verbindungen zw. Kontakten",
+        connectionsego: "Verbindungen zu Ego",
+        emojion: "Emojis anzeigen",
+        emojioff: "Emojis ausblenden",
         namesofcontactson: "Beschriftung der Kontakte",
         ageofcontactson: "zusätzlich: Alter (Jahre)",
         roleofcontactson: "zusätzlich: Rolle der Kontakte",
@@ -212,6 +214,7 @@ export default {
         selectemoji: "Emoji auswählen",
         removeemoji: "Emoji entfernen",
         amountClique: "Anzahl Cliquen",
+        changesizeEmoji: "Icon Größe: ",
       },
     };
   },

src/en.ts

@@ -76,8 +76,10 @@ export default {
         changesize: "Text size:",
         anonymiseon: "Anonymise",
         horizonson: "Horizons",
-        connectionson: "Connections",
-        emojion: "Emojis",
+        connectionson: "Connections between contacts",
+        connectionsego: "Connections to ego",
+        emojion: "Show emojis",
+        emojioff: "Hide emojis",
         namesofcontactson: "Labels for contacts",
         ageofcontactson: "Age of contacts",
         roleofcontactson: "Role of contacts",
@@ -208,6 +210,7 @@ export default {
         selectemoji: "Select emoji",
         removeemoji: "Remove emoji",
         amountClique: "Number of Cliques",
+        changesizeEmoji: "Icon size: ",
       },
     };
   },

src/main.ts

@@ -53,6 +53,7 @@ import {
   faUnlink,
   faArrowsAlt,
   faCopy,
+  faIcons,
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faBars,
@@ -96,7 +97,8 @@ library.add(
   faInfo,
   faLink,
   faUnlink,
-  faArrowsAlt
+  faArrowsAlt,
+  faIcons
 );
 
 // Vue.component("font-awesome-icon", FontAwesomeIcon);