Fixes

src/App.vue

@@ -54,7 +54,7 @@ async function loadSettings() {
         style="display: none"
       />
       <button @click="() => xmlInput?.click()">Load Gramps xml</button>
-      <button @click="settingsStore.reset">Reset Settings</button>
+      <button @click="() => settingsStore.reset()">Reset Settings</button>
       <button @click="exportSettings">Export Settings</button>
       <input
         type="file"

src/components/FamilyNode.vue

@@ -33,8 +33,9 @@ const startAngle = computed(() => {
     if (minParent <= start) {
       start = minParent;
     } else {
-      // TODO: setting
-      start -= 5;
+      start -=
+        (settings.value.layout.unknownMarriageExtension * 180) /
+        (radius.value * Math.PI);
     }
 
     return start;
@@ -55,16 +56,16 @@ const endAngle = computed(() => {
     if (maxParent >= end) {
       end = maxParent;
     } else {
-      end += 5;
+      end +=
+        (settings.value.layout.unknownMarriageExtension * 180) /
+        (radius.value * Math.PI);
     }
 
     return end;
   }
 });
 
-const centerAngle = computed(
-  () => startAngle.value + (endAngle.value - startAngle.value) / 2,
-);
+const centerAngle = computed(() => (startAngle.value + endAngle.value) / 2);
 
 const reversed = computed(() => centerAngle.value % 360 <= 180);
 const radius = computed(() => scale(family.value.marriage.date));

src/settings.json

@@ -4,7 +4,8 @@
     "textSize": 12,
     "maxYear": 2020,
     "minFamilyWidth": 80,
-    "fadeYears": 15
+    "fadeYears": 15,
+    "unknownMarriageExtension": 10
   },
   "dateLabels": [90, 270],
   "colors": {

src/stores/settingsStore.ts

@@ -33,6 +33,10 @@ export interface Settings {
      * Size of lifeline gradient, in years, when date of death is uncertain.
      */
     fadeYears: number;
+    /**
+     * Length of tail on marriage line when one partner is unknown.
+     */
+    unknownMarriageExtension: number;
   };
   /**
    * Angle of each line of date labels.