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

Move dimension options in Dimensions class

Browse source
This commit is contained in:
Eric NGUYEN 2022-11-09 16:00:24 +01:00
parent 96c3fbdf4e
commit 3d6d979389
11 changed files with 112 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/Components/Canvas/DimensionLayer.ts
View file

@ -18,11 +18,11 @@ export function AddDimensions(
depth: number
): void {
ctx.beginPath();
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) {
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
ActionByPosition(
ctx,
dimMapped,
container.properties.showSelfDimensions,
container.properties.dimensionOptions.showSelfDimensions,
AddHorizontalSelfDimension,
AddVerticalSelfDimension,
[
@ -32,11 +32,11 @@ export function AddDimensions(
);
}
if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) {
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
ActionByPosition(
ctx,
dimMapped,
container.properties.showDimensionWithMarks,
container.properties.dimensionOptions.showDimensionWithMarks,
AddHorizontalBorrowerDimension,
AddVerticalBorrowerDimension,
[
@ -48,11 +48,11 @@ export function AddDimensions(
);
}
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length >= 2) {
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) {
ActionByPosition(
ctx,
dimMapped,
container.properties.showChildrenDimensions,
container.properties.dimensionOptions.showChildrenDimensions,
AddHorizontalChildrenDimension,
AddVerticalChildrenDimension,
[
@ -238,7 +238,7 @@ function AddHorizontalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Horizontal);
if (isHidden) {
continue;
}
@ -297,7 +297,7 @@ function AddVerticalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Vertical);
if (isHidden) {
continue;
}

16
src/Components/ContainerProperties/ContainerForm.tsx
View file

@ -339,8 +339,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
id='showSelfDimensions'
name='ShowSelfDimensions'
labelText={Text({ textId: '@ContainerShowDimension' })}
value={props.properties.showSelfDimensions}
onChange={props.onChange}
value={props.properties.dimensionOptions.showSelfDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
}
@ -351,8 +351,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
id='showChildrenDimensions'
name='ShowChildrenDimensions'
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
value={props.properties.showChildrenDimensions}
onChange={props.onChange}
value={props.properties.dimensionOptions.showChildrenDimensions}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
}
@ -363,9 +363,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
<OrientationCheckboxes
id='markPosition'
name='MarkPosition'
value={props.properties.markPosition}
value={props.properties.dimensionOptions.markPosition}
labelText={Text({ textId: '@ContainerMarkPosition' })}
onChange={props.onChange}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
<div className='grid grid-cols-1 gap-2'>
@ -373,8 +373,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
id='showDimensionWithMarks'
name='ShowDimensionWithMarks'
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
value={props.properties.showDimensionWithMarks}
onChange={props.onChange}
value={props.properties.dimensionOptions.showDimensionWithMarks}
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/>
</div>
</>

10
src/Components/ContainerProperties/ContainerProperties.test.tsx
View file

@ -42,10 +42,12 @@ describe.concurrent('Properties', () => {
isAnchor: false,
warning: '',
hideChildrenInTreeview: false,
showChildrenDimensions: [],
showSelfDimensions: [],
showDimensionWithMarks: [],
markPosition: []
dimensionOptions: {
showChildrenDimensions: [],
showSelfDimensions: [],
showDimensionWithMarks: [],
markPosition: []
}
};
const handleChange = vi.fn((key, value) => {

3
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -318,6 +318,9 @@ function AssignProperty(container: IContainerModel, key: string, value: string |
case PropertyType.Margin:
SetMargin();
break;
case PropertyType.DimensionOptions:
(container.properties.dimensionOptions as any)[key] = value;
break;
default:
(container.properties as any)[key] = value;
}

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

@ -72,10 +72,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) {
if (SHOW_SELF_DIMENSIONS && container.properties.dimensionOptions.showSelfDimensions.length > 0) {
ActionByPosition(
dimMapped,
container.properties.showSelfDimensions,
container.properties.dimensionOptions.showSelfDimensions,
AddHorizontalSelfDimension,
AddVerticalSelfDimension,
[
@ -86,10 +86,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
);
}
if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) {
if (SHOW_BORROWER_DIMENSIONS && container.properties.dimensionOptions.showDimensionWithMarks.length > 0) {
ActionByPosition(
dimMapped,
container.properties.showDimensionWithMarks,
container.properties.dimensionOptions.showDimensionWithMarks,
AddHorizontalBorrowerDimension,
AddVerticalBorrowerDimension,
[
@ -102,10 +102,10 @@ function Dimensions({ containers, root, scale }: IDimensionLayerProps): React.Re
);
}
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length >= 2) {
if (SHOW_CHILDREN_DIMENSIONS && container.properties.dimensionOptions.showChildrenDimensions.length > 0 && container.children.length >= 2) {
ActionByPosition(
dimMapped,
container.properties.showChildrenDimensions,
container.properties.dimensionOptions.showChildrenDimensions,
AddHorizontalChildrenDimension,
AddVerticalChildrenDimension,
[
@ -279,7 +279,7 @@ function AddHorizontalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Horizontal);
if (isHidden) {
continue;
}
@ -338,7 +338,7 @@ function AddVerticalBorrowerDimension(
for (const {
container: childContainer, currentTransform: childCurrentTransform
} of it) {
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical);
const isHidden = !childContainer.properties.dimensionOptions.markPosition.includes(Orientation.Vertical);
if (isHidden) {
continue;
}