added

package-lock.json

@@ -15,6 +15,7 @@
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
         "rxjs": "~7.8.0",
+        "svg-pan-zoom": "^3.6.2",
         "tslib": "^2.3.0"
       },
       "devDependencies": {
@@ -7835,6 +7836,12 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/svg-pan-zoom": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz",
+      "integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
     "rxjs": "~7.8.0",
+    "svg-pan-zoom": "^3.6.2",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
@@ -29,4 +30,4 @@
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"
   }
-}
+}

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

@@ -0,0 +1,13 @@
+import { FamilyUnitNode } from './family-unit-node';
+
+export interface FamilyUnitLayout {
+
+    node: FamilyUnitNode;
+
+    x: number;
+    y: number;
+
+    width: number;
+    height: number;
+
+}

src/app/models/family-unit-node.ts

@@ -0,0 +1,11 @@
+import { FamilyUnit } from './family-unit';
+
+export interface FamilyUnitNode {
+
+  unit: FamilyUnit;
+
+  children: FamilyUnitNode[];
+
+  parents: FamilyUnitNode[];
+
+}

src/app/models/family-unit.ts

@@ -0,0 +1,13 @@
+import { Family } from './family';
+
+export interface FamilyUnit {
+
+  id: string;
+
+  husband?: Family;
+
+  wife?: Family;
+
+  children: Family[];
+
+}

src/app/models/familytreenode.ts

@@ -0,0 +1,11 @@
+import { Family } from "./family";
+
+export interface FamilyTreeNode {
+  family: Family;
+
+  spouses: FamilyTreeNode[];
+
+  children: FamilyTreeNode[];
+
+  parents: FamilyTreeNode[];
+}

src/app/models/layout-unit.ts

@@ -0,0 +1,13 @@
+import { FamilyUnit } from './family-unit';
+
+export interface LayoutUnit {
+
+  unit: FamilyUnit;
+
+  x: number;
+  y: number;
+
+  width: number;
+  height: number;
+
+}

src/app/models/layoutnode.ts

@@ -0,0 +1,20 @@
+import { Family } from "./family";
+
+export interface LayoutNode {
+
+  familyId: string;
+
+  family: Family;
+
+  spouse?: Family;
+
+  depth: number;
+
+  x: number;
+  y: number;
+
+  spouseX?: number;
+
+  width: number;
+  height: number;
+}

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

@@ -1091,3 +1091,33 @@
     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;
+
+}

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';
@@ -10,6 +15,20 @@ import { MarriageRelation } from '../../models/marriage-relation';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 import { MarriageRelationService } from '../../services/marriage-relation-service';
+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;
@@ -24,23 +43,35 @@ 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[] = [];
   marriageRelations: MarriageRelation[] = [];
   nextMemorial: NextMemorial | undefined;
   currentYear = new Date().getFullYear();
+  treeNodes: FamilyTreeNode[] = [];
+  layoutNodes: LayoutNode[] = [];
+  layoutNodeMap = new Map<string, LayoutNode>();
+  unitLayouts: FamilyUnitLayout[] = [];
+  unitLayoutMap = new Map<string, FamilyUnitLayout>();
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
   selectedFamily: Family | undefined = undefined;
 
+  @ViewChild('familyTreeSvg')
+  familyTreeSvg?: ElementRef<SVGSVGElement>;
+  private panZoomInstance: any;
+
   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') {
@@ -59,7 +90,120 @@ 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();
+
+    }
+  }
+  ngAfterViewInit(): void {
+    if (!this.familyTreeSvg) {
+      return;
+    }
+
+    svgPanZoom(
+      this.familyTreeSvg.nativeElement,
+      {
+        zoomEnabled: true,
+
+        controlIconsEnabled: true,
+
+        fit: true,
+
+        center: true,
+
+        minZoom: 0.2,
+
+        maxZoom: 20,
+
+        mouseWheelZoomEnabled: true,
+
+        dblClickZoomEnabled: true,
+
+        panEnabled: true
+      }
+    );
+  }
+
+  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 {
@@ -264,4 +408,62 @@ 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
+    );
+
+  }
+
 }

src/app/services/family-tree-builder.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FamilyTreeBuilder } from './family-tree-builder';
+
+describe('FamilyTreeBuilder', () => {
+  let service: FamilyTreeBuilder;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FamilyTreeBuilder);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,421 @@
+import { Injectable } from '@angular/core';
+
+import { Family } from '../models/family';
+import { MarriageRelation } from '../models/marriage-relation';
+import { FamilyUnit } from '../models/family-unit';
+import { FamilyUnitNode } from '../models/family-unit-node';
+
+export interface FamilyTreeNode {
+  family: Family;
+
+  parents: FamilyTreeNode[];
+
+  children: FamilyTreeNode[];
+
+  spouses: FamilyTreeNode[];
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FamilyTreeBuilderService {
+
+  build(
+    families: Family[],
+    marriages: MarriageRelation[],
+  ): FamilyTreeNode[] {
+
+    const nodeMap = new Map<string, FamilyTreeNode>();
+
+    //
+    // ノード生成
+    //
+    families.forEach((family) => {
+
+      nodeMap.set(family.id, {
+        family,
+        parents: [],
+        children: [],
+        spouses: [],
+      });
+
+    });
+
+    //
+    // 親子関係生成
+    //
+    families.forEach((family) => {
+
+      const childNode = nodeMap.get(family.id);
+
+      if (!childNode) {
+        return;
+      }
+
+      //
+      // 父
+      //
+      if (family.fatherId) {
+
+        const fatherNode =
+          nodeMap.get(family.fatherId);
+
+        if (fatherNode) {
+
+          fatherNode.children.push(childNode);
+
+          childNode.parents.push(fatherNode);
+        }
+      }
+
+      //
+      // 母
+      //
+      if (family.motherId) {
+
+        const motherNode =
+          nodeMap.get(family.motherId);
+
+        if (motherNode) {
+
+          motherNode.children.push(childNode);
+
+          childNode.parents.push(motherNode);
+        }
+      }
+
+    });
+
+    //
+    // 配偶者関係
+    //
+    marriages
+      .filter(
+        (m) =>
+          m.status === 'current',
+      )
+      .forEach((marriage) => {
+
+        const person1 =
+          nodeMap.get(
+            marriage.person1Id,
+          );
+
+        const person2 =
+          nodeMap.get(
+            marriage.person2Id,
+          );
+
+        if (!person1 || !person2) {
+          return;
+        }
+
+        const id1 =
+          Number(person1.family.id);
+
+        const id2 =
+          Number(person2.family.id);
+
+        const owner =
+          id1 < id2
+            ? person1
+            : person2;
+
+        const spouse =
+          id1 < id2
+            ? person2
+            : person1;
+
+        if (
+          !owner.spouses.some(
+            (s) =>
+              s.family.id ===
+              spouse.family.id,
+          )
+        ) {
+          owner.spouses.push(
+            spouse,
+          );
+        }
+      });
+
+    //
+    // spouseId フォールバック
+    //
+    families.forEach((family) => {
+
+      if (!family.spouseId) {
+        return;
+      }
+
+      const person =
+        nodeMap.get(family.id);
+
+      const spouse =
+        nodeMap.get(family.spouseId);
+
+      if (!person || !spouse) {
+        return;
+      }
+
+      if (
+        !person.spouses.some(
+          (s) =>
+            s.family.id ===
+            spouse.family.id
+        )
+      ) {
+
+        person.spouses.push(
+          spouse
+        );
+      }
+
+    });
+
+    return [...nodeMap.values()];
+  }
+
+  /**
+   * 家系図の起点になる人物
+   * (親が登録されていない人物)
+   */
+  getRoots(
+    nodes: FamilyTreeNode[]
+  ): FamilyTreeNode[] {
+
+    return nodes.filter(node => {
+
+      if (
+        node.parents.length > 0
+      ) {
+        return false;
+      }
+
+      // 配偶者がいて
+      if (
+        node.spouses.length > 0
+      ) {
+
+        const spouseId =
+          node.spouses[0].family.id;
+
+        // IDが若い方だけRoot
+        return (
+          node.family.id <
+          spouseId
+        );
+      }
+
+      return true;
+
+    });
+
+  }
+
+  /**
+   * ID検索
+   */
+  getNodeById(
+    nodes: FamilyTreeNode[],
+    id: string,
+  ): FamilyTreeNode | undefined {
+
+    return nodes.find(
+      (node) =>
+        node.family.id === id,
+    );
+  }
+
+  buildFamilyUnits(
+    nodes: FamilyTreeNode[]
+  ): FamilyUnit[] {
+
+    const units: FamilyUnit[] = [];
+
+    const processed =
+      new Set<string>();
+
+    for (const node of nodes) {
+
+      //
+      // 夫婦あり
+      //
+      if (node.spouses.length > 0) {
+
+        const spouse =
+          node.spouses[0];
+
+        const key =
+          [
+            node.family.id,
+            spouse.family.id
+          ]
+            .sort()
+            .join('-');
+
+        if (
+          processed.has(key)
+        ) {
+          continue;
+        }
+
+        processed.add(key);
+
+        //
+        // この夫婦の子供を取得
+        //
+        const children =
+          nodes
+            .filter(child => {
+
+              const fatherId =
+                child.family.fatherId;
+
+              const motherId =
+                child.family.motherId;
+
+              return (
+                (
+                  fatherId === node.family.id &&
+                  motherId === spouse.family.id
+                )
+                ||
+                (
+                  fatherId === spouse.family.id &&
+                  motherId === node.family.id
+                )
+              );
+
+            })
+            .map(child => child.family);
+
+        units.push({
+
+          id: key,
+
+          husband:
+            node.family.gender === 'male'
+              ? node.family
+              : spouse.family,
+
+          wife:
+            node.family.gender === 'female'
+              ? node.family
+              : spouse.family,
+
+          children
+
+        });
+
+      } else {
+
+        //
+        // 独身者
+        //
+        units.push({
+
+          id:
+            node.family.id,
+
+          husband:
+            node.family.gender === 'male'
+              ? node.family
+              : undefined,
+
+          wife:
+            node.family.gender === 'female'
+              ? node.family
+              : undefined,
+
+          children: []
+
+        });
+
+      }
+
+    }
+
+    return units;
+  }
+
+  buildFamilyUnitTree(
+    units: FamilyUnit[]
+  ): FamilyUnitNode[] {
+
+    const nodeMap =
+      new Map<string, FamilyUnitNode>();
+
+    //
+    // ノード生成
+    //
+    units.forEach(unit => {
+
+      nodeMap.set(unit.id, {
+
+        unit,
+
+        children: [],
+
+        parents: []
+
+      });
+
+    });
+
+    //
+    // 親子リンク
+    //
+    units.forEach(parentUnit => {
+
+      parentUnit.children.forEach(child => {
+
+        const childUnit =
+          units.find(u => {
+
+            return (
+              u.husband?.id === child.id ||
+              u.wife?.id === child.id
+            );
+
+          });
+
+        if (!childUnit) {
+          return;
+        }
+
+        const parentNode =
+          nodeMap.get(parentUnit.id)!;
+
+        const childNode =
+          nodeMap.get(childUnit.id)!;
+
+        parentNode.children.push(
+          childNode
+        );
+
+        childNode.parents.push(
+          parentNode
+        );
+
+      });
+
+    });
+
+    return [
+      ...nodeMap.values()
+    ];
+  }
+
+  getUnitRoots(
+    nodes: FamilyUnitNode[]
+  ): FamilyUnitNode[] {
+
+    return nodes.filter(
+      x =>
+        x.parents.length === 0
+    );
+
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FamilyTreeLayout } from './family-tree-layout';
+
+describe('FamilyTreeLayout', () => {
+  let service: FamilyTreeLayout;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FamilyTreeLayout);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,164 @@
+import { Injectable } from '@angular/core';
+
+import {
+  FamilyTreeNode
+} from './family-tree-builder';
+
+import { LayoutNode } from '../models/layoutnode';
+import { Family } from '../models/family';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FamilyTreeLayoutService {
+
+  private readonly NODE_WIDTH = 140;
+  private readonly NODE_HEIGHT = 70;
+
+  private readonly HORIZONTAL_GAP = 200;
+  private readonly VERTICAL_GAP = 200;
+
+  private readonly SPOUSE_GAP = 180;
+
+  private processedCouples = new Set<string>();
+  private currentX = 0;
+
+
+  buildLayout(
+    roots: FamilyTreeNode[]
+  ): LayoutNode[] {
+
+    this.currentX = 0;
+
+    this.processedCouples.clear();
+
+    const result: LayoutNode[] = [];
+
+    const visited = new Set<string>();
+
+    roots.forEach(root => {
+
+      this.layoutNode(
+        root,
+        0,
+        result,
+        visited
+      );
+
+      this.currentX +=
+        this.HORIZONTAL_GAP;
+    });
+
+    return result;
+  }
+
+  private layoutNode(
+    node: FamilyTreeNode,
+    depth: number,
+    result: LayoutNode[],
+    visited: Set<string>
+  ): number {
+
+    if (visited.has(node.family.id)) {
+
+      const existing = result.find(
+        x => x.familyId === node.family.id
+      );
+
+      return existing?.x ?? 0;
+    }
+
+    visited.add(node.family.id);
+
+    const children = node.children;
+
+    let x: number;
+
+    if (children.length === 0) {
+
+      x = this.currentX;
+
+      this.currentX +=
+        this.HORIZONTAL_GAP;
+
+    } else {
+
+      const childXs =
+        children.map(child =>
+          this.layoutNode(
+            child,
+            depth + 1,
+            result,
+            visited
+          )
+        );
+
+      x =
+        (Math.min(...childXs) +
+          Math.max(...childXs))
+        / 2;
+    }
+
+    const y =
+      depth *
+      this.VERTICAL_GAP;
+
+    let spouseX: number | undefined;
+    let spouse: Family | undefined;
+
+    if (node.spouses.length > 0) {
+
+      const spouseNode =
+        node.spouses[0];
+
+      const coupleKey =
+        [
+          node.family.id,
+          spouseNode.family.id
+        ]
+          .sort()
+          .join('-');
+
+      if (
+        !this.processedCouples.has(
+          coupleKey
+        )
+      ) {
+
+        this.processedCouples.add(
+          coupleKey
+        );
+
+        spouse =
+          spouseNode.family;
+
+        spouseX =
+          x + this.SPOUSE_GAP;
+      }
+    }
+
+    result.push({
+
+      familyId: node.family.id,
+
+      family: node.family,
+
+      spouse,
+
+      depth,
+
+      x,
+      y,
+
+      spouseX,
+
+      width: this.NODE_WIDTH,
+
+      height: this.NODE_HEIGHT
+
+    });
+
+    return x;
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FamilyUnitLayout } from './family-unit-layout';
+
+describe('FamilyUnitLayout', () => {
+  let service: FamilyUnitLayout;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FamilyUnitLayout);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,138 @@
+import { Injectable } from '@angular/core';
+
+import { FamilyUnitNode }
+  from '../models/family-unit-node';
+
+import { FamilyUnitLayout }
+  from '../models/family-unit-layout';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FamilyUnitLayoutService {
+
+  private readonly UNIT_WIDTH = 320;
+
+  private readonly UNIT_HEIGHT = 80;
+
+  private readonly HORIZONTAL_GAP = 100;
+
+  private readonly VERTICAL_GAP = 180;
+
+  private currentX = 0;
+
+  buildLayout(
+    roots: FamilyUnitNode[]
+  ): FamilyUnitLayout[] {
+
+    this.currentX = 0;
+
+    const result:
+      FamilyUnitLayout[] = [];
+
+    const visited =
+      new Set<string>();
+
+    roots.forEach(root => {
+
+      this.layoutNode(
+        root,
+        0,
+        result,
+        visited
+      );
+
+    });
+
+    return result;
+
+  }
+
+  private layoutNode(
+    node: FamilyUnitNode,
+    depth: number,
+    result: FamilyUnitLayout[],
+    visited: Set<string>
+  ): number {
+
+    if (
+      visited.has(
+        node.unit.id
+      )
+    ) {
+
+      const existing =
+        result.find(
+          x =>
+            x.node.unit.id ===
+            node.unit.id
+        );
+
+      return existing?.x ?? 0;
+
+    }
+
+    visited.add(
+      node.unit.id
+    );
+
+    let x: number;
+
+    if (
+      node.children.length === 0
+    ) {
+
+      x = this.currentX;
+
+      this.currentX +=
+        this.UNIT_WIDTH +
+        this.HORIZONTAL_GAP;
+
+    }
+    else {
+
+      const childXs =
+        node.children.map(
+          child =>
+            this.layoutNode(
+              child,
+              depth + 1,
+              result,
+              visited
+            )
+        );
+
+      x =
+        (
+          Math.min(...childXs)
+          +
+          Math.max(...childXs)
+        ) / 2;
+
+    }
+
+    const y =
+      depth *
+      this.VERTICAL_GAP;
+
+    result.push({
+
+      node,
+
+      x,
+
+      y,
+
+      width:
+        this.UNIT_WIDTH,
+
+      height:
+        this.UNIT_HEIGHT
+
+    });
+
+    return x;
+
+  }
+
+}