@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/atoms/ContentAssist.tsx

@@ -1,341 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { Menu, MenuItem, TextField, MenuProps as MuiMenuProps, TextFieldProps, PopoverOrigin } from '@mui/material';
-
-export interface Option {
-  id: string | number;
-  label: string;
-  value?: Record<string, unknown> | string | number | boolean | null | undefined;
-  type?: 'env' | 'store';
-}
-
-export type ContentAssistProps = Omit<TextFieldProps, 'onChange'> & {
-  options: Option[];
-  initialOptions: Option[];
-  optionsType: string;
-  setOptions: (value: Option[]) => void;
-  setOptionsType: (value: string) => void;
-  MenuProps?: Omit<MuiMenuProps, 'open'>;
-  startAdornment?: string;
-  endAdornment?: string;
-  value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, activeSelections: Option[]) => void;
-}
-
-const defaultMenuListProps = {
-  'aria-labelledby': 'content-assist-menu',
-  role: 'listbox',
-};
-
-const defaultAnchorOrigin = {
-  vertical: 'bottom',
-  horizontal: 'left',
-};
-
-const defaultTransformOrigin = {
-  vertical: 'top',
-  horizontal: 'left',
-};
-
-const textFieldStyles = {
-  ".MuiInputBase-root": {
-    fontSize: '14px',
-    padding: '10px'
-  }
-};
-
-const ContentAssist: React.FC<ContentAssistProps> = ({
-  options,
-  setOptions,
-  optionsType,
-  setOptionsType,
-  initialOptions,
-  MenuProps = {},
-  startAdornment = '{{',
-  endAdornment = '}}',
-  value,
-  onChange,
-  ...rest
-}) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-  const [caretCoordinates, setCaretCoordinates] = useState({ x: 0, y: 0 });
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const getCaretCoordinates = useCallback(() => {
-    const input = inputRef.current;
-    if (!input) return;
-
-    const { selectionStart } = input;
-    if (selectionStart === null) return;
-
-    const div = document.createElement('div');
-    const copyStyle = getComputedStyle(input);
-    for (let i = 0; i < copyStyle.length; i++) {
-      const prop = copyStyle[i];
-      div.style.setProperty(prop, copyStyle.getPropertyValue(prop));
-    }
-    div.style.position = 'absolute';
-    div.style.whiteSpace = 'pre-wrap';
-    div.style.visibility = 'hidden';
-
-    div.textContent = input.value.substring(0, selectionStart);
-
-    document.body.appendChild(div);
-
-    const span = document.createElement('span');
-    span.textContent = input.value.substring(selectionStart) || '.';
-    div.appendChild(span);
-
-    const rect = span.getBoundingClientRect();
-
-    const textFieldRect = inputRef?.current?.getBoundingClientRect();
-
-    setCaretCoordinates({ y: rect.top + window.scrollY + textFieldRect.top + 10, x: rect.left + window.scrollX + textFieldRect.left });
-
-    document.body.removeChild(div);
-  }, []);
-
-  const convertToLabeledObject = useCallback((obj: string | number | boolean | Record<string, unknown> | null | undefined, label: string) => {
-    return {
-      [label]: obj,
-    };
-  }, []);
-
-  const hasNestedProperty = useCallback((obj: Record<string, unknown>, path: string): boolean => {
-    const properties = path.split('.');
-    let current: unknown = obj;
-
-    for (const property of properties) {
-      if (current === null || current === undefined || typeof current !== 'object' || !(property in current)) {
-        return false;
-      }
-      current = (current as Record<string, unknown>)[property];
-    }
-    return true;
-  }, []);
-
-  const triggerOnChange = useCallback((value: string, event?: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
-      let type = 'env';
-      const activeSelections = value.split(startAdornment).slice(1).map((fragment) => {
-        const dotIdx = fragment.indexOf('.');
-        if (dotIdx === -1) return null;
-        const endIdx = fragment.indexOf(endAdornment);
-        if (endIdx !== -1) {
-          return fragment.slice(0, endIdx);
-        } else {
-          return null;
-        }
-      }).filter(Boolean).map(label => {
-        let activeSelection = [] as Option[];
-        const dataOptions = initialOptions?.length ? initialOptions : options;
-        activeSelection = dataOptions?.filter(opt => {
-          const dotIdx = label?.indexOf('.');
-          let fragment = label;
-          if (dotIdx && dotIdx !== -1 && fragment?.length) {
-            type = fragment.slice(0, dotIdx);
-            fragment = fragment?.slice(dotIdx + 1);
-          }
-          if (opt.label === fragment) {
-            return true;
-          } else if (typeof opt?.value === 'object' && opt?.value !== null) {
-            const valuePath = hasNestedProperty(convertToLabeledObject(opt?.value, opt?.label), fragment || '');
-            return valuePath === true;
-          }
-          return false;
-        }) as Option[];
-        return {
-          id: activeSelection[0]?.id,
-          label: label?.slice(label?.indexOf('.') + 1),
-          type: type,
-        }
-      }).filter(Boolean) as Option[];
-
-      if (event) {
-        onChange(event, activeSelections);
-      } else {
-        const syntheticEvent = { target: { value } } as React.ChangeEvent<HTMLInputElement>;
-        onChange(syntheticEvent, activeSelections);
-      }
-    }
-  }, [startAdornment, endAdornment, onChange, options, initialOptions, convertToLabeledObject, hasNestedProperty]);
-
-  const checkLastChars = useCallback((str: string) => {
-    if (str.endsWith(`${startAdornment}env.`)) {
-      return 'env';
-    } else if (str.endsWith(`${startAdornment}store.`)) {
-      return 'store';
-    } else if (str.endsWith(startAdornment)) {
-      return 'default';
-    }
-    return optionsType;
-  }, [startAdornment, optionsType]);
-
-  const handleInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
-    triggerOnChange(value, event);
-    const cursor = inputRef?.current?.selectionStart;
-    const beforeCursor = value.slice(0, cursor || 0);
-    const afterCursor = value.slice(cursor || 0);
-    const lastChars = beforeCursor.slice(-startAdornment.length);
-    const afterChars = afterCursor.slice(0, endAdornment.length)
-    if (lastChars === startAdornment || (beforeCursor.slice(-1) === '.' && options?.length && afterChars === endAdornment)) {
-      setOptionsType(checkLastChars(beforeCursor))
-      const cursorPosition = event.target.selectionStart;
-      setCursorPosition(cursorPosition);
-      setMenuOpen(true);
-      setAnchorEl(inputRef.current);
-      getCaretCoordinates();
-    }
-  }, [startAdornment, endAdornment, triggerOnChange, getCaretCoordinates, options, checkLastChars, setOptionsType]);
-
-  const handleMenuClose = useCallback(() => {
-    setMenuOpen(false);
-    setAnchorEl(null);
-  }, []);
-
-  const handleMenuItemClick = useCallback((option: Option) => {
-    if (cursorPosition === null || !inputRef.current) return;
-
-    const value = inputRef.current.value;
-    const beforeCursor = value.slice(0, cursorPosition);
-    let afterCursor = value.slice(cursorPosition);
-    const openBracketIndex = beforeCursor.lastIndexOf(startAdornment);
-
-    const closeBracketIndexAfterCursor = afterCursor.indexOf(endAdornment) > -1 ? afterCursor.indexOf(endAdornment) + cursorPosition + endAdornment.length : -1;
-    const openBracketIndexAfterCursor = afterCursor.indexOf(startAdornment) > -1 ? afterCursor.indexOf(startAdornment) + cursorPosition : -1;
-
-    if ((openBracketIndexAfterCursor > -1 && closeBracketIndexAfterCursor < openBracketIndexAfterCursor) || (openBracketIndexAfterCursor === -1 && closeBracketIndexAfterCursor > -1)) {
-      afterCursor = value.slice(closeBracketIndexAfterCursor);
-    }
-
-    const existingLabel = options[0]?.id ? value.slice(openBracketIndex + startAdornment.length, cursorPosition) : '';
-
-    const newValue = `${value.slice(0, openBracketIndex)}${startAdornment}${existingLabel}${option.label}${endAdornment}${afterCursor}`;
-    const newOptions: Option[] = typeof option.value === 'object' && option.value !== null && !Array.isArray(option.value)
-      ? Object.keys(option.value).map(key => ({
-        id: key,
-        label: key,
-        value: (option.value as Record<string, unknown>)[key] as string | number | boolean | Record<string, unknown> | null | undefined
-      }))
-      : [];
-
-    if (inputRef.current) {
-      inputRef.current.value = newValue;
-      let newCursorPosition = openBracketIndex + startAdornment.length + existingLabel.length + option.label.length;
-      if (!newOptions?.length && options[0]?.id) {
-        newCursorPosition += endAdornment.length;
-      }
-      inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
-    }
-
-    setOptions(newOptions);
-    triggerOnChange(newValue);
-    setMenuOpen(false);
-  }, [cursorPosition, startAdornment, endAdornment, triggerOnChange, setOptions, options]);
-
-  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Escape') {
-      handleMenuClose();
-    } else if (event.key === 'Backspace') {
-      const cursor = inputRef?.current?.selectionStart;
-      if (inputRef?.current && cursor) {
-        const value = inputRef.current.value;
-        const beforeCursor = value.slice(0, cursor);
-        const afterCursor = value.slice(cursor);
-        const openBracketIndexBeforeCursor = beforeCursor.lastIndexOf(startAdornment);
-        const closeBracketIndexBeforeCursor = beforeCursor.lastIndexOf(endAdornment);
-        const closeBracketIndexAfterCursor = afterCursor.indexOf(endAdornment) > -1 ? afterCursor.indexOf(endAdornment) + cursor + endAdornment.length : -1;
-        const lastChars = beforeCursor.slice(-endAdornment.length);
-        if (lastChars === endAdornment || closeBracketIndexBeforeCursor < openBracketIndexBeforeCursor) {
-          const closeIndex = lastChars !== endAdornment ? closeBracketIndexAfterCursor : closeBracketIndexBeforeCursor + endAdornment?.length;
-          const lastCharacters = beforeCursor.slice(-startAdornment.length);
-          if (closeIndex !== -1 && lastCharacters !== startAdornment) {
-            event.preventDefault();
-            const newValue = `${value.slice(0, openBracketIndexBeforeCursor)}${value.slice(closeIndex)}`;
-            inputRef.current.value = newValue;
-            triggerOnChange(newValue);
-            const newCursorPosition = openBracketIndexBeforeCursor;
-            inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
-          }
-        }
-      }
-    }
-  }, [handleMenuClose, endAdornment, startAdornment, triggerOnChange]);
-
-  const handleMouseClick = useCallback(() => {
-    if (!inputRef.current) return;
-    setOptionsType('default');
-    const text = inputRef.current.value;
-    const cursorPosition = inputRef.current.selectionStart as number;
-
-    const beforeCursor = text.slice(0, cursorPosition);
-    const afterCursor = text.slice(cursorPosition);
-
-    const openBracketIndexBeforeCursor = beforeCursor.lastIndexOf(startAdornment);
-    const closeBracketIndexBeforeCursor = beforeCursor.lastIndexOf(endAdornment);
-    const closeBracketIndexAfterCursor = afterCursor.indexOf(endAdornment) > -1 ? afterCursor.indexOf(endAdornment) + cursorPosition + endAdornment.length : -1;
-    const openBracketIndexAfterCursor = afterCursor.indexOf(startAdornment) > -1 ? afterCursor.indexOf(startAdornment) + cursorPosition + startAdornment.length : -1;
-
-    if ((openBracketIndexBeforeCursor !== -1 && closeBracketIndexBeforeCursor < openBracketIndexBeforeCursor) &&
-      (closeBracketIndexAfterCursor !== -1 && (openBracketIndexAfterCursor === -1 || openBracketIndexAfterCursor > closeBracketIndexAfterCursor))
-    ) {
-      setCursorPosition(cursorPosition);
-      setMenuOpen(true);
-      setAnchorEl(inputRef.current);
-      getCaretCoordinates();
-    }
-  }, [startAdornment, endAdornment, getCaretCoordinates, setOptionsType]);
-
-  useEffect(() => {
-    if (menuOpen) {
-      inputRef.current?.focus();
-    }
-  }, [menuOpen]);
-
-  useEffect(() => {
-    if (value !== undefined && inputRef.current) {
-      inputRef.current.value = value;
-      triggerOnChange(value);
-    }
-  }, [value, triggerOnChange]);
-
-  const memoizedMenuItems = useMemo(() => (
-    options.map((option) => (
-      <MenuItem key={option.id} onClick={() => handleMenuItemClick(option)}>
-        {option.label}
-      </MenuItem>
-    ))
-  ), [options, handleMenuItemClick]);
-
-  return (
-    <>
-      <TextField
-        sx={textFieldStyles}
-        {...rest}
-        multiline
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-        onClick={handleMouseClick}
-        inputRef={inputRef}
-      />
-      <Menu
-        className='nodrag nopan'
-        // disablePortal={false}
-        // sx={{ ".MuiMenu-paper": { top: `${caretCoordinates.y}px !important`, left: `${caretCoordinates.x}px !important`, zIndex: 9999 } }}
-        anchorEl={anchorEl}
-        open={menuOpen}
-        onClose={handleMenuClose}
-        MenuListProps={{ ...defaultMenuListProps, ...MenuProps.MenuListProps }}
-        anchorOrigin={{ ...defaultAnchorOrigin, ...MenuProps.anchorOrigin } as PopoverOrigin}
-        transformOrigin={{ ...defaultTransformOrigin, ...MenuProps.transformOrigin } as PopoverOrigin}
-        {...MenuProps}
-      >
-        {memoizedMenuItems}
-      </Menu>
-    </>
-  );
-};
-
-export { ContentAssist };

package/packages/diagrams/src/lib/atoms/DiagramControls.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Controls as ReactFlowControls, ControlProps } from '@xyflow/react';
-import { Paper, Box } from '@mui/material';
-
-export interface StyledControlsProps extends ControlProps {
-  className?: string;
-}
-
-export const Controls: React.FC<StyledControlsProps> = (props) => {
-  return (
-    <Box position="absolute" bottom={20} right={20} zIndex={5}>
-      <Paper
-        elevation={3}
-        sx={{
-          borderRadius: 1,
-          boxShadow: 3,
-          bgcolor: 'background.paper',
-          p: 0.5,
-          '& button': {
-            bgcolor: 'grey.100',
-            border: 1,
-            borderColor: 'divider',
-            borderRadius: 1,
-            color: 'text.secondary',
-            width: 26,
-            height: 26,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            '&:hover': {
-              bgcolor: 'primary.main',
-              color: 'primary.contrastText',
-            },
-            '&:active': {
-              bgcolor: 'primary.dark',
-            },
-            '& svg': {
-              width: 14,
-              height: 14,
-            },
-          },
-          '& .react-flow__controls-button': {
-            transition: (theme) =>
-              theme.transitions.create(['background-color', 'color'], {
-                duration: theme.transitions.duration.short,
-              }),
-            m: 0.5,
-          },
-        }}
-      >
-        <ReactFlowControls {...props} />
-      </Paper>
-    </Box>
-  );
-};
-
-export default Controls;