From d60410f7f2c41b67b428e45c71e5c3535279d9ef Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 13:24:00 +0200 Subject: [PATCH 1/9] Remove adding behaviors --- src/Enums/AddingBehavior.ts | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 src/Enums/AddingBehavior.ts diff --git a/src/Enums/AddingBehavior.ts b/src/Enums/AddingBehavior.ts deleted file mode 100644 index fb6ae67..0000000 --- a/src/Enums/AddingBehavior.ts +++ /dev/null @@ -1,4 +0,0 @@ -export enum AddingBehavior { - InsertInto, - Replace -} -- 2.47.2 From d4abe8966ed6c093b0745ad938ef070d62bef4cf Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 13:52:51 +0200 Subject: [PATCH 2/9] Change extension of EditorState --- src/Interfaces/{IEditorState.tsx => IEditorState.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Interfaces/{IEditorState.tsx => IEditorState.ts} (100%) diff --git a/src/Interfaces/IEditorState.tsx b/src/Interfaces/IEditorState.ts similarity index 100% rename from src/Interfaces/IEditorState.tsx rename to src/Interfaces/IEditorState.ts -- 2.47.2 From 42d6d30763d11936cec6095c27cdcd00add12ec0 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 14:13:33 +0200 Subject: [PATCH 3/9] Fix x, y not a number (partially) --- src/Components/Editor/PropertiesOperations.ts | 46 +++++-------------- 1 file changed, 11 insertions(+), 35 deletions(-) diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index 11c1b62..bdcc03d 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/src/Components/Editor/PropertiesOperations.ts @@ -4,7 +4,7 @@ import { IHistoryState } from '../../Interfaces/IHistoryState'; import IProperties from '../../Interfaces/IProperties'; import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; -import { RecalculatePhysics } from './RigidBodyBehaviors'; +import { INPUT_TYPES } from '../Properties/PropertiesInputTypes'; /** * Handled the property change event in the properties form @@ -28,20 +28,6 @@ export function OnPropertyChange( 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); @@ -49,7 +35,11 @@ export function OnPropertyChange( throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); } - (container.properties as any)[key] = value; + if (INPUT_TYPES[key] === 'number') { + (container.properties as any)[key] = Number(value); + } else { + (container.properties as any)[key] = value; + } if (container.properties.isRigidBody) { RecalculatePhysics(container); @@ -88,25 +78,6 @@ export function OnPropertiesSubmit( throw new Error('[OnPropertyChange] Property was changed before selecting a Container'); } - if (parent === null) { - const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer); - for (const property in properties) { - const input = (event.target as HTMLFormElement).querySelector(`#${property}`); - if (input instanceof HTMLInputElement) { - (selectedContainerClone.properties as any)[property] = input.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); @@ -118,6 +89,11 @@ export function OnPropertiesSubmit( const input = (event.target as HTMLFormElement).querySelector(`#${property}`); if (input instanceof HTMLInputElement) { (container.properties as any)[property] = input.value; + if (INPUT_TYPES[property] === 'number') { + (container.properties as any)[property] = Number(input.value); + } else { + (container.properties as any)[property] = input.value; + } } } -- 2.47.2 From 0b41f7ac2cba632557306c9fa7729e5388081276 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 14:15:40 +0200 Subject: [PATCH 4/9] Implement isAnchor basics properties + fix IsRigidbody --- src/Components/App/MenuActions.ts | 3 +- .../Editor/Behaviors/AnchorBehaviors.ts | 23 +++++++++++++++ .../{ => Behaviors}/RigidBodyBehaviors.ts | 29 ++++++++++++------- src/Components/Editor/ContainerOperations.ts | 26 ++++++++++------- src/Components/Editor/PropertiesOperations.ts | 1 + .../ElementsSidebar/ElementsSidebar.test.tsx | 21 +++++++++----- src/Components/Properties/Properties.test.tsx | 3 +- .../Properties/PropertiesInputTypes.tsx | 3 +- src/Interfaces/IProperties.ts | 10 +++++++ src/utils/default.ts | 1 + 10 files changed, 89 insertions(+), 31 deletions(-) create mode 100644 src/Components/Editor/Behaviors/AnchorBehaviors.ts rename src/Components/Editor/{ => Behaviors}/RigidBodyBehaviors.ts (88%) diff --git a/src/Components/App/MenuActions.ts b/src/Components/App/MenuActions.ts index c849ca8..c144acc 100644 --- a/src/Components/App/MenuActions.ts +++ b/src/Components/App/MenuActions.ts @@ -2,7 +2,7 @@ import { Dispatch, SetStateAction } from 'react'; import { IConfiguration } from '../../Interfaces/IConfiguration'; import { ContainerModel } from '../../Interfaces/IContainerModel'; import { fetchConfiguration } from '../API/api'; -import { IEditorState } from "../../Interfaces/IEditorState"; +import { IEditorState } from '../../Interfaces/IEditorState'; import { LoadState } from './Load'; export function NewEditor( @@ -23,6 +23,7 @@ export function NewEditor( width: configuration.MainContainer.Width, height: configuration.MainContainer.Height, isRigidBody: false, + isAnchor: false, fillOpacity: 0, stroke: 'black' } diff --git a/src/Components/Editor/Behaviors/AnchorBehaviors.ts b/src/Components/Editor/Behaviors/AnchorBehaviors.ts new file mode 100644 index 0000000..a5e02f7 --- /dev/null +++ b/src/Components/Editor/Behaviors/AnchorBehaviors.ts @@ -0,0 +1,23 @@ +/** + * @module AnchorBehavior + * + * An anchor is a container that takes physical priority in the representation : + * - It cannot be moved by other rigid siblings container + * - It cannot be resized by any other siblings container + * - It cannot overlap any other siblings rigid container : + * - overlapping container are shifted to the nearest available space/width + * - or resized when there is no available space left other than theirs + * - or lose their rigid body properties when there is no available space left) + * Meaning that: + * - Moving an anchor container will resize the width of an overlapping container + * or make them lose their property as a rigid body + */ + +/** + * Impose the container position + * Apply the following modification to the overlapping rigid body container : + * + */ +export function ImposePosition(){ + +} \ No newline at end of file diff --git a/src/Components/Editor/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts similarity index 88% rename from src/Components/Editor/RigidBodyBehaviors.ts rename to src/Components/Editor/Behaviors/RigidBodyBehaviors.ts index 116fbc4..b250ed2 100644 --- a/src/Components/Editor/RigidBodyBehaviors.ts +++ b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts @@ -1,5 +1,13 @@ -import { IContainerModel } from '../../Interfaces/IContainerModel'; -import { ISizePointer } from '../../Interfaces/ISizePointer'; +/** + * @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" @@ -179,17 +187,18 @@ function getAvailableWidths( const width = Number(container.properties.width); let unallocatedSpaces: ISizePointer[] = [{ x, width }]; - // We will only uses containers that also have the rigid bodies - // as out-of-bound or enormouse containers should be ignored - const rigidBodies = container.children.filter( - (child) => child.properties.isRigidBody + // 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 rigidBodies) { + 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[] = []; @@ -202,8 +211,8 @@ function getAvailableWidths( const newUnallocatedWidths = getAvailableWidthsTwoLines( unallocatedSpace.x, unallocatedSpace.x + unallocatedSpace.width, - child.properties.x, - child.properties.x + Number(child.properties.width) + childX, + childX + childWidth ); // Concat the new list of SizePointer pointing to availables spaces @@ -262,7 +271,7 @@ function getAvailableWidthsTwoLines( width: min2 - min1 }, { - x: min2, + x: max2, width: max1 - max2 } ]; diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index 40391c5..63d90a0 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/ContainerOperations.ts @@ -4,6 +4,7 @@ import { IConfiguration } from '../../Interfaces/IConfiguration'; import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel'; import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; +import IProperties from '../../Interfaces/IProperties'; /** * Select a container @@ -203,20 +204,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, - XPositionReference: properties.XPositionReference, - ...properties.Style - }, + defaultProperties, [], { type diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index bdcc03d..e271776 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/src/Components/Editor/PropertiesOperations.ts @@ -4,6 +4,7 @@ import { IHistoryState } from '../../Interfaces/IHistoryState'; import IProperties from '../../Interfaces/IProperties'; import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; +import { RecalculatePhysics } from './Behaviors/RigidBodyBehaviors'; import { INPUT_TYPES } from '../Properties/PropertiesInputTypes'; /** diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index f1776c0..8d34480 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx @@ -17,7 +17,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 2000, height: 100, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} }} @@ -47,7 +48,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 2000, height: 100, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} }; @@ -103,7 +105,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 2000, height: 100, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} }; @@ -119,7 +122,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 0, height: 0, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} } @@ -136,7 +140,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 0, height: 0, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} } @@ -173,7 +178,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 2000, height: 100, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} }; @@ -188,7 +194,8 @@ describe.concurrent('Elements sidebar', () => { y: 0, width: 0, height: 0, - isRigidBody: false + isRigidBody: false, + isAnchor: false }, userData: {} }; diff --git a/src/Components/Properties/Properties.test.tsx b/src/Components/Properties/Properties.test.tsx index 2afc364..9fbef37 100644 --- a/src/Components/Properties/Properties.test.tsx +++ b/src/Components/Properties/Properties.test.tsx @@ -23,7 +23,8 @@ describe.concurrent('Properties', () => { parentId: 'parentId', x: 1, y: 1, - isRigidBody: false + isRigidBody: false, + isAnchor: false }; const handleChange = vi.fn((key, value) => { diff --git a/src/Components/Properties/PropertiesInputTypes.tsx b/src/Components/Properties/PropertiesInputTypes.tsx index c62a8fd..d91ddbc 100644 --- a/src/Components/Properties/PropertiesInputTypes.tsx +++ b/src/Components/Properties/PropertiesInputTypes.tsx @@ -3,5 +3,6 @@ export const INPUT_TYPES: Record = { y: 'number', width: 'number', height: 'number', - isRigidBody: 'checkbox' + isRigidBody: 'checkbox', + isAnchor: 'checkbox' }; diff --git a/src/Interfaces/IProperties.ts b/src/Interfaces/IProperties.ts index 4996ce5..ef2db7e 100644 --- a/src/Interfaces/IProperties.ts +++ b/src/Interfaces/IProperties.ts @@ -1,11 +1,21 @@ import * as React from 'react'; import { XPositionReference } from '../Enums/XPositionReference'; +/** + * Properties of a container + * @property id id of the container + * @property parentId id of the parent container + * @property x horizontal offset of the container + * @property y vertical offset of the container + * @property isRigidBody if true apply rigid body behaviors + * @property isAnchor if true apply anchor behaviors + */ export default interface IProperties extends React.CSSProperties { id: string parentId: string | null x: number y: number isRigidBody: boolean + isAnchor: boolean XPositionReference?: XPositionReference } diff --git a/src/utils/default.ts b/src/utils/default.ts index 785a840..2bd22dc 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -33,6 +33,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = { width: DEFAULT_CONFIG.MainContainer.Width, height: DEFAULT_CONFIG.MainContainer.Height, isRigidBody: false, + isAnchor: false, fillOpacity: 0, stroke: 'black' }; -- 2.47.2 From 10d13b246d74916ce82a5518175b859482e2755d Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 14:57:35 +0200 Subject: [PATCH 5/9] Implement impose position --- .../Editor/Behaviors/AnchorBehaviors.ts | 47 +++++++++++++++++-- .../Editor/Behaviors/RigidBodyBehaviors.ts | 2 +- src/Components/Editor/PropertiesOperations.ts | 5 ++ 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/Components/Editor/Behaviors/AnchorBehaviors.ts b/src/Components/Editor/Behaviors/AnchorBehaviors.ts index a5e02f7..8d1adf9 100644 --- a/src/Components/Editor/Behaviors/AnchorBehaviors.ts +++ b/src/Components/Editor/Behaviors/AnchorBehaviors.ts @@ -13,11 +13,52 @@ * or make them lose their property as a rigid body */ +import { IContainerModel } from '../../../Interfaces/IContainerModel'; +import { constraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors'; + /** * Impose the container position * Apply the following modification to the overlapping rigid body container : - * */ -export function ImposePosition(){ +export function ImposePosition(container: IContainerModel): IContainerModel { + if (container.parent === undefined || + container.parent === null) { + return container; + } -} \ No newline at end of file + // Get the closest one + const rigidBodies = container.parent.children.filter( + child => child.properties.isRigidBody && !child.properties.isAnchor + ); + + const overlappingContainers = getOverlappingContainers(container, rigidBodies); + for (const overlappingContainer of overlappingContainers) { + constraintBodyInsideUnallocatedWidth(overlappingContainer); + } + return container; +} + +function getOverlappingContainers( + container: IContainerModel, + siblings: IContainerModel[] +): IContainerModel[] { + const min1 = container.properties.x; + const max1 = container.properties.x + Number(container.properties.width); + const overlappingContainers: IContainerModel[] = []; + for (const sibling of siblings) { + if (sibling === container) { + continue; + } + + const min2 = sibling.properties.x; + const max2 = sibling.properties.x + Number(sibling.properties.width); + const isOverlapping = Math.min(max1, max2) - Math.max(min1, min2) > 0; + + if (!isOverlapping) { + continue; + } + + overlappingContainers.push(sibling); + } + return overlappingContainers; +} diff --git a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts index b250ed2..0bdefd0 100644 --- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts +++ b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts @@ -112,7 +112,7 @@ function constraintBodyInsideSpace( * @param container * @returns Updated container */ -function constraintBodyInsideUnallocatedWidth( +export function constraintBodyInsideUnallocatedWidth( container: IContainerModel ): IContainerModel { if (container.parent === null) { diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index e271776..ed5a4db 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/src/Components/Editor/PropertiesOperations.ts @@ -6,6 +6,7 @@ import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; import { RecalculatePhysics } from './Behaviors/RigidBodyBehaviors'; import { INPUT_TYPES } from '../Properties/PropertiesInputTypes'; +import { ImposePosition } from './Behaviors/AnchorBehaviors'; /** * Handled the property change event in the properties form @@ -42,6 +43,10 @@ export function OnPropertyChange( (container.properties as any)[key] = value; } + if (container.properties.isAnchor) { + ImposePosition(container); + } + if (container.properties.isRigidBody) { RecalculatePhysics(container); } -- 2.47.2 From ab867b6b5cec26af815a48969218e3420006a3c4 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 15:55:14 +0200 Subject: [PATCH 6/9] Fix rigid body wrong sorting due to not using the middle and the theorical position of the container --- .../Editor/Behaviors/RigidBodyBehaviors.ts | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts index 0bdefd0..b683baa 100644 --- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts +++ b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts @@ -90,7 +90,7 @@ function constraintBodyInsideSpace( if (containerX < x) { containerProperties.x = x; } - if (containerX + containerWidth > width) { + if (containerX + containerWidth > x + width) { containerProperties.x = x + width - containerWidth; } @@ -98,7 +98,7 @@ function constraintBodyInsideSpace( if (containerY < y) { containerProperties.y = y; } - if (containerY + containerHeight > height) { + if (containerY + containerHeight > y + height) { containerProperties.y = y + height - containerHeight; } @@ -122,12 +122,7 @@ export function constraintBodyInsideUnallocatedWidth( // Get the available spaces of the parent const availableWidths = getAvailableWidths(container.parent, container); const containerX = Number(container.properties.x); - - // Sort the available width to find the closest one - availableWidths.sort( - (width1, width2) => - Math.abs(width1.x - containerX) - Math.abs(width2.x - containerX) - ); + const containerWidth = Number(container.properties.width); // Check if there is still some space if (availableWidths.length === 0) { @@ -136,6 +131,24 @@ export function constraintBodyInsideUnallocatedWidth( ); } + 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) => -- 2.47.2 From 4f7055000acda03887131bd101d0077cf2a88e9b Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 15:58:08 +0200 Subject: [PATCH 7/9] Improve docs for AnchorBehaviors --- .../Editor/Behaviors/AnchorBehaviors.ts | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/Components/Editor/Behaviors/AnchorBehaviors.ts b/src/Components/Editor/Behaviors/AnchorBehaviors.ts index 8d1adf9..d9731e8 100644 --- a/src/Components/Editor/Behaviors/AnchorBehaviors.ts +++ b/src/Components/Editor/Behaviors/AnchorBehaviors.ts @@ -17,8 +17,9 @@ import { IContainerModel } from '../../../Interfaces/IContainerModel'; import { constraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors'; /** - * Impose the container position + * 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 ImposePosition(container: IContainerModel): IContainerModel { if (container.parent === undefined || @@ -26,7 +27,6 @@ export function ImposePosition(container: IContainerModel): IContainerModel { return container; } - // Get the closest one const rigidBodies = container.parent.children.filter( child => child.properties.isRigidBody && !child.properties.isAnchor ); @@ -38,27 +38,33 @@ export function ImposePosition(container: IContainerModel): IContainerModel { 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, - siblings: IContainerModel[] + containers: IContainerModel[] ): IContainerModel[] { const min1 = container.properties.x; const max1 = container.properties.x + Number(container.properties.width); const overlappingContainers: IContainerModel[] = []; - for (const sibling of siblings) { - if (sibling === container) { + for (const other of containers) { + if (other === container) { continue; } - const min2 = sibling.properties.x; - const max2 = sibling.properties.x + Number(sibling.properties.width); + 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(sibling); + overlappingContainers.push(other); } return overlappingContainers; } -- 2.47.2 From 5d3d6240b32f883509b3793c18fab1d305e3e7e1 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 16:13:16 +0200 Subject: [PATCH 8/9] Fix getAvailableWidthsTwoLines when there is no overlap --- .../Editor/Behaviors/RigidBodyBehaviors.ts | 48 +++++++++++-------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts index b683baa..7e3a1f6 100644 --- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts +++ b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts @@ -240,39 +240,49 @@ function getAvailableWidths( /** * 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 + * @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( - min1: number, - max1: number, - min2: number, - max2: number + unalloctedSpaceLeft: number, + unallocatedSpaceRight: number, + rectLeft: number, + rectRight: number ): ISizePointer[] { - if (min2 < min1 && max2 > max1) { + 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 (min1 >= min2) { + if (unalloctedSpaceLeft >= rectLeft) { // object 2 is partially overlapping on the left return [ { - x: max2, - width: max1 - max2 + x: rectRight, + width: unallocatedSpaceRight - rectRight } ]; } - if (max2 >= max1) { + if (rectRight >= unallocatedSpaceRight) { // object 2 is partially overlapping on the right return [ { - x: min2, - width: max2 - min1 + x: rectLeft, + width: rectRight - unalloctedSpaceLeft } ]; } @@ -280,12 +290,12 @@ function getAvailableWidthsTwoLines( // object 2 is overlapping in the middle return [ { - x: min1, - width: min2 - min1 + x: unalloctedSpaceLeft, + width: rectLeft - unalloctedSpaceLeft }, { - x: max2, - width: max1 - max2 + x: rectRight, + width: unallocatedSpaceRight - rectRight } ]; } -- 2.47.2 From 24683a7b58319bb9e3a4fa4cd52b6fa9a7bf4cf7 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 12 Aug 2022 16:27:06 +0200 Subject: [PATCH 9/9] Fix getAvailableWidthsTwoLines when overlapping on the right --- src/Components/Editor/Behaviors/RigidBodyBehaviors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts index 7e3a1f6..eabec85 100644 --- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts +++ b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts @@ -281,7 +281,7 @@ function getAvailableWidthsTwoLines( // object 2 is partially overlapping on the right return [ { - x: rectLeft, + x: unalloctedSpaceLeft, width: rectRight - unalloctedSpaceLeft } ]; -- 2.47.2