From 63714b35201b53bf4543b53fccc083a7c29fd7e1 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Thu, 23 Feb 2023 18:16:21 +0100
Subject: [PATCH] Add dedicated space for the symbols dimensions + increase
 global dimension margin

---
 .../SVG/Elements/DimensionLayer.tsx           | 119 +++++++++++-------
 src/utils/default.ts                          |   3 +-
 2 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx
index f1c468a..b366819 100644
--- a/src/Components/SVG/Elements/DimensionLayer.tsx
+++ b/src/Components/SVG/Elements/DimensionLayer.tsx
@@ -7,7 +7,8 @@ import {
   SHOW_BORROWER_DIMENSIONS,
   SHOW_CHILDREN_DIMENSIONS,
   SHOW_SELF_DIMENSIONS,
-  SHOW_SELF_MARGINS_DIMENSIONS
+  SHOW_SELF_MARGINS_DIMENSIONS,
+  SYMBOL_DIMENSION_MARGIN
 } from '../../../utils/default';
 import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
 import { TransformX, TransformY } from '../../../utils/svg';
@@ -72,7 +73,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
   }
 
   for (const { container, depth, currentTransform } of it) {
-    const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
+    const offset = (DIMENSION_MARGIN * (depth + 2)) / scale;
     const containerLeftDim = leftDim - offset;
     const containerTopDim = topDim - offset;
     const containerBottomDim = bottomDim + offset;
@@ -147,14 +148,32 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
   }
 
   // TODO: Implement DimensionManager
-  symbols.forEach((symbol) => {
-    if (symbol.showDimension) {
-      if (symbol.isVertical) {
-        AddVerticalSymbolDimension(symbol, dimensions, scale, 0);
-      } else {
-        AddHorizontalSymbolDimension(symbol, dimensions, scale, 0);
-      }
-    }
+  const symbolsWithDimension = [...symbols.values()]
+    .filter(symbol => symbol.showDimension && symbol.offset > 0);
+  const horizontalSymbolsWithDimension = symbolsWithDimension
+    .filter(symbol => !symbol.isVertical);
+
+  horizontalSymbolsWithDimension.forEach((symbol, index) => {
+    AddHorizontalSymbolDimension(
+      symbol,
+      dimensions,
+      scale,
+      index,
+      horizontalSymbolsWithDimension.length
+    );
+  });
+
+  const verticalSymbolsWithDimension = symbolsWithDimension
+    .filter(symbol => symbol.isVertical);
+
+  verticalSymbolsWithDimension.forEach((symbol, index) => {
+    AddVerticalSymbolDimension(
+      symbol,
+      dimensions,
+      scale,
+      index,
+      verticalSymbolsWithDimension.length
+    );
   });
 
   return dimensions;
@@ -164,54 +183,62 @@ function AddHorizontalSymbolDimension(
   symbol: ISymbolModel,
   dimensions: React.ReactNode[],
   scale: number,
-  depth: number
+  depth: number,
+  maxDepth: number
 ): void {
   const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference);
-  if (width != null && width > 0) {
-    const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
-
-    const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
-    const text = width
-      .toFixed(0)
-      .toString();
-    dimensions.push(<Dimension
-      key={id}
-      id={id}
-      xStart={0}
-      yStart={-offset}
-      xEnd={width}
-      yEnd={-offset}
-      text={text}
-      scale={scale}
-      style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
+  if (width == null || width <= 0) {
+    return;
   }
+  const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
+
+  const spacing = DIMENSION_MARGIN;
+  const position = spacing * (depth + 1) / maxDepth;
+  const offset = SYMBOL_DIMENSION_MARGIN + position / scale;
+  const text = width
+    .toFixed(0)
+    .toString();
+  dimensions.push(<Dimension
+    key={id}
+    id={id}
+    xStart={0}
+    yStart={-offset}
+    xEnd={width}
+    yEnd={-offset}
+    text={text}
+    scale={scale}
+    style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
 }
 
 function AddVerticalSymbolDimension(
   symbol: ISymbolModel,
   dimensions: React.ReactNode[],
   scale: number,
-  depth: number
+  depth: number,
+  maxDepth: number
 ): void {
   const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference);
-  if (height != null && height > 0) {
-    const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`;
-
-    const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
-    const text = height
-      .toFixed(0)
-      .toString();
-    dimensions.push(<Dimension
-      key={id}
-      id={id}
-      xStart={-offset}
-      yStart={height}
-      xEnd={-offset}
-      yEnd={0}
-      text={text}
-      scale={scale}
-      style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
+  if (height == null || height <= 0) {
+    return;
   }
+  const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`;
+
+  const spacing = DIMENSION_MARGIN;
+  const position = spacing * (depth + 1) / maxDepth;
+  const offset = SYMBOL_DIMENSION_MARGIN + position / scale;
+  const text = height
+    .toFixed(0)
+    .toString();
+  dimensions.push(<Dimension
+    key={id}
+    id={id}
+    xStart={-offset}
+    yStart={height}
+    xEnd={-offset}
+    yEnd={0}
+    text={text}
+    scale={scale}
+    style={DEFAULT_DIMENSION_SYMBOL_STYLE}/>);
 }
 
 /**
diff --git a/src/utils/default.ts b/src/utils/default.ts
index 18dbf5e..eba631b 100644
--- a/src/utils/default.ts
+++ b/src/utils/default.ts
@@ -69,7 +69,8 @@ export const SHOW_SELF_DIMENSIONS = true;
 export const SHOW_SELF_MARGINS_DIMENSIONS = true;
 export const SHOW_CHILDREN_DIMENSIONS = true;
 export const SHOW_BORROWER_DIMENSIONS = true;
-export const DIMENSION_MARGIN = 50;
+export const DIMENSION_MARGIN = 70;
+export const SYMBOL_DIMENSION_MARGIN = 30;
 export const SYMBOL_MARGIN = 25;
 export const NOTCHES_LENGTH = 10;
 export const DEFAULT_DIMENSION_SYMBOL_STYLE: IDimensionStyle = {