@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,624 @@
+import React, { useCallback } from 'react';
+import '../entity-icon/entity-icon.css';
+import { Tooltip } from '@mui/material';
+import {
+	BaseEntityNames,
+	EntityType,
+	EntityWithValueState,
+	PrimitiveTypes,
+	PropertyState,
+	ValueDescriptorState,
+	CanvasEntityDisabledReason,
+	resolveDataTypeLabel,
+	inferDataType,
+	resolveBaseEntityName,
+	resolvePrimitiveEntityName,
+	FunctionDeclarationState,
+} from '@elyx-code/project-logic-tree';
+import {
+	EntityTypeIconColor,
+	EntityTypeIconSize,
+	resolveEntityDataTypeIcon,
+	resolveExplicitDataTypeIcon,
+} from '../../services/editor/icons';
+import { AbsoluteCanvasObject, RelativeObject } from '../../lib/canvas';
+import { EditorService } from '../../services/editor';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+
+interface IDataTypeIconProps {
+	entity: EntityWithValueState | PropertyState | ValueDescriptorState | FunctionDeclarationState;
+	size?: EntityTypeIconSize;
+	color?: EntityTypeIconColor;
+	style?: React.CSSProperties;
+	parentDisabledReasons?: (CanvasEntityDisabledReason | string)[];
+	className?: string;
+	project?: EditorService;
+	parentCanvasObject?: AbsoluteCanvasObject | RelativeObject;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+}
+
+function DataTypeIcon({
+	entity,
+	size = 'medium',
+	color = 'black',
+	style = {},
+	parentDisabledReasons = [],
+	className = '',
+	project,
+	parentCanvasObject,
+	popupPlacement,
+}: IDataTypeIconProps) {
+	const config = resolveEntityDataTypeIcon(entity, color);
+	const src = config.file;
+
+	const id = 'data-type-icon--' + entity.id;
+
+	const dataType =
+		entity?.getDataType(null) || inferDataType(entity, null) || null;
+
+	const tooltipBody = <>{resolveDataTypeLabel(dataType)}</>;
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={[
+					'tooltip',
+					'tooltip--large-font',
+					'tooltip--data-type-icon',
+				]}
+				id={id + '--popup--body'}
+			>
+				{tooltipBody}
+			</CanvasPopupBaseComponent>
+		),
+		[id],
+	);
+
+	const isCanvas = !!parentCanvasObject && !!project;
+
+	// Only if there is a 'parentCanvasObject' prop, we should use the canvasPopup
+	// Otherwise, we should use the Tooltip component
+	const canvasPopup = isCanvas
+		? useCanvasPopup(
+				{
+					editor: project,
+					id: id + '--popup',
+					anchorQuerySelector: '#' + id,
+					arrowClasses: ['data-type-icon-popup-arrow'],
+					parentCanvasObject: parentCanvasObject,
+					arrowContainerSelector: '#' + id + '--popup--body',
+					placement: popupPlacement || 'bottom',
+				},
+				memoizedCanvasPopupBody,
+				[id],
+			)
+				.setupHover({
+					closeDelay: 80,
+					openDelay: 600,
+				})
+				.onBeforeShow((e) => {
+					const otherPopup =
+						CanvasPopup.globalCanvasPopups[
+							id + '--popup-data-type-icon-switch-button'
+						];
+
+					if (otherPopup && otherPopup.open) {
+						return false;
+					}
+
+					if (parentDisabledReasons.length) {
+						return false;
+					}
+
+					return true;
+				})
+		: null;
+
+	if (!!src) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={
+					!isCanvas && !parentDisabledReasons.length
+						? tooltipBody
+						: ''
+				}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<img
+					className={
+						`entity-icon img-entity-icon data-type-icon-${size} ` +
+						(className || '')
+					}
+					src={src}
+					ref={canvasPopup?.anchorRef}
+					alt={`${entity?.type} icon`}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	if (!!config.url) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={
+					!isCanvas && !parentDisabledReasons.length
+						? tooltipBody
+						: ''
+				}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<img
+					className={
+						`entity-icon img-entity-icon data-type-icon-${size} external-icon-img ` +
+						(className || '')
+					}
+					src={config.url}
+					ref={canvasPopup?.anchorRef}
+					alt={`${entity.type} icon`}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	if (!!config.fa) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={
+					!isCanvas && !parentDisabledReasons.length
+						? tooltipBody
+						: ''
+				}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<i
+					className={
+						`entity-icon data-type-icon-${size} fa-entity-icon fa-solid fa-${
+							config.fa || 'rectangle-list'
+						} ` + (className || '')
+					}
+					ref={canvasPopup?.anchorRef}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	return null;
+}
+
+interface IExplicitDataTypeIconProps {
+	id: string;
+	icon:
+		| PrimitiveTypes
+		| 'list'
+		| EntityType.DefinitionEntity
+		| 'unknown'
+		| BaseEntityNames;
+	size?: EntityTypeIconSize;
+	color?: EntityTypeIconColor;
+	style?: React.CSSProperties;
+	parentDisabledReasons?: (CanvasEntityDisabledReason | string)[];
+	className?: string;
+	project?: EditorService;
+	parentCanvasObject?: AbsoluteCanvasObject | RelativeObject;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+}
+
+export function ExplicitDataTypeIcon({
+	id: extId,
+	icon,
+	size = 'medium',
+	color = 'black',
+	style = {},
+	parentDisabledReasons = [],
+	className = '',
+	project,
+	parentCanvasObject,
+	popupPlacement,
+}: IExplicitDataTypeIconProps) {
+	const config = resolveExplicitDataTypeIcon(icon, color);
+	const src = config.file;
+
+	// Random chars if no extId provided, to avoid id collisions in case of multiple ExplicitDataTypeIcons with same 'icon' prop
+	const uuid = Math.random().toString(36).substring(2, 9);
+
+	const id = 'explicit-data-type-icon--' + (extId || uuid);
+
+	const tooltipBody = (() => {
+		if (Object.values(PrimitiveTypes).includes(icon as PrimitiveTypes)) {
+			return <>{resolvePrimitiveEntityName({ name: icon as PrimitiveTypes })}</>;
+		}
+
+		if (Object.values(BaseEntityNames).includes(icon as BaseEntityNames)) {
+			return <>{resolveBaseEntityName([icon as BaseEntityNames])}</>;
+		}
+
+		// Switch case and turn into readable label
+		switch (icon) {
+			case 'list':
+				return <>List</>;
+			case EntityType.DefinitionEntity:
+				return <>Definition entity</>;
+			case 'unknown':
+				return <>Unknown data type</>;
+		}
+	})();
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={[
+					'tooltip',
+					'tooltip--large-font',
+					'tooltip--data-type-icon',
+				]}
+				id={id + '--popup--body'}
+			>
+				{tooltipBody}
+			</CanvasPopupBaseComponent>
+		),
+		[id],
+	);
+
+	const isCanvas = !!parentCanvasObject && !!project;
+
+	// Only if there is a 'parentCanvasObject' prop, we should use the canvasPopup
+	// Otherwise, we should use the Tooltip component
+	const canvasPopup = isCanvas
+		? useCanvasPopup(
+				{
+					editor: project,
+					id: id + '--popup',
+					anchorQuerySelector: '#' + id,
+					arrowClasses: ['data-type-icon-popup-arrow'],
+					parentCanvasObject: parentCanvasObject,
+					arrowContainerSelector: '#' + id + '--popup--body',
+					placement: popupPlacement || 'bottom',
+				},
+				memoizedCanvasPopupBody,
+				[id],
+			)
+				.setupHover({
+					closeDelay: 80,
+					openDelay: 600,
+				})
+				.onBeforeShow((e) => {
+					const otherPopup =
+						CanvasPopup.globalCanvasPopups[
+							id + '--popup-data-type-icon-switch-button'
+						];
+
+					if (otherPopup && otherPopup.open) {
+						return false;
+					}
+
+					if (parentDisabledReasons.length) {
+						return false;
+					}
+
+					return true;
+				})
+		: null;
+
+	if (!!src) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={
+					!isCanvas && !parentDisabledReasons.length
+						? tooltipBody
+						: ''
+				}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<img
+					className={
+						`entity-icon img-entity-icon data-type-icon-${size} ` +
+						(className || '')
+					}
+					src={src}
+					ref={canvasPopup?.anchorRef}
+					alt={`${icon} icon`}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	if (!!config.url) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={
+					!isCanvas && !parentDisabledReasons.length
+						? tooltipBody
+						: ''
+				}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<img
+					className={
+						`entity-icon img-entity-icon data-type-icon-${size} external-icon-img ` +
+						(className || '')
+					}
+					ref={canvasPopup?.anchorRef}
+					src={config.url}
+					alt={`${icon} icon`}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+
+	if (!!config.fa) {
+		return (
+			<Tooltip
+				// The styles overrides below can be cleaned up
+				classes={{
+					tooltip: 'tooltip tooltip--dynamic-value',
+					arrow: 'mui-tooltip-arrow',
+				}}
+				slotProps={{
+					popper: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 0,
+						},
+						modifiers: [
+							{
+								name: 'offset',
+								options: {
+									offset: [0, 8],
+								},
+							},
+						],
+					},
+					tooltip: {
+						className: 'tooltip tooltip--dynamic-value',
+						style: {
+							margin: 0,
+							padding: 5,
+						},
+					},
+					arrow: {
+						className: 'mui-tooltip-arrow',
+					},
+				}}
+				arrow
+				title={
+					!isCanvas && !parentDisabledReasons.length
+						? tooltipBody
+						: ''
+				}
+				placement={popupPlacement || 'bottom'}
+				leaveDelay={400}
+			>
+				<i
+					className={
+						`entity-icon data-type-icon-${size} fa-entity-icon fa-solid fa-${
+							config.fa || 'rectangle-list'
+						} ` + (className || '')
+					}
+					ref={canvasPopup?.anchorRef}
+					style={{
+						opacity: !!parentDisabledReasons.length ? 0.5 : 1,
+						...style,
+					}}
+				/>
+			</Tooltip>
+		);
+	}
+}
+
+export default DataTypeIcon;