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

Fix eslint errors

Browse source
This commit is contained in:
Eric NGUYEN 2023-02-23 13:54:38 +01:00
parent 5b3ab651e6
commit 4e41fda93a
87 changed files with 1003 additions and 702 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/Components/Editor/Actions/AddContainer.ts
View file

@ -3,12 +3,12 @@
*/
import { AddMethod } from '../../../Enums/AddMethod';
import { IAvailableContainer } from '../../../Interfaces/IAvailableContainer';
import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { IPattern, GetPattern, ContainerOrPattern } from '../../../Interfaces/IPattern';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { type IAvailableContainer } from '../../../Interfaces/IAvailableContainer';
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
import { type IPattern, GetPattern, type ContainerOrPattern } from '../../../Interfaces/IPattern';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { Orientation } from '../../../Enums/Orientation';
import { GetDefaultContainerProps } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools';
@ -69,9 +69,7 @@ export function AddContainers(
const containers = structuredClone(current.containers);
// Find the parent in the clone
const parentClone: IContainerModel | undefined = FindContainerById(
containers, parentId
);
const parentClone: IContainerModel | undefined = FindContainerById(containers, parentId);
if (parentClone === null || parentClone === undefined) {
throw new Error('[AddContainer] Container model was not found among children of the main container!');
@ -144,8 +142,14 @@ function AddNewContainerToParent(
const right: number = containerConfig.Margin?.right ?? 0;
// Default coordinates
let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
let height = containerConfig.Height ?? containerConfig.MaxHeight ?? containerConfig.MinHeight ?? parentClone.properties.height;
let width = containerConfig.Width ??
containerConfig.MaxWidth ??
containerConfig.MinWidth ??
parentClone.properties.width;
let height = containerConfig.Height ??
containerConfig.MaxHeight ??
containerConfig.MinHeight ??
parentClone.properties.height;
let x = RestoreX(containerConfig.X ?? 0, width, containerConfig.PositionReference);
let y = RestoreY(containerConfig.Y ?? 0, height, containerConfig.PositionReference);
@ -288,7 +292,8 @@ function InitializeDefaultChild(
configuration,
containers,
parent,
0, 0,
0,
0,
newCounters,
symbols
);
@ -308,12 +313,17 @@ function InitializeChildrenWithPattern(
return;
}
const configs: Map<string, IAvailableContainer> = new Map(configuration.AvailableContainers.map(config => [config.Type, config]));
const patterns: Map<string, IPattern> = new Map(configuration.Patterns.map(pattern => [pattern.id, pattern]));
const configs = new Map<string, IAvailableContainer>(
configuration.AvailableContainers.map(config => [config.Type, config])
);
const patterns = new Map<string, IPattern>(
configuration.Patterns.map(pattern => [pattern.id, pattern])
);
const containerOrPattern = GetPattern(patternId, configs, patterns);
if (containerOrPattern === undefined) {
console.warn(`[InitializeChildrenWithPattern] PatternId ${patternId} was neither found as Pattern nor as IAvailableContainer`);
console.warn('[InitializeChildrenWithPattern]' +
`PatternId ${patternId} was neither found as Pattern nor as IAvailableContainer`);
return;
}
@ -356,7 +366,16 @@ function BuildPatterns(
while (levelSize-- !== 0) {
const node = queue.shift() as Node;
const newParent = AddContainerInLevel(node, maxLevelSize, levelSize, configuration, containers, newCounters, symbols, configs);
const newParent = AddContainerInLevel(
node,
maxLevelSize,
levelSize,
configuration,
containers,
newCounters,
symbols,
configs
);
if (newParent === undefined) {
// node.pattern is not a IPattern, there is no children to iterate
@ -411,7 +430,8 @@ function AddContainerInLevel(
configuration,
containers,
node.parent,
index, 0,
index,
0,
newCounters,
symbols
);
@ -429,8 +449,9 @@ function AddContainerInLevel(
// and set the new parent as the child of this parent
const container = configs.get(pattern.wrapper);
if (container === undefined) {
console.warn(`[InitializeChildrenFromPattern] IAvailableContainer from pattern was not found in the configuration: ${pattern.wrapper}.
Process will ignore the container.`);
console.warn('[InitializeChildrenFromPattern]' +
` IAvailableContainer from pattern was not found in the configuration: ${pattern.wrapper}.
Process will ignore the container.`);
return { parent, pattern };
}
@ -439,7 +460,8 @@ function AddContainerInLevel(
configuration,
containers,
parent,
0, 0,
0,
0,
newCounters,
symbols,
false

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

@ -1,15 +1,15 @@
import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import Swal from 'sweetalert2';
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { FindContainerById, MakeDFSIterator } from '../../../utils/itertools';
import { GetCurrentHistory } from '../Editor';
import { ApplyBehaviors, ApplyBehaviorsOnSiblings, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import Swal from 'sweetalert2';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { PropertyType } from '../../../Enums/PropertyType';
import { TransformX, TransformY } from '../../../utils/svg';
import { Orientation } from '../../../Enums/Orientation';
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
import { AddContainers } from './AddContainer';
import { IConfiguration } from '../../../Interfaces/IConfiguration';
/**
* Select a container
@ -82,7 +82,8 @@ export function DeleteContainer(
const container = FindContainerById(containers, containerId);
if (container === undefined) {
throw new Error(`[DeleteContainer] Tried to delete a container that is not present in the main container: ${containerId}`);
throw new Error('[DeleteContainer]' +
`Tried to delete a container that is not present in the main container: ${containerId}`);
}
const parent = FindContainerById(containers, container.properties.parentId);
@ -94,7 +95,8 @@ export function DeleteContainer(
text: 'Deleting the main container is not allowed!',
icon: 'error'
});
throw new Error('[DeleteContainer] Tried to delete the main container! Deleting the main container is not allowed!');
throw new Error('[DeleteContainer]' +
'Tried to delete the main container! Deleting the main container is not allowed!');
}
if (container === null || container === undefined) {
@ -168,7 +170,9 @@ export function ReplaceByContainer(
containerParent.children.indexOf(containerId),
[{ Type: newContainerId }],
containerParent.properties.id,
configuration, fullHistory, historyCurrentStep
configuration,
fullHistory,
historyCurrentStep
);
const historyDelete = DeleteContainer(containerId, historyAdd.history, historyCurrentStep + 1);
@ -294,34 +298,7 @@ export function SortChildren(
const children = parent.children;
if (!isHorizontal) {
parent.children.sort(
(aId, bId) => {
const a = FindContainerById(containers, aId);
const b = FindContainerById(containers, bId);
if (a === undefined || b === undefined) {
return 0;
}
const yA = TransformY(a.properties.y, a.properties.height, a.properties.positionReference);
const yB = TransformY(b.properties.y, b.properties.height, b.properties.positionReference);
if (yA < yB) {
return -1;
}
if (yB < yA) {
return 1;
}
// xA = xB
const indexA = children.indexOf(aId);
const indexB = children.indexOf(bId);
return indexA - indexB;
}
);
return;
}
parent.children.sort(
(aId, bId) => {
parent.children.sort((aId, bId) => {
const a = FindContainerById(containers, aId);
const b = FindContainerById(containers, bId);
@ -329,20 +306,43 @@ export function SortChildren(
return 0;
}
const xA = TransformX(a.properties.x, a.properties.width, a.properties.positionReference);
const xB = TransformX(b.properties.x, b.properties.width, b.properties.positionReference);
if (xA < xB) {
const yA = TransformY(a.properties.y, a.properties.height, a.properties.positionReference);
const yB = TransformY(b.properties.y, b.properties.height, b.properties.positionReference);
if (yA < yB) {
return -1;
}
if (xB < xA) {
if (yB < yA) {
return 1;
}
// xA = xB
const indexA = children.indexOf(aId);
const indexB = children.indexOf(bId);
return indexA - indexB;
});
return;
}
parent.children.sort((aId, bId) => {
const a = FindContainerById(containers, aId);
const b = FindContainerById(containers, bId);
if (a === undefined || b === undefined) {
return 0;
}
);
const xA = TransformX(a.properties.x, a.properties.width, a.properties.positionReference);
const xB = TransformX(b.properties.x, b.properties.width, b.properties.positionReference);
if (xA < xB) {
return -1;
}
if (xB < xA) {
return 1;
}
// xA = xB
const indexA = children.indexOf(aId);
const indexB = children.indexOf(bId);
return indexA - indexB;
});
}
/**
@ -357,7 +357,8 @@ export function SortChildren(
function SetContainer(
containers: Map<string, IContainerModel>,
container: IContainerModel,
key: string, value: string | number | boolean | number[],
key: string,
value: string | number | boolean | number[],
type: PropertyType,
symbols: Map<string, ISymbolModel>
): void {
@ -396,7 +397,12 @@ function SetContainer(
* @param value Value of the property
* @param type Type of the property
*/
function AssignProperty(container: IContainerModel, key: string, value: string | number | boolean | number[], type: PropertyType): void {
function AssignProperty(
container: IContainerModel,
key: string,
value: string | number | boolean | number[],
type: PropertyType
): void {
switch (type) {
case PropertyType.Style:
(container.properties.style as any)[key] = value;

68
src/Components/Editor/Actions/ContextMenuActions.ts
View file

@ -1,22 +1,22 @@
import Swal from 'sweetalert2';
import { Dispatch, SetStateAction } from 'react';
import { type Dispatch, type SetStateAction } from 'react';
import { AddMethod } from '../../../Enums/AddMethod';
import { IAction } from '../../../Interfaces/IAction';
import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
import { ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse';
import { type IAction } from '../../../Interfaces/IAction';
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
import { type ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
import { type ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse';
import { DISABLE_API } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools';
import { SetContainerList } from '../../API/api';
import { IMenuAction } from '../../Menu/Menu';
import { type IMenuAction } from '../../Menu/Menu';
import { GetCurrentHistoryState } from '../Editor';
import { Text } from '../../Text/Text';
import { type IReplaceContainer } from '../../../Interfaces/IReplaceContainer';
import { AddContainers } from './AddContainer';
import { DeleteContainer } from './ContainerOperations';
import { DeleteSymbol } from './SymbolOperations';
import { Text } from '../../Text/Text';
import { IReplaceContainer } from '../../../Interfaces/IReplaceContainer';
export function InitActions(
menuActions: Map<string, IMenuAction[]>,
@ -63,7 +63,9 @@ export function InitActions(
shortcut: '<kbd>R</kbd>',
action: (target: HTMLElement) => {
const targetContainer = FindContainerById(history[historyCurrentStep].containers, target.id);
const targetAvailableContainer = configuration.AvailableContainers.find((availableContainer) => availableContainer.Type === targetContainer?.properties.type);
const targetAvailableContainer = configuration.AvailableContainers.find(
(availableContainer) => availableContainer.Type === targetContainer?.properties.type
);
if (targetAvailableContainer === undefined) {
return;
@ -188,7 +190,10 @@ function GetAction(
};
}
function GetPreviousAndNextSiblings(containers: Map<string, IContainerModel>, container: IContainerModel): { prev: IContainerModel | undefined, next: IContainerModel | undefined } {
function GetPreviousAndNextSiblings(
containers: Map<string, IContainerModel>,
container: IContainerModel
): { prev: IContainerModel | undefined, next: IContainerModel | undefined } {
let prev;
let next;
const parent = FindContainerById(containers, container.properties.parentId);
@ -230,22 +235,21 @@ function HandleSetContainerList(
selectedContainer.properties.id,
configuration,
history,
historyCurrentStep);
historyCurrentStep
);
setNewHistory(newHistory);
break;
}
case AddMethod.Replace:
setNewHistory(
HandleReplace(
containers,
selectedContainer,
response,
configuration,
history,
historyCurrentStep
)
);
setNewHistory(HandleReplace(
containers,
selectedContainer,
response,
configuration,
history,
historyCurrentStep
));
break;
case AddMethod.ReplaceParent: {
const parent = FindContainerById(containers, selectedContainer.properties.parentId);
@ -257,16 +261,14 @@ function HandleSetContainerList(
});
return;
}
setNewHistory(
HandleReplace(
containers,
parent,
response,
configuration,
history,
historyCurrentStep
)
);
setNewHistory(HandleReplace(
containers,
parent,
response,
configuration,
history,
historyCurrentStep
));
break;
}
}

10
src/Components/Editor/Actions/Save.ts
View file

@ -1,8 +1,8 @@
import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
import { GetCircularReplacer } from '../../../utils/saveload';
import { ID } from '../../SVG/SVG';
import { IEditorState } from '../../../Interfaces/IEditorState';
import { type IEditorState } from '../../../Interfaces/IEditorState';
import { SHOW_SELECTOR_TEXT } from '../../../utils/default';
export function SaveEditorAsJSON(
@ -11,7 +11,9 @@ export function SaveEditorAsJSON(
configuration: IConfiguration
): void {
const exportName = 'state.json';
const spaces = import.meta.env.DEV ? 4 : 0;
const spaces = import.meta.env.DEV
? 4
: 0;
const editorState: IEditorState = {
history,
historyCurrentStep,

4
src/Components/Editor/Actions/Shortcuts.ts
View file

@ -1,5 +1,5 @@
import { Dispatch, SetStateAction } from 'react';
import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { type Dispatch, type SetStateAction } from 'react';
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
import { ENABLE_SHORTCUTS } from '../../../utils/default';
export function OnKey(

6
src/Components/Editor/Actions/SymbolOperations.ts
View file

@ -4,7 +4,7 @@ import { type IHistoryState } from '../../../Interfaces/IHistoryState';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { GetDefaultSymbolModel } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools';
import {RestoreX, RestoreY} 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';
@ -212,5 +212,7 @@ function LinkContainer(
): void {
const oldSymbol = symbols.get(container.properties.linkedSymbolId);
LinkSymbol(container.properties.id, oldSymbol, symbol);
container.properties.linkedSymbolId = symbol !== undefined ? symbol.id : '';
container.properties.linkedSymbolId = symbol !== undefined
? symbol.id
: '';
}

31
src/Components/Editor/Behaviors/AnchorBehaviors.ts
View file

@ -13,31 +13,34 @@
* or make them lose their property as a rigid body
*/
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation';
import { ConstraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors';
import { FindContainerById } from '../../../utils/itertools';
import { ConstraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors';
/**
* Impose the container position to its siblings
* Apply the following modification to the overlapping rigid body container :
* @param container Container to impose its position
*/
export function ApplyAnchor(containers: Map<string, IContainerModel>, container: IContainerModel, parent: IContainerModel): IContainerModel {
export function ApplyAnchor(
containers: Map<string, IContainerModel>,
container: IContainerModel,
parent: IContainerModel
): IContainerModel {
const rigidBodies: IContainerModel[] = [];
parent.children.forEach(
childId => {
const child = FindContainerById(containers, childId);
parent.children.forEach(childId => {
const child = FindContainerById(containers, childId);
if (child === undefined) {
return;
}
if (child === undefined) {
return;
}
if (child.properties.isAnchor) {
return;
}
rigidBodies.push(child);
});
if (child.properties.isAnchor) {
return;
}
rigidBodies.push(child);
});
const isHorizontal = parent.properties.orientation === Orientation.Horizontal;
const overlappingContainers = isHorizontal

28
src/Components/Editor/Behaviors/Behaviors.ts
View file

@ -1,5 +1,5 @@
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { APPLY_BEHAVIORS_ON_CHILDREN, ENABLE_RIGID, ENABLE_SWAP } from '../../../utils/default';
import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools';
import { ApplyAnchor, GetOverlappingContainers } from './AnchorBehaviors';
@ -14,7 +14,11 @@ import { ApplySymbol } from './SymbolBehaviors';
* @param container Container to recalculate its positions
* @returns Updated container
*/
export function ApplyBehaviors(containers: Map<string, IContainerModel>, container: IContainerModel, symbols: Map<string, ISymbolModel>): IContainerModel {
export function ApplyBehaviors(
containers: Map<string, IContainerModel>,
container: IContainerModel,
symbols: Map<string, ISymbolModel>
): IContainerModel {
try {
const symbol = symbols.get(container.properties.linkedSymbolId);
if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
@ -67,7 +71,8 @@ export function ApplyBehaviors(containers: Map<string, IContainerModel>, contain
export function ApplyBehaviorsOnSiblingsChildren(
containers: Map<string, IContainerModel>,
newContainer: IContainerModel,
symbols: Map<string, ISymbolModel>): void {
symbols: Map<string, ISymbolModel>
): void {
const parent = FindContainerById(containers, newContainer.properties.parentId);
if (parent === null || parent === undefined) {
return;
@ -102,7 +107,11 @@ export function ApplyBehaviorsOnSiblingsChildren(
* @param symbols
* @returns
*/
export function ApplyBehaviorsOnSiblings(containers: Map<string, IContainerModel>, newContainer: IContainerModel, symbols: Map<string, ISymbolModel>): void {
export function ApplyBehaviorsOnSiblings(
containers: Map<string, IContainerModel>,
newContainer: IContainerModel,
symbols: Map<string, ISymbolModel>
): void {
const parent = FindContainerById(containers, newContainer.properties.parentId);
if (parent === null || parent === undefined) {
return;
@ -132,7 +141,11 @@ export function ApplyBehaviorsOnSiblings(containers: Map<string, IContainerModel
}
});
}
function UpdateWarning(containers: Map<string, IContainerModel>, container: IContainerModel, parent: IContainerModel): void {
function UpdateWarning(
containers: Map<string, IContainerModel>,
container: IContainerModel,
parent: IContainerModel
): void {
const targetContainers: IContainerModel[] = [];
parent.children.forEach((child) => {
@ -146,7 +159,8 @@ function UpdateWarning(containers: Map<string, IContainerModel>, container: ICon
});
const overlappingContainers = GetOverlappingContainers(container, targetContainers);
if (overlappingContainers.length > 0) {
container.properties.warning = `There are overlapping containers: ${overlappingContainers.map(c => c.properties.id).join(' ')}`;
container.properties.warning = 'There are overlapping containers: ' +
`${overlappingContainers.map(c => c.properties.id).join(' ')}`;
} else {
container.properties.warning = '';
}

49
src/Components/Editor/Behaviors/FlexBehaviors.ts
View file

@ -1,4 +1,4 @@
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation';
import { Simplex } from '../../../utils/simplex';
import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg';
@ -14,12 +14,20 @@ interface IFlexibleGroup {
* Flex the container and its siblings (mutate)
* @returns Flexed container
*/
export function Flex(containers: Map<string, IContainerModel>, container: IContainerModel, parent: IContainerModel): void {
export function Flex(
containers: Map<string, IContainerModel>,
container: IContainerModel,
parent: IContainerModel
): void {
const isVertical = parent.properties.orientation === Orientation.Vertical;
if (isVertical) {
const wantedWidth = Math.min(container.properties.maxWidth, parent.properties.width);
container.properties.width = ApplyWidthMargin(wantedWidth, container.properties.margin.left, container.properties.margin.right);
container.properties.width = ApplyWidthMargin(
wantedWidth,
container.properties.margin.left,
container.properties.margin.right
);
const flexibleGroups = GetVerticalFlexibleGroups(containers, parent);
for (const flexibleGroup of flexibleGroups) {
FlexGroupVertically(flexibleGroup);
@ -28,7 +36,11 @@ export function Flex(containers: Map<string, IContainerModel>, container: IConta
}
const wantedHeight = Math.min(container.properties.maxHeight, parent.properties.height);
container.properties.height = ApplyWidthMargin(wantedHeight, container.properties.margin.top, container.properties.margin.bottom);
container.properties.height = ApplyWidthMargin(
wantedHeight,
container.properties.margin.top,
container.properties.margin.bottom
);
const flexibleGroups = GetHorizontalFlexibleGroups(containers, parent);
for (const flexibleGroup of flexibleGroups) {
FlexGroupHorizontally(flexibleGroup);
@ -40,7 +52,10 @@ export function Flex(containers: Map<string, IContainerModel>, container: IConta
* @param parent Parent in which the flexible children will be set in groups
* @returns a list of groups of flexible containers
*/
export function GetHorizontalFlexibleGroups(containers: Map<string, IContainerModel>, parent: IContainerModel): IFlexibleGroup[] {
export function GetHorizontalFlexibleGroups(
containers: Map<string, IContainerModel>,
parent: IContainerModel
): IFlexibleGroup[] {
const flexibleGroups: IFlexibleGroup[] = [];
let group: IContainerModel[] = [];
let offset = 0;
@ -158,7 +173,11 @@ function FlexGroupHorizontally(flexibleGroup: IFlexibleGroup): void {
continue;
}
sibling.properties.x = ApplyXMargin(right, sibling.properties.margin.left);
sibling.properties.width = ApplyWidthMargin(wantedWidth, sibling.properties.margin.left, sibling.properties.margin.right);
sibling.properties.width = ApplyWidthMargin(
wantedWidth,
sibling.properties.margin.left,
sibling.properties.margin.right
);
right += wantedWidth;
}
@ -174,7 +193,11 @@ function FlexGroupHorizontally(flexibleGroup: IFlexibleGroup): void {
// apply the solutions
for (let i = 0; i < flexibleContainers.length; i++) {
flexibleContainers[i].properties.width = ApplyWidthMargin(solutions[i], flexibleContainers[i].properties.margin.left, flexibleContainers[i].properties.margin.right);
flexibleContainers[i].properties.width = ApplyWidthMargin(
solutions[i],
flexibleContainers[i].properties.margin.left,
flexibleContainers[i].properties.margin.right
);
}
// move the containers
@ -229,7 +252,11 @@ function FlexGroupVertically(flexibleGroup: IFlexibleGroup): void {
continue;
}
sibling.properties.y = ApplyXMargin(right, sibling.properties.margin.top);
sibling.properties.height = ApplyWidthMargin(wantedHeight, sibling.properties.margin.top, sibling.properties.margin.bottom);
sibling.properties.height = ApplyWidthMargin(
wantedHeight,
sibling.properties.margin.top,
sibling.properties.margin.bottom
);
right += wantedHeight;
}
@ -245,7 +272,11 @@ function FlexGroupVertically(flexibleGroup: IFlexibleGroup): void {
// apply the solutions
for (let i = 0; i < flexibleContainers.length; i++) {
flexibleContainers[i].properties.height = ApplyWidthMargin(solutions[i], flexibleContainers[i].properties.margin.top, flexibleContainers[i].properties.margin.bottom);
flexibleContainers[i].properties.height = ApplyWidthMargin(
solutions[i],
flexibleContainers[i].properties.margin.top,
flexibleContainers[i].properties.margin.bottom
);
}
// move the containers

2
src/Components/Editor/Behaviors/PushBehaviors.ts
View file

@ -1,4 +1,4 @@
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation';
import { MakeChildrenIterator, ReversePairwise } from '../../../utils/itertools';
import { Flex } from './FlexBehaviors';

63
src/Components/Editor/Behaviors/RigidBodyBehaviors.ts
View file

@ -6,8 +6,8 @@
* If the contraints fails, an error message will be returned
*/
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { ISizePointer } from '../../../Interfaces/ISizePointer';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISizePointer } from '../../../Interfaces/ISizePointer';
import { Orientation } from '../../../Enums/Orientation';
import { ENABLE_HARD_RIGID } from '../../../utils/default';
import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools';
@ -141,9 +141,7 @@ export function ConstraintBodyInsideUnallocatedWidth(
// Check if there is still some space
if (availableWidths.length === 0) {
throw new Error(
'No available space found on the parent container. Try to free the parent a bit.'
);
throw new Error('No available space found on the parent container. Try to free the parent a bit.');
}
const containerId = container.properties.id;
@ -158,8 +156,7 @@ export function ConstraintBodyInsideUnallocatedWidth(
// Check if the container actually fit inside
// It will usually fit if it was alrady fitting
const availableWidthFound = availableWidths.find((width) =>
IsFitting(containerHeight, width)
);
IsFitting(containerHeight, width));
if (availableWidthFound === undefined) {
const { x, width } = TrySqueeze(containerY, containerHeight, containerMinHeight, containerId, availableWidths);
@ -189,8 +186,7 @@ export function ConstraintBodyInsideUnallocatedWidth(
// Check if the container actually fit inside
// It will usually fit if it was alrady fitting
const availableWidthFound = availableWidths.find((width) =>
IsFitting(containerWidth, width)
);
IsFitting(containerWidth, width));
if (availableWidthFound === undefined) {
const { x, width } = TrySqueeze(containerX, containerWidth, containerMinWidth, containerId, availableWidths);
@ -242,24 +238,26 @@ function TrySqueeze(
};
}
function SortAvailableWidthsByClosest(containerX: number, containerWidth: number, availableWidths: ISizePointer[]): void {
function SortAvailableWidthsByClosest(
containerX: number,
containerWidth: number,
availableWidths: ISizePointer[]
): void {
const middle = containerX + containerWidth / 2;
// Sort the available width to find the space with the closest position
availableWidths.sort(
(width1, width2) => {
let compared1X = width1.x;
if (width1.x < containerX) {
compared1X = width1.x + width1.width - containerWidth;
}
let compared2X = width2.x;
if (width2.x < containerX) {
compared2X = width2.x + width2.width - containerWidth;
}
return Math.abs(compared1X - middle) - Math.abs(compared2X - middle);
availableWidths.sort((width1, width2) => {
let compared1X = width1.x;
if (width1.x < containerX) {
compared1X = width1.x + width1.width - containerWidth;
}
);
let compared2X = width2.x;
if (width2.x < containerX) {
compared2X = width2.x + width2.width - containerWidth;
}
return Math.abs(compared1X - middle) - Math.abs(compared2X - middle);
});
}
/**
@ -268,8 +266,10 @@ function SortAvailableWidthsByClosest(containerX: number, containerWidth: number
* @param sizePointer Size space to check
* @returns
*/
function IsFitting(containerWidth: number,
sizePointer: ISizePointer): boolean {
function IsFitting(
containerWidth: number,
sizePointer: ISizePointer
): boolean {
return containerWidth <= sizePointer.width;
}
@ -280,7 +280,8 @@ function IsFitting(containerWidth: number,
* (except the fact that disk space is divided by block).
* @param container Container where to find an available width
* @param exception Container to exclude of the widths (since a container will be moved, it might need to be excluded)
* @returns {ISizePointer[]} Array of unallocated widths (x=position of the unallocated space, width=size of the allocated space)
* @returns {ISizePointer[]} Array of unallocated widths
* (x=position of the unallocated space, width=size of the allocated space)
*/
function GetAvailableWidths(
x: number,
@ -303,8 +304,12 @@ function GetAvailableWidths(
if (child === exception) {
continue;
}
const childX = isHorizontal ? child.properties.x : child.properties.y;
const childWidth = isHorizontal ? child.properties.width : child.properties.height;
const childX = isHorizontal
? child.properties.x
: child.properties.y;
const childWidth = isHorizontal
? child.properties.width
: child.properties.height;
// get the space of the child that is inside the parent
let newUnallocatedSpace: ISizePointer[] = [];

17
src/Components/Editor/Behaviors/SwapBehaviors.ts
View file

@ -2,15 +2,16 @@
* Swap two flex container when one is overlapping another
*/
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation';
import { GetHorizontallyOverlappingContainers, GetVerticallyOverlappingContainers } from './AnchorBehaviors';
import { MakeChildrenIterator } from '../../../utils/itertools';
import { GetHorizontallyOverlappingContainers, GetVerticallyOverlappingContainers } from './AnchorBehaviors';
export function ApplySwap(
containers: Map<string, IContainerModel>,
container: IContainerModel,
parent: IContainerModel): void {
parent: IContainerModel
): void {
const children = [...MakeChildrenIterator(containers, parent.children)];
const isVertical = parent.properties.orientation === Orientation.Vertical;
@ -36,7 +37,10 @@ export function SwapHorizontally(container: IContainerModel, children: IContaine
}
// swap positions
[overlappingContainer.properties.x, container.properties.x] = [container.properties.x, overlappingContainer.properties.x];
[
overlappingContainer.properties.x,
container.properties.x
] = [container.properties.x, overlappingContainer.properties.x];
const indexContainer = children.indexOf(container);
const indexOverlapping = children.indexOf(overlappingContainer);
[children[indexContainer], children[indexOverlapping]] = [children[indexOverlapping], children[indexContainer]];
@ -56,7 +60,10 @@ export function SwapVertically(container: IContainerModel, children: IContainerM
}
// swap positions
[overlappingContainer.properties.y, container.properties.y] = [container.properties.y, overlappingContainer.properties.y];
[
overlappingContainer.properties.y,
container.properties.y
] = [container.properties.y, overlappingContainer.properties.y];
const indexContainer = children.indexOf(container);
const indexOverlapping = children.indexOf(overlappingContainer);
[children[indexContainer], children[indexOverlapping]] = [children[indexOverlapping], children[indexContainer]];

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

@ -3,16 +3,22 @@ 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<string, IContainerModel>,
export function ApplySymbol(
containers: Map<string, IContainerModel>,
container: IContainerModel,
symbol: ISymbolModel): IContainerModel {
symbol: ISymbolModel
): IContainerModel {
if (symbol.isVertical) {
container.properties.y = TransformY(symbol.offset,
container.properties.y = TransformY(
symbol.offset,
symbol.height,
symbol.config.PositionReference);
container.properties.y = RestoreY(container.properties.y,
symbol.config.PositionReference
);
container.properties.y = RestoreY(
container.properties.y,
container.properties.height,
container.properties.positionReference);
container.properties.positionReference
);
const parent = FindContainerById(containers, container.properties.parentId);
let y = 0;
if (parent !== undefined && parent !== null) {
@ -24,10 +30,13 @@ export function ApplySymbol(containers: Map<string, IContainerModel>,
container.properties.x = TransformX(
symbol.offset,
symbol.width,
symbol.config.PositionReference);
container.properties.x = RestoreX(container.properties.x,
symbol.config.PositionReference
);
container.properties.x = RestoreX(
container.properties.x,
container.properties.width,
container.properties.positionReference);
container.properties.positionReference
);
const parent = FindContainerById(containers, container.properties.parentId);
let x = 0;
if (parent !== undefined && parent !== null) {

133
src/Components/Editor/Editor.tsx
View file

@ -3,17 +3,22 @@ import './Editor.scss';
import { type IConfiguration } from '../../Interfaces/IConfiguration';
import { type IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI';
import { UseCustomEvents, UseEditorListener } from '../../Events/EditorEvents';
import { MAX_HISTORY } from '../../utils/default';
import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
import { SelectContainer, DeleteContainer, OnPropertyChange, ReplaceByContainer } from './Actions/ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
import { OnKey } from './Actions/Shortcuts';
import { UseCustomEvents, UseEditorListener } from '../../Events/EditorEvents';
import { MAX_HISTORY } from '../../utils/default';
import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations';
import { FindContainerById } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import {
AddSymbol,
OnPropertyChange as OnSymbolPropertyChange,
DeleteSymbol,
SelectSymbol
} from './Actions/SymbolOperations';
import { InitActions } from './Actions/ContextMenuActions';
import { AddContainerToSelectedContainer, AddContainer } from './Actions/AddContainer';
import { type IReplaceContainer } from '../../Interfaces/IReplaceContainer';
interface IEditorProps {
root: Element | Document
@ -61,16 +66,20 @@ function UseNewHistoryState(
): (newHistory: IHistoryState[], historyCurrentStep?: number) => void {
return (newHistory, historyCurrentStep?: number) => {
setHistory(newHistory);
setHistoryCurrentStep(historyCurrentStep !== undefined && historyCurrentStep !== null ? historyCurrentStep : newHistory.length - 1);
setHistoryCurrentStep(historyCurrentStep !== undefined && historyCurrentStep !== null
? historyCurrentStep
: newHistory.length - 1);
};
}
export function Editor(props: IEditorProps): JSX.Element {
// States
const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
const [replaceContainer, setReplaceContainer] = React.useState<IReplaceContainer>({ isReplacing: false, id: undefined, category: undefined });
const [
replaceContainer,
setReplaceContainer
] = React.useState<IReplaceContainer>({ isReplacing: false, id: undefined, category: undefined });
const editorRef = useRef<HTMLDivElement>(null);
const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
@ -86,9 +95,7 @@ export function Editor(props: IEditorProps): JSX.Element {
setHistoryCurrentStep,
() => {
const current = GetCurrentHistoryState(history, historyCurrentStep);
setNewHistory(
DeleteContainer(current.selectedContainerId, history, historyCurrentStep)
);
setNewHistory(DeleteContainer(current.selectedContainerId, history, historyCurrentStep));
},
ResetState
);
@ -134,29 +141,28 @@ export function Editor(props: IEditorProps): JSX.Element {
}}
replaceContainer={replaceContainer}
selectContainer={(container) => {
setNewHistory(
SelectContainer(
container,
history,
historyCurrentStep
));
setNewHistory(SelectContainer(
container,
history,
historyCurrentStep
));
}}
deleteContainer={(containerId: string) => {
setNewHistory(
DeleteContainer(
containerId,
history,
historyCurrentStep
));
setNewHistory(DeleteContainer(
containerId,
history,
historyCurrentStep
));
}}
onPropertyChange={(key, value, type) => {
setNewHistory(
OnPropertyChange(
key, value, type,
selected,
history,
historyCurrentStep
));
setNewHistory(OnPropertyChange(
key,
value,
type,
selected,
history,
historyCurrentStep
));
}}
addOrReplaceContainer={(type) => {
if (selected === null || selected === undefined) {
@ -183,49 +189,44 @@ export function Editor(props: IEditorProps): JSX.Element {
}
}}
addContainerAt={(index, type, parent) => {
setNewHistory(
AddContainer(
index,
type,
parent,
configuration,
history,
historyCurrentStep
)
);
setNewHistory(AddContainer(
index,
type,
parent,
configuration,
history,
historyCurrentStep
));
}}
addSymbol={(type) => {
setNewHistory(
AddSymbol(
type,
configuration,
history,
historyCurrentStep
));
setNewHistory(AddSymbol(
type,
configuration,
history,
historyCurrentStep
));
}}
onSymbolPropertyChange={(key, value) => {
setNewHistory(
OnSymbolPropertyChange(
key, value,
history,
historyCurrentStep
));
setNewHistory(OnSymbolPropertyChange(
key,
value,
history,
historyCurrentStep
));
}}
selectSymbol={(symbolId) => {
setNewHistory(
SelectSymbol(
symbolId,
history,
historyCurrentStep
));
setNewHistory(SelectSymbol(
symbolId,
history,
historyCurrentStep
));
}}
deleteSymbol={(symbolId) => {
setNewHistory(
DeleteSymbol(
symbolId,
history,
historyCurrentStep
));
setNewHistory(DeleteSymbol(
symbolId,
history,
historyCurrentStep
));
}}
saveEditorAsJSON={() => {
SaveEditorAsJSON(