@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,643 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import './draggable-entity-card.css';
+import {
+	ENTITY_COLORS,
+	ENTITY_TEST_FA_ICON_NAMES,
+	entityDisabledReasonToShortReadableError,
+	getCanvasEntityExecutionNodeId,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+} from '../../services/editor/ui';
+import { Canvas } from '../../lib/canvas';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import {
+	EntityType,
+	InternalCallState,
+	VariableState,
+	CanvasEntityDisabledReason,
+	CanvasEntityTestingDisabledReason,
+	CanvasEntityConnectionDisabledReason,
+} from '@elyx-code/project-logic-tree';
+import { mergeRefs } from '../../utils/react';
+import { ExecutionState } from '../../services/execution';
+import { Test } from '../../services/execution/test-instance';
+import LoadingClock from '../../assets/Clock-11.1s-28px.svg';
+import { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+
+interface IInternalCallExecutionNodeProps {
+	call: InternalCallState;
+	canvasElement: CanvasEntityElement;
+	entity: VariableState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+function resolveInstantTestExecutionCommandLabel() {
+	if (navigator.userAgent.indexOf('Mac') !== -1) {
+		return '⌘ + click';
+	} else if (navigator.userAgent.indexOf('Windows') !== -1) {
+		return 'ctrl + click';
+	} else {
+		return '';
+	}
+}
+
+export default function InternalCallExecutionNode(
+	props: IInternalCallExecutionNodeProps,
+) {
+	const ownDOMId = getCanvasEntityExecutionNodeId(props.call);
+	const rootElementRef = useRef(null);
+	const [hasDragged, setHasDragged] = useState(false);
+	const [hasEnded, setHasEnded] = useState(false);
+	const isExecuting = props.project.test?.state === ExecutionState.Running;
+	const instantExecHintText = resolveInstantTestExecutionCommandLabel();
+
+	const canBeAddedToCurrentTest = props.project.test?.getCanBeAddedToTest(
+		props.call,
+	);
+	const canBeRemovedFromCurrentTest =
+		props.project.test?.getCanBeRemovedFromTest(props.call);
+
+	const entityColor = ENTITY_COLORS[props.call.type];
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const resolveTooltipContent = (): React.ReactNode => {
+		if (!!props.project.canvas?.activeConnectionDrawing) {
+			return null;
+		} else if (isExecuting) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Executing logic...
+				</p>
+			);
+		} else if (canBeRemovedFromCurrentTest) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Remove from current test
+				</p>
+			);
+		} else if (canBeAddedToCurrentTest) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Add to current test
+				</p>
+			);
+		} else {
+			return (
+				<>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						Test this logic
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						Click to start test setup
+					</p>
+					{instantExecHintText && (
+						<>
+							<br />
+							<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+								Or {instantExecHintText} to run instantly
+							</p>
+						</>
+					)}
+					<br />
+					{/* Line */}
+					<hr
+						style={{
+							width: '100%',
+							border: '1px solid rgba(255, 255, 255, 0.5)',
+							margin: '12px 0',
+						}}
+					/>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						Click and drag
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						To connect to a caller node
+					</p>
+				</>
+			);
+		}
+	};
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent containerClasses={['tooltip', 'tooltip--large-font']}>
+				<div
+					style={{
+						display: 'flex',
+						padding: '8px',
+						alignItems: 'center',
+						flexDirection: 'column',
+					}}
+				>
+					{resolveTooltipContent()}
+				</div>
+			</CanvasPopupBaseComponent>
+		),
+		[
+			props.call,
+			isExecuting,
+			canBeAddedToCurrentTest,
+			canBeRemovedFromCurrentTest,
+		],
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id: 'canvas--test-entity-button--' + props.call.id,
+			arrowClasses: ['tooltip-arrow'],
+			anchorQuerySelector: '#' + ownDOMId,
+			parentCanvasObject: props.canvasElement.draggableObject,
+			placement: 'top',
+		},
+		memoizedCanvasPopupBody,
+	)
+		.onBeforeShow(() => {
+			if (!!resolveTooltipContent()) {
+				return true;
+			}
+
+			return false;
+		})
+		.setupHover({
+			closeDelay: 400,
+			openDelay: 600,
+		});
+
+	const resolveIconString = () => {
+		const testIsExecuting =
+			props.project.test?.state === ExecutionState.Running;
+
+		const hasBeenExecuted = props.project.test?.executed.includes(props.call);
+		const isBeingExecuted = props.project.test?.executing.includes(props.call);
+		const isSkipped = props.project.test?.skipped.includes(props.call);
+		const isPartOfTest = props.project.test?.entities.includes(props.call);
+
+		// An element is queued for execution if it is in the test,
+		// The test has started executing
+		// and has not been yet executed
+		// and has not been skipped
+		// and is not currently being executed
+		const isQueued =
+			isPartOfTest &&
+			testIsExecuting &&
+			!hasBeenExecuted &&
+			!isSkipped &&
+			!isBeingExecuted;
+
+		const isPaused = props.project.test?.state === ExecutionState.Paused;
+
+		if (isPaused) {
+			return 'fa-pause';
+		} else if (isQueued) {
+			return 'fa-hourglass-start';
+
+			// If it has already completed its execution
+		} else if (props.project.test?.executed.includes(props.call)) {
+			return 'fa-check';
+
+			// If it has been skipped and will not be executed
+		} else if (props.project.test?.skipped.includes(props.call)) {
+			return 'fa-ban';
+
+			// If it can be removed from the current test
+		} else {
+			if (canBeRemovedFromCurrentTest) {
+				return 'fa-minus';
+
+				// If it can be added to the current test
+			} else if (canBeAddedToCurrentTest) {
+				return 'fa-plus';
+
+				// If it is currently being executed
+			} else {
+				const iconName = ENTITY_TEST_FA_ICON_NAMES[props.call.type];
+
+				return 'fa-' + iconName;
+			}
+		}
+	};
+
+	const resolveIcon = (): React.ReactNode => {
+		// if the entity is currently in the list of being executed in the test
+		// then we show a loading icon
+		if (props.project.test?.executing.includes(props.call)) {
+			return (
+				<span
+					style={{
+						display: 'flex',
+						gap: '6px',
+						alignItems: 'center',
+						position: 'relative',
+					}}
+				>
+					<img src={LoadingClock} />
+				</span>
+			);
+
+			// If the entity has already been executed show the finished icon
+		} else {
+			return (
+				<span
+					style={{
+						display: 'flex',
+						gap: '6px',
+						alignItems: 'center',
+						position: 'relative',
+						left: '1px',
+						top: '1px',
+					}}
+				>
+					<i className={`fa-solid ${resolveIconString()}`} />
+				</span>
+			);
+		}
+	};
+
+	const handleClick = (e: MouseEvent) => {
+		setHasEnded(true);
+		setHasDragged(false);
+
+		Test.handleEntityTestButtonClick(e as MouseEvent, {
+			...props,
+			entity: props.call,
+		});
+	};
+
+	// Clean up the event listeners
+	const onMouseUp = useCallback(() => {
+		setHasEnded(true);
+		setHasDragged(false);
+		document.removeEventListener('mousemove', onMouseMove);
+		document.removeEventListener('mouseup', onMouseUp);
+	}, []);
+
+	// This function is triggered when dragging after clicking
+	// Its job is just to initiate the connection drawing once.
+	const onMouseMove = useCallback((e: MouseEvent) => {
+		if (hasDragged || hasEnded) {
+			return;
+		}
+
+		const call = props.call;
+		const permanentNodeElement = rootElementRef.current.querySelector(
+			'#' + ownDOMId,
+		);
+
+		// Consider the movement, and set having dragged as true
+		// ONLY when the mouse has moved outside the button
+		if (Math.abs(e.movementX) > 5 || Math.abs(e.movementY) > 5 || hasDragged) {
+			setHasDragged(true);
+
+			// Add 'canvas__node__active' class to the element
+			permanentNodeElement?.classList.add('canvas__node__active');
+
+			if (
+				permanentNodeElement &&
+				permanentNodeElement.classList.contains('invisible')
+			) {
+				permanentNodeElement.classList.remove('invisible');
+			}
+
+			props.project.startConnection({
+				nodeType: ConnectionNodeType.CalledBy,
+				target: call,
+				targetId: ownDOMId,
+				draggableObject: props.canvasElement.draggableObject,
+			});
+		}
+	}, []);
+
+	// This is the handler that will detect whether the user is trying to drag the element
+	const handleMouseDown = (e: MouseEvent) => {
+		setHasDragged(false);
+		setHasEnded(false);
+		// e.stopPropagation();
+
+		// Add mouse move event listener to detect dragging
+		document.addEventListener('mousemove', onMouseMove);
+		document.addEventListener('mouseup', onMouseUp);
+	};
+
+	const resolveDisabled = (): boolean => {
+		if (
+			[ExecutionState.Running, ExecutionState.Paused].includes(
+				props.project.test?.state,
+			)
+		) {
+			return true;
+		}
+
+		if (props.project.test?.hasSkipped(props.call)) {
+			return true;
+		}
+
+		// Filter out reasons that aren't relevant for the test button (current component)
+		const filteredOutParentReasons = props.parentDisabledReasons.filter(
+			(reason) =>
+				// We only care wether it can be added
+				reason !== CanvasEntityTestingDisabledReason.NotPartOfOngoingTest &&
+				reason !== CanvasEntityConnectionDisabledReason.NotInScope &&
+				!!reason,
+		);
+
+		if (filteredOutParentReasons.length) {
+			return true;
+		}
+
+		if (
+			!!props.project.onGoingConnectionNodeType &&
+			![
+				ConnectionNodeType.EntryPointCaller,
+				ConnectionNodeType.SuccessCaller,
+				ConnectionNodeType.ErrorCaller,
+			].includes(props.project.onGoingConnectionNodeType)
+		) {
+			return true;
+		}
+	};
+
+	const disabled = resolveDisabled();
+
+	const buttonRef = useRef<HTMLButtonElement>(null);
+	const mergedRefs = mergeRefs(buttonRef, canvasPopup.anchorRef);
+
+	useEffect(() => {
+		if (
+			!!props.project.onGoingConnectionCompatibleEntities?.[props.call.id] &&
+			[
+				ConnectionNodeType.EntryPointCaller,
+				ConnectionNodeType.ErrorCaller,
+				ConnectionNodeType.SuccessCaller,
+			].includes(props.project.onGoingConnectionNodeType)
+		) {
+			if (buttonRef.current) {
+				highlightElementIndefinetly(buttonRef.current);
+			}
+		}
+
+		if (
+			buttonRef.current &&
+			!props.project.onGoingConnectionCompatibleEntities?.[props.call.id]
+		) {
+			removeHighlightElementIndefinetly(buttonRef.current);
+			removeHighlightElementSuccess(buttonRef.current);
+		}
+
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!!payload.compatible?.[props.call.id] &&
+				[
+					ConnectionNodeType.EntryPointCaller,
+					ConnectionNodeType.ErrorCaller,
+					ConnectionNodeType.SuccessCaller,
+				].includes(payload.nodeType)
+			) {
+				if (buttonRef.current) {
+					highlightElementIndefinetly(buttonRef.current);
+				}
+			}
+		};
+
+		const handleConnectionEnd = () => {
+			if (buttonRef.current) {
+				removeHighlightElementIndefinetly(buttonRef.current);
+				removeHighlightElementSuccess(buttonRef.current);
+			}
+		};
+
+		const handleTestPaused = () => {
+			forceUpdate();
+		};
+
+		props.project.on('canvas-connection-start', handleConnectionStart);
+		props.project.on('canvas-connection-end', handleConnectionEnd);
+		props.project.on('test-paused', handleTestPaused);
+
+		return () => {
+			props.project.off('canvas-connection-start', handleConnectionStart);
+			props.project.off('canvas-connection-end', handleConnectionEnd);
+			props.project.off('test-paused', handleTestPaused);
+
+			// Also clean up any lingering highlights just in case
+			if (buttonRef.current) {
+				removeHighlightElementIndefinetly(buttonRef.current);
+				removeHighlightElementSuccess(buttonRef.current);
+			}
+		};
+	}, [
+		// All external values used in the effect must be listed here
+		props.project,
+		props.call.id,
+		buttonRef,
+		updateKey,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess,
+		props.project.onGoingConnectionCompatibleEntities,
+		props.project.onGoingConnectionNodeType,
+	]);
+
+	// When the entity is part of a variable declaration,
+	// which has a different internal calls being executed,
+	// we can't execute a new one, so we don't show the button
+	const downShow =
+		(props.entity.type === EntityType.VariableDeclaration ||
+			props.entity.type === EntityType.VariableInstance) &&
+		props.entity.internalCalls.some(
+			(call) => !!call.calledBy.length && call.id !== props.call.id,
+		);
+
+	if (downShow) {
+		return null;
+	}
+
+	return (
+		<span ref={rootElementRef}>
+			<button
+				ref={mergedRefs}
+				disabled={disabled}
+				className={[
+					'test-entity-button',
+					'test-entity-button--internal-call',
+					canBeAddedToCurrentTest ? 'large' : 'small',
+					'canvas-property__node__connected',
+					'canvas__large-node__internal-call',
+					isExecuting ? 'executing' : '',
+					disabled && !isExecuting ? 'disabled' : '',
+				].join(' ')}
+				id={ownDOMId}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: ownDOMId,
+				}}
+				style={{
+					backgroundColor: entityColor,
+				}}
+				onClick={(e: any) => {
+					if (disabled) {
+						return;
+					}
+
+					if (!hasDragged) {
+						handleClick(e);
+					}
+				}}
+				onMouseOver={(e: any) => {
+					if (!!props.project.canvas?.activeConnectionDrawing) {
+						if (
+							!disabled &&
+							props.project.onGoingConnectionSource &&
+							[
+								ConnectionNodeType.EntryPointCaller,
+								ConnectionNodeType.ErrorCaller,
+								ConnectionNodeType.SuccessCaller,
+							].includes(props.project.onGoingConnectionNodeType)
+						) {
+							props.project.onGoingConnectionTarget = props.call;
+							props.project.onGoingConnectionTargetId =
+								getCanvasEntityExecutionNodeId(props.call);
+
+							props.project.canvas?.activeConnectionDrawing.snap(
+								getCanvasEntityExecutionNodeId(props.call),
+							);
+
+							removeHighlightElementIndefinetly(buttonRef.current);
+							highlightElementSuccess(buttonRef.current);
+						}
+					} else if (
+						!!props.project.onGoingConnectionIncompatibleEntities?.[
+							props.call.id
+						]
+					) {
+						// Read the disabled reasons and add a tooltip to the mouse
+						const reasonsMessage =
+							props.project.onGoingConnectionIncompatibleEntities?.[
+								props.call.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',
+					);
+
+					if (disabled) {
+						return;
+					}
+					if (
+						!!props.project.canvas?.activeConnectionDrawing &&
+						props.project.onGoingConnectionCompatibleEntities?.[
+							props.call.id
+						] &&
+						[
+							ConnectionNodeType.EntryPointCaller,
+							ConnectionNodeType.ErrorCaller,
+							ConnectionNodeType.SuccessCaller,
+						].includes(props.project.onGoingConnectionNodeType)
+					) {
+						removeHighlightElementIndefinetly(buttonRef.current);
+						highlightElementIndefinetly(buttonRef.current);
+
+						if (
+							props.project.canvas?.activeConnectionDrawing?.snappedTo ===
+							getCanvasEntityExecutionNodeId(props.call)
+						) {
+							props.project.canvas?.activeConnectionDrawing?.unSnap();
+						}
+
+						if (
+							props.project.onGoingConnectionTarget === props.call &&
+							props.project.onGoingConnectionTargetId ===
+								getCanvasEntityExecutionNodeId(props.call) &&
+							[
+								ConnectionNodeType.EntryPointCaller,
+								ConnectionNodeType.ErrorCaller,
+								ConnectionNodeType.SuccessCaller,
+							].includes(props.project.onGoingConnectionNodeType)
+						) {
+							props.project.onGoingConnectionTarget = null;
+							props.project.onGoingConnectionTargetId = null;
+						}
+					}
+				}}
+				onMouseDown={(e: any) => {
+					if (disabled) {
+						return;
+					}
+
+					// This is critical to prevent the canvas from dragging the element
+					// Somehow the event propagates to the canvas and it starts dragging the element
+					props.canvasElement.draggableObject.isTargetOfMouseDown = false;
+
+					handleMouseDown(e);
+				}}
+				onMouseUp={(e: any) => {
+					onMouseUp();
+				}}
+			>
+				{resolveIcon()}
+			</button>
+		</span>
+	);
+}