Merged PR 331: Remove DepthDimensionLayer + Add fixes from !330

src/Components/API/api.test.tsx

@@ -10,7 +10,7 @@ import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IPattern } from '../../Interfaces/IPattern';
-import { DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default';
+import { DEFAULT_DIMENSION_OPTION, DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default';
 import { FetchConfiguration } from './api';
 
 const CSHARP_WEB_API_BASE_URL = 'http://localhost:5209/';
@@ -144,23 +144,11 @@ describe.concurrent('Models test suite', () => {
     PositionReference: 0,
     HideChildrenInTreeview: true,
     DimensionOptions: {
-      childrenDimensions: {
-        color: '#000000',
-        positions: []
-      },
-      selfDimensions: {
-        color: '#000000',
-        positions: []
-      },
-      selfMarginsDimensions: {
-        color: '#000000',
-        positions: []
-      },
+      childrenDimensions: DEFAULT_DIMENSION_OPTION,
+      selfDimensions: DEFAULT_DIMENSION_OPTION,
+      selfMarginsDimensions: DEFAULT_DIMENSION_OPTION,
       markPosition: [],
-      dimensionWithMarks: {
-        color: '#000000',
-        positions: []
-      }
+      dimensionWithMarks: DEFAULT_DIMENSION_OPTION
     },
     IsHidden: true,
     Blacklist: [

src/Components/ContainerProperties/ContainerProperties.test.tsx

@@ -5,6 +5,7 @@ import { PositionReference } from '../../Enums/PositionReference';
 import { IContainerProperties } from '../../Interfaces/IContainerProperties';
 import { Orientation } from '../../Enums/Orientation';
 import { ContainerProperties } from './ContainerProperties';
+import { DEFAULT_DIMENSION_OPTION } from '../../utils/default';
 
 describe.concurrent('Properties', () => {
   it('No properties', () => {
@@ -43,23 +44,11 @@ describe.concurrent('Properties', () => {
       warning: '',
       hideChildrenInTreeview: false,
       dimensionOptions: {
-        childrenDimensions: {
-          color: '#000000',
-          positions: []
-        },
-        selfDimensions: {
-          color: '#000000',
-          positions: []
-        },
-        selfMarginsDimensions: {
-          color: '#000000',
-          positions: []
-        },
+        childrenDimensions: DEFAULT_DIMENSION_OPTION,
+        selfDimensions: DEFAULT_DIMENSION_OPTION,
+        selfMarginsDimensions: DEFAULT_DIMENSION_OPTION,
         markPosition: [],
-        dimensionWithMarks: {
-          color: '#000000',
-          positions: []
-        }
+        dimensionWithMarks: DEFAULT_DIMENSION_OPTION
       }
     };
 

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { DIMENSION_MARGIN } from '../../../utils/default';
-import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
-import { TransformX } from '../../../utils/svg';
-import { Dimension } from './Dimension';
-
-interface IDimensionLayerProps {
-  containers: Map<string, IContainerModel>
-  roots: IContainerModel | IContainerModel[] | null
-  scale?: number
-}
-
-function GetDimensionsNodes(
-  containers: Map<string, IContainerModel>,
-  root: IContainerModel,
-  scale: number
-): React.ReactNode[] {
-  const it = MakeBFSIterator(root, containers);
-  const dimensions: React.ReactNode[] = [];
-  let currentDepth = 0;
-  let min = Infinity;
-  let max = -Infinity;
-  let lastY = 0;
-  for (const { container, depth } of it) {
-    if (currentDepth !== depth) {
-      AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
-
-      currentDepth = depth;
-      min = Infinity;
-      max = -Infinity;
-    }
-
-    const absoluteX = GetAbsolutePosition(containers, container)[0];
-    const x = TransformX(absoluteX, container.properties.width, container.properties.positionReference);
-    lastY = container.properties.y + container.properties.height;
-    if (x < min) {
-      min = x;
-    }
-
-    if (x > max) {
-      max = x;
-    }
-  }
-
-  AddNewDimension(currentDepth, min, max, lastY, scale, '#000000', dimensions);
-
-  return dimensions;
-}
-
-/**
- * A layer containing all dimension
- * @param props
- * @returns
- */
-export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
-  let dimensions: React.ReactNode[] = [];
-  const scale = props.scale ?? 1;
-  if (Array.isArray(props.roots)) {
-    props.roots.forEach(child => {
-      dimensions.concat(GetDimensionsNodes(props.containers, child, scale));
-    });
-  } else if (props.roots !== null) {
-    dimensions = GetDimensionsNodes(props.containers, props.roots, scale);
-  }
-  return (
-    <g>
-      {dimensions}
-    </g>
-  );
-}
-
-function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, color: string, dimensions: React.ReactNode[]): void {
-  const id = `dim-depth-${currentDepth}`;
-  const xStart = min;
-  const xEnd = max;
-  const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)) / scale;
-  const width = xEnd - xStart;
-  const text = width
-    .toFixed(0)
-    .toString();
-
-  if (width === 0) {
-    return;
-  }
-
-  dimensions.push(
-    <Dimension
-      key={id}
-      id={id}
-      xStart={xStart}
-      yStart={y}
-      xEnd={xEnd}
-      yEnd={y}
-      text={text}
-      scale={scale}
-      color={color}
-    />
-  );
-}

src/Components/SVG/SVG.tsx

@@ -3,8 +3,7 @@ import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector/Selector';
-import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
-import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
+import { MAX_FRAMERATE } from '../../utils/default';
 import { SymbolLayer } from './Elements/SymbolLayer';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { DimensionLayer } from './Elements/DimensionLayer';
@@ -94,9 +93,6 @@ export function SVG(props: ISVGProps): JSX.Element {
       >
         <svg {...properties}>
           {children}
-          {SHOW_DIMENSIONS_PER_DEPTH
-            ? <DepthDimensionLayer containers={props.containers} scale={scale} roots={props.children} />
-            : null}
           <DimensionLayer containers={props.containers} symbols={props.symbols} scale={scale} root={props.children} />
           <SymbolLayer scale={scale} symbols={props.symbols} />
           <Selector containers={props.containers} scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}

src/utils/default.ts

@@ -66,7 +66,6 @@ export const SHOW_SELF_DIMENSIONS = true;
 export const SHOW_SELF_MARGINS_DIMENSIONS = true;
 export const SHOW_CHILDREN_DIMENSIONS = true;
 export const SHOW_BORROWER_DIMENSIONS = true;
-export const SHOW_DIMENSIONS_PER_DEPTH = false;
 export const DIMENSION_MARGIN = 50;
 export const SYMBOL_MARGIN = 25;
 export const NOTCHES_LENGTH = 10;
@@ -188,12 +187,12 @@ const DEFAULT_CONTAINER_STYLE = {
   strokeWidth: 2
 };
 
-const DEFAULT_DIMENSION_STYLE = {
+export const DEFAULT_DIMENSION_STYLE = {
   color: '#000000',
   width: 2
 };
 
-const DEFAULT_DIMENSION_OPTION: IDimensionOptions = {
+export const DEFAULT_DIMENSION_OPTION: IDimensionOptions = {
   positions: [],
   style: DEFAULT_DIMENSION_STYLE
 };