From 8b33acb139b32e34f0a51b136c319fa2fe38ce16 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Fri, 10 Feb 2023 17:08:18 +0100 Subject: [PATCH] [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 ( );