From 174767f22c43c0f9323a03fb9407078b1e8bfb15 Mon Sep 17 00:00:00 2001 From: Carl Fuchs Date: Mon, 20 Feb 2023 17:17:32 +0100 Subject: [PATCH] [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 (