@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/definition-entity/DefinitionEntityDialogContent.tsx

@@ -0,0 +1,973 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import {
+	Box,
+	Collapse,
+	TextField,
+	Tooltip as MuiTooltip,
+	Autocomplete,
+	FormGroup,
+	FormControlLabel,
+	Checkbox,
+	Stack,
+	Chip,
+} from '@mui/material';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { IDialogProps } from '../../../lib/dialog/Dialog';
+import { EditorService } from '../../../services/editor';
+import {
+	EntityId,
+	EntityType,
+	DefinitionEntityState,
+	ChangeSet,
+	BuiltInBaseEntityState,
+	IDefinitionEntityShallowTransfer,
+	IBuiltInBaseEntityShallowTransfer,
+	ChangeSetEntityChangeType,
+	resolveEntityName,
+	definitionEntityValidation,
+	convertToAbstract,
+	convertToNonAbstract,
+	convertToStatic,
+	convertToNonStatic,
+	EntityError,
+	translateLogicErrorCode,
+	ProjectState,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import { useParams } from 'react-router-dom';
+import Button from '../../../lib/button/Button';
+import { popupNotification } from '../../../popup-notification';
+import EntityIcon from '../../entity-icon/EntityIcon';
+import { errorCodeToMessage } from '../../../services/editor/ui';
+import DialogLoader from '../../DialogLoader';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { EntityDialogHeader } from '../../EntityDialogHeader';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { debounce } from '../../../utils';
+
+const {
+	validateCanExtendEntity,
+	validateCanImplementEntity,
+	validateCanBecomeAbstract,
+	validateCanBecomeNonAbstract,
+	validateCanBecomeNonStatic,
+	validateCanBecomeStatic,
+} = definitionEntityValidation;
+
+const icon = <CheckBoxOutlineBlankIcon fontSize='small' />;
+const checkedIcon = <CheckBoxIcon fontSize='small' />;
+
+export interface IDefinitionEntityDialogContentProps extends IDialogProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+export interface IDefinitionEntitySectionProps {
+	entity: DefinitionEntityState;
+	project: EditorService;
+}
+
+const EntityMetadataSection: React.FC<IDefinitionEntitySectionProps> = ({
+	entity,
+	project,
+}) => {
+	const [entityName, setEntityName] = useState<string>(entity.name);
+	const [entityNameErrors, setEntityNameErrors] = useState<EntityError[]>(
+		definitionEntityValidation.validateDefinitionEntityName(entity)
+	);
+	const [entityDescription, setEntityDescription] = useState<string>(
+		entity.description
+	);
+
+	const [sectionOpen, setSectionOpen] = useState(true);
+
+	const debouncedOnChangeName = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.RenameDefinition,
+					),
+				);
+
+				entity?.metaSync(
+					{ description: entityDescription, name: value || null },
+					changeSet,
+				);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			1500,
+			false,
+		),
+		[entityDescription],
+	);
+
+	const debouncedOnChangeDescription = useCallback(
+		debounce(
+			(value: string) => {
+				Logger.log('Description: ', value);
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.ChangeDefDescription,
+					),
+				);
+
+				entity?.metaSync(
+					{ name: entityName, description: value || null },
+					changeSet
+				);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			600,
+			false
+		),
+		[entityName]
+	);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0,
+			}}
+		>
+			<EntityDialogSectionHeader
+				title='Name and description'
+				subtitle='Add a name and description for this definition node in the canvas'
+				hideShowSuffix='the name and description section'
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 12,
+						marginLeft: 80,
+						paddingRight: 40,
+					}}
+				>
+					<TextField
+						label='Definition name'
+						variant='outlined'
+						style={{ width: '50%' }}
+						size='small'
+						value={entityName || ''}
+						disabled={!entity.editable}
+						onChange={(e) => {
+							Logger.log('Name change: ', e.target.value);
+							const validationResult =
+								definitionEntityValidation.validateDefinitionEntityName(
+									entity,
+									e.target.value
+								);
+
+							setEntityName(e.target.value);
+
+							if (!validationResult.length) {
+								debouncedOnChangeName(e.target.value);
+							}
+
+							setEntityNameErrors(validationResult);
+						}}
+						error={!!entityNameErrors.length}
+						helperText={
+							!!entityNameErrors.length
+								? entityNameErrors
+										.map((err) => translateLogicErrorCode(err))
+										.join('. ')
+								: ''
+						}
+					/>
+
+					<TextField
+						label='Definition description'
+						variant='outlined'
+						fullWidth
+						multiline
+						minRows={3}
+						size='small'
+						disabled={!entity.editable}
+						value={entityDescription || ''}
+						onChange={(e) => {
+							Logger.log('Description: ', e.target.value);
+							setEntityDescription(e.target.value);
+							debouncedOnChangeDescription(e.target.value);
+						}}
+					/>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+const BaseFunctionalitySection: React.FC<IDefinitionEntitySectionProps> = ({
+	entity,
+	project,
+}) => {
+	const [implementsValue, setImplementsValue] = useState<
+		(IDefinitionEntityShallowTransfer | IBuiltInBaseEntityShallowTransfer)[]
+	>(entity.implements.map((ent) => ent.toShallowJSON()));
+	const [extendsValue, setExtendsValue] = useState<
+		IDefinitionEntityShallowTransfer | IBuiltInBaseEntityShallowTransfer | null
+	>(!!entity.extends ? entity.extends.toShallowJSON() : null);
+
+	const [sectionOpen, setSectionOpen] = useState(true);
+
+	const implementsOptions = useMemo(() => {
+		const allPossibleImplementable: (
+			| IDefinitionEntityShallowTransfer
+			| IBuiltInBaseEntityShallowTransfer
+		)[] = [...project.logic.builtInBaseEntities, ...project.logic.entities]
+			.filter((ent) => ent.id !== entity.id)
+			.sort((ent) => {
+				// Order disabled options to the end
+				const isDisabled = !!validateCanImplementEntity(entity, ent).length;
+
+				return isDisabled ? 1 : -1;
+			})
+			.map((ent) => ent.toShallowJSON());
+
+		return allPossibleImplementable;
+	}, [implementsValue, extendsValue]);
+
+	const extendsOptions = useMemo(() => {
+		const allPossibleExtends: (
+			| IDefinitionEntityShallowTransfer
+			| IBuiltInBaseEntityShallowTransfer
+		)[] = [...project.logic.builtInBaseEntities, ...project.logic.entities]
+			.filter((ent) => ent.id !== entity.id)
+			.sort((ent) => {
+				// Order disabled options to the end
+				const isDisabled = !!validateCanExtendEntity(entity, ent).length;
+
+				return isDisabled ? 1 : -1;
+			})
+			.map((ent) => ent.toShallowJSON());
+
+		return allPossibleExtends;
+	}, [implementsValue, extendsValue]);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0,
+			}}
+		>
+			<EntityDialogSectionHeader
+				title='Base functionality'
+				subtitle='Attach base functionality to this definition node'
+				hideShowSuffix='the base functionality section'
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'column',
+						gap: 20,
+						marginLeft: 80,
+						paddingRight: 40,
+					}}
+				>
+					<Autocomplete
+						multiple
+						id='implements'
+						disabled={!entity.editable}
+						options={implementsOptions}
+						disableCloseOnSelect
+						isOptionEqualToValue={(option, value) => option.id === value.id}
+						getOptionLabel={(option) => {
+							const ent = project.logic.get(option.id) as
+								| DefinitionEntityState
+								| BuiltInBaseEntityState;
+
+							return resolveEntityName(ent, project.logic);
+						}}
+						renderOption={(props, option, { selected }) => {
+							const { key, ...optionProps } = props;
+							const ent = project.logic.get(option.id) as
+								| DefinitionEntityState
+								| BuiltInBaseEntityState;
+
+							return (
+								<MuiTooltip
+									key={key}
+									title={validateCanImplementEntity(entity, ent)
+										.map((e) => errorCodeToMessage(e.code))
+										.join('\n')}
+									placement='bottom'
+									arrow
+									enterDelay={
+										!!validateCanImplementEntity(entity, ent).length ? 100 : 400
+									}
+									leaveDelay={200}
+								>
+									<Box
+										component='li'
+										sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+										{...optionProps}
+									>
+										<Checkbox
+											icon={icon}
+											checkedIcon={checkedIcon}
+											style={{ marginRight: 8 }}
+											checked={
+												implementsValue.findIndex((v) => v.id === ent.id) > -1
+											}
+										/>
+										<Stack direction='row' gap={1} alignItems='center'>
+											<EntityIcon entity={ent} project={project} />
+											{resolveEntityName(ent, project.logic)}
+										</Stack>
+									</Box>
+								</MuiTooltip>
+							);
+						}}
+						renderTags={(selected) => (
+							<Stack gap={1} direction='row' flexWrap='wrap'>
+								{selected.map((value) => {
+									const ent = project.logic.get(value.id) as
+										| DefinitionEntityState
+										| BuiltInBaseEntityState;
+
+									return (
+										<Chip
+											avatar={
+												<EntityIcon entity={ent} project={project} style={{ marginLeft: 8 }} />
+											}
+											key={value.id}
+											label={resolveEntityName(ent, project.logic)}
+											onDelete={() => {
+												const changeSet = project?.logic?.addChangeSet(
+													new ChangeSet(
+														project?.logic,
+														ProjectState.sessionAuthor,
+														new Date().toISOString(),
+														entity,
+														false,
+														StateMutationAction.RemoveDefBaseImplementation,
+													),
+												);
+
+												const fullEnt = project.logic.get(value.id) as
+													| DefinitionEntityState
+													| BuiltInBaseEntityState;
+
+												entity?.removeImplementation(fullEnt, changeSet);
+
+												changeSet.add(
+													entity,
+													ChangeSetEntityChangeType.Updated
+												);
+
+												setImplementsValue(
+													implementsValue.filter((v) => v.id !== value.id)
+												);
+												project.emit(entity.id, {});
+
+												project.renderAndCloseChangeSet(changeSet);
+											}}
+											deleteIcon={
+												<CancelIcon
+													onMouseDown={(event) => event.stopPropagation()}
+												/>
+											}
+										/>
+									);
+								})}
+							</Stack>
+						)}
+						value={implementsValue}
+						onChange={(_, newValue) => {
+							// Filter out duplicates
+							const sanitizedValue = newValue.filter(
+								(v, i, a) => a.findIndex((t) => t.id === v.id) === i
+							);
+
+							const changeSet = project?.logic?.addChangeSet(
+								new ChangeSet(
+									project?.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									entity,
+									false,
+									StateMutationAction.AddDefBaseImplementation,
+								),
+							);
+
+							const existingEntities = entity.implements.map((ent) => ent.id);
+							const newEntities = sanitizedValue.map((ent) => ent.id);
+
+							const toAdd = newEntities.filter(
+								(ent) => !existingEntities.includes(ent)
+							);
+							const toRemove = existingEntities.filter(
+								(ent) => !newEntities.includes(ent)
+							);
+
+							toAdd.forEach((ent) => {
+								const fullEnt = project.logic.get(ent) as
+									| DefinitionEntityState
+									| BuiltInBaseEntityState;
+								entity?.addImplementation(fullEnt, changeSet);
+
+								changeSet.add(entity, ChangeSetEntityChangeType.Updated);
+							});
+
+							toRemove.forEach((ent) => {
+								const fullEnt = project.logic.get(ent) as
+									| DefinitionEntityState
+									| BuiltInBaseEntityState;
+								entity?.removeImplementation(fullEnt, changeSet);
+
+								changeSet.add(entity, ChangeSetEntityChangeType.Updated);
+							});
+
+							if (toAdd.length || toRemove.length) {
+								setImplementsValue(sanitizedValue);
+								entity.afterAllChildrenInitialized(changeSet);
+								project.emit(entity.id, {});
+							}
+
+							project.renderAndCloseChangeSet(changeSet);
+						}}
+						getOptionDisabled={(option) =>
+							!!validateCanImplementEntity(
+								entity,
+								project.logic.get(option.id) as
+									| DefinitionEntityState
+									| BuiltInBaseEntityState
+							).length
+						}
+						renderInput={(params) => (
+							<TextField
+								{...params}
+								variant='outlined'
+								label='Implements built-in functionality'
+								placeholder='Implements...'
+							/>
+						)}
+					/>
+
+					<Autocomplete
+						id='extends'
+						options={extendsOptions}
+						disableCloseOnSelect
+						disabled={!entity.editable}
+						isOptionEqualToValue={(option, value) => option.id === value.id}
+						getOptionLabel={(option) => {
+							const ent = project.logic.get(option.id) as
+								| DefinitionEntityState
+								| BuiltInBaseEntityState;
+
+							return resolveEntityName(ent, project.logic);
+						}}
+						renderOption={(props, option, { selected }) => {
+							const { key, ...optionProps } = props;
+							const ent = project.logic.get(option.id) as
+								| DefinitionEntityState
+								| BuiltInBaseEntityState;
+
+							return (
+								<MuiTooltip
+									key={key}
+									title={validateCanExtendEntity(entity, ent)
+										.map((e) => errorCodeToMessage(e.code))
+										.join('\n')}
+									placement='bottom'
+									arrow
+									enterDelay={
+										!!validateCanExtendEntity(entity, ent).length ? 100 : 400
+									}
+									leaveDelay={200}
+								>
+									<Box
+										component='li'
+										sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+										{...optionProps}
+									>
+										<Checkbox
+											icon={icon}
+											checkedIcon={checkedIcon}
+											style={{ marginRight: 8 }}
+											checked={extendsValue?.id === ent.id}
+										/>
+										<Stack direction='row' gap={1} alignItems='center'>
+											<EntityIcon entity={ent} project={project} />
+											{resolveEntityName(ent, project.logic)}
+										</Stack>
+									</Box>
+								</MuiTooltip>
+							);
+						}}
+						renderTags={(selected) => (
+							<Stack gap={1} direction='row' flexWrap='wrap'>
+								{selected.map((value) => {
+									const ent = project.logic.get(value.id) as
+										| DefinitionEntityState
+										| BuiltInBaseEntityState;
+
+									return (
+										<Chip
+											avatar={
+												<EntityIcon entity={ent} project={project} style={{ marginLeft: 8 }} />
+											}
+											key={value.id}
+											label={resolveEntityName(ent, project.logic)}
+											onDelete={() => {
+												const changeSet = project?.logic?.addChangeSet(
+													new ChangeSet(
+														project?.logic,
+														ProjectState.sessionAuthor,
+														new Date().toISOString(),
+														entity,
+														false,
+														StateMutationAction.RemoveDefExtension,
+													),
+												);
+
+												entity?.setExtension(null, changeSet);
+
+												changeSet.add(
+													entity,
+													ChangeSetEntityChangeType.Updated
+												);
+
+												setExtendsValue(null);
+												project.emit(entity.id, {});
+
+												project.renderAndCloseChangeSet(changeSet);
+											}}
+											deleteIcon={
+												<CancelIcon
+													onMouseDown={(event) => event.stopPropagation()}
+												/>
+											}
+										/>
+									);
+								})}
+							</Stack>
+						)}
+						value={extendsValue}
+						noOptionsText='No definition nodes to extend'
+						onChange={(_, newValue) => {
+							const changeSet = project?.logic?.addChangeSet(
+								new ChangeSet(
+									project?.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									entity,
+									false,
+									StateMutationAction.SetDefExtends,
+								),
+							);
+
+							const fullEnt = !!newValue
+								? (project.logic.get(newValue.id) as
+										| DefinitionEntityState
+										| BuiltInBaseEntityState)
+								: null;
+
+							entity?.setExtension(fullEnt, changeSet);
+
+							changeSet.add(entity, ChangeSetEntityChangeType.Updated);
+
+							setExtendsValue(newValue);
+
+							entity.afterAllChildrenInitialized(changeSet);
+							project.emit(entity.id, {});
+
+							project.renderAndCloseChangeSet(changeSet);
+						}}
+						getOptionDisabled={(option) =>
+							!!validateCanExtendEntity(
+								entity,
+								project.logic.get(option.id) as
+									| DefinitionEntityState
+									| BuiltInBaseEntityState
+							).length
+						}
+						renderInput={(params) => (
+							<TextField
+								{...params}
+								variant='outlined'
+								label='Extends existing functionality'
+								placeholder='Extends...'
+							/>
+						)}
+					/>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+const EntityInteractivitySection: React.FC<IDefinitionEntitySectionProps> = ({
+	entity,
+	project,
+}) => {
+	const [isAbstract, _setIsAbstract] = useState<boolean>(entity.abstract);
+	const [isStatic, _setIsStatic] = useState<boolean>(entity.static);
+
+	const [sectionOpen, setSectionOpen] = useState(true);
+
+	const setIsStatic = useCallback((value: boolean) => {
+		_setIsStatic(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value
+					? StateMutationAction.MakeDefStatic
+					: StateMutationAction.MakeDefNonStatic,
+			),
+		);
+
+		// Here use transform utilities to modify all children of the entity to be static or not
+		if (!entity.static && value) {
+			convertToStatic(entity, changeSet);
+		} else if (entity.static && !value) {
+			convertToNonStatic(entity, changeSet);
+		}
+
+		entity?.metaSync({ static: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	const setIsAbstract = useCallback((value: boolean) => {
+		_setIsAbstract(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value
+					? StateMutationAction.MakeDefAbstract
+					: StateMutationAction.MakeDefNonAbstract,
+			),
+		);
+
+		// Here use transform utilities to modify all children of the entity to be abstract or not
+		if (!entity.abstract && value) {
+			convertToAbstract(entity, changeSet);
+		} else if (entity.abstract && !value) {
+			convertToNonAbstract(entity, changeSet);
+		}
+
+		entity?.metaSync({ abstract: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	return (
+		<section
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				paddingBottom: sectionOpen ? 20 : 0,
+			}}
+		>
+			<EntityDialogSectionHeader
+				title='Interactivity'
+				subtitle='Define how this node is used in the canvas'
+				hideShowSuffix='the interactivity section'
+				open={sectionOpen}
+				onToggle={() => setSectionOpen(!sectionOpen)}
+			/>
+
+			<Collapse in={sectionOpen}>
+				<div
+					style={{
+						marginTop: 6,
+						display: 'flex',
+						flexDirection: 'row',
+						gap: 12,
+						marginLeft: 80,
+						paddingRight: 40,
+					}}
+				>
+					<MuiTooltip
+						title={(!!isAbstract
+							? validateCanBecomeNonAbstract(entity)
+							: validateCanBecomeAbstract(entity)
+						)
+							.map((e) => errorCodeToMessage(e.code))
+							.join('\n')}
+						placement='bottom'
+						arrow
+						enterDelay={
+							(!!isAbstract
+								? validateCanBecomeNonAbstract(entity)
+								: validateCanBecomeAbstract(entity)
+							).length
+								? 100
+								: 400
+						}
+						leaveDelay={200}
+					>
+						<FormGroup>
+							<FormControlLabel
+								control={
+									<Checkbox
+										disabled={
+											!entity.editable || isAbstract
+												? !!validateCanBecomeNonAbstract(entity).length
+												: !!validateCanBecomeAbstract(entity).length
+										}
+										className='definition-entity-builder--abstract-checkbox'
+										checked={isAbstract}
+										onChange={(e) => {
+											const value = e.target.checked;
+											setIsAbstract(value);
+										}}
+									/>
+								}
+								label={'Template definition'}
+							/>
+						</FormGroup>
+					</MuiTooltip>
+
+					<MuiTooltip
+						title={(!!isStatic
+							? validateCanBecomeNonStatic(entity)
+							: validateCanBecomeStatic(entity)
+						)
+							.map((e) => errorCodeToMessage(e.code))
+							.join('\n')}
+						placement='bottom'
+						arrow
+						enterDelay={
+							(!!isStatic
+								? validateCanBecomeNonStatic(entity)
+								: validateCanBecomeStatic(entity)
+							).length
+								? 100
+								: 400
+						}
+						leaveDelay={200}
+					>
+						<FormGroup>
+							<FormControlLabel
+								control={
+									<Checkbox
+										disabled={
+											!entity.editable || isStatic
+												? !!validateCanBecomeNonStatic(entity).length
+												: !!validateCanBecomeStatic(entity).length
+										}
+										className='definition-entity-builder--static-checkbox'
+										checked={isStatic}
+										onChange={(e) => {
+											const value = e.target.checked;
+											setIsStatic(value);
+										}}
+									/>
+								}
+								label={'Single global copy'}
+							/>
+						</FormGroup>
+					</MuiTooltip>
+				</div>
+			</Collapse>
+		</section>
+	);
+};
+
+const DefinitionEntityDialogContent: React.FC<
+	IDefinitionEntityDialogContentProps
+> = ({ onClose, project, ready }) => {
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: DefinitionEntityState | null =
+		(project?.logic?.get(entityId) as DefinitionEntityState | null) || null;
+
+	const onEscapePressed = useCallback(
+		(e: KeyboardEvent) => {
+			// Or close the dialog if there is only one tab
+			onClose(e);
+		},
+		[onClose]
+	);
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	useEffect(() => {
+		project?.on('escape-key-press', onEscapePressed);
+
+		if (!!entity) {
+			project?.on(entity.id, () => {
+				forceUpdate();
+			});
+		}
+
+		return () => {
+			project?.off('escape-key-press', onEscapePressed);
+		};
+	}, [project, entity, onEscapePressed]);
+
+	if (!project || !entity) {
+		if (!!project && project.hasLoadedLogic && !entity) {
+			popupNotification({
+				color: 'error',
+				text: 'This definition node does not exist in the current version of the project',
+			});
+			onClose(null);
+			return;
+		}
+
+		return (
+			<DialogLoader
+				title='Definition node'
+				subtitle='Definition builder'
+				onClose={onClose}
+			/>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				overflow: 'hidden',
+				paddingBottom: 20,
+			}}
+		>
+			<EntityDialogHeader entity={entity} project={project} onClose={onClose} />
+
+			<div
+				style={{
+					display: 'flex',
+					flexGrow: 1,
+					overflowY: 'scroll',
+				}}
+			>
+				{/* We need the 'span' for the react ref */}
+				<span
+					style={{
+						maxHeight: '100%',
+						maxWidth: '100%',
+						flexGrow: 1,
+						height: '100%',
+					}}
+				>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%',
+							gap: '4px',
+							justifyContent: 'space-between',
+						}}
+					>
+						<span
+							style={{
+								maxWidth: '100%',
+								maxHeight: '100%',
+								overflowY: 'scroll',
+								display: 'flex',
+								flexDirection: 'column',
+								height: '100%',
+							}}
+						>
+							<EntityMetadataSection project={project} entity={entity} />
+
+							<hr
+								style={{
+									margin: '1px 0',
+									border: '1px solid rgba(0,0,0,0.08)',
+								}}
+							/>
+
+							<BaseFunctionalitySection project={project} entity={entity} />
+
+							<hr
+								style={{
+									margin: '1px 0',
+									border: '1px solid rgba(0,0,0,0.08)',
+								}}
+							/>
+
+							<EntityInteractivitySection project={project} entity={entity} />
+						</span>
+
+						<div
+							style={{
+								alignSelf: 'flex-start',
+								display: 'flex',
+								flexDirection: 'row',
+								justifyContent: 'flex-end',
+								width: '100%',
+								gap: '16px',
+								padding: '0 40px',
+							}}
+						>
+							<Button
+								id='definition-entity-dialog-done-button'
+								onClick={(e: any) => {
+									onClose?.(e);
+								}}
+								color='primary'
+							>
+								Done
+							</Button>
+						</div>
+					</div>
+				</span>
+			</div>
+		</div>
+	);
+};
+
+export default DefinitionEntityDialogContent;