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>
   );
 }