@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,523 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import './draggable-entity-card.css';
+import {
+	entityDisabledReasonToShortReadableError,
+	getCanvasEntityDOMId,
+	getCanvasEntityMainValueInputDOMId,
+	getCardColorCSSVariable,
+	getCardSupportColorCSSVariable,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+	resolveEntityColorClass,
+	resolveMainValueBackgroundCSSVariable,
+} from '../../services/editor/ui';
+import { Canvas } from '../../lib/canvas';
+import {
+	EntityType,
+	getDeclaration,
+	VariableState,
+	CanvasEntityDisabledReason,
+	TerminationEntityState,
+	CanvasEntityConnectionDisabledReason,
+	TERMINATION_TYPES,
+	BUILT_IN_BASE_ENTITY_IDS,
+} from '@elyx-code/project-logic-tree';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { mergeRefs } from '../../utils/react';
+
+interface IMainValueInputProps {
+	entity: VariableState | TerminationEntityState;
+	canvasElement: CanvasEntityElement;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function MainValueInput(props: IMainValueInputProps) {
+	const rootElementRef = useRef<HTMLDivElement>(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-main-value-input-socket-tooltip-' +
+					props.entity.id +
+					'--popup--body'
+				}
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				{resolveTooltip()}
+			</CanvasPopupBaseComponent>
+		),
+		[],
+	);
+
+	const canvasSocketTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-main-value-input-socket-tooltip-' + props.entity.id + '--popup',
+			anchorQuerySelector:
+				'#canvas-main-value-input-socket-tooltip-' +
+				props.entity.id +
+				'--popup',
+			placement: 'left',
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-main-value-input-socket-tooltip-' +
+				props.entity.id +
+				'--popup--body',
+		},
+		memoizedCanvasSocketTooltipBody,
+		[],
+	).setupHover({
+		openDelay: 600,
+		closeDelay: 400,
+	});
+
+	useEffect(() => {
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!!payload.compatible?.[props.entity.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('canvas-connection-start', handleConnectionStart);
+		props.project.on('canvas-connection-end', handleConnectionEnd);
+
+		return () => {
+			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.entity.id,
+		rootElementRef,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess,
+	]);
+
+	const entity = props.entity;
+	const isConnected = !!entity?.readsValue;
+
+	const dynamicValuePassDownDisabledReasons = [
+		...(entity.type === EntityType.VariableDeclaration &&
+		entity.parent.type === EntityType.Project
+			? [
+					CanvasEntityConnectionDisabledReason.CannotWriteValueOfGlobalVariableDeclaration,
+				]
+			: []),
+		...(props.entity.type === EntityType.VariableInstance &&
+		props.entity.declaration.constant
+			? [
+					CanvasEntityConnectionDisabledReason.CannotReSetValueOfConstantVariable,
+				]
+			: []),
+	].filter((reason) => {
+		if (props.parentDisabledReasons.includes(reason)) {
+			return false;
+		}
+
+		if (
+			// We allow connections while drawing if the variable declaration if the calculation has allowed it
+			reason ===
+				CanvasEntityConnectionDisabledReason.CannotWriteValueOfGlobalVariableDeclaration &&
+			!!props.project.onGoingConnectionCompatibleEntities?.[props.entity.id]
+		) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const relevantParentDisabledReasons = props.parentDisabledReasons.filter(
+		(reason) => {
+			if (
+				// We allow connections while drawing if the variable declaration if the calculation has allowed it
+				reason ===
+					CanvasEntityConnectionDisabledReason.CannotWriteValueOfGlobalVariableDeclaration &&
+				!!props.project.onGoingConnectionCompatibleEntities?.[props.entity.id]
+			) {
+				return false;
+			}
+
+			return true;
+		},
+	);
+
+	const disabled =
+		!!relevantParentDisabledReasons.length ||
+		!!dynamicValuePassDownDisabledReasons.length ||
+		(!!props.project.onGoingConnectionNodeType &&
+			props.project.onGoingConnectionNodeType !==
+				ConnectionNodeType.PropertyOut) ||
+		((entity.type === EntityType.VariableDeclaration ||
+			entity.type === EntityType.VariableInstance) &&
+			getDeclaration(entity).constant);
+
+	// When the entity is part of a variable declaration,
+	// which has one of their internal calls being executed,
+	// we can't connect any values to it
+	const dontShow =
+		((entity.type === EntityType.VariableDeclaration ||
+			entity.type === EntityType.VariableInstance) &&
+			entity.internalCalls.some((call) => !!call.calledBy.length)) ||
+		(TERMINATION_TYPES.includes(entity.type) &&
+			entity.getDataType(null)?.entity?.id ===
+				BUILT_IN_BASE_ENTITY_IDS['primitive-entity'].void?.id);
+
+	const memoizedCanvasDisabledTooltipBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-main-value-property-disabled-tooltip-' +
+					props.entity.id +
+					'--popup--body'
+				}
+				containerClasses={[
+					'tooltip',
+					'tooltip--large-font',
+					'tooltip--dynamic-value',
+				]}
+			>
+				<h3 style={{ marginTop: 0, marginBottom: 5 }}>
+					{dynamicValuePassDownDisabledReasons.map((reason, index) => (
+						<span key={index}>
+							{entityDisabledReasonToShortReadableError(reason)}
+							{index < dynamicValuePassDownDisabledReasons.length - 1 ? (
+								<br />
+							) : null}
+						</span>
+					))}
+				</h3>
+			</CanvasPopupBaseComponent>
+		),
+		[dynamicValuePassDownDisabledReasons],
+	);
+
+	const canvasDisabledTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-main-value-property-disabled-tooltip-' +
+				props.entity.id +
+				'--popup',
+			anchorQuerySelector: '#' + getCanvasEntityMainValueInputDOMId(entity),
+			placement: 'top',
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-main-value-property-disabled-tooltip-' +
+				props.entity.id +
+				'--popup--body',
+		},
+		memoizedCanvasDisabledTooltipBody,
+		[dynamicValuePassDownDisabledReasons],
+	)
+		.setupHover({
+			closeDelay: 80,
+			openDelay: 600,
+		})
+		.onBeforeShow(
+			() =>
+				!!dynamicValuePassDownDisabledReasons.length &&
+				// We don't show the tooltip when the user is drawing a connection because that action has its own feedback
+				!props.project.onGoingConnectionNodeType,
+		);
+
+	const mergedRefs = !!canvasDisabledTooltip
+		? mergeRefs(rootElementRef, canvasDisabledTooltip.anchorRef)
+		: rootElementRef;
+
+	if (dontShow) {
+		return null;
+	}
+
+	// We repeate here the operation because often the component is renders after we set the highlighting class.
+	if (
+		!!props.project.onGoingConnectionCompatibleEntities?.[props.entity.id] &&
+		[ConnectionNodeType.PropertyOut].includes(
+			props.project.onGoingConnectionNodeType,
+		)
+	) {
+		if (rootElementRef.current) {
+			highlightElementIndefinetly(rootElementRef.current);
+		}
+	}
+
+	return (
+		<div
+			ref={mergedRefs}
+			className={[
+				'canvas-draggable-card__property-row',
+				'canvas-draggable-card__main-property',
+				'canvas-draggable-card__main-value-property',
+				'canvas-draggable-card__main-input-property',
+				...(disabled ? ['disabled'] : []),
+			].join(' ')}
+			id={getCanvasEntityMainValueInputDOMId(entity)}
+			style={{
+				backgroundColor: resolveMainValueBackgroundCSSVariable(entity),
+			}}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getCanvasEntityMainValueInputDOMId(entity),
+			}}
+			onMouseOver={(e: any) => {
+				if (!!props.project.canvas?.activeConnectionDrawing) {
+					if (
+						props.project.onGoingConnectionCompatibleEntities?.[
+							props.entity.id
+						] &&
+						[ConnectionNodeType.PropertyOut].includes(
+							props.project.onGoingConnectionNodeType,
+						)
+					) {
+						if (
+							props.project.onGoingConnectionSource &&
+							[ConnectionNodeType.PropertyOut].includes(
+								props.project.onGoingConnectionNodeType,
+							)
+						) {
+							props.project.onGoingConnectionTarget = props.entity;
+							props.project.onGoingConnectionTargetId =
+								getCanvasEntityMainValueInputDOMId(entity);
+						}
+
+						props.project.canvas?.activeConnectionDrawing.snap(
+							getCanvasEntityMainValueInputDOMId(entity),
+						);
+
+						removeHighlightElementIndefinetly(rootElementRef.current);
+						highlightElementSuccess(rootElementRef.current);
+					} else if (
+						!!props.project.onGoingConnectionIncompatibleEntities?.[
+							props.entity.id
+						]
+					) {
+						// Read the disabled reasons and add a tooltip to the mouse
+						const reasonsMessage =
+							props.project.onGoingConnectionIncompatibleEntities?.[
+								props.entity.id
+							].reasons
+								.map((reason) =>
+									entityDisabledReasonToShortReadableError(reason),
+								)
+								.join('.\n');
+
+						props.project.canvas?.showTooltip(
+							'connection-disabled-reasons-main-value-output-' +
+								props.entity.id,
+							reasonsMessage,
+						);
+						if (props.project.canvas) {
+							props.project.canvas.tooltip.style.fontSize = '28px';
+							props.project.canvas.canvasElement.style.cursor = 'not-allowed';
+						}
+					}
+				}
+			}}
+			onMouseLeave={(e: any) => {
+				if (
+					props.project.canvas?.activeUserSetTooltipId ===
+					'connection-disabled-reasons-main-value-output-' + props.entity.id
+				) {
+					props.project.canvas?.hideTooltip(
+						'connection-disabled-reasons-main-value-output-' + props.entity.id,
+					);
+				}
+
+				if (
+					!!props.project.canvas?.activeConnectionDrawing &&
+					props.project.onGoingConnectionCompatibleEntities?.[
+						props.entity.id
+					] &&
+					[ConnectionNodeType.PropertyOut].includes(
+						props.project.onGoingConnectionNodeType,
+					)
+				) {
+					removeHighlightElementIndefinetly(rootElementRef.current);
+					highlightElementIndefinetly(rootElementRef.current);
+
+					if (
+						props.project.canvas?.activeConnectionDrawing?.snappedTo ===
+						getCanvasEntityMainValueInputDOMId(entity)
+					) {
+						props.project.canvas?.activeConnectionDrawing?.unSnap();
+					}
+
+					if (
+						props.project.onGoingConnectionTarget === props.entity &&
+						props.project.onGoingConnectionTargetId ===
+							getCanvasEntityMainValueInputDOMId(entity) &&
+						[ConnectionNodeType.PropertyOut].includes(
+							props.project.onGoingConnectionNodeType,
+						)
+					) {
+						props.project.onGoingConnectionTarget = null;
+						props.project.onGoingConnectionTargetId = null;
+					}
+				}
+			}}
+		>
+			<div
+				id={`${getCanvasEntityMainValueInputDOMId(entity)}--connected-left-node`}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: `${getCanvasEntityMainValueInputDOMId(
+						entity,
+					)}--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={resolveMainValueBackgroundCSSVariable(props.entity)}
+						stroke={resolveMainValueBackgroundCSSVariable(props.entity)}
+						strokeWidth='2'
+					/>
+				</svg>
+			</div>
+			{!disabled && !relevantParentDisabledReasons.length && (
+				<div
+					id={`${getCanvasEntityMainValueInputDOMId(entity)}--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(
+							`#${getCanvasEntityMainValueInputDOMId(
+								entity,
+							)}--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 === entity;
+
+								if (!isConnectedToMenu) {
+									permanentNodeElement.classList.remove('canvas__node__active');
+								}
+							}
+
+							if (props.project.onGoingConnectionTarget !== entity) {
+								props.project.off('canvas-connection-end', mouseUpListener);
+							}
+						};
+
+						props.project.on('canvas-connection-end', mouseUpListener);
+
+						props.project.startConnection({
+							targetId: `${getCanvasEntityMainValueInputDOMId(
+								entity,
+							)}--connected-left-node`,
+							draggableObject: props.canvasElement.draggableObject,
+							target: entity,
+							nodeType: ConnectionNodeType.PropertyIn,
+						});
+					}}
+					onMouseUp={(e) => {
+						// Remove active class from connected/permanent node
+					}}
+				/>
+			)}
+			<div
+				className={[
+					'canvas-draggable-card__property__left-block',
+					'canvas-draggable-card__property__value-container',
+				].join(' ')}
+			>
+				<i className='fas fa-arrow-right-to-bracket' />
+				<span className='canvas-draggable-card__property__labels-group'>
+					<p className='canvas-draggable-card__property__name'>
+						<b>SET</b> full value
+					</p>
+					<p className='canvas-draggable-card__property__type'>
+						Inherited by all properties
+					</p>
+				</span>
+			</div>
+			<span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+				<br />
+			</span>
+		</div>
+	);
+}