@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/global-event/GlobalEvent.tsx

@@ -0,0 +1,475 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	ChangeSet,
+	EntityId,
+	EntityType,
+	ProjectState,
+	resolveEntityName,
+	GlobalEventState,
+	ActionDescriptorState,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	toSentenceCase,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import {
+	Alert,
+	Autocomplete,
+	TextField,
+	Tooltip as MuiTooltip,
+	Box,
+	Stack,
+	IconButton,
+	Collapse,
+} from '@mui/material';
+import { EditorService } from '../../../services/editor';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import Button from '../../../lib/button/Button';
+import { useParams } from 'react-router-dom';
+import EntityIcon from '../../entity-icon/EntityIcon';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { debounce } from '../../../utils';
+
+export interface IGlobalEventProps {
+	project: EditorService;
+	entity?: GlobalEventState;
+	onClose?: (e: any) => void;
+}
+
+export enum GlobalEventError {
+	NameRequired = 'name-required',
+	IncompleteDataType = 'incomplete-data-type',
+}
+
+export function fromGlobalEventErrorToReadableMessage(
+	error: GlobalEventError
+): string {
+	switch (error) {
+		case GlobalEventError.NameRequired:
+			return 'Name is required';
+		default:
+			return toSentenceCase(error);
+	}
+}
+
+function calculateGlobalEventCreationFormErrors(
+	entity: GlobalEventState
+): GlobalEventError[] {
+	const errors: GlobalEventError[] = [];
+
+	if (!entity.name) {
+		errors.push(GlobalEventError.NameRequired);
+	}
+
+	return errors;
+}
+
+const GlobalEvent: React.FC<IGlobalEventProps> = ({
+	project,
+	entity: _entity,
+	onClose,
+}) => {
+	const [updateKey, setUpdateKey] = useState(0);
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: GlobalEventState | null =
+		_entity ||
+		(project?.logic?.get(entityId) as GlobalEventState | null) ||
+		null;
+
+	const [entityName, _] = useState<string>(entity.name);
+	const [entityDescription, setEntityDescription] = useState<string>(
+		entity.description
+	);
+
+	const [implementsValue, setImplementsValue] =
+		useState<ActionDescriptorState | null>(entity.implements || null);
+
+	const [metadataSectionOpen, setMetadataSectionOpen] = useState(true);
+	const [baseFunctionalitySectionOpen, setBaseFunctionalitySectionOpen] =
+		useState(false);
+
+	const debouncedOnChangeDescription = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+					),
+				);
+
+				setUpdateKey((prev) => prev + 1);
+				entity?.metaSync({ description: value || null }, changeSet);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			600,
+			false
+		),
+		[]
+	);
+
+	const [errors, setErrors] = useState<GlobalEventError[]>(
+		calculateGlobalEventCreationFormErrors(entity)
+	);
+
+	useEffect(() => {
+		const newErrors = calculateGlobalEventCreationFormErrors(entity);
+		setErrors(newErrors);
+		project.emit(entity.parent.id, {});
+	}, [entityName, updateKey]);
+
+	const implementsOptions = useMemo((): ActionDescriptorState[] => {
+		return project.logic.globalEventActionDescriptors;
+	}, [entity.parent]);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexGrow: 1,
+				height: '100%',
+				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%',
+						}}
+					>
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: metadataSectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Name and description'
+								subtitle='Add a description for this event trigger'
+								hideShowSuffix='the name and description section'
+								open={metadataSectionOpen}
+								onToggle={() => setMetadataSectionOpen(!metadataSectionOpen)}
+							/>
+
+							<Collapse in={metadataSectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 12,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<TextField
+										label='Trigger description'
+										variant='outlined'
+										disabled={!entity.editable}
+										fullWidth
+										multiline
+										minRows={3}
+										size='small'
+										value={entityDescription || ''}
+										onChange={(e) => {
+											setEntityDescription(e.target.value);
+											debouncedOnChangeDescription(e.target.value);
+										}}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: baseFunctionalitySectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Base functionality'
+								subtitle='Link this trigger to built-in functionality'
+								hideShowSuffix='the base functionality section'
+								open={baseFunctionalitySectionOpen}
+								onToggle={() =>
+									setBaseFunctionalitySectionOpen(!baseFunctionalitySectionOpen)
+								}
+							/>
+
+							<Collapse in={baseFunctionalitySectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<Autocomplete
+										id='implements'
+										options={implementsOptions}
+										disabled={!entity.editable}
+										getOptionLabel={(option) =>
+											resolveEntityName(option, project.logic)
+										}
+										isOptionEqualToValue={(option, value) =>
+											option.id === value.id
+										}
+										disableClearable
+										value={implementsValue}
+										getOptionDisabled={(option) => {
+											const alreadyImplemented = !!project.logic.events.find(
+												(activeGlovalEvent) =>
+													activeGlovalEvent.id !== entity.id &&
+													activeGlovalEvent.implements?.id === option.id
+											);
+
+											return alreadyImplemented;
+										}}
+										renderOption={(props, option, { selected }) => {
+											const { key, ...optionProps } = props;
+											return (
+												<MuiTooltip
+													key={key}
+													title={(() => {
+														const alreadyImplemented =
+															!!project.logic.events.find(
+																(activeGlovalEvent) =>
+																	activeGlovalEvent.id !== entity.id &&
+																	activeGlovalEvent.implements?.id === option.id
+															);
+
+														if (alreadyImplemented) {
+															return 'This functionality is already implemented by another trigger, you can add your logic to that trigger on the canvas instead.';
+														}
+
+														return '';
+													})()}
+													placement='bottom'
+													arrow
+													enterDelay={
+														(() => {
+															const alreadyImplemented =
+																!!project.logic.events.find(
+																	(activeGlovalEvent) =>
+																		activeGlovalEvent.id !== entity.id &&
+																		activeGlovalEvent.implements?.id ===
+																			option.id
+																);
+
+															return alreadyImplemented;
+														})()
+															? 100
+															: 400
+													}
+													leaveDelay={200}
+												>
+													<Box
+														component='li'
+														sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+														{...optionProps}
+													>
+														<Stack direction='row' gap={1} alignItems='center'>
+															<EntityIcon entity={option} project={project} />
+															{resolveEntityName(option, project.logic)}
+														</Stack>
+													</Box>
+												</MuiTooltip>
+											);
+										}}
+										onChange={(e, newValue) => {
+											const changeSet = project.logic.addChangeSet(
+												new ChangeSet(
+													project.logic,
+													ProjectState.sessionAuthor,
+													new Date().toISOString(),
+													entity,
+													false,
+													StateMutationAction.ChangeGlobalEventType,
+												),
+											);
+
+											entity.setImplements(newValue, changeSet);
+											setImplementsValue(newValue);
+
+											project.renderAndCloseChangeSet(changeSet);
+										}}
+										renderInput={(params) => (
+											<TextField
+												{...params}
+												label='Implements'
+												variant='outlined'
+												size='small'
+											/>
+										)}
+									/>
+								</div>
+							</Collapse>
+						</section>
+					</span>
+
+					{errors.length > 0 && (
+						<div
+							style={{
+								marginTop: 20,
+								marginRight: 40,
+								marginLeft: 80,
+							}}
+						>
+							<Alert severity='error'>
+								{errors.length === 1 ? (
+									<span
+										style={{
+											display: 'flex',
+											alignItems: 'center',
+											gap: 6,
+										}}
+									>
+										<h4
+											style={{
+												margin: 0,
+												display: 'flex',
+											}}
+										>
+											Error:
+										</h4>
+										<p
+											style={{
+												margin: 0,
+												display: 'flex',
+											}}
+										>
+											{fromGlobalEventErrorToReadableMessage(errors[0])}
+										</p>
+									</span>
+								) : (
+									<>
+										<h4
+											style={{
+												margin: 0,
+											}}
+										>
+											Errors
+										</h4>
+										<br className='quarter-space' />
+										<ul
+											style={{
+												listStyleType: 'none',
+												padding: 0,
+											}}
+										>
+											{errors.map((error, index) => (
+												<li
+													key={index}
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+													}}
+												>
+													{/* Circle */}
+													<span
+														style={{
+															fontSize: 10,
+															marginRight: 5,
+														}}
+													>
+														&#9679;
+													</span>
+													<p
+														style={{
+															margin: 0,
+															// fontSize: 10,
+														}}
+													>
+														{fromGlobalEventErrorToReadableMessage(error)}
+													</p>
+												</li>
+											))}
+										</ul>
+									</>
+								)}
+							</Alert>
+						</div>
+					)}
+
+					<div
+						style={{
+							alignSelf: 'flex-start',
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'flex-end',
+							width: '100%',
+							gap: '16px',
+							padding: '0 40px',
+						}}
+					>
+						<Button
+							id='global-event--done-button'
+							onClick={(e: any) => {
+								onClose?.(e);
+							}}
+							color='primary'
+							disabled={errors.length > 0}
+						>
+							Done
+						</Button>
+						<Tooltip
+							anchorQuerySelector='#global-event--done-button'
+							placement='bottom'
+							openDelay={100}
+						>
+							{errors.length > 0
+								? `Resolve the errors to save the ${lowercaseFirstLetter(READABLE_ENTITY_TYPES[entity.type].singular)}`
+								: `Save the ${lowercaseFirstLetter(READABLE_ENTITY_TYPES[entity.type].singular)}`}
+						</Tooltip>
+					</div>
+				</div>
+			</span>
+		</div>
+	);
+};
+
+export default GlobalEvent;

package/src/components/dialogs/global-event/GlobalEventDialogContent.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { IDialogProps } from '../../../lib/dialog/Dialog';
+import { EditorService } from '../../../services/editor';
+import {
+	EntityId,
+	EntityType,
+	GlobalEventState,
+} from '@elyx-code/project-logic-tree';
+import { useParams } from 'react-router-dom';
+import GlobalEvent from './GlobalEvent';
+import DialogLoader from '../../DialogLoader';
+import { popupNotification } from '../../../popup-notification';
+import EntityDialogHeader from '../../EntityDialogHeader';
+
+export interface IGlobalEventDialogContentProps extends IDialogProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+export interface IGlobalEventSectionProps {
+	entity: GlobalEventState;
+	project: EditorService;
+}
+
+const GlobalEventDialogContent: React.FC<IGlobalEventDialogContentProps> = ({
+	onClose,
+	project,
+	ready,
+}) => {
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: GlobalEventState | null =
+		(project?.logic?.get(entityId) as GlobalEventState | 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 system trigger does not exist in the current version of the project',
+			});
+			onClose(null);
+			return;
+		}
+
+		return (
+			<DialogLoader
+				title='System trigger node'
+				subtitle='System event trigger 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%',
+					}}
+				>
+					<GlobalEvent
+						entity={entity}
+						project={project}
+						onClose={(e) => {
+							onClose(e);
+						}}
+					/>
+				</span>
+			</div>
+		</div>
+	);
+};
+
+export default GlobalEventDialogContent;