@elyx-code/editor-ui 0.0.2

package/src/services/editor/CanvasElement.tsx

@@ -0,0 +1,2934 @@
+import React from 'react';
+import { CanvasObject, DraggableObject } from '../../lib/canvas';
+import {
+	ConnectionNodeType,
+	IConnectionDrawingOptions,
+	EditorService
+} from '.';
+import {
+	ArgumentDeclarationState,
+	BreakStatementState,
+	CallableEntityState,
+	CallerEntityState,
+	CanvasEntityState,
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	ConditionState,
+	ContinueStatementState,
+	createStateFromTypeAndSubscribe,
+	DefinitionEntityState,
+	DraggablePassThroughCallableEntityState,
+	EntryPointEntityState,
+	ExecutableEntityState,
+	FunctionCallState,
+	FunctionDeclarationState,
+	getDeclaration,
+	getFirstNonLoopScopeOwner,
+	getScopeOwner,
+	getTouchedCanvasEntitiesFromChangeSet,
+	GlobalEventNames,
+	GlobalEventState,
+	IActionDescriptorTransfer,
+	IFunctionDeclarationTransfer,
+	InputMapState,
+	InstalledProjectState,
+	InternalCallState,
+	LoopState,
+	OperationState,
+	OutputMapState,
+	PassThroughCallableEntityState,
+	ProjectState,
+	resolveEntityName,
+	ReturnStatementState,
+	SearchState,
+	TerminationEntityState,
+	UserManagedEntityState,
+	ValueDescriptorState,
+	ValueReadingEntityState,
+	ValueWritingEntityState,
+	VariableDeclarationState,
+	VariableState,
+	READABLE_ENTITY_TYPES,
+	flattenRelatedCanvasElementsOnTheRight,
+	mapActionDescriptorToTypeItRepresents,
+	ENTRY_POINT_TYPES,
+	EntityType,
+	filterOutDuplicateEntitiesAsync,
+	DataTypeState,
+	BUILT_IN_BASE_ENTITY_IDS,
+	PrimitiveEntityState,
+	IPrimitiveEntityTransfer,
+	StateMutationAction,
+	BaseEntityNames,
+	toKebabCase
+} from '@elyx-code/project-logic-tree';
+import {
+	getCanvasEntityDraggableContainerDOMId,
+	highlightElement,
+	highlighOverlappingElements,
+	getEntityIdFromCanvasId
+} from './ui';
+import DraggableEntityCard from '../../components/draggable-entity-card/DraggableEntityCard';
+import VariableCard from '../../components/draggable-entity-card/VariableCard';
+import LoopCard from '../../components/draggable-entity-card/LoopCard';
+import FunctionDeclarationCard from '../../components/draggable-entity-card/FunctionDeclarationCard';
+import PassthroughEntityCard from '../../components/draggable-entity-card/PassthroughEntityCard';
+import ConditionCard from '../../components/draggable-entity-card/ConditionCard';
+import EventCard from '../../components/draggable-entity-card/EventCard';
+import TerminationStatementCard from '../../components/draggable-entity-card/termination-statement/TerminationStatementCard';
+import DefinitionEntityCard from '../../components/draggable-entity-card/definition-entity/DefinitionEntityCard';
+import { validateConnectionDeletion } from '../../components/draggable-entity-card/ConnectionDeleteButton';
+import {
+	createRoot,
+	IComponentLifecycleProps,
+	ReactRoot
+} from '../../utils/react';
+import CreateEntityMenu, {
+	ICreateEntityMenuProps
+} from '../../components/canvas/CreateEntityMenu';
+import { createVariableInstanceFromDeclaration } from './create/variable-instance';
+import { createFunctionCallFromFunctionDeclaration } from './create/function-call';
+import { createGlobalEventFromActionDescriptor } from './create/global-event';
+import { createConditionFromActionDescriptor } from './create/condition';
+import { createOperationFromActionDescriptor } from './create/operation';
+import { createVariableDeclarationFromWritter } from './create/variable-declaration';
+import { createDefinitionEntityFromBuiltInBaseEntity } from './create/definition-entity';
+import { createLoopFromActionDescriptor } from './create/loop';
+import { popupNotification } from '../../popup-notification';
+import {
+	findNextAvailableName,
+	resolveNewParentFromConnectionsScopeOwner
+} from './create/utils';
+import { filterOutNonCanvasEntities } from './utils';
+import notifications from '../notifications';
+import { Logger, YieldOptions, YieldTracker } from '@elyx-code/common-ts-utils';
+import { disconnect } from './CanvasElementConnectionDeleteButton';
+
+/*
+  This file declares a class that holds all state related to a rendered canvas card element.
+  This includes:
+    - Project entity
+    - Draggable object of the canvas
+    - The react root node that starts its own tree for this card on the canvas
+*/
+
+export interface IBaseCanvasCardProps<T = CanvasEntityState> {
+	// disabled: boolean;
+	entity: T;
+	canvasElement: CanvasEntityElement;
+	project: EditorService;
+}
+
+export interface ICanvasElementOptions {
+	onReady?: (htmlElement: HTMLElement) => void;
+	debug?: boolean;
+}
+
+export interface ICanvasElementComponentProps
+	extends IBaseCanvasCardProps, IComponentLifecycleProps {}
+
+export class CanvasEntityElement {
+	draggableObject!: DraggableObject;
+	component!: React.FC<IBaseCanvasCardProps>;
+	node!: ReactRoot;
+	entity: CanvasEntityState;
+	props: IBaseCanvasCardProps;
+	initialized: boolean = false;
+
+	// Parent canvas service
+	project: EditorService;
+
+	constructor(project: EditorService, entity: CanvasEntityState) {
+		this.project = project;
+		this.entity = entity;
+		this.props = {
+			// @ts-ignore
+			disabled: this.entity.suggestion,
+			entity: this.entity,
+			canvasElement: this,
+			project: this.project
+		};
+	}
+
+	get ref() {
+		return this.node.ref;
+	}
+
+	get ready() {
+		return this.node.mounted;
+	}
+
+	get cardBody(): HTMLElement | null {
+		return (
+			this.node.ref?.querySelector('.canvas-draggable-card__body') || null
+		);
+	}
+
+	async init(
+		options: { debug?: boolean } = { debug: false }
+	): Promise<CanvasEntityElement> {
+		this.initialized = true;
+
+		if (options.debug) {
+			debugger;
+		}
+
+		if (this.project.destroyed) {
+			return this;
+		}
+
+		await this.render(options);
+
+		if (options.debug) {
+			debugger;
+		}
+
+		this.project.resolveConnections([this], options);
+
+		if (options.debug) {
+			debugger;
+		}
+
+		this.draggableObject.onUpdate((config) => {
+			if (config.selected) {
+				(config.element.firstChild as HTMLElement)?.classList.add(
+					'selected'
+				);
+			} else if (
+				!config.selected &&
+				(config.element.firstChild as HTMLElement)?.classList.contains(
+					'selected'
+				)
+			) {
+				(config.element.firstChild as HTMLElement)?.classList.remove(
+					'selected'
+				);
+			}
+
+			// Removing the menu if it is open
+			this.project.hideEntityCreationMenu();
+
+			// If the current entity being moved is an entry point type entity and it is collapsed,
+			// We need to move all the children entities with it
+			if (
+				ENTRY_POINT_TYPES.includes(this.entity.type) &&
+				(this.entity as GlobalEventState).collapsed
+			) {
+				// Move all the children entities by the same amount
+				const layout = this.project.resolveInitialChildrenPositions(
+					this.entity,
+					flattenRelatedCanvasElementsOnTheRight(this.entity),
+					null
+				);
+
+				const xOffset = config.coordinates.x - this.entity.x;
+				const yOffset = config.coordinates.y - this.entity.y;
+
+				layout.forEach((childEntity) => {
+					childEntity.metaSync(
+						{
+							x: childEntity.x + xOffset,
+							y: childEntity.y + yOffset
+						},
+						null
+					);
+				});
+			} else if (this.entity.type === EntityType.DefinitionEntity) {
+				const methods = (this.entity as DefinitionEntityState).methods;
+
+				methods.forEach((method) => {
+					if (method.collapsed) {
+						const layout =
+							this.project.resolveInitialChildrenPositions(
+								this.entity,
+								flattenRelatedCanvasElementsOnTheRight(method),
+								null
+							);
+
+						const xOffset = config.coordinates.x - this.entity.x;
+						const yOffset = config.coordinates.y - this.entity.y;
+
+						layout.forEach((childEntity) => {
+							childEntity.metaSync(
+								{
+									x: childEntity.x + xOffset,
+									y: childEntity.y + yOffset
+								},
+								null
+							);
+						});
+					}
+				});
+			}
+
+			// Update the entity's coordinates
+			// @ts-ignore
+			this.entity.metaSync(
+				{
+					x: config.coordinates.x,
+					y: config.coordinates.y
+				},
+				null
+			);
+
+			// @ts-ignore This recalculates the styling state of the connections
+			// this.node.component.disabledConnectionsNotInTest?.();
+
+			return config;
+		});
+
+		this.draggableObject.onBeforeUpdate((newConfig) => {
+			if (!!newConfig.overlaps.length) {
+				let hasHighlighted: boolean = false;
+
+				newConfig.overlaps.forEach((overlap) => {
+					// Find an overlap where there is a connection
+					if (overlap.altCoords?.connection) {
+						const canvasElement = this.project.getElement(
+							getEntityIdFromCanvasId(
+								overlap.altCoords.overlappingObject.id
+							)
+						);
+
+						if (!canvasElement) {
+							return newConfig;
+						}
+
+						const ownElement =
+							this.cardBody ||
+							this.ref ||
+							this.draggableObject.element;
+						const otherElement =
+							canvasElement.cardBody ||
+							canvasElement.ref ||
+							canvasElement.draggableObject.element;
+
+						highlighOverlappingElements(ownElement, otherElement);
+
+						hasHighlighted = true;
+					}
+				});
+
+				if (!hasHighlighted) {
+					return newConfig;
+				}
+
+				// Return the old config so the object doesn't move when it overlaps
+				return {
+					...newConfig,
+					coordinates: {
+						x:
+							newConfig.overlaps[0].altCoords
+								?.nextValidCoordinates.x ||
+							this.draggableObject.x,
+						y:
+							newConfig.overlaps[0].altCoords
+								?.nextValidCoordinates.y ||
+							this.draggableObject.y
+					}
+				};
+			}
+
+			// Do nothing
+			return newConfig;
+		});
+
+		this.draggableObject.onRestore(() => {
+			let actionName =
+				`restore-${this.entity.type}` as StateMutationAction;
+
+			const changeSet = this.project.logic.addChangeSet(
+				new ChangeSet(
+					this.project.logic,
+					ProjectState.sessionAuthor,
+					new Date().toISOString(),
+					this.entity,
+					false,
+					actionName
+				)
+			);
+
+			this.entity.restore({}, changeSet);
+
+			// Re-append to the canvas
+			this.project.canvas?.canvasElement.appendChild(
+				this.draggableObject.element
+			);
+
+			this.project.renderAndCloseChangeSet(changeSet);
+		});
+
+		this.draggableObject.onScrollToThis(() => {
+			// Highlight the element
+			const element =
+				this.cardBody || this.ref || this.draggableObject.element;
+			highlightElement(element);
+		});
+
+		this.draggableObject.onDisable(() => {
+			this.render();
+
+			// We enable the connections after the node update to avoid overriding any untracked DOM changes
+			this.project.disableAllConnections(this.draggableObject);
+		});
+
+		this.draggableObject.onEnable(() => {
+			this.render();
+
+			// We enable the connections after the node update to avoid overriding any untracked DOM changes
+			this.project.enableAllConnections(this.draggableObject);
+		});
+
+		this.draggableObject.onDoubleClick(() => {
+			if (!this.project.READ_ONLY) {
+				const typesWithoutDialogs = [
+					EntityType.ReturnStatement,
+					EntityType.BreakStatement,
+					EntityType.ContinueStatement
+				];
+
+				if (
+					typesWithoutDialogs.includes(this.entity.type as EntityType)
+				) {
+					// No dialog to open for these entities
+					return;
+				}
+
+				EditorService.navigate(
+					`${this.project.editorBasePath}/entity/${this.entity.type}/${this.entity.id}`
+				);
+			}
+		});
+
+		this.draggableObject.onBeforeDeleteConnection((connection, config) => {
+			let targetEntity: UserManagedEntityState | null = null;
+			let sourceEntity: UserManagedEntityState | null = null;
+
+			try {
+				sourceEntity = this.project.logic.get(
+					getEntityIdFromCanvasId(connection.startId)
+				) as UserManagedEntityState;
+
+				targetEntity = this.project.logic.get(
+					getEntityIdFromCanvasId(connection.endId)
+				) as UserManagedEntityState;
+			} catch (e) {
+				// Ignore errors parsing IDs
+			}
+
+			if (sourceEntity && targetEntity) {
+				const reasons = validateConnectionDeletion(
+					connection,
+					sourceEntity,
+					targetEntity,
+					this.project
+				);
+
+				if (reasons.length > 0) {
+					popupNotification({
+						color: 'warning',
+						text: reasons[0]
+					});
+					return { blockDelete: true };
+				}
+
+				debugger;
+
+				if (!config.batchDelete) {
+					// Remove the connection
+					const deleteConnectionChangeSet =
+						this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.DisconnectNodes
+							)
+						);
+
+					debugger;
+
+					disconnect(
+						sourceEntity,
+						targetEntity,
+						connection,
+						deleteConnectionChangeSet
+					);
+
+					debugger;
+
+					// Remove delete connection button
+					this.project.hideConnectionDeleteButtonElement();
+
+					debugger;
+
+					this.project.renderAndCloseChangeSet(
+						deleteConnectionChangeSet
+					);
+
+					return { skipTargetCheck: true };
+				}
+			}
+		});
+
+		return this;
+	}
+
+	async remove(removeOptions?: { quiet: boolean }): Promise<void> {
+		await this.node.unmount();
+
+		this.draggableObject.offBeforeDelete();
+		// this.draggableObject.offUpdate();
+		// this.draggableObject.offRestore();
+		// this.draggableObject.offScrollToThis();
+		// this.draggableObject.offDisable();
+		// this.draggableObject.offEnable();
+		// this.draggableObject.offBeforeUpdate();
+
+		this.project.canvas?.removeDraggableObject(
+			this.draggableObject,
+			removeOptions
+		);
+	}
+
+	async render(
+		options: { debug?: boolean } = { debug: false }
+	): Promise<CanvasEntityElement> {
+		if (options.debug) {
+			debugger;
+		}
+
+		if (this.project.destroyed) {
+			return this;
+		}
+
+		let parentEntryPoint: EntryPointEntityState | null = null;
+
+		const parent = getScopeOwner(this.entity, this.project.logic);
+
+		if (ENTRY_POINT_TYPES.includes(parent?.type as EntityType)) {
+			parentEntryPoint = parent as EntryPointEntityState;
+		} else if (parent?.type === EntityType.Loop) {
+			parentEntryPoint = parent.body;
+		}
+
+		if (!this.draggableObject) {
+			if (options.debug) {
+				debugger;
+			}
+
+			const domElement = document.createElement('div');
+
+			// Append to canvas element
+			this.project.canvas?.canvasElement.appendChild(domElement);
+
+			this.draggableObject = this.project.canvas?.draggable({
+				id: getCanvasEntityDraggableContainerDOMId(this.entity),
+				// Create temporary div
+				element: domElement,
+				coordinates: {
+					x: this.entity.x,
+					y: this.entity.y
+				},
+				// @ts-ignore because not all entities currently have the 'suggestion' property
+				disabled: this.entity.suggestion
+			});
+		}
+
+		if (
+			!!this.draggableObject &&
+			(!this.draggableObject?.element ||
+				!document.contains(this.draggableObject.element))
+		) {
+			if (options.debug) {
+				debugger;
+			}
+
+			const domElement = document.createElement('div');
+
+			this.project.canvas?.canvasElement.appendChild(domElement);
+
+			this.draggableObject.element = domElement;
+			this.draggableObject.setup();
+		}
+
+		if (options.debug) {
+			debugger;
+		}
+
+		let resolvedProps: IBaseCanvasCardProps;
+
+		switch (this.entity.type) {
+			case EntityType.DefinitionEntity:
+				this.component =
+					DefinitionEntityCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this
+						.props as IBaseCanvasCardProps<DefinitionEntityState>)
+				} as IBaseCanvasCardProps<DefinitionEntityState>;
+				break;
+			case EntityType.GlobalEvent: {
+				this.component = EventCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this.props as IBaseCanvasCardProps<GlobalEventState>)
+				} as IBaseCanvasCardProps<GlobalEventState>;
+				break;
+			}
+			case EntityType.Condition: {
+				this.component =
+					ConditionCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this.props as IBaseCanvasCardProps<ConditionState>)
+				} as IBaseCanvasCardProps<ConditionState>;
+				break;
+			}
+			case EntityType.Operation:
+			case EntityType.Search:
+			case EntityType.FunctionCall: {
+				this.component =
+					PassthroughEntityCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this
+						.props as IBaseCanvasCardProps<DraggablePassThroughCallableEntityState>)
+				} as IBaseCanvasCardProps<DraggablePassThroughCallableEntityState>;
+				break;
+			}
+			case EntityType.FunctionDeclaration: {
+				this.component =
+					FunctionDeclarationCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this
+						.props as IBaseCanvasCardProps<FunctionDeclarationState>)
+				} as IBaseCanvasCardProps<FunctionDeclarationState>;
+				break;
+			}
+			case EntityType.Loop: {
+				this.component = LoopCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this.props as IBaseCanvasCardProps<LoopState>)
+				} as IBaseCanvasCardProps<LoopState>;
+				break;
+			}
+			case EntityType.ReturnStatement:
+			case EntityType.BreakStatement:
+			case EntityType.ContinueStatement: {
+				this.component =
+					TerminationStatementCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this
+						.props as IBaseCanvasCardProps<TerminationEntityState>)
+				} as IBaseCanvasCardProps<TerminationEntityState>;
+				break;
+			}
+			case EntityType.VariableDeclaration:
+			case EntityType.VariableInstance:
+				this.component = VariableCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this.props as IBaseCanvasCardProps<VariableState>)
+				} as IBaseCanvasCardProps<VariableState>;
+				break;
+			default:
+				this.component =
+					DraggableEntityCard as React.FC<IBaseCanvasCardProps>;
+				resolvedProps = {
+					...(this
+						.props as IBaseCanvasCardProps<InstalledProjectState>)
+				} as IBaseCanvasCardProps<InstalledProjectState>;
+				break;
+		}
+
+		if (options.debug) {
+			debugger;
+		}
+
+		if (
+			!!this.draggableObject &&
+			!!document.contains(this.draggableObject.element)
+		) {
+			if (options.debug) {
+				debugger;
+			}
+
+			if (!this.node) {
+				if (options.debug) {
+					debugger;
+				}
+
+				this.node = createRoot('#' + this.draggableObject.id);
+			}
+
+			if (options.debug) {
+				debugger;
+			}
+
+			if (
+				!parentEntryPoint?.collapsed ||
+				parentEntryPoint?.id === this.entity.id
+			) {
+				await this.node.render(this.component, resolvedProps, null, {
+					debug: options.debug,
+					onError: (error) => {
+						Logger.log('Error handler worked: ', error);
+						this.project.events.emit('canvas-react-error', error);
+					}
+				});
+
+				this.draggableObject.update(
+					{
+						coordinates: {
+							x: this.entity.x,
+							y: this.entity.y
+						}
+					},
+					{ quiet: true, skipOverlapCheck: true }
+				);
+
+				// Recalculate canvas connections
+				this.draggableObject.updateConnections();
+
+				if (this.project.canvas?.disabled) {
+					this.project.disableAllConnections(this.draggableObject);
+				}
+			}
+		}
+
+		if (
+			this.draggableObject.x !== this.entity.x ||
+			this.draggableObject.y !== this.entity.y
+		) {
+			this.draggableObject.update(
+				{
+					coordinates: {
+						x: this.entity.x,
+						y: this.entity.y
+					}
+				},
+				{ quiet: true, skipOverlapCheck: true }
+			);
+		}
+
+		if (options.debug) {
+			debugger;
+		}
+
+		return this;
+	}
+
+	disableAllConnections() {
+		// Disable all the connections if the object is already marked as disabled for another reason
+		this.draggableObject.connections.forEach((connection) => {
+			if (!connection.disabled) {
+				connection.disable();
+				connection.element.classList.add('disabled');
+
+				if (connection.complementaryLineElement) {
+					connection.complementaryLineElement.classList.add(
+						'disabled'
+					);
+				}
+			}
+		});
+	}
+
+	enableAllConnections() {
+		// Enable all the connections if the object is already marked as disabled for another reason
+		this.draggableObject.connections.forEach((connection) => {
+			if (connection.disabled) {
+				connection.enable();
+				connection.element.classList.remove('disabled');
+
+				if (connection.complementaryLineElement) {
+					connection.complementaryLineElement.classList.remove(
+						'disabled'
+					);
+				}
+			}
+		});
+	}
+}
+
+export interface ICanvasMenuElementBaseProps {
+	connectedNodeType: ConnectionNodeType;
+	// Only the source entity or the target entity can be defined at the same time
+	connectedSource?:
+		| CallerEntityState
+		| ArgumentDeclarationState
+		| OutputMapState
+		| ValueDescriptorState
+		| VariableState;
+	connectedTarget?: ExecutableEntityState | InputMapState | VariableState;
+}
+
+export interface ICanvasMenuElementComponentProps
+	extends ICanvasMenuElementBaseProps, IComponentLifecycleProps {}
+
+export class CanvasMenuElement {
+	canvasObject!: CanvasObject;
+	component!: React.FC<ICreateEntityMenuProps>;
+	node!: ReactRoot;
+	coordinates: { x: number; y: number };
+	connectionOptions: IConnectionDrawingOptions | null = null;
+	props: ICanvasMenuElementBaseProps;
+
+	// Parent canvas service
+	project: EditorService;
+
+	constructor(
+		project: EditorService,
+		config: {
+			coordinates: { x: number; y: number };
+			connectionOptions: IConnectionDrawingOptions | null;
+		} = {
+			coordinates: { x: 0, y: 0 },
+			connectionOptions: null
+		}
+	) {
+		this.project = project;
+		this.coordinates = config.coordinates;
+		this.connectionOptions = config.connectionOptions;
+		this.props = {
+			connectedNodeType: config.connectionOptions?.nodeType,
+			connectedSource: config.connectionOptions?.source,
+			connectedTarget: config.connectionOptions?.target
+		};
+	}
+
+	get ref() {
+		return this.node.ref;
+	}
+
+	get ready() {
+		return this.node.mounted;
+	}
+
+	async init(): Promise<CanvasMenuElement> {
+		if (this.project.destroyed) {
+			return this;
+		}
+
+		await this.render();
+
+		this.canvasObject.onBeforeDelete(() => {
+			this.canvasObject.element.remove();
+		});
+
+		return this;
+	}
+
+	async remove(): Promise<void> {
+		await this.node.unmount();
+
+		this.canvasObject.offBeforeDelete();
+		// this.canvasObject.offUpdate();
+		// this.canvasObject.offRestore();
+
+		this.canvasObject.remove();
+	}
+
+	async addNewEntitiesToCanvasFromRootEntity(
+		root: CanvasEntityState,
+		changeSet: ChangeSet,
+		options: YieldOptions = {}
+	) {
+		const tracker = YieldTracker.from(options);
+
+		// @ts-ignore don't remove, the type calculation doesn't work and it says the intersection is to complex to render
+		root.metaSync(
+			{
+				x: this.coordinates.x,
+				y: this.coordinates.y
+			},
+			changeSet
+		);
+
+		this.project.canvasLayout.push(root);
+
+		const relatedEntitiesRight =
+			flattenRelatedCanvasElementsOnTheRight(root);
+		const otherEntitiesCreatedAsSideEffects: CanvasEntityState[] =
+			getTouchedCanvasEntitiesFromChangeSet(changeSet);
+
+		// If any entity in the 'other' entities list is not directly connected to the root entity,
+		// Add a notification to inform the user
+
+		const disconnectedTouched = otherEntitiesCreatedAsSideEffects.filter(
+			(entity) =>
+				!relatedEntitiesRight.some(
+					(related) => related.id === entity.id
+				) && entity.id !== root.id
+		);
+
+		const disconnectedAdded = disconnectedTouched.filter((entity) =>
+			changeSet?.hasAdded(entity.id)
+		);
+
+		if (!!disconnectedAdded.length) {
+			const firstEntity = disconnectedAdded[0];
+			const otherNumberOfEntities = disconnectedAdded.length - 1;
+
+			let suffix = '.';
+
+			if (otherNumberOfEntities > 0) {
+				suffix = `, alongside another ${otherNumberOfEntities} entities.`;
+			}
+
+			popupNotification({
+				text: `A ${
+					READABLE_ENTITY_TYPES[firstEntity.type].singular
+				} ${resolveEntityName(
+					firstEntity,
+					this.project.logic
+				)} was also automatically created${suffix}`
+			});
+		}
+
+		disconnectedAdded.forEach((ent, i) => {
+			// Given initial coordinates
+			ent.metaSync(
+				{
+					x: this.coordinates.x - (i + 1) * 500,
+					y: this.coordinates.y - (i + 1) * 500
+				},
+				changeSet
+			);
+		});
+
+		const positionedRelatedEntitiesRight =
+			this.project.resolveInitialChildrenPositions(
+				root,
+				relatedEntitiesRight,
+				changeSet
+			);
+
+		const allEntitiesUnfiltered = [
+			root,
+			...disconnectedTouched,
+			...positionedRelatedEntitiesRight
+		];
+
+		const allEntitiesToRender = (await filterOutDuplicateEntitiesAsync(
+			allEntitiesUnfiltered,
+			{ tracker }
+		)) as CanvasEntityState[];
+
+		const canvasEntitiesTouched: CanvasEntityState[] =
+			getTouchedCanvasEntitiesFromChangeSet(changeSet);
+
+		const entitiesRemoved: UserManagedEntityState[] = Object.values(
+			changeSet.removed
+		);
+
+		if (changeSet.open) {
+			for (const entity of canvasEntitiesTouched) {
+				// This is to re-calculate missing entities, and/or add suggestions
+				entity.afterAllChildrenInitialized(changeSet);
+
+				await tracker.tick();
+			}
+		}
+
+		const oldProjectErrors = await this.project.getAllProjectLogicErrors({
+			tracker
+		});
+		await this.project.validateProjectState({ tracker });
+		const newProjectErrors = await this.project.getAllProjectLogicErrors({
+			tracker
+		});
+
+		this.project.emit('before-change-set-close', changeSet);
+
+		const uniqueDeletedEntities =
+			filterOutNonCanvasEntities(entitiesRemoved);
+
+		// Remove any `oldProjectErrors` no longer present in the `newProjectErrors`
+		const errorsToRemove = oldProjectErrors.filter(
+			(error) =>
+				!newProjectErrors.some((newError) => newError.id === error.id)
+		);
+
+		for (const error of errorsToRemove) {
+			// Remove errors from the notification store
+			notifications.remove(
+				this.project.PROJECT_NOTIFICATIONS_CHANNEL,
+				error.id
+			);
+
+			this.project.emit(error.entity.id, {});
+
+			await tracker.tick();
+		}
+
+		await Promise.all([
+			this.project.render(allEntitiesToRender, {
+				debug: false
+			}),
+			uniqueDeletedEntities.map(async (ent) => {
+				this.project.removeValueByOwnerId(ent.id);
+				await this.project.getElement(ent.id)?.remove({ quiet: true });
+				delete this.project.elements[ent.id];
+			})
+		]);
+
+		await this.project.test?.validateAsync({ tracker });
+
+		await this.project.validateProjectState({ tracker });
+
+		if (EditorService.SAVING_ENABLED && !this.project.READ_ONLY) {
+			changeSet?.close({ persistType: 'parallel' });
+		}
+		changeSet = null;
+	}
+
+	async render(): Promise<CanvasMenuElement> {
+		if (this.project.destroyed) {
+			return this;
+		}
+
+		if (!this.canvasObject) {
+			const domElement = document.createElement('div');
+
+			// Append to canvas element
+			this.project.canvas?.canvasElement.appendChild(domElement);
+
+			this.canvasObject = this.project.canvas?.object({
+				id: 'create-entity-menu',
+				// Create temporary div
+				element: domElement,
+				deletable: true,
+				selectable: false,
+				coordinates: {
+					x: this.coordinates.x,
+					y: this.coordinates.y
+				}
+			});
+		}
+
+		if (
+			!this.canvasObject.element ||
+			!document.contains(this.canvasObject.element)
+		) {
+			const domElement = document.createElement('div');
+
+			this.project.canvas?.canvasElement.appendChild(domElement);
+
+			this.canvasObject.element = domElement;
+			this.canvasObject.setup();
+		}
+
+		this.component = CreateEntityMenu;
+
+		const resolvedProps: ICreateEntityMenuProps = {
+			canvasObject: this.canvasObject,
+			...(this.props as ICanvasMenuElementBaseProps),
+			project: this.project,
+			onCreateBaseEntity: async (entityType) => {
+				// Based on the entity type, navigate the user to the correct entity creation dialog
+				switch (entityType) {
+					case EntityType.DefinitionEntity: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewDef
+							)
+						);
+
+						const newEntityTransfer =
+							DefinitionEntityState.new(changeSet);
+						newEntityTransfer.name = findNextAvailableName(
+							'New definition',
+							this.project.logic.entities
+						);
+
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent =
+							this.project.logic.toReference();
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as DefinitionEntityState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.FunctionDeclaration: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewFuncDecl
+							)
+						);
+
+						const newEntityTransfer =
+							FunctionDeclarationState.new(changeSet);
+						newEntityTransfer.name = findNextAvailableName(
+							'Custom trigger',
+							this.project.logic.functions
+						);
+
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent =
+							this.project.logic.toReference();
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as FunctionDeclarationState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addEntryCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.VariableDeclaration: {
+						if (
+							!!this.connectionOptions?.source &&
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.PropertyOut
+						) {
+							const changeSet = this.project.logic.addChangeSet(
+								new ChangeSet(
+									this.project.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									this.project.logic,
+									false,
+									StateMutationAction.CreateNewVarDecl
+								)
+							);
+
+							const newVariableDeclarationInstance =
+								createVariableDeclarationFromWritter(
+									this.connectionOptions
+										.source as ValueWritingEntityState,
+									this.connectionOptions,
+									this.project.logic,
+									changeSet
+								);
+
+							await this.addNewEntitiesToCanvasFromRootEntity(
+								newVariableDeclarationInstance,
+								changeSet
+							);
+						} else {
+							const changeSet = this.project.logic.addChangeSet(
+								new ChangeSet(
+									this.project.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									this.project.logic,
+									false,
+									StateMutationAction.CreateNewVarDecl
+								)
+							);
+
+							const newEntityTransfer =
+								VariableDeclarationState.new(changeSet);
+							newEntityTransfer.name = findNextAvailableName(
+								'Variable',
+								this.project.logic.getVariableDeclarations()
+							);
+
+							newEntityTransfer.x = this.coordinates.x;
+							newEntityTransfer.y = this.coordinates.y;
+							newEntityTransfer.parent =
+								this.project.logic.toReference();
+
+							const newInstance = createStateFromTypeAndSubscribe(
+								newEntityTransfer,
+								this.project.logic
+							) as VariableDeclarationState;
+
+							newInstance.hydrateAncestors();
+							newInstance.addSelfToProject(changeSet);
+
+							changeSet.add(
+								newInstance,
+								ChangeSetEntityChangeType.Added
+							);
+
+							const builtInPrimitiveStringEntity =
+								this.project.logic.getBuiltIn(
+									BUILT_IN_BASE_ENTITY_IDS['primitive-entity']
+										.string.id
+								) as PrimitiveEntityState;
+
+							// Add 'string' data-type as default
+							const dataTypeTransfer =
+								DataTypeState.new(changeSet);
+							dataTypeTransfer.parent = newInstance.toReference();
+							dataTypeTransfer.entity =
+								(builtInPrimitiveStringEntity?.toJSON() as IPrimitiveEntityTransfer) ||
+								null;
+
+							const dataTypeInstance =
+								createStateFromTypeAndSubscribe(
+									dataTypeTransfer,
+									this.project.logic
+								) as DataTypeState;
+
+							dataTypeInstance.hydrateAncestors();
+							dataTypeInstance.addSelfToProject(changeSet);
+
+							changeSet.add(
+								dataTypeInstance,
+								ChangeSetEntityChangeType.Added
+							);
+
+							dataTypeInstance.initChildren(changeSet);
+
+							if (
+								this.connectionOptions?.nodeType ===
+									ConnectionNodeType.CalledBy &&
+								!!this.connectionOptions?.target
+							) {
+								newInstance.addSuccessCall(
+									this.connectionOptions
+										.target as CallableEntityState,
+									changeSet,
+									// To recalculate its scope automatically
+									true
+								);
+								(
+									this.connectionOptions
+										.target as CallableEntityState
+								).addSuccessCaller(
+									newInstance,
+									changeSet,
+									// To recalculate its scope automatically
+									true
+								);
+							} else if (
+								this.connectionOptions?.nodeType ===
+									ConnectionNodeType.PropertyIn &&
+								!!this.connectionOptions?.target
+							) {
+								newInstance.addValueReader(
+									this.connectionOptions
+										.target as ValueReadingEntityState,
+									changeSet
+								);
+							} else if (
+								this.connectionOptions?.nodeType ===
+									ConnectionNodeType.ErrorCaller &&
+								!!this.connectionOptions?.source
+							) {
+								newInstance.addErrorCaller(
+									this.connectionOptions
+										.source as PassThroughCallableEntityState,
+									changeSet,
+									// To recalculate its scope automatically
+									true
+								);
+								(
+									this.connectionOptions
+										.source as PassThroughCallableEntityState
+								).addErrorCall(newInstance, changeSet, true);
+							} else if (
+								this.connectionOptions?.nodeType ===
+									ConnectionNodeType.SuccessCaller &&
+								!!this.connectionOptions?.source
+							) {
+								newInstance.addSuccessCaller(
+									this.connectionOptions
+										.source as PassThroughCallableEntityState,
+									changeSet,
+									// To recalculate its scope automatically
+									true
+								);
+								(
+									this.connectionOptions
+										.source as PassThroughCallableEntityState
+								).addSuccessCall(newInstance, changeSet);
+							} else if (
+								this.connectionOptions?.nodeType ===
+									ConnectionNodeType.EntryPointCaller &&
+								!!this.connectionOptions?.source
+							) {
+								newInstance.addEntryCaller(
+									this.connectionOptions
+										.source as EntryPointEntityState,
+									changeSet,
+									// To recalculate its scope automatically
+									true
+								);
+								(
+									this.connectionOptions
+										.source as EntryPointEntityState
+								).addCall(newInstance, changeSet);
+							}
+
+							EditorService.navigate(
+								`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+							);
+
+							await this.addNewEntitiesToCanvasFromRootEntity(
+								newInstance,
+								changeSet
+							);
+						}
+						break;
+					}
+					case EntityType.GlobalEvent: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewGlobalEvent
+							)
+						);
+
+						const newEntityTransfer =
+							GlobalEventState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent =
+							this.project.logic.toReference();
+
+						// Global events must always point to an base built-in action-descriptor implementation
+						// The menu disabled creating new global events when all the available ones have been implemented
+						// So here we pick the first action-descriptor for global events that hasn't been implemented yet
+						const actionDescriptor =
+							this.project.logic.globalEventActionDescriptors.find(
+								(actionDescriptor) =>
+									!this.project.logic.events.find(
+										(event) =>
+											event.implements?.id ===
+											actionDescriptor.id
+									)
+							);
+
+						if (!actionDescriptor) {
+							Logger.error(
+								'Cannot create a new global event because all the available action descriptors have been implemented'
+							);
+							popupNotification({
+								text: 'Cannot create a new global event because all the available global event types have been implemented',
+								color: 'error'
+							});
+							return;
+						}
+
+						newEntityTransfer.implements =
+							actionDescriptor.toJSON() as IActionDescriptorTransfer;
+						newEntityTransfer.name =
+							actionDescriptor.name as GlobalEventNames;
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as GlobalEventState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addEntryCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.Loop: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewLoop
+							)
+						);
+
+						const newEntityTransfer = LoopState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as EntryPointEntityState
+						).toReference();
+
+						// We select the first loop declaration available for now
+						// The user can change it later
+						const actionDescriptor =
+							this.project.logic.loopDeclarations[0];
+
+						newEntityTransfer.declaration =
+							actionDescriptor.toJSON() as IActionDescriptorTransfer;
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as LoopState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addSuccessCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addSuccessCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.Search: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewSearch
+							)
+						);
+
+						const newEntityTransfer = SearchState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+
+						newEntityTransfer.name = findNextAvailableName(
+							'Search',
+							this.project.logic.getSearches()
+						);
+
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as EntryPointEntityState
+						).toReference();
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as SearchState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addSuccessCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addSuccessCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.Operation: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewOperation
+							)
+						);
+
+						const newEntityTransfer = OperationState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as EntryPointEntityState
+						).toReference();
+
+						// We select the first operation declaration available for now
+						// The user can change it later
+						const actionDescriptor =
+							this.project.logic.operationDeclarations[0];
+
+						newEntityTransfer.declaration =
+							actionDescriptor.toJSON() as IActionDescriptorTransfer;
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as OperationState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addSuccessCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addSuccessCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.FunctionCall: {
+						// We select the first operation declaration available for now
+						// The user can change it later
+						const functionDeclaration =
+							this.project.logic.functions[0];
+
+						if (!functionDeclaration) {
+							popupNotification({
+								text: 'Cannot create a new trigger execution because there are no triggers',
+								color: 'error'
+							});
+							return;
+						}
+
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewFuncCall
+							)
+						);
+
+						const newEntityTransfer =
+							FunctionCallState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as EntryPointEntityState
+						).toReference();
+
+						newEntityTransfer.declaration =
+							functionDeclaration.toJSON() as IFunctionDeclarationTransfer;
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as FunctionCallState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addSuccessCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addSuccessCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.Condition: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewCondition
+							)
+						);
+
+						const newEntityTransfer = ConditionState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as EntryPointEntityState
+						).toReference();
+
+						// We select the first condition declaration available for now
+						// The user can change it later
+						const actionDescriptor =
+							this.project.logic.conditionDeclarations[0];
+
+						newEntityTransfer.declaration =
+							actionDescriptor.toJSON() as IActionDescriptorTransfer;
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as ConditionState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.CalledBy &&
+							!!this.connectionOptions?.target
+						) {
+							newInstance.addSuccessCall(
+								this.connectionOptions
+									.target as CallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.target as CallableEntityState
+							).addSuccessCaller(
+								newInstance,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						EditorService.navigate(
+							`${this.project.editorBasePath}/entity/${entityType}/${newInstance.id}`
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.ReturnStatement: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewReturnStmt
+							)
+						);
+
+						const newEntityTransfer =
+							ReturnStatementState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							getFirstNonLoopScopeOwner(
+								this.connectionOptions
+									?.source as EntryPointEntityState,
+								this.project.logic
+							) as EntryPointEntityState
+						).toReference();
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as ReturnStatementState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.BreakStatement: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewBreakStmt
+							)
+						);
+
+						const newEntityTransfer =
+							BreakStatementState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as LoopState
+						).toReference();
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as BreakStatementState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+					case EntityType.ContinueStatement: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewContinueStmt
+							)
+						);
+
+						const newEntityTransfer =
+							ContinueStatementState.new(changeSet);
+						newEntityTransfer.x = this.coordinates.x;
+						newEntityTransfer.y = this.coordinates.y;
+						newEntityTransfer.parent = (
+							resolveNewParentFromConnectionsScopeOwner(
+								this.project.logic,
+								this.props.connectedSource,
+								this.props.connectedTarget
+							) as LoopState
+						).toReference();
+
+						const newInstance = createStateFromTypeAndSubscribe(
+							newEntityTransfer,
+							this.project.logic
+						) as ContinueStatementState;
+
+						newInstance.hydrateAncestors();
+						newInstance.addSelfToProject(changeSet);
+
+						changeSet.add(
+							newInstance,
+							ChangeSetEntityChangeType.Added
+						);
+
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(newInstance, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							newInstance.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(newInstance, changeSet);
+						}
+
+						newInstance.afterAllChildrenInitialized(changeSet);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newInstance,
+							changeSet
+						);
+
+						break;
+					}
+				}
+
+				// Close menu
+				this.project.hideEntityCreationMenu();
+			},
+			onCreateFromSpecificEntity: async (from, event) => {
+				const currentTime = new Date().toISOString();
+
+				// Based on the entity type, navigate the user to the correct entity creation dialog
+				switch (from.type) {
+					// case EntityType.DefinitionEntity: {
+					// 	const changeSet = this.project.logic.addChangeSet(
+					// 		new ChangeSet(
+					// 			this.project.logic,
+					// 			ProjectState.sessionAuthor,
+					// 			currentTime,
+					// 			this.project.logic
+					// 		  false,
+					// 			StateMutationAction.ExtendExistingDefWithNew,
+					// 		)
+					// 	);
+
+					// 	EditorService.navigate(
+					// 		`${this.project.editorBasePath}/entity/${from}/new?${
+					// 			from.abstract ? 'implements' : 'extends'
+					// 		}=${from.id}`
+					// 	);
+					// 	break;
+					// }
+					case EntityType.BuiltInBaseEntity: {
+						let actionName =
+							StateMutationAction.ImplementBuiltInFunctionalityAsDef;
+
+						if (from.name === BaseEntityNames.HTTP_ENDPOINT) {
+							actionName =
+								StateMutationAction.ImplementNewHTTPEndpoint;
+						} else if (from.name === BaseEntityNames.CRON_JOB) {
+							actionName =
+								StateMutationAction.ImplementNewScheduledTrigger;
+						} else if (
+							from.name === BaseEntityNames.PERSISTED_ENTITY
+						) {
+							actionName =
+								StateMutationAction.ImplementNewPersistedEntity;
+						} else if (
+							from.name === BaseEntityNames.SQL_ROW_TRANSFORMER
+						) {
+							actionName =
+								StateMutationAction.AddedNewRowTransformer;
+						} else if (
+							from.name ===
+							BaseEntityNames.SQL_SSL_CONNECTION_CONFIG
+						) {
+							actionName =
+								StateMutationAction.AddedNewSSLConnectionConfig;
+						} else if (
+							from.name ===
+							BaseEntityNames.SQL_ROOT_CONNECTION_CONFIG
+						) {
+							actionName =
+								StateMutationAction.AddedSQLConnectionConfig;
+						} else if (
+							from.name ===
+							BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedNewExternalAccountConnection;
+						} else if (
+							from.name === BaseEntityNames.GOOGLE_AUTH_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedGoogleConnection;
+						} else if (
+							from.name === BaseEntityNames.SLACK_AUTH_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedSlackConnection;
+						} else if (
+							from.name ===
+							BaseEntityNames.GOOGLE_DRIVE_AUTH_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedGoogleDriveConnection;
+						} else if (
+							from.name ===
+							BaseEntityNames.GOOGLE_SHEET_AUTH_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedGoogleSheetsConnection;
+						} else if (
+							from.name ===
+							BaseEntityNames.GOOGLE_SLIDES_AUTH_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedGoogleSlidesConnection;
+						} else if (
+							from.name ===
+							BaseEntityNames.GOOGLE_MAIL_AUTH_CONNECTION
+						) {
+							actionName =
+								StateMutationAction.AddedGoogleMailConnection;
+						}
+
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								currentTime,
+								this.project.logic,
+								false,
+								actionName
+							)
+						);
+
+						// Create a new function call of this function declaration at this coordinates
+						const newDefinition =
+							createDefinitionEntityFromBuiltInBaseEntity(
+								from,
+								this.connectionOptions,
+								this.project.logic,
+								changeSet
+							);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newDefinition,
+							changeSet
+						);
+						break;
+					}
+					case EntityType.FunctionDeclaration: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								currentTime,
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewFuncCall
+							)
+						);
+
+						// Create a new function call of this function declaration at this coordinates
+						const newCall =
+							createFunctionCallFromFunctionDeclaration(
+								from,
+								this.connectionOptions,
+								this.project.logic,
+								changeSet
+							);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newCall,
+							changeSet
+						);
+						break;
+					}
+					case EntityType.VariableDeclaration: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								currentTime,
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewVarInst
+							)
+						);
+
+						const newVariableInstance =
+							createVariableInstanceFromDeclaration(
+								from,
+								this.connectionOptions,
+								this.project.logic,
+								changeSet
+							);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newVariableInstance,
+							changeSet
+						);
+						break;
+					}
+					case EntityType.InternalCall: {
+						const changeSet = this.project.logic.addChangeSet(
+							new ChangeSet(
+								this.project.logic,
+								ProjectState.sessionAuthor,
+								currentTime,
+								this.project.logic,
+								false,
+								StateMutationAction.CreateNewInternalCall
+							)
+						);
+
+						const declaration = getDeclaration(from.parent);
+
+						// We create a new variable instance of the variable declaration that owns this internal call
+						// At this coordinates
+						// We then connect the new internal call to the connected source and target
+						// Then add the full variable instance to the canvas
+
+						const newVariableInstance =
+							createVariableInstanceFromDeclaration(
+								declaration,
+								null,
+								this.project.logic,
+								changeSet
+							);
+
+						const counterPartCall =
+							newVariableInstance.internalCalls.find(
+								(internalCall) =>
+									internalCall.declaration.id ===
+									from.declaration.id
+							) as InternalCallState;
+
+						// Connect to caller
+						if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.ErrorCaller &&
+							!!this.connectionOptions?.source
+						) {
+							counterPartCall.addErrorCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addErrorCall(counterPartCall, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.SuccessCaller &&
+							!!this.connectionOptions?.source
+						) {
+							counterPartCall.addSuccessCaller(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as PassThroughCallableEntityState
+							).addSuccessCall(counterPartCall, changeSet);
+						} else if (
+							this.connectionOptions?.nodeType ===
+								ConnectionNodeType.EntryPointCaller &&
+							!!this.connectionOptions?.source
+						) {
+							counterPartCall.addEntryCaller(
+								this.connectionOptions
+									.source as EntryPointEntityState,
+								changeSet,
+								// To recalculate its scope automatically
+								true
+							);
+							(
+								this.connectionOptions
+									.source as EntryPointEntityState
+							).addCall(counterPartCall, changeSet);
+						}
+
+						let counterPartEntity: ExecutableEntityState | null =
+							null;
+
+						if (
+							[
+								ConnectionNodeType.ErrorCaller,
+								ConnectionNodeType.SuccessCaller,
+								ConnectionNodeType.EntryPointCaller
+							].includes(this.connectionOptions?.nodeType)
+						) {
+							counterPartEntity = this.connectionOptions
+								.source as ExecutableEntityState;
+						} else if (
+							this.connectionOptions?.nodeType ===
+							ConnectionNodeType.CalledBy
+						) {
+							counterPartEntity = this.connectionOptions
+								.target as ExecutableEntityState;
+						}
+
+						const connectedEntityScopeOwner = !!counterPartEntity
+							? getScopeOwner(
+									counterPartEntity,
+									this.project.logic
+								)
+							: this.project.logic;
+
+						newVariableInstance.setParent(
+							connectedEntityScopeOwner,
+							changeSet
+						);
+
+						await this.addNewEntitiesToCanvasFromRootEntity(
+							newVariableInstance,
+							changeSet
+						);
+						break;
+					}
+					case EntityType.ActionDescriptor: {
+						const type =
+							mapActionDescriptorToTypeItRepresents(from);
+
+						switch (type) {
+							case EntityType.GlobalEvent: {
+								let actionName =
+									StateMutationAction.CreateNewGlobalEvent;
+
+								if (
+									from.name ===
+									GlobalEventNames.PROJECT_PUBLICATION_COMPLETED
+								) {
+									actionName =
+										StateMutationAction.CreateNewProjectPublicationCompletedEvent;
+								}
+
+								const changeSet =
+									this.project.logic.addChangeSet(
+										new ChangeSet(
+											this.project.logic,
+											ProjectState.sessionAuthor,
+											currentTime,
+											this.project.logic,
+											false,
+											actionName
+										)
+									);
+
+								const newGlobalEvent =
+									createGlobalEventFromActionDescriptor(
+										from,
+										this.connectionOptions,
+										this.project.logic,
+										changeSet
+									);
+
+								await this.addNewEntitiesToCanvasFromRootEntity(
+									newGlobalEvent,
+									changeSet
+								);
+								break;
+							}
+							case EntityType.Loop: {
+								let actionName =
+									StateMutationAction.CreateNewLoop;
+
+								if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.loop[
+										'counted-loop'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewCountedLoop;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.loop['list-loop']
+										?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewListLoop;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.loop?.[
+										'manual-flow-loop'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewManualFlowLoop;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.loop?.[
+										'object-keys-loop'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewObjectKeysLoop;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.loop?.[
+										'object-values-loop'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewObjectValuesLoop;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.loop?.[
+										'string-loop'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewStringLoop;
+								}
+
+								const changeSet =
+									this.project.logic.addChangeSet(
+										new ChangeSet(
+											this.project.logic,
+											ProjectState.sessionAuthor,
+											currentTime,
+											this.project.logic,
+											false,
+											actionName
+										)
+									);
+
+								const newLoop = createLoopFromActionDescriptor(
+									from,
+									this.connectionOptions,
+									this.project.logic,
+									changeSet
+								);
+
+								await this.addNewEntitiesToCanvasFromRootEntity(
+									newLoop,
+									changeSet
+								);
+								break;
+							}
+							case EntityType.Condition: {
+								let actionName =
+									StateMutationAction.CreateNewCondition;
+
+								if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.condition[
+										'condition-boolean-is-false'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewIsFalseCondition;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.condition[
+										'condition-boolean-is-true'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewIsTrueCondition;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.condition[
+										'condition-group-and'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewAndCondition;
+								} else if (
+									from.id ===
+									BUILT_IN_BASE_ENTITY_IDS.condition[
+										'condition-group-or'
+									]?.id
+								) {
+									actionName =
+										StateMutationAction.CreateNewOrCondition;
+								}
+
+								const changeSet =
+									this.project.logic.addChangeSet(
+										new ChangeSet(
+											this.project.logic,
+											ProjectState.sessionAuthor,
+											currentTime,
+											this.project.logic,
+											false,
+											actionName
+										)
+									);
+
+								const newCondition =
+									createConditionFromActionDescriptor(
+										from,
+										this.connectionOptions,
+										this.project.logic,
+										changeSet
+									);
+
+								await this.addNewEntitiesToCanvasFromRootEntity(
+									newCondition,
+									changeSet
+								);
+								break;
+							}
+							case EntityType.Operation: {
+								let actionName =
+									StateMutationAction.CreateNewOperation;
+
+								try {
+									const readableName = resolveEntityName(
+										from,
+										this.project.logic
+									);
+
+									const kebabCaseName =
+										toKebabCase(readableName);
+
+									actionName =
+										`create-new-${kebabCaseName}-operation` as StateMutationAction;
+								} catch (error) {
+									// Do nothing
+								}
+
+								const changeSet =
+									this.project.logic.addChangeSet(
+										new ChangeSet(
+											this.project.logic,
+											ProjectState.sessionAuthor,
+											currentTime,
+											this.project.logic,
+											false,
+											actionName
+										)
+									);
+
+								const newOperation =
+									createOperationFromActionDescriptor(
+										from,
+										this.connectionOptions,
+										this.project.logic,
+										changeSet
+									);
+
+								await this.addNewEntitiesToCanvasFromRootEntity(
+									newOperation,
+									changeSet
+								);
+								break;
+							}
+							default: {
+								Logger.error(
+									`Cannot create entity from action descriptor of type ${type}`
+								);
+							}
+						}
+					}
+				}
+
+				// Close menu
+				this.project.hideEntityCreationMenu();
+			}
+		};
+
+		if (!!document.contains(this.canvasObject.element)) {
+			if (!this.node) {
+				this.node = createRoot('#' + this.canvasObject.id);
+			}
+
+			await this.node.render(this.component, resolvedProps, null, {
+				onError: (error) => {
+					Logger.log('Error handler worked: ', error);
+					this.project.events.emit('canvas-react-error', error);
+				}
+			});
+
+			// Recalculate canvas connections
+			this.canvasObject.updateConnections();
+
+			if (this.project.canvas?.disabled) {
+				this.project.disableAllConnections(this.canvasObject);
+			}
+		}
+
+		return this;
+	}
+}