@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/termination-statement/TerminationStatementCard.tsx

@@ -0,0 +1,1543 @@
+import React, {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState
+} from 'react';
+import parse from 'style-to-object';
+import '../draggable-entity-card.css';
+import './termination-statement-card.css';
+import {
+	getCanvasEntityDOMId,
+	resolveEntityColorClass,
+	getCardGradientStatement,
+	fromDisabledReasonsToCardState,
+	safeResolveEntityName,
+	entityDisabledReasonToShortReadableError
+} from '../../../services/editor/ui';
+import Button from '../../../lib/button/Button';
+import { Canvas } from '../../../lib/canvas';
+import {
+	BreakStatementState,
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	ContinueStatementState,
+	createStateFromTypeAndSubscribe,
+	EntityType,
+	FunctionDeclarationState,
+	ProjectState,
+	InputMapState,
+	ReturnStatementState,
+	removeDisabledReasons,
+	CanvasEntityConnectionDisabledReason,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	CanvasEntityTestingDisabledReason,
+	ALL_CONNECTION_DISABLED_REASONS,
+	addDisabledReasons,
+	READABLE_ENTITY_TYPES,
+	InputMapParentChildRelation,
+	lowercaseFirstLetter,
+	findNextAvailableName,
+	PropertyState,
+	IPropertyTransfer,
+	DataTypeState,
+	DefinitionEntityState,
+	TerminationInputMapState,
+	resolveCardSubheader,
+	BUILT_IN_BASE_ENTITY_IDS,
+	PrimitiveEntityState,
+	IPrimitiveEntityTransfer,
+	GlobalEventState,
+	StateMutationAction,
+	ValueWritingEntityState,
+	getParentCallerEntity,
+	flattenCallersWithCallType
+} from '@elyx-code/project-logic-tree';
+import InputMapProperty from '../InputMapProperty';
+import CanvasPopup, {
+	useCanvasPopup
+} from '../../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../../lib/dropdown/CanvasDropdownMenuCard';
+import ReturnedError from '../ReturnedError';
+import LogicErrorIconMenu from '../logic-error/LogicErrorIconMenu';
+import NewCardInputButton from '../new-card-input-button/NewCardInputButton';
+import { ICanvasElementComponentProps } from '../../../services/editor/CanvasElement';
+import TestEntityButton from '../TestEntityButton';
+import { ConnectionNodeType, EditorService } from '../../../services/editor';
+import MainValueInput from '../MainValueInput';
+import DynamicValueEntry from '../../dynamic-value/DynamicValueEntry';
+import DataTypeIcon from '../DataTypeIcon';
+import EntityLockedIconMenu from '../entity-locked-icon/EntityLockedIcon';
+import { popupNotification } from '../../../popup-notification';
+
+interface ITerminationStatementCardProps extends ICanvasElementComponentProps {
+	entity: ReturnStatementState | ContinueStatementState | BreakStatementState;
+}
+
+const TerminationStatementCard = (props: ITerminationStatementCardProps) => {
+	const entity = props.entity;
+	const rootElementRef = useRef(null);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		if (!!element && document.contains(element)) {
+			props.onMount?.(element);
+		}
+
+		// When the component is unmounted
+		return () => {
+			props.onUnmount?.();
+		};
+	}, []);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+
+		props.onUpdate?.(element);
+	});
+
+	useLayoutEffect(() => {
+		props.onBeforeUpdate?.();
+	}, []);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const [disabledReasons, setDisabledReasons] = useState<
+		CanvasEntityDisabledReason[]
+	>([]);
+
+	const disableCanAddErrorOutputReasons: string[] = (() => {
+		const newDisabledReasons: string[] = [];
+
+		if (!!props.entity.throws) {
+			newDisabledReasons.push('An error output already exists');
+		}
+
+		const followsImplementationTemplate =
+			props.entity.parent.type === EntityType.FunctionDeclaration &&
+			!!(props.entity.parent as FunctionDeclarationState).implements;
+
+		const hasErrorDescriptor = !!(
+			(props.entity.parent as FunctionDeclarationState).implements
+				?.error || []
+		);
+
+		if (!!followsImplementationTemplate && !hasErrorDescriptor) {
+			newDisabledReasons.push(
+				'The parent trigger implements an action template that does not have an error output'
+			);
+		}
+
+		return newDisabledReasons;
+	})();
+
+	const canAddErrorOutput = !disableCanAddErrorOutputReasons.length;
+
+	const disableDeleteReasons: string[] = (() => {
+		const newDisabledReasons: string[] = [];
+
+		// if (
+		// 	entity.parent.type === EntityType.FunctionDeclaration &&
+		// 	entity.parent.implements &&
+		// 	!!entity.parent.implements.outputs.length &&
+		// 	entity.parent.returnStatements.length === 1
+		// ) {
+		// 	newDisabledReasons.push(
+		// 		'It is the last termination statement of a trigger that has required outputs'
+		// 	);
+		// }
+
+		return newDisabledReasons;
+	})();
+
+	const disableDelete = !!disableDeleteReasons.length;
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-small-entity-card-menu-button-' +
+					props.entity.id +
+					'--popup--body'
+				}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.entity.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: disableDelete,
+							tooltip: disableDelete
+								? `Cannot delete because: ${disableDeleteReasons
+										.map((r) => lowercaseFirstLetter(r))
+										.join(', and ')}`
+								: 'Forever delete this element',
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'--card--' +
+								props.entity.id +
+								'--delete'
+						},
+						...(props.entity.type === EntityType.ReturnStatement
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											const changeSet =
+												props.project.logic.addChangeSet(
+													new ChangeSet(
+														props.project.logic,
+														ProjectState.sessionAuthor,
+														new Date().toISOString(),
+														props.entity,
+														false,
+														StateMutationAction.AddThrownError
+													)
+												);
+
+											// Remove all outputs
+											[...props.entity.outputs].forEach(
+												(output) => {
+													output.remove(
+														{
+															ignoreUpstream: false
+														},
+														changeSet
+													);
+												}
+											);
+
+											props.entity.readsValue?.removeValueReader(
+												props.entity,
+												changeSet
+											);
+											props.entity.setValueWriter(
+												null,
+												changeSet
+											);
+
+											const newInputMapTransfer =
+												InputMapState.new(changeSet);
+											newInputMapTransfer.parent =
+												props.entity.toReference();
+											newInputMapTransfer.name = 'Error';
+											newInputMapTransfer.parentRelationType =
+												InputMapParentChildRelation.Error;
+
+											const newInputMapInstance =
+												createStateFromTypeAndSubscribe(
+													newInputMapTransfer,
+													props.project.logic
+												) as InputMapState;
+
+											newInputMapInstance.hydrateAncestors();
+
+											changeSet.add(
+												newInputMapInstance,
+												ChangeSetEntityChangeType.Added
+											);
+
+											newInputMapInstance.addSelfToProject(
+												changeSet
+											);
+											newInputMapInstance.afterAllChildrenInitialized(
+												changeSet
+											);
+
+											props.entity.afterAllChildrenInitialized(
+												changeSet
+											);
+
+											EditorService.navigate(
+												`${props.project?.editorBasePath}/entity/${EntityType.InputMap}/${newInputMapInstance.id}`
+											);
+
+											props.project.renderAndCloseChangeSet(
+												changeSet
+											);
+
+											(
+												(
+													entity.parent as FunctionDeclarationState
+												).returnStatements || []
+											).forEach((ent) =>
+												props.project.emit(ent.id, {})
+											);
+										},
+										label: 'New error output',
+										iconEnd: 'fa-solid fa-plus',
+										classes: [
+											'canvas-dropdown-menu-card-option__new-thrown-error'
+										],
+										disabled: !canAddErrorOutput,
+										tooltip: canAddErrorOutput
+											? 'Add new thrown error output. Will remove all other outputs'
+											: `Cannot add error output because: ${disableCanAddErrorOutputReasons
+													.map((r) =>
+														lowercaseFirstLetter(r)
+													)
+													.join(', and ')}`,
+										parentCanvasObject: popup.self,
+										id:
+											'canvas-card--' +
+											props.entity.id +
+											'--new-thrown-error'
+									}
+								]
+							: []),
+						{
+							project: props.project,
+							onClick: async () => {
+								let actionName =
+									StateMutationAction.RecalculateTerminationStatement;
+
+								if (
+									entity.type === EntityType.ReturnStatement
+								) {
+									actionName =
+										StateMutationAction.RecalculateReturnStmt;
+								} else if (
+									entity.type === EntityType.ContinueStatement
+								) {
+									actionName =
+										StateMutationAction.RecalculateContinueStmt;
+								} else if (
+									entity.type === EntityType.BreakStatement
+								) {
+									actionName =
+										StateMutationAction.RecalculateBreakStmt;
+								}
+
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											entity,
+											false,
+											actionName
+										)
+									);
+
+								entity.afterAllChildrenInitialized(changeSet);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'Recalculate',
+							color: 'warning',
+							// Bug icon
+							iconEnd: 'fa-solid fa-bug',
+							disabled: false,
+							// Lower case the first letter of the resolved readable name
+							tooltip:
+								'Recalculate the state of this ' +
+								lowercaseFirstLetter(
+									READABLE_ENTITY_TYPES[props.entity.type]
+										.shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'-card--' +
+								props.entity.id +
+								'--recalculate'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(props.entity.id);
+								popupNotification({
+									text: `Copied ID: ${props.entity.id}`,
+									color: 'success'
+								});
+							},
+							label: 'Copy ID',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								'Copy this node ID to clipboard for debugging',
+							parentCanvasObject: popup.self,
+							id: 'copy-id-' + props.entity.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.entity
+								);
+								popupNotification({
+									text: `Re-validated node successfully`,
+									color: 'success'
+								});
+							},
+							label: 'Re-validate',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								"Re-validate this node's state and its errors",
+							parentCanvasObject: popup.self,
+							id: 're-validate-' + props.entity.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[disableDelete, disableDeleteReasons]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-small-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-small-entity-card-menu-button-' + props.entity.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-small-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody
+		// [disableDelete, disableDeleteReasons]
+	);
+
+	useEffect(() => {
+		// --- Initial Setup Logic ---
+		const initialNewDisabledReasons: CanvasEntityOtherDisabledReason[] = [];
+
+		// @ts-ignore
+		if (props.entity.suggestion) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.Suggestion
+			);
+		}
+
+		if (props.project.canvas?.disabled) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+			);
+		}
+
+		if (!!initialNewDisabledReasons.length) {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					initialNewDisabledReasons
+				);
+				return config.reasons;
+			});
+		} else {
+			// This handles the case where canvas was disabled but is now enabled
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		}
+
+		const handleCanvasGloballyEnabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+		const handleCanvasGloballyDisabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+
+		const handleEntityUpdate = (payload: any) => {
+			let hasUpdated = false;
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+			const disabledReasonsToRemove: CanvasEntityTestingDisabledReason[] =
+				[];
+
+			props.project.test?.disabledConnectionsNotInTest(
+				props.canvasElement.draggableObject,
+				props.entity
+			);
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			// If it is part of test and it is disabled, enable it
+			if (
+				(props.project.test?.hasEntity(props.entity) ||
+					props.project.test?.getCanBeAddedToTest(props.entity)) &&
+				props.canvasElement.draggableObject.disabled
+			) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity)
+			) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			} else if (
+				!!props.project.test &&
+				props.project.test?.hasEntity(props.entity)
+			) {
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			}
+
+			if (newDisabledReasons.length || disabledReasonsToRemove.length) {
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newDisabledReasons
+					);
+					const finalConfig = removeDisabledReasons(
+						config.reasons,
+						disabledReasonsToRemove
+					);
+					return finalConfig.reasons;
+				});
+				// hasUpdated is already true
+			}
+
+			if (!hasUpdated) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestSetupStarted = () => {
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				props.project.test?.disabledConnectionsNotInTest(
+					props.canvasElement.draggableObject,
+					props.entity
+				);
+
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			if (!props.project.test?.hasEntity(props.entity)) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			}
+
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					newDisabledReasons
+				);
+				return config.reasons;
+			});
+		};
+
+		const handleExecutionStart = () => {
+			if (!!props.project.test?.hasEntity(props.entity)) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestExited = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest,
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				]);
+				return config.reasons;
+			});
+
+			if (props.canvasElement.draggableObject.disabled) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+			}
+
+			props.canvasElement.draggableObject.connections.forEach(
+				(connection) => {
+					connection.enable();
+					connection.element.classList.remove('disabled');
+
+					if (connection.complementaryLineElement) {
+						connection.complementaryLineElement.classList.remove(
+							'disabled'
+						);
+					}
+				}
+			);
+		};
+
+		const handleCanvasConnectionStart = (payload: any) => {
+			if (!payload.compatible?.[props.entity.id]) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				const newOwnConnectionDisabledReasons: CanvasEntityConnectionDisabledReason[] =
+					payload.incompatible?.[props.entity.id]?.reasons || [];
+
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newOwnConnectionDisabledReasons
+					);
+					return config.reasons;
+				});
+			} else {
+				forceUpdate();
+			}
+		};
+
+		const handleCanvasConnectionEnd = () => {
+			props.project.canvas?.enable(props.canvasElement.draggableObject, {
+				quiet: true
+			});
+
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(
+					currentReasons,
+					ALL_CONNECTION_DISABLED_REASONS
+				);
+				return config.reasons;
+			});
+		};
+
+		props.project.on(
+			'canvas-globally-enabled',
+			handleCanvasGloballyEnabled
+		);
+		props.project.on(
+			'canvas-globally-disabled',
+			handleCanvasGloballyDisabled
+		);
+		props.project.on(props.entity.id, handleEntityUpdate);
+		props.project.on('test-setup-started', handleTestSetupStarted);
+		props.project.on('execution-start', handleExecutionStart);
+		props.project.on('test-exited', handleTestExited);
+		props.project.on(
+			'canvas-connection-start',
+			handleCanvasConnectionStart
+		);
+		props.project.on('canvas-connection-end', handleCanvasConnectionEnd);
+
+		return () => {
+			props.project.off(
+				'canvas-globally-enabled',
+				handleCanvasGloballyEnabled
+			);
+			props.project.off(
+				'canvas-globally-disabled',
+				handleCanvasGloballyDisabled
+			);
+			props.project.off(props.entity.id, handleEntityUpdate);
+			props.project.off('test-setup-started', handleTestSetupStarted);
+			props.project.off('execution-start', handleExecutionStart);
+			props.project.off('test-exited', handleTestExited);
+			props.project.off(
+				'canvas-connection-start',
+				handleCanvasConnectionStart
+			);
+			props.project.off(
+				'canvas-connection-end',
+				handleCanvasConnectionEnd
+			);
+		};
+	}, [
+		props.project,
+		props.entity,
+		props.canvasElement,
+		updateKey,
+		// @ts-ignore
+		props.entity.suggestion
+	]);
+
+	useEffect(() => {
+		props.canvasElement.draggableObject.updateConnections();
+	});
+
+	const inputMaps = entity.outputs;
+
+	const classes = ['canvas-draggable-card'];
+
+	const dt = entity.getDataType(null);
+
+	const isVoidReturnType =
+		dt?.entity?.id ===
+		BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].void?.id;
+
+	const showNewInputButton = useMemo(
+		() =>
+			!props.project.test &&
+			!(entity as ReturnStatementState).throws &&
+			!disabledReasons.includes(
+				CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+			) &&
+			!disabledReasons.includes(
+				CanvasEntityOtherDisabledReason.Suggestion
+			) &&
+			!disabledReasons.includes(
+				CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+			) &&
+			!disabledReasons.includes(
+				CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+			) &&
+			(!props.project.onGoingConnectionNodeType ||
+				(props.project.onGoingConnectionNodeType &&
+					props.project.onGoingConnectionNodeType ===
+						ConnectionNodeType.PropertyOut)) &&
+			!disabledReasons.includes(
+				CanvasEntityConnectionDisabledReason.NotInScope
+			) &&
+			// If the parent is a function declaration that implements a descriptor signature,
+			// We hide the button because the user can't add their own outputs
+			!(
+				(entity as ReturnStatementState).parent.type ===
+					EntityType.FunctionDeclaration &&
+				!!(
+					(entity as ReturnStatementState)
+						.parent as FunctionDeclarationState
+				).implements
+			) &&
+			!isVoidReturnType &&
+			dt?.canBeObject() &&
+			// If there is an active connection and the source is an ancestor that calls the current in its error branch,
+			// we shouldn't show the new inputs button
+			((): boolean => {
+				if (
+					!props.project.onGoingConnectionNodeType ||
+					props.project.onGoingConnectionNodeType !==
+						ConnectionNodeType.PropertyOut
+				) {
+					return true;
+				}
+
+				const sourceEntity = props.project
+					.onGoingConnectionSource as ValueWritingEntityState;
+
+				if (!sourceEntity) {
+					true;
+				}
+
+				const sourceCallerParent = getParentCallerEntity(sourceEntity);
+
+				const errorAcestors = flattenCallersWithCallType(entity).filter(
+					(a) => a.callType === 'error'
+				);
+
+				if (
+					errorAcestors.find(
+						(a) => a.caller?.id === sourceCallerParent?.id
+					)
+				) {
+					return false;
+				}
+
+				return true;
+			})(),
+		[
+			props.project,
+			props.project?.test,
+			entity,
+			disabledReasons,
+			updateKey,
+			props.project.onGoingConnectionNodeType
+		]
+	);
+
+	if (!!props.entity?.deleted) {
+		return null;
+	}
+
+	return (
+		<div
+			ref={rootElementRef}
+			className={classes.join(' ')}
+			id={getCanvasEntityDOMId(props.entity)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityDOMId(props.entity)
+			}}
+			onClick={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<TestEntityButton
+				entity={entity}
+				project={props.project}
+				canvasElement={props.canvasElement}
+				parentDisabledReasons={disabledReasons}
+			/>
+			<div
+				className={[
+					'canvas-draggable-card__body',
+					...(!!disabledReasons.length
+						? ['canvas-draggable-card__body__disabled']
+						: []),
+					resolveEntityColorClass(props.entity.type, {
+						state: fromDisabledReasonsToCardState(disabledReasons)
+					})
+				].join(' ')}
+			>
+				<header
+					className="canvas-draggable-card__header"
+					{...{
+						[Canvas.OBJ_ATTR_NAME]:
+							getCanvasEntityDOMId(props.entity) + '--header'
+					}}
+					style={parse(
+						getCardGradientStatement(entity, {
+							state: fromDisabledReasonsToCardState(
+								disabledReasons
+							)
+						})
+					)}
+					onMouseOver={(e: any) => {
+						if (!!props.project.canvas?.activeConnectionDrawing) {
+							if (
+								!!props.project
+									.onGoingConnectionIncompatibleEntities?.[
+									props.entity.id
+								]
+							) {
+								// Read the disabled reasons and add a tooltip to the mouse
+								const reasonsMessage =
+									props.project.onGoingConnectionIncompatibleEntities?.[
+										props.entity.id
+									].reasons
+										.map((reason) =>
+											entityDisabledReasonToShortReadableError(
+												reason
+											)
+										)
+										.join('.\n');
+
+								props.project.canvas?.showTooltip(
+									'connection-disabled-reasons-test-entity-button',
+									reasonsMessage
+								);
+								if (props.project.canvas) {
+									props.project.canvas.tooltip.style.fontSize =
+										'28px';
+									props.project.canvas.canvasElement.style.cursor =
+										'not-allowed';
+								}
+							}
+						}
+					}}
+					onMouseLeave={(e: any) => {
+						props.project.canvas?.hideTooltip(
+							'connection-disabled-reasons-test-entity-button'
+						);
+					}}
+				>
+					<DynamicValueEntry
+						entity={props.entity}
+						project={props.project}
+						canvasElement={props.canvasElement}
+						parentDisabledReasons={disabledReasons}
+					>
+						{(extraContent) => (
+							<>
+								<div className="canvas-draggable-card__header__left-block">
+									{/* <i
+										className={[
+											'canvas-draggable-card-header__icon',
+											'fa-solid',
+											'fa-' +
+												(ENTITY_FA_ICON_NAMES[entity.type] || 'rectangle-list'),
+										].join(' ')}
+									/> */}
+									<DataTypeIcon
+										entity={entity}
+										size="large"
+										parentDisabledReasons={disabledReasons}
+										project={props.project}
+										parentCanvasObject={
+											props.canvasElement?.draggableObject
+										}
+									/>
+									<span className="canvas-draggable-card__header__labels">
+										<h3>
+											{safeResolveEntityName(
+												entity,
+												props.project.logic
+											)}
+										</h3>
+										{!!(entity as ReturnStatementState)
+											.throws || isVoidReturnType
+											? resolveCardSubheader(entity)
+											: extraContent}
+										{/* <p>{READABLE_ENTITY_TYPES[entity.type]?.singular}</p> */}
+									</span>
+								</div>
+								<div className="canvas-draggable-card__header__actions">
+									<EntityLockedIconMenu
+										entity={entity}
+										project={props.project}
+										canvasElement={props.canvasElement}
+										parentDisabledReasons={disabledReasons}
+									/>
+									<LogicErrorIconMenu
+										entity={entity}
+										project={props.project}
+										canvasElement={props.canvasElement}
+										parentDisabledReasons={disabledReasons}
+									/>
+									{/* Three dots menu */}
+									{!disabledReasons.length && (
+										<Button
+											variant="text"
+											color="grey"
+											iconEnd="fa-solid fa-ellipsis-v"
+											size="small"
+											ref={canvasPopup.anchorRef}
+											className="canvas-small-entity-card-menu-button"
+											id={`canvas-small-entity-card-menu-button-${entity.id}`}
+											disabled={!!disabledReasons.length}
+											onClick={(e: any) => {
+												e.stopPropagation();
+
+												canvasPopup?.toggle();
+											}}
+											// onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+											// 	e.stopPropagation();
+											// 	if (disabledReasons.length) return;
+											// 	props.project?.canvas?.unselectAll();
+											// 	EditorService.navigate(
+											// 		`${props.project?.editorBasePath}/entity/${props.entity.type}/${props.entity.id}`,
+											// 	);
+											// }}
+										/>
+									)}
+								</div>
+							</>
+						)}
+					</DynamicValueEntry>
+				</header>
+				<div className="canvas-draggable-card__content">
+					{!!(entity as ReturnStatementState).throws && (
+						<ReturnedError
+							inputMap={(entity as ReturnStatementState).throws}
+							entity={entity as ReturnStatementState}
+							canvasElement={props.canvasElement}
+							project={props.project}
+							parentDisabledReasons={disabledReasons}
+						/>
+					)}
+
+					{!(entity as ReturnStatementState).throws && (
+						<MainValueInput
+							entity={entity}
+							canvasElement={props.canvasElement}
+							project={props.project}
+							parentDisabledReasons={disabledReasons}
+						/>
+					)}
+
+					{/* List of input maps */}
+					{inputMaps.length > 0 && (
+						<ul className="canvas-draggable-card__property-list">
+							{inputMaps
+								.sort((a, b) => {
+									// Sort by `.index` property
+									if (a.index < b.index) {
+										return -1;
+									}
+									if (a.index > b.index) {
+										return 1;
+									}
+									return 0;
+								})
+								.map((inputMap) => (
+									<InputMapProperty
+										key={inputMap.id}
+										inputMap={inputMap}
+										entity={props.entity}
+										canvasElement={props.canvasElement}
+										project={props.project}
+										parentDisabledReasons={disabledReasons}
+									/>
+								))}
+						</ul>
+					)}
+					{showNewInputButton && (
+						<div
+							className={[
+								'canvas-draggable-card__action-alt',
+								'align-left'
+							].join(' ')}
+						>
+							<NewCardInputButton
+								iconStart="fa-solid fa-plus"
+								size="small"
+								parentDisabledReasons={disabledReasons}
+								entity={entity}
+								project={props.project}
+								canvasElement={props.canvasElement}
+								onClick={() => {
+									let actionName =
+										StateMutationAction.AddPropertyToTerminationStatement;
+
+									if (
+										entity.type ===
+										EntityType.ReturnStatement
+									) {
+										actionName =
+											StateMutationAction.AddPropertyToReturnStmt;
+									} else if (
+										entity.type ===
+										EntityType.ContinueStatement
+									) {
+										actionName =
+											StateMutationAction.AddPropertyToContinueStmt;
+									} else if (
+										entity.type ===
+										EntityType.BreakStatement
+									) {
+										actionName =
+											StateMutationAction.AddPropertyToBreakStmt;
+									}
+
+									const changeSet =
+										props.project.logic.addChangeSet(
+											new ChangeSet(
+												props.project.logic,
+												ProjectState.sessionAuthor,
+												new Date().toISOString(),
+												entity,
+												false,
+												actionName
+											)
+										);
+
+									let newEntity!:
+										| InputMapState
+										| PropertyState;
+
+									if (
+										entity.parent.type ===
+											EntityType.Loop &&
+										[
+											EntityType.ContinueStatement,
+											EntityType.BreakStatement
+										].includes(entity.type)
+									) {
+										const newEntityTransfer =
+											InputMapState.new(changeSet);
+										newEntityTransfer.parent =
+											entity.toReference();
+
+										newEntityTransfer.name =
+											findNextAvailableName(
+												'Output',
+												entity.outputs.map(
+													(e) => e.declaration
+												)
+											);
+
+										newEntity =
+											createStateFromTypeAndSubscribe(
+												newEntityTransfer,
+												props.project.logic
+											) as InputMapState;
+
+										newEntity.hydrateAncestors();
+
+										changeSet.add(
+											newEntity,
+											ChangeSetEntityChangeType.Added
+										);
+
+										newEntity.addSelfToProject(changeSet);
+										newEntity.afterAllChildrenInitialized(
+											changeSet
+										);
+
+										entity.afterAllChildrenInitialized(
+											changeSet
+										);
+									} else if (
+										entity.parent.type ===
+										EntityType.FunctionDeclaration
+									) {
+										const parentFuncDeclaration: FunctionDeclarationState =
+											entity.parent;
+										const dataType = entity.parent.dataType;
+										let resolvedDataType: DataTypeState =
+											dataType;
+										let dataTypeEntity: DefinitionEntityState;
+
+										if (
+											!!resolvedDataType.entity &&
+											resolvedDataType.entity.type ===
+												EntityType.DefinitionEntity &&
+											resolvedDataType.entity.parent
+												?.id === resolvedDataType.id
+										) {
+											dataTypeEntity =
+												resolvedDataType.entity as DefinitionEntityState;
+										}
+
+										if (!resolvedDataType) {
+											const newDataTypeTransfer =
+												DataTypeState.new(changeSet);
+											newDataTypeTransfer.parent =
+												parentFuncDeclaration.toReference();
+											newDataTypeTransfer.inferred = true;
+
+											resolvedDataType =
+												createStateFromTypeAndSubscribe(
+													newDataTypeTransfer,
+													props.project.logic
+												) as DataTypeState;
+
+											resolvedDataType.hydrateAncestors();
+											resolvedDataType.addSelfToProject(
+												changeSet
+											);
+											changeSet.add(
+												resolvedDataType,
+												ChangeSetEntityChangeType.Added
+											);
+											resolvedDataType.initChildren(
+												changeSet
+											);
+										}
+
+										if (!dataTypeEntity) {
+											const newDefEntityTransfer =
+												DefinitionEntityState.new(
+													changeSet
+												);
+											const allOtherDefinitions =
+												props.project.logic.getDefinitionEntities();
+
+											const desiredName =
+												'Custom inline definition';
+
+											const newName =
+												findNextAvailableName(
+													desiredName,
+													allOtherDefinitions
+												);
+
+											newDefEntityTransfer.name = newName;
+											newDefEntityTransfer.parent =
+												resolvedDataType.toReference();
+
+											dataTypeEntity =
+												createStateFromTypeAndSubscribe(
+													newDefEntityTransfer,
+													props.project.logic
+												) as DefinitionEntityState;
+
+											dataTypeEntity.hydrateAncestors();
+											dataTypeEntity.addSelfToProject(
+												changeSet
+											);
+											changeSet.add(
+												dataTypeEntity,
+												ChangeSetEntityChangeType.Added
+											);
+											dataTypeEntity.initChildren(
+												changeSet
+											);
+											resolvedDataType.setEntity(
+												dataTypeEntity,
+												changeSet
+											);
+
+											changeSet.add(
+												resolvedDataType,
+												ChangeSetEntityChangeType.Updated
+											);
+										}
+
+										const newPropertyTransfer =
+											PropertyState.new(changeSet);
+										newPropertyTransfer.parent =
+											dataTypeEntity.toReference();
+
+										newPropertyTransfer.name =
+											findNextAvailableName(
+												'Output',
+												dataTypeEntity.properties
+											);
+
+										const newProperty =
+											createStateFromTypeAndSubscribe(
+												newPropertyTransfer,
+												props.project.logic
+											) as PropertyState;
+
+										newProperty.hydrateAncestors();
+										newProperty.addSelfToProject(changeSet);
+										changeSet.add(
+											newProperty,
+											ChangeSetEntityChangeType.Added
+										);
+										newProperty.initChildren(changeSet);
+
+										const builtInPrimitiveStringEntity =
+											props.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 =
+											newProperty.toReference();
+										dataTypeTransfer.entity =
+											(builtInPrimitiveStringEntity?.toJSON() as IPrimitiveEntityTransfer) ||
+											null;
+
+										const dataTypeInstance =
+											createStateFromTypeAndSubscribe(
+												dataTypeTransfer,
+												props.project.logic
+											) as DataTypeState;
+
+										dataTypeInstance.hydrateAncestors();
+										dataTypeInstance.addSelfToProject(
+											changeSet
+										);
+										changeSet.add(
+											dataTypeInstance,
+											ChangeSetEntityChangeType.Added
+										);
+
+										dataTypeInstance.initChildren(
+											changeSet
+										);
+
+										newEntity = newProperty;
+
+										const newEntityInputTransfer =
+											TerminationInputMapState.new(
+												changeSet
+											);
+										newEntityInputTransfer.parent =
+											entity.toReference();
+										newEntityInputTransfer.declaration =
+											newProperty.toJSON() as IPropertyTransfer;
+
+										const newEntityInput =
+											createStateFromTypeAndSubscribe(
+												newEntityInputTransfer,
+												props.project.logic
+											) as TerminationInputMapState;
+
+										newEntityInput.hydrateAncestors();
+										newEntityInput.addSelfToProject(
+											changeSet
+										);
+										changeSet.add(
+											newEntityInput,
+											ChangeSetEntityChangeType.Added
+										);
+										newEntityInput.initChildren(changeSet);
+
+										dataType.metaSync(
+											{
+												inferred: false
+											},
+											changeSet
+										);
+									} else if (
+										entity.parent.type ===
+										EntityType.GlobalEvent
+									) {
+										const parentFuncDeclaration: GlobalEventState =
+											entity.parent;
+										const dataType =
+											entity.parent.implements?.dataType;
+										let resolvedDataType: DataTypeState =
+											dataType;
+										let dataTypeEntity: DefinitionEntityState;
+
+										if (
+											!!resolvedDataType.entity &&
+											resolvedDataType.entity.type ===
+												EntityType.DefinitionEntity &&
+											resolvedDataType.entity.parent
+												?.id === resolvedDataType.id
+										) {
+											dataTypeEntity =
+												resolvedDataType.entity as DefinitionEntityState;
+										}
+
+										if (!resolvedDataType) {
+											const newDataTypeTransfer =
+												DataTypeState.new(changeSet);
+											newDataTypeTransfer.parent =
+												entity.toReference();
+											newDataTypeTransfer.inferred = true;
+
+											resolvedDataType =
+												createStateFromTypeAndSubscribe(
+													newDataTypeTransfer,
+													props.project.logic
+												) as DataTypeState;
+
+											resolvedDataType.hydrateAncestors();
+											resolvedDataType.addSelfToProject(
+												changeSet
+											);
+											changeSet.add(
+												resolvedDataType,
+												ChangeSetEntityChangeType.Added
+											);
+											resolvedDataType.initChildren(
+												changeSet
+											);
+										}
+
+										if (!dataTypeEntity) {
+											const newDefEntityTransfer =
+												DefinitionEntityState.new(
+													changeSet
+												);
+											const allOtherDefinitions =
+												props.project.logic.getDefinitionEntities();
+
+											const desiredName =
+												'Custom inline definition';
+
+											const newName =
+												findNextAvailableName(
+													desiredName,
+													allOtherDefinitions
+												);
+
+											newDefEntityTransfer.name = newName;
+											newDefEntityTransfer.parent =
+												resolvedDataType.toReference();
+
+											dataTypeEntity =
+												createStateFromTypeAndSubscribe(
+													newDefEntityTransfer,
+													props.project.logic
+												) as DefinitionEntityState;
+
+											dataTypeEntity.hydrateAncestors();
+											dataTypeEntity.addSelfToProject(
+												changeSet
+											);
+											changeSet.add(
+												dataTypeEntity,
+												ChangeSetEntityChangeType.Added
+											);
+											dataTypeEntity.initChildren(
+												changeSet
+											);
+											resolvedDataType.setEntity(
+												dataTypeEntity,
+												changeSet
+											);
+
+											changeSet.add(
+												resolvedDataType,
+												ChangeSetEntityChangeType.Updated
+											);
+										}
+
+										const newPropertyTransfer =
+											PropertyState.new(changeSet);
+										newPropertyTransfer.parent =
+											dataTypeEntity.toReference();
+
+										newPropertyTransfer.name =
+											findNextAvailableName(
+												'Output',
+												dataTypeEntity.properties
+											);
+
+										const newProperty =
+											createStateFromTypeAndSubscribe(
+												newPropertyTransfer,
+												props.project.logic
+											) as PropertyState;
+
+										newProperty.hydrateAncestors();
+										newProperty.addSelfToProject(changeSet);
+										changeSet.add(
+											newProperty,
+											ChangeSetEntityChangeType.Added
+										);
+										newProperty.initChildren(changeSet);
+
+										const builtInPrimitiveStringEntity =
+											props.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 =
+											newProperty.toReference();
+										dataTypeTransfer.entity =
+											(builtInPrimitiveStringEntity?.toJSON() as IPrimitiveEntityTransfer) ||
+											null;
+
+										const dataTypeInstance =
+											createStateFromTypeAndSubscribe(
+												dataTypeTransfer,
+												props.project.logic
+											) as DataTypeState;
+
+										dataTypeInstance.hydrateAncestors();
+										dataTypeInstance.addSelfToProject(
+											changeSet
+										);
+										changeSet.add(
+											dataTypeInstance,
+											ChangeSetEntityChangeType.Added
+										);
+
+										dataTypeInstance.initChildren(
+											changeSet
+										);
+
+										newEntity = newProperty;
+
+										const newEntityInputTransfer =
+											TerminationInputMapState.new(
+												changeSet
+											);
+										newEntityInputTransfer.parent =
+											entity.toReference();
+										newEntityInputTransfer.declaration =
+											newProperty.toJSON() as IPropertyTransfer;
+
+										const newEntityInput =
+											createStateFromTypeAndSubscribe(
+												newEntityInputTransfer,
+												props.project.logic
+											) as TerminationInputMapState;
+
+										newEntityInput.hydrateAncestors();
+										newEntityInput.addSelfToProject(
+											changeSet
+										);
+										changeSet.add(
+											newEntityInput,
+											ChangeSetEntityChangeType.Added
+										);
+										newEntityInput.initChildren(changeSet);
+
+										dataType.metaSync(
+											{
+												inferred: false
+											},
+											changeSet
+										);
+									}
+
+									changeSet.add(
+										entity,
+										ChangeSetEntityChangeType.Affected
+									);
+									entity.parent.afterAllChildrenInitialized(
+										changeSet
+									);
+
+									props.project.renderAndCloseChangeSet(
+										changeSet
+									);
+
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${newEntity.type}/${newEntity.id}`
+									);
+								}}
+							>
+								Output
+							</NewCardInputButton>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default TerminationStatementCard;