Refactor DimensionLayer for more readability

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -145,55 +145,23 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
   }
 
   let startDepthSymbols: number = 0;
-  for (const symbol of symbols) {
-    if (symbol[1].showDimension) {
-      startDepthSymbols++;
-      AddHorizontalSymbolDimension(
-        symbol[1],
-        dimensions,
-        scale,
-        startDepthSymbols
-      );
+  symbols.forEach((symbol: ISymbolModel) => {
+    if (!symbol.showDimension) {
+      return;
     }
-  }
+
+    startDepthSymbols++;
+    AddHorizontalSymbolDimension(
+      symbol,
+      dimensions,
+      scale,
+      startDepthSymbols
+    );
+  });
 
   return dimensions;
 }
 
-function AddHorizontalSymbolDimension(
-  symbol: ISymbolModel,
-  dimensions: React.ReactNode[],
-  scale: number,
-  depth: number
-): void {
-  const width = symbol.x + (symbol.width / 2);
-  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();
-
-    // TODO: Put this in default.ts
-    const defaultDimensionSymbolStyle: IDimensionStyle = {
-      color: 'black'
-    };
-    dimensions.push(
-      <Dimension
-        key={id}
-        id={id}
-        xStart={0}
-        yStart={-offset}
-        xEnd={width}
-        yEnd={-offset}
-        text={text}
-        scale={scale}
-        style={defaultDimensionSymbolStyle}/>
-    );
-  }
-}
-
 /**
  * A layer containing all dimension
  * @param props
@@ -643,3 +611,40 @@ function AddVerticalSelfMarginDimension(
     );
   }
 }
+
+function AddHorizontalSymbolDimension(
+  symbol: ISymbolModel,
+  dimensions: React.ReactNode[],
+  scale: number,
+  depth: number
+): void {
+  const width = symbol.x + (symbol.width / 2);
+
+  if (width == null || width <= 0) {
+    return;
+  }
+
+  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();
+
+  // TODO: Put this in default.ts
+  const defaultDimensionSymbolStyle: IDimensionStyle = {
+    color: 'black'
+  };
+  dimensions.push(
+    <Dimension
+      key={id}
+      id={id}
+      xStart={0}
+      yStart={-offset}
+      xEnd={width}
+      yEnd={-offset}
+      text={text}
+      scale={scale}
+      style={defaultDimensionSymbolStyle}/>
+  );
+}