@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,549 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { EntityType } from '@elyx-code/project-logic-tree';
+import './draggable-entity-card.css';
+import {
+	getCanvasEntityDOMId,
+	getCardColorCSSVariable,
+	getCardSupportColorCSSVariable,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+	resolveEntityColorClass
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import { Canvas } from '../../lib/canvas';
+import {
+	InputMapState,
+	ReturnStatementState,
+	CanvasEntityDisabledReason
+} from '@elyx-code/project-logic-tree';
+import DataTypeIcon from './DataTypeIcon';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import LogicErrorIconMenu from './logic-error/LogicErrorIconMenu';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import DynamicValueEntry from '../dynamic-value/DynamicValueEntry';
+import { popupNotification } from '../../popup-notification';
+
+interface IReturnedErrorProps {
+	inputMap: InputMapState;
+	entity: ReturnStatementState;
+	canvasElement: CanvasEntityElement;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function ReturnedError(props: IReturnedErrorProps) {
+	const { inputMap, entity, canvasElement, project, parentDisabledReasons } =
+		props;
+	const rootElementRef = useRef<HTMLDivElement>(null);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const resolveTooltip = () => {
+		return (
+			<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+				Click and drag to connect to another value
+			</h3>
+		);
+	};
+
+	const memoizedCanvasSocketTooltipBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-returned-error-socket-tooltip-' +
+					props.inputMap.id +
+					'--popup--body'
+				}
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				{resolveTooltip()}
+			</CanvasPopupBaseComponent>
+		),
+		[]
+	);
+
+	const canvasSocketTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-returned-error-socket-tooltip-' +
+				props.inputMap.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-returned-error-socket-tooltip-' +
+				props.inputMap.id +
+				'--popup',
+			placement: 'left',
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-returned-error-socket-tooltip-' +
+				props.inputMap.id +
+				'--popup--body'
+		},
+		memoizedCanvasSocketTooltipBody,
+		[]
+	).setupHover({
+		openDelay: 600,
+		closeDelay: 400
+	});
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.inputMap.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: !props.inputMap.deletable,
+							tooltip: !props.inputMap.editable
+								? 'This error output has been locked and can no longer be deleted.'
+								: 'Forever delete this error output',
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								entity.type +
+								'--' +
+								inputMap.type +
+								'--' +
+								inputMap.id +
+								'--delete'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.InputMap}/${inputMap.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: false,
+							tooltip: !props.inputMap.editable
+								? `This error output has been locked and can no longer be edited`
+								: `Edit this error output`,
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								entity.type +
+								'--' +
+								inputMap.type +
+								'--' +
+								inputMap.id +
+								'--edit'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(
+									props.inputMap.id
+								);
+								popupNotification({
+									text: `Copied ID: ${props.inputMap.id}`,
+									color: 'success'
+								});
+							},
+							label: 'Copy ID',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								'Copy this node ID to clipboard for debugging',
+							parentCanvasObject: popup.self,
+							id: 'copy-id-' + props.inputMap.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.inputMap
+								);
+								popupNotification({
+									text: `Re-validated node successfully`,
+									color: 'success'
+								});
+							},
+							label: 'Re-validate',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								"Re-validate this node's state and its errors",
+							parentCanvasObject: popup.self,
+							id: 're-validate-' + props.inputMap.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[
+			props.inputMap.editable,
+			props.inputMap.deletable,
+			props.project,
+			inputMap.id,
+			inputMap.type,
+			entity.type
+		]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-property-entity-card-menu-button-' +
+				inputMap.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-property-card-menu-button-' + inputMap.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: canvasElement.draggableObject
+		},
+		memoizedCanvasPopupBody
+	);
+
+	useEffect(() => {
+		const handleInputMapUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!!payload.compatible?.[props.inputMap.id] &&
+				[ConnectionNodeType.PropertyOut].includes(payload.nodeType)
+			) {
+				if (rootElementRef.current) {
+					highlightElementIndefinetly(rootElementRef.current);
+				}
+			}
+		};
+
+		const handleConnectionEnd = () => {
+			if (rootElementRef.current) {
+				removeHighlightElementIndefinetly(rootElementRef.current);
+				removeHighlightElementSuccess(rootElementRef.current);
+			}
+		};
+
+		props.project.on(props.inputMap.id, handleInputMapUpdate);
+		props.project.on('canvas-connection-start', handleConnectionStart);
+		props.project.on('canvas-connection-end', handleConnectionEnd);
+
+		return () => {
+			props.project.off(props.inputMap.id, handleInputMapUpdate);
+			props.project.off('canvas-connection-start', handleConnectionStart);
+			props.project.off('canvas-connection-end', handleConnectionEnd);
+
+			// Also clean up any lingering highlights just in case
+			if (rootElementRef.current) {
+				removeHighlightElementIndefinetly(rootElementRef.current);
+				removeHighlightElementSuccess(rootElementRef.current);
+			}
+		};
+	}, [
+		props.project,
+		props.inputMap.id,
+		updateKey,
+		rootElementRef,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess
+	]);
+
+	const isConnected = !!inputMap?.readsValue;
+
+	// If the parent is a suggestion or itself is a suggestion, add the suggestion class
+	const disabled =
+		(!!props.parentDisabledReasons.length ||
+			inputMap.suggestion ||
+			// @ts-ignore
+			props.entity.suggestion) &&
+		!props.project.onGoingConnectionCompatibleEntities?.[props.inputMap.id];
+
+	return (
+		<div
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card__property-row',
+				'canvas-draggable-card__main-property',
+				'canvas-draggable-card__error-property',
+				'canvas-draggable-card__main-input-property',
+				...(disabled ? ['disabled'] : [])
+			].join(' ')}
+			id={getCanvasEntityDOMId(inputMap)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityDOMId(inputMap)
+			}}
+			onMouseOver={(e: any) => {
+				if (
+					!!props.project.canvas?.activeConnectionDrawing &&
+					props.project.onGoingConnectionCompatibleEntities?.[
+						props.inputMap.id
+					]
+				) {
+					if (
+						props.project.onGoingConnectionSource &&
+						[ConnectionNodeType.PropertyOut].includes(
+							props.project.onGoingConnectionNodeType
+						)
+					) {
+						props.project.onGoingConnectionTarget = props.inputMap;
+						props.project.onGoingConnectionTargetId =
+							getCanvasEntityDOMId(inputMap);
+					}
+
+					props.project.canvas?.activeConnectionDrawing.snap(
+						getCanvasEntityDOMId(inputMap)
+					);
+
+					removeHighlightElementIndefinetly(rootElementRef.current);
+					highlightElementSuccess(rootElementRef.current);
+				}
+			}}
+			onMouseLeave={(e: any) => {
+				if (
+					!!props.project.canvas?.activeConnectionDrawing &&
+					props.project.onGoingConnectionCompatibleEntities?.[
+						props.inputMap.id
+					]
+				) {
+					removeHighlightElementIndefinetly(rootElementRef.current);
+					highlightElementIndefinetly(rootElementRef.current);
+
+					if (
+						props.project.canvas?.activeConnectionDrawing
+							?.snappedTo === getCanvasEntityDOMId(inputMap)
+					) {
+						props.project.canvas?.activeConnectionDrawing?.unSnap();
+					}
+
+					if (
+						props.project.onGoingConnectionTarget ===
+							props.inputMap &&
+						props.project.onGoingConnectionTargetId ===
+							getCanvasEntityDOMId(inputMap) &&
+						[ConnectionNodeType.PropertyOut].includes(
+							props.project.onGoingConnectionNodeType
+						)
+					) {
+						props.project.onGoingConnectionTarget = null;
+						props.project.onGoingConnectionTargetId = null;
+					}
+				}
+			}}
+		>
+			<div
+				id={`${getCanvasEntityDOMId(inputMap)}--connected-left-node`}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: `${getCanvasEntityDOMId(
+						inputMap
+					)}--connected-left-node`
+				}}
+				className={[
+					'canvas__small-node',
+					'canvas__small-node--position',
+					'canvas__node__left',
+					...(isConnected
+						? ['canvas-property__node__connected']
+						: [
+								'canvas__medium-node',
+								resolveEntityColorClass(props.entity.type)
+							])
+				].join(' ')}
+				style={{
+					position: 'absolute',
+					top: '50%',
+					left: '-9px',
+					transform: 'translateY(-50%)',
+					width: '10px',
+					height: '18px',
+					padding: 0,
+					background: 'transparent',
+					border: 'none',
+					...(props.project.canvas?.disabled
+						? { cursor: 'not-allowed' }
+						: { cursor: 'pointer' }),
+					zIndex: 1
+				}}
+			>
+				<svg
+					width="10"
+					height="18"
+					viewBox="0 0 10 18"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					style={{ display: 'block' }}
+				>
+					<path
+						d="M 12 -2 L 5 7 Q 3.5 9 5 11 L 12 20 Z"
+						fill="var(--color-main-error)"
+						stroke="var(--color-main-error)"
+						strokeWidth="2"
+					/>
+				</svg>
+			</div>
+			{!parentDisabledReasons.length && (
+				<div
+					id={`${getCanvasEntityDOMId(inputMap)}--new-left-node`}
+					className={[
+						'canvas__small-node',
+						'canvas__small-node--position',
+						'canvas-property__node',
+						'canvas__node__left',
+						'canvas__node__new',
+						'canvas__medium-node'
+					].join(' ')}
+					style={{
+						top: '50%',
+						transform: 'translateY(-50%)'
+					}}
+					ref={canvasSocketTooltip.anchorRef}
+					onMouseDown={(e) => {
+						e.stopPropagation();
+
+						const permanentNodeElement =
+							rootElementRef.current?.querySelector(
+								`#${getCanvasEntityDOMId(inputMap)}--connected-left-node`
+							);
+
+						// Add 'canvas__node__active' class to the element
+						permanentNodeElement?.classList.add(
+							'canvas__node__active'
+						);
+
+						// Listen to the mouseup event to remove the class
+						const mouseUpListener = (e: MouseEvent) => {
+							if (permanentNodeElement) {
+								const isConnectedToMenu =
+									props.project.onGoingConnectionTarget ===
+									inputMap;
+
+								if (!isConnectedToMenu) {
+									permanentNodeElement.classList.remove(
+										'canvas__node__active'
+									);
+								}
+							}
+
+							if (
+								props.project.onGoingConnectionTarget !==
+								inputMap
+							) {
+								props.project.off(
+									'canvas-connection-end',
+									mouseUpListener
+								);
+							}
+						};
+
+						props.project.on(
+							'canvas-connection-end',
+							mouseUpListener
+						);
+
+						project.startConnection({
+							targetId: `${getCanvasEntityDOMId(
+								inputMap
+							)}--connected-left-node`,
+							nodeType: ConnectionNodeType.PropertyIn,
+							target: inputMap,
+							draggableObject: canvasElement.draggableObject
+						});
+					}}
+					onMouseUp={(e) => {
+						// Remove active class from connected/permanent node
+					}}
+				/>
+			)}
+			<DynamicValueEntry
+				entity={props.inputMap}
+				project={props.project}
+				canvasElement={props.canvasElement}
+				parentDisabledReasons={props.parentDisabledReasons}
+			>
+				{(extraContent) => (
+					<>
+						<div
+							className={[
+								'canvas-draggable-card__property__left-block',
+								'canvas-draggable-card__property__value-container'
+							].join(' ')}
+						>
+							<DataTypeIcon
+								entity={inputMap}
+								color="dark-grey"
+								parentDisabledReasons={parentDisabledReasons}
+								project={props.project}
+								parentCanvasObject={
+									props.canvasElement?.draggableObject
+								}
+							/>
+
+							<span className="canvas-draggable-card__property__labels-group">
+								<p className="canvas-draggable-card__property__name">
+									Output error
+								</p>
+								{extraContent}
+							</span>
+						</div>
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: '6px'
+							}}
+						>
+							<LogicErrorIconMenu
+								entity={inputMap}
+								project={project}
+								canvasElement={canvasElement}
+								parentDisabledReasons={parentDisabledReasons}
+							/>
+							<div className="canvas-draggable-card__property-row__menu-button">
+								{!disabled &&
+									!props.parentDisabledReasons.length && (
+										<Button
+											variant="text"
+											color="grey"
+											iconEnd="fa-solid fa-ellipsis-v"
+											size="small"
+											className="canvas-small-entity-card-menu-button"
+											ref={canvasPopup.anchorRef}
+											id={`canvas-property-card-menu-button-${inputMap.id}`}
+											onClick={(e: any) => {
+												e.stopPropagation();
+												canvasPopup?.toggle();
+											}}
+											onDoubleClick={(
+												e: React.MouseEvent<HTMLButtonElement>
+											) => {
+												e.stopPropagation();
+												project?.canvas?.unselectAll();
+												EditorService.navigate(
+													`${project?.editorBasePath}/entity/${EntityType.InputMap}/${inputMap.id}`
+												);
+											}}
+										/>
+									)}
+							</div>
+						</span>
+					</>
+				)}
+			</DynamicValueEntry>
+		</div>
+	);
+}