added

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

@@ -320,7 +320,8 @@
             <div class="family-tree-diagram">
               <div class="family-tree-svg-container">
 
-                <svg #familyTreeSvg width="1000" height="1000">
+                <svg #familyTreeSvg width="100%" height="100%" [attr.viewBox]="viewBox"
+                  preserveAspectRatio="xMidYMid meet">
 
                   @for (
                   layout of unitLayouts;
@@ -332,27 +333,19 @@
                   track child.unit.id
                   ) {
 
-                  @if (
-                  getUnitLayout(
-                  child.unit.id
-                  );
-                  as childLayout
-                  ) {
+                  @if (getUnitLayout(child.unit.id); as childLayout) {
 
                   <!-- 親から中間点 -->
-
                   <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]="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" />
@@ -363,68 +356,97 @@
 
                   }
 
-                  @for (
-                  layout of unitLayouts;
-                  track layout.node.unit.id
-                  ) {
+                  @for (layout of unitLayouts; track layout.node.unit.id) {
 
                   <!-- 夫婦線 -->
-
-                  @if (
-                  layout.node.unit.husband &&
-                  layout.node.unit.wife
-                  ) {
-
+                  @if (layout.node.unit.husband && layout.node.unit.wife) {
                   <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
-                  ) {
+                  <!-- ========================= -->
+                  @if (layout.node.unit.husband) {
 
                   <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]="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!)">
-
+                  <!-- 右：名前（基準） -->
+                  <text [attr.x]="getHusbandTextX(layout)" [attr.y]="layout.y + 15"
+                    style="writing-mode: vertical-rl; text-orientation: upright;" class="family-text"
+                    (click)="selectFamily(layout.node.unit.husband!)">
                     {{ layout.node.unit.husband.name }}
+                  </text>
 
+                  <!-- 中央：没年月日（名前の左） -->
+                  @if (getDeathWareki(layout.node.unit.husband)) {
+
+                  <text [attr.x]="getHusbandTextX(layout) - 26" [attr.y]="getDeathTextY(layout, getDeathWareki(layout.node.unit.husband))"
+                    dominant-baseline="text-after-edge" style="writing-mode: vertical-rl; text-orientation: upright;"
+                    [attr.font-size]="DEATH_FONT_SIZE">
+                    {{ getDeathWareki(layout.node.unit.husband) }}
                   </text>
 
                   }
 
-                  <!-- 妻 -->
+                  <!-- 左：享年 -->
+                  @if (getAgeAtDeathText(layout.node.unit.husband)) {
 
-                  @if (
-                  layout.node.unit.wife
-                  ) {
+                  <text [attr.x]="getHusbandTextX(layout) - 40" [attr.y]="getDeathTextY(layout, getAgeAtDeathText(layout.node.unit.husband))"
+                    dominant-baseline="text-after-edge" style="writing-mode: vertical-rl; text-orientation: upright;"
+                    [attr.font-size]="DEATH_FONT_SIZE">
+                    {{ getAgeAtDeathText(layout.node.unit.husband) }}
+                  </text>
+
+                  }
+
+                  }
+
+                  <!-- ========================= -->
+                  <!-- 妻 -->
+                  <!-- ========================= -->
+                  @if (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]="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"
+                  <!-- 右：名前 -->
+                  <text [attr.x]="getWifeTextX(layout)" [attr.y]="layout.y + 15"
+                    style="writing-mode: vertical-rl; text-orientation: upright;" class="family-text"
                     (click)="selectFamily(layout.node.unit.wife!)">
-
                     {{ layout.node.unit.wife.name }}
+                  </text>
+
+                  <!-- 中央：没年月日 -->
+                  @if (getDeathWareki(layout.node.unit.wife)) {
 
+                  <text [attr.x]="getWifeTextX(layout) - 26" [attr.y]="getDeathTextY(layout, getDeathWareki(layout.node.unit.wife))"
+                    dominant-baseline="text-after-edge" style="writing-mode: vertical-rl; text-orientation: upright;"
+                    [attr.font-size]="DEATH_FONT_SIZE">
+                    {{ getDeathWareki(layout.node.unit.wife) }}
                   </text>
 
                   }
 
+                  <!-- 左：享年 -->
+                  @if (getAgeAtDeathText(layout.node.unit.wife)) {
+
+                  <text [attr.x]="getWifeTextX(layout) - 40" [attr.y]="getDeathTextY(layout, getAgeAtDeathText(layout.node.unit.wife))"
+                    dominant-baseline="text-after-edge" style="writing-mode: vertical-rl; text-orientation: upright;"
+                    [attr.font-size]="DEATH_FONT_SIZE">
+                    {{ getAgeAtDeathText(layout.node.unit.wife) }}
+                  </text>
+
+                  }
+
+                  }
+
                   }
 
                 </svg>

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

@@ -1120,4 +1120,14 @@
 
   cursor: pointer;
 
+}
+
+.family-tree-svg-container svg {
+  width: 100%;
+  height: 100%;
+}
+
+.family-text {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
 }

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

@@ -55,6 +55,8 @@ export class DankaDetail implements AfterViewInit {
   layoutNodeMap = new Map<string, LayoutNode>();
   unitLayouts: FamilyUnitLayout[] = [];
   unitLayoutMap = new Map<string, FamilyUnitLayout>();
+  deathDateMap = new Map<string, Kakocho>();
+  private kakochoByNameMap = new Map<string, Kakocho>();
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
   selectedFamily: Family | undefined = undefined;
@@ -63,9 +65,13 @@ export class DankaDetail implements AfterViewInit {
   familyTreeSvg?: ElementRef<SVGSVGElement>;
   private panZoomInstance: any;
 
-  readonly PERSON_WIDTH = 70;
+  readonly PERSON_WIDTH = 90;
   readonly PERSON_HEIGHT = 140;
-  readonly SPOUSE_GAP = 20;
+  readonly SPOUSE_GAP = 30;
+
+  viewBox = '0 0 6000 6000';
+  readonly DEATH_FONT_SIZE = 10;
+  readonly DEATH_LINE_HEIGHT = 10; // 少し余白込み
 
   constructor(
     private dankaService: DankaService,
@@ -140,6 +146,29 @@ export class DankaDetail implements AfterViewInit {
 
       this.rebuildUnitLayoutMap();
 
+      this.calculateViewBox();
+
+      this.kakocholist.forEach(kakocho => {
+
+        if (kakocho.familyId) {
+
+          this.deathDateMap.set(
+            kakocho.familyId,
+            kakocho
+          );
+
+        }
+
+      });
+
+      this.kakocholist.forEach(k => {
+
+        const key = this.normalizeName(k.name) + '_' + k.dankaId;
+
+        this.kakochoByNameMap.set(key, k);
+
+      });
+
     }
   }
   ngAfterViewInit(): void {
@@ -147,22 +176,16 @@ export class DankaDetail implements AfterViewInit {
       return;
     }
 
-    svgPanZoom(
+    this.panZoomInstance = svgPanZoom(
       this.familyTreeSvg.nativeElement,
       {
-        zoomEnabled: true,
-        panEnabled: true,
-
         fit: true,
         center: true,
+        zoomEnabled: true,
+        panEnabled: true,
 
-        minZoom: 0.0001,
-        maxZoom: 500,
-
-        mouseWheelZoomEnabled: true,
-        dblClickZoomEnabled: true,
-
-        zoomScaleSensitivity: 0.15
+        minZoom: 0.1,
+        maxZoom: 50
       }
     );
   }
@@ -561,7 +584,116 @@ export class DankaDetail implements AfterViewInit {
       this.getWifeX(layout)
       + this.PERSON_WIDTH / 2
     );
+  }
+
+  private calculateViewBox(): void {
+
+    if (this.unitLayouts.length === 0) {
+      return;
+    }
+
+    const minX = Math.min(
+      ...this.unitLayouts.map(x => x.x)
+    );
+
+    const minY = Math.min(
+      ...this.unitLayouts.map(x => x.y)
+    );
+
+    const maxX = Math.max(
+      ...this.unitLayouts.map(
+        x => x.x + this.PERSON_WIDTH * 2 + this.SPOUSE_GAP
+      )
+    );
+
+    const maxY = Math.max(
+      ...this.unitLayouts.map(
+        x => x.y + this.PERSON_HEIGHT
+      )
+    );
+
+    const padding = 100;
+
+    this.viewBox =
+      `${minX - padding}
+     ${minY - padding}
+     ${maxX - minX + padding * 2}
+     ${maxY - minY + padding * 2}`;
+  }
 
+  getKakochoByFamilyId(
+    familyId: string
+  ): Kakocho | undefined {
+
+    return this.deathDateMap.get(
+      familyId
+    );
+
+  }
+
+  getKakochoByFamily(family: Family): Kakocho | undefined {
+
+    const key =
+      this.normalizeName(family.name) + '_' + family.dankaId;
+
+    return this.kakochoByNameMap.get(key);
+
+  }
+
+  getDeathWareki(family: Family): string {
+
+    const kakocho = this.getKakochoByFamily(family);
+
+    if (!kakocho?.deathDate) return '';
+
+    const date = new Date(kakocho.deathDate);
+
+    const wareki = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
+      era: 'long',
+      year: 'numeric',
+    }).format(date);
+
+    return `${wareki}${date.getMonth() + 1}月${date.getDate()}日没`;
+  }
+
+  getAgeAtDeathText(family: Family): string {
+
+    const kakocho = this.getKakochoByFamily(family);
+
+    if (!kakocho?.ageAtDeath) return '';
+
+    return `享年${kakocho.ageAtDeath}歳`;
+  }
+
+  getDeathDate(family: Family): string {
+
+    const kakocho = this.getKakochoByFamily(family);
+
+    return kakocho?.deathDate ?? '';
+
+  }
+
+  /**
+   * 縦書きテキストの高さを概算する
+   */
+  getVerticalTextHeight(text: string | null | undefined): number {
+    if (!text) return 0;
+
+    // 縦書きは基本「1文字＝1行」
+    return text.length * this.DEATH_LINE_HEIGHT;
+  }
+
+  /**
+   * テキストをカード下に揃えるためのY座標
+   */
+  getDeathTextY(layout: FamilyUnitLayout, text: string | null | undefined): number {
+
+    const height = this.getVerticalTextHeight(text);
+
+    return (
+      layout.y +
+      this.PERSON_HEIGHT - 5 - height
+    );
   }
 
 }