From 79caa5e9abe1e5f1fa141d330e573ddb1d353184 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Thu, 9 Feb 2023 17:25:55 +0100 Subject: [PATCH 01/17] 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(), From b09718d72df86ae47eb5df70c5c0ef34ca0466e6 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Fri, 10 Feb 2023 09:46:39 +0100 Subject: [PATCH 02/17] WIP2 --- .../Editor/Actions/SymbolOperations.ts | 17 +++++++++++------ .../Editor/Behaviors/SymbolBehaviors.ts | 2 +- src/Components/SymbolProperties/SymbolForm.tsx | 4 ++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/Components/Editor/Actions/SymbolOperations.ts b/src/Components/Editor/Actions/SymbolOperations.ts index 7464193..abff45f 100644 --- a/src/Components/Editor/Actions/SymbolOperations.ts +++ b/src/Components/Editor/Actions/SymbolOperations.ts @@ -1,10 +1,10 @@ -import { IConfiguration } from '../../../Interfaces/IConfiguration'; -import { IContainerModel } from '../../../Interfaces/IContainerModel'; -import { IHistoryState } from '../../../Interfaces/IHistoryState'; -import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { type IConfiguration } from '../../../Interfaces/IConfiguration'; +import { type IContainerModel } from '../../../Interfaces/IContainerModel'; +import { type IHistoryState } from '../../../Interfaces/IHistoryState'; +import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { GetDefaultSymbolModel } from '../../../utils/default'; import { FindContainerById } from '../../../utils/itertools'; -import { RestoreX } from '../../../utils/svg'; +import {RestoreX, RestoreY} from '../../../utils/svg'; import { ApplyBehaviors, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors'; import { GetCurrentHistory, GetCurrentHistoryState, UpdateCounters } from '../Editor'; import { AddContainers } from './AddContainer'; @@ -32,7 +32,12 @@ export function AddSymbol( const newSymbols = structuredClone(current.symbols); const newSymbol: ISymbolModel = GetDefaultSymbolModel(name, typeCounters, type, symbolConfig); const containers = structuredClone(current.containers); - newSymbol.x = RestoreX(newSymbol.x, newSymbol.width, newSymbol.config.PositionReference); + + if (newSymbol.isVertical) { + newSymbol.offset = RestoreY(newSymbol.offset, newSymbol.height, newSymbol.config.PositionReference); + } else { + newSymbol.offset = RestoreX(newSymbol.offset, newSymbol.width, newSymbol.config.PositionReference); + } newSymbols.set(newSymbol.id, newSymbol); diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index 5efde19..7ece236 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -4,7 +4,7 @@ import { ApplyParentTransform, FindContainerById } from '../../../utils/itertool import { RestoreX, TransformX } from '../../../utils/svg'; export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { - container.properties.x = TransformX(symbol.x, symbol.width, symbol.config.PositionReference); + container.properties.x = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference); const parent = FindContainerById(containers, container.properties.parentId); let x = 0; diff --git a/src/Components/SymbolProperties/SymbolForm.tsx b/src/Components/SymbolProperties/SymbolForm.tsx index fe0efeb..9b268fe 100644 --- a/src/Components/SymbolProperties/SymbolForm.tsx +++ b/src/Components/SymbolProperties/SymbolForm.tsx @@ -34,9 +34,9 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element { value={props.symbol.displayedText} onChange={(value) => { props.onChange('displayedText', value); }} /> Date: Fri, 10 Feb 2023 17:08:18 +0100 Subject: [PATCH 03/17] [Update] Poc symbol Y working --- .../Editor/Behaviors/SymbolBehaviors.ts | 34 ++++++--- .../SVG/Elements/DimensionLayer.tsx | 73 ++++++++++++++----- .../SelectorSymbol/SelectorSymbol.tsx | 10 ++- src/Components/SVG/Elements/Symbol.tsx | 26 +++++-- 4 files changed, 109 insertions(+), 34 deletions(-) diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index 7ece236..939b1f6 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -1,16 +1,28 @@ -import { IContainerModel } from '../../../Interfaces/IContainerModel'; -import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { type IContainerModel } from '../../../Interfaces/IContainerModel'; +import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ApplyParentTransform, FindContainerById } from '../../../utils/itertools'; -import { RestoreX, TransformX } from '../../../utils/svg'; +import { RestoreX, RestoreY, TransformX, TransformY } from '../../../utils/svg'; export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { - container.properties.x = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); - container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference); - const parent = FindContainerById(containers, container.properties.parentId); - let x = 0; - if (parent !== undefined && parent !== null) { - ([x] = ApplyParentTransform(containers, parent, container.properties.x, 0)); + if (symbol.isVertical) { + container.properties.y = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference); + container.properties.y = RestoreY(container.properties.y, container.properties.height, container.properties.positionReference); + const parent = FindContainerById(containers, container.properties.parentId); + let y = 0; + if (parent !== undefined && parent !== null) { + ([,y] = ApplyParentTransform(containers, parent, 0, container.properties.y)); + } + container.properties.y = y; + return container; + } else { + container.properties.x = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); + container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference); + const parent = FindContainerById(containers, container.properties.parentId); + let x = 0; + if (parent !== undefined && parent !== null) { + ([x] = ApplyParentTransform(containers, parent, container.properties.x, 0)); + } + container.properties.x = x; + return container; } - container.properties.x = x; - return container; } diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index e8f5df3..6c5ad56 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Orientation } from '../../../Enums/Orientation'; import { Position } from '../../../Enums/Position'; -import { IContainerModel } from '../../../Interfaces/IContainerModel'; +import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, @@ -12,7 +12,7 @@ import { import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { TransformX, TransformY } from '../../../utils/svg'; import { Dimension } from './Dimension'; -import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; interface IDimensionLayerProps { containers: Map @@ -37,12 +37,13 @@ function ActionByPosition( horizontalAction: (dim: number, ...params: any[]) => void, verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void, params: any[] -): boolean { - let incrementDepthSymbols = false; +): [boolean, boolean] { + let [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols] = [false, false]; positions.forEach((position: Position) => { const dim = dimMapped[position]; switch (position) { case Position.Left: + incrementVerticalDepthSymbols = true; case Position.Right: { const isRight = position === Position.Right; verticalAction(dim, isRight, ...params); @@ -50,12 +51,12 @@ function ActionByPosition( } case Position.Down: case Position.Up: - incrementDepthSymbols = true; + incrementHorizontalDepthSymbols = true; horizontalAction(dim, ...params); break; } }); - return incrementDepthSymbols; + return [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols]; } /** @@ -74,7 +75,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): if (!SHOW_SELF_DIMENSIONS) { return []; } - let startDepthSymbols: number = 0; + let [startDepthHorizontalSymbols, startDepthVerticalSymbols] = [0, 0]; for (const { container, depth, currentTransform } of it) { const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; @@ -84,7 +85,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): const containerRightDim = rightDim + offset; const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim]; if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) { - const incrementDepthSymbol = ActionByPosition( + const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( dimMapped, container.properties.dimensionOptions.selfDimensions.positions, AddHorizontalSelfDimension, @@ -96,11 +97,12 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): scale, container.properties.dimensionOptions.selfDimensions.color] ); - if (incrementDepthSymbol) { startDepthSymbols++; } + if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } + if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) { - const incrementDepthSymbol = ActionByPosition( + const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( dimMapped, container.properties.dimensionOptions.selfMarginsDimensions.positions, AddHorizontalSelfMarginsDimension, @@ -112,11 +114,12 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): scale, container.properties.dimensionOptions.selfMarginsDimensions.color] ); - if (incrementDepthSymbol) { startDepthSymbols++; } + if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } + if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) { - const incrementDepthSymbol = ActionByPosition( + const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( dimMapped, container.properties.dimensionOptions.dimensionWithMarks.positions, @@ -131,11 +134,12 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): scale, container.properties.dimensionOptions.dimensionWithMarks.color] ); - if (incrementDepthSymbol) { startDepthSymbols++; } + if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } + if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) { - const incrementDepthSymbol = ActionByPosition( + const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( dimMapped, container.properties.dimensionOptions.childrenDimensions.positions, AddHorizontalChildrenDimension, @@ -149,14 +153,20 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): container.properties.dimensionOptions.childrenDimensions.color] ); - if (incrementDepthSymbol) { startDepthSymbols++; } + if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } + if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } } for (const symbol of symbols) { if (symbol[1].showDimension) { - startDepthSymbols++; - AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthSymbols); + startDepthHorizontalSymbols++; + + if (symbol[1].isVertical) { + AddVerticalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthVerticalSymbols); + } else { + AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthHorizontalSymbols); + } } } @@ -192,6 +202,35 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, } } +function AddVerticalSymbolDimension(symbol: ISymbolModel, + dimensions: React.ReactNode[], + scale: number, + color: string, + depth: number +): void { + const height = symbol.offset + (symbol.height / 2); + if (height != null && height > 0) { + const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`; + + const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; + const text = height + .toFixed(0) + .toString(); + dimensions.push( + + ); + } +} + /** * A layer containing all dimension * @param props diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 4b6899e..6a27fd8 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -23,7 +23,15 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { props.selected.height / scale ]; - const [x, y] = [props.selected.offset, -SYMBOL_MARGIN - height]; + let x, y: number; + + if (props.selected.isVertical) { + x = -SYMBOL_MARGIN; + y = props.selected.offset; + } else { + x = props.selected.offset; + y = -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 a2b1e1b..9595e8c 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -13,11 +13,20 @@ export function Symbol(props: ISymbolProps): JSX.Element { const hasSVG = props.model.config.Image.Svg !== undefined && props.model.config.Image.Svg !== null; + let x, y: number; + if (hasSVG) { + if (props.model.isVertical) { + x = -DIMENSION_MARGIN / props.scale; + y = props.model.offset; + } else { + x = props.model.offset; + y = -DIMENSION_MARGIN / props.scale; + } return ( ); } - + if (props.model.isVertical) { + x = -SYMBOL_MARGIN; + y = props.model.offset + props.model.width / 2; + } else { + x = props.model.offset + props.model.width / 2; + y = -SYMBOL_MARGIN; + } return ( ); From 6b6175a5210d98fcb7db4bd8d986a8af868e2a3c Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Mon, 20 Feb 2023 10:31:52 +0100 Subject: [PATCH 04/17] [Merge] Merged changes from master before further implementations --- src/Components/Canvas/DimensionLayer.ts | 11 ++++- src/Components/Canvas/SelectorSymbol.ts | 2 +- .../SVG/Elements/DimensionLayer.tsx | 43 ++----------------- 3 files changed, 14 insertions(+), 42 deletions(-) diff --git a/src/Components/Canvas/DimensionLayer.ts b/src/Components/Canvas/DimensionLayer.ts index d986de1..6b3182e 100644 --- a/src/Components/Canvas/DimensionLayer.ts +++ b/src/Components/Canvas/DimensionLayer.ts @@ -2,7 +2,13 @@ import { Orientation } from '../../Enums/Orientation'; import { Position } from '../../Enums/Position'; import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; -import { SHOW_SELF_DIMENSIONS, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, DIMENSION_MARGIN, SHOW_SELF_MARGINS_DIMENSIONS } from '../../utils/default'; +import { + SHOW_SELF_DIMENSIONS, + SHOW_BORROWER_DIMENSIONS, + SHOW_CHILDREN_DIMENSIONS, + DIMENSION_MARGIN, + SHOW_SELF_MARGINS_DIMENSIONS +} from '../../utils/default'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../utils/itertools'; import { TransformX, TransformY } from '../../utils/svg'; import { type IDimensionStyle } from '../SVG/Elements/Dimension'; @@ -100,6 +106,7 @@ export function AddSymbolDimensions( /** * Fonction that call another function given the positions + * @param ctx * @param dimMapped Position mapped depending on the Position enum in order: * [0:left, 1:bottom, 2:up, 3:right] * @param positions List of positions @@ -569,7 +576,7 @@ function AddHorizontalSymbolDimension( scale: number, depth: number ): void { - const width = symbol.x + (symbol.width / 2); + const width = symbol.offset + (symbol.width / 2); if (width == null || width <= 0) { return; diff --git a/src/Components/Canvas/SelectorSymbol.ts b/src/Components/Canvas/SelectorSymbol.ts index ddfbb29..fa833ce 100644 --- a/src/Components/Canvas/SelectorSymbol.ts +++ b/src/Components/Canvas/SelectorSymbol.ts @@ -24,7 +24,7 @@ export function RenderSymbolSelector( ]; const [x, y] = [ - props.selected.x + props.selected.width / 2, + props.selected.offset + props.selected.width / 2, -SYMBOL_MARGIN - height]; const text = props.selected.displayedText; diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index adeed20..f3634e9 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -182,6 +182,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, const width = symbol.offset + (symbol.width / 2); if (width != null && width > 0) { const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; + const style = symbol.linkedContainers.values().next().value.dimensionOptions; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const text = width @@ -197,7 +198,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, yEnd={-offset} text={text} scale={scale} - color={color}/> + style={style}/> ); } } @@ -211,6 +212,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, const height = symbol.offset + (symbol.height / 2); if (height != null && height > 0) { const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`; + const style = symbol.linkedContainers.values().next().value.dimensionOptions; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const text = height @@ -226,7 +228,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, yEnd={0} text={text} scale={scale} - color={color}/> + style={style}/> ); } } @@ -680,40 +682,3 @@ function AddVerticalSelfMarginDimension( ); } } - -function AddHorizontalSymbolDimension( - symbol: ISymbolModel, - dimensions: React.ReactNode[], - scale: number, - depth: number -): void { - const width = symbol.x + (symbol.width / 2); - - if (width == null || width <= 0) { - return; - } - - const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; - - const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; - const text = width - .toFixed(0) - .toString(); - - // TODO: Put this in default.ts - const defaultDimensionSymbolStyle: IDimensionStyle = { - color: 'black' - }; - dimensions.push( - - ); -} From 869cd2a7c48cfd382c92856faceee6f057d84f2b Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Mon, 20 Feb 2023 14:46:22 +0100 Subject: [PATCH 05/17] [Fix] SymbolDimension (Canvas/Svg) => DEFAULT_DIMENSION_SYMBOL_STYLE in default.ts --- src/Components/Canvas/DimensionLayer.ts | 10 ++-------- src/Components/SVG/Elements/DimensionLayer.tsx | 9 ++++----- src/utils/default.ts | 6 +++++- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/Components/Canvas/DimensionLayer.ts b/src/Components/Canvas/DimensionLayer.ts index 6b3182e..1a345a8 100644 --- a/src/Components/Canvas/DimensionLayer.ts +++ b/src/Components/Canvas/DimensionLayer.ts @@ -7,11 +7,10 @@ import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, DIMENSION_MARGIN, - SHOW_SELF_MARGINS_DIMENSIONS + SHOW_SELF_MARGINS_DIMENSIONS, DEFAULT_DIMENSION_SYMBOL_STYLE } from '../../utils/default'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../utils/itertools'; import { TransformX, TransformY } from '../../utils/svg'; -import { type IDimensionStyle } from '../SVG/Elements/Dimension'; import { RenderDimension } from './Dimension'; export function AddContainerDimensions( @@ -589,11 +588,6 @@ function AddHorizontalSymbolDimension( .toFixed(0) .toString(); - // TODO: Put this in default.ts - const defaultDimensionSymbolStyle: IDimensionStyle = { - color: 'black' - }; - RenderDimension(ctx, { id, xStart: 0, @@ -602,6 +596,6 @@ function AddHorizontalSymbolDimension( yEnd: -offset, text, scale, - style: defaultDimensionSymbolStyle + style: DEFAULT_DIMENSION_SYMBOL_STYLE }); } diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index f3634e9..a097a3e 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Orientation } from '../../../Enums/Orientation'; import { Position } from '../../../Enums/Position'; import { + DEFAULT_DIMENSION_SYMBOL_STYLE, DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, @@ -10,7 +11,7 @@ import { } from '../../../utils/default'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { TransformX, TransformY } from '../../../utils/svg'; -import { Dimension, type IDimensionStyle } from './Dimension'; +import { Dimension } from './Dimension'; import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; @@ -182,7 +183,6 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, const width = symbol.offset + (symbol.width / 2); if (width != null && width > 0) { const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; - const style = symbol.linkedContainers.values().next().value.dimensionOptions; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const text = width @@ -198,7 +198,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, yEnd={-offset} text={text} scale={scale} - style={style}/> + style={DEFAULT_DIMENSION_SYMBOL_STYLE}/> ); } } @@ -212,7 +212,6 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, const height = symbol.offset + (symbol.height / 2); if (height != null && height > 0) { const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`; - const style = symbol.linkedContainers.values().next().value.dimensionOptions; const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; const text = height @@ -228,7 +227,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, yEnd={0} text={text} scale={scale} - style={style}/> + style={DEFAULT_DIMENSION_SYMBOL_STYLE}/> ); } } diff --git a/src/utils/default.ts b/src/utils/default.ts index 24e8bbb..a7baa17 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -9,6 +9,7 @@ import { type ISymbolModel } from '../Interfaces/ISymbolModel'; import { Orientation } from '../Enums/Orientation'; import { AppState } from '../Enums/AppState'; import { type IDimensionOptions } from '../Interfaces/IDimensionOptions'; +import { type IDimensionStyle } from '../Components/SVG/Elements/Dimension'; /// EDITOR DEFAULTS /// @@ -69,6 +70,9 @@ export const SHOW_BORROWER_DIMENSIONS = true; export const DIMENSION_MARGIN = 50; export const SYMBOL_MARGIN = 25; export const NOTCHES_LENGTH = 10; +export const DEFAULT_DIMENSION_SYMBOL_STYLE: IDimensionStyle = { + color: '#000000' +}; /// SYMBOL DEFAULTS /// @@ -306,7 +310,7 @@ export function GetDefaultSymbolModel(name: string, type: name, config: structuredClone(symbolConfig), offset: 0, - isVertical : symbolConfig.isVertical ?? DEFAULT_SYMBOL_IS_VERTICAL, + isVertical: symbolConfig.isVertical ?? DEFAULT_SYMBOL_IS_VERTICAL, width: symbolConfig.Width ?? DEFAULT_SYMBOL_WIDTH, height: symbolConfig.Height ?? DEFAULT_SYMBOL_HEIGHT, linkedContainers: new Set(), From 387e1035011fd35543f8c43791189d0552481fd6 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Mon, 20 Feb 2023 15:32:06 +0100 Subject: [PATCH 06/17] [WIP] Height --- src/Components/Editor/Behaviors/SymbolBehaviors.ts | 14 ++++++++++---- .../SVG/Elements/SelectorSymbol/SelectorSymbol.tsx | 11 ++++------- src/Components/SVG/Elements/Symbol.tsx | 2 +- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index 939b1f6..e73350f 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -3,10 +3,14 @@ import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ApplyParentTransform, FindContainerById } from '../../../utils/itertools'; import { RestoreX, RestoreY, TransformX, TransformY } from '../../../utils/svg'; -export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { +export function ApplySymbol(containers: Map, + container: IContainerModel, + symbol: ISymbolModel): IContainerModel { if (symbol.isVertical) { - container.properties.y = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference); - container.properties.y = RestoreY(container.properties.y, container.properties.height, container.properties.positionReference); + container.properties.y = TransformY(symbol.offset, 0, symbol.config.PositionReference); + container.properties.y = RestoreY(container.properties.y, + container.properties.height, + container.properties.positionReference); const parent = FindContainerById(containers, container.properties.parentId); let y = 0; if (parent !== undefined && parent !== null) { @@ -16,7 +20,9 @@ export function ApplySymbol(containers: Map, container: return container; } else { container.properties.x = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); - container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference); + container.properties.x = RestoreX(container.properties.x, + container.properties.width, + container.properties.positionReference); const parent = FindContainerById(containers, container.properties.parentId); let x = 0; if (parent !== undefined && parent !== null) { diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index a420e40..7941731 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -28,16 +28,13 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { if (props.selected.isVertical) { x = -SYMBOL_MARGIN; - y = props.selected.offset; + y = (props.selected.offset + props.selected.height / 2) - height; } else { - [x,y] = [ - props.selected.offset + props.selected.width / 2, - -SYMBOL_MARGIN - height] + [x, y] = [ + props.selected.offset + props.selected.width / 2, + -SYMBOL_MARGIN - height]; } - const xText = x + width / 2; - const yText = y + height / 2; - const style: React.CSSProperties = { transform: 'translateX(-50%)', transformBox: 'fill-box' diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 9595e8c..41f6c88 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -38,7 +38,7 @@ export function Symbol(props: ISymbolProps): JSX.Element { } if (props.model.isVertical) { x = -SYMBOL_MARGIN; - y = props.model.offset + props.model.width / 2; + y = props.model.offset + props.model.height / 2; } else { x = props.model.offset + props.model.width / 2; y = -SYMBOL_MARGIN; From 174767f22c43c0f9323a03fb9407078b1e8bfb15 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Mon, 20 Feb 2023 17:17:32 +0100 Subject: [PATCH 07/17] [Update] Positions/calcs finitions --- .../Editor/Behaviors/SymbolBehaviors.ts | 4 +- .../SVG/Elements/DimensionLayer.tsx | 38 ++++++++++++------- .../SelectorSymbol/SelectorSymbol.tsx | 14 ++----- src/Components/SVG/Elements/Symbol.tsx | 14 ++----- 4 files changed, 36 insertions(+), 34 deletions(-) diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index e73350f..7a2004f 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -7,7 +7,9 @@ export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { if (symbol.isVertical) { - container.properties.y = TransformY(symbol.offset, 0, symbol.config.PositionReference); + container.properties.y = TransformY(symbol.offset + (symbol.height / 2), + symbol.height, + symbol.config.PositionReference); container.properties.y = RestoreY(container.properties.y, container.properties.height, container.properties.positionReference); diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index a097a3e..7dbe572 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -45,12 +45,15 @@ function ActionByPosition( switch (position) { case Position.Left: incrementVerticalDepthSymbols = true; + verticalAction(dim, false, ...params); + break; case Position.Right: { - const isRight = position === Position.Right; - verticalAction(dim, isRight, ...params); + verticalAction(dim, true, ...params); break; } case Position.Down: + horizontalAction(dim, ...params); + break; case Position.Up: incrementHorizontalDepthSymbols = true; horizontalAction(dim, ...params); @@ -102,7 +105,8 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } - if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) { + if (SHOW_SELF_MARGINS_DIMENSIONS && + container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) { const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( dimMapped, container.properties.dimensionOptions.selfMarginsDimensions.positions, @@ -139,7 +143,9 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } - if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) { + if (SHOW_CHILDREN_DIMENSIONS && + container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && + container.children.length >= 2) { const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( dimMapped, container.properties.dimensionOptions.childrenDimensions.positions, @@ -162,11 +168,11 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): for (const symbol of symbols) { if (symbol[1].showDimension) { startDepthHorizontalSymbols++; - + startDepthVerticalSymbols++; if (symbol[1].isVertical) { - AddVerticalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthVerticalSymbols); + AddVerticalSymbolDimension(symbol[1], dimensions, scale, startDepthVerticalSymbols); } else { - AddHorizontalSymbolDimension(symbol[1], dimensions, scale, 'black', startDepthHorizontalSymbols); + AddHorizontalSymbolDimension(symbol[1], dimensions, scale, startDepthHorizontalSymbols); } } } @@ -177,7 +183,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): function AddHorizontalSymbolDimension(symbol: ISymbolModel, dimensions: React.ReactNode[], scale: number, - color: string, depth: number ): void { const width = symbol.offset + (symbol.width / 2); @@ -206,7 +211,6 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, function AddVerticalSymbolDimension(symbol: ISymbolModel, dimensions: React.ReactNode[], scale: number, - color: string, depth: number ): void { const height = symbol.offset + (symbol.height / 2); @@ -265,8 +269,12 @@ function AddHorizontalChildrenDimension( return; } - let xChildrenStart = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference); - let xChildrenEnd = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.positionReference); + let xChildrenStart = TransformX(lastChild.properties.x, + lastChild.properties.width, + lastChild.properties.positionReference); + let xChildrenEnd = TransformX(lastChild.properties.x, + lastChild.properties.width, + lastChild.properties.positionReference); // Find the min and max for (let i = container.children.length - 2; i >= 0; i--) { @@ -328,8 +336,12 @@ function AddVerticalChildrenDimension( return; } - let yChildrenStart = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference); - let yChildrenEnd = TransformY(lastChild.properties.y, lastChild.properties.height, lastChild.properties.positionReference); + let yChildrenStart = TransformY(lastChild.properties.y, + lastChild.properties.height, + lastChild.properties.positionReference); + let yChildrenEnd = TransformY(lastChild.properties.y, + lastChild.properties.height, + lastChild.properties.positionReference); // Find the min and max for (let i = container.children.length - 2; i >= 0; i--) { diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 7941731..87ec519 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -27,19 +27,14 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { let x, y: number; if (props.selected.isVertical) { - x = -SYMBOL_MARGIN; - y = (props.selected.offset + props.selected.height / 2) - height; + x = -SYMBOL_MARGIN / scale - width; + y = (props.selected.offset + props.selected.height / 2) - (props.selected.height / scale / 2); } else { [x, y] = [ - props.selected.offset + props.selected.width / 2, - -SYMBOL_MARGIN - height]; + (props.selected.offset + props.selected.width / 2) - (props.selected.width / scale / 2), + -SYMBOL_MARGIN / scale - height]; } - const style: React.CSSProperties = { - transform: 'translateX(-50%)', - transformBox: 'fill-box' - }; - return ( ); } diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 41f6c88..043dad9 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -37,22 +37,16 @@ export function Symbol(props: ISymbolProps): JSX.Element { ); } if (props.model.isVertical) { - x = -SYMBOL_MARGIN; - y = props.model.offset + props.model.height / 2; + x = (-SYMBOL_MARGIN - props.model.height) / props.scale; + y = (props.model.offset + props.model.height / 2) - (props.model.height / props.scale / 2); } else { - x = props.model.offset + props.model.width / 2; - y = -SYMBOL_MARGIN; + x = (props.model.offset + props.model.width / 2) - (props.model.width / props.scale / 2); + y = (-SYMBOL_MARGIN - props.model.width) / props.scale; } return ( Date: Tue, 21 Feb 2023 15:02:53 +0100 Subject: [PATCH 08/17] [Update] Translation and fix --- .../Editor/Behaviors/SymbolBehaviors.ts | 2 +- .../SVG/Elements/DimensionLayer.tsx | 4 +- src/Components/SVG/Elements/Symbol.tsx | 4 +- .../SymbolProperties/SymbolForm.tsx | 42 +++++++++++++++++-- src/Translations/translation.en.json | 4 +- src/Translations/translation.fr.json | 4 +- 6 files changed, 49 insertions(+), 11 deletions(-) diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index 7a2004f..c5544f4 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -7,7 +7,7 @@ export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { if (symbol.isVertical) { - container.properties.y = TransformY(symbol.offset + (symbol.height / 2), + container.properties.y = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference); container.properties.y = RestoreY(container.properties.y, diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 7dbe572..f8d3999 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -167,11 +167,11 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): for (const symbol of symbols) { if (symbol[1].showDimension) { - startDepthHorizontalSymbols++; - startDepthVerticalSymbols++; if (symbol[1].isVertical) { + startDepthVerticalSymbols++; AddVerticalSymbolDimension(symbol[1], dimensions, scale, startDepthVerticalSymbols); } else { + startDepthHorizontalSymbols++; AddHorizontalSymbolDimension(symbol[1], dimensions, scale, startDepthHorizontalSymbols); } } diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 043dad9..1103bff 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -37,11 +37,11 @@ export function Symbol(props: ISymbolProps): JSX.Element { ); } if (props.model.isVertical) { - x = (-SYMBOL_MARGIN - props.model.height) / props.scale; + x = (-SYMBOL_MARGIN - props.model.width) / props.scale; y = (props.model.offset + props.model.height / 2) - (props.model.height / props.scale / 2); } else { x = (props.model.offset + props.model.width / 2) - (props.model.width / props.scale / 2); - y = (-SYMBOL_MARGIN - props.model.width) / props.scale; + y = (-SYMBOL_MARGIN - props.model.height) / props.scale; } return ( void } +function Restore(offset: number, + isVertical: boolean, + height: number, + width: number, + position: PositionReference | undefined): number { + if (isVertical) { + return RestoreY(offset, height, position); + } else { + return RestoreX(offset, width, position); + } +} +function Transform(offset: number, + isVertical: boolean, + height: number, + width: number, + position: PositionReference | undefined): number { + if (isVertical) { + return TransformY(offset, height, position); + } else { + return TransformX(offset, width, position); + } +} + export function SymbolForm(props: ISymbolFormProps): JSX.Element { return (
@@ -40,10 +63,21 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element { labelClassName='' inputClassName='' type='number' - 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)); }} /> + value={Transform(props.symbol.offset, + props.symbol.isVertical, + props.symbol.height, + props.symbol.width, + props.symbol.config.PositionReference).toString()} + onChange={(value) => { + props.onChange('offset', + Restore(Number(value), + props.symbol.isVertical, + props.symbol.height, + props.symbol.width, + props.symbol.config.PositionReference)); + }} /> Date: Tue, 21 Feb 2023 16:26:40 +0100 Subject: [PATCH 09/17] [Fix] SymbolBehaviors.ts => symbol.height/2 in place to get correct positionning --- src/Components/Editor/Behaviors/SymbolBehaviors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index c5544f4..67af838 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -7,7 +7,7 @@ export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { if (symbol.isVertical) { - container.properties.y = TransformY(symbol.offset, + container.properties.y = TransformY(symbol.offset + symbol.height / 2, symbol.height, symbol.config.PositionReference); container.properties.y = RestoreY(container.properties.y, From a476017d998c789c3a4520ec4fa77f373ad24ccd Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Wed, 22 Feb 2023 12:10:01 +0100 Subject: [PATCH 10/17] [Update] Symbol alignement behavior + filtered Symbollist in ContainerForm.tsx --- .../ContainerProperties/ContainerForm.tsx | 31 +++++++++--- .../ContainerProperties.tsx | 9 ++-- .../Editor/Behaviors/SymbolBehaviors.ts | 6 +-- .../ElementsSidebar/ElementsSidebar.tsx | 7 ++- .../SVG/Elements/DimensionLayer.tsx | 4 +- .../SelectorSymbol/SelectorSymbol.tsx | 48 ++++++++++++++----- src/Components/SVG/Elements/Symbol.tsx | 33 ++++++++++++- test-server/http.js | 42 ++++++++++++++-- 8 files changed, 148 insertions(+), 32 deletions(-) diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx index 8b7a505..f70e42d 100644 --- a/src/Components/ContainerProperties/ContainerForm.tsx +++ b/src/Components/ContainerProperties/ContainerForm.tsx @@ -5,7 +5,8 @@ import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, - SHOW_SELF_DIMENSIONS, SHOW_SELF_MARGINS_DIMENSIONS + SHOW_SELF_DIMENSIONS, + SHOW_SELF_MARGINS_DIMENSIONS } from '../../utils/default'; import { ApplyWidthMargin, @@ -27,8 +28,12 @@ import { OrientationSelector } from '../RadioGroupButtons/OrientationSelector'; import { OrientationCheckboxes } from '../CheckboxGroupButtons/OrientationCheckboxes'; import { PositionCheckboxes } from '../CheckboxGroupButtons/PositionCheckboxes'; import { Category } from '../Category/Category'; +import { Orientation } from '../../Enums/Orientation'; +import { FindContainerById } from '../../utils/itertools'; +import { type IContainerModel } from '../../Interfaces/IContainerModel'; interface IContainerFormProps { + containers: Map properties: IContainerProperties symbols: Map onChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void @@ -36,6 +41,8 @@ interface IContainerFormProps { export function ContainerForm(props: IContainerFormProps): JSX.Element { const categoryHeight = 'h-11'; + const parent = FindContainerById(props.containers, props.properties.parentId); + const isVertical = parent?.properties.orientation === Orientation.Vertical; return (
{ props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right)); }} + value={(RemoveWidthMargin(props.properties.width, + props.properties.margin.left, + props.properties.margin.right)).toString()} + onChange={(value) => { + props.onChange('width', ApplyWidthMargin(Number(value), + props.properties.margin.left, + props.properties.margin.right)); + }} isDisabled={props.properties.isFlex}/> { props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom)); }} + value={(RemoveWidthMargin(props.properties.height, + props.properties.margin.top, + props.properties.margin.bottom)).toString()} + onChange={(value) => { + props.onChange('height', ApplyWidthMargin(Number(value), + props.properties.margin.top, + props.properties.margin.bottom)); + }} isDisabled={props.properties.isFlex} /> ({ + inputs={[...props.symbols.values()].filter(symbol => (symbol.isVertical === isVertical)).map(symbol => ({ key: symbol.id, text: symbol.id, value: symbol.id diff --git a/src/Components/ContainerProperties/ContainerProperties.tsx b/src/Components/ContainerProperties/ContainerProperties.tsx index b296e3a..642126c 100644 --- a/src/Components/ContainerProperties/ContainerProperties.tsx +++ b/src/Components/ContainerProperties/ContainerProperties.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { PropertyType } from '../../Enums/PropertyType'; -import { IContainerProperties } from '../../Interfaces/IContainerProperties'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; +import { type PropertyType } from '../../Enums/PropertyType'; +import { type IContainerProperties } from '../../Interfaces/IContainerProperties'; +import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ContainerForm } from './ContainerForm'; +import { type IContainerModel } from '../../Interfaces/IContainerModel'; interface IPropertiesProps { + containers: Map properties?: IContainerProperties symbols: Map onChange: (key: string, value: string | number | boolean | number[], type?: PropertyType) => void @@ -18,6 +20,7 @@ export function ContainerProperties(props: IPropertiesProps): JSX.Element { return (
diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index 67af838..df375d0 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -7,8 +7,8 @@ export function ApplySymbol(containers: Map, container: IContainerModel, symbol: ISymbolModel): IContainerModel { if (symbol.isVertical) { - container.properties.y = TransformY(symbol.offset + symbol.height / 2, - symbol.height, + container.properties.y = TransformY(symbol.offset, + symbol.height * 2, symbol.config.PositionReference); container.properties.y = RestoreY(container.properties.y, container.properties.height, @@ -21,7 +21,7 @@ export function ApplySymbol(containers: Map, container.properties.y = y; return container; } else { - container.properties.x = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); + container.properties.x = TransformX(symbol.offset, symbol.width * 2, symbol.config.PositionReference); container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference); diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index e39bf2d..c583413 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -169,6 +169,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element { {props.selectedExtendedSidebar === ExtendedSidebar.Property &&
0) { const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; @@ -213,7 +213,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, scale: number, depth: number ): void { - const height = symbol.offset + (symbol.height / 2); + const height = TransformY(symbol.offset, symbol.height * 2, symbol.config.PositionReference); if (height != null && height > 0) { const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`; diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 87ec519..842527e 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -3,6 +3,8 @@ import * as React from 'react'; import { SYMBOL_MARGIN } from '../../../../utils/default'; import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel'; import { Selector } from '../Selector/Selector'; +import { TransformX, TransformY } from '../../../../utils/svg'; +import { PositionReference } from '../../../../Enums/PositionReference'; interface ISelectorSymbolProps { symbols: Map @@ -19,20 +21,44 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { } const scale = (props.scale ?? 1); - const [width, height] = [ - props.selected.width / scale, - props.selected.height / scale - ]; let x, y: number; + const scaledHeight = props.selected.height / scale; + const scaledWidth = props.selected.width / scale; + if (props.selected.isVertical) { - x = -SYMBOL_MARGIN / scale - width; - y = (props.selected.offset + props.selected.height / 2) - (props.selected.height / scale / 2); + x = (-SYMBOL_MARGIN - props.selected.width) / scale; + y = TransformY(props.selected.offset, props.selected.height * 2, props.selected.config.PositionReference); + + switch (props.selected.config.PositionReference) { + case PositionReference.CenterLeft: + case PositionReference.CenterCenter: + case PositionReference.CenterRight: + y -= scaledHeight / 2; + break; + case PositionReference.BottomLeft: + case PositionReference.BottomCenter: + case PositionReference.BottomRight: + y -= scaledHeight; + break; + } } else { - [x, y] = [ - (props.selected.offset + props.selected.width / 2) - (props.selected.width / scale / 2), - -SYMBOL_MARGIN / scale - height]; + x = TransformX(props.selected.offset, props.selected.width * 2, props.selected.config.PositionReference); + + switch (props.selected.config.PositionReference) { + case PositionReference.TopCenter: + case PositionReference.CenterCenter: + case PositionReference.BottomCenter: + x -= scaledWidth / 2; + break; + case PositionReference.TopRight: + case PositionReference.CenterRight: + case PositionReference.BottomRight: + x -= scaledWidth; + break; + } + y = (-SYMBOL_MARGIN - props.selected.height) / scale; } return ( @@ -40,8 +66,8 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { text={props.selected.displayedText} x={x} y={y} - width={width} - height={height} + width={scaledWidth} + height={scaledHeight} scale={scale} /> ); diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 1103bff..78978f9 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -2,6 +2,8 @@ import { Interweave } from 'interweave'; import * as React from 'react'; import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default'; +import { TransformX, TransformY } from '../../../utils/svg'; +import { PositionReference } from '../../../Enums/PositionReference'; interface ISymbolProps { model: ISymbolModel @@ -38,9 +40,36 @@ export function Symbol(props: ISymbolProps): JSX.Element { } if (props.model.isVertical) { x = (-SYMBOL_MARGIN - props.model.width) / props.scale; - y = (props.model.offset + props.model.height / 2) - (props.model.height / props.scale / 2); + y = TransformY(props.model.offset, props.model.height * 2, props.model.config.PositionReference); + + switch (props.model.config.PositionReference) { + case PositionReference.CenterLeft: + case PositionReference.CenterCenter: + case PositionReference.CenterRight: + y -= props.model.height / props.scale / 2; + break; + case PositionReference.BottomLeft: + case PositionReference.BottomCenter: + case PositionReference.BottomRight: + y -= props.model.height / props.scale; + break; + } } else { - x = (props.model.offset + props.model.width / 2) - (props.model.width / props.scale / 2); + x = TransformX(props.model.offset, props.model.width * 2, props.model.config.PositionReference); + + switch (props.model.config.PositionReference) { + case PositionReference.TopCenter: + case PositionReference.CenterCenter: + case PositionReference.BottomCenter: + x -= props.model.width / props.scale / 2; + break; + case PositionReference.TopRight: + case PositionReference.CenterRight: + case PositionReference.BottomRight: + x -= props.model.width / props.scale; + break; + } + y = (-SYMBOL_MARGIN - props.model.height) / props.scale; } return ( diff --git a/test-server/http.js b/test-server/http.js index 73f8755..ade40aa 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -286,7 +286,7 @@ const GetSVGLayoutConfiguration = () => { Svg: null, Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg' }, - Name: 'Poteau structure', + Name: 'Poteau CenterCenter', PositionReference: 1, AssociatedContainer: { Type: 'Montant' @@ -297,13 +297,49 @@ const GetSVGLayoutConfiguration = () => { Height: 32, Image: { Base64Image: null, - Name: 'Arrow', + Name: 'ArrowTopLeft', Svg: null, Url: './images/arrow-down.svg' }, - Name: 'Arrow', + Name: 'ArrowTopLeft', PositionReference: 0 }, + { + Width: 32, + Height: 32, + Image: { + Base64Image: null, + Name: 'ArrowTopRight', + Svg: null, + Url: './images/arrow-down.svg' + }, + Name: 'ArrowTopRight', + PositionReference: 2 + }, + { + Width: 32, + Height: 32, + Image: { + Base64Image: null, + Name: 'ArrowCenterRight', + Svg: null, + Url: './images/arrow-down.svg' + }, + Name: 'ArrowCenterRight', + PositionReference: 5 + }, + { + Width: 32, + Height: 32, + Image: { + Base64Image: null, + Name: 'ArrowBottomRight', + Svg: null, + Url: './images/arrow-down.svg' + }, + Name: 'ArrowBottomRight', + PositionReference: 8 + }, { Width: 32, Height: 32, From 1c8cebf0f51d8480534d6778ce7e96abd64b8d1f Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 10:57:27 +0100 Subject: [PATCH 11/17] Remove usage of scale for symbols + Remove shenanigans with multipliers --- .../Editor/Behaviors/SymbolBehaviors.ts | 7 ++- .../SelectorSymbol/SelectorSymbol.tsx | 45 +++------------ src/Components/SVG/Elements/Symbol.tsx | 56 ++++--------------- test-server/http.js | 2 +- 4 files changed, 25 insertions(+), 85 deletions(-) diff --git a/src/Components/Editor/Behaviors/SymbolBehaviors.ts b/src/Components/Editor/Behaviors/SymbolBehaviors.ts index df375d0..97c872d 100644 --- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts +++ b/src/Components/Editor/Behaviors/SymbolBehaviors.ts @@ -8,7 +8,7 @@ export function ApplySymbol(containers: Map, symbol: ISymbolModel): IContainerModel { if (symbol.isVertical) { container.properties.y = TransformY(symbol.offset, - symbol.height * 2, + symbol.height, symbol.config.PositionReference); container.properties.y = RestoreY(container.properties.y, container.properties.height, @@ -21,7 +21,10 @@ export function ApplySymbol(containers: Map, container.properties.y = y; return container; } else { - container.properties.x = TransformX(symbol.offset, symbol.width * 2, symbol.config.PositionReference); + container.properties.x = TransformX( + symbol.offset, + symbol.width, + symbol.config.PositionReference); container.properties.x = RestoreX(container.properties.x, container.properties.width, container.properties.positionReference); diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 842527e..4f0fc82 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -1,6 +1,6 @@ import '../Selector.scss'; import * as React from 'react'; -import { SYMBOL_MARGIN } from '../../../../utils/default'; +import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../../utils/default'; import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel'; import { Selector } from '../Selector/Selector'; import { TransformX, TransformY } from '../../../../utils/svg'; @@ -9,7 +9,6 @@ import { PositionReference } from '../../../../Enums/PositionReference'; interface ISelectorSymbolProps { symbols: Map selected?: ISymbolModel - scale?: number } export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { @@ -20,45 +19,17 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { ); } - const scale = (props.scale ?? 1); - let x, y: number; - const scaledHeight = props.selected.height / scale; - const scaledWidth = props.selected.width / scale; + const scaledHeight = props.selected.height; + const scaledWidth = props.selected.width; if (props.selected.isVertical) { - x = (-SYMBOL_MARGIN - props.selected.width) / scale; - y = TransformY(props.selected.offset, props.selected.height * 2, props.selected.config.PositionReference); - - switch (props.selected.config.PositionReference) { - case PositionReference.CenterLeft: - case PositionReference.CenterCenter: - case PositionReference.CenterRight: - y -= scaledHeight / 2; - break; - case PositionReference.BottomLeft: - case PositionReference.BottomCenter: - case PositionReference.BottomRight: - y -= scaledHeight; - break; - } + x = -DIMENSION_MARGIN; + y = props.selected.offset; } else { - x = TransformX(props.selected.offset, props.selected.width * 2, props.selected.config.PositionReference); - - switch (props.selected.config.PositionReference) { - case PositionReference.TopCenter: - case PositionReference.CenterCenter: - case PositionReference.BottomCenter: - x -= scaledWidth / 2; - break; - case PositionReference.TopRight: - case PositionReference.CenterRight: - case PositionReference.BottomRight: - x -= scaledWidth; - break; - } - y = (-SYMBOL_MARGIN - props.selected.height) / scale; + x = props.selected.offset; + y = -DIMENSION_MARGIN; } return ( @@ -68,7 +39,7 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { y={y} width={scaledWidth} height={scaledHeight} - scale={scale} + scale={1} /> ); } diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 78978f9..c4552c7 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -1,9 +1,7 @@ import { Interweave } from 'interweave'; import * as React from 'react'; import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; -import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default'; -import { TransformX, TransformY } from '../../../utils/svg'; -import { PositionReference } from '../../../Enums/PositionReference'; +import { DIMENSION_MARGIN } from '../../../utils/default'; interface ISymbolProps { model: ISymbolModel @@ -17,14 +15,15 @@ export function Symbol(props: ISymbolProps): JSX.Element { let x, y: number; + if (props.model.isVertical) { + x = -DIMENSION_MARGIN; + y = props.model.offset; + } else { + x = props.model.offset; + y = -DIMENSION_MARGIN; + } + if (hasSVG) { - if (props.model.isVertical) { - x = -DIMENSION_MARGIN / props.scale; - y = props.model.offset; - } else { - x = props.model.offset; - y = -DIMENSION_MARGIN / props.scale; - } return ( ); } - if (props.model.isVertical) { - x = (-SYMBOL_MARGIN - props.model.width) / props.scale; - y = TransformY(props.model.offset, props.model.height * 2, props.model.config.PositionReference); - switch (props.model.config.PositionReference) { - case PositionReference.CenterLeft: - case PositionReference.CenterCenter: - case PositionReference.CenterRight: - y -= props.model.height / props.scale / 2; - break; - case PositionReference.BottomLeft: - case PositionReference.BottomCenter: - case PositionReference.BottomRight: - y -= props.model.height / props.scale; - break; - } - } else { - x = TransformX(props.model.offset, props.model.width * 2, props.model.config.PositionReference); - - switch (props.model.config.PositionReference) { - case PositionReference.TopCenter: - case PositionReference.CenterCenter: - case PositionReference.BottomCenter: - x -= props.model.width / props.scale / 2; - break; - case PositionReference.TopRight: - case PositionReference.CenterRight: - case PositionReference.BottomRight: - x -= props.model.width / props.scale; - break; - } - - y = (-SYMBOL_MARGIN - props.model.height) / props.scale; - } return ( + height={props.model.height} + width={props.model.width} /> ); } diff --git a/test-server/http.js b/test-server/http.js index ade40aa..274ef8a 100644 --- a/test-server/http.js +++ b/test-server/http.js @@ -287,7 +287,7 @@ const GetSVGLayoutConfiguration = () => { Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg' }, Name: 'Poteau CenterCenter', - PositionReference: 1, + PositionReference: 4, AssociatedContainer: { Type: 'Montant' } From 05eb5d5ef0464ff2d37778f6e5850cbceaae0668 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 11:06:31 +0100 Subject: [PATCH 12/17] Fix wrong margin on symbols --- src/Components/SVG/Elements/Symbol.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index c4552c7..dcdf707 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -1,7 +1,7 @@ import { Interweave } from 'interweave'; import * as React from 'react'; import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; -import { DIMENSION_MARGIN } from '../../../utils/default'; +import { SYMBOL_MARGIN } from '../../../utils/default'; interface ISymbolProps { model: ISymbolModel @@ -16,11 +16,11 @@ export function Symbol(props: ISymbolProps): JSX.Element { let x, y: number; if (props.model.isVertical) { - x = -DIMENSION_MARGIN; + x = -SYMBOL_MARGIN; y = props.model.offset; } else { x = props.model.offset; - y = -DIMENSION_MARGIN; + y = -SYMBOL_MARGIN; } if (hasSVG) { From dcccfec1d272941b3201c4655a0c74ac2a3b57b2 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 11:06:48 +0100 Subject: [PATCH 13/17] Canvas: Add vertical symbols --- src/Components/Canvas/SelectorSymbol.ts | 20 ++++++++++-------- src/Components/Canvas/Symbol.ts | 27 ++++++++++++++++--------- 2 files changed, 29 insertions(+), 18 deletions(-) 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 ); From cfbedd3e594867334b01c3896abc99bb74aa133a Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 12:21:05 +0100 Subject: [PATCH 14/17] Fix bug with colors and dimensions misapplied --- .../ContainerProperties/ContainerForm.tsx | 32 ++++++++----------- src/Components/SVG/Elements/Dimension.tsx | 2 +- src/utils/default.ts | 2 +- test-server/http.js | 18 +++++------ 4 files changed, 25 insertions(+), 29 deletions(-) diff --git a/src/Components/ContainerProperties/ContainerForm.tsx b/src/Components/ContainerProperties/ContainerForm.tsx index f70e42d..9a19743 100644 --- a/src/Components/ContainerProperties/ContainerForm.tsx +++ b/src/Components/ContainerProperties/ContainerForm.tsx @@ -385,7 +385,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element { labelClassName='' inputClassName='' type='color' - value={props.properties.dimensionOptions.selfDimensions.color} + value={props.properties.dimensionOptions.selfDimensions.color ?? '#000000'} onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/> { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/> { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/> { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/>
- { props.onChange('stroke', value, PropertyType.Style); }} - /> + type='color' + value={props.properties.style.stroke ?? '#000000'} + onChange={(e) => { props.onChange('stroke', e.target.value, PropertyType.Style); }}/> { props.onChange('strokeWidth', Number(value), PropertyType.Style); }} /> - { props.onChange('fill', value, PropertyType.Style); }} - /> + type='color' + value={props.properties.style.fill ?? '#000000'} + onChange={(e) => { props.onChange('fill', e.target.value, PropertyType.Style); }}/> { Style: { fillOpacity: 1, strokeWidth: 2, - stroke: 'red', + stroke: '#ff0000', fill: '#d3c9b7', }, IsFlex: true, @@ -96,7 +96,7 @@ const GetSVGLayoutConfiguration = () => { Style: { fillOpacity: 1, strokeWidth: 2, - stroke: 'red', + stroke: '#ff0000', fill: '#d3c9b7', }, IsFlex: true, @@ -115,8 +115,8 @@ const GetSVGLayoutConfiguration = () => { Style: { fillOpacity: 1, strokeWidth: 2, - stroke: 'green', - fill: 'white' + stroke: '#00ff00', + fill: '#ffffff' }, Category: "Stuff", IsFlex: true, @@ -258,8 +258,8 @@ const GetSVGLayoutConfiguration = () => { Style: { fillOpacity: 1, strokeWidth: 2, - stroke: 'blue', - fill: 'blue', + stroke: '#0000ff', + fill: '#0000ff', } }, { @@ -270,8 +270,8 @@ const GetSVGLayoutConfiguration = () => { Style: { fillOpacity: 1, strokeWidth: 2, - stroke: 'red', - fill: 'red', + stroke: '#ff0000', + fill: '#ff0000', } } ], @@ -370,7 +370,7 @@ const GetSVGLayoutConfiguration = () => { Height: 200, Orientation: 0, Style: { - stroke: 'black', + stroke: '#000000', strokeWidth: 2, fillOpacity: 0 } From 79e5f84501bebb260e8556c851842271e30c6cd5 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 12:21:23 +0100 Subject: [PATCH 15/17] Canvas: Fix RenderSymbol call --- src/Components/Canvas/Renderer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Canvas/Renderer.ts b/src/Components/Canvas/Renderer.ts index c93e615..4faeb24 100644 --- a/src/Components/Canvas/Renderer.ts +++ b/src/Components/Canvas/Renderer.ts @@ -73,7 +73,7 @@ export function RenderSymbols( ): void { let count = 0; symbols.forEach((symbol: ISymbolModel) => { - RenderSymbol(ctx, symbol, scale); + RenderSymbol(ctx, symbol); if (!symbol.showDimension) { return; From 1e89f7803a48beaedc4573dc26d060d741972b92 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 12:24:34 +0100 Subject: [PATCH 16/17] Symbol: Apply the width/height offset --- .../SVG/Elements/SelectorSymbol/SelectorSymbol.tsx | 6 ++---- src/Components/SVG/Elements/Symbol.tsx | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 4f0fc82..22f4800 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -3,8 +3,6 @@ import * as React from 'react'; import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../../utils/default'; import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel'; import { Selector } from '../Selector/Selector'; -import { TransformX, TransformY } from '../../../../utils/svg'; -import { PositionReference } from '../../../../Enums/PositionReference'; interface ISelectorSymbolProps { symbols: Map @@ -25,11 +23,11 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element { const scaledWidth = props.selected.width; if (props.selected.isVertical) { - x = -DIMENSION_MARGIN; + x = -SYMBOL_MARGIN - props.selected.width; y = props.selected.offset; } else { x = props.selected.offset; - y = -DIMENSION_MARGIN; + y = -SYMBOL_MARGIN - props.selected.height; } return ( diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index dcdf707..c3a6eb8 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -16,11 +16,11 @@ export function Symbol(props: ISymbolProps): JSX.Element { let x, y: number; if (props.model.isVertical) { - x = -SYMBOL_MARGIN; + x = -SYMBOL_MARGIN - props.model.width; y = props.model.offset; } else { x = props.model.offset; - y = -SYMBOL_MARGIN; + y = -SYMBOL_MARGIN - props.model.height; } if (hasSVG) { From cf856d367d5db798eeb1286799d6491763a02ad3 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 12:52:51 +0100 Subject: [PATCH 17/17] Disable depth for SymbolDimension + Canvas: Add vertical symbol dimension --- src/Components/Canvas/DimensionLayer.ts | 43 +++++++++++- src/Components/Canvas/Renderer.ts | 5 +- .../SVG/Elements/DimensionLayer.tsx | 68 +++++++------------ 3 files changed, 68 insertions(+), 48 deletions(-) diff --git a/src/Components/Canvas/DimensionLayer.ts b/src/Components/Canvas/DimensionLayer.ts index 1a345a8..061a4e0 100644 --- a/src/Components/Canvas/DimensionLayer.ts +++ b/src/Components/Canvas/DimensionLayer.ts @@ -95,6 +95,16 @@ export function AddSymbolDimensions( scale: number, depth: number ): void { + if (symbol.isVertical) { + AddVerticalSymbolDimension( + ctx, + symbol, + scale, + depth + ); + return; + } + AddHorizontalSymbolDimension( ctx, symbol, @@ -575,7 +585,7 @@ function AddHorizontalSymbolDimension( scale: number, depth: number ): void { - const width = symbol.offset + (symbol.width / 2); + const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); if (width == null || width <= 0) { return; @@ -599,3 +609,34 @@ function AddHorizontalSymbolDimension( style: DEFAULT_DIMENSION_SYMBOL_STYLE }); } + +function AddVerticalSymbolDimension( + ctx: CanvasRenderingContext2D, + symbol: ISymbolModel, + scale: number, + depth: number +): void { + const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference); + + if (height == null || height <= 0) { + return; + } + + const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; + + const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; + const text = height + .toFixed(0) + .toString(); + + RenderDimension(ctx, { + id, + xStart: -offset, + yStart: height, + xEnd: -offset, + yEnd: 0, + text, + scale, + style: DEFAULT_DIMENSION_SYMBOL_STYLE + }); +} diff --git a/src/Components/Canvas/Renderer.ts b/src/Components/Canvas/Renderer.ts index 4faeb24..73abdac 100644 --- a/src/Components/Canvas/Renderer.ts +++ b/src/Components/Canvas/Renderer.ts @@ -71,7 +71,6 @@ export function RenderSymbols( symbols: Map, scale: number ): void { - let count = 0; symbols.forEach((symbol: ISymbolModel) => { RenderSymbol(ctx, symbol); @@ -79,8 +78,8 @@ export function RenderSymbols( return; } - AddSymbolDimensions(ctx, symbol, scale, count); - count++; + // TODO: Implement DimensionManager + AddSymbolDimensions(ctx, symbol, scale, 0); }); } diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index f2d87cd..0e568b9 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -38,29 +38,20 @@ function ActionByPosition( horizontalAction: (dim: number, ...params: any[]) => void, verticalAction: (dim: number, isRight: boolean, ...params: any[]) => void, params: any[] -): [boolean, boolean] { - let [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols] = [false, false]; +): void { positions.forEach((position: Position) => { const dim = dimMapped[position]; switch (position) { + case Position.Right: case Position.Left: - incrementVerticalDepthSymbols = true; verticalAction(dim, false, ...params); break; - case Position.Right: { - verticalAction(dim, true, ...params); - break; - } - case Position.Down: - horizontalAction(dim, ...params); - break; case Position.Up: - incrementHorizontalDepthSymbols = true; + case Position.Down: horizontalAction(dim, ...params); break; } }); - return [incrementHorizontalDepthSymbols, incrementVerticalDepthSymbols]; } /** @@ -79,7 +70,6 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): if (!SHOW_SELF_DIMENSIONS) { return []; } - let [startDepthHorizontalSymbols, startDepthVerticalSymbols] = [0, 0]; for (const { container, depth, currentTransform } of it) { const offset = (DIMENSION_MARGIN * (depth + 1)) / scale; @@ -89,7 +79,7 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): const containerRightDim = rightDim + offset; const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim]; if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.selfDimensions.positions.length > 0) { - const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( + ActionByPosition( dimMapped, container.properties.dimensionOptions.selfDimensions.positions, AddHorizontalSelfDimension, @@ -98,16 +88,14 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): container, currentTransform, dimensions, - scale, - container.properties.dimensionOptions.selfDimensions.color] + scale + ] ); - if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } - if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } if (SHOW_SELF_MARGINS_DIMENSIONS && container.properties.dimensionOptions.selfMarginsDimensions.positions.length > 0) { - const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( + ActionByPosition( dimMapped, container.properties.dimensionOptions.selfMarginsDimensions.positions, AddHorizontalSelfMarginsDimension, @@ -116,15 +104,13 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): container, currentTransform, dimensions, - scale, - container.properties.dimensionOptions.selfMarginsDimensions.color] + scale + ] ); - if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } - if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.dimensionWithMarks.positions.length > 0) { - const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( + ActionByPosition( dimMapped, container.properties.dimensionOptions.dimensionWithMarks.positions, @@ -136,17 +122,15 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): depth, currentTransform, dimensions, - scale, - container.properties.dimensionOptions.dimensionWithMarks.color] + scale + ] ); - if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } - if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.childrenDimensions.positions.length > 0 && container.children.length >= 2) { - const [incrementHorizontalDepthSymbol, incrementVerticalDepthSymbol] = ActionByPosition( + ActionByPosition( dimMapped, container.properties.dimensionOptions.childrenDimensions.positions, AddHorizontalChildrenDimension, @@ -156,26 +140,22 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): container, currentTransform, dimensions, - scale, - container.properties.dimensionOptions.childrenDimensions.color] + scale + ] ); - - if (incrementHorizontalDepthSymbol) { startDepthHorizontalSymbols++; } - if (incrementVerticalDepthSymbol) { startDepthVerticalSymbols++; } } } - for (const symbol of symbols) { - if (symbol[1].showDimension) { - if (symbol[1].isVertical) { - startDepthVerticalSymbols++; - AddVerticalSymbolDimension(symbol[1], dimensions, scale, startDepthVerticalSymbols); + // TODO: Implement DimensionManager + symbols.forEach((symbol) => { + if (symbol.showDimension) { + if (symbol.isVertical) { + AddVerticalSymbolDimension(symbol, dimensions, scale, 0); } else { - startDepthHorizontalSymbols++; - AddHorizontalSymbolDimension(symbol[1], dimensions, scale, startDepthHorizontalSymbols); + AddHorizontalSymbolDimension(symbol, dimensions, scale, 0); } } - } + }); return dimensions; } @@ -185,7 +165,7 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, scale: number, depth: number ): void { - const width = TransformX(symbol.offset, symbol.width * 2, symbol.config.PositionReference); + const width = TransformX(symbol.offset, symbol.width, symbol.config.PositionReference); if (width != null && width > 0) { const id = `dim-y-margin-left${symbol.width.toFixed(0)}-${symbol.id}`; @@ -213,7 +193,7 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, scale: number, depth: number ): void { - const height = TransformY(symbol.offset, symbol.height * 2, symbol.config.PositionReference); + const height = TransformY(symbol.offset, symbol.height, symbol.config.PositionReference); if (height != null && height > 0) { const id = `dim-x-margin-left${symbol.height.toFixed(0)}-${symbol.id}`;