added

src/app/pages/danka-detail/danka-detail.html

@@ -320,7 +320,7 @@
             <div class="family-tree-diagram">
               <div class="family-tree-svg-container">
 
-                <svg #familyTreeSvg width="3000" height="3000">
+                <svg #familyTreeSvg width="1000" height="1000">
 
                   @for (
                   layout of unitLayouts;
@@ -339,15 +339,23 @@
                   as childLayout
                   ) {
 
-                  <line [attr.x1]="layout.x + 160" [attr.y1]="layout.y + 80" [attr.x2]="layout.x + 160"
-                    [attr.y2]="((layout.y + 80) + childLayout.y) / 2" stroke="black" stroke-width="2" />
+                  <!-- 親から中間点 -->
 
-                  <line [attr.x1]="layout.x + 160" [attr.y1]="((layout.y + 80) + childLayout.y) / 2"
-                    [attr.x2]="childLayout.x + 160" [attr.y2]="((layout.y + 80) + childLayout.y) / 2" stroke="black"
+                  <line [attr.x1]="getCenterX(layout)" [attr.y1]="getBottomCenterY(layout)"
+                    [attr.x2]="getCenterX(layout)" [attr.y2]="getMiddleY(layout, childLayout)" stroke="black"
                     stroke-width="2" />
 
-                  <line [attr.x1]="childLayout.x + 160" [attr.y1]="((layout.y + 80) + childLayout.y) / 2"
-                    [attr.x2]="childLayout.x + 160" [attr.y2]="childLayout.y" stroke="black" stroke-width="2" />
+                  <!-- 横線 -->
+
+                  <line [attr.x1]="getCenterX(layout)" [attr.y1]="getMiddleY(layout, childLayout)"
+                    [attr.x2]="getCenterX(childLayout)" [attr.y2]="getMiddleY(layout, childLayout)" stroke="black"
+                    stroke-width="2" />
+
+                  <!-- 子へ -->
+
+                  <line [attr.x1]="getCenterX(childLayout)" [attr.y1]="getMiddleY(layout, childLayout)"
+                    [attr.x2]="getCenterX(childLayout)" [attr.y2]="getTopCenterY(childLayout)" stroke="black"
+                    stroke-width="2" />
 
                   }
 
@@ -360,30 +368,36 @@
                   track layout.node.unit.id
                   ) {
 
+                  <!-- 夫婦線 -->
+
                   @if (
                   layout.node.unit.husband &&
                   layout.node.unit.wife
                   ) {
 
-                  <line [attr.x1]="layout.x + 140" [attr.y1]="layout.y + 35" [attr.x2]="layout.x + 180"
-                    [attr.y2]="layout.y + 35" stroke="red" stroke-width="2" />
+                  <line [attr.x1]="layout.x + PERSON_WIDTH" [attr.y1]="layout.y + PERSON_HEIGHT / 2"
+                    [attr.x2]="layout.x + PERSON_WIDTH + SPOUSE_GAP" [attr.y2]="layout.y + PERSON_HEIGHT / 2"
+                    stroke="red" stroke-width="2" />
 
                   }
 
-
                   <!-- 夫 -->
 
                   @if (
                   layout.node.unit.husband
                   ) {
 
-                  <rect [attr.x]="layout.x" [attr.y]="layout.y" width="140" height="70" fill="#dbeafe" stroke="black"
+                  <rect [attr.x]="getHusbandX(layout)" [attr.y]="layout.y" [attr.width]="PERSON_WIDTH"
+                    [attr.height]="PERSON_HEIGHT" fill="#dbeafe"
+                    [attr.stroke]="selectedFamily?.id === layout.node.unit.husband?.id ? '#2563eb' : 'black'"
                     class="family-node" (click)="selectFamily(layout.node.unit.husband!)" />
-                  <text [attr.x]="layout.x + 10" [attr.y]="layout.y + 40" class="family-text" (click)="selectFamily(layout.node.unit.husband!)">
 
-                    {{
-                    layout.node.unit.husband.name
-                    }}
+                  <text [attr.x]="getHusbandTextX(layout)" [attr.y]="layout.y + 20"
+                    style="writing-mode: vertical-rl;"
+                    [attr.stroke-width]="selectedFamily?.id === layout.node.unit.husband?.id ? 3 : 1"
+                    class="family-text" (click)="selectFamily(layout.node.unit.husband!)">
+
+                    {{ layout.node.unit.husband.name }}
 
                   </text>
 
@@ -395,14 +409,17 @@
                   layout.node.unit.wife
                   ) {
 
-                  <rect [attr.x]="layout.x + 180" [attr.y]="layout.y" width="140" height="70" fill="#fde2e2"
-                    stroke="black" class="family-node" (click)="selectFamily(layout.node.unit.wife!)" />
+                  <rect [attr.x]="getWifeX(layout)" [attr.y]="layout.y" [attr.width]="PERSON_WIDTH"
+                    [attr.height]="PERSON_HEIGHT" fill="#fde2e2"
+                    [attr.stroke]="selectedFamily?.id === layout.node.unit.wife?.id ? '#dc2626' : 'black'"
+                    class="family-node" (click)="selectFamily(layout.node.unit.wife!)" />
 
-                  <text [attr.x]="layout.x + 190" [attr.y]="layout.y + 40" class="family-text" (click)="selectFamily(layout.node.unit.husband!)">
+                  <text [attr.x]="getWifeTextX(layout)" [attr.y]="layout.y + 20"
+                    style="writing-mode: vertical-rl;"
+                    [attr.stroke-width]="selectedFamily?.id === layout.node.unit.wife?.id ? 3 : 1" class="family-text"
+                    (click)="selectFamily(layout.node.unit.wife!)">
 
-                    {{
-                    layout.node.unit.wife.name
-                    }}
+                    {{ layout.node.unit.wife.name }}
 
                   </text>
 

src/app/pages/danka-detail/danka-detail.ts

@@ -63,6 +63,10 @@ export class DankaDetail implements AfterViewInit {
   familyTreeSvg?: ElementRef<SVGSVGElement>;
   private panZoomInstance: any;
 
+  readonly PERSON_WIDTH = 70;
+  readonly PERSON_HEIGHT = 140;
+  readonly SPOUSE_GAP = 20;
+
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
@@ -147,22 +151,18 @@ export class DankaDetail implements AfterViewInit {
       this.familyTreeSvg.nativeElement,
       {
         zoomEnabled: true,
-
-        controlIconsEnabled: true,
+        panEnabled: true,
 
         fit: true,
-
         center: true,
 
-        minZoom: 0.2,
-
-        maxZoom: 20,
+        minZoom: 0.0001,
+        maxZoom: 500,
 
         mouseWheelZoomEnabled: true,
-
         dblClickZoomEnabled: true,
 
-        panEnabled: true
+        zoomScaleSensitivity: 0.15
       }
     );
   }
@@ -466,4 +466,102 @@ export class DankaDetail implements AfterViewInit {
 
   }
 
+  getCenterX(layout: FamilyUnitLayout): number {
+
+    return (
+      layout.x +
+      this.PERSON_WIDTH +
+      this.SPOUSE_GAP / 2
+    );
+
+  }
+
+  getTopCenterY(
+    layout: FamilyUnitLayout
+  ): number {
+
+    return layout.y;
+
+  }
+
+  getBottomCenterY(
+    layout: FamilyUnitLayout
+  ): number {
+
+    return (
+      layout.y +
+      this.PERSON_HEIGHT
+    );
+
+  }
+
+  getMiddleY(
+    parent: FamilyUnitLayout,
+    child: FamilyUnitLayout
+  ): number {
+
+    return (
+      this.getBottomCenterY(parent)
+      +
+      child.y
+    ) / 2;
+
+  }
+
+  getHusbandX(
+    layout: FamilyUnitLayout
+  ): number {
+
+    if (!layout.node.unit.wife) {
+      return (
+        layout.x +
+        (this.PERSON_WIDTH + this.SPOUSE_GAP) / 2
+      );
+    }
+
+    return layout.x;
+
+  }
+
+  getWifeX(
+    layout: FamilyUnitLayout
+  ): number {
+
+    if (!layout.node.unit.husband) {
+      return (
+        layout.x +
+        (this.PERSON_WIDTH + this.SPOUSE_GAP) / 2
+      );
+    }
+
+    return (
+      layout.x +
+      this.PERSON_WIDTH +
+      this.SPOUSE_GAP
+    );
+
+  }
+
+  getHusbandTextX(
+    layout: FamilyUnitLayout
+  ): number {
+
+    return (
+      this.getHusbandX(layout)
+      + this.PERSON_WIDTH / 2
+    );
+
+  }
+
+  getWifeTextX(
+    layout: FamilyUnitLayout
+  ): number {
+
+    return (
+      this.getWifeX(layout)
+      + this.PERSON_WIDTH / 2
+    );
+
+  }
+
 }

src/app/services/family-tree-layout.ts

@@ -18,7 +18,7 @@ export class FamilyTreeLayoutService {
   private readonly HORIZONTAL_GAP = 200;
   private readonly VERTICAL_GAP = 200;
 
-  private readonly SPOUSE_GAP = 180;
+  private readonly SPOUSE_GAP = 180;  
 
   private processedCouples = new Set<string>();
   private currentX = 0;

src/app/services/family-unit-layout.ts

@@ -11,13 +11,22 @@ import { FamilyUnitLayout }
 })
 export class FamilyUnitLayoutService {
 
-  private readonly UNIT_WIDTH = 320;
+  private readonly HORIZONTAL_GAP = 100;
+  private readonly VERTICAL_GAP = 180;
 
-  private readonly UNIT_HEIGHT = 80;
+  private readonly PERSON_WIDTH = 70;
+  private readonly PERSON_HEIGHT = 140;
 
-  private readonly HORIZONTAL_GAP = 100;
+  private readonly SPOUSE_GAP = 20;
+
+  // 夫婦1組のサイズ
+  private readonly UNIT_WIDTH =
+    this.PERSON_WIDTH * 2 +
+    this.SPOUSE_GAP;
+
+  private readonly UNIT_HEIGHT =
+    this.PERSON_HEIGHT;
 
-  private readonly VERTICAL_GAP = 180;
 
   private currentX = 0;