child.properties.isRigidBody && !child.properties.isAnchor
- );
-
- const overlappingContainers = getOverlappingContainers(container, rigidBodies);
- for (const overlappingContainer of overlappingContainers) {
- constraintBodyInsideUnallocatedWidth(overlappingContainer);
- }
- return container;
-}
-
-/**
- * Returns the overlapping containers with container
- * @param container A container
- * @param containers A list of containers
- * @returns A list of overlapping containers
- */
-function getOverlappingContainers(
- container: IContainerModel,
- containers: IContainerModel[]
-): IContainerModel[] {
- const min1 = container.properties.x;
- const max1 = container.properties.x + Number(container.properties.width);
- const overlappingContainers: IContainerModel[] = [];
- for (const other of containers) {
- if (other === container) {
- continue;
- }
-
- const min2 = other.properties.x;
- const max2 = other.properties.x + Number(other.properties.width);
- const isOverlapping = Math.min(max1, max2) - Math.max(min1, min2) > 0;
-
- if (!isOverlapping) {
- continue;
- }
-
- overlappingContainers.push(other);
- }
- return overlappingContainers;
-}
diff --git a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts
deleted file mode 100644
index eabec85..0000000
--- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts
+++ /dev/null
@@ -1,312 +0,0 @@
-/**
- * @module RigidBodyBehaviors
- * Apply the following contraints to the `container` :
- * - The container must be kept inside its parent
- * - The container must find an unallocated space within the parent
- * If the contraints fails, an error message will be returned
- */
-
-import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { ISizePointer } from '../../../Interfaces/ISizePointer';
-
-/**
- * "Transform the container into a rigid body"
- * Apply the following contraints to the `container` :
- * - The container must be kept inside its parent
- * - The container must find an unallocated space within the parent
- * If the contraints fails, an error message will be returned
- * @param container Container to apply its rigid body properties
- * @returns A rigid body container
- */
-export function RecalculatePhysics(
- container: IContainerModel
-): IContainerModel {
- container = constraintBodyInsideParent(container);
- container = constraintBodyInsideUnallocatedWidth(container);
- return container;
-}
-
-/**
- * Limit a rect inside a parent rect by applying the following rules :
- * it cannot be bigger than the parent
- * it cannot go out of bound
- * Mutates and returns the container
- * @param container
- * @returns Updated container
- */
-function constraintBodyInsideParent(
- container: IContainerModel
-): IContainerModel {
- if (container.parent === null || container.parent === undefined) {
- return container;
- }
-
- const parentProperties = container.parent.properties;
- const parentWidth = Number(parentProperties.width);
- const parentHeight = Number(parentProperties.height);
-
- return constraintBodyInsideSpace(container, 0, 0, parentWidth, parentHeight);
-}
-
-/**
- * Limit a container inside a rectangle
- * Mutates and returns the container
- * @param container A container
- * @param x x of top left of the rectangle
- * @param y y of top left of the rectangle
- * @param width width of the rectangle
- * @param height height of the rectangle
- * @returns Updated container
- */
-function constraintBodyInsideSpace(
- container: IContainerModel,
- x: number,
- y: number,
- width: number,
- height: number
-): IContainerModel {
- const containerProperties = container.properties;
- const containerX = Number(containerProperties.x);
- const containerY = Number(containerProperties.y);
- const containerWidth = Number(containerProperties.width);
- const containerHeight = Number(containerProperties.height);
-
- // Check size bigger than parent
- const isBodyLargerThanParent = containerWidth > width;
- const isBodyTallerThanParentHeight = containerHeight > height;
- if (isBodyLargerThanParent || isBodyTallerThanParentHeight) {
- if (isBodyLargerThanParent) {
- containerProperties.x = x;
- containerProperties.width = width;
- }
- if (isBodyTallerThanParentHeight) {
- containerProperties.y = y;
- containerProperties.height = height;
- }
- return container;
- }
-
- // Check horizontal out of bound
- if (containerX < x) {
- containerProperties.x = x;
- }
- if (containerX + containerWidth > x + width) {
- containerProperties.x = x + width - containerWidth;
- }
-
- // Check vertical out of bound
- if (containerY < y) {
- containerProperties.y = y;
- }
- if (containerY + containerHeight > y + height) {
- containerProperties.y = y + height - containerHeight;
- }
-
- return container;
-}
-
-/**
- * Constraint the container inside unallocated width/space of the parent container
- * If there is no unalloacted width/space, an error will be thrown
- * Mutates and returns the container
- * @param container
- * @returns Updated container
- */
-export function constraintBodyInsideUnallocatedWidth(
- container: IContainerModel
-): IContainerModel {
- if (container.parent === null) {
- return container;
- }
-
- // Get the available spaces of the parent
- const availableWidths = getAvailableWidths(container.parent, container);
- const containerX = Number(container.properties.x);
- const containerWidth = Number(container.properties.width);
-
- // 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 little before placing it inside.'
- );
- }
-
- 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);
- }
- );
-
- // Check if the container actually fit inside
- // It will usually fit if it was alrady fitting
- const availableWidthFound = availableWidths.find((width) =>
- isFitting(container, width)
- );
-
- if (availableWidthFound === undefined) {
- // Otherwise, it is possible that it does not fit
- // There is two way to reach this part of the code
- // 1) Enable isRigidBody such as width > availableWidth.width
- // 2) Resize a container such as width > availableWidth.width
-
- // We want the container to fit automatically inside the available space
- // even if it means to resize the container
- // The end goal is that the code never show the error message no matter what action is done
- // TODO: Actually give an option to not fit and show the error message shown below
- const availableWidth = availableWidths[0];
- container.properties.x = availableWidth.x;
- container.properties.width = availableWidth.width;
- // throw new Error('[constraintBodyInsideUnallocatedWidth] BIGERR: No available space found on the parent container, even though there is some.');
- return container;
- }
-
- return constraintBodyInsideSpace(
- container,
- availableWidthFound.x,
- 0,
- availableWidthFound.width,
- Number(container.parent.properties.height)
- );
-}
-
-/**
- * Get the unallocated widths inside a container
- * An allocated width is defined by its the widths of the children that are rigid bodies.
- * An example of this allocation system is the disk space of an hard drive
- * (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)
- */
-function getAvailableWidths(
- container: IContainerModel,
- exception: IContainerModel
-): ISizePointer[] {
- // Initialize the first size pointer
- // which takes full width of the available space
- const x = 0;
- const width = Number(container.properties.width);
- let unallocatedSpaces: ISizePointer[] = [{ x, width }];
-
- // We will only uses containers that also are rigid or are anchors
- const solidBodies = container.children.filter(
- (child) => child.properties.isRigidBody || child.properties.isAnchor
- );
-
- for (const child of solidBodies) {
- // Ignore the exception
- if (child === exception) {
- continue;
- }
- const childX = child.properties.x;
- const childWidth = Number(child.properties.width);
-
- // get the space of the child that is inside the parent
- let newUnallocatedSpace: ISizePointer[] = [];
-
- // We will iterate on a mutable variable in order to divide it
- for (const unallocatedSpace of unallocatedSpaces) {
- // In order to find unallocated space,
- // We need to calculate the overlap between the two containers
- // We only works with widths meaning in 1D (with lines)
- const newUnallocatedWidths = getAvailableWidthsTwoLines(
- unallocatedSpace.x,
- unallocatedSpace.x + unallocatedSpace.width,
- childX,
- childX + childWidth
- );
-
- // Concat the new list of SizePointer pointing to availables spaces
- newUnallocatedSpace = newUnallocatedSpace.concat(newUnallocatedWidths);
- }
- // Finally update the availables spaces found, loop again with it
- unallocatedSpaces = newUnallocatedSpace;
- }
-
- return unallocatedSpaces;
-}
-
-/**
- * Returns the unallocated widths between two lines in 1D
- * @param unalloctedSpaceLeft left of the first line
- * @param unallocatedSpaceRight rigth of the first line
- * @param rectLeft left of the second line
- * @param rectRight right of the second line
- * @returns Available widths
- */
-function getAvailableWidthsTwoLines(
- unalloctedSpaceLeft: number,
- unallocatedSpaceRight: number,
- rectLeft: number,
- rectRight: number
-): ISizePointer[] {
- if (unallocatedSpaceRight < rectLeft ||
- unalloctedSpaceLeft > rectRight
- ) {
- // object 1 and 2 are not overlapping
- return [{
- x: unalloctedSpaceLeft,
- width: unallocatedSpaceRight - unalloctedSpaceLeft
- }];
- }
-
- if (rectLeft < unalloctedSpaceLeft && rectRight > unallocatedSpaceRight) {
- // object 2 is overlapping full width
- return [];
- }
-
- if (unalloctedSpaceLeft >= rectLeft) {
- // object 2 is partially overlapping on the left
- return [
- {
- x: rectRight,
- width: unallocatedSpaceRight - rectRight
- }
- ];
- }
-
- if (rectRight >= unallocatedSpaceRight) {
- // object 2 is partially overlapping on the right
- return [
- {
- x: unalloctedSpaceLeft,
- width: rectRight - unalloctedSpaceLeft
- }
- ];
- }
-
- // object 2 is overlapping in the middle
- return [
- {
- x: unalloctedSpaceLeft,
- width: rectLeft - unalloctedSpaceLeft
- },
- {
- x: rectRight,
- width: unallocatedSpaceRight - rectRight
- }
- ];
-}
-
-/**
- * Check if a container can fit inside a size space
- * @param container Container to check
- * @param sizePointer Size space to check
- * @returns
- */
-const isFitting = (
- container: IContainerModel,
- sizePointer: ISizePointer
-): boolean => Number(container.properties.width) <= sizePointer.width;
diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts
index f1736fc..ea4db42 100644
--- a/src/Components/Editor/ContainerOperations.ts
+++ b/src/Components/Editor/ContainerOperations.ts
@@ -1,10 +1,10 @@
import { Dispatch, SetStateAction } from 'react';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
-import { IConfiguration } from '../../Interfaces/IConfiguration';
-import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
+import { HistoryState } from '../../Interfaces/HistoryState';
+import { Configuration } from '../../Interfaces/Configuration';
+import { ContainerModel, IContainerModel } from '../../Interfaces/ContainerModel';
import { findContainerById } from '../../utils/itertools';
import { getCurrentHistory } from './Editor';
-import IProperties from '../../Interfaces/IProperties';
+import { SizePointer } from '../../Interfaces/SizePointer';
/**
* Select a container
@@ -12,9 +12,9 @@ import IProperties from '../../Interfaces/IProperties';
*/
export function SelectContainer(
container: ContainerModel,
- fullHistory: IHistoryState[],
+ fullHistory: HistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -27,30 +27,21 @@ export function SelectContainer(
throw new Error('[SelectContainer] Cannot find container among children of main container!');
}
- history.push({
- LastAction: `Select ${selectedContainer.properties.id}`,
+ setHistory(history.concat([{
+ LastAction: `Select container ${selectedContainer.properties.id}`,
MainContainer: mainContainerClone,
SelectedContainer: selectedContainer,
SelectedContainerId: selectedContainer.properties.id,
TypeCounters: Object.assign({}, current.TypeCounters)
- });
- setHistory(history);
- setHistoryCurrentStep(history.length - 1);
+ }]));
+ setHistoryCurrentStep(history.length);
}
-/**
- * Delete a container
- * @param containerId containerId of the container to delete
- * @param fullHistory History of the editor
- * @param historyCurrentStep Current step
- * @param setHistory State setter for History
- * @param setHistoryCurrentStep State setter for current step
- */
export function DeleteContainer(
containerId: string,
- fullHistory: IHistoryState[],
+ fullHistory: HistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -63,58 +54,43 @@ export function DeleteContainer(
throw new Error(`[DeleteContainer] Tried to delete a container that is not present in the main container: ${containerId}`);
}
- if (container === mainContainerClone ||
- container.parent === undefined ||
- container.parent === null) {
+ if (container === mainContainerClone) {
// TODO: Implement alert
throw new Error('[DeleteContainer] Tried to delete the main container! Deleting the main container is not allowed!');
}
if (container === null || container === undefined) {
- throw new Error('[DeleteContainer] Container model was not found among children of the main container!');
+ throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
}
- const index = container.parent.children.indexOf(container);
- if (index > -1) {
- container.parent.children.splice(index, 1);
- } else {
- throw new Error('[DeleteContainer] Could not find container among parent\'s children');
+ if (container.parent != null) {
+ const index = container.parent.children.indexOf(container);
+ if (index > -1) {
+ container.parent.children.splice(index, 1);
+ }
}
- // Select the previous container
- // or select the one above
- const SelectedContainer = findContainerById(mainContainerClone, current.SelectedContainerId) ??
- container.parent.children.at(index - 1) ??
- container.parent;
- const SelectedContainerId = SelectedContainer.properties.id;
-
- history.push({
- LastAction: `Delete ${containerId}`,
+ setHistory(history.concat([{
+ LastAction: `Delete container ${containerId}`,
MainContainer: mainContainerClone,
- SelectedContainer,
- SelectedContainerId,
+ SelectedContainer: null,
+ SelectedContainerId: '',
TypeCounters: Object.assign({}, current.TypeCounters)
- });
- setHistory(history);
- setHistoryCurrentStep(history.length - 1);
+ }]));
+ setHistoryCurrentStep(history.length);
}
/**
* Add a new container to a selected container
* @param type The type of container
- * @param configuration Configuration of the App
- * @param fullHistory History of the editor
- * @param historyCurrentStep Current step
- * @param setHistory State setter for History
- * @param setHistoryCurrentStep State setter for current step
* @returns void
*/
export function AddContainerToSelectedContainer(
type: string,
- configuration: IConfiguration,
- fullHistory: IHistoryState[],
+ configuration: Configuration,
+ fullHistory: HistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -138,26 +114,14 @@ export function AddContainerToSelectedContainer(
);
}
-/**
- * Create and add a new container at `index` in children of parent of `parentId`
- * @param index Index where to insert to the new container
- * @param type Type of container
- * @param parentId Parent in which to insert the new container
- * @param configuration Configuration of the app
- * @param fullHistory History of the editor
- * @param historyCurrentStep Current step
- * @param setHistory State setter of History
- * @param setHistoryCurrentStep State setter of the current step
- * @returns void
- */
export function AddContainer(
index: number,
type: string,
parentId: string,
- configuration: IConfiguration,
- fullHistory: IHistoryState[],
+ configuration: Configuration,
+ fullHistory: HistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -206,23 +170,19 @@ export function AddContainer(
}
}
- const defaultProperties: IProperties = {
- id: `${type}-${count}`,
- parentId: parentClone.properties.id,
- x,
- y: 0,
- width: properties.Width,
- height: parentClone.properties.height,
- isRigidBody: false,
- isAnchor: false,
- XPositionReference: properties.XPositionReference,
- ...properties.Style
- };
-
// Create the container
const newContainer = new ContainerModel(
parentClone,
- defaultProperties,
+ {
+ id: `${type}-${count}`,
+ parentId: parentClone.properties.id,
+ x,
+ y: 0,
+ width: properties?.Width,
+ height: parentClone.properties.height,
+ isRigidBody: false,
+ ...properties.Style
+ },
[],
{
type
@@ -237,13 +197,278 @@ export function AddContainer(
}
// Update the state
- history.push({
+ setHistory(history.concat([{
LastAction: 'Add container',
MainContainer: clone,
SelectedContainer: parentClone,
SelectedContainerId: parentClone.properties.id,
TypeCounters: newCounters
- });
- setHistory(history);
- setHistoryCurrentStep(history.length - 1);
+ }]));
+ setHistoryCurrentStep(history.length);
+}
+
+/**
+ * Handled the property change event in the properties form
+ * @param key Property name
+ * @param value New value of the property
+ * @returns void
+ */
+export function OnPropertyChange(
+ key: string,
+ value: string | number | boolean,
+ fullHistory: HistoryState[],
+ historyCurrentStep: number,
+ setHistory: Dispatch>,
+ setHistoryCurrentStep: Dispatch>
+): void {
+ const history = getCurrentHistory(fullHistory, historyCurrentStep);
+ const current = history[history.length - 1];
+
+ if (current.SelectedContainer === null ||
+ current.SelectedContainer === undefined) {
+ throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
+ }
+
+ if (parent === null) {
+ const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer);
+ (selectedContainerClone.properties as any)[key] = value;
+ setHistory(history.concat([{
+ LastAction: 'Change property of main',
+ MainContainer: selectedContainerClone,
+ SelectedContainer: selectedContainerClone,
+ SelectedContainerId: selectedContainerClone.properties.id,
+ TypeCounters: Object.assign({}, current.TypeCounters)
+ }]));
+ setHistoryCurrentStep(history.length);
+ return;
+ }
+
+ const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
+ const container: ContainerModel | undefined = findContainerById(mainContainerClone, current.SelectedContainer.properties.id);
+
+ if (container === null || container === undefined) {
+ throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
+ }
+
+ (container.properties as any)[key] = value;
+
+ if (container.properties.isRigidBody) {
+ RecalculatePhysics(container);
+ }
+
+ setHistory(history.concat([{
+ LastAction: `Change property of container ${container.properties.id}`,
+ MainContainer: mainContainerClone,
+ SelectedContainer: container,
+ SelectedContainerId: container.properties.id,
+ TypeCounters: Object.assign({}, current.TypeCounters)
+ }]));
+ setHistoryCurrentStep(history.length);
+}
+
+// TODO put this in a different file
+
+export function RecalculatePhysics(container: IContainerModel): IContainerModel {
+ container = constraintBodyInsideParent(container);
+ container = constraintBodyInsideUnallocatedWidth(container);
+ return container;
+}
+
+/**
+ * Limit a rect inside a parent rect by applying the following rules :
+ * it cannot be bigger than the parent
+ * it cannot go out of bound
+ * @param container
+ * @returns
+ */
+function constraintBodyInsideParent(container: IContainerModel): IContainerModel {
+ if (container.parent === null || container.parent === undefined) {
+ return container;
+ }
+
+ const parentProperties = container.parent.properties;
+ const parentWidth = Number(parentProperties.width);
+ const parentHeight = Number(parentProperties.height);
+
+ return constraintBodyInsideSpace(container, 0, 0, parentWidth, parentHeight);
+}
+
+function constraintBodyInsideSpace(
+ container: IContainerModel,
+ x: number,
+ y: number,
+ width: number,
+ height: number
+): IContainerModel {
+ const containerProperties = container.properties;
+ const containerX = Number(containerProperties.x);
+ const containerY = Number(containerProperties.y);
+ const containerWidth = Number(containerProperties.width);
+ const containerHeight = Number(containerProperties.height);
+
+ // Check size bigger than parent
+ const isBodyLargerThanParent = containerWidth > width;
+ const isBodyTallerThanParentHeight = containerHeight > height;
+ if (isBodyLargerThanParent || isBodyTallerThanParentHeight) {
+ if (isBodyLargerThanParent) {
+ containerProperties.x = x;
+ containerProperties.width = width;
+ }
+ if (isBodyTallerThanParentHeight) {
+ containerProperties.y = y;
+ containerProperties.height = height;
+ }
+ return container;
+ }
+
+ // Check horizontal out of bound
+ if (containerX < x) {
+ containerProperties.x = x;
+ }
+ if (containerX + containerWidth > width) {
+ containerProperties.x = x + width - containerWidth;
+ }
+
+ // Check vertical out of bound
+ if (containerY < y) {
+ containerProperties.y = y;
+ }
+ if (containerY + containerHeight > height) {
+ containerProperties.y = y + height - containerHeight;
+ }
+
+ return container;
+}
+
+/**
+ * Get the unallocated widths inside a container
+ * An allocated width is defined by its the widths of the children that are rigid bodies.
+ * An example of this allocation system is the disk space
+ * (except the fact that disk space is divided by block).
+ * @param container
+ * @returns {SizePointer[]} Array of unallocated widths (x=position of the unallocated space, width=size of the allocated space)
+ */
+function getAvailableWidths(container: IContainerModel, exception: IContainerModel): SizePointer[] {
+ const x = 0;
+ const width = Number(container.properties.width);
+ let unallocatedSpaces: SizePointer[] = [{ x, width }];
+
+ const rigidBodies = container.children.filter(child => child.properties.isRigidBody);
+ for (const child of rigidBodies) {
+ if (child === exception) {
+ continue;
+ }
+
+ // get the space of the child that is inside the parent
+ let newUnallocatedSpace: SizePointer[] = [];
+ for (const unallocatedSpace of unallocatedSpaces) {
+ const newUnallocatedWidths = getAvailableWidthsTwoLines(
+ unallocatedSpace.x,
+ unallocatedSpace.x + unallocatedSpace.width,
+ child.properties.x,
+ child.properties.x + Number(child.properties.width));
+ newUnallocatedSpace = newUnallocatedSpace.concat(newUnallocatedWidths);
+ }
+ unallocatedSpaces = newUnallocatedSpace;
+ }
+
+ return unallocatedSpaces;
+}
+
+/**
+ * Returns the unallocated widths between two lines in 1D
+ * @param min1 left of the first line
+ * @param max1 rigth of the first line
+ * @param min2 left of the second line
+ * @param max2 right of the second line
+ * @returns Available widths
+ */
+function getAvailableWidthsTwoLines(min1: number, max1: number, min2: number, max2: number): SizePointer[] {
+ if (min2 < min1 && max2 > max1) {
+ // object 2 is overlapping full width
+ return [];
+ }
+
+ if (min1 >= min2) {
+ // object 2 is partially overlapping on the left
+ return [{
+ x: max2,
+ width: max1 - max2
+ }];
+ }
+
+ if (max2 >= max1) {
+ // object 2 is partially overlapping on the right
+ return [{
+ x: min2,
+ width: max2 - min1
+ }];
+ }
+
+ // object 2 is overlapping in the middle
+ return [
+ {
+ x: min1,
+ width: min2 - min1
+ },
+ {
+ x: min2,
+ width: max1 - max2
+ }
+ ];
+}
+
+/**
+ *
+ * @param container
+ * @returns
+ */
+function constraintBodyInsideUnallocatedWidth(container: IContainerModel): IContainerModel {
+ if (container.parent === null) {
+ return container;
+ }
+
+ const availableWidths = getAvailableWidths(container.parent, container);
+ const containerX = Number(container.properties.x);
+
+ // Sort the available width
+ availableWidths
+ .sort((width1, width2) => Math.abs(width1.x - containerX) - Math.abs(width2.x - containerX));
+
+ if (availableWidths.length === 0) {
+ throw new Error('No available space found on the parent container. Try to free the parent a little before placing it inside.');
+ }
+
+ const availableWidthFound = availableWidths.find(
+ width => isFitting(container, width)
+ );
+
+ if (availableWidthFound === undefined) {
+ // There is two way to reach this part of the code
+ // 1) toggle the isRigidBody such as width > availableWidth.width
+ // 2) resize a container such as width > availableWidth.width
+ // We want the container to fit automatically inside the available space
+ // even if it means to resize the container
+ // The end goal is that the code never show the error message no matter what action is done
+ // TODO: Actually give an option to not fit and show the error message shown below
+ const availableWidth = availableWidths[0];
+ container.properties.x = availableWidth.x;
+ container.properties.width = availableWidth.width;
+ // throw new Error('[constraintBodyInsideUnallocatedWidth] BIGERR: No available space found on the parent container, even though there is some.');
+ return container;
+ }
+
+ return constraintBodyInsideSpace(
+ container,
+ availableWidthFound.x,
+ 0,
+ availableWidthFound.width,
+ Number(container.parent.properties.height)
+ );
+}
+
+function isFitting(container: IContainerModel, sizePointer: SizePointer): boolean {
+ const containerWidth = Number(container.properties.width);
+
+ return containerWidth <= sizePointer.width;
}
diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx
index 3a728e3..ad27c22 100644
--- a/src/Components/Editor/Editor.tsx
+++ b/src/Components/Editor/Editor.tsx
@@ -1,35 +1,31 @@
-import React, { useRef } from 'react';
+import React from 'react';
import './Editor.scss';
-import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { Configuration } from '../../Interfaces/Configuration';
import { SVG } from '../SVG/SVG';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { HistoryState } from '../../Interfaces/HistoryState';
import { UI } from '../UI/UI';
-import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddContainer } from './ContainerOperations';
+import { SelectContainer, DeleteContainer, OnPropertyChange, AddContainerToSelectedContainer, AddContainer } from './ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Save';
import { onKeyDown } from './Shortcuts';
-import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations';
-import EditorEvents from '../../Events/EditorEvents';
-import { IEditorState } from '../../Interfaces/IEditorState';
-import { MAX_HISTORY } from '../../utils/default';
interface IEditorProps {
- configuration: IConfiguration
- history: IHistoryState[]
+ configuration: Configuration
+ history: HistoryState[]
historyCurrentStep: number
}
-export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] =>
- history.slice(
- Math.max(0, history.length - MAX_HISTORY), // change this to 0 for unlimited (not recommanded because of overflow)
- historyCurrentStep + 1
- );
+export interface IEditorState {
+ history: HistoryState[]
+ historyCurrentStep: number
+ configuration: Configuration
+}
-export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
+export const getCurrentHistory = (history: HistoryState[], historyCurrentStep: number): HistoryState[] => history.slice(0, historyCurrentStep + 1);
+export const getCurrentHistoryState = (history: HistoryState[], historyCurrentStep: number): HistoryState => history[historyCurrentStep];
const Editor: React.FunctionComponent = (props) => {
- const [history, setHistory] = React.useState(structuredClone(props.history));
+ const [history, setHistory] = React.useState(structuredClone(props.history));
const [historyCurrentStep, setHistoryCurrentStep] = React.useState(props.historyCurrentStep);
- const editorRef = useRef(null);
React.useEffect(() => {
const onKeyUp = (event: KeyboardEvent): void => onKeyDown(
@@ -41,37 +37,15 @@ const Editor: React.FunctionComponent = (props) => {
window.addEventListener('keyup', onKeyUp);
- const events = EditorEvents;
- const editorState: IEditorState = {
- history,
- historyCurrentStep,
- configuration: props.configuration
- };
-
- const funcs = new Map void>();
- for (const event of events) {
- const func = (): void => event.func(editorState);
- editorRef.current?.addEventListener(event.name, func);
- funcs.set(event.name, func);
- }
-
return () => {
window.removeEventListener('keyup', onKeyUp);
-
- for (const event of events) {
- const func = funcs.get(event.name);
- if (func === undefined) {
- continue;
- }
- editorRef.current?.removeEventListener(event.name, func);
- }
};
});
const configuration = props.configuration;
const current = getCurrentHistoryState(history, historyCurrentStep);
return (
-