@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,736 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+	EntityType,
+	CanvasEntityDisabledReason,
+	ArgumentDeclarationState,
+	EntryPointEntityState,
+	ValueDescriptorState,
+	ChangeSet,
+	ProjectState,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	StateMutationAction
+} from '@elyx-code/project-logic-tree';
+import './draggable-entity-card.css';
+import {
+	entityDisabledReasonToShortReadableError,
+	getCanvasEntityDOMId,
+	getCardColorCSSVariable,
+	getCardSupportColorCSSVariable,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+	resolveEntityColorClass,
+	safeResolveEntityName
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import { Canvas } from '../../lib/canvas';
+import DataTypeIcon from './DataTypeIcon';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import LogicErrorIconMenu from './logic-error/LogicErrorIconMenu';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import DynamicValueEntry from '../dynamic-value/DynamicValueEntry';
+import EntityLockedIconMenu from './entity-locked-icon/EntityLockedIcon';
+import { popupNotification } from '../../popup-notification';
+
+interface IArgumentDeclarationProps {
+	argumentDeclaration: ArgumentDeclarationState | ValueDescriptorState;
+	entity: EntryPointEntityState;
+	canvasElement: CanvasEntityElement;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+	size?: 'small' | 'default';
+}
+
+export default function ArgumentDeclaration(props: IArgumentDeclarationProps) {
+	const rootElementRef = useRef(null);
+	const argumentDeclaration: ArgumentDeclarationState =
+		props.argumentDeclaration as ArgumentDeclarationState;
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-event-card-menu-button-' +
+					argumentDeclaration.id +
+					'--popup--body'
+				}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(
+									props.argumentDeclaration.id
+								);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled:
+								!!(
+									props.argumentDeclaration as ArgumentDeclarationState
+								).implements.some((impl) => impl.required) ||
+								!argumentDeclaration.deletable,
+							tooltip: (() => {
+								const disabledReasons = [];
+
+								if (
+									!!(
+										props.argumentDeclaration as ArgumentDeclarationState
+									).implements.some((impl) => impl.required)
+								) {
+									disabledReasons.push(
+										'Cannot delete because this input is required'
+									);
+								}
+
+								if (!argumentDeclaration.deletable) {
+									disabledReasons.push(
+										'This input cannot be deleted. Because the system need to refer to it over time.'
+									);
+								}
+
+								if (disabledReasons.length) {
+									return disabledReasons.join('. ');
+								}
+
+								return 'Forever delete this input';
+							})(),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'--argument--' +
+								argumentDeclaration.id +
+								'--delete'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.ArgumentDeclaration}/${argumentDeclaration.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: false,
+							tooltip: !argumentDeclaration.editable
+								? 'This input has been locked and can no longer be edited'
+								: 'Edit this input',
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'--argument--' +
+								argumentDeclaration.id +
+								'--edit'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											argumentDeclaration,
+											false,
+											StateMutationAction.RecalculateArg
+										)
+									);
+
+								argumentDeclaration.afterAllChildrenInitialized(
+									changeSet
+								);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'Recalculate',
+							color: 'warning',
+							// Bug icon
+							iconEnd: 'fa-solid fa-bug',
+							disabled: false,
+							// Lower case the first letter of the resolved readable name
+							tooltip:
+								'Recalculate the state of this ' +
+								lowercaseFirstLetter(
+									READABLE_ENTITY_TYPES[
+										props.argumentDeclaration.type
+									].shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'--argument--' +
+								argumentDeclaration.id +
+								'--recalculate'
+						},
+						...(!argumentDeclaration.deletable ||
+						!argumentDeclaration.editable
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											// argumentDeclaration.deletable = true;
+											argumentDeclaration.editable = true;
+											if (argumentDeclaration.dataType) {
+												argumentDeclaration.dataType.editable = true;
+											}
+
+											forceUpdate();
+											// const changeSet = props.project.logic.addChangeSet(
+											// 	new ChangeSet(
+											// 		props.project.logic,
+											// 		ProjectState.sessionAuthor,
+											// 		new Date().toISOString(),
+											// 		argumentDeclaration
+											//		false,
+											//		StateMutationActions.
+											// 	)
+											// );
+
+											// argumentDeclaration.afterAllChildrenInitialized(
+											// 	changeSet
+											// );
+
+											// props.project.renderAndCloseChangeSet(changeSet);
+										},
+										label: 'Unlock',
+										color: 'warning' as 'warning',
+										// Bug icon
+										iconEnd: 'fa-solid fa-bug',
+										disabled: false,
+										// Lower case the first letter of the resolved readable name
+										tooltip:
+											'Temporarily unlock this ' +
+											lowercaseFirstLetter(
+												READABLE_ENTITY_TYPES[
+													props.argumentDeclaration
+														.type
+												].shortSingular
+											),
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--' +
+											props.entity.type +
+											'--argument--' +
+											argumentDeclaration.id +
+											'--unlock'
+									}
+								]
+							: []),
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(
+									props.argumentDeclaration.id
+								);
+								popupNotification({
+									text: `Copied ID: ${props.argumentDeclaration.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.argumentDeclaration.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.argumentDeclaration
+								);
+								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.argumentDeclaration.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[
+			argumentDeclaration.id,
+			props.entity.type,
+			props.entity.id,
+			props.project
+		]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-event-card-menu-button-' +
+				argumentDeclaration.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-property-card-menu-button-' + argumentDeclaration.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			placement: 'left',
+			arrowContainerSelector:
+				'#canvas-event-card-menu-button-' +
+				argumentDeclaration.id +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody
+	).onBeforeShow(() => {
+		return !disabled && !suggestion;
+	});
+
+	useEffect(() => {
+		const handleArgumentUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!!payload.compatible?.[props.argumentDeclaration.id] &&
+				[ConnectionNodeType.PropertyIn].includes(payload.nodeType)
+			) {
+				if (rootElementRef.current) {
+					highlightElementIndefinetly(rootElementRef.current);
+				}
+			}
+		};
+
+		const handleConnectionEnd = () => {
+			if (rootElementRef.current) {
+				removeHighlightElementIndefinetly(rootElementRef.current);
+				removeHighlightElementSuccess(rootElementRef.current);
+			}
+		};
+
+		const handleValueChange = (payload: any) => {
+			if (payload?.owner?.id === props.argumentDeclaration?.id) {
+				forceUpdate();
+			}
+		};
+
+		props.project.on(props.argumentDeclaration.id, handleArgumentUpdate);
+		props.project.on('canvas-connection-start', handleConnectionStart);
+		props.project.on('canvas-connection-end', handleConnectionEnd);
+		props.project.on('value-written', handleValueChange);
+		props.project.on('value-removed', handleValueChange);
+
+		return () => {
+			props.project.off(
+				props.argumentDeclaration.id,
+				handleArgumentUpdate
+			);
+			props.project.off('canvas-connection-start', handleConnectionStart);
+			props.project.off('canvas-connection-end', handleConnectionEnd);
+			props.project.off('value-written', handleValueChange);
+			props.project.off('value-removed', handleValueChange);
+		};
+	}, [
+		props.project,
+		props.argumentDeclaration.id,
+		updateKey,
+		rootElementRef,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess
+	]);
+
+	const name = safeResolveEntityName(
+		argumentDeclaration,
+		props.project.logic
+	);
+
+	const isConnected = !!argumentDeclaration?.writesValues.length;
+
+	const size = props.size || 'default';
+
+	const suggestion =
+		// @ts-ignore
+		argumentDeclaration.suggestion ||
+		// @ts-ignore
+		props.entity.suggestion;
+
+	const disabled =
+		(!!props.parentDisabledReasons.length || suggestion) &&
+		!props.project.onGoingConnectionCompatibleEntities?.[
+			props.argumentDeclaration.id
+		];
+
+	return (
+		<li
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card__property-row',
+				'canvas-draggable-card__standard-property',
+				'canvas-draggable-card__output-property',
+				size === 'small'
+					? 'canvas-draggable-card__property__small'
+					: '',
+				// suggestion ? 'suggestion' : '',
+				disabled ? 'disabled' : ''
+			].join(' ')}
+			id={getCanvasEntityDOMId(argumentDeclaration)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]:
+					getCanvasEntityDOMId(argumentDeclaration)
+			}}
+			onMouseOver={(e: any) => {
+				if (!!props.project.canvas?.activeConnectionDrawing) {
+					if (
+						props.project.onGoingConnectionCompatibleEntities?.[
+							props.argumentDeclaration.id
+						]
+					) {
+						if (
+							props.project.onGoingConnectionTarget &&
+							[ConnectionNodeType.PropertyIn].includes(
+								props.project.onGoingConnectionNodeType
+							)
+						) {
+							props.project.onGoingConnectionSource =
+								props.argumentDeclaration;
+							props.project.onGoingConnectionSourceId =
+								getCanvasEntityDOMId(argumentDeclaration);
+						}
+
+						props.project.canvas?.activeConnectionDrawing.snap(
+							getCanvasEntityDOMId(argumentDeclaration)
+						);
+
+						removeHighlightElementIndefinetly(
+							rootElementRef.current
+						);
+						highlightElementSuccess(rootElementRef.current);
+					} else if (
+						!!props.project.onGoingConnectionIncompatibleEntities?.[
+							props.argumentDeclaration.id
+						]
+					) {
+						// Read the disabled reasons and add a tooltip to the mouse
+						const reasonsMessage =
+							props.project.onGoingConnectionIncompatibleEntities?.[
+								props.argumentDeclaration.id
+							].reasons
+								.map((reason) =>
+									entityDisabledReasonToShortReadableError(
+										reason
+									)
+								)
+								.join('.\n');
+
+						props.project.canvas?.showTooltip(
+							'connection-disabled-reasons-argument-declaration-' +
+								props.argumentDeclaration.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-argument-declaration-' +
+						props.argumentDeclaration.id
+				) {
+					props.project.canvas?.hideTooltip(
+						'connection-disabled-reasons-argument-declaration-' +
+							props.argumentDeclaration.id
+					);
+				}
+
+				if (
+					!!props.project.canvas?.activeConnectionDrawing &&
+					props.project.onGoingConnectionCompatibleEntities?.[
+						props.argumentDeclaration.id
+					]
+				) {
+					removeHighlightElementIndefinetly(rootElementRef.current);
+					highlightElementIndefinetly(rootElementRef.current);
+
+					if (
+						props.project.canvas?.activeConnectionDrawing
+							?.snappedTo ===
+						getCanvasEntityDOMId(argumentDeclaration)
+					) {
+						props.project.canvas?.activeConnectionDrawing?.unSnap();
+					}
+
+					if (
+						props.project.onGoingConnectionSource ===
+							props.argumentDeclaration &&
+						props.project.onGoingConnectionSourceId ===
+							getCanvasEntityDOMId(argumentDeclaration) &&
+						[ConnectionNodeType.PropertyIn].includes(
+							props.project.onGoingConnectionNodeType
+						)
+					) {
+						props.project.onGoingConnectionSource = null;
+						props.project.onGoingConnectionSourceId = null;
+					}
+				}
+			}}
+		>
+			<DynamicValueEntry
+				entity={props.argumentDeclaration}
+				project={props.project}
+				canvasElement={props.canvasElement}
+				parentDisabledReasons={props.parentDisabledReasons}
+				popupPlacement="left"
+			>
+				{(extraContent) => (
+					<>
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: '6px'
+							}}
+						>
+							<EntityLockedIconMenu
+								entity={argumentDeclaration}
+								project={props.project}
+								canvasElement={props.canvasElement}
+								parentDisabledReasons={
+									props.parentDisabledReasons
+								}
+							/>
+							<LogicErrorIconMenu
+								entity={argumentDeclaration}
+								project={props.project}
+								canvasElement={props.canvasElement}
+								parentDisabledReasons={
+									props.parentDisabledReasons
+								}
+							/>
+							{!disabled &&
+								!props.parentDisabledReasons.length && (
+									<div className="canvas-draggable-card__property-row__menu-button">
+										<Button
+											ref={canvasPopup.anchorRef}
+											variant="text"
+											color="grey"
+											iconEnd="fa-solid fa-ellipsis-v"
+											size="small"
+											className="canvas-small-entity-card-menu-button"
+											id={
+												'canvas-property-card-menu-button-' +
+												argumentDeclaration.id
+											}
+											onClick={(e: any) => {
+												e.stopPropagation();
+												canvasPopup?.toggle();
+											}}
+											onDoubleClick={(
+												e: React.MouseEvent<HTMLButtonElement>
+											) => {
+												e.stopPropagation();
+												props.project?.canvas?.unselectAll();
+												EditorService.navigate(
+													`${props.project?.editorBasePath}/entity/${EntityType.ArgumentDeclaration}/${argumentDeclaration.id}`
+												);
+											}}
+										/>
+									</div>
+								)}
+						</span>
+						<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>
+								{extraContent}
+							</div>
+
+							<DataTypeIcon
+								entity={argumentDeclaration}
+								size={size === 'small' ? 'small' : 'medium'}
+								color="dark-grey"
+								parentDisabledReasons={
+									props.parentDisabledReasons
+								}
+								project={props.project}
+								parentCanvasObject={
+									props.canvasElement?.draggableObject
+								}
+							/>
+						</div>
+					</>
+				)}
+			</DynamicValueEntry>
+
+			<div
+				id={`${getCanvasEntityDOMId(argumentDeclaration)}--connected-right-node`}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: `${getCanvasEntityDOMId(
+						argumentDeclaration
+					)}--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(props.entity.type)
+							])
+				].join(' ')}
+				style={{
+					position: 'absolute',
+					top: '50%',
+					right: '-10px',
+					transform: 'translateY(-50%)',
+					width: '10px',
+					height: '18px',
+					padding: 0,
+					background: 'transparent',
+					border: 'none',
+					...(props.project.canvas?.disabled
+						? { cursor: 'not-allowed', opacity: 0.9 }
+						: { 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))'
+					}}
+				>
+					{/* M -2 -2 : Start outside top-left
+						L 7 7   : Line to the right point
+						Q 8.5 9 7 11 : Curve the tip
+						L -2 20 : Line to outside bottom-left 
+					*/}
+					<path
+						d="M -2 -2 L 7 7 Q 8.5 9 7 11 L -2 20 Z"
+						fill={getCardSupportColorCSSVariable(props.entity)}
+						stroke={getCardColorCSSVariable(props.entity)}
+						strokeWidth="2"
+					/>
+				</svg>
+			</div>
+			{!props.parentDisabledReasons.length &&
+				!disabled &&
+				!suggestion && (
+					<div
+						id={
+							getCanvasEntityDOMId(argumentDeclaration) +
+							'--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%)'
+						}}
+						onMouseDown={(e) => {
+							e.stopPropagation();
+
+							const permanentNodeElement =
+								rootElementRef.current.querySelector(
+									'#' +
+										getCanvasEntityDOMId(
+											argumentDeclaration
+										)
+								);
+
+							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
+											.onGoingConnectionSource ===
+										argumentDeclaration;
+
+									if (!isConnectedToMenu) {
+										permanentNodeElement.classList.remove(
+											'canvas__node__active'
+										);
+									}
+								}
+
+								if (
+									props.project.onGoingConnectionSource !==
+									argumentDeclaration
+								) {
+									props.project.off(
+										'canvas-connection-end',
+										mouseUpListener
+									);
+								}
+							};
+
+							props.project.on(
+								'canvas-connection-end',
+								mouseUpListener
+							);
+
+							props.project.startConnection({
+								nodeType: ConnectionNodeType.PropertyOut,
+								source: argumentDeclaration,
+								sourceId:
+									getCanvasEntityDOMId(argumentDeclaration),
+								draggableObject:
+									props.canvasElement.draggableObject
+							});
+						}}
+						onMouseUp={(e) => {
+							// Remove active class from connected/permanent node
+						}}
+					/>
+				)}
+		</li>
+	);
+}