From 79caa5e9abe1e5f1fa141d330e573ddb1d353184 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Thu, 9 Feb 2023 17:25:55 +0100 Subject: [PATCH] WIP --- src/Components/Canvas/Symbol.ts | 2 +- .../SVG/Elements/DimensionLayer.tsx | 2 +- .../SelectorSymbol/SelectorSymbol.tsx | 2 +- src/Components/SVG/Elements/Symbol.tsx | 7 +++--- .../SymbolProperties/SymbolForm.tsx | 25 ++++++++++++------- src/Interfaces/IAvailableSymbol.ts | 10 ++++---- src/Interfaces/ISymbolModel.ts | 8 +++--- src/utils/default.ts | 4 ++- 8 files changed, 35 insertions(+), 25 deletions(-) diff --git a/src/Components/Canvas/Symbol.ts b/src/Components/Canvas/Symbol.ts index 96ca161..752eb66 100644 --- a/src/Components/Canvas/Symbol.ts +++ b/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 diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 62d8bef..e8f5df3 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/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}`; diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 2cdce3b..4b6899e 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/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; diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 09a19f9..a2b1e1b 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/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 ( diff --git a/src/Components/SymbolProperties/SymbolForm.tsx b/src/Components/SymbolProperties/SymbolForm.tsx index 9ffc727..fe0efeb 100644 --- a/src/Components/SymbolProperties/SymbolForm.tsx +++ b/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); }} /> 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)); }} /> + { props.onChange('isVertical', e.target.checked); }}/> props.onChange('height', Number(value))} /> + onChange={(value) => { props.onChange('height', Number(value)); }} /> props.onChange('width', Number(value))} /> + onChange={(value) => { props.onChange('width', Number(value)); }} /> props.onChange('showDimension', e.target.checked)}/> + onChange={(e) => { props.onChange('showDimension', e.target.checked); }}/> ); } diff --git a/src/Interfaces/IAvailableSymbol.ts b/src/Interfaces/IAvailableSymbol.ts index e69a996..fe085a6 100644 --- a/src/Interfaces/IAvailableSymbol.ts +++ b/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 diff --git a/src/Interfaces/ISymbolModel.ts b/src/Interfaces/ISymbolModel.ts index 3a71290..ff91b00 100644 --- a/src/Interfaces/ISymbolModel.ts +++ b/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 diff --git a/src/utils/default.ts b/src/utils/default.ts index 632c12a..585d5a4 100644 --- a/src/utils/default.ts +++ b/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(),