@flowuent-org/diagramming-core 1.1.0 → 1.1.1

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

@@ -0,0 +1,437 @@
+import React, { useState, useEffect } from 'react';
+import styled from '@emotion/styled';
+import { Divider, Stack, Typography } from '@mui/material';
+import { Expression, OperationExpression } from '../types/ndoe-form-types';
+import { useTranslation } from 'react-i18next';
+import { BlockTypesKeys } from '../organisms/Card/card.params';
+import ValidationMessage from './ValidationMessage';
+import { validationEngine } from '../utils/validationEngine';
+import { ValidationResult } from '../types/validation-types';
+
+// Styled Components
+export const StyledSelect: ReturnType<typeof styled.select> = styled.select`
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  &:hover {
+    border-color: #000000;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #1976d2;
+  }
+`;
+
+export const StyledInput: ReturnType<typeof styled.input> = styled.input`
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  &:hover {
+    border-color: #000000;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #1976d2;
+  }
+`;
+
+// New styled components for the integrated input with dropdown
+const InputWithDropdownContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+
+const StyledInputWithDropdown = styled.input`
+  width: 100%;
+  padding: 8px;
+  padding-right: 110px; /* Make room for dropdown */
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  &:hover {
+    border-color: #000000;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #1976d2;
+  }
+`;
+
+const DropdownOverlay = styled.div`
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  pointer-events: auto;
+  width: 100px;
+`;
+
+const StyledSelectOverlay = styled.select`
+  min-width: 100px;
+  height: 32px;
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  padding: 4px 8px;
+  font-size: 12px;
+  color: #FFFFFF;
+  text-align: center;
+  border-radius: 4px;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  &:focus {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+  
+  option {
+    background-color: #393939;
+    color: #FFFFFF;
+    padding: 8px;
+  }
+`;
+
+const OperatorContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+const OperandWrapper = styled.div`
+  flex: 1;
+`;
+
+interface ExpressionInputProps {
+  value: Expression;
+  onChange: (newValue: Expression) => void;
+  label: string;
+  className?: string;
+  showDataTypeDropdown?: boolean;
+  dataType?: string;
+  onDataTypeChange?: (dataType: string) => void;
+  onValidationChange?: (isValid: boolean, errors: string[]) => void;
+}
+
+const operationOperandCounts: { [key: string]: number } = {
+  '+': 2,
+  '-': 2,
+  '*': 2,
+  '/': 2,
+  '>': 2,
+  '>=': 2,
+  '<': 2,
+  '<=': 2,
+  '=': 2,
+  '==': 2,
+  '!=': 2,
+  neg: 1,
+  not: 1,
+  and: 2,
+  or: 2,
+};
+
+const ExpressionInput: React.FC<ExpressionInputProps> = ({
+  value,
+  onChange,
+  label,
+  className = '',
+  showDataTypeDropdown = false,
+  dataType = 'String',
+  onDataTypeChange,
+  onValidationChange,
+}) => {
+  const { t } = useTranslation();
+  const isOperation = value && typeof value === 'object' && 'operation' in value;
+
+  // State for validation results
+  const [operandValidations, setOperandValidations] = useState<ValidationResult[][]>([]);
+  const [showOperandValidations, setShowOperandValidations] = useState<boolean[]>([]);
+  const [primitiveValidations, setPrimitiveValidations] = useState<ValidationResult[]>([]);
+  const [showPrimitiveValidations, setShowPrimitiveValidations] = useState<boolean>(false);
+
+  // Validate primitive value using validation engine
+  const validatePrimitiveValue = (value: string): ValidationResult[] => {
+    return validationEngine.validatePrimitiveValue(value, dataType);
+  };
+
+  // Re-validate primitive value when data type changes
+  useEffect(() => {
+    if (!isOperation && typeof value === 'string') {
+      const validations = validatePrimitiveValue(value);
+      setPrimitiveValidations(validations);
+      setShowPrimitiveValidations(validations.length > 0);
+    }
+  }, [dataType, value, isOperation]);
+
+  const handlePrimitiveChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue); // Update the parent directly
+
+    // Validate and show validation results if needed
+    const validations = validatePrimitiveValue(newValue);
+    setPrimitiveValidations(validations);
+    setShowPrimitiveValidations(validations.length > 0);
+
+    // Notify parent component about validation state
+    if (onValidationChange) {
+      const hasErrors = validationEngine.hasErrors(validations);
+      const errorMessages = validationEngine.getErrors(validations).map(v => v.message);
+      onValidationChange(!hasErrors, errorMessages);
+    }
+  };
+
+  const handleOperationTypeChange = (
+    e: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const newOperation = e.target.value;
+    const operandCount = operationOperandCounts[newOperation] || 2;
+    const newOperands = Array(operandCount).fill('');
+    onChange({ operation: newOperation, operands: newOperands });
+
+    // Reset validation states for new operation
+    setOperandValidations(Array(operandCount).fill([]));
+    setShowOperandValidations(Array(operandCount).fill(false));
+  };
+
+  // Validate operands when they change
+  useEffect(() => {
+    if (isOperation) {
+      const operationValue = value as OperationExpression;
+      const validations: ValidationResult[][] = [];
+      const showValidations: boolean[] = [];
+
+      operationValue.operands?.forEach((operand, index) => {
+        // Use validation engine to validate operand
+        const operandValidations = validationEngine.validateOperationOperands([operand], dataType);
+        validations.push(operandValidations);
+
+        // Show validation if operand has been interacted with (has value or was touched)
+        showValidations.push(!!operand || showOperandValidations[index] || false);
+      });
+
+      setOperandValidations(validations);
+      setShowOperandValidations(showValidations);
+
+      // Notify parent component about validation state
+      if (onValidationChange) {
+        const allValidations = validations.flat();
+        const hasErrors = validationEngine.hasErrors(allValidations);
+        const errorMessages = validationEngine.getErrors(allValidations).map(v => v.message);
+        onValidationChange(!hasErrors, errorMessages);
+      }
+    }
+  }, [value, dataType, isOperation, showOperandValidations, onValidationChange]);
+
+  const handleOperandChange = (index: number, operandValue: string) => {
+    if (isOperation) {
+      const operationValue = value as OperationExpression;
+      const updatedOperands = [...operationValue.operands];
+      updatedOperands[index] = operandValue;
+
+      // Mark this operand as touched for validation display
+      const newShowValidations = [...showOperandValidations];
+      newShowValidations[index] = true;
+      setShowOperandValidations(newShowValidations);
+
+      // Clear validation when user starts typing
+      if (operandValidations[index] && operandValidations[index].length > 0) {
+        const newValidations = [...operandValidations];
+        newValidations[index] = [];
+        setOperandValidations(newValidations);
+      }
+
+      onChange({ ...operationValue, operands: updatedOperands });
+    }
+  };
+
+  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    if (selectedValue === 'primitive') {
+      onChange(String(value ?? '')); // Switch to primitive
+      // Clear operand validations when switching to primitive
+      setOperandValidations([]);
+      setShowOperandValidations([]);
+      // Clear primitive validations
+      setPrimitiveValidations([]);
+      setShowPrimitiveValidations(false);
+    } else {
+      // Always initialize with a proper operation structure when switching to operation mode
+      onChange({ operation: '+', operands: ['', ''] });
+      // Initialize validation states for new operation
+      setOperandValidations([[], []]); // Start with empty validations
+      setShowOperandValidations([false, false]); // Don't show validations initially
+      // Clear primitive validations
+      setPrimitiveValidations([]);
+      setShowPrimitiveValidations(false);
+    }
+  };
+
+  const renderOperandInput = (operand: string, index: number) => (
+    <div>
+      <StyledInput
+        type="text"
+        value={operand}
+        onChange={(e) => handleOperandChange(index, e.target.value)}
+        placeholder={`Operand ${index + 1}`}
+        style={{
+          borderColor: showOperandValidations[index] && operandValidations[index]?.some(v => v.severity === 'error') ? '#d32f2f' : undefined
+        }}
+      />
+      {showOperandValidations[index] && operandValidations[index]?.map((validation, vIndex) => (
+        <ValidationMessage
+          key={vIndex}
+          message={validation.message}
+          severity={validation.severity}
+          show={true}
+        />
+      ))}
+    </div>
+  );
+
+  const renderPrimitiveInput = () => {
+    if (showDataTypeDropdown) {
+      return (
+        <div>
+          <InputWithDropdownContainer>
+            <StyledInputWithDropdown
+              className="zd__primitive-input-with-dropdown"
+              type="text"
+              value={String(value ?? '')}
+              onChange={handlePrimitiveChange}
+              placeholder="Enter value"
+              style={{
+                borderColor: showPrimitiveValidations ? '#d32f2f' : undefined
+              }}
+            />
+            <DropdownOverlay>
+              <StyledSelectOverlay
+                value={dataType}
+                onChange={(e) => onDataTypeChange?.(e.target.value)}
+              >
+                {BlockTypesKeys.map((type) => (
+                  <option key={type} value={type}>
+                    {type}
+                  </option>
+                ))}
+              </StyledSelectOverlay>
+            </DropdownOverlay>
+          </InputWithDropdownContainer>
+          {showPrimitiveValidations && primitiveValidations.map((validation, vIndex) => (
+            <ValidationMessage
+              key={vIndex}
+              message={validation.message}
+              severity={validation.severity}
+              show={true}
+            />
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <StyledInput
+          type="text"
+          value={String(value ?? '')}
+          onChange={handlePrimitiveChange}
+          placeholder="Enter value"
+          style={{
+            borderColor: showPrimitiveValidations ? '#d32f2f' : undefined
+          }}
+        />
+        {showPrimitiveValidations && primitiveValidations.map((validation, vIndex) => (
+          <ValidationMessage
+            key={vIndex}
+            message={validation.message}
+            severity={validation.severity}
+            show={true}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <Stack
+      spacing={1}
+    >
+      <Divider />
+      <Typography component="label" sx={{ color: '#8E8E93' }}>
+        {label}
+      </Typography>
+
+      {/* Type Selection */}
+      <StyledSelect
+        value={isOperation ? 'operation' : 'primitive'}
+        onChange={handleTypeChange}
+      >
+        <option value="primitive" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('expression.primitive')}</option>
+        <option value="operation" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('expression.operation')}</option>
+      </StyledSelect>
+
+      {/* Primitive or Operation Input */}
+      {!isOperation ? (
+        renderPrimitiveInput()
+      ) : (
+        <Stack spacing={1}>
+          {/* Operation Selection */}
+          <StyledSelect
+            value={(value as OperationExpression).operation || '+'}
+            onChange={handleOperationTypeChange}
+          >
+            <option value="+" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.add')}</option>
+            <option value="-" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.subtract')}</option>
+            <option value="*" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.multiply')}</option>
+            <option value="/" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.divide')}</option>
+            <option value=">" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.greaterThan')}</option>
+            <option value=">=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.greaterThanOrEqual')}</option>
+            <option value="<" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.lessThan')}</option>
+            <option value="<=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.lessThanOrEqual')}</option>
+            <option value="=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.assign')}</option>
+            <option value="==" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.equal')}</option>
+            <option value="!=" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.notEqual')}</option>
+            <option value="neg" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.negate')}</option>
+            <option value="not" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.not')}</option>
+            <option value="and" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.and')}</option>
+            <option value="or" style={{ color: '#FFFFFF', backgroundColor: '#393939' }}>{t('operator.or')}</option>
+          </StyledSelect>
+
+          {/* Operand Inputs */}
+          <OperatorContainer>
+            {(value as OperationExpression).operands?.map((operand, index) => (
+              <OperandWrapper key={index}>
+                {renderOperandInput(operand || '', index)}
+              </OperandWrapper>
+            )) || []}
+          </OperatorContainer>
+        </Stack>
+      )}
+      <Divider />
+    </Stack>
+  );
+};
+
+export default ExpressionInput;

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

@@ -0,0 +1,73 @@
+import React, { FC, useMemo } from 'react';
+import { ConnectionLineComponentProps, getBezierPath } from '@xyflow/react';
+
+import { EdgeTypes } from '../organisms/CustomEdge/custom-edge.type';
+import { getEdgeParams } from '../utils/nodeutils';
+import { useDiagramType, useDiagramNodes } from '../contexts/DiagramProvider';
+
+const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
+  toX,
+  toY,
+  fromPosition,
+  toPosition,
+  fromNode,
+  toNode,
+}) => {
+  const diagramType = useDiagramType();
+  const nodes = useDiagramNodes();
+
+  const targetNode = {
+    width: 1,
+    height: 1,
+    position: { x: toX, y: toY },
+  };
+
+  const edgeParams = fromNode && toNode
+    ? getEdgeParams(fromNode, toNode, EdgeTypes.Default, 2, diagramType, nodes)
+    : null;
+
+  const edgePath = useMemo(() => {
+    if (!edgeParams) {
+      return undefined;
+    }
+    const { sourceX, sourceY } = edgeParams;
+    return getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition: fromPosition,
+      targetPosition: toPosition,
+      targetX: toX,
+      targetY: toY,
+    })[0];
+  }, [edgeParams, fromPosition, toPosition, toX, toY]);
+
+  if (!fromNode) {
+    return <></>;
+  }
+
+  return (
+    <g >
+      {/* Render the edge line */}
+      <path
+        fill="none"
+        stroke="#222"
+        strokeWidth={1.5}
+        d={edgePath}
+      />
+
+      {/* Render a circle at the target position */}
+      <circle
+        cx={toX}
+        cy={toY}
+        fill="#fff"
+        r={3}
+        stroke="#222"
+        strokeWidth={1.5}
+      />
+
+      {/* Display "from" node name using foreignObject */}
+    </g>
+  );
+};
+
+export default FloatingConnectionLine;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+// Import specific icons from react-icons/ri
+import { RiAspectRatioLine, RiFileList2Line } from 'react-icons/ri';
+import { IconType } from 'react-icons';
+
+// Create a mapping of icon names to icon components
+const iconMap: { [key: string]: IconType } = {
+    field: RiAspectRatioLine, // Replaced Crop169Icon with RiAspectRatioLine
+    entity: RiFileList2Line, // Replaced CropPortraitIcon with RiFileList2Line
+    // Map more icons as needed
+};
+
+interface IconProps {
+    iconName: string;
+    size?: number;
+    color?: string;
+}
+
+const LazyIcon: React.FC<IconProps> = React.memo(({ iconName, size = 32, color = '#000' }) => {
+    // Get the relevant icon component from the iconMap
+    const IconComponent = iconMap[iconName];
+
+    // If icon component is found, render it, otherwise return null or a fallback
+    return IconComponent ? (
+        <div>
+            <IconComponent size={size} color={color} />
+        </div>
+    ) : null; // Using size prop for react-icons
+});
+
+export default LazyIcon;

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

@@ -0,0 +1,106 @@
+import { Box, Grid, Typography } from '@mui/material';
+import React from 'react';
+import { MarkerSelectionProps } from '../organisms/CustomEdge/custom-edge.type';
+import { Markers } from '../assets/markers/markers.type';
+
+interface MarkerSelectorProps extends MarkerSelectionProps {
+}
+
+const MarkerSelector = React.memo(
+  ({
+    label,
+    keyPrefix = 0,
+    onChange,
+    value,
+    disabled,
+  }: MarkerSelectorProps) => {
+    const labels = Object.values(Markers);
+    return (
+      <Grid
+        container
+        sx={{
+          mb: 1,
+          alignItems: 'center',
+          backgroundColor: '#404040',
+          borderRadius: '6px',
+          padding: '4px 8px',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
+        }}
+      >
+        <Grid
+          item
+          xs={4}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            backgroundColor: '#404040'
+          }}
+        >
+          <Typography
+            component={'label'}
+            sx={{
+              fontWeight: 500,
+              fontSize: '0.75rem',
+              color: '#FFFFFF',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis'
+            }}
+            htmlFor={keyPrefix.toString()}
+          >
+            {label}
+          </Typography>
+        </Grid>
+        <Grid
+          item
+          xs={8}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            id={keyPrefix.toString()}
+            component={'select'}
+            sx={{
+              width: '100%',
+              textAlign: 'start',
+              border: '1px solid #404040',
+              borderRadius: '4px',
+              outline: 'none',
+              padding: '4px 8px',
+              fontSize: '0.75rem',
+              backgroundColor: '#404040',
+              color: '#FFFFFF',
+              cursor: 'pointer',
+              fontStyle: 'normal',
+              transition: 'all 0.2s ease',
+              '&:hover': {
+                borderColor: '#1E1E1E',
+                backgroundColor: '#1E1E1E'
+              },
+              '&:focus': {
+                borderColor: '#404040',
+                boxShadow: '0 0 0 1px #404040'
+              }
+            }}
+            onChange={(e) => onChange(e.target.value as string)}
+            value={value}
+            disabled={disabled}
+          >
+            {labels.map((label) => (
+              <option
+                value={label}
+                key={keyPrefix + label}
+              >
+                {label}
+              </option>
+            ))}
+          </Box>
+        </Grid>
+      </Grid>
+    );
+  },
+);
+
+export default MarkerSelector;