Canvas: Add vertical symbols

src/Components/Canvas/SelectorSymbol.ts

@@ -5,7 +5,6 @@ import { RenderSelector } from './Selector';
 interface ISelectorProps {
   symbols: Map<string, ISymbolModel>
   selected?: ISymbolModel
-  scale?: number
 }
 
 export function RenderSymbolSelector(
@@ -17,15 +16,20 @@ export function RenderSymbolSelector(
     return;
   }
 
-  const scale = (props.scale ?? 1);
   const [width, height] = [
-    props.selected.width / scale,
+    props.selected.width,
-    props.selected.height / scale
+    props.selected.height
   ];
 
-  const [x, y] = [
+  let x, y: number;
-    props.selected.offset + props.selected.width / 2,
+
-    -SYMBOL_MARGIN - height];
+  if (props.selected.isVertical) {
+    x = -SYMBOL_MARGIN - props.selected.width;
+    y = props.selected.offset;
+  } else {
+    x = props.selected.offset;
+    y = -SYMBOL_MARGIN - props.selected.height;
+  }
 
   const text = props.selected.displayedText;
   RenderSelector(
@@ -37,7 +41,7 @@ export function RenderSymbolSelector(
       y,
       width,
       height,
-      scale
+      scale: 1
     }
   );
 }

src/Components/Canvas/Symbol.ts

@@ -1,12 +1,11 @@
 import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../utils/default';
+import { SYMBOL_MARGIN } from '../../utils/default';
 
 const IMAGE_CACHE = new Map<string, HTMLImageElement>();
 
 export function RenderSymbol(
   ctx: CanvasRenderingContext2D,
-  symbol: ISymbolModel,
+  symbol: ISymbolModel): void {
-  scale: number): void {
   const href = symbol.config.Image.Base64Image ?? symbol.config.Image.Url;
 
   if (href === undefined) {
@@ -19,28 +18,36 @@ export function RenderSymbol(
     newImage.src = href;
     IMAGE_CACHE.set(href, newImage);
     newImage.onload = () => {
-      DrawImage(ctx, scale, newImage, symbol);
+      DrawImage(ctx, newImage, symbol);
     };
     return;
   }
 
-  DrawImage(ctx, scale, image, symbol);
+  DrawImage(ctx, image, symbol);
 }
 
 function DrawImage(
   ctx: CanvasRenderingContext2D,
-  scale: number,
   image: HTMLImageElement,
   symbol: ISymbolModel
 ): void {
+  let x, y: number;
+  if (symbol.isVertical) {
+    x = -SYMBOL_MARGIN - symbol.width;
+    y = symbol.offset;
+  } else {
+    x = symbol.offset;
+    y = -SYMBOL_MARGIN - symbol.height;
+  }
+
   ctx.save();
   ctx.fillStyle = '#000000';
-  const width = symbol.width / scale;
+  const width = symbol.width;
-  const height = symbol.height / scale;
+  const height = symbol.height;
   ctx.drawImage(
     image,
-    symbol.offset + symbol.width / 2,
+    x,
-    -SYMBOL_MARGIN - height,
+    y,
     width,
     height
   );