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
new file mode 100644
index 0000000..eabec85
--- /dev/null
+++ b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts
@@ -0,0 +1,312 @@
+/**
+ * @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 ea4db42..f1736fc 100644
--- a/src/Components/Editor/ContainerOperations.ts
+++ b/src/Components/Editor/ContainerOperations.ts
@@ -1,10 +1,10 @@
import { Dispatch, SetStateAction } from 'react';
-import { HistoryState } from '../../Interfaces/HistoryState';
-import { Configuration } from '../../Interfaces/Configuration';
-import { ContainerModel, IContainerModel } from '../../Interfaces/ContainerModel';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
import { findContainerById } from '../../utils/itertools';
import { getCurrentHistory } from './Editor';
-import { SizePointer } from '../../Interfaces/SizePointer';
+import IProperties from '../../Interfaces/IProperties';
/**
* Select a container
@@ -12,9 +12,9 @@ import { SizePointer } from '../../Interfaces/SizePointer';
*/
export function SelectContainer(
container: ContainerModel,
- fullHistory: HistoryState[],
+ fullHistory: IHistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -27,21 +27,30 @@ export function SelectContainer(
throw new Error('[SelectContainer] Cannot find container among children of main container!');
}
- setHistory(history.concat([{
- LastAction: `Select container ${selectedContainer.properties.id}`,
+ history.push({
+ LastAction: `Select ${selectedContainer.properties.id}`,
MainContainer: mainContainerClone,
SelectedContainer: selectedContainer,
SelectedContainerId: selectedContainer.properties.id,
TypeCounters: Object.assign({}, current.TypeCounters)
- }]));
- setHistoryCurrentStep(history.length);
+ });
+ setHistory(history);
+ setHistoryCurrentStep(history.length - 1);
}
+/**
+ * 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: HistoryState[],
+ fullHistory: IHistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -54,43 +63,58 @@ export function DeleteContainer(
throw new Error(`[DeleteContainer] Tried to delete a container that is not present in the main container: ${containerId}`);
}
- if (container === mainContainerClone) {
+ if (container === mainContainerClone ||
+ container.parent === undefined ||
+ container.parent === null) {
// 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('[OnPropertyChange] Container model was not found among children of the main container!');
+ throw new Error('[DeleteContainer] Container model was not found among children of the main container!');
}
- if (container.parent != null) {
- const index = container.parent.children.indexOf(container);
- if (index > -1) {
- container.parent.children.splice(index, 1);
- }
+ 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');
}
- setHistory(history.concat([{
- LastAction: `Delete container ${containerId}`,
+ // 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}`,
MainContainer: mainContainerClone,
- SelectedContainer: null,
- SelectedContainerId: '',
+ SelectedContainer,
+ SelectedContainerId,
TypeCounters: Object.assign({}, current.TypeCounters)
- }]));
- setHistoryCurrentStep(history.length);
+ });
+ setHistory(history);
+ setHistoryCurrentStep(history.length - 1);
}
/**
* 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: Configuration,
- fullHistory: HistoryState[],
+ configuration: IConfiguration,
+ fullHistory: IHistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -114,14 +138,26 @@ 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: Configuration,
- fullHistory: HistoryState[],
+ configuration: IConfiguration,
+ fullHistory: IHistoryState[],
historyCurrentStep: number,
- setHistory: Dispatch>,
+ setHistory: Dispatch>,
setHistoryCurrentStep: Dispatch>
): void {
const history = getCurrentHistory(fullHistory, historyCurrentStep);
@@ -170,19 +206,23 @@ 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,
- {
- id: `${type}-${count}`,
- parentId: parentClone.properties.id,
- x,
- y: 0,
- width: properties?.Width,
- height: parentClone.properties.height,
- isRigidBody: false,
- ...properties.Style
- },
+ defaultProperties,
[],
{
type
@@ -197,278 +237,13 @@ export function AddContainer(
}
// Update the state
- setHistory(history.concat([{
+ history.push({
LastAction: 'Add container',
MainContainer: clone,
SelectedContainer: parentClone,
SelectedContainerId: parentClone.properties.id,
TypeCounters: newCounters
- }]));
- 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;
+ });
+ setHistory(history);
+ setHistoryCurrentStep(history.length - 1);
}
diff --git a/src/Components/Editor/Editor.tsx b/src/Components/Editor/Editor.tsx
index ad27c22..3a728e3 100644
--- a/src/Components/Editor/Editor.tsx
+++ b/src/Components/Editor/Editor.tsx
@@ -1,31 +1,35 @@
-import React from 'react';
+import React, { useRef } from 'react';
import './Editor.scss';
-import { Configuration } from '../../Interfaces/Configuration';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
import { SVG } from '../SVG/SVG';
-import { HistoryState } from '../../Interfaces/HistoryState';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI';
-import { SelectContainer, DeleteContainer, OnPropertyChange, AddContainerToSelectedContainer, AddContainer } from './ContainerOperations';
+import { SelectContainer, DeleteContainer, 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: Configuration
- history: HistoryState[]
+ configuration: IConfiguration
+ history: IHistoryState[]
historyCurrentStep: number
}
-export interface IEditorState {
- history: HistoryState[]
- historyCurrentStep: number
- configuration: Configuration
-}
+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 const getCurrentHistory = (history: HistoryState[], historyCurrentStep: number): HistoryState[] => history.slice(0, historyCurrentStep + 1);
-export const getCurrentHistoryState = (history: HistoryState[], historyCurrentStep: number): HistoryState => history[historyCurrentStep];
+export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => 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(
@@ -37,15 +41,37 @@ 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 (
-