[Update] Poc symbol Y working

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Orientation } from '../../../Enums/Orientation';
 import { Position } from '../../../Enums/Position';
-import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { type IContainerModel } from '../../../Interfaces/IContainerModel';
 import {
   DIMENSION_MARGIN,
   SHOW_BORROWER_DIMENSIONS,
@@ -12,7 +12,7 @@ import {
 import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
 import { TransformX, TransformY } from '../../../utils/svg';
 import { Dimension } from './Dimension';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
 
 interface IDimensionLayerProps {
   containers: Map<string, IContainerModel>
@@ -37,12 +37,13 @@ function ActionByPosition(
   horizontalAction: (dim: number, ...params: any[]) => void,
   verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
   params: any[]
-): boolean {
-  let incrementDepthSymbols = false;
+): [boolean, boolean] {
+  let [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols] = [false, false];
   positions.forEach((position: Position) => {
     const dim = dimMapped[position];
     switch (position) {
       case Position.Left:
+        incrementVerticalDepthSymbols = true;
       case Position.Right: {
         const isRight = position === Position.Right;
         verticalAction(dim, isRight, ...params);
@@ -50,12 +51,12 @@ function ActionByPosition(
       }
       case Position.Down:
       case Position.Up:
-        incrementDepthSymbols = true;
+        incrementHorizontalDepthSymbols = true;
         horizontalAction(dim, ...params);
         break;
     }
   });
-  return incrementDepthSymbols;
+  return [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols];
 }
 
 /**
@@ -74,7 +75,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
   if (!SHOW_SELF_DIMENSIONS) {
     return [];
   }
-  let startDepthSymbols: number = 0;
+  let [startDepthHorizontalSymbols, startDepthVerticalSymbols] = [0, 0];
 
   for (const { container, depth, currentTransform } of it) {
     const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
@@ -84,7 +85,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
     const containerRightDim = rightDim + offset;
     const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
     if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) {
-      const incrementDepthSymbol = ActionByPosition(
+      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfDimensions.positions,
         AddHorizontalSelfDimension,
@@ -96,11 +97,12 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           scale,
           container.properties.dimensionOptions.selfDimensions.color]
       );
-      if (incrementDepthSymbol) { startDepthSymbols++; }
+      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
+      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
     if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
-      const incrementDepthSymbol = ActionByPosition(
+      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfMarginsDimensions.positions,
         AddHorizontalSelfMarginsDimension,
@@ -112,11 +114,12 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           scale,
           container.properties.dimensionOptions.selfMarginsDimensions.color]
       );
-      if (incrementDepthSymbol) { startDepthSymbols++; }
+      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
+      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
     if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
-      const incrementDepthSymbol = ActionByPosition(
+      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.dimensionWithMarks.positions,
 
@@ -131,11 +134,12 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           scale,
           container.properties.dimensionOptions.dimensionWithMarks.color]
       );
-      if (incrementDepthSymbol) { startDepthSymbols++; }
+      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
+      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
     if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
-      const incrementDepthSymbol = ActionByPosition(
+      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.childrenDimensions.positions,
         AddHorizontalChildrenDimension,
@@ -149,14 +153,20 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           container.properties.dimensionOptions.childrenDimensions.color]
       );
 
-      if (incrementDepthSymbol) { startDepthSymbols++; }
+      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
+      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
   }
 
   for (const symbol of symbols) {
     if (symbol[1].showDimension) {
-      startDepthSymbols++;
-      AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols);
+      startDepthHorizontalSymbols++;
+
+      if (symbol[1].isVertical) {
+        AddVerticalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthVerticalSymbols);
+      } else {
+        AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthHorizontalSymbols);
+      }
     }
   }
 
@@ -192,6 +202,35 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
   }
 }
 
+function AddVerticalSymbolDimension(symbol: ISymbolModel,
+  dimensions: React.ReactNode[],
+  scale: number,
+  color: string,
+  depth: number
+): void {
+  const height = symbol.offset + (symbol.height / 2);
+  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}
+        color={color}/>
+    );
+  }
+}
+
 /**
  * A layer containing all dimension
  * @param props