Merged PR 208: Fix scaling and position of symbols

public/images/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" />
+</svg>
+

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 } from '../../../utils/default';
+import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
 
 interface ISymbolProps {
   model: ISymbolModel
@@ -30,8 +30,14 @@ export function Symbol(props: ISymbolProps): JSX.Element {
   return (
     <image
       href={href}
+      preserveAspectRatio="none"
+      style={{
+        fill: 'none',
+        transform: `scale(${1 / props.scale}) translateX(-50%) translateY(-50%)`,
+        transformBox: 'fill-box'
+      }}
       x={props.model.x}
-      y={-DIMENSION_MARGIN / props.scale}
+      y={-SYMBOL_MARGIN / props.scale}
       height={props.model.height}
       width={props.model.width} />
   );

src/Components/SymbolProperties/SymbolForm.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { RestoreX, TransformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
+import { TextInputGroup } from '../InputGroup/TextInputGroup';
+import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector';
 
 interface ISymbolFormProps {
   symbol: ISymbolModel
@@ -20,15 +22,17 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='string'
         value={props.symbol.id.toString()}
         isDisabled={true} />
-      <InputGroup
+      <TextInputGroup
+        id='x'
         labelText='x'
         inputKey='x'
         labelClassName=''
         inputClassName=''
         type='number'
-        value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.XPositionReference).toString()}
+        value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()}
-        onChange={(event) => props.onChange('x', RestoreX(Number(event.target.value), props.symbol.width, props.symbol.config.XPositionReference))} />
+        onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
-      <InputGroup
+      <TextInputGroup
+        id='height'
         labelText='Height'
         inputKey='height'
         labelClassName=''
@@ -36,8 +40,9 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='number'
         min={0}
         value={props.symbol.height.toString()}
-        onChange={(event) => props.onChange('height', Number(event.target.value))} />
+        onChange={(value) => props.onChange('height', Number(value))} />
-      <InputGroup
+      <TextInputGroup
+        id='width'
         labelText='Width'
         inputKey='width'
         labelClassName=''
@@ -45,7 +50,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='number'
         min={0}
         value={props.symbol.width.toString()}
-        onChange={(event) => props.onChange('width', Number(event.target.value))} />
+        onChange={(value) => props.onChange('width', Number(value))} />
     </div>
   );
 }

src/Interfaces/IAvailableSymbol.ts

@@ -9,5 +9,5 @@ export interface IAvailableSymbol {
   Image: IImage
   Width?: number
   Height?: number
-  XPositionReference?: PositionReference
+  PositionReference?: PositionReference
 }

src/utils/default.ts

@@ -63,6 +63,7 @@ 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;
 
 /// SYMBOL DEFAULTS ///

test-server/http.js

@@ -241,6 +241,18 @@ const GetSVGLayoutConfiguration = () => {
         Name: 'Poteau structure',
         PositionReference: 1
       },
+      {
+        Width: 32,
+        Height: 32,
+        Image: {
+          Base64Image: null,
+          Name: 'Arrow',
+          Svg: null,
+          Url: './images/arrow-down.svg'
+        },
+        Name: 'Arrow',
+        PositionReference: 1
+      },
       {
         Width: 32,
         Height: 32,