[Update] Positions/calcs finitions

src/Components/Editor/Behaviors/SymbolBehaviors.ts

@@ -7,7 +7,9 @@ export function ApplySymbol(containers: Map<string, IContainerModel>,
   container: IContainerModel,
   symbol: ISymbolModel): IContainerModel {
   if (symbol.isVertical) {
-    container.properties.y = TransformY(symbol.offset, 0, symbol.config.PositionReference);
+    container.properties.y = TransformY(symbol.offset + (symbol.height / 2),
+      symbol.height,
+      symbol.config.PositionReference);
     container.properties.y = RestoreY(container.properties.y,
       container.properties.height,
       container.properties.positionReference);

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -45,12 +45,15 @@ function ActionByPosition(
     switch (position) {
       case Position.Left:
         incrementVerticalDepthSymbols = true;
+        verticalAction(dim, false, ...params);
+        break;
       case Position.Right: {
-        const isRight = position === Position.Right;
+        verticalAction(dim, true, ...params);
-        verticalAction(dim, isRight, ...params);
         break;
       }
       case Position.Down:
+        horizontalAction(dim, ...params);
+        break;
       case Position.Up:
         incrementHorizontalDepthSymbols = true;
         horizontalAction(dim, ...params);
@@ -102,7 +105,8 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
       if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
-    if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
+    if (SHOW_SELF_MARGINS_DIMENSIONS &&
+        container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) {
       const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.selfMarginsDimensions.positions,
@@ -139,7 +143,9 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
       if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; }
     }
 
-    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) {
       const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition(
         dimMapped,
         container.properties.dimensionOptions.childrenDimensions.positions,
@@ -162,11 +168,11 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
   for (const symbol of symbols) {
     if (symbol[1].showDimension) {
       startDepthHorizontalSymbols++;
-
+      startDepthVerticalSymbols++;
       if (symbol[1].isVertical) {
-        AddVerticalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthVerticalSymbols);
+        AddVerticalSymbolDimension(symbol[1], dimensions, scale, startDepthVerticalSymbols);
       } else {
-        AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthHorizontalSymbols);
+        AddHorizontalSymbolDimension(symbol[1], dimensions, scale, startDepthHorizontalSymbols);
       }
     }
   }
@@ -177,7 +183,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps):
 function AddHorizontalSymbolDimension(symbol: ISymbolModel,
   dimensions: React.ReactNode[],
   scale: number,
-  color: string,
   depth: number
 ): void {
   const width = symbol.offset + (symbol.width / 2);
@@ -206,7 +211,6 @@ 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);
@@ -265,8 +269,12 @@ function AddHorizontalChildrenDimension(
     return;
   }
 
-  let xChildrenStart = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference);
+  let xChildrenStart = TransformX(lastChild.properties.x,
-  let xChildrenEnd = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference);
+    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--) {
@@ -328,8 +336,12 @@ function AddVerticalChildrenDimension(
     return;
   }
 
-  let yChildrenStart = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
+  let yChildrenStart = TransformY(lastChild.properties.y,
-  let yChildrenEnd = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference);
+    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--) {

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

@@ -27,19 +27,14 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
   let x, y: number;
 
   if (props.selected.isVertical) {
-    x = -SYMBOL_MARGIN;
+    x = -SYMBOL_MARGIN / scale - width;
-    y = (props.selected.offset + props.selected.height / 2) - height;
+    y = (props.selected.offset + props.selected.height / 2) - (props.selected.height / scale / 2);
   } else {
     [x, y] = [
-      props.selected.offset + props.selected.width / 2,
+      (props.selected.offset + props.selected.width / 2) - (props.selected.width / scale / 2),
-      -SYMBOL_MARGIN - height];
+      -SYMBOL_MARGIN / scale - height];
   }
 
-  const style: React.CSSProperties = {
-    transform: 'translateX(-50%)',
-    transformBox: 'fill-box'
-  };
-
   return (
     <Selector
       text={props.selected.displayedText}
@@ -48,7 +43,6 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
       width={width}
       height={height}
       scale={scale}
-      style={style}
     />
   );
 }

src/Components/SVG/Elements/Symbol.tsx

@@ -37,22 +37,16 @@ export function Symbol(props: ISymbolProps): JSX.Element {
     );
   }
   if (props.model.isVertical) {
-    x = -SYMBOL_MARGIN;
+    x = (-SYMBOL_MARGIN - props.model.height) / props.scale;
-    y = props.model.offset + props.model.height / 2;
+    y = (props.model.offset + props.model.height / 2) - (props.model.height / props.scale / 2);
   } else {
-    x = props.model.offset + props.model.width / 2;
+    x = (props.model.offset + props.model.width / 2) - (props.model.width / props.scale / 2);
-    y = -SYMBOL_MARGIN;
+    y = (-SYMBOL_MARGIN - props.model.width) / props.scale;
   }
   return (
     <image
       href={href}
       preserveAspectRatio="none"
-      style={{
-        fill: 'none',
-        transform: 'translateY(-100%) translateX(-50%)',
-        transformBox: 'fill-box'
-
-      }}
       x={x}
       y={y}
       height={props.model.height / props.scale}