diff --git a/src/Components/Canvas/SelectorSymbol.ts b/src/Components/Canvas/SelectorSymbol.ts index fa833ce..69f49f5 100644 --- a/src/Components/Canvas/SelectorSymbol.ts +++ b/src/Components/Canvas/SelectorSymbol.ts @@ -5,7 +5,6 @@ import { RenderSelector } from './Selector'; interface ISelectorProps { symbols: Map 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.height / scale + props.selected.width, + props.selected.height ]; - const [x, y] = [ - props.selected.offset + props.selected.width / 2, - -SYMBOL_MARGIN - height]; + let x, y: number; + + 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 } ); } diff --git a/src/Components/Canvas/Symbol.ts b/src/Components/Canvas/Symbol.ts index c4dad94..842d433 100644 --- a/src/Components/Canvas/Symbol.ts +++ b/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(); export function RenderSymbol( ctx: CanvasRenderingContext2D, - symbol: ISymbolModel, - scale: number): void { + symbol: ISymbolModel): 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 height = symbol.height / scale; + const width = symbol.width; + const height = symbol.height; ctx.drawImage( image, - symbol.offset + symbol.width / 2, - -SYMBOL_MARGIN - height, + x, + y, width, height );