Merge branch 'master' into develop

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

@@ -1264,3 +1264,43 @@
     bottom: -22px;
   }
 }
+
+.family-tree-svg-container {
+  width: 100%;
+  height: 700px;
+
+  overflow: auto;
+
+  border: 1px solid #ddd;
+}
+.family-tree-svg-container {
+
+  width: 100%;
+
+  height: 700px;
+
+  overflow: hidden;
+
+  border: 1px solid #ddd;
+}
+.family-node {
+
+  cursor: pointer;
+
+}
+
+.family-text {
+
+  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

@@ -1,4 +1,9 @@
 import { Component } from '@angular/core';
+import {
+  ElementRef,
+  ViewChild,
+  AfterViewInit
+} from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
@@ -12,6 +17,21 @@ import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
 import { FormsModule } from '@angular/forms';
 import { EventStatus, EventTarget, EventType } from '../../models/event';
+import {
+  FamilyTreeBuilderService,
+  FamilyTreeNode
+} from '../../services/family-tree-builder';
+import {
+  FamilyTreeLayoutService
+} from '../../services/family-tree-layout';
+
+import {
+  LayoutNode
+} from '../../models/layoutnode';
+import svgPanZoom from 'svg-pan-zoom';
+import { FamilyUnitLayout } from '../../models/family-unit-layout';
+import { FamilyUnitLayoutService } from '../../services/family-unit-layout';
+
 
 interface NextMemorial {
   name: string;
@@ -26,7 +46,7 @@ interface NextMemorial {
   templateUrl: './danka-detail.html',
   styleUrl: './danka-detail.scss',
 })
-export class DankaDetail {
+export class DankaDetail implements AfterViewInit {
   danka: Danka | undefined;
   families: Family[] = [];
   kakocholist: Kakocho[] = [];
@@ -37,16 +57,39 @@ export class DankaDetail {
   eventSearchKeyword = '';
   eventStatuses: EventStatus[] = ['未案内', '案内済'];
   private eventStatusByTargetId: Record<string, EventStatus> = {};
+  treeNodes: FamilyTreeNode[] = [];
+  layoutNodes: LayoutNode[] = [];
+  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' | 'event' | 'familyTree' = 'basic';
   selectedFamily: Family | undefined = undefined;
 
+  @ViewChild('familyTreeSvg')
+  familyTreeSvg?: ElementRef<SVGSVGElement>;
+  private panZoomInstance: any;
+
+  readonly PERSON_WIDTH = 90;
+  readonly PERSON_HEIGHT = 140;
+  readonly SPOUSE_GAP = 30;
+
+  viewBox = '0 0 6000 6000';
+  readonly DEATH_FONT_SIZE = 10;
+  readonly DEATH_LINE_HEIGHT = 10; // 少し余白込み
+
+
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
     private kakochoService: KakochoService,
     private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
+    private familyTreeBuilder: FamilyTreeBuilderService,
+    private familyTreeLayout: FamilyTreeLayoutService,
+    private familyUnitLayout: FamilyUnitLayoutService,
   ) {
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
@@ -67,7 +110,121 @@ export class DankaDetail {
       this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
       this.nextMemorial = this.getNextMemorial();
+
+      this.treeNodes =
+        this.familyTreeBuilder.build(
+          this.families,
+          this.marriageRelations
+        );
+
+      const units =
+        this.familyTreeBuilder.buildFamilyUnits(
+          this.treeNodes
+        );
+
+      const unitTree =
+        this.familyTreeBuilder.buildFamilyUnitTree(
+          units
+        );
+
+      const unitRoots =
+        this.familyTreeBuilder.getUnitRoots(
+          unitTree
+        );
+
+      this.unitLayouts =
+        this.familyUnitLayout.buildLayout(
+          unitRoots
+        );
+
+      const roots =
+        this.familyTreeBuilder.getRoots(
+          this.treeNodes
+        );
+
+      this.layoutNodes =
+        this.familyTreeLayout.buildLayout(
+          roots
+        );
+
+      this.rebuildLayoutNodeMap();
+
+      this.unitLayouts =
+        this.familyUnitLayout.buildLayout(
+          unitRoots
+        );
+
+      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 {
+    if (!this.familyTreeSvg) {
+      return;
     }
+
+    this.panZoomInstance = svgPanZoom(
+      this.familyTreeSvg.nativeElement,
+      {
+        fit: true,
+        center: true,
+        zoomEnabled: true,
+        panEnabled: true,
+        minZoom: 0.1,
+        maxZoom: 50
+      }
+    );
+  }
+
+  initializePanZoom(): void {
+
+    if (!this.familyTreeSvg) {
+      console.log('SVGなし');
+      return;
+    }
+
+    console.log('SVGあり');
+
+    if (!this.familyTreeSvg) {
+      return;
+    }
+
+    if (this.panZoomInstance) {
+      return;
+    }
+
+    this.panZoomInstance = svgPanZoom(
+      this.familyTreeSvg.nativeElement,
+      {
+        zoomEnabled: true,
+        panEnabled: true,
+        fit: true,
+        center: true,
+      }
+    );
+  }
+  openFamilyTreeTab(): void {
+    this.selectedTab = 'familyTree';
+    setTimeout(() => {
+      this.initializePanZoom();
+    });
   }
 
   getAge(birthDate: string): string {
@@ -388,4 +545,231 @@ export class DankaDetail {
     }
     return '不明';
   }
+
+  getLayoutNode(
+    familyId: string
+  ): LayoutNode | undefined {
+    return this.layoutNodeMap.get(
+      familyId
+    );
+
+  }
+  getCurrentMarriageLines() {
+    return this.marriageRelations.filter(
+      x => x.status === 'current'
+    );
+
+  }
+
+  private rebuildLayoutNodeMap(): void {
+    this.layoutNodeMap.clear();
+    this.layoutNodes.forEach(node => {
+      this.layoutNodeMap.set(
+        node.familyId,
+        node
+      );
+    });
+  }
+
+  private rebuildUnitLayoutMap(): void {
+    this.unitLayoutMap.clear();
+    this.unitLayouts.forEach(layout => {
+      this.unitLayoutMap.set(
+        layout.node.unit.id,
+        layout
+      );
+    });
+  }
+
+  getUnitLayout(
+    unitId: string
+  ): FamilyUnitLayout | undefined {
+    return this.unitLayoutMap.get(
+      unitId
+    );
+
+  }
+
+  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
+    );
+  }
+
+  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
+    );
+  }
+
 }