[Update] Poc symbol Y working

src/Components/Editor/Behaviors/SymbolBehaviors.ts

@@ -1,9 +1,20 @@
-import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { type IContainerModel } from '../../../Interfaces/IContainerModel';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { ApplyParentTransform, FindContainerById } from '../../../utils/itertools';
-import { RestoreX, TransformX } from '../../../utils/svg';
+import { RestoreX, RestoreY, TransformX, TransformY } from '../../../utils/svg';
 
 export function ApplySymbol(containers: Map<string, IContainerModel>, container: IContainerModel, symbol: ISymbolModel): IContainerModel {
+  if (symbol.isVertical) {
+    container.properties.y = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference);
+    container.properties.y = RestoreY(container.properties.y, container.properties.height, container.properties.positionReference);
+    const parent = FindContainerById(containers, container.properties.parentId);
+    let y = 0;
+    if (parent !== undefined && parent !== null) {
+      ([,y] = ApplyParentTransform(containers, parent, 0, container.properties.y));
+    }
+    container.properties.y = y;
+    return container;
+  } else {
     container.properties.x = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference);
     container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference);
     const parent = FindContainerById(containers, container.properties.parentId);
@@ -13,4 +24,5 @@ export function ApplySymbol(containers: Map<string, IContainerModel>, container:
     }
     container.properties.x = x;
     return container;
+  }
 }

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 {
+): [boolean, boolean] {
-  let incrementDepthSymbols = false;
+  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++;
+      startDepthHorizontalSymbols++;
-      AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols);
+
+      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

src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx

@@ -23,7 +23,15 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
     props.selected.height / scale
   ];
 
-  const [x, y] = [props.selected.offset, -SYMBOL_MARGIN - height];
+  let x, y: number;
+
+  if (props.selected.isVertical) {
+    x = -SYMBOL_MARGIN;
+    y = props.selected.offset;
+  } else {
+    x = props.selected.offset;
+    y = -SYMBOL_MARGIN - height;
+  }
 
   const xText = x + width / 2;
   const yText = y + height / 2;

src/Components/SVG/Elements/Symbol.tsx

@@ -13,11 +13,20 @@ export function Symbol(props: ISymbolProps): JSX.Element {
   const hasSVG = props.model.config.Image.Svg !== undefined &&
     props.model.config.Image.Svg !== null;
 
+  let x, y: number;
+
   if (hasSVG) {
+    if (props.model.isVertical) {
+      x = -DIMENSION_MARGIN / props.scale;
+      y = props.model.offset;
+    } else {
+      x = props.model.offset;
+      y = -DIMENSION_MARGIN / props.scale;
+    }
     return (
       <g
-        x={props.model.offset}
+        x={x}
-        y={-DIMENSION_MARGIN / props.scale}
+        y={y}
       >
         <Interweave
           noWrap={true}
@@ -27,7 +36,13 @@ export function Symbol(props: ISymbolProps): JSX.Element {
       </g>
     );
   }
-
+  if (props.model.isVertical) {
+    x = -SYMBOL_MARGIN;
+    y = props.model.offset + props.model.width / 2;
+  } else {
+    x = props.model.offset + props.model.width / 2;
+    y = -SYMBOL_MARGIN;
+  }
   return (
     <image
       href={href}
@@ -36,9 +51,10 @@ export function Symbol(props: ISymbolProps): JSX.Element {
         fill: 'none',
         transform: 'translateY(-100%) translateX(-50%)',
         transformBox: 'fill-box'
+
       }}
-      x={props.model.offset + props.model.width / 2}
+      x={x}
-      y={-SYMBOL_MARGIN}
+      y={y}
       height={props.model.height / props.scale}
       width={props.model.width / props.scale} />
   );