@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/TestMenu.tsx

@@ -0,0 +1,523 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import LoadingClock from '../../assets/Clock-11.1s-18px.svg';
+import ResumeIcon from '../../assets/resume-icon-14px.png';
+import WarningIcon from '../../assets/warning-sign-24px.png';
+// @ts-ignore
+// import AnimatedCheckmark from '../../assets/checkmark-animation.gif';
+import './test-menu.css';
+import { EditorService } from '../../services/editor';
+import TestMenuValidationDropdown from './TestMenuValidationDropdown';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import Popup from '../../lib/popup/Popup';
+import { onClickAway } from '../../utils/DOM';
+import {
+	FilledInput,
+	FormControl,
+	InputLabel,
+	ThemeProvider,
+} from '@mui/material';
+import { theme } from '../../theme';
+import { IComponentLifecycleProps } from '../../utils/react';
+import { ExecutionState } from '../../services/execution';
+
+export interface ITestMenuProps extends IComponentLifecycleProps {
+	project: EditorService;
+}
+
+const TestMenu: React.FC<ITestMenuProps> = (props) => {
+	const rootElementRef = useRef(null);
+
+	const [isSaveValuesMenuOpen, setIsSaveValuesMenuOpen] = useState(false);
+	const [isExecutionDelayMenuOpen, setIsExecutionDelayMenuOpen] =
+		useState(false);
+
+	const [saveValues, setSaveValues] = useState<
+		'save-values' | 'discard-values'
+	>(
+		props.project.test?.persistExecutionValues
+			? 'save-values'
+			: 'discard-values'
+	);
+	const [executionDelay, setExecutionDelay] = useState<number>(
+		props.project.test?.DELAY || 0
+	);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const onSaveValuesClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+
+		const isOpen = isSaveValuesMenuOpen;
+
+		if (isOpen) {
+			setIsSaveValuesMenuOpen(false);
+			return;
+		}
+
+		const popupElement = document.getElementById(
+			'save-values-test-button-popup'
+		);
+
+		onClickAway(popupElement, () => {
+			setIsSaveValuesMenuOpen(false);
+		});
+
+		setIsSaveValuesMenuOpen(true);
+
+		// If notifications are open, close them
+		if (isExecutionDelayMenuOpen) {
+			setIsExecutionDelayMenuOpen(false);
+		}
+	};
+
+	const onExecutionDelayClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+
+		const isOpen = isExecutionDelayMenuOpen;
+
+		if (isOpen) {
+			setIsExecutionDelayMenuOpen(false);
+			return;
+		}
+
+		const popupElement = document.getElementById(
+			'execution-delay-test-button-popup'
+		);
+
+		onClickAway(popupElement, () => {
+			setIsExecutionDelayMenuOpen(false);
+		});
+
+		setIsExecutionDelayMenuOpen(true);
+
+		// If notifications are open, close them
+		if (isSaveValuesMenuOpen) {
+			setIsSaveValuesMenuOpen(false);
+		}
+	};
+
+	const handlePauseButtonClick = () => {
+		if (props.project.test?.state === ExecutionState.Running) {
+			props.project.test?.pause();
+		} else if (props.project.test?.state === ExecutionState.Paused) {
+			props.project.test?.resume();
+		}
+	};
+
+	const handleExecutionButtonClick = () => {
+		if (props.project.test?.state === ExecutionState.Paused) {
+			props.project.test?.resume();
+			return;
+		}
+
+		if (props.project.test?.state === ExecutionState.Running) {
+			// props.project.test?.pause();
+			return;
+		}
+
+		if (props.project.test?.state === ExecutionState.FinishedSuccess) {
+			props.project.test?.restart();
+			return;
+		}
+
+		if (props.project.test?.state === ExecutionState.NotStarted) {
+			if (!props.project.test?.validation.length) {
+				props.project.test?.start();
+			} else {
+				props.project.test?.handleInvalidLogic();
+			}
+		}
+	};
+
+	const resolveExecutionButtonDisabled = (): boolean => {
+		if (props.project.test?.state === ExecutionState.Paused) {
+			return !!props.project.test?.validation.length;
+		}
+
+		if (props.project.test?.state === ExecutionState.Running) {
+			return (
+				!!props.project.test?.validation.length ||
+				props.project.test?.state === ExecutionState.Running
+			);
+		}
+
+		if (
+			[ExecutionState.FinishedSuccess, ExecutionState.FinishedError].includes(
+				props.project.test?.state
+			)
+		) {
+			return false;
+		}
+
+		return !!props.project.test?.validation.length;
+	};
+
+	const resolveExecutionButtonContent = (): React.ReactNode => {
+		if (props.project.test?.state === ExecutionState.Paused) {
+			return (
+				<span className='resume-icon-container'>
+					<img
+						src={ResumeIcon}
+						alt='Resume execution icon'
+						style={{
+							width: '12px',
+							height: '12px',
+						}}
+					/>
+				</span>
+			);
+		}
+
+		if (props.project.test?.state === ExecutionState.Running) {
+			return (
+				<span className='loading-icon-container'>
+					<img src={LoadingClock} alt='Loading' />
+				</span>
+			);
+		}
+
+		if (
+			[ExecutionState.FinishedSuccess, ExecutionState.FinishedError].includes(
+				props.project.test?.state
+			)
+		) {
+			return (
+				/* Execute again icon */
+				<i className='fa-solid fa-redo' />
+			);
+		}
+
+		return (
+			<>
+				{!!props.project.test?.validation.length && (
+					<img src={WarningIcon} className='warning-icon' alt='Warning' />
+				)}
+				<i className='fa-solid fa-play' />
+			</>
+		);
+	};
+
+	const resolveExecutionButtonTooltip = (): React.ReactNode => {
+		if (props.project.test?.state === ExecutionState.Paused) {
+			return (
+				<Tooltip anchorQuerySelector='#play-test-button' placement='top'>
+					{'Resume execution'}
+				</Tooltip>
+			);
+		}
+
+		if (props.project.test?.state === ExecutionState.Running) {
+			return (
+				<Tooltip anchorQuerySelector='#play-test-button' placement='top'>
+					{'Logic sequence is running...'}
+				</Tooltip>
+			);
+		}
+
+		if (
+			[ExecutionState.FinishedSuccess, ExecutionState.FinishedError].includes(
+				props.project.test?.state
+			)
+		) {
+			// Click to run again
+			return (
+				<Tooltip anchorQuerySelector='#play-test-button' placement='top'>
+					{'Run again'}
+				</Tooltip>
+			);
+		}
+
+		return !props.project.test?.validation.length ? (
+			<Tooltip anchorQuerySelector='#play-test-button' placement='top'>
+				{'Run this logic'}
+			</Tooltip>
+		) : (
+			<TestMenuValidationDropdown project={props.project} />
+		);
+	};
+
+	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?.();
+	}, []);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			// If the user presses the 'Escape' key, close the menu
+			if (
+				e.key === 'Escape' &&
+				props.project.test?.state !== ExecutionState.Running
+			) {
+				props.project.test?.close();
+			}
+
+			// If the user presses the 'Enter' key,
+			// If the execution delay menu is open, close it
+			// If the save values menu is open, close it
+			// If none of the menus are open, run the test
+			if (e.key === 'Enter') {
+				if (!isExecutionDelayMenuOpen && !isSaveValuesMenuOpen) {
+					handleExecutionButtonClick();
+				}
+
+				if (isExecutionDelayMenuOpen) {
+					setIsExecutionDelayMenuOpen(false);
+				}
+
+				if (isSaveValuesMenuOpen) {
+					setIsSaveValuesMenuOpen(false);
+				}
+			}
+		};
+
+		// A single handler for all events that just force an update
+		const handleForceUpdate = () => {
+			forceUpdate();
+		};
+
+		// --- DOM / Listener Setup ---
+		document.addEventListener('keydown', handleKeyDown);
+
+		const menuElement = document.querySelector('.test-menu') as HTMLElement;
+
+		// Slide down animation
+		if (menuElement) {
+			// Ease in, then stay
+			menuElement.style.animation = 'slide-bottom-up 0.5s ease-in-out';
+
+			const animationTimeout = setTimeout(() => {
+				menuElement.style.bottom = '20px';
+			}, 500);
+		}
+
+		// --- Subscribe to Project Events ---
+		props.project.on('execution-start', handleForceUpdate);
+		props.project.on('execution-end', handleForceUpdate);
+		props.project.on('test-paused', handleForceUpdate);
+		props.project.on('test-resumed', handleForceUpdate);
+		props.project.on('test-entity-added', handleForceUpdate);
+
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+
+			props.project.off('execution-start', handleForceUpdate);
+			props.project.off('execution-end', handleForceUpdate);
+			props.project.off('test-paused', handleForceUpdate);
+			props.project.off('test-resumed', handleForceUpdate);
+			props.project.off('test-entity-added', handleForceUpdate);
+
+			// It's also good practice to clear timeouts on unmount
+			// (Although this one is short-lived, it's a good habit)
+			// clearTimeout(animationTimeout);
+			// Note: You'd need to define animationTimeout outside the if(menuElement) block to do this.
+		};
+	}, [
+		props.project,
+		isExecutionDelayMenuOpen,
+		isSaveValuesMenuOpen,
+		handleExecutionButtonClick,
+		updateKey,
+	]);
+
+	useEffect(() => {
+		const menuElement = document.querySelector('.test-menu') as HTMLElement;
+		menuElement.style.bottom = '20px';
+	}, [props.project.test?.state]);
+
+	const handleSetDelay = (e: any) => {
+		const value = parseInt(e.target.value);
+
+		if (value > 3000) {
+			setExecutionDelay(3000);
+			props.project.test?.setDelay(3000);
+		} else if (value < 0) {
+			setExecutionDelay(0);
+			props.project.test?.setDelay(0);
+		} else {
+			setExecutionDelay(value);
+			props.project.test?.setDelay(value);
+		}
+	};
+
+	const handleSetPeristExecutionValues = (
+		value: 'save-values' | 'discard-values'
+	) => {
+		setSaveValues(value);
+		props.project.test?.setPersistExecutionValues(value === 'save-values');
+	};
+
+	return (
+		<ThemeProvider theme={theme}>
+			<div className='test-menu fixed-bottom-container' ref={rootElementRef}>
+				<div className='actions-container'>
+					<div className='test-menu-button-group'>
+						<button
+							id='close-test-button'
+							className='test-menu-button close-button left-test-button'
+							onClick={() => {
+								props.project.test?.close();
+							}}
+						>
+							<i className='fa-solid fa-xmark' />
+						</button>
+						<Tooltip anchorQuerySelector='#close-test-button' placement='top'>
+							{'Exit execution mode'}
+						</Tooltip>
+
+						{/* 2 pixel separator vertical bar */}
+						<div className='test-menu-button-group-separator' />
+
+						<button
+							id='save-values-test-button'
+							className='test-menu-button test-menu-button-label-group save-values-button right-test-button'
+							onClick={onSaveValuesClick}
+						>
+							<p className='test-menu-button-top-label light-secondary-label'>
+								Exit
+							</p>
+							<span className='test-menu-button-main-label-group'>
+								<p className='test-menu-button-main-label light-main-label'>
+									{saveValues === 'save-values' ? 'Save' : 'Discard'}
+								</p>
+								<p className='test-menu-button-sub-label light-secondary-label'>
+									values
+								</p>
+							</span>
+						</button>
+
+						<DropdownMenuPopup
+							popupOptions={{
+								open: isSaveValuesMenuOpen,
+								anchorQuerySelector: '#save-values-test-button',
+								placement: 'top',
+								id: 'save-values-test-button-popup',
+							}}
+							value={saveValues}
+							options={[
+								{
+									label: 'Save values on exit',
+									value: 'save-values',
+									iconStart: 'fa-solid fa-check-to-slot',
+									onClick: handleSetPeristExecutionValues,
+								},
+								{
+									label: 'Discard values on exit',
+									value: 'discard-values',
+									iconStart: 'fa-solid fa-ban',
+									onClick: handleSetPeristExecutionValues,
+								},
+							]}
+						/>
+					</div>
+
+					<div className='test-menu-button-group'>
+						<button
+							id='pause-test-button'
+							disabled={
+								props.project.test?.state !== ExecutionState.Running &&
+								props.project.test?.state !== ExecutionState.Paused
+							}
+							className='test-menu-button pause-button'
+							onClick={handlePauseButtonClick}
+						>
+							{props.project.test?.state === ExecutionState.Paused ? (
+								<i className='fa-solid fa-play' />
+							) : (
+								<i className='fa-solid fa-pause' />
+							)}
+						</button>
+						<Tooltip anchorQuerySelector='#pause-test-button' placement='top'>
+							{props.project.test?.state === ExecutionState.Paused
+								? 'Resume execution'
+								: 'Pause execution'}
+						</Tooltip>
+					</div>
+
+					<div className='test-menu-button-group'>
+						<button
+							id='execution-delay-test-button'
+							className='test-menu-button test-menu-button-label-group execution-delay-button left-test-button'
+							onClick={onExecutionDelayClick}
+						>
+							<p className='test-menu-button-top-label dark-secondary-label'>
+								Delay
+							</p>
+							<span className='test-menu-button-main-label-group'>
+								<p className='test-menu-button-main-label dark-main-label'>
+									{isNaN(executionDelay) ? '0' : executionDelay.toString()}
+								</p>
+								<p className='test-menu-button-sub-label dark-secondary-label'>
+									ms
+								</p>
+							</span>
+						</button>
+						<Popup
+							anchorQuerySelector='#execution-delay-test-button'
+							arrowClasses={['dropdown-menu-card-arrow']}
+							placement='top'
+							open={isExecutionDelayMenuOpen}
+							id='execution-delay-test-button-popup'
+						>
+							<div className='dropdown-menu-card'>
+								<FormControl fullWidth variant='filled'>
+									<InputLabel htmlFor='filled-adornment-delay'>
+										Milliseconds
+									</InputLabel>
+									<FilledInput
+										id='filled-adornment-delay'
+										type='number'
+										value={executionDelay}
+										onChange={handleSetDelay}
+										inputProps={{
+											min: 0,
+											max: 3000,
+										}}
+									/>
+								</FormControl>
+							</div>
+						</Popup>
+
+						{/* 2 pixel separator vertical bar */}
+						<div className='test-menu-button-group-separator' />
+
+						<button
+							disabled={resolveExecutionButtonDisabled()}
+							id='play-test-button'
+							className='test-menu-button play-button right-test-button'
+							onClick={handleExecutionButtonClick}
+						>
+							{resolveExecutionButtonContent()}
+						</button>
+						{resolveExecutionButtonTooltip()}
+					</div>
+				</div>
+			</div>
+		</ThemeProvider>
+	);
+};
+
+export default TestMenu;

package/src/components/draggable-entity-card/TestMenuValidationDropdown.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import '../../lib/dropdown/dropdown-menu.css';
+import Popup from '../../lib/popup/Popup';
+import {
+	getCanvasEntityDraggableContainerDOMId,
+} from '../../services/editor/ui';
+import { EditorService } from '../../services/editor';
+import {
+	getParentCanvasEntity,
+} from '@elyx-code/project-logic-tree';
+import EntityErrorListItem from '../entity-error/EntityErrorListItem';
+
+export interface ITestMenuValidationDropdownProps {
+	project: EditorService;
+}
+
+const TestMenuValidationDropdown: React.FC<ITestMenuValidationDropdownProps> = (
+	props
+) => {
+	const resolveValidationHeaderText = (): string => {
+		if (props.project.test.validation.length > 0) {
+			// Set errors on the specific fields that are missing values
+			// Return the reason why the test is invalid
+			return `${props.project.test.validation.length} logic error${
+				props.project.test.validation.length > 1 ? 's' : ''
+			} found in the nodes covered by this execution`;
+		}
+		return '';
+	};
+
+	return (
+		<Popup
+			anchorQuerySelector='#play-test-button'
+			closeDelay={400}
+			arrowClasses={['dropdown-menu-card-arrow']}
+			placement='top'
+			open
+		>
+			<div className='dropdown-menu-card'>
+				<header
+					style={{
+						padding: '10px 20px',
+						borderBottom: '1px solid #e0e0e0',
+						fontWeight: 400,
+						fontSize: '14px',
+						color: 'var(--color-main-grey)',
+					}}
+				>
+					{resolveValidationHeaderText()}
+				</header>
+				<ul
+					className='entity-error__results'
+					style={{ width: '100%' }}
+					onScroll={(e: any) => {
+						e.stopPropagation();
+						document.body.style.overflow = 'hidden';
+					}}
+				>
+					{props.project.test.validation.map((error) => (
+						<EntityErrorListItem
+							error={error}
+							onClick={() => {
+								// If the zoom is too small, zoom in to the entity
+								if (props.project.canvas?.currentScale < 0.7) {
+									props.project.canvas?.zoomTo(0.7);
+								} else if (props.project.canvas?.currentScale > 1) {
+									props.project.canvas?.zoomTo(1);
+								}
+
+								const canvasEntity = getParentCanvasEntity(error.entity);
+
+								props.project.canvas?.scrollToObjectById(
+									getCanvasEntityDraggableContainerDOMId(canvasEntity)
+								);
+							}}
+						/>
+					))}
+				</ul>
+			</div>
+		</Popup>
+	);
+};
+
+export default TestMenuValidationDropdown;