@elyx-code/editor-ui 0.0.2

package/src/lib/button/Button.tsx

@@ -0,0 +1,129 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+import './button.css';
+import Loader from '../loader/Loader';
+
+interface Props {
+	onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+	disabled?: boolean;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'error'
+		| 'warning'
+		| 'success'
+		| 'grey'
+		| string;
+	variant?: 'solid' | 'text' | 'outlined';
+	size?: 'small' | 'medium' | 'large';
+	loading?: boolean;
+	iconStart?: string;
+	iconEnd?: string;
+	style?: React.CSSProperties;
+	className?: string;
+	[key: string]: any;
+}
+
+export default forwardRef<HTMLButtonElement, Props>(function Button(
+	props: Props,
+	ref: ForwardedRef<HTMLButtonElement>
+) {
+	// Destructure all known props and leave other props to be cascaded down to the root element
+	const {
+		onClick,
+		disabled,
+		color,
+		variant,
+		size,
+		loading,
+		iconStart,
+		iconEnd,
+		className,
+		...otherProps
+	} = props;
+
+	const isLoading = (loading ?? false) && !disabled;
+
+	const {
+		classes: rootClasses = [],
+		style = {},
+		...remainingProps
+	} = otherProps || {};
+
+	const loaderPixelSize = size === 'small' ? 18 : 24;
+
+	const isIconOnly =
+		React.Children.count(props.children) === 0 && (iconStart || iconEnd);
+
+	// Resolve custom color if it isn't one of the theme colors
+	const customColor = ![
+		'primary',
+		'secondary',
+		'error',
+		'warning',
+		'success',
+		'grey',
+	].includes(color)
+		? color
+		: undefined;
+
+	const styles = {
+		color: customColor,
+		...style,
+	};
+
+	return (
+		<button
+			ref={ref}
+			onClick={(e) => {
+				if (isLoading) return;
+
+				onClick?.(e);
+			}}
+			disabled={disabled}
+			className={
+				[
+					'ds_button',
+					...(!customColor ? [`ds_button__${props.color ?? 'primary'}`] : []),
+					...(isLoading ? ['ds_button__loading'] : []),
+					...(variant === 'outlined' ? ['ds_button__variant_outlined'] : []),
+					...(variant === 'text' ? ['ds_button__variant_text'] : []),
+					...(size === 'small' ? ['ds_button__size_small'] : []),
+					...(size === 'medium' ? ['ds_button__size_medium'] : []),
+					...(size === 'large' || !size ? ['ds_button__size_large'] : []),
+					...(isIconOnly ? ['ds_button__icon_button'] : []),
+					...rootClasses,
+				].join(' ') + (!!className ? ` ${className}` : '')
+			}
+			style={styles || undefined}
+			{...remainingProps}
+		>
+			<div className='ds_button__content'>
+				{isLoading && (
+					<div className='ds_button__loader'>
+						<Loader
+							size={loaderPixelSize}
+							variant={variant}
+							color={
+								color as
+									| 'primary'
+									| 'secondary'
+									| 'error'
+									| 'warning'
+									| 'success'
+									| 'grey'
+							}
+						/>
+					</div>
+				)}
+				<div
+					className={isLoading ? 'invisible' : ''}
+					style={{ display: 'flex', gap: '10px', alignItems: 'center' }}
+				>
+					{iconStart && <i className={`${iconStart}`} />}
+					{props.children}
+					{iconEnd && <i className={`${iconEnd}`} />}
+				</div>
+			</div>
+		</button>
+	);
+});

package/src/lib/button/button.css

@@ -0,0 +1,145 @@
+
+button.ds_button {
+  position: relative;
+  border: none;
+  cursor: pointer;
+  border-radius: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 100px;
+  background: transparent;
+}
+
+button.ds_button.ds_button__icon_button {
+  min-width: unset;
+  padding: 0px;
+}
+
+button.ds_button.ds_button__size_large {
+  height: 36px;
+}
+
+button.ds_button.ds_button__size_medium {
+  height: 32px;
+}
+
+button.ds_button.ds_button__size_small {
+  height: 28px;
+}
+
+button.ds_button.ds_button__loading {
+  cursor: unset;
+}
+
+button.ds_button.ds_button__loading:hover {
+  cursor: unset;
+  transform: unset;
+}
+
+button.ds_button .ds_button__loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+button.ds_button.ds_button__primary {
+  background: var(--color-main-primary);
+  color: var(--color-contrast-primary);
+}
+
+button.ds_button.ds_button__secondary {
+  background: transparent;
+  color: var(--color-main-warning);
+}
+
+button.ds_button.ds_button__success {
+  background: transparent;
+  color: var(--color-main-success);
+}
+
+button.ds_button.ds_button__warning {
+  background: transparent;
+  color: var(--color-main-warning);
+}
+
+button.ds_button.ds_button__grey {
+  background: transparent;
+  color: var(--color-main-grey);
+}
+
+button.ds_button.ds_button__error {
+  background: var(--color-main-error);
+  color: var(--color-contrast-error);
+}
+
+button.ds_button.ds_button__primary.ds_button__variant_outlined {
+  background: transparent;
+  color: var(--color-main-primary);
+  border: 1px solid var(--color-main-primary);
+}
+
+button.ds_button.ds_button__primary.ds_button__variant_text {
+  background: transparent;
+  color: var(--color-main-primary);
+}
+
+button.ds_button.ds_button__error.ds_button__variant_text {
+  background: transparent;
+  color: var(--color-main-error);
+}
+
+button.ds_button.ds_button__error.ds_button__variant_outlined {
+  background: transparent;
+  color: var(--color-main-error);
+  border: 1px solid var(--color-main-error);
+}
+
+button.ds_button:hover {
+  transform: scale(1.02);
+  transition: transform 0.2s ease-in-out;
+}
+
+button.ds_button:disabled {
+  cursor: not-allowed;
+}
+
+button.ds_button:disabled:hover {
+  transform: unset;
+}
+
+button.ds_button.ds_button__primary:disabled,
+button.ds_button.ds_button__error:disabled {
+  background: var(--color-light-grey);
+}
+
+button.ds_button.ds_button__grey:disabled,
+button.ds_button.ds_button__warning:disabled,
+button.ds_button.ds_button__success:disabled,
+button.ds_button.ds_button__secondary:disabled {
+  color: var(--color-main-grey);
+}
+
+button.ds_button > div.ds_button__content {
+  text-align: center;
+  text-transform: uppercase;
+  line-height: 16px;
+  letter-spacing: 0.75px;
+  word-wrap: break-word;
+  display: flex;
+  align-items: center;
+}
+
+button.ds_button.ds_button__size_large > div.ds_button__content,
+button.ds_button.ds_button__size_medium > div.ds_button__content {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0 16px;
+}
+
+button.ds_button.ds_button__size_small > div.ds_button__content {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 0 12px;
+}

package/src/lib/canvas/canvas-undo-redo.ts

@@ -0,0 +1,263 @@
+import { Logger } from '@elyx-code/common-ts-utils';
+
+const UNDO_DETECTOR_ELEMENT_ID_BASE = '--undo-redo-detector-element';
+
+export interface IUndoableInterface {
+	undo: () => void;
+	redo: () => void;
+	undoableStackValueIndex: number;
+}
+
+const undoableRecords: {
+	[id: string]: IUndoableInterface;
+} = {};
+
+let ignoreChange: boolean = false;
+
+function getDelectorElementId(undoStackId: string): string {
+	return `${undoStackId}${UNDO_DETECTOR_ELEMENT_ID_BASE}`;
+}
+
+function getDetectorElement(undoStackId: string): HTMLDivElement {
+	return document.getElementById(
+		getDelectorElementId(undoStackId)
+	) as HTMLDivElement;
+}
+
+function getCurrentStackIndex(undoStackId: string): number {
+	const detectorElement = getDetectorElement(undoStackId);
+
+	if (!detectorElement) {
+		return -1;
+	}
+
+	const index = parseInt(detectorElement.innerHTML, 10);
+	return index;
+}
+
+export function addUndoEventListener(
+	entity: IUndoableInterface,
+	undoStackId: string,
+	parentElement: HTMLElement
+) {
+	let detectorElement = getDetectorElement(undoStackId);
+
+	entity.undoableStackValueIndex = -1;
+
+	if (!detectorElement) {
+		// Create element if it doesn't exist.
+		// Nested apps might attempt to create the same element when they come to life
+		detectorElement = document.createElement('div' as any);
+		detectorElement.id = getDelectorElementId(undoStackId);
+		detectorElement.contentEditable = 'true';
+		detectorElement.setAttribute('aria-hidden', 'true');
+		detectorElement.tabIndex = -1;
+		detectorElement.style.width = '10px';
+		detectorElement.style.opacity = '0%';
+		detectorElement.style.position = 'absolute';
+		detectorElement.style.top = '-20px';
+		detectorElement.style.right = '-20px';
+
+		detectorElement.innerText = entity.undoableStackValueIndex.toString();
+
+		parentElement.appendChild(detectorElement);
+	}
+
+	detectorElement.addEventListener('input', () => {
+		if (ignoreChange) {
+			return;
+		}
+
+		Logger.log('input event');
+
+		const newIndex = getCurrentStackIndex(undoStackId);
+
+		Logger.log(
+			'entity.undoableStackValueIndex: ',
+			entity.undoableStackValueIndex
+		);
+		Logger.log('newIndex: ', newIndex);
+
+		if (newIndex < entity.undoableStackValueIndex) {
+			if (!entity) {
+				return;
+			}
+
+			entity.undo();
+		} else if (newIndex > entity.undoableStackValueIndex) {
+			if (!entity) {
+				return;
+			}
+
+			entity.redo();
+		}
+
+		detectorElement.blur();
+	});
+}
+
+export function removeUndoEventListener(undoStackId: string) {
+	const detectorElement = getDetectorElement(undoStackId);
+
+	if (detectorElement) {
+		detectorElement.remove();
+	}
+}
+
+// Rebase the stack after a new undoable change
+// Means that we discard all the changes that were made after the current index
+// Because we can no longer redo them, since they were overriden by the new change
+// Most times, the new change will be the last item in the stack, so we just add it to the end
+// But if the user undoes a change and then makes a new change, the new change will be added after the current index
+function rebaseStack(
+	newUndoableEntity: IUndoableInterface,
+	undoStackId: string,
+	history: any[],
+	change: any
+): void {
+	Logger.log('rebaseStack');
+	const currentStackIndex = getCurrentStackIndex(undoStackId) + 1;
+	Logger.log('currentStackIndex: ', currentStackIndex);
+	Logger.log('Before - history.length: ', history.length);
+	Logger.log('Before - history: ', [...history]);
+	history.splice(currentStackIndex, history.length - currentStackIndex, change);
+	Logger.log('After - history.length: ', history.length);
+	Logger.log('After - history: ', [...history]);
+
+	const entity = newUndoableEntity;
+	Logger.log(
+		'Before - entity.undoableStackValueIndex: ',
+		entity.undoableStackValueIndex
+	);
+
+	entity.undoableStackValueIndex = history.length - 1;
+
+	Logger.log(
+		'After - entity.undoableStackValueIndex: ',
+		entity.undoableStackValueIndex
+	);
+}
+
+export function setUndoableIndexValue(undoStackId: string, newIndex: number) {
+	const detectorElement = getDetectorElement(undoStackId);
+
+	// Set the value without triggering the input event
+	detectorElement.innerText = newIndex.toString();
+}
+
+export function increaseIndexValueInInput(undoStackId: string) {
+	ignoreChange = true;
+
+	const detectorElement = getDetectorElement(undoStackId);
+
+	const lastIndex = getCurrentStackIndex(undoStackId);
+	const newIndex = lastIndex + 1;
+
+	Logger.log('lastIndex: ', lastIndex);
+	Logger.log('newIndex: ', newIndex);
+
+	const previouslyFocusedElement = document.activeElement as HTMLElement | null;
+
+	detectorElement.focus();
+	document.execCommand('selectAll');
+	document.execCommand('insertText', false, newIndex.toString());
+
+	// Unfocus
+	detectorElement.blur();
+
+	if (
+		previouslyFocusedElement &&
+		previouslyFocusedElement !== detectorElement &&
+		typeof previouslyFocusedElement.focus === 'function'
+	) {
+		previouslyFocusedElement.focus();
+	}
+
+	ignoreChange = false;
+}
+
+export function pushNewUndoState(
+	entity: IUndoableInterface,
+	undoStackId: string,
+	history: any[],
+	change: any
+) {
+	Logger.log('new undoable change');
+	rebaseStack(entity, undoStackId, history, change);
+
+	// if (history.length === 1 && entity.undoableStackValueIndex === 0) {
+	// 	// The first change
+	// } else {
+	increaseIndexValueInInput(undoStackId);
+	// }
+}
+
+export abstract class UndoableEntity<ValueType = any>
+	implements IUndoableInterface
+{
+	undoValueStack: ValueType[] = [];
+	undoableStackValueIndex: number = 0;
+	abstract onUndo(restoredValue: ValueType, previousValue: ValueType): any;
+	abstract onRedo(restoredValue: ValueType, previousValue: ValueType): any;
+
+	constructor(initialValue: ValueType) {
+		this.undoValueStack = [initialValue];
+	}
+
+	get _value(): ValueType {
+		return this.undoValueStack[this.undoableStackValueIndex];
+	}
+
+	undo() {
+		const previousIndex = this.undoableStackValueIndex;
+		this.undoableStackValueIndex =
+			this.undoableStackValueIndex > 0 ? this.undoableStackValueIndex - 1 : 0;
+		this.onUndo?.(this._value, this.undoValueStack[previousIndex]);
+	}
+
+	redo() {
+		if (this.undoValueStack.length) {
+			const previousIndex = this.undoableStackValueIndex;
+			this.undoableStackValueIndex =
+				this.undoableStackValueIndex < this.undoValueStack.length - 1
+					? this.undoableStackValueIndex + 1
+					: this.undoValueStack.length - 1;
+
+			this.onRedo?.(this._value, this.undoValueStack[previousIndex]);
+		}
+	}
+
+	undoableChange(value: ValueType, undoStackId: string) {
+		// Replace the values history items after the current index
+		this.undoableStackValueIndex = this.undoableStackValueIndex + 1;
+		this.undoValueStack.splice(
+			this.undoableStackValueIndex,
+			this.undoValueStack.length - this.undoableStackValueIndex,
+			value
+		);
+
+		pushNewUndoState(this, undoStackId, this.undoValueStack, value);
+	}
+
+	nonUndoableChange(value: ValueType) {
+		this.undoValueStack = [value];
+		this.undoableStackValueIndex = 0;
+	}
+
+	resetUndoableStack(initialValue: ValueType) {
+		this.undoValueStack = [initialValue];
+		this.undoableStackValueIndex = 0;
+	}
+
+	// When sharing data in real time collaboration another user might edit this entity
+	// The we replace the last element in the undo array,
+	// The current user would then only encounter the value if they redo all the undos
+	// Returns true if it updated the current value and false if the current value was not the last one
+	replaceTip(newValue: ValueType): boolean {
+		if (this.undoValueStack.length) {
+			this.undoValueStack[this.undoValueStack.length - 1] = newValue;
+		}
+
+		return this.undoableStackValueIndex === this.undoValueStack.length - 1;
+	}
+}

package/src/lib/canvas/defs.ts

@@ -0,0 +1,170 @@
+import { Canvas, CanvasObject, Connection, DraggableObject } from '.';
+
+export type Alignment = 'start' | 'end';
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+export type AlignedPlacement = `${Side}-${Alignment}`;
+export type Placement = Side | AlignedPlacement;
+
+export interface ICoordinates {
+	x: number;
+	y: number;
+}
+
+export interface ICanvasOptions {
+	containerElement: HTMLElement;
+	id: string;
+	connectionDefaults?: IConnectionOptions;
+	elementClasses: string[];
+	enableUndoRedo?: boolean;
+}
+
+export interface IConnection {
+	source: HTMLElement;
+	target: HTMLElement;
+}
+
+export interface IBaseCanvasObjectCreateOptions {
+	element: HTMLElement;
+	canvas: Canvas;
+	id: string;
+}
+
+export interface IAbsoluteCanvasObjectCreateOptions extends IBaseCanvasObjectCreateOptions {
+	coordinates: ICoordinates;
+}
+
+export interface ICanvasObjectCreateOptions extends IAbsoluteCanvasObjectCreateOptions {
+	coordinates: ICoordinates;
+	selectable?: boolean;
+	deletable?: boolean;
+}
+
+export interface IUpdateNonDraggableConfig {
+	coordinates?: ICoordinates;
+	element?: HTMLElement;
+	deleted?: boolean;
+	newConnections?: IConnectionValue[];
+	deletedConnections?: IConnectionValue[];
+}
+
+export interface IUpdateDraggableConfig {
+	coordinates?: ICoordinates;
+	element?: HTMLElement;
+	deleted?: boolean;
+	newConnections?: IConnectionValue[];
+	deletedConnections?: IConnectionValue[];
+}
+
+export interface INonDraggableConfig extends IUpdateNonDraggableConfig {
+	coordinates: ICoordinates;
+	element: HTMLElement;
+	selected: boolean;
+	overlaps: OverlapReport;
+}
+
+export interface IDraggableConfig extends IUpdateDraggableConfig {
+	coordinates: ICoordinates;
+	element: HTMLElement;
+	selected: boolean;
+	overlaps: OverlapReport;
+}
+
+export interface IConnectionValueParent {
+	objectId: string;
+	objectType: 'draggable' | 'non-draggable';
+}
+
+export interface IConnectionOptions {
+	size?: number;
+	color?: string;
+	dash?: boolean | { animation: boolean };
+	complementaryColor?: string;
+	hoverColor?: string;
+	selectedColor?: string;
+	onClick?: (connection: Connection) => any;
+	onUnselect?: (connection: Connection) => HTMLElement | void;
+	onEnable?: (connection: Connection) => void;
+	onDisable?: (connection: Connection) => void;
+	classes?: string[];
+}
+
+export interface IConnectionValue {
+	id: string;
+	startId: string;
+	endId: string;
+	instance: Connection | null;
+	deleted: boolean;
+	initialOptions: IConnectionOptions;
+	sourceParentObject: IConnectionValueParent;
+	targetParentObject: IConnectionValueParent;
+	selected: boolean;
+	type: 'connection';
+}
+
+export interface IDraggableUndoableValue {
+	id: string;
+	selected: boolean;
+	x: number;
+	y: number;
+	instance: DraggableObject | CanvasObject | null;
+	connections: IConnectionValue[];
+	deleted: boolean;
+	selectable: boolean;
+	deletable: boolean;
+	disabled: boolean;
+	type: 'draggable' | 'non-draggable';
+}
+
+export interface IDraggableValue extends IDraggableUndoableValue {
+	element: HTMLElement;
+}
+
+export type DraggableOnUpdateCallback = (
+	config: IDraggableConfig
+) => IDraggableConfig;
+
+export type NonDraggableOnUpdateCallback = (
+	config: INonDraggableConfig
+) => INonDraggableConfig;
+
+export type DraggableBeforeUpdateCallback = (
+	config: IDraggableConfig
+) => IUpdateDraggableConfig;
+
+export type DraggableBeforeDeleteConnectionCallback = (
+	connection: Connection,
+	config: {
+		// Whether the connection is being delete alone or as part of a large deletion of objects/connections
+		batchDelete: boolean;
+	}
+) => { blockDelete?: boolean; skipTargetCheck?: boolean } | void;
+
+export type NonDraggableBeforeUpdateCallback = (
+	config: INonDraggableConfig
+) => IUpdateNonDraggableConfig;
+
+export interface IOverlapDefinition {
+	overlappingObject: DraggableObject;
+	connection: Connection;
+	nextValidCoordinates: ICoordinates;
+}
+
+export type Overlaps = IOverlapDefinition[];
+
+export type OverlapReport = {
+	coords: IOverlapDefinition | null;
+	altCoords: IOverlapDefinition | null;
+}[];
+
+export interface IArea {
+	// Left
+	left: number;
+	// Top
+	top: number;
+	// Right
+	right: number;
+	// Bottom
+	bottom: number;
+}
+
+export const MIN_ARROW_AREA_PX_WIDTH = 200;