@flowuent-org/diagramming-core 1.3.10 → 1.4.0

package/packages/diagrams/src/lib/templates/useCaseDiagram/nodes/UseCaseNode.tsx

@@ -1,231 +0,0 @@
-import React, { useMemo, memo } from 'react';
-import { Handle, NodeProps, Position, NodeResizeControl } from '@xyflow/react';
-import { UseCaseNodeData } from '../../../types/usecase-types';
-import ResizeIcon from '../../../components/ResizeIcon';
-
-const SEPARATORS = ["--", "==", "..", "__"];
-const SEPARATOR_MARGIN = 10; // px, margin from ellipse border
-
-const controlStyle = {
-    background: 'transparent',
-    border: 'none',
-};
-
-// Helper to measure text width
-function measureTextWidth(text: string, font: string): number {
-    if (typeof window === 'undefined') return text.length * 8; // fallback for SSR
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return text.length * 8;
-    ctx.font = font;
-    return ctx.measureText(text).width;
-}
-
-// Helper to wrap a single line into multiple lines
-function wrapLine(line: string, maxWidth: number, font: string): string[] {
-    if (!line) return [''];
-    const words = line.split(' ');
-    let lines: string[] = [];
-    let current = '';
-    for (let i = 0; i < words.length; i++) {
-        const test = current ? current + ' ' + words[i] : words[i];
-        if (measureTextWidth(test, font) > maxWidth) {
-            if (current) lines.push(current);
-            current = words[i];
-        } else {
-            current = test;
-        }
-    }
-    if (current) lines.push(current);
-    return lines;
-}
-
-const UseCaseNode: React.FC<NodeProps> = ({ data }) => {
-    const nodeData = data as UseCaseNodeData;
-    const labelFont = 'bold 16px Arial, sans-serif';
-    const descFont = 'normal 13px Arial, sans-serif';
-    const maxLabelWidth = 140;
-    const maxDescWidth = 120;
-    const lineHeight = 18;
-    const padding = 18;
-
-    // Memoize all calculations for performance
-    const {
-        wrappedLines,
-        lineTypes,
-        maxLineWidth,
-        svgWidth,
-        svgHeight,
-        ellipseCx,
-        ellipseCy,
-        ellipseRx,
-        ellipseRy,
-        getLineY
-    } = useMemo(() => {
-        const descriptionLines = (nodeData.description || '').split(/\r?\n/);
-        let wrapped: string[] = [];
-        let types: ('label' | 'desc' | 'sep')[] = [];
-        let maxWidth = 0;
-        // Label
-        const labelWrapped = wrapLine(nodeData.label, maxLabelWidth, labelFont);
-        labelWrapped.forEach(l => {
-            wrapped.push(l);
-            types.push('label');
-            maxWidth = Math.max(maxWidth, measureTextWidth(l, labelFont));
-        });
-        // Description
-        descriptionLines.forEach(line => {
-            const trimmed = line.trim();
-            if (SEPARATORS.includes(trimmed)) {
-                wrapped.push(trimmed);
-                types.push('sep');
-                maxWidth = Math.max(maxWidth, maxLabelWidth); // separators span full width
-            } else {
-                const descWrapped = wrapLine(line, maxDescWidth, descFont);
-                descWrapped.forEach(l => {
-                    wrapped.push(l);
-                    types.push('desc');
-                    maxWidth = Math.max(maxWidth, measureTextWidth(l, descFont));
-                });
-            }
-        });
-        const totalLines = wrapped.length;
-        const svgW = Math.max(160, maxWidth + 40);
-        const svgH = totalLines * lineHeight + padding * 2;
-        const cx = svgW / 2;
-        const cy = svgH / 2;
-        const rx = svgW / 2 - 4;
-        const ry = svgH / 2 - 4;
-        const getLineY = (idx: number) => padding + lineHeight / 2 + idx * lineHeight;
-        return {
-            wrappedLines: wrapped,
-            lineTypes: types,
-            maxLineWidth: maxWidth,
-            svgWidth: svgW,
-            svgHeight: svgH,
-            ellipseCx: cx,
-            ellipseCy: cy,
-            ellipseRx: rx,
-            ellipseRy: ry,
-            getLineY
-        };
-    }, [data.label, data.description]);
-
-    // Helper to get the available half-width of the ellipse at a given y
-    const getEllipseHalfWidthAtY = (y: number) => {
-        // y is SVG coordinate, ellipseCy is center
-        const dy = y - ellipseCy;
-        // Clamp to ellipseRy
-        if (Math.abs(dy) > ellipseRy) return 0;
-        // Ellipse equation: w = rx * sqrt(1 - (dy/ry)^2)
-        return ellipseRx * Math.sqrt(1 - (dy * dy) / (ellipseRy * ellipseRy));
-    };
-
-    return (
-        <>
-            <NodeResizeControl
-                style={controlStyle}
-                minWidth={160}
-                minHeight={80}
-                maxWidth={25000}
-                maxHeight={25000}
-            >
-                {/* <ResizeIcon /> */}
-            </NodeResizeControl>
-
-            <div style={{ textAlign: 'center', minWidth: svgWidth }}>
-                <svg width={svgWidth} height={svgHeight} viewBox={`0 0 ${svgWidth} ${svgHeight}`}>
-                    {/* Main ellipse */}
-                    <ellipse
-                        cx={ellipseCx}
-                        cy={ellipseCy}
-                        rx={ellipseRx}
-                        ry={ellipseRy}
-                        stroke="black"
-                        strokeWidth="2"
-                        fill="white"
-                        strokeDasharray={undefined}
-                    />
-                    {/* Double border for business use case */}
-                    {nodeData.business && (
-                        <ellipse
-                            cx={ellipseCx}
-                            cy={ellipseCy}
-                            rx={ellipseRx - 6}
-                            ry={ellipseRy - 6}
-                            stroke="black"
-                            strokeWidth="2"
-                            fill="none"
-                            strokeDasharray={undefined}
-                        />
-                    )}
-                    {/* Render separator lines, clipped to ellipse border */}
-                    {wrappedLines.map((line, idx) => {
-                        if (lineTypes[idx] === 'sep') {
-                            const trimmed = line.trim();
-                            const y = getLineY(idx);
-                            let dashArray = '';
-                            switch (trimmed) {
-                                case '--':
-                                    dashArray = '6,4';
-                                    break;
-                                case '..':
-                                    dashArray = '2,2';
-                                    break;
-                                case '__':
-                                    dashArray = '1,3';
-                                    break;
-                            }
-                            // Calculate available width at this y
-                            const halfW = getEllipseHalfWidthAtY(y - 1) - SEPARATOR_MARGIN;
-                            return (
-                                <line
-                                    key={`sep-${idx}`}
-                                    x1={ellipseCx - halfW}
-                                    x2={ellipseCx + halfW}
-                                    y1={y - lineHeight / 2 + 2}
-                                    y2={y - lineHeight / 2 + 2}
-                                    stroke="#888"
-                                    strokeDasharray={trimmed === '==' ? '' : dashArray}
-                                    strokeWidth={trimmed === '==' ? 2 : 1}
-                                />
-                            );
-                        }
-                        return null;
-                    })}
-                    {/* Render all text lines except separators */}
-                    <text x={ellipseCx} textAnchor="middle">
-                        {wrappedLines.map((line, idx) => {
-                            if (lineTypes[idx] === 'sep') return null;
-                            const isLabel = lineTypes[idx] === 'label';
-                            return (
-                                <tspan
-                                    key={`tspan-${idx}`}
-                                    x={ellipseCx}
-                                    y={getLineY(idx)}
-                                    fontSize={isLabel ? 16 : 13}
-                                    fontWeight={isLabel ? 'bold' : 'normal'}
-                                    fill={isLabel ? 'black' : '#333'}
-                                >
-                                    {line}
-                                </tspan>
-                            );
-                        })}
-                    </text>
-                </svg>
-                <Handle
-                    id="right"
-                    type="source"
-                    position={Position.Right}
-                />
-                <Handle
-                    id="left"
-                    type="target"
-                    position={Position.Left}
-                />
-            </div>
-        </>
-    );
-};
-
-export default memo(UseCaseNode); 

package/packages/diagrams/src/lib/templates/validationSchema.json

@@ -1,277 +0,0 @@
-{
-  "version": "1.0.0",
-  "description": "Dynamic validation schema for node forms and expressions",
-  "globalSettings": {
-    "defaultSeverity": "error",
-    "showWarnings": true,
-    "strictMode": false
-  },
-  "dataTypes": {
-    "String": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "minLength": {
-          "enabled": false,
-          "value": 0,
-          "message": "Value must be at least {minLength} characters long",
-          "severity": "warning"
-        },
-        "maxLength": {
-          "enabled": false,
-          "value": 1000,
-          "message": "Value must be no more than {maxLength} characters long",
-          "severity": "warning"
-        }
-      }
-    },
-    "Number": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "numeric": {
-          "enabled": true,
-          "message": "Value must be a valid number",
-          "severity": "error"
-        },
-        "range": {
-          "enabled": false,
-          "min": null,
-          "max": null,
-          "message": "Value must be between {min} and {max}",
-          "severity": "warning"
-        }
-      }
-    },
-    "INT": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "numeric": {
-          "enabled": true,
-          "message": "Value must be a valid integer",
-          "severity": "error"
-        },
-        "integer": {
-          "enabled": true,
-          "message": "Value must be a whole number",
-          "severity": "error"
-        }
-      }
-    },
-    "FLOAT": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "numeric": {
-          "enabled": true,
-          "message": "Value must be a valid number",
-          "severity": "error"
-        }
-      }
-    },
-    "Boolean": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "boolean": {
-          "enabled": true,
-          "message": "Value must be a valid boolean (true, false, 0, 1)",
-          "severity": "error"
-        }
-      }
-    },
-    "BOOLEAN": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "boolean": {
-          "enabled": true,
-          "message": "Value must be a valid boolean (true, false, 0, 1)",
-          "severity": "error"
-        }
-      }
-    },
-    "Object": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "json": {
-          "enabled": true,
-          "message": "Value must be valid JSON",
-          "severity": "error"
-        }
-      }
-    },
-    "Array": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        },
-        "json": {
-          "enabled": true,
-          "message": "Value must be valid JSON array",
-          "severity": "error"
-        }
-      }
-    }
-  },
-  "expressions": {
-    "primitive": {
-      "validation": {
-        "required": {
-          "enabled": true,
-          "message": "Value cannot be empty",
-          "severity": "error"
-        }
-      }
-    },
-    "operation": {
-      "validation": {
-        "operands": {
-          "required": {
-            "enabled": true,
-            "message": "Operand {index} cannot be empty",
-            "severity": "error"
-          },
-          "typeMismatch": {
-            "enabled": true,
-            "message": "Operand {index} must be a valid {dataType}",
-            "severity": "warning"
-          }
-        }
-      }
-    }
-  },
-  "nodeTypes": {
-    "function": {
-      "validation": {
-        "name": {
-          "required": {
-            "enabled": true,
-            "message": "Function name cannot be empty",
-            "severity": "error"
-          },
-          "identifier": {
-            "enabled": true,
-            "message": "Function name must be a valid identifier",
-            "severity": "error"
-          }
-        },
-        "parameters": {
-          "required": {
-            "enabled": true,
-            "message": "At least one parameter is required",
-            "severity": "warning"
-          },
-          "identifier": {
-            "enabled": true,
-            "message": "Parameter names must be valid identifiers",
-            "severity": "error"
-          }
-        }
-      }
-    },
-    "if": {
-      "validation": {
-        "condition": {
-          "required": {
-            "enabled": true,
-            "message": "Condition cannot be empty",
-            "severity": "error"
-          }
-        }
-      }
-    },
-    "let": {
-      "validation": {
-        "bindings": {
-          "required": {
-            "enabled": true,
-            "message": "At least one binding is required",
-            "severity": "warning"
-          },
-          "identifier": {
-            "enabled": true,
-            "message": "Binding names must be valid identifiers",
-            "severity": "error"
-          }
-        }
-      }
-    },
-    "set": {
-      "validation": {
-        "variable": {
-          "required": {
-            "enabled": true,
-            "message": "Variable name cannot be empty",
-            "severity": "error"
-          },
-          "identifier": {
-            "enabled": true,
-            "message": "Variable name must be a valid identifier",
-            "severity": "error"
-          }
-        },
-        "value": {
-          "required": {
-            "enabled": true,
-            "message": "Value cannot be empty",
-            "severity": "error"
-          }
-        }
-      }
-    }
-  },
-  "identifiers": {
-    "validation": {
-      "required": {
-        "enabled": true,
-        "message": "Identifier cannot be empty",
-        "severity": "error"
-      },
-      "format": {
-        "enabled": true,
-        "pattern": "^[a-zA-Z_$][a-zA-Z0-9_$]*$",
-        "message": "Identifier must start with a letter or underscore and contain only letters, numbers, and underscores",
-        "severity": "error"
-      },
-      "noSpaces": {
-        "enabled": true,
-        "message": "Identifier cannot contain spaces",
-        "severity": "error"
-      }
-    }
-  },
-  "messages": {
-    "custom": {
-      "emptyValue": "This field cannot be empty",
-      "invalidFormat": "Invalid format for this field",
-      "typeMismatch": "Value type does not match expected type",
-      "validationFailed": "Validation failed for this field"
-    }
-  }
-}