Disable depth for SymbolDimension + Canvas: Add vertical symbol dimension

src/Components/Canvas/DimensionLayer.ts

@@ -95,6 +95,16 @@ export function AddSymbolDimensions(
   scale: number,
   depth: number
 ): void {
+  if (symbol.isVertical) {
+    AddVerticalSymbolDimension(
+      ctx,
+      symbol,
+      scale,
+      depth
+    );
+    return;
+  }
+
   AddHorizontalSymbolDimension(
     ctx,
     symbol,
@@ -575,7 +585,7 @@ function AddHorizontalSymbolDimension(
   scale: number,
   depth: number
 ): void {
-  const width = symbol.offset + (symbol.width / 2);
+  const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference);
 
   if (width == null || width <= 0) {
     return;
@@ -599,3 +609,34 @@ function AddHorizontalSymbolDimension(
     style: DEFAULT_DIMENSION_SYMBOL_STYLE
   });
 }
+
+function AddVerticalSymbolDimension(
+  ctx: CanvasRenderingContext2D,
+  symbol: ISymbolModel,
+  scale: number,
+  depth: number
+): void {
+  const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference);
+
+  if (height == null || height <= 0) {
+    return;
+  }
+
+  const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
+
+  const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
+  const text = height
+    .toFixed(0)
+    .toString();
+
+  RenderDimension(ctx, {
+    id,
+    xStart: -offset,
+    yStart: height,
+    xEnd: -offset,
+    yEnd: 0,
+    text,
+    scale,
+    style: DEFAULT_DIMENSION_SYMBOL_STYLE
+  });
+}

src/Components/Canvas/Renderer.ts

@@ -71,7 +71,6 @@ export function RenderSymbols(
   symbols: Map<string, ISymbolModel>,
   scale: number
 ): void {
-  let count = 0;
   symbols.forEach((symbol: ISymbolModel) => {
     RenderSymbol(ctx, symbol);
 
@@ -79,8 +78,8 @@ export function RenderSymbols(
       return;
     }
 
-    AddSymbolDimensions(ctx, symbol, scale, count);
+    // TODO: Implement DimensionManager
-    count++;
+    AddSymbolDimensions(ctx, symbol, scale, 0);
   });
 }
 

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -38,29 +38,20 @@ function ActionByPosition(
   horizontalAction: (dim: number, ...params: any[]) => void,
   verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void,
   params: any[]
-): [boolean, boolean] {
+): void {
-  let [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols] = [false, false];
   positions.forEach((position: Position) => {
     const dim = dimMapped[position];
     switch (position) {
+      case Position.Right:
       case Position.Left:
-        incrementVerticalDepthSymbols = true;
         verticalAction(dim, false, ...params);
         break;
-      case Position.Right: {
-        verticalAction(dim, true, ...params);
-        break;
-      }
-      case Position.Down:
-        horizontalAction(dim, ...params);
-        break;
       case Position.Up:
-        incrementHorizontalDepthSymbols = true;
+      case Position.Down:
         horizontalAction(dim, ...params);
         break;
     }
   });
-  return [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols];
 }
 
 /**
@@ -79,7 +70,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
   if (!SHOW_SELF_DIMENSIONS) {
     return [];
   }
-  let [startDepthHorizontalSymbols, startDepthVerticalSymbols] = [0, 0];
 
   for (const { container, depth, currentTransform } of it) {
     const offset = (DIMENSION_MARGIN * (depth + 1)) / scale;
@@ -89,7 +79,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 [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
+      ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfDimensions.positions,
         AddHorizontalSelfDimension,
@@ -98,16 +88,14 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           container,
           currentTransform,
           dimensions,
-          scale,
+          scale
-          container.properties.dimensionOptions.selfDimensions.color]
+        ]
       );
-      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
-      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
     if (SHOW_SELF_MARGINS_DIMENSIONS &&
         container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
-      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
+      ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfMarginsDimensions.positions,
         AddHorizontalSelfMarginsDimension,
@@ -116,15 +104,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           container,
           currentTransform,
           dimensions,
-          scale,
+          scale
-          container.properties.dimensionOptions.selfMarginsDimensions.color]
+        ]
       );
-      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
-      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
     if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) {
-      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
+      ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.dimensionWithMarks.positions,
 
@@ -136,17 +122,15 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           depth,
           currentTransform,
           dimensions,
-          scale,
+          scale
-          container.properties.dimensionOptions.dimensionWithMarks.color]
+        ]
       );
-      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
-      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
     if (SHOW_CHILDREN_DIMENSIONS &&
         container.properties.dimensionOptions.childrenDimensions.positions.length > 0 &&
         container.children.length >= 2) {
-      const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
+      ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.childrenDimensions.positions,
         AddHorizontalChildrenDimension,
@@ -156,26 +140,22 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
           container,
           currentTransform,
           dimensions,
-          scale,
+          scale
-          container.properties.dimensionOptions.childrenDimensions.color]
+        ]
       );
-
-      if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; }
-      if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
   }
 
-  for (const symbol of symbols) {
+  // TODO: Implement DimensionManager
-    if (symbol[1].showDimension) {
+  symbols.forEach((symbol) => {
-      if (symbol[1].isVertical) {
+    if (symbol.showDimension) {
-        startDepthVerticalSymbols++;
+      if (symbol.isVertical) {
-        AddVerticalSymbolDimension(symbol[1], dimensions, scale, startDepthVerticalSymbols);
+        AddVerticalSymbolDimension(symbol, dimensions, scale, 0);
       } else {
-        startDepthHorizontalSymbols++;
+        AddHorizontalSymbolDimension(symbol, dimensions, scale, 0);
-        AddHorizontalSymbolDimension(symbol[1], dimensions, scale, startDepthHorizontalSymbols);
-      }
       }
     }
+  });
 
   return dimensions;
 }
@@ -185,7 +165,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
   scale: number,
   depth: number
 ): void {
-  const width = TransformX(symbol.offset, symbol.width * 2, symbol.config.PositionReference);
+  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}`;
 
@@ -213,7 +193,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel,
   scale: number,
   depth: number
 ): void {
-  const height = TransformY(symbol.offset, symbol.height * 2, symbol.config.PositionReference);
+  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}`;