@elyx-code/editor-ui 0.0.2

package/src/components/canvas-settings-menu/CanvasSettingsMenuButton.tsx

@@ -0,0 +1,515 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import './canvas-settings-menu.css';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import { onClickAway } from '../../utils/DOM';
+import { EditorService } from '../../services/editor';
+import { IComponentLifecycleProps } from '../../utils/react';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import { isMacPlatform } from '../../utils';
+import { popupNotification } from '../../popup-notification';
+import { Logger } from '@elyx-code/common-ts-utils';
+import {
+	CanvasEntityState,
+	ChangeSet,
+	getTouchedCanvasEntitiesFromChangeSet,
+	ProjectState,
+	StateMutationAction,
+	Traverser
+} from '@elyx-code/project-logic-tree';
+import { toCanvasFlatArray } from '../../services/editor/layout';
+import ReportBugDialog from '../ReportBugDialog';
+
+export interface ICanvasSettingsMenuButtonProps extends IComponentLifecycleProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+const CanvasSettingsMenuButton: React.FC<ICanvasSettingsMenuButtonProps> = (
+	props
+) => {
+	const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+	const [isBugReportOpen, setIsBugReportOpen] = useState<boolean>(false);
+	const [isDeletingProjectCache, setIsDeletingProjectCache] =
+		useState<boolean>(false);
+	const [currentScale, setCurrentScale] = useState<string>(
+		!!props.project?.canvas
+			? (props.project?.canvas?.currentScale * 100)?.toFixed(0)
+			: '- '
+	);
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const onButtonClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+
+		props.project?.hideEntityCreationMenu();
+		const isOpen = isMenuOpen;
+
+		if (isOpen) {
+			setIsMenuOpen(false);
+			return;
+		}
+
+		const menuElement = document.querySelector(
+			'#canvas-settings-menu--popup'
+		);
+
+		onClickAway(menuElement, () => {
+			setIsMenuOpen(false);
+		});
+
+		setIsMenuOpen(true);
+	};
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			e.preventDefault();
+
+			if (!isMenuOpen) {
+				// @ts-ignore
+				onButtonClick(e);
+			}
+		},
+		[props.project, isMenuOpen]
+	);
+
+	const closeAllMenus = useCallback((e: KeyboardEvent) => {
+		setIsMenuOpen(false);
+	}, []);
+
+	useEffect(() => {
+		const handleEntityUpdate = (payload: any) => {
+			forceUpdate();
+		};
+
+		props.project?.on('escape-key-press', closeAllMenus);
+		props.project?.on('canvas-globally-enabled', handleEntityUpdate);
+		props.project?.on('canvas-globally-disabled', handleEntityUpdate);
+
+		return () => {
+			props.project?.off('escape-key-press', closeAllMenus);
+			props.project?.off('canvas-globally-enabled', handleEntityUpdate);
+			props.project?.off('canvas-globally-disabled', handleEntityUpdate);
+		};
+	}, [handleKeyDown, closeAllMenus]);
+
+	useEffect(() => {
+		const updateScale = () => {
+			if (!!props.project?.canvas) {
+				setCurrentScale(
+					(props.project.canvas?.currentScale * 100).toFixed(0)
+				);
+			}
+		};
+
+		if (!!props.project?.canvas) {
+			setCurrentScale(
+				(props.project.canvas?.currentScale * 100).toFixed(0)
+			);
+		}
+
+		props.project?.on('canvas-scale-changed', updateScale);
+
+		return () => {
+			props.project?.off('canvas-scale-changed', updateScale);
+		};
+	}, [props.ready]);
+
+	const deleteProjectCache = async () => {
+		try {
+			setIsDeletingProjectCache(true);
+			await props.project?.deleteProjectCache({
+				onBeforeReload() {
+					setIsDeletingProjectCache(false);
+					popupNotification({
+						color: 'success',
+						text: 'Project cache removed successfully. Reloading page...'
+					});
+				}
+			});
+		} catch (error) {
+			Logger.error('Error deleting project cache:', error);
+			popupNotification({
+				color: 'error',
+				text: 'Failed to remove project cache. Please try again later.'
+			});
+		}
+	};
+
+	const isMac = isMacPlatform();
+
+	return (
+		<div
+			className="canvas-settings-menu"
+			onMouseOver={(e) => e.stopPropagation()}
+		>
+			<div className="canvas-settings-menu__section">
+				<button
+					className="canvas-settings-menu__button"
+					id="canvas-settings-menu--button"
+					onClick={onButtonClick}
+				>
+					<span className="canvas-settings-menu__button__scale">
+						{currentScale + '%'}
+					</span>
+					{/* vertical separator line */}
+					<div className="canvas-settings-menu__button__separator" />
+					<i className="canvas-settings-menu__button--icon fa-solid fa-sliders" />
+				</button>
+				<Tooltip
+					anchorQuerySelector="#canvas-settings-menu--button"
+					placement="left"
+				>
+					Canvas configuration and debugging options
+				</Tooltip>
+				<DropdownMenuPopup
+					popupOptions={{
+						id: 'canvas-settings-menu--popup',
+						anchorQuerySelector: '#canvas-settings-menu--button',
+						placement: 'bottom-end',
+						noArrow: true,
+						offset: 3,
+						open: isMenuOpen
+					}}
+					options={[
+						{
+							iconStart: 'fa-solid fa-bug',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								setIsMenuOpen(false);
+								setIsBugReportOpen(true);
+							},
+							label: 'Report a bug',
+							subLabel: 'Let us know if you found any issues',
+							color: 'error'
+						},
+						{
+							iconStart: 'fa-solid fa-bug',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								await deleteProjectCache();
+							},
+							label: 'Remove cache and reload',
+							color: 'warning',
+							subLabel:
+								'Attempt to fix any issues with the loaded project state',
+							disabled: isDeletingProjectCache
+						},
+						{
+							iconStart: 'fa-solid fa-bug',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+
+								console.log('Re-sync project');
+
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											props.project.logic,
+											false,
+											StateMutationAction.AfterAllChildrenInitialized
+										)
+									);
+
+								const traverser = new Traverser();
+								traverser.flatRecord =
+									props.project.logic.instances;
+								traverser.order = Object.keys(
+									props.project.logic.instances
+								);
+								await traverser.orderEntitiesAsync();
+
+								let numberOfErrored = 0;
+
+								await traverser.visitAsync((entity) => {
+									try {
+										if (
+											entity &&
+											'afterAllChildrenInitialized' in
+												entity &&
+											typeof (entity as any)
+												.afterAllChildrenInitialized ===
+												'function'
+										) {
+											(
+												entity as any
+											).afterAllChildrenInitialized(
+												changeSet
+											);
+										}
+									} catch {
+										numberOfErrored++;
+									}
+								});
+
+								await props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+
+								popupNotification({
+									color: 'success',
+									text: 'Project re-sync completed successfully.'
+								});
+
+								if (!!numberOfErrored) {
+									popupNotification({
+										color: 'warning',
+										text: `Failed to re-sync ${numberOfErrored} ${numberOfErrored === 1 ? 'entity' : 'entities'}`
+									});
+								}
+							},
+							label: 'Re-sync full project',
+							color: 'warning',
+							subLabel:
+								'Traverse and re-sync all entities to resolve stale name conflicts',
+							disabled:
+								isDeletingProjectCache ||
+								!props.ready ||
+								!props.project?.hasLoadedLogic,
+							tooltip: (() => {
+								if (!props.project?.hasLoadedLogic) {
+									return 'Loading project logic...';
+								}
+
+								return 'This will traverse the entire project logic and re-initialize all entities to fix any stale state or duplicate name conflicts.';
+							})()
+						},
+						{
+							iconStart: 'fa-solid fa-bug',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+
+								await props.project.recalculateValidate();
+
+								popupNotification({
+									color: 'success',
+									text: 'Project validation completed successfully.'
+								});
+							},
+							label: 'Re-validate full project',
+							color: 'warning',
+							subLabel:
+								'Traverse and re-validate all project entities to resolve stale errors',
+							disabled:
+								isDeletingProjectCache ||
+								!props.ready ||
+								!props.project?.hasLoadedLogic,
+							tooltip: (() => {
+								if (!props.project?.hasLoadedLogic) {
+									return 'Loading project logic...';
+								}
+
+								return 'This will traverse the entire project logic and re-validate all entities to resolve stale error states.';
+							})()
+						},
+						{
+							iconStart: 'fa-solid fa-bug',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								const record =
+									props.project.logic.toFullProjectTransfer({
+										shallowErrors: true
+									}).record;
+								const numberOfObjects =
+									Object.keys(record).length;
+								await navigator.clipboard.writeText(
+									JSON.stringify(record, null, 2)
+								);
+								popupNotification({
+									color: 'success',
+									text: `Copied ${numberOfObjects} project objects to clipboard as JSON successfully.`
+								});
+							},
+							label: 'Copy project as JSON to clipboard',
+							color: 'warning',
+							subLabel:
+								'Will copy the current project state as a (JSON) flat record of objects to your clipboard',
+							disabled:
+								isDeletingProjectCache ||
+								!props.project?.hasLoadedLogic,
+							tooltip: (() => {
+								if (!props.project?.hasLoadedLogic) {
+									return 'Loading project logic...';
+								}
+
+								return '';
+							})()
+						},
+						{
+							iconStart: 'fa-solid fa-bug',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											props.project.logic,
+											false,
+											StateMutationAction.PrettifyCanvas
+										)
+									);
+
+								toCanvasFlatArray(
+									props.project.logic,
+									changeSet,
+									{
+										forceAll: true
+									}
+								);
+
+								// Close and render the canvas to apply the new layout
+								await props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+
+								const canvasEntitiesTouched: CanvasEntityState[] =
+									getTouchedCanvasEntitiesFromChangeSet(
+										changeSet
+									);
+
+								if (canvasEntitiesTouched.length === 0) {
+									popupNotification({
+										// color: 'info',
+										text: `No entities were rearranged, the layout is already optimal.`
+									});
+								} else {
+									popupNotification({
+										color: 'success',
+										text: `Rearranged ${canvasEntitiesTouched.length} node${canvasEntitiesTouched.length === 1 ? '' : 's'} successfully.`
+									});
+								}
+							},
+							label: 'Prettify canvas layout',
+							color: 'warning',
+							subLabel:
+								'Rearrange the canvas layout for better readability',
+							disabled:
+								isDeletingProjectCache ||
+								!props.ready ||
+								props.project?.canvas?.disabled,
+							tooltip: (() => {
+								if (
+									!(
+										isDeletingProjectCache ||
+										!props.ready ||
+										props.project?.canvas?.disabled
+									)
+								) {
+									return 'This will rearrange the nodes on the canvas to create a more organized layout. It will not change the structure of your logic, just the position of the nodes on the canvas.';
+								}
+
+								if (isDeletingProjectCache) {
+									return 'Currently deleting project cache...';
+								}
+
+								if (!props.project?.hasLoadedLogic) {
+									return 'Loading project logic...';
+								}
+
+								if (!props.ready) {
+									return 'The canvas is still loading...';
+								}
+
+								if (props.project?.canvas?.disabled) {
+									return 'The canvas is currently disabled.';
+								}
+							})(),
+							popupOptions: {
+								style: {
+									maxWidth: 300
+								}
+							}
+						},
+						{
+							iconStart: 'fa-solid fa-magnifying-glass-plus',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								props.project.canvas?.zoomTo(
+									props.project.canvas?.maxScale
+								);
+							},
+							label: '100%',
+							subLabel: 'Apply max zoom',
+							disabled: !props.ready
+						},
+						{
+							iconStart: 'fa-solid fa-magnifying-glass-minus',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								props.project.canvas?.zoomTo(
+									props.project.canvas?.minScale
+								);
+							},
+							label: '0%',
+							subLabel: 'Apply min zoom',
+							disabled: !props.ready
+						},
+						{
+							iconStart: 'fa-regular fa-magnifying-glass-plus',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								props.project.canvas?.zoomBy(0.14);
+							},
+							label: 'Zoom in',
+							subLabel: 'Use mouse wheel or pinch to zoom',
+							disabled: !props.ready
+						},
+						{
+							iconStart: 'fa-regular fa-magnifying-glass-minus',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								props.project.canvas?.zoomBy(-0.14);
+							},
+							label: 'Zoom out',
+							subLabel: 'Use mouse wheel or pinch to zoom',
+							disabled: !props.ready
+						},
+						{
+							iconStart: 'fa-solid fa-rotate-left',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								await props.project.undo();
+							},
+							label: 'Undo',
+							subLabel: isMac
+								? 'Shortcut (⌘ + z)'
+								: 'Shortcut (Ctrl + z)',
+							disabled: !props.ready
+						},
+						{
+							iconStart: 'fa-solid fa-rotate-right',
+							onClick: async (_, e) => {
+								e.stopPropagation();
+								await props.project.redo();
+							},
+							label: 'Redo',
+							subLabel: isMac
+								? 'Shortcut (⌘ + Shift + z)'
+								: 'Shortcut (Ctrl + Shift + z)',
+							disabled: !props.ready
+						}
+					]}
+				/>
+			</div>
+
+			{isBugReportOpen && (
+				<ReportBugDialog
+					projectId={props.project?.logic?.id}
+					onClose={() => setIsBugReportOpen(false)}
+				/>
+			)}
+		</div>
+	);
+};
+
+export default CanvasSettingsMenuButton;

package/src/components/canvas-settings-menu/canvas-settings-menu.css

@@ -0,0 +1,96 @@
+.canvas-settings-menu {
+  position: fixed;
+  bottom: 25px;
+  right: 65px;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  z-index: 1;
+}
+
+.canvas-settings-menu__section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 0.5em;
+  overflow: hidden;
+  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
+}
+
+.canvas-settings-menu__button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--color-main-grey);
+  background: white;
+  border: none;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  height: 35px;
+  padding: 0 8px;
+  position: relative;
+  /* 3 to compete with its own child popup */
+  z-index: 3;
+}
+
+.canvas-settings-menu__button__scale {
+  font-size: 0.8em;
+  color: rgba(0, 0, 0, 0.54);
+  font-weight: 600;
+}
+
+.canvas-settings-menu__button__separator {
+  width: 1px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.1);
+  margin: 0 8px;
+}
+
+.canvas-settings-menu__button--icon {
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 200;
+}
+
+.canvas-settings-menu__button p {
+  margin: 0;
+  padding: 4px 0 0 0;
+  font-size: 0.5em;
+}
+
+.canvas-settings-menu__primary-button {
+  color: white;
+  background: #2bd650;
+}
+
+.canvas-settings-menu__button:hover > i {
+  transform: scale(1.06);
+}
+
+.canvas-settings-menu__button:active {
+  color: var(--color-main-primary);
+}
+
+.canvas-settings-menu__button.canvas-settings-menu__primary-button:active {
+  color: white;
+}
+
+.canvas-settings-menu__button:disabled {
+  cursor: not-allowed;
+  color: var(--color-light-grey);
+}
+
+.canvas-settings-menu__button:disabled:hover {
+  transform: none;
+}
+
+.canvas-settings-menu__button:disabled:active {
+  color: var(--color-light-grey);
+}

package/src/components/circular-image-upload/CircularImageUpload.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import Loader from '../../lib/loader/Loader';
+import './circular-image-upload.css';
+import { debounce } from '../../utils';
+import ImageInputPlaceholder from '../../assets/image-input-placeholder.png';
+
+interface ICircularImageUploadProps {
+	src?: string;
+	onChange: (files: File[], lastPicture: string) => void;
+	hoverLabel?: string;
+	dragLabel?: string;
+}
+
+const CircularImageUpload: React.FC<ICircularImageUploadProps> = ({
+	src,
+	onChange,
+	hoverLabel,
+	dragLabel,
+}) => {
+	const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+	const [lastPicture, setLastPicture] = useState<string>('');
+	const [picture, setPicture] = useState<string>(src || '');
+
+	const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+		event.preventDefault();
+		const file = event.target.files?.[0];
+		if (!file) return;
+
+		const url = URL.createObjectURL(file);
+		setLastPicture(picture);
+		setPicture(url);
+		setIsSubmitting(true);
+
+		await onChange(event.target.files as any, lastPicture);
+
+		setIsSubmitting(false);
+	};
+
+	const handleFileDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+		event.preventDefault();
+		const files = event.dataTransfer.files;
+		if (!files.length) return;
+
+		const file = files[0];
+		setIsSubmitting(true);
+
+		await onChange([file], lastPicture);
+
+		setIsSubmitting(false);
+		setLastPicture(picture);
+		setPicture(URL.createObjectURL(file));
+
+		const dragOverLabel = document.querySelector('.profile-pic_drag-label');
+		dragOverLabel?.classList.remove('profile-pic_dragover-active');
+	};
+
+	const handleDragOver = (event: React.DragEvent<HTMLLabelElement>) => {
+		event.preventDefault();
+		event.currentTarget?.classList.add('profile-pic_dragover-active');
+	};
+
+	const handleDragLeave = debounce(
+		(event: React.DragEvent<HTMLLabelElement>) => {
+			event.preventDefault();
+			event.currentTarget?.classList.remove('profile-pic_dragover-active');
+		},
+		1000
+	);
+
+	return (
+		<div className='circular-profile-pic-container'>
+			<div className='circular-profile-pic' onDrop={handleFileDrop}>
+				{!isSubmitting && (
+					<>
+						<label className='profile-pic_hover-label' htmlFor='file'>
+							<span>{hoverLabel || 'Change Image'}</span>
+						</label>
+						<label
+							className='profile-pic_drag-label'
+							htmlFor='file'
+							onDragOver={handleDragOver}
+							onDragLeave={handleDragLeave}
+						>
+							<span className='glyphicon glyphicon-camera'></span>
+							<span>{dragLabel || 'Drop Image'}</span>
+						</label>
+					</>
+				)}
+				{isSubmitting && (
+					<div className='profile-pic_loader-container'>
+						<Loader size={24} />
+					</div>
+				)}
+				<input
+					id='file'
+					type='file'
+					accept='image/*'
+					onChange={handleChange}
+					disabled={isSubmitting}
+				/>
+				<img
+				// Fallback to avatar picture if src is not provided
+					src={picture || ImageInputPlaceholder}
+					id='output'
+					width='200'
+					alt='Profile'
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default CircularImageUpload;