@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,509 @@
+import './draggable-entity-card.css';
+import {
+	getCanvasEntityErrorCallerNodeDOMId,
+	getCanvasEntitySuccessCallerNodeDOMId,
+	getCreateEntityMenuFailureNodeId,
+	getCreateEntityMenuSuccessNodeId,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+} from '../../services/editor/ui';
+import { Canvas, CanvasObject, DraggableObject } from '../../lib/canvas';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import {
+	EntityType,
+	PassThroughCallableEntityState,
+	CanvasEntityDisabledReason,
+} from '@elyx-code/project-logic-tree';
+import React, { useCallback, useEffect, useRef } from 'react';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import { mergeRefs } from '../../utils/react';
+
+interface ISuccessFailureNodesProps {
+	draggableObject: DraggableObject | CanvasObject;
+	entity?: PassThroughCallableEntityState;
+	isCreationMenu?: boolean;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+const SuccessFailureNodes: React.FC<ISuccessFailureNodesProps> = ({
+	draggableObject,
+	entity,
+	isCreationMenu = false,
+	project,
+	parentDisabledReasons,
+}) => {
+	const successRef = useRef<HTMLButtonElement>(null);
+	const failureRef = useRef<HTMLButtonElement>(null);
+
+	const successId = isCreationMenu
+		? getCreateEntityMenuSuccessNodeId()
+		: getCanvasEntitySuccessCallerNodeDOMId(entity);
+	const failureId = isCreationMenu
+		? getCreateEntityMenuFailureNodeId()
+		: getCanvasEntityErrorCallerNodeDOMId(entity);
+
+	const relevantParentDisabledReasons = parentDisabledReasons.filter(
+		(reason) => !reason.startsWith('error-caller-only--'),
+	);
+
+	const disabled =
+		!!relevantParentDisabledReasons.length ||
+		(!!project.onGoingConnectionNodeType &&
+			project.onGoingConnectionNodeType !== ConnectionNodeType.CalledBy);
+
+	const connectionIncompatibleReasons =
+		project.onGoingConnectionIncompatibleEntities?.[entity.id]?.reasons || [];
+
+	const successRelevantIncompatibleReasons: CanvasEntityDisabledReason[] =
+		connectionIncompatibleReasons.filter(
+			(reason) => !reason.startsWith('error-caller-only--'),
+		);
+
+	const globalVarDisabledErrors =
+		entity.type === EntityType.VariableDeclaration &&
+		entity.parent === entity.project &&
+		!entity.errorCalls.length;
+
+	const disableErrorCalls =
+		disabled ||
+		globalVarDisabledErrors ||
+		!!connectionIncompatibleReasons.length;
+
+	const disableSuccessCalls =
+		disabled || successRelevantIncompatibleReasons.length > 0;
+
+	const resolveSuccessTooltip = () => {
+		return (
+			<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+				Click and drag to connect to the execution of another node
+			</h3>
+		);
+	};
+
+	const memoizedCanvasSuccessCallerTooltipBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				id={successId + '--popup--body'}
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				{resolveSuccessTooltip()}
+			</CanvasPopupBaseComponent>
+		),
+		[],
+	);
+
+	const canvasSuccessCallerTooltip = useCanvasPopup(
+		{
+			editor: project,
+			id: successId + '--popup',
+			anchorQuerySelector: '#' + successId,
+			placement: 'right',
+			parentCanvasObject: draggableObject,
+			arrowContainerSelector: '#' + successId + '--popup--body',
+		},
+		memoizedCanvasSuccessCallerTooltipBody,
+		[],
+	).setupHover({
+		openDelay: 600,
+		closeDelay: 400,
+	});
+
+	const resolveErrorTooltip = () => {
+		if (globalVarDisabledErrors) {
+			return (
+				<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+					Global variable declarations cannot catch errors
+				</h3>
+			);
+		}
+
+		return (
+			<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+				Click and drag to connect to the execution of another node
+			</h3>
+		);
+	};
+
+	const memoizedCanvasErrorCallerTooltipBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				id={failureId + '--popup--body'}
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				{resolveErrorTooltip()}
+			</CanvasPopupBaseComponent>
+		),
+		[],
+	);
+
+	const canvasErrorCallerTooltip = useCanvasPopup(
+		{
+			editor: project,
+			id: failureId + '--popup',
+			anchorQuerySelector: '#' + failureId,
+			placement: 'right',
+			parentCanvasObject: draggableObject,
+			arrowContainerSelector: '#' + failureId + '--popup--body',
+		},
+		memoizedCanvasErrorCallerTooltipBody,
+		[],
+	).setupHover({
+		openDelay: globalVarDisabledErrors ? 80 : 600,
+		closeDelay: 400,
+	});
+
+	useEffect(() => {
+		if (
+			!successRelevantIncompatibleReasons.length &&
+			[ConnectionNodeType.CalledBy].includes(project.onGoingConnectionNodeType)
+		) {
+			if (successRef.current) {
+				highlightElementIndefinetly(successRef.current);
+			}
+		}
+
+		if (
+			!!project.onGoingConnectionCompatibleEntities?.[entity.id] &&
+			[ConnectionNodeType.CalledBy].includes(project.onGoingConnectionNodeType)
+		) {
+			if (successRef.current && !disableSuccessCalls) {
+				highlightElementIndefinetly(successRef.current);
+			}
+			if (failureRef.current && !disableErrorCalls) {
+				highlightElementIndefinetly(failureRef.current);
+			}
+		} else {
+			if (
+				successRef.current &&
+				(!!successRelevantIncompatibleReasons.length ||
+					!project.onGoingConnectionNodeType)
+			) {
+				removeHighlightElementIndefinetly(successRef.current);
+				removeHighlightElementSuccess(successRef.current);
+			}
+			if (
+				failureRef.current &&
+				(!!connectionIncompatibleReasons.length ||
+					!project.onGoingConnectionNodeType)
+			) {
+				removeHighlightElementIndefinetly(failureRef.current);
+				removeHighlightElementSuccess(failureRef.current);
+			}
+		}
+
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!successRelevantIncompatibleReasons.length &&
+				[ConnectionNodeType.CalledBy].includes(payload.nodeType) &&
+				!disableSuccessCalls
+			) {
+				if (successRef.current) {
+					highlightElementIndefinetly(successRef.current);
+				}
+			}
+
+			if (
+				!!payload.compatible?.[entity.id] &&
+				[ConnectionNodeType.CalledBy].includes(payload.nodeType)
+			) {
+				if (successRef.current && !disableSuccessCalls) {
+					highlightElementIndefinetly(successRef.current);
+				}
+
+				if (failureRef.current && !disableErrorCalls) {
+					highlightElementIndefinetly(failureRef.current);
+				}
+			}
+		};
+
+		const handleConnectionEnd = () => {
+			if (successRef.current) {
+				removeHighlightElementIndefinetly(successRef.current);
+				removeHighlightElementSuccess(successRef.current);
+			}
+
+			if (failureRef.current) {
+				removeHighlightElementIndefinetly(failureRef.current);
+				removeHighlightElementSuccess(failureRef.current);
+			}
+		};
+
+		project.on('canvas-connection-start', handleConnectionStart);
+		project.on('canvas-connection-end', handleConnectionEnd);
+
+		return () => {
+			project.off('canvas-connection-start', handleConnectionStart);
+			project.off('canvas-connection-end', handleConnectionEnd);
+
+			// Also clean up any lingering highlights just in case
+			if (successRef.current) {
+				removeHighlightElementIndefinetly(successRef.current);
+				removeHighlightElementSuccess(successRef.current);
+			}
+			if (failureRef.current) {
+				removeHighlightElementIndefinetly(failureRef.current);
+				removeHighlightElementSuccess(failureRef.current);
+			}
+		};
+	}, [
+		project,
+		entity.id,
+		successRef,
+		failureRef,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess,
+		project.onGoingConnectionCompatibleEntities,
+		project.onGoingConnectionNodeType,
+		disableSuccessCalls,
+		disableErrorCalls,
+		successRelevantIncompatibleReasons,
+	]);
+
+	// When the entity is part of a variable declaration,
+	// which already has one of their internal calls being executed,
+	// we don't show the parents connection nodes.
+	const dontShow =
+		(entity.type === EntityType.VariableDeclaration ||
+			entity.type === EntityType.VariableInstance) &&
+		entity.internalCalls.some((call) => !!call.calledBy.length);
+
+	const mergedErrorRefs = !!canvasErrorCallerTooltip
+		? mergeRefs(failureRef, canvasErrorCallerTooltip.anchorRef)
+		: failureRef;
+
+	const mergedSuccessRefs = !!canvasSuccessCallerTooltip
+		? mergeRefs(successRef, canvasSuccessCallerTooltip.anchorRef)
+		: successRef;
+
+	if (dontShow) {
+		return null;
+	}
+
+	return (
+		<div
+			className={[
+				'canvas__node__vertical-center',
+				'canvas__node__float-right',
+				'canvas__node__success-error-node-stack',
+			].join(' ')}
+		>
+			<span
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: `${successId}--container`,
+				}}
+				id={`${successId}--container`}
+			>
+				<button
+					className='canvas__large-node canvas__node__success'
+					{...{
+						[Canvas.OBJ_ATTR_NAME]: successId,
+					}}
+					disabled={disableSuccessCalls}
+					id={successId}
+					ref={mergedSuccessRefs}
+					onMouseOver={(e: any) => {
+						if (disableSuccessCalls) {
+							return;
+						}
+
+						if (
+							!!project.canvas?.activeConnectionDrawing &&
+							!successRelevantIncompatibleReasons.length &&
+							[ConnectionNodeType.CalledBy].includes(
+								project.onGoingConnectionNodeType,
+							)
+						) {
+							e.stopPropagation();
+
+							if (
+								project.onGoingConnectionTarget &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType,
+								)
+							) {
+								project.onGoingConnectionSource = entity;
+								project.onGoingConnectionSourceId = successId;
+							}
+
+							project.canvas?.activeConnectionDrawing.snap(successId);
+
+							removeHighlightElementIndefinetly(successRef.current);
+							highlightElementSuccess(successRef.current);
+						}
+					}}
+					onMouseLeave={(e: any) => {
+						if (disableSuccessCalls) {
+							return;
+						}
+
+						if (
+							!!project.canvas?.activeConnectionDrawing &&
+							!successRelevantIncompatibleReasons.length &&
+							[ConnectionNodeType.CalledBy].includes(
+								project.onGoingConnectionNodeType,
+							)
+						) {
+							removeHighlightElementIndefinetly(successRef.current);
+							highlightElementIndefinetly(successRef.current);
+
+							if (
+								project.canvas?.activeConnectionDrawing?.snappedTo === successId
+							) {
+								project.canvas?.activeConnectionDrawing?.unSnap();
+							}
+
+							if (
+								project.onGoingConnectionSource === entity &&
+								project.onGoingConnectionSourceId === successId &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType,
+								)
+							) {
+								project.onGoingConnectionSource = null;
+								project.onGoingConnectionSourceId = null;
+							}
+						}
+					}}
+					onMouseDown={(e) => {
+						if (isCreationMenu || disableSuccessCalls) {
+							return;
+						}
+
+						e.stopPropagation();
+						project.startConnection({
+							nodeType: ConnectionNodeType.SuccessCaller,
+							source: entity,
+							sourceId: successId,
+							draggableObject: draggableObject as DraggableObject,
+						});
+					}}
+				>
+					<div
+						{...{
+							[Canvas.OBJ_ATTR_NAME]: `${successId}--center-ref`,
+						}}
+						id={`${successId}--center-ref`}
+						className='canvas__large-node__center-ref'
+					/>
+					<div>
+						<i className='fa-solid fa-check' />
+					</div>
+				</button>
+			</span>
+			<span
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: `${failureId}--container`,
+				}}
+				id={`${failureId}--container`}
+			>
+				<button
+					className='canvas__large-node canvas__node__failure'
+					{...{
+						[Canvas.OBJ_ATTR_NAME]: failureId,
+					}}
+					disabled={disableErrorCalls}
+					id={failureId}
+					ref={mergedErrorRefs}
+					onMouseOver={(e: any) => {
+						if (disableErrorCalls) {
+							return;
+						}
+
+						if (
+							!!project.canvas?.activeConnectionDrawing &&
+							project.onGoingConnectionCompatibleEntities?.[entity.id] &&
+							[ConnectionNodeType.CalledBy].includes(
+								project.onGoingConnectionNodeType,
+							)
+						) {
+							if (
+								project.onGoingConnectionTarget &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType,
+								)
+							) {
+								project.onGoingConnectionSource = entity;
+								project.onGoingConnectionSourceId = failureId;
+							}
+
+							project.canvas?.activeConnectionDrawing.snap(failureId);
+
+							removeHighlightElementIndefinetly(failureRef.current);
+							highlightElementSuccess(failureRef.current);
+						}
+					}}
+					onMouseLeave={(e: any) => {
+						if (disableErrorCalls) {
+							return;
+						}
+
+						if (
+							!!project.canvas?.activeConnectionDrawing &&
+							project.onGoingConnectionCompatibleEntities?.[entity.id] &&
+							[ConnectionNodeType.CalledBy].includes(
+								project.onGoingConnectionNodeType,
+							)
+						) {
+							removeHighlightElementIndefinetly(failureRef.current);
+							highlightElementIndefinetly(failureRef.current);
+
+							if (
+								project.canvas?.activeConnectionDrawing?.snappedTo === failureId
+							) {
+								project.canvas?.activeConnectionDrawing?.unSnap();
+							}
+
+							if (
+								project.onGoingConnectionSource === entity &&
+								project.onGoingConnectionSourceId === failureId &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType,
+								)
+							) {
+								project.onGoingConnectionSource = null;
+								project.onGoingConnectionSourceId = null;
+							}
+						}
+					}}
+					onMouseDown={(e) => {
+						if (isCreationMenu || disableErrorCalls) {
+							return;
+						}
+
+						e.stopPropagation();
+						project.startConnection({
+							nodeType: ConnectionNodeType.ErrorCaller,
+							source: entity,
+							sourceId: failureId,
+							draggableObject: draggableObject as DraggableObject,
+						});
+					}}
+				>
+					<div
+						{...{
+							[Canvas.OBJ_ATTR_NAME]: `${failureId}--center-ref`,
+						}}
+						id={`${failureId}--center-ref`}
+						className='canvas__large-node__center-ref'
+					/>
+					<div>
+						{entity.type === EntityType.Condition ? (
+							<i className='fa-solid fa-xmark' />
+						) : entity.catchesError || !!entity.errorCalls.length ? (
+							<i className='fa-solid fa-xmark' />
+						) : (
+							<i className='fa-solid fa-ban' />
+						)}
+					</div>
+				</button>
+			</span>
+		</div>
+	);
+};
+
+export default SuccessFailureNodes;