@elyx-code/editor-ui 0.0.2

package/src/services/editor/area.ts

@@ -0,0 +1,1312 @@
+import {
+	CALLABLE_TYPES,
+	CALLER_TYPES,
+	ChangeSet,
+	DraggablePassThroughCallableEntity,
+	ENTITY_WITH_LOGIC_SCOPE_TYPES,
+	ENTRY_POINT_TYPES,
+	EntityType,
+	VARIABLE_TYPES,
+	getRelatedCanvasElementsOnTheLeft,
+} from '@elyx-code/project-logic-tree';
+import {
+	DraggableCallableEntityState,
+	DraggableCallerEntityState,
+	CanvasEntityState,
+	DefinitionEntityState,
+	EntryPointEntityState,
+	ProjectState,
+	VariableDeclarationState,
+} from '@elyx-code/project-logic-tree';
+import {
+	checkIsBranchDependentButNotDirectlyOnBranch,
+	checkIsBranchDependentOnBranch,
+	filterOutDuplicateEntities,
+	getCalls,
+	getCommonChildren,
+	getParentCanvasEntity,
+	getRelatedCanvasElementsOnTheRight,
+} from '@elyx-code/project-logic-tree';
+import {
+	EntityWithLogicScopeState,
+	VariableState,
+} from '@elyx-code/project-logic-tree';
+import {
+	calculateCardSize,
+	CANVAS_BASE_X,
+	CANVAS_BASE_Y,
+	CANVAS_CARD_HEADER_CENTER_HEIGHT,
+	CANVAS_CARD_WIDTH,
+	CANVAS_HORIZONTAL_BUFFER_BETWEEN_CARDS,
+	CANVAS_SIMPLE_CARD_HEIGHT,
+	CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS,
+} from './ui';
+
+// Quick test function to check if an area is in the given list of areas
+// Based on the provided entity id
+function isAreaInList(areas: Area[], entityId: string): Area | null {
+	return areas.find((area) => area.entity.id === entityId) || null;
+}
+
+// filter out repeated areas
+function filterOutRepeatedAreas(areas: Area[]): Area[] {
+	return areas.filter((area, index) => {
+		return areas.indexOf(area) === index;
+	});
+}
+
+export interface ICoordinates {
+	top: number;
+	left: number;
+	bottom: number;
+	right: number;
+}
+
+// This represents an area in the canvas made of 4 coordinates: top, left, bottom, right.
+// Areas are nested, so an area is the total size of itself and all its children.
+export class Area {
+	// The id of this area which represents its place on the tree of areas
+	// For example: "1-2-3" means this area is the 3rd child of the 2nd child of the 1st child of the root area
+	// Since an area can have multiple parents, it can have multiple ids
+	ids: string[] = [];
+	// The main entity of this area. Contains x and y coordinates.
+	entity: CanvasEntityState | ProjectState;
+	// Calculated UI card size for this entity in pixels
+	// This is an approximation and the actual height of the card
+	// The size is calculated based on the entity type and data
+	entityCardHeight!: number;
+	entityCardWidth!: number;
+	// The areas index as a child of its parent area
+	index: number;
+	// Uninitialized ordered children
+	childEntities: CanvasEntityState[] = [];
+	// All areas that collectively make up this area
+	children: Area[] = [];
+	// The areas that contains this area
+	// Areas can have multiple parents because they might have a common ancestor in the tree
+	// For example a return statement that takes in two values are the end of a logic chain
+	parents: Area[] = [];
+
+	// The root area of the calculation,
+	// Useful when we want to go the root of the areas' tree
+	calculationEntryPoint: Area;
+	_onlyEntities: CanvasEntityState[] | null = null;
+
+	private _changeSet: ChangeSet | null = null;
+
+	constructor(
+		entity: CanvasEntityState | ProjectState,
+		index: number,
+		calculationEntryPoint: Area | null = null,
+		changeSet?: ChangeSet | null
+	) {
+		this.index = index;
+		this.entity = entity;
+		this.calculationEntryPoint = calculationEntryPoint || this;
+		this._changeSet = changeSet || null;
+
+		if (this === this.calculationEntryPoint && !changeSet) {
+			throw new Error(
+				'Change-set must be provided for the calculation entry point'
+			);
+		}
+
+		this.calculateCardSize();
+		this.getSortedChildren();
+	}
+
+	static autoGenerateLayout(
+		entryPointEntity: CanvasEntityState | ProjectState,
+		changeSet: ChangeSet | null,
+		onlyEntities?: CanvasEntityState[]
+	): CanvasEntityState[] {
+		const startingX =
+			CANVAS_BASE_X -
+			CANVAS_HORIZONTAL_BUFFER_BETWEEN_CARDS -
+			CANVAS_CARD_WIDTH;
+		const startingY =
+			CANVAS_BASE_Y -
+			CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS -
+			CANVAS_SIMPLE_CARD_HEIGHT;
+
+		// TODO: Here, instead add them close to other entities if they exist in the canvas
+		if (entryPointEntity.type === EntityType.Project) {
+			(entryPointEntity as ProjectState).x = startingX;
+			(entryPointEntity as ProjectState).y = startingY;
+		} else {
+			// @ts-ignore
+			entryPointEntity.metaSync(
+				{
+					x: entryPointEntity.x || startingX,
+					y: entryPointEntity.y || startingY,
+				},
+				changeSet
+			);
+		}
+
+		const rootArea = new Area(entryPointEntity, 0, null, changeSet);
+		rootArea.calculationEntryPoint = rootArea;
+		rootArea._onlyEntities = onlyEntities || [];
+
+		rootArea.ids = ['0'];
+
+		const topLevelRenderedChildren: Area[] = [];
+
+		rootArea.next((renderedLevelTopLevel) => {
+			topLevelRenderedChildren.push(...renderedLevelTopLevel);
+		});
+
+		Area.recursivelyAssembleChildrenAreas(topLevelRenderedChildren);
+
+		rootArea.resolveChildrenOverlaps();
+
+		const results = rootArea.flattenChildEntities();
+
+		if (rootArea._onlyEntities) {
+			return results.filter((result) =>
+				rootArea._onlyEntities?.includes(result)
+			);
+		}
+
+		return results;
+	}
+
+	static recursivelyAssembleChildrenAreas(renderedParents: Area[]) {
+		const renderedChildren: Area[] = [];
+
+		renderedParents.forEach((area) => {
+			// Assemble the children of the already rendered area
+			area.next((renderedLevel) => {
+				// Gather the rendered children
+				renderedChildren.push(...renderedLevel);
+			});
+		});
+
+		// Do the next pass
+		if (renderedChildren.length > 0) {
+			Area.recursivelyAssembleChildrenAreas(renderedChildren);
+		}
+	}
+
+	get onlyEntities(): CanvasEntityState[] {
+		return this.calculationEntryPoint._onlyEntities || [];
+	}
+
+	get changeSet(): ChangeSet {
+		return this.calculationEntryPoint._changeSet as ChangeSet;
+	}
+
+	set changeSet(changeSet: ChangeSet | null) {
+		this.calculationEntryPoint._changeSet = changeSet;
+	}
+
+	findAreaInChildrenFromEntity(entity: CanvasEntityState): Area | null {
+		if (this.entity === entity) {
+			return this;
+		}
+
+		const foundChild = this.children.find((child) => child.entity === entity);
+
+		if (foundChild) {
+			return foundChild;
+		}
+
+		const foundArea = this.children.reduce((acc, child) => {
+			return acc || child.findAreaInChildrenFromEntity(entity);
+		}, null as Area | null);
+
+		return foundArea;
+	}
+
+	findAreaFromEntity(entity: CanvasEntityState): Area | null {
+		if (this.entity === entity) {
+			return this;
+		}
+
+		const children = this.calculationEntryPoint.children;
+
+		const foundChild = children.find((child) => child.entity === entity);
+
+		if (foundChild) {
+			return foundChild;
+		}
+
+		const foundArea = children.reduce((acc, child) => {
+			return acc || child.findAreaInChildrenFromEntity(entity);
+		}, null as Area | null);
+
+		return foundArea;
+	}
+
+	addParent(parent: Area) {
+		// Add the parent to the list of parents if it's not already there
+		if (!this.parents.includes(parent)) {
+			// Create the new id and add it to the list of ids
+			const newIds = Area.resolveIds(parent, this.index);
+			this.ids.push(...newIds);
+
+			// Add the parent to the list of parents
+			this.parents.push(parent);
+		}
+	}
+
+	static resolveIds(parent: Area, index: number): string[] {
+		if (!parent) {
+			return [`${index}`];
+		}
+
+		return parent.ids.map((parentId) => `${parentId}-${index}`);
+	}
+
+	// Sort children based on the vertical order they should be rendered in
+	getSortedChildren() {
+		/*
+			Child entities executed by the current entity should go on top,
+			so they are closer to the execution node in the header of the cards.
+
+			Children might already be rendered because they were also a child of an ancestor or sibling of the current entity.
+			In that case, we should not render them again.
+			We should shift them right if they were rendered before the right end of the current entity, so they can be rendered next to the current entity.
+			Or leave them as they are if they were rendered after the right end of the current entity.
+			After that, we should replace the area of this child with a Connection object in any of the parents that don't inmediatly boarder the child.
+			The child might be rendered further right after many entities, so there is potential for a horizontal gap between some of the parents and the child.
+			The connection takes that place and is rendered as a line between the parent and the child that spans multiple tree levels horizontally.
+			This way when the parent updates, it knows what happened to the entity that was shifted right.
+		*/
+		if (!!(this.entity as EntryPointEntityState).collapsed) {
+			this.childEntities = [];
+			return;
+		}
+
+		const allUnsortedChildren = getRelatedCanvasElementsOnTheRight(
+			this.entity,
+			true
+		);
+
+		if (this.entity.type === EntityType.Project) {
+			const globalScopeEntities: DraggablePassThroughCallableEntity[] = [];
+			const definitionEntities: DefinitionEntityState[] = [];
+			const entryPoints: EntryPointEntityState[] = [];
+
+			// Filter out calls from the all unsorted children list
+			allUnsortedChildren.forEach((child) => {
+				if (EntityType.DefinitionEntity === child.type) {
+					definitionEntities.push(child as DefinitionEntityState);
+					return;
+				} else if (ENTRY_POINT_TYPES.includes(child.type)) {
+					entryPoints.push(child as EntryPointEntityState);
+					return;
+				}
+
+				globalScopeEntities.push(child as DraggablePassThroughCallableEntity);
+			});
+
+			// Order the variables based on whether they are part of the same global branch
+			// The goal is to avoid rendering other elements in between the variables
+			const sortedRootEntities = globalScopeEntities
+				.sort((a, b) => {
+					// If both entities are callable, check if they both eventually lead into a common child
+					const haveCommonChildren = !!getCommonChildren(
+						a as CanvasEntityState,
+						b as CanvasEntityState
+					).length;
+					const relatedOfAOnTheRight = getRelatedCanvasElementsOnTheRight(
+						a as CanvasEntityState
+					);
+					const relatedOfBOnTheRight = getRelatedCanvasElementsOnTheRight(
+						b as CanvasEntityState
+					);
+
+					if (haveCommonChildren) {
+						return 0;
+					} else if (
+						!!relatedOfAOnTheRight.length &&
+						!relatedOfBOnTheRight.length
+					) {
+						return -1;
+					} else if (
+						!relatedOfAOnTheRight.length &&
+						!!relatedOfBOnTheRight.length
+					) {
+						return 1;
+					}
+
+					return 0;
+					// Remove any element which has ancestors (entities on the left)
+				})
+				.filter(
+					(entity) =>
+						!getRelatedCanvasElementsOnTheLeft(entity as CanvasEntityState)
+							.length
+				);
+
+			this.childEntities = [
+				...(definitionEntities as CanvasEntityState[]),
+				...(entryPoints as CanvasEntityState[]),
+				...(sortedRootEntities as CanvasEntityState[]),
+			];
+		} else {
+			const calls: DraggableCallableEntityState[] = [];
+			const detachedBranchesHeads: CanvasEntityState[] = [];
+			const variables: VariableState[] = [];
+			const callables: DraggableCallableEntityState[] = [];
+			const definitionEntities: DefinitionEntityState[] = [];
+
+			if (CALLER_TYPES.includes(this.entity.type)) {
+				const extractedCalls = getCalls(
+					this.entity as DraggableCallerEntityState
+				);
+
+				// Move variables to it sown array, push the rest to 'calls'
+				extractedCalls.forEach((call) => {
+					if (VARIABLE_TYPES.includes(call.type)) {
+						variables.push(call as VariableState);
+						return;
+					}
+
+					const callCanvasParentEntity = getParentCanvasEntity(call);
+
+					calls.push(callCanvasParentEntity as DraggableCallableEntityState);
+				});
+			}
+
+			if (ENTITY_WITH_LOGIC_SCOPE_TYPES.includes(this.entity.type)) {
+				detachedBranchesHeads.push(
+					...(this.entity as EntityWithLogicScopeState).detachedChildren
+				);
+			}
+
+			// Filter out calls from the all unsorted children list
+			const otherEntities = allUnsortedChildren.filter((child) => {
+				const isInCall = calls.includes(child as DraggableCallableEntityState);
+
+				if (isInCall) {
+					return false;
+				}
+
+				const isInVars = variables.includes(child as VariableState);
+
+				if (isInVars) {
+					return false;
+				}
+
+				const isInDetachedBranch = detachedBranchesHeads.includes(child);
+
+				if (isInDetachedBranch) {
+					return false;
+				}
+
+				if (VARIABLE_TYPES.includes(child.type)) {
+					variables.push(child as VariableDeclarationState);
+					return false;
+				}
+
+				if (CALLABLE_TYPES.includes(child.type) && !isInCall) {
+					callables.push(child as DraggableCallableEntityState);
+					return false;
+				}
+
+				if (child.type === EntityType.DefinitionEntity) {
+					definitionEntities.push(child as DefinitionEntityState);
+					return false;
+				}
+
+				return true;
+			});
+
+			/*
+			Sort children based on the vertical order they should be rendered in
+			Children under the 'calls' or 'successCalls' property should be rendered on top
+			Children under the 'errorCalls' property should be rendered next
+		*/
+			calls.sort((a, b) => {
+				// If both entities are callable, check if any of them, eventually leads into the other
+				// Place the dependent branch before the independent one
+				if (
+					checkIsBranchDependentButNotDirectlyOnBranch(
+						a as CanvasEntityState,
+						b as CanvasEntityState
+					)
+				) {
+					return -1;
+				}
+
+				return 0;
+			});
+
+			callables.sort((a, b) => {
+				// If both entities are callable, check if any of them, eventually leads into the other
+				// Place the dependent branch before the independent one
+				if (
+					checkIsBranchDependentButNotDirectlyOnBranch(
+						a as CanvasEntityState,
+						b as CanvasEntityState
+					)
+				) {
+					return -1;
+				}
+
+				return 0;
+			});
+
+			variables.sort((a, b) => {
+				// If both entities are callable, check if any of them, eventually leads into the other
+				// Place the dependent branch before the independent one
+				if (
+					checkIsBranchDependentOnBranch(a as VariableState, b as VariableState)
+				) {
+					return 1;
+				} else if (
+					checkIsBranchDependentOnBranch(b as VariableState, a as VariableState)
+				) {
+					return -1;
+				}
+
+				return 0;
+			});
+
+			this.childEntities = [
+				...definitionEntities,
+				...(calls as CanvasEntityState[]),
+				...(callables as CanvasEntityState[]),
+				...otherEntities,
+				...variables,
+				...detachedBranchesHeads,
+			];
+		}
+	}
+
+	// This is an approximation and the actual height of the card
+	// Calculated based on the entity type and data
+	calculateCardSize() {
+		const size = calculateCardSize(this.entity as CanvasEntityState);
+
+		this.entityCardWidth = size.width;
+		this.entityCardHeight = size.height;
+	}
+
+	// It takes the biggest top, left, bottom, right coordinates of two areas
+	// and returns the top, left, bottom, right coordinates of the area that contains both
+	static getBoundriesOfTwoAreas(
+		area1: ICoordinates,
+		area2: ICoordinates
+	): ICoordinates {
+		return {
+			top: Math.min(area1.top, area2.top),
+			left: Math.min(area1.left, area2.left),
+			bottom: Math.max(area1.bottom, area2.bottom),
+			right: Math.max(area1.right, area2.right),
+		};
+	}
+
+	// Get the combined boundries area of all given areas
+	static getBoundriedOfCombinedAreas(
+		areas: Area[],
+		until: Area[]
+	): ICoordinates {
+		const areasToCombine = areas.filter((area) => !until.includes(area));
+
+		const combinedArea = areasToCombine.reduce((acc, area) => {
+			if (until.includes(area)) {
+				return acc;
+			}
+
+			return Area.getBoundriesOfTwoAreas(acc, area.fullBranchArea);
+		}, areasToCombine[0].fullBranchArea);
+
+		return combinedArea;
+	}
+
+	// Returns the full area of the current entity and all its children until we find any of the given areas
+	getFullAreaUntilAny(areas: Area[]): ICoordinates {
+		const ownArea = this.ownEntityPlusBufferArea;
+
+		const otherChildren = this.children.filter(
+			(child) => !areas.includes(child)
+		);
+
+		const childrenAreas = otherChildren.map((child) =>
+			child.getFullAreaUntilAny(areas)
+		);
+
+		const fullArea: ICoordinates = childrenAreas.reduce((acc, childArea) => {
+			return Area.getBoundriesOfTwoAreas(acc, childArea);
+		}, ownArea);
+
+		return fullArea;
+	}
+
+	// Returns the full area of children until the given child area is found
+	// Useful when a child is shared by another entity
+	getFullAreaUntilAreaOrAnyChildren(childArea: Area): ICoordinates {
+		const untilChildren = [childArea, ...childArea.flattenChildren()];
+
+		const ownArea = this.ownEntityPlusBufferArea;
+
+		const childrenAreas = this.children
+			.filter((child) => untilChildren.includes(child))
+			.map((child) => child.getFullAreaUntil(childArea));
+
+		const fullArea: ICoordinates = childrenAreas.reduce((acc, childArea) => {
+			return Area.getBoundriesOfTwoAreas(acc, childArea);
+		}, ownArea);
+
+		return fullArea;
+	}
+
+	// Returns the full area of children until the given child area is found
+	// Useful when a child is shared by another entity
+	getFullAreaUntil(childArea: Area): ICoordinates {
+		const ownArea = this.ownEntityPlusBufferArea;
+
+		const childrenAreas = this.children
+			.filter((child) => child !== childArea)
+			.map((child) => child.getFullAreaUntil(childArea));
+
+		const fullArea: ICoordinates = childrenAreas.reduce((acc, childArea) => {
+			return Area.getBoundriesOfTwoAreas(acc, childArea);
+		}, ownArea);
+
+		return fullArea;
+	}
+
+	// Calculates and returns the top, left, bottom, right coordinates of this area with all of its children
+	get fullBranchArea(): ICoordinates {
+		const ownArea = this.ownEntityPlusBufferArea;
+		const childrenAreas = this.children.map((child) => child.fullBranchArea);
+
+		const fullArea: ICoordinates = childrenAreas.reduce((acc, childArea) => {
+			const childAreaBoundry = Area.getBoundriesOfTwoAreas(acc, childArea);
+
+			return childAreaBoundry;
+		}, ownArea);
+		return fullArea;
+	}
+
+	// Calculates and returns the top, left, bottom, right coordinates of this area without its children
+	// Only the size of the entity itself
+	get ownEntityArea(): ICoordinates {
+		const ownArea = {
+			top: this.entity.y,
+			left: this.entity.x,
+			bottom: this.entity.y + this.entityCardHeight,
+			right: this.entity.x + this.entityCardWidth,
+		};
+
+		return ownArea;
+	}
+
+	// Calculates and returns the top, left, bottom, right coordinates of this area with its buffer area
+	// The buffer area is a space added to the right and bottom of the entity to separate cards on the canvas
+	get ownEntityPlusBufferArea(): ICoordinates {
+		const entityArea = this.ownEntityArea;
+		const bufferedArea = {
+			top: entityArea.top,
+			left: entityArea.left,
+			bottom: entityArea.bottom + CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS,
+			right: entityArea.right + CANVAS_HORIZONTAL_BUFFER_BETWEEN_CARDS,
+		};
+
+		return bufferedArea;
+	}
+
+	static filterOutRepeatedAreas(areas: Area[]): Area[] {
+		return areas.filter((area, index) => {
+			return areas.indexOf(area) === index;
+		});
+	}
+
+	getEarliestId(idA: string, idB: string): string {
+		const idASplit = idA.split('-');
+		const idBSplit = idB.split('-');
+
+		if (idASplit.length < idBSplit.length) {
+			return idA;
+		} else if (idASplit.length > idBSplit.length) {
+			return idB;
+		}
+
+		// If both ids has the same levels, check which one has the smallest number earlier on
+		const earliestId = idASplit.reduce((_, id, index) => {
+			if (id < idBSplit[index]) {
+				return idA;
+			}
+
+			return idB;
+		}, idA);
+
+		return earliestId;
+	}
+
+	// Returns the number of levels deep in the tree of areas that the current area is first seen at
+	getEarliestLevel(): number {
+		// Get the id with the least levels
+		const earliestId = this.ids.reduce((acc, id) => {
+			return this.getEarliestId(acc, id);
+		}, this.ids[0]);
+
+		const earliestLevel = earliestId.split('-').length;
+
+		return earliestLevel;
+	}
+
+	// Returns the column number,
+	// every time an area is a children of another, it is shifted right to be on the right of the parent
+	// The column number is the number of times the area has been shifted right
+	// To find the column number, we need to count the number of parents, taking the longest route, until the root of the calculation
+	countColumns(): number {
+		// Start counting itself as the first column
+		let count: number = 0;
+
+		if (this !== this.calculationEntryPoint) {
+			count++;
+		} else {
+			return count;
+		}
+
+		if (!this.parents.length) {
+			return count;
+		}
+
+		// Find the parent with the most levels
+		const parentWithMostLevels = this.parents.reduce((acc, parent) => {
+			const parentLevel = parent.getEarliestLevel();
+
+			if (parentLevel > acc.getEarliestLevel()) {
+				return parent;
+			}
+
+			return acc;
+		}, this.parents[0]);
+
+		// Recursively find the column number
+		const parentColumnNumber = parentWithMostLevels.countColumns();
+
+		count += parentColumnNumber;
+
+		return count;
+	}
+
+	getLatestId(idA: string, idB: string): string {
+		if (idA === idB) {
+			return idA;
+		}
+
+		const idASplit = idA.split('-');
+		const idBSplit = idB.split('-');
+
+		if (idASplit.length < idBSplit.length) {
+			return idB;
+		} else if (idASplit.length > idBSplit.length) {
+			return idA;
+		}
+
+		// If both ids has the same levels, check which one has the smallest number earlier on
+		const latestId = idASplit.reduce((_, id, index) => {
+			if (id > idBSplit[index]) {
+				return idA;
+			}
+
+			return idB;
+		}, idA);
+
+		return latestId;
+	}
+
+	// Returns the number of levels deep in the tree of areas that the current area is last seen at
+	getLatestLevel(): number {
+		if (this.ids.length === 1) {
+			return this.ids[0].split('-').length;
+		}
+
+		// Get the id with the most levels
+		const latestId = this.ids.reduce((acc, id) => {
+			return this.getLatestId(acc, id);
+		}, this.ids[0]);
+
+		const latestLevel = latestId.split('-').length;
+
+		return latestLevel;
+	}
+
+	// Decides how much to shift an element down to make it look more organic
+	smoothPosition() {
+		const siblings = this.flattenSiblings();
+
+		if (
+			!siblings.length &&
+			this.parents.length <= 1 &&
+			!!this.children.length
+		) {
+			const amountShifted =
+				this.centerHeaderVerticallyOverCombinedAllChildrenHeaderHeight();
+
+			// Shift parents down too
+			this.parents.forEach((parent) => {
+				if (parent === this.calculationEntryPoint) {
+					return;
+				}
+
+				parent.shiftDownAlone(amountShifted);
+			});
+
+			// Final little cleanup to make the layout more human-like by centering the starting entities over their first children
+		} else if (
+			[...ENTRY_POINT_TYPES].includes(this.entity.type) &&
+			!!this.children.length
+		) {
+			this.centerHeaderVerticallyOverCombinedAllChildrenHeaderHeight();
+		} else if (!this.children.length && this.parents.length > 1) {
+			// Remove any siblings that are also parents
+			const sanitizedSiblings = siblings.filter(
+				(sibling) => !this.parents.includes(sibling)
+			);
+
+			// Parents shouldn't have more children at the same level
+			// Center current entity, only if the children are rendered higher up the tree.
+			// A sibling is rendered further left if their longest id is shorter
+			if (!!sanitizedSiblings.length) {
+				const itIsRenderedAfterSiblings = sanitizedSiblings.every((sibling) => {
+					const ownNumberOfColumns = this.countColumns();
+
+					const siblingNumberOfColumns = sibling.countColumns();
+
+					const isRenderedAfter = ownNumberOfColumns > siblingNumberOfColumns;
+
+					return isRenderedAfter;
+				});
+
+				if (itIsRenderedAfterSiblings) {
+					this.centerHeaderVerticallyOverCombinedAllParentsHeaderHeight();
+				}
+			} else if (!sanitizedSiblings.length) {
+				this.centerHeaderVerticallyOverCombinedAllParentsHeaderHeight();
+			}
+		}
+	}
+
+	// Shift the entity down recursively with all its children, until we find any of the given areas, then stop
+	// Returns the areas that have been shifted, recursively, so the children shifted by the children are also returned
+	shiftDownUntilAny(areas: Area[], amount: number): Area[] {
+		// Just to test, check if the 'areas' list contains a null or undefined value
+		if (areas.includes(this)) {
+			return areas;
+		}
+
+		this.move(this.entity as CanvasEntityState, {
+			y: this.entity.y + amount,
+		});
+
+		let alreadyShiftedAreas: Area[] = [...areas, this];
+
+		this.children.forEach((child) => {
+			// We only want to shift the children once, therefore, if the child has multiple parents,
+			// we assume that it has already been shifted by the earliest parent
+			// So if this isn't the earliest parent, we skip shifting the child
+			const earliestParent = Area.getEarliestParentInChain(child);
+
+			if (earliestParent !== this) {
+				return;
+			}
+
+			const wasPreviouslyInList = isAreaInList(
+				alreadyShiftedAreas,
+				child.entity.id
+			);
+
+			alreadyShiftedAreas = Area.filterOutRepeatedAreas([
+				...alreadyShiftedAreas,
+			]);
+
+			if (!wasPreviouslyInList) {
+				// Remove itself from the already shifted areas list if it is present
+				alreadyShiftedAreas = alreadyShiftedAreas.filter(
+					(area) => area !== child
+				);
+			}
+
+			const newAreasShifted = child.shiftDownUntilAny(
+				alreadyShiftedAreas,
+				amount
+			);
+
+			alreadyShiftedAreas.push(...newAreasShifted);
+		});
+
+		return alreadyShiftedAreas;
+	}
+
+	shiftRightUntilAny(areas: Area[], amount: number) {
+		if (areas.includes(this)) {
+			return;
+		}
+
+		this.move(this.entity as CanvasEntityState, {
+			x: this.entity.x + amount,
+		});
+
+		this.children.forEach((child) => {
+			const flattSiblingAreas = Area.filterOutRepeatedAreas([
+				...this.flattenSiblings(),
+				...areas,
+			]);
+
+			const earliestParent = Area.getEarliestParentInChain(child);
+
+			// This is done to make sure that the child is only shifted once
+			// Only the earliest parent has the responsibility to shift the child
+			if (earliestParent !== this) {
+				return;
+			}
+
+			child.shiftRightUntilAny(flattSiblingAreas, amount);
+		});
+	}
+
+	// Shifts the entity to the right
+	shiftRight(amount: number) {
+		this.move(this.entity as CanvasEntityState, {
+			x: this.entity.x + amount,
+		});
+
+		// Shift all children to the right as well
+		this.children.forEach((child) => {
+			/*
+				We have two avoid siblings shifting eachother. For example:
+				The current entity shifts all of its children, but they are shifted recursively.
+					Meaning, all children shift their children by the same amount, and so on
+				Imagine that one of the children is a also the parent of a sibling.
+					Meaning that the sibling is also a child of the current entity. In that case it will be shifted twice
+
+				We need to avoid children from being shiften more than ones in the "shift chain" so we keep track of the areas that have been shifted
+			*/
+			const flattSiblingAreas = child.flattenSiblings();
+
+			// Remove current child from list of siblings if it is present
+			const siblings = flattSiblingAreas.filter((sibling) => sibling !== child);
+
+			child.shiftRightUntilAny(siblings, amount);
+		});
+	}
+
+	// Translates the y axis of the entity without side effects
+	shiftDownAlone(amount: number) {
+		this.move(this.entity as CanvasEntityState, {
+			y: this.entity.y + amount,
+		});
+	}
+
+	centerHeaderVerticallyOverCombinedAllParentsHeaderHeight() {
+		const fullParentsHeadersHeightArea: ICoordinates = this.parents.reduce(
+			(acc, parent) => {
+				const parentArea = parent.ownEntityArea;
+
+				const parentHeaderCenter =
+					parentArea.top + CANVAS_CARD_HEADER_CENTER_HEIGHT;
+
+				const parentHeaderCenterArea: ICoordinates = {
+					top: parentHeaderCenter,
+					left: parentArea.left,
+					bottom: parentHeaderCenter,
+					right: parentArea.right,
+				};
+
+				return Area.getBoundriesOfTwoAreas(acc, parentHeaderCenterArea);
+			},
+			{ top: Infinity, left: Infinity, bottom: -Infinity, right: -Infinity }
+		);
+
+		const fullParentsHeadersHeight =
+			fullParentsHeadersHeightArea.bottom - fullParentsHeadersHeightArea.top;
+
+		const shiftAmount =
+			fullParentsHeadersHeight / 2 - CANVAS_CARD_HEADER_CENTER_HEIGHT;
+
+		this.shiftDownAlone(shiftAmount);
+	}
+
+	// Returns amount shifted
+	centerHeaderVerticallyOverCombinedAllChildrenHeaderHeight(): number {
+		const fullChildrenHeadersHeightArea: ICoordinates = this.children.reduce(
+			(acc, child) => {
+				const childArea = child.ownEntityArea;
+				const childHeaderCenter =
+					childArea.top + CANVAS_CARD_HEADER_CENTER_HEIGHT;
+
+				const childHeaderCenterArea: ICoordinates = {
+					top: childHeaderCenter,
+					left: childArea.left,
+					bottom: childHeaderCenter,
+					right: childArea.right,
+				};
+
+				return Area.getBoundriesOfTwoAreas(acc, childHeaderCenterArea);
+			},
+			{
+				top: Infinity,
+				left: Infinity,
+				bottom: -Infinity,
+				right: -Infinity,
+			}
+		);
+
+		const fullChildrenHeadersHeight =
+			fullChildrenHeadersHeightArea.bottom - fullChildrenHeadersHeightArea.top;
+
+		const shiftAmount =
+			fullChildrenHeadersHeight / 2 - CANVAS_CARD_HEADER_CENTER_HEIGHT;
+
+		this.shiftDownAlone(shiftAmount);
+
+		return shiftAmount;
+	}
+
+	// Recursively resolves overlaps among its children
+	resolveChildrenOverlaps() {
+		// Loop through all the children and resolve overlaps
+		const children = this.flattenChildren();
+
+		let alreadyShiftedAreasVertically: Area[] = [];
+
+		children.forEach((child) => {
+			const newlyShiftedAreas = child.adjustVerticallyToAvoidOverlaps();
+
+			alreadyShiftedAreasVertically.push(...newlyShiftedAreas);
+		});
+
+		children.forEach((child) => {
+			child.smoothPosition();
+		});
+	}
+
+	static getEarliestParentInChain(area: Area): Area {
+		// Find the parent that is rendered the earliest in the areas tree
+		let earliestParentInChain = area.parents[0];
+
+		if (area.parents.length) {
+			earliestParentInChain = area.parents.sort((parentA, parentB) => {
+				// This is the root area
+				if (!parentA.ids.length) {
+					return -1;
+				}
+
+				// This is the root area
+				if (!parentB.ids.length) {
+					return 1;
+				}
+
+				// Return the one with the smallest ids
+				const parentASortedIds = parentA.ids.sort((a, b) => {
+					// Shortest string length first
+					if (a.length < b.length) {
+						return -1;
+					}
+
+					// If the lengths are the same, return any
+					return 0;
+				});
+
+				// Return the one with the smallest ids
+				const parentBSortedIds = parentB.ids.sort((a, b) => {
+					// Shortest string length first
+					if (a.length < b.length) {
+						return -1;
+					}
+
+					// If the lengths are the same, return any
+					return 0;
+				});
+
+				// Sort the parents based on the length of their shortest id
+				return parentASortedIds[0].length - parentBSortedIds[0].length;
+			})[0];
+		}
+
+		return earliestParentInChain;
+	}
+
+	// Access the parent, remove itself and flatten the siblings that come before it
+	// in the parents children array
+	// If it find itself as a child of another entity, stop there
+	flattenEarlierSiblings(seenSiblings: Set<string> = new Set()): Area[] {
+		seenSiblings.add(this.entity.id);
+
+		const result = this.parents.reduce((acc, parent) => {
+			if (seenSiblings.has(parent.entity.id)) {
+				return acc;
+			}
+
+			seenSiblings.add(parent.entity.id);
+
+			const siblings = parent.children.slice(0, parent.children.indexOf(this));
+
+			const siblingAreas = siblings.reduce((acc, sibling) => {
+				return [...acc, sibling, ...sibling.flattenChildren(seenSiblings)];
+			}, [] as Area[]);
+
+			return [...acc, ...siblingAreas];
+		}, [] as Area[]);
+
+		return result;
+	}
+
+	// Access the parent, remove itself and flatten the remaining children of its parent
+	// If it find itself as a child of another entity, stop there
+	flattenSiblings(seenSiblings: Set<string> = new Set()): Area[] {
+		seenSiblings.add(this.entity.id);
+
+		const result = this.parents.reduce((acc, parent) => {
+			if (seenSiblings.has(parent.entity.id)) {
+				return acc;
+			}
+
+			seenSiblings.add(parent.entity.id);
+
+			const siblings = parent.children.filter((sibling) => sibling !== this);
+
+			const siblingAreas = siblings.reduce((acc, sibling) => {
+				return [...acc, sibling, ...sibling.flattenChildren(seenSiblings)];
+			}, [] as Area[]);
+
+			return [...acc, ...siblingAreas];
+		}, [] as Area[]);
+
+		return result;
+	}
+
+	flattenChildren(seenChildren: Set<string> = new Set()): Area[] {
+		return this.children.reduce((acc, child) => {
+			if (seenChildren.has(child.entity.id)) {
+				return acc;
+			}
+
+			seenChildren.add(child.entity.id);
+
+			return [...acc, child, ...child.flattenChildren(seenChildren)];
+		}, [] as Area[]);
+	}
+
+	flattenParents(seenParents: Set<string> = new Set()): Area[] {
+		const result = this.parents.reduce((acc, parent) => {
+			if (seenParents.has(parent.entity.id)) {
+				return acc;
+			}
+
+			seenParents.add(parent.entity.id);
+
+			return [...acc, parent, ...parent.flattenParents(seenParents)];
+		}, [] as Area[]);
+
+		return result;
+	}
+
+	// Explore the tree of areas to find the entity
+	// If the entity is already rendered, return its area
+	// Otherwise, return null
+	getAreaIfRendered(entity: CanvasEntityState): Area | null {
+		// TODO: this search can be optimised a lot
+		const allAreas: Area[] = this.calculationEntryPoint.flattenChildren();
+
+		const area = allAreas.find((area) => area.entity.id === entity.id);
+
+		return area || null;
+	}
+
+	// Loop over parents, find own index in their children array and return all the siblings after itself
+	getLowerSiblings(): Area[] {
+		const siblings = this.parents.reduce((acc, parent) => {
+			const index = parent.children.indexOf(this);
+
+			const lowerSiblings = parent.children.slice(index + 1);
+			return [...acc, ...lowerSiblings];
+		}, [] as Area[]);
+
+		return filterOutRepeatedAreas(siblings);
+	}
+
+	// It returns all areas that are rendered after the current area, below in the canvas
+	// Not direct children, but subsequent own siblings and subsequent siblings of the parents
+	getLowerAreas(): Area[] {
+		const lowerSiblings = this.getLowerSiblings();
+
+		// Select its parents, then select its lower siblings
+		const lowerParents = this.parents.reduce((acc, parent) => {
+			return [...acc, ...parent.getLowerAreas()];
+		}, [] as Area[]);
+
+		return filterOutRepeatedAreas([...lowerSiblings, ...lowerParents]);
+	}
+
+	// It checks its own area against the area of earlier siblings
+	// and moves itself down if it overlaps with any of them by the overlap amount
+	adjustVerticallyToAvoidOverlaps(alreadyShiftedAreas: Area[] = []): Area[] {
+		// Get previous sibling
+		const earliestParent = Area.getEarliestParentInChain(this);
+
+		const previousSibling = earliestParent.children[this.index - 1];
+
+		if (!previousSibling) {
+			return alreadyShiftedAreas;
+		}
+
+		const flatPreviousSiblingAreas = this.flattenEarlierSiblings();
+		const flatParents = this.flattenParents();
+		const allToAvoid = [
+			...flatPreviousSiblingAreas,
+			...flatParents,
+			previousSibling,
+		];
+
+		const commonChildren = filterOutDuplicateEntities(
+			allToAvoid.flatMap((relatedArea) => {
+				const commonChildren = getCommonChildren(
+					this.entity as CanvasEntityState,
+					relatedArea.entity as CanvasEntityState
+				);
+
+				return commonChildren;
+			})
+		) as CanvasEntityState[];
+
+		// Remove itself from the list if it is present
+		const filteredCommonChildren = commonChildren.filter(
+			(child) => child.id !== this.entity.id
+		);
+
+		const commonChildrenAreas = filteredCommonChildren
+			.map((commonChild) => this.findAreaFromEntity(commonChild))
+			.filter((area) => !!area);
+
+		const ownFullArea = this.getFullAreaUntilAny(commonChildrenAreas);
+
+		const previousSiblingFullArea =
+			previousSibling.getFullAreaUntilAny(commonChildrenAreas);
+
+		const maxBottom = allToAvoid.reduce((acc, area) => {
+			if (area === this) {
+				return acc;
+			}
+
+			// Skip any areas that are not vertically aligned with the current one
+			// We don't want to move areas that are not on the same vertical line
+			if (area.fullBranchArea.left !== ownFullArea.left) {
+				return acc;
+			}
+
+			return Math.max(acc, area.fullBranchArea.bottom);
+
+			// This is so every entity is at least lower than the previous sibling
+			// Even if they aren't overlapping
+		}, previousSiblingFullArea.bottom);
+
+		// Shift down if the top of the current area is less than the bottom of the previous sibling
+		if (ownFullArea.top < maxBottom) {
+			const shiftAmount =
+				maxBottom - ownFullArea.top + CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS;
+
+			const newlyShiftedAreas = this.shiftDownUntilAny(
+				alreadyShiftedAreas,
+				shiftAmount
+			);
+
+			return newlyShiftedAreas;
+		}
+
+		return alreadyShiftedAreas;
+	}
+
+	move(
+		entity: CanvasEntityState,
+		coordinates: { x: number; y: number } | { y: number } | { x: number }
+	) {
+		if (!!this.onlyEntities.includes(entity)) {
+			// @ts-ignore
+			entity.metaSync(coordinates, this.changeSet);
+		}
+	}
+
+	// Create new areas for the children of this area
+	addChild(index: number): Area | null {
+		const childEntity = this.childEntities[index];
+
+		let childArea: Area | null = null;
+
+		// If the child entity has coordinates 0, 0 it means it hasn't been initialized
+		// But if both coordinates exist, it means it has necessarily been rendered
+		if (!!childEntity.x && !!childEntity.y) {
+			childArea = this.getAreaIfRendered(childEntity) as Area;
+		} else if (!childEntity.x && !childEntity.y) {
+			// Initialize the child entity with the parent coordinates to start with
+			this.move(childEntity, {
+				x: this.entity.x,
+				y: this.entity.y,
+			});
+		}
+
+		if (!childArea) {
+			// Create new area instance
+			childArea = new Area(childEntity, index, this.calculationEntryPoint);
+		}
+
+		const ownBufferArea = this.ownEntityPlusBufferArea;
+
+		// If the child area instance is not already in the state as a children, add it
+		if (!this.children.includes(childArea)) {
+			// Add to the state own state even if it was already rendered
+			this.children.push(childArea);
+
+			// Subscribe itself as a parent of the child area
+			childArea.addParent(this);
+		}
+
+		// Move the new child area to the right of the current area if it isn't already there
+		const newChildFullArea = childArea.fullBranchArea;
+
+		// If the child area is not already to the right of the current area, shift it to the right
+		if (newChildFullArea.left < ownBufferArea.right) {
+			const shiftAmount = ownBufferArea.right - newChildFullArea.left;
+
+			childArea.shiftRight(shiftAmount);
+		}
+
+		return childArea;
+	}
+
+	// Flatten the tree of areas into an array of entities
+	// This is useful at the end of the calculation to return all entities with the final coordinates
+	flattenChildEntities(
+		seenEntities: Set<string> = new Set()
+	): CanvasEntityState[] {
+		return this.children.reduce((acc, child) => {
+			if (seenEntities.has(child.entity.id)) {
+				return acc;
+			}
+
+			seenEntities.add(child.entity.id);
+
+			return [
+				...acc,
+				child.entity as CanvasEntityState,
+				...child.flattenChildEntities(seenEntities),
+			];
+		}, [] as CanvasEntityState[]);
+	}
+
+	// When we render children, we render them in a shallow way without their respective children
+	// Once all the first level children are rendered, we go back to the first one and render its children in the same way
+	// This way we can resolve overlaps and shifts in a more efficient way
+	// We use recursion on the side of the caller
+	next(onLevelComplete: (renderedLevel: Area[]) => void) {
+		const proccessedChildren: Area[] = [];
+
+		this.childEntities.forEach((_, index) => {
+			const proccessedChild = this.addChild(index);
+
+			if (proccessedChild) {
+				proccessedChildren.push(proccessedChild);
+			}
+		});
+
+		onLevelComplete(proccessedChildren);
+	}
+}