Merged PR 375: Symbol Y

Implement y axis in symbol

Related work items: #7306

src/Components/SVG/Elements/Dimension.tsx

@@ -31,7 +31,7 @@ function ApplyParametric(x0: number, t: number, vx: number): number {
 export function Dimension(props: IDimensionProps): JSX.Element {
   const scale = props.scale ?? 1;
   const style: React.CSSProperties = {
-    stroke: props.style.color,
+    stroke: props.style.color ?? '#000000',
     strokeWidth: (props.style.width ?? 2) / scale,
     strokeDasharray: props.style.dashArray
   };

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Orientation } from '../../../Enums/Orientation';
 import { Position } from '../../../Enums/Position';
 import {
+  DEFAULT_DIMENSION_SYMBOL_STYLE,
   DIMENSION_MARGIN,
   SHOW_BORROWER_DIMENSIONS,
   SHOW_CHILDREN_DIMENSIONS,
@@ -10,7 +11,7 @@ import {
 } from '../../../utils/default';
 import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
 import { TransformX, TransformY } from '../../../utils/svg';
-import { Dimension, type IDimensionStyle } from './Dimension';
+import { Dimension } from './Dimension';
 import { type IContainerModel } from '../../../Interfaces/IContainerModel';
 import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
 
@@ -41,14 +42,12 @@ function ActionByPosition(
   positions.forEach((position: Position) => {
     const dim = dimMapped[position];
     switch (position) {
+      case Position.Right:
       case Position.Left:
-      case Position.Right: {
-        const isRight = position === Position.Right;
-        verticalAction(dim, isRight, ...params);
+        verticalAction(dim, false, ...params);
         break;
-      }
-      case Position.Down:
       case Position.Up:
+      case Position.Down:
         horizontalAction(dim, ...params);
         break;
     }
@@ -94,7 +93,8 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
       );
     }
 
-    if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
+    if (SHOW_SELF_MARGINS_DIMENSIONS &&
+        container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
       ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfMarginsDimensions.positions,
@@ -127,7 +127,9 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
       );
     }
 
-    if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) {
+    if (SHOW_CHILDREN_DIMENSIONS &&
+        container.properties.dimensionOptions.childrenDimensions.positions.length > 0 &&
+        container.children.length >= 2) {
       ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.childrenDimensions.positions,
@@ -144,24 +146,76 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
     }
   }
 
-  let startDepthSymbols: number = 0;
-  symbols.forEach((symbol: ISymbolModel) => {
-    if (!symbol.showDimension) {
-      return;
+  // TODO: Implement DimensionManager
+  symbols.forEach((symbol) => {
+    if (symbol.showDimension) {
+      if (symbol.isVertical) {
+        AddVerticalSymbolDimension(symbol, dimensions, scale, 0);
+      } else {
+        AddHorizontalSymbolDimension(symbol, dimensions, scale, 0);
+      }
     }
-
-    startDepthSymbols++;
-    AddHorizontalSymbolDimension(
-      symbol,
-      dimensions,
-      scale,
-      startDepthSymbols
-    );
   });
 
   return dimensions;
 }
 
+function AddHorizontalSymbolDimension(symbol: ISymbolModel,
+  dimensions: React.ReactNode[],
+  scale: number,
+  depth: 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}/>
+    );
+  }
+}
+
+function AddVerticalSymbolDimension(symbol: ISymbolModel,
+  dimensions: React.ReactNode[],
+  scale: number,
+  depth: 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}/>
+    );
+  }
+}
+
 /**
  * A layer containing all dimension
  * @param props
@@ -195,8 +249,12 @@ function AddHorizontalChildrenDimension(
     return;
   }
 
-  let xChildrenStart = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference);
-  let xChildrenEnd = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference);
+  let xChildrenStart = TransformX(lastChild.properties.x,
+    lastChild.properties.width,
+    lastChild.properties.positionReference);
+  let xChildrenEnd = TransformX(lastChild.properties.x,
+    lastChild.properties.width,
+    lastChild.properties.positionReference);
 
   // Find the min and max
   for (let i = container.children.length - 2; i >= 0; i--) {
@@ -258,8 +316,12 @@ function AddVerticalChildrenDimension(
     return;
   }
 
-  let yChildrenStart = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
-  let yChildrenEnd = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
+  let yChildrenStart = TransformY(lastChild.properties.y,
+    lastChild.properties.height,
+    lastChild.properties.positionReference);
+  let yChildrenEnd = TransformY(lastChild.properties.y,
+    lastChild.properties.height,
+    lastChild.properties.positionReference);
 
   // Find the min and max
   for (let i = container.children.length - 2; i >= 0; i--) {
@@ -611,40 +673,3 @@ 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}/>
-  );
-}

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

@@ -1,13 +1,12 @@
 import '../Selector.scss';
 import * as React from 'react';
-import { SYMBOL_MARGIN } from '../../../../utils/default';
+import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../../utils/default';
 import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel';
 import { Selector } from '../Selector/Selector';
 
 interface ISelectorSymbolProps {
   symbols: Map<string, ISymbolModel>
   selected?: ISymbolModel
-  scale?: number
 }
 
 export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
@@ -18,30 +17,27 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
     );
   }
 
-  const scale = (props.scale ?? 1);
-  const [width, height] = [
-    props.selected.width / scale,
-    props.selected.height / scale
-  ];
+  let x, y: number;
 
-  const [x, y] = [
-    props.selected.x + props.selected.width / 2,
-    -SYMBOL_MARGIN - height];
+  const scaledHeight = props.selected.height;
+  const scaledWidth = props.selected.width;
 
-  const style: React.CSSProperties = {
-    transform: 'translateX(-50%)',
-    transformBox: 'fill-box'
-  };
+  if (props.selected.isVertical) {
+    x = -SYMBOL_MARGIN - props.selected.width;
+    y = props.selected.offset;
+  } else {
+    x = props.selected.offset;
+    y = -SYMBOL_MARGIN - props.selected.height;
+  }
 
   return (
     <Selector
       text={props.selected.displayedText}
       x={x}
       y={y}
-      width={width}
-      height={height}
-      scale={scale}
-      style={style}
+      width={scaledWidth}
+      height={scaledHeight}
+      scale={1}
     />
   );
 }

src/Components/SVG/Elements/Symbol.tsx

@@ -1,7 +1,7 @@
 import { Interweave } from 'interweave';
 import * as React from 'react';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
-import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
+import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { SYMBOL_MARGIN } from '../../../utils/default';
 
 interface ISymbolProps {
   model: ISymbolModel
@@ -12,11 +12,22 @@ export function Symbol(props: ISymbolProps): JSX.Element {
   const href = props.model.config.Image.Base64Image ?? props.model.config.Image.Url;
   const hasSVG = props.model.config.Image.Svg !== undefined &&
     props.model.config.Image.Svg !== null;
+
+  let x, y: number;
+
+  if (props.model.isVertical) {
+    x = -SYMBOL_MARGIN - props.model.width;
+    y = props.model.offset;
+  } else {
+    x = props.model.offset;
+    y = -SYMBOL_MARGIN - props.model.height;
+  }
+
   if (hasSVG) {
     return (
       <g
-        x={props.model.x}
-        y={-DIMENSION_MARGIN / props.scale}
+        x={x}
+        y={y}
       >
         <Interweave
           noWrap={true}
@@ -31,14 +42,9 @@ export function Symbol(props: ISymbolProps): JSX.Element {
     <image
       href={href}
       preserveAspectRatio="none"
-      style={{
-        fill: 'none',
-        transform: 'translateY(-100%) translateX(-50%)',
-        transformBox: 'fill-box'
-      }}
-      x={props.model.x + props.model.width / 2}
-      y={-SYMBOL_MARGIN}
-      height={props.model.height / props.scale}
-      width={props.model.width / props.scale} />
+      x={x}
+      y={y}
+      height={props.model.height}
+      width={props.model.width} />
   );
 }