@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,523 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import './draggable-entity-card.css';
+import {
+	getCanvasEntityErrorCallerNodeDOMId,
+	getCanvasEntitySuccessCallerNodeDOMId,
+	highlightElementIndefinetly,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+	highlightElementSuccess
+} from '../../services/editor/ui';
+import { Canvas, DraggableObject } from '../../lib/canvas';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import {
+	EntityType,
+	VariableState,
+	InternalCallState,
+	CanvasEntityDisabledReason,
+	ALL_CONNECTION_DISABLED_REASONS
+} from '@elyx-code/project-logic-tree';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import { mergeRefs } from '../../utils/react';
+
+interface ISmallSuccessFailureNodesProps {
+	call: InternalCallState;
+	draggableObject: DraggableObject;
+	entity: VariableState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function SmallSuccessFailureNodes({
+	draggableObject,
+	call,
+	entity,
+	project,
+	parentDisabledReasons
+}: ISmallSuccessFailureNodesProps) {
+	const rootElementRef = useRef<HTMLDivElement>(null);
+	const successRef = useRef<HTMLButtonElement>(null);
+	const failureRef = useRef<HTMLButtonElement>(null);
+
+	const successId = getCanvasEntitySuccessCallerNodeDOMId(call);
+	const failureId = getCanvasEntityErrorCallerNodeDOMId(call);
+
+	const relevantParentDisabledReasons = parentDisabledReasons.filter(
+		(reason) => !ALL_CONNECTION_DISABLED_REASONS.includes(reason as any)
+	);
+
+	const disabled =
+		!!relevantParentDisabledReasons.length ||
+		(!!project.onGoingConnectionNodeType &&
+			project.onGoingConnectionNodeType !== ConnectionNodeType.CalledBy);
+
+	const connectionIncompatibleReasons =
+		project.onGoingConnectionIncompatibleEntities?.[call.id]?.reasons || [];
+
+	const successRelevantIncompatibleReasons: CanvasEntityDisabledReason[] =
+		connectionIncompatibleReasons.filter(
+			(reason) => !reason.startsWith('error-caller-only--')
+		);
+
+	const disableErrorCalls =
+		disabled ||
+		(entity.type === EntityType.VariableDeclaration &&
+			entity.parent === entity.project &&
+			!entity.errorCalls.length) ||
+		!!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 = () => {
+		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: 600,
+		closeDelay: 400
+	});
+
+	useEffect(() => {
+		if (
+			!successRelevantIncompatibleReasons.length &&
+			[ConnectionNodeType.CalledBy].includes(
+				project.onGoingConnectionNodeType
+			) &&
+			!disableSuccessCalls
+		) {
+			if (successRef.current) {
+				highlightElementIndefinetly(successRef.current);
+			}
+		}
+
+		if (
+			!!project.onGoingConnectionCompatibleEntities?.[call.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)
+			) {
+				if (successRef.current) {
+					highlightElementIndefinetly(successRef.current);
+				}
+			}
+
+			if (
+				!!payload.compatible?.[call.id] &&
+				[ConnectionNodeType.CalledBy].includes(payload.nodeType)
+			) {
+				if (successRef.current) {
+					highlightElementIndefinetly(successRef.current);
+				}
+				if (failureRef.current) {
+					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,
+		call.id,
+		successRef,
+		failureRef,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess,
+		project.onGoingConnectionCompatibleEntities,
+		project.onGoingConnectionNodeType,
+		disableSuccessCalls,
+		disableErrorCalls,
+		successRelevantIncompatibleReasons
+	]);
+
+	// 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 =
+		(entity.type === EntityType.VariableDeclaration ||
+			entity.type === EntityType.VariableInstance) &&
+		entity.internalCalls.some(
+			(call) => !!call.calledBy.length && call.id !== call.id
+		);
+
+	const mergedErrorRefs = !!canvasErrorCallerTooltip
+		? mergeRefs(failureRef, canvasErrorCallerTooltip.anchorRef)
+		: failureRef;
+
+	const mergedSuccessRefs = !!canvasSuccessCallerTooltip
+		? mergeRefs(successRef, canvasSuccessCallerTooltip.anchorRef)
+		: successRef;
+
+	if (downShow) {
+		return null;
+	}
+
+	return (
+		<div
+			ref={rootElementRef}
+			className={[
+				'canvas__node__vertical-center',
+				'canvas__node__success-error-node-stack'
+			].join(' ')}
+		>
+			<span
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: successId + '--container'
+				}}
+				id={successId + '--container'}
+			>
+				<button
+					className={[
+						'canvas__small-node',
+						'canvas__node__success'
+					].join(' ')}
+					{...{
+						[Canvas.OBJ_ATTR_NAME]: successId
+					}}
+					id={successId}
+					ref={mergedSuccessRefs}
+					disabled={disableSuccessCalls}
+					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 = call;
+								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 === call &&
+								project.onGoingConnectionSourceId ===
+									successId &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType
+								)
+							) {
+								project.onGoingConnectionSource = null;
+								project.onGoingConnectionSourceId = null;
+							}
+						}
+					}}
+					onMouseDown={(e) => {
+						if (disableSuccessCalls) {
+							return;
+						}
+
+						e.stopPropagation();
+						project.startConnection({
+							nodeType: ConnectionNodeType.SuccessCaller,
+							source: call,
+							sourceId: successId,
+							draggableObject: draggableObject as DraggableObject
+						});
+					}}
+				>
+					{/* A center dot to reference by other elements */}
+					<div
+						{...{
+							[Canvas.OBJ_ATTR_NAME]: successId + '--center-ref'
+						}}
+						id={successId + '--center-ref'}
+						className="canvas__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__small-node',
+						'canvas__node__failure'
+					].join(' ')}
+					{...{
+						[Canvas.OBJ_ATTR_NAME]: failureId
+					}}
+					id={failureId}
+					ref={mergedErrorRefs}
+					disabled={disableErrorCalls}
+					onMouseOver={(e: any) => {
+						if (disableErrorCalls) {
+							return;
+						}
+
+						if (
+							!!project.canvas?.activeConnectionDrawing &&
+							project.onGoingConnectionCompatibleEntities?.[
+								call.id
+							] &&
+							[ConnectionNodeType.CalledBy].includes(
+								project.onGoingConnectionNodeType
+							)
+						) {
+							if (
+								project.onGoingConnectionTarget &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType
+								)
+							) {
+								project.onGoingConnectionSource = call;
+								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?.[
+								call.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 === call &&
+								project.onGoingConnectionSourceId ===
+									failureId &&
+								[ConnectionNodeType.CalledBy].includes(
+									project.onGoingConnectionNodeType
+								)
+							) {
+								project.onGoingConnectionSource = null;
+								project.onGoingConnectionSourceId = null;
+							}
+						}
+					}}
+					onMouseDown={(e) => {
+						if (disableErrorCalls) {
+							return;
+						}
+
+						e.stopPropagation();
+						project.startConnection({
+							nodeType: ConnectionNodeType.ErrorCaller,
+							source: call,
+							sourceId: failureId,
+							draggableObject: draggableObject as DraggableObject
+						});
+					}}
+				>
+					{/* A center dot to reference by other elements */}
+					<div
+						{...{
+							[Canvas.OBJ_ATTR_NAME]: `${failureId}--center-ref`
+						}}
+						id={`${failureId}--center-ref`}
+						className="canvas__large-node__center-ref"
+					/>
+					<div>
+						{call.catchesError || !!call.errorCalls.length ? (
+							<i className="fa-solid fa-xmark" />
+						) : (
+							<i className="fa-solid fa-ban" />
+						)}
+					</div>
+				</button>
+			</span>
+		</div>
+	);
+}