@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,464 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+	EntityType,
+	CanvasEntityDisabledReason,
+	OutputMapState,
+	VariableDeclarationState,
+	findReferencesToSelfInProject,
+	PassThroughCallableEntityState
+} from '@elyx-code/project-logic-tree';
+import { Canvas, DraggableObject } from '../../lib/canvas';
+import './draggable-entity-card.css';
+import {
+	getCanvasEntityDOMId,
+	getCanvasEntityNewErrorOutputDOMId,
+	getCardColorCSSVariable,
+	resolveEntityColorClass,
+	safeResolveEntityName
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import DynamicValue from '../dynamic-value/DynamicValue';
+import DataTypeIcon from './DataTypeIcon';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import {
+	IDynamicValue,
+	IValueInheritanceLink
+} from '../../services/editor/value-store';
+import { resolveValue } from '../../services/execution/value-resolution';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import { popupNotification } from '../../popup-notification';
+
+interface IErrorMapPropertyProps {
+	// Null when the error output map hasn't yet been created
+	outputMap: OutputMapState | null;
+	entity: PassThroughCallableEntityState;
+	draggableObject: DraggableObject;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+	size?: 'small' | 'default';
+}
+
+const ErrorMapProperty: React.FC<IErrorMapPropertyProps> = (props) => {
+	const {
+		outputMap,
+		entity,
+		draggableObject,
+		project,
+		parentDisabledReasons
+	} = props;
+	const [dynamicValue, setDynamicValue] = useState<IDynamicValue | null>(
+		resolveDynamicValue()
+	);
+	const rootElementRef = useRef<HTMLLIElement>(null);
+
+	const resolveTooltip = () => {
+		return (
+			<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+				Click and drag to connect to another value
+			</h3>
+		);
+	};
+
+	const memoizedCanvasSocketTooltipBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-error-map-socket-tooltip-' +
+					outputMap.id +
+					'--popup--body'
+				}
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				{resolveTooltip()}
+			</CanvasPopupBaseComponent>
+		),
+		[]
+	);
+
+	const canvasSocketTooltip = useCanvasPopup(
+		{
+			editor: project,
+			id: 'canvas-error-map-socket-tooltip-' + outputMap.id + '--popup',
+			anchorQuerySelector:
+				'#canvas-error-map-socket-tooltip-' + outputMap.id + '--popup',
+			placement: 'right',
+			parentCanvasObject: draggableObject,
+			arrowContainerSelector:
+				'#canvas-error-map-socket-tooltip-' +
+				outputMap.id +
+				'--popup--body'
+		},
+		memoizedCanvasSocketTooltipBody,
+		[]
+	).setupHover({
+		openDelay: 600,
+		closeDelay: 400
+	});
+
+	function resolveDynamicValue() {
+		if (
+			outputMap &&
+			[
+				EntityType.Operation,
+				EntityType.FunctionCall,
+				EntityType.GlobalEvent
+			].includes(entity.type)
+		) {
+			return resolveValue(outputMap, project);
+		}
+		return null;
+	}
+
+	// Recursively unfold the inheritance tree and resolve all dependencies so we subscribe them as events
+	const subscribeValueInheritanceUpdates = (
+		inheritanceLink: IValueInheritanceLink
+	) => {
+		inheritanceLink.sources.forEach((valueInheritanceLink) => {
+			if (!valueInheritanceLink) {
+				return;
+			}
+
+			project.on(valueInheritanceLink.valueOwner.id, () => {
+				setDynamicValue(resolveDynamicValue());
+			});
+
+			if (
+				!!(valueInheritanceLink.valueOwner as VariableDeclarationState)
+					.dataType
+			) {
+				project.on(
+					(
+						valueInheritanceLink.valueOwner as VariableDeclarationState
+					).dataType.id,
+					() => {
+						setDynamicValue(resolveDynamicValue());
+					}
+				);
+			}
+
+			if (valueInheritanceLink.inheritanceLink) {
+				subscribeValueInheritanceUpdates(
+					valueInheritanceLink.inheritanceLink
+				);
+			}
+		});
+	};
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: project,
+							onClick: async () => {
+								project?.canvas?.unselectAll();
+
+								EditorService.navigate(
+									`${project?.editorBasePath}/entity/${EntityType.OutputMap}/${outputMap.id}`
+								);
+							},
+							label: 'Edit',
+							disabled: false,
+							iconEnd: 'fa-solid fa-pencil',
+							tooltip: !outputMap.editable
+								? 'This error output has been locked and can no longer be edited'
+								: 'Edit this error output',
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								entity.type +
+								'--return-map--' +
+								outputMap.id +
+								'--edit'
+						},
+						...(true
+							? [
+									{
+										project: project,
+										onClick: async () => {
+											await project.remove(outputMap.id);
+										},
+										label: 'Force delete',
+										color: 'error',
+										iconEnd: 'fa-solid fa-trash-can',
+										tooltip: 'Forever delete this error',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--return-map--' +
+											outputMap.id +
+											'--force-delete'
+									}
+								]
+							: ([] as any)),
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(
+									props.outputMap.id
+								);
+								popupNotification({
+									text: `Copied ID: ${props.outputMap.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.outputMap.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.outputMap
+								);
+								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.outputMap.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[outputMap, entity, project]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: project,
+			id:
+				'canvas-property-entity-card-menu-button-' +
+				(outputMap?.id || entity.id + '--new-error-output') +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-property-card-menu-button-' +
+				(outputMap?.id || entity.id + '--new-error-output'),
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: draggableObject,
+			placement: 'left'
+		},
+		memoizedCanvasPopupBody
+	);
+
+	useEffect(() => {
+		if (dynamicValue?.inheritanceLink) {
+			subscribeValueInheritanceUpdates(dynamicValue.inheritanceLink);
+		}
+	}, []);
+
+	const name = outputMap
+		? safeResolveEntityName(outputMap, project.logic)
+		: 'Error';
+
+	const isConnected =
+		!!((outputMap as OutputMapState)?.writesValues || []).length ||
+		!!(outputMap && !!findReferencesToSelfInProject(outputMap)?.length);
+
+	const disabled =
+		(!!parentDisabledReasons.length ||
+			// @ts-ignore
+			outputMap?.suggestion ||
+			// @ts-ignore
+			entity.suggestion) &&
+		!project.onGoingConnectionCompatibleEntities?.[outputMap?.id];
+
+	const size = props.size || 'default';
+
+	return (
+		<li
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card__property-row',
+				'canvas-draggable-card__main-property',
+				'canvas-draggable-card__error-property',
+				'canvas-draggable-card__main-output-property',
+				size === 'small'
+					? 'canvas-draggable-card__property__small'
+					: '',
+				...(disabled ? ['disabled'] : [])
+			].join(' ')}
+			id={
+				outputMap
+					? getCanvasEntityDOMId(outputMap)
+					: getCanvasEntityNewErrorOutputDOMId(entity)
+			}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: outputMap
+					? getCanvasEntityDOMId(outputMap)
+					: getCanvasEntityNewErrorOutputDOMId(entity)
+			}}
+		>
+			<div className="canvas-draggable-card__property-row__menu-button">
+				<Button
+					variant="text"
+					color="grey"
+					iconEnd="fa-solid fa-ellipsis-v"
+					ref={canvasPopup.anchorRef}
+					size="small"
+					className="canvas-small-entity-card-menu-button"
+					id={
+						'canvas-property-card-menu-button-' +
+						(outputMap?.id || entity.id + '--new-error-output')
+					}
+					onClick={(e: any) => {
+						e.stopPropagation();
+						canvasPopup?.toggle();
+					}}
+					onDoubleClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+						e.stopPropagation();
+						if (!outputMap) return;
+						project?.canvas?.unselectAll();
+						EditorService.navigate(
+							`${project?.editorBasePath}/entity/${EntityType.OutputMap}/${outputMap.id}`
+						);
+					}}
+				/>
+			</div>
+			<div className="canvas-draggable-card__property__right-block">
+				<div className="canvas-draggable-card__property__labels-group">
+					<span className="canvas-draggable-card__output-property__name">
+						{name}
+					</span>
+					<DynamicValue
+						parentCanvasObject={draggableObject}
+						project={project}
+						valueOwner={outputMap as OutputMapState}
+						parentDisabledReasons={parentDisabledReasons}
+					/>
+				</div>
+				<DataTypeIcon
+					entity={outputMap}
+					color="dark-grey"
+					size={size === 'small' ? 'small' : 'medium'}
+					parentDisabledReasons={parentDisabledReasons}
+					project={props.project}
+					parentCanvasObject={draggableObject}
+				/>
+			</div>
+			<div
+				id={
+					outputMap
+						? getCanvasEntityDOMId(outputMap)
+						: getCanvasEntityNewErrorOutputDOMId(entity) +
+							'--connected-right-node'
+				}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: outputMap
+						? getCanvasEntityDOMId(outputMap)
+						: getCanvasEntityNewErrorOutputDOMId(entity) +
+							'--connected-right-node'
+				}}
+				className={[
+					'canvas__small-node',
+					'canvas__small-node--position',
+					// Removed 'invisible' so the resting state stays visible
+					...(isConnected
+						? ['canvas-property__node__connected']
+						: [
+								'canvas__medium-node',
+								resolveEntityColorClass(entity.type)
+							])
+				].join(' ')}
+				style={{
+					position: 'absolute',
+					top: '50%',
+					right: '-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',
+						filter: 'drop-shadow(5px 2px 5px rgba(0, 0, 0, 0.08))'
+					}}
+				>
+					<path
+						d="M -2 -2 L 5 7 Q 6.5 9 5 11 L -2 20 Z"
+						fill="var(--color-main-error)"
+						stroke="var(--color-main-error)"
+						strokeWidth="2"
+					/>
+				</svg>
+			</div>
+			{!parentDisabledReasons.length && (
+				<div
+					id={
+						outputMap
+							? getCanvasEntityDOMId(outputMap)
+							: getCanvasEntityNewErrorOutputDOMId(entity) +
+								'--new-right-node'
+					}
+					className={[
+						'canvas__small-node',
+						'canvas__small-node--position',
+						'canvas-property__node',
+						'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(
+								'#' + outputMap
+									? getCanvasEntityDOMId(outputMap)
+									: getCanvasEntityNewErrorOutputDOMId(
+											entity
+										) + '--connected-right-node'
+							);
+
+						permanentNodeElement?.classList.add(
+							'canvas__node__active'
+						);
+
+						project.startConnection({
+							nodeType: ConnectionNodeType.PropertyOut,
+							sourceId: outputMap
+								? getCanvasEntityDOMId(outputMap)
+								: getCanvasEntityNewErrorOutputDOMId(entity) +
+									'--connected-right-node',
+							source: outputMap,
+							draggableObject: draggableObject
+						});
+					}}
+				/>
+			)}
+		</li>
+	);
+};
+
+export default ErrorMapProperty;