WIP

src/Components/Canvas/Symbol.ts

@@ -36,7 +36,7 @@ function DrawImage(
   ctx.fillStyle = '#000000';
   ctx.drawImage(
     image,
-    symbol.x,
+    symbol.offset,
     -DIMENSION_MARGIN,
     symbol.width,
     symbol.height

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -169,7 +169,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel,
   color: string,
   depth: number
 ): void {
-  const width = symbol.x + (symbol.width / 2);
+  const width = symbol.offset + (symbol.width / 2);
   if (width != null && width > 0) {
     const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`;
 

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

@@ -23,7 +23,7 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
     props.selected.height / scale
   ];
 
-  const [x, y] = [props.selected.x, -SYMBOL_MARGIN - height];
+  const [x, y] = [props.selected.offset, -SYMBOL_MARGIN - height];
 
   const xText = x + width / 2;
   const yText = y + height / 2;

src/Components/SVG/Elements/Symbol.tsx

@@ -1,6 +1,6 @@
 import { Interweave } from 'interweave';
 import * as React from 'react';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
 
 interface ISymbolProps {
@@ -12,10 +12,11 @@ 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;
+
   if (hasSVG) {
     return (
       <g
-        x={props.model.x}
+        x={props.model.offset}
         y={-DIMENSION_MARGIN / props.scale}
       >
         <Interweave
@@ -36,7 +37,7 @@ export function Symbol(props: ISymbolProps): JSX.Element {
         transform: 'translateY(-100%) translateX(-50%)',
         transformBox: 'fill-box'
       }}
-      x={props.model.x + props.model.width / 2}
+      x={props.model.offset + props.model.width / 2}
       y={-SYMBOL_MARGIN}
       height={props.model.height / props.scale}
       width={props.model.width / props.scale} />

src/Components/SymbolProperties/SymbolForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { RestoreX, TransformX } from '../../utils/svg';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { TextInputGroup } from '../InputGroup/TextInputGroup';
 import { Text } from '../Text/Text';
@@ -32,16 +32,23 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         inputClassName=''
         type='string'
         value={props.symbol.displayedText}
-        onChange={(value) => props.onChange('displayedText', value)} />
+        onChange={(value) => { props.onChange('displayedText', value); }} />
       <TextInputGroup
         id='x'
-        labelText={Text({ textId: '@SymbolX' })}
+        labelText={Text({ textId: '@SymbolOffset' })}
         inputKey='x'
         labelClassName=''
         inputClassName=''
         type='number'
-        value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()}
-        onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
+        value={TransformX(props.symbol.offset, props.symbol.width, props.symbol.config.PositionReference).toString()}
+        onChange={(value) => { props.onChange('offset', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference)); }} />
+      <ToggleButton
+        labelText={Text({ textId: '@isVertical' })}
+        inputKey='isVertical'
+        labelClassName=''
+        inputClassName=''
+        checked={props.symbol.isVertical}
+        onChange={(e) => { props.onChange('isVertical', e.target.checked); }}/>
       <TextInputGroup
         id='height'
         labelText={Text({ textId: '@SymbolHeight' })}
@@ -51,7 +58,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='number'
         min={0}
         value={props.symbol.height.toString()}
-        onChange={(value) => props.onChange('height', Number(value))} />
+        onChange={(value) => { props.onChange('height', Number(value)); }} />
       <TextInputGroup
         id='width'
         labelText={Text({ textId: '@SymbolWidth' })}
@@ -61,14 +68,14 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
         type='number'
         min={0}
         value={props.symbol.width.toString()}
-        onChange={(value) => props.onChange('width', Number(value))} />
+        onChange={(value) => { props.onChange('width', Number(value)); }} />
       <ToggleButton
         labelText={Text({ textId: '@ShowDimension' })}
         inputKey='showDimension'
         labelClassName=''
         inputClassName=''
         checked={props.symbol.showDimension}
-        onChange={(e) => props.onChange('showDimension', e.target.checked)}/>
+        onChange={(e) => { props.onChange('showDimension', e.target.checked); }}/>
     </div>
   );
 }

src/Interfaces/IAvailableSymbol.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { PositionReference } from '../Enums/PositionReference';
-import { IAvailableContainer } from './IAvailableContainer';
-import { IImage } from './IImage';
+import { type PositionReference } from '../Enums/PositionReference';
+import { type IAvailableContainer } from './IAvailableContainer';
+import { type IImage } from './IImage';
 
 /**
  * Model of available symbol to configure the application */
@@ -13,9 +13,9 @@ export interface IAvailableSymbol {
   /** displayed text */
   DisplayedText?: string
 
-  X?: number
+  isVertical?: boolean
 
-  Y?: number
+  offset?: number
 
   Width?: number
 

src/Interfaces/ISymbolModel.ts

@@ -1,4 +1,4 @@
-import { IAvailableSymbol } from './IAvailableSymbol';
+import { type IAvailableSymbol } from './IAvailableSymbol';
 
 export interface ISymbolModel {
   /** Identifier */
@@ -13,10 +13,10 @@ export interface ISymbolModel {
   /** Configuration of the symbol */
   config: IAvailableSymbol
 
-  /** Horizontal offset */
-  x: number
+  isVertical: boolean
 
-  // TODO: Implement Y and verticality
+  /**  offset */
+  offset: number
 
   /** Width */
   width: number

src/utils/default.ts

@@ -73,6 +73,7 @@ export const NOTCHES_LENGTH = 10;
 /// SYMBOL DEFAULTS ///
 
 export const DEFAULT_SYMBOL_WIDTH = 32;
+export const DEFAULT_SYMBOL_IS_VERTICAL = false;
 export const DEFAULT_SYMBOL_HEIGHT = 32;
 
 /**
@@ -310,7 +311,8 @@ export function GetDefaultSymbolModel(name: string,
     displayedText: symbolConfig.DisplayedText ?? id,
     type: name,
     config: structuredClone(symbolConfig),
-    x: 0,
+    offset: 0,
+    isVertical : symbolConfig.isVertical ?? DEFAULT_SYMBOL_IS_VERTICAL,
     width: symbolConfig.Width ?? DEFAULT_SYMBOL_WIDTH,
     height: symbolConfig.Height ?? DEFAULT_SYMBOL_HEIGHT,
     linkedContainers: new Set(),