Fix dimension spacing depending on scale

src/Components/SVG/Elements/Container.tsx

@@ -59,7 +59,7 @@ export function Container(props: IContainerProps): JSX.Element {
     </rect>);
   // Dimension props
   const depth = GetDepth(props.model);
-  const dimensionMargin = DIMENSION_MARGIN * depth;
+  const dimensionMargin = DIMENSION_MARGIN * depth / props.scale;
   const id = `dim-${props.model.properties.id}`;
   const xStart: number = 0;
   const xEnd = width;

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -70,7 +70,7 @@ function AddNewDimension(currentDepth: number, min: number, max: number, lastY:
   const id = `dim-depth-${currentDepth}`;
   const xStart = min;
   const xEnd = max;
-  const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1));
+  const y = (lastY + (DIMENSION_MARGIN * (currentDepth + 1))) / scale;
   const strokeWidth = 1;
   const width = xEnd - xStart;
   const text = width

src/Components/SVG/Elements/Symbol.tsx

@@ -5,6 +5,7 @@ import { DIMENSION_MARGIN } from '../../../utils/default';
 
 interface ISymbolProps {
   model: ISymbolModel
+  scale: number
 }
 
 export function Symbol(props: ISymbolProps): JSX.Element {
@@ -15,7 +16,7 @@ export function Symbol(props: ISymbolProps): JSX.Element {
     return (
       <g
         x={props.model.x}
-        y={-DIMENSION_MARGIN}
+        y={-DIMENSION_MARGIN / props.scale}
       >
         <Interweave
           noWrap={true}
@@ -30,7 +31,7 @@ export function Symbol(props: ISymbolProps): JSX.Element {
     <image
       href={href}
       x={props.model.x}
-      y={-DIMENSION_MARGIN}
+      y={-DIMENSION_MARGIN / props.scale}
       height={props.model.height}
       width={props.model.width} />
   );

src/Components/SVG/Elements/SymbolLayer.tsx

@@ -4,13 +4,18 @@ import { Symbol } from './Symbol';
 
 interface ISymbolLayerProps {
   symbols: Map<string, ISymbolModel>
+  scale: number
 }
 
 export function SymbolLayer(props: ISymbolLayerProps): JSX.Element {
   const symbols: JSX.Element[] = [];
   props.symbols.forEach((symbol) => {
     symbols.push(
-      <Symbol key={`symbol-${symbol.id}`} model={symbol} />
+      <Symbol
+        key={`symbol-${symbol.id}`}
+        model={symbol}
+        scale={props.scale}
+      />
     );
   });
   return (

src/Components/SVG/SVG.tsx

@@ -132,7 +132,7 @@ export function SVG(props: ISVGProps): JSX.Element {
           {SHOW_DIMENSIONS_PER_DEPTH
             ? <DepthDimensionLayer scale={scale} roots={props.children} />
             : null}
-          <SymbolLayer symbols={props.symbols} />
+          <SymbolLayer scale={scale} symbols={props.symbols} />
           <Selector scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
         </svg>
       </ReactSVGPanZoom>