Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Update] Poc symbol Y working

Browse source
This commit is contained in:
Carl Fuchs 2023-02-10 17:08:18 +01:00
parent b09718d72d
commit 8b33acb139
4 changed files with 109 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Components/Editor/Behaviors/SymbolBehaviors.ts
View file

@ -1,9 +1,20 @@
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<string, IContainerModel>, 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);
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);
@ -13,4 +24,5 @@ export function ApplySymbol(containers: Map<string, IContainerModel>, container:
}
container.properties.x = x;
return container;
}
}

73
src/Components/SVG/Elements/DimensionLayer.tsx
View file

@ -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<string, IContainerModel>
@ -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(
<Dimension
key={id}
id={id}
xStart={-offset}
yStart={height}
xEnd={-offset}
yEnd={0}
text={text}
scale={scale}
color={color}/>
);
}
}
/**
* A layer containing all dimension
* @param props

10
src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx
View file

@ -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;

26
src/Components/SVG/Elements/Symbol.tsx
View file

@ -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 (
<g
x={props.model.offset}
y={-DIMENSION_MARGIN / props.scale}
x={x}
y={y}
>
<Interweave
noWrap={true}
@ -27,7 +36,13 @@ export function Symbol(props: ISymbolProps): JSX.Element {
</g>
);
}
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 (
<image
href={href}
@ -36,9 +51,10 @@ export function Symbol(props: ISymbolProps): JSX.Element {
fill: 'none',
transform: 'translateY(-100%) translateX(-50%)',
transformBox: 'fill-box'
}}
x={props.model.offset + props.model.width / 2}
y={-SYMBOL_MARGIN}
x={x}
y={y}
height={props.model.height / props.scale}
width={props.model.width / props.scale} />
);