@flowuent-org/diagramming-core 1.0.5

package/packages/diagrams/src/lib/types/ndoe-form-types.ts

@@ -0,0 +1,139 @@
+// utils/validation.ts
+// Check if the identifier follows valid naming conventions
+const memoizedValidIdentifier = (() => {
+  const cache = new Map<string, boolean>();
+  return (value: string): boolean => {
+    if (cache.has(value)) {
+      return cache.get(value)!;
+    }
+    // Check for spaces and ensure it follows identifier rules
+    if (value.includes(' ') || value.includes('\t') || value.includes('\n')) {
+      cache.set(value, false);
+      return false;
+    }
+    const result = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(value);
+    cache.set(value, result);
+    return result;
+  };
+})();
+
+export const isValidIdentifier = memoizedValidIdentifier;
+
+// Validate parameters by checking each identifier
+export const validateParams = (params: string[]): boolean =>
+  Array.isArray(params) && params.every(isValidIdentifier);
+
+// Form-specific validation functions - only keep what's still used
+export const validateFunctionName = (name: string): string | null => {
+  if (!name || name.trim() === '') {
+    return 'Function name cannot be empty.';
+  }
+
+  if (!isValidIdentifier(name)) {
+    return 'Function name must start with a letter or underscore and contain only letters, numbers, and underscores.';
+  }
+
+  return null;
+};
+
+export const validateParameters = (
+  parameters: FunctionParameter[],
+): string | null => {
+  if (!Array.isArray(parameters)) {
+    return 'Parameters must be an array.';
+  }
+
+  for (const param of parameters) {
+    if (!param.name || param.name.trim() === '') {
+      return 'Parameter names cannot be empty.';
+    }
+
+    if (!isValidIdentifier(param.name)) {
+      return `Parameter name "${param.name}" must start with a letter or underscore and contain only letters, numbers, and underscores.`;
+    }
+
+    if (!param.type || param.type.trim() === '') {
+      return `Parameter type for "${param.name}" cannot be empty.`;
+    }
+  }
+
+  return null;
+};
+
+export const validateCustomCode = (
+  code: string,
+  mode: string,
+): string | null => {
+  if (mode === 'advanced' && (!code || code.trim() === '')) {
+    return 'Custom code cannot be empty in advanced mode.';
+  }
+
+  return null;
+};
+
+export interface OperationExpression {
+  operation: string;
+  operands: string[];
+}
+
+export interface FunctionParameter {
+  name: string;
+  type: string;
+}
+
+export type NodeForm =
+  | FunctionNodeForm
+  | IfNodeForm
+  | DoNodeForm
+  | LetNodeForm
+  | LoopNodeForm
+  | SetNodeForm
+  | ReturnNodeForm;
+
+export interface FunctionNodeForm {
+  type: 'function';
+  name: string;
+  parameters: string[];
+  body: NodeForm[];
+  customCode?: string;
+}
+
+export interface IfNodeForm {
+  type: 'if';
+  condition: Expression;
+  conditionDataType?: string;
+  true: NodeForm;
+  false?: NodeForm;
+}
+
+export interface DoNodeForm {
+  type: 'do';
+  body: NodeForm[];
+}
+
+export interface LetNodeForm {
+  type: 'let';
+  bindings: [string, Expression][];
+}
+
+export interface LoopNodeForm {
+  type: 'loop';
+  condition: Expression;
+  conditionDataType?: string;
+  body: NodeForm[];
+}
+
+export interface SetNodeForm {
+  type: 'set';
+  variable: string;
+  value: Expression;
+  valueDataType?: string;
+}
+
+export interface ReturnNodeForm {
+  type: 'return';
+  value: Expression;
+  dataType?: string;
+}
+
+export type Expression = number | string | OperationExpression;

package/packages/diagrams/src/lib/types/node-types.ts

@@ -0,0 +1,29 @@
+import { EntityNode } from '../organisms/Card/EntityNode';
+import BendpointNode from '../atoms/BendpointNode';
+import WorkflowNode from '../organisms/WorkflowNode';
+import CollabObjectNode from '../templates/collaborationDiagram/nodes/CollabObjectNode';
+import ActorNode from '../atoms/ActorNode';
+import {
+  AutomationStartNode,
+  AutomationApiNode,
+  AutomationFormattingNode,
+  AutomationSheetsNode,
+  AutomationEndNode,
+  AutomationNoteNode,
+  AutomationAISuggestionNode,
+} from '../components/automation';
+
+export default {
+  entity: EntityNode,
+  bendPoint: BendpointNode,
+  workflow: WorkflowNode,
+  collabObject: CollabObjectNode,
+  actor: ActorNode,
+  AutomationStartNode,
+  AutomationApiNode,
+  AutomationFormattingNode,
+  AutomationSheetsNode,
+  AutomationEndNode,
+  AutomationNoteNode,
+  AutomationAISuggestionNode,
+};

package/packages/diagrams/src/lib/types/sequence-types.ts

@@ -0,0 +1,178 @@
+import { Edge, Node } from '@xyflow/react';
+
+// Basic message types for sequence diagrams
+export type SequenceMessageType = 'sync' | 'async' | 'return' | 'self';
+
+// Shape types for sequence entities
+export type SequenceEntityShape =
+  | 'rectangle'
+  | 'roundedBox'
+  | 'circle'
+  | 'database'
+  | 'actor';
+
+// Fragment types for combined fragments
+export type CombinedFragmentType =
+  | 'alt'
+  | 'opt'
+  | 'loop'
+  | 'par'
+  | 'seq'
+  | 'strict'
+  | 'neg'
+  | 'critical'
+  | 'ignore'
+  | 'consider'
+  | 'assert';
+
+export interface ThemeData {
+  primary: string;
+  secondary: string;
+  name?: string;
+}
+
+export interface ActivationSection {
+  start: number;
+  end: number;
+}
+
+export interface SequenceEntityData extends Record<string, unknown> {
+  label: string;
+  color: string;
+  backgroundColor: string;
+  lifelineLength: number;
+  shape?: SequenceEntityShape;
+  collapsed?: boolean;
+  description?: string;
+  borderWidth?: number;
+  fontSize?: number;
+  activationSections?: ActivationSection[];
+}
+
+export interface ActivationBarData extends Record<string, unknown> {
+  entityId: string;
+  color: string;
+  borderColor: string;
+  length: number;
+}
+
+export interface CombinedFragmentData extends Record<string, unknown> {
+  label: string;
+  conditions: string[];
+  style?: {
+    width?: number | string;
+    height?: number | string;
+  };
+}
+
+export interface SequenceMessageData extends Record<string, unknown> {
+  label: string;
+  type: SequenceMessageType;
+  y: number;
+}
+
+// Typed node definitions
+export type SequenceEntityNode = Node<SequenceEntityData, 'sequenceEntity'>;
+export type ActivationBarNode = Node<ActivationBarData, 'activationBar'>;
+export type CombinedFragmentNode = Node<
+  CombinedFragmentData,
+  'combinedFragment'
+>;
+
+// Union type for all sequence nodes
+export type SequenceNode =
+  | SequenceEntityNode
+  | ActivationBarNode
+  | CombinedFragmentNode;
+
+// Typed edge definition
+export type SequenceEdge = Edge<SequenceMessageData, 'sequenceMessage'>;
+
+// Props interfaces
+export interface SequenceDiagramProps {
+  sequenceNodes: Node[];
+  sequenceEdges: Edge[];
+}
+
+export interface FragmentSettingsProps {
+  fragmentId: string | null;
+  width: number;
+  height: number;
+  onWidthChange: (width: number) => void;
+  onHeightChange: (height: number) => void;
+  onClose: () => void;
+}
+
+// Entity settings update type
+export interface EntitySettingsUpdateData {
+  label?: string;
+  color?: string;
+  backgroundColor?: string;
+  shape?: SequenceEntityShape;
+  fontSize?: number;
+  borderWidth?: number;
+  description?: string;
+  collapsed?: boolean;
+  activationSections?: ActivationSection[];
+}
+
+export interface EntitySettingsProps {
+  entityId: string | null;
+  data: SequenceEntityData;
+  onUpdate: (updates: EntitySettingsUpdateData) => void;
+  onClose: () => void;
+}
+
+export interface AddMessageDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onAddMessage: (
+    sourceId: string,
+    targetId: string,
+    messageType: SequenceMessageType,
+    label: string,
+  ) => void;
+  entities: SequenceEntityNode[];
+}
+
+export interface EditMessageDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onUpdateMessage: (
+    messageId: string,
+    messageType: SequenceMessageType,
+    label: string,
+  ) => void;
+  message: SequenceEdge | null;
+}
+
+export interface DiagramControlsProps {
+  onAddEntity: (shape?: SequenceEntityShape) => void;
+  onAddMessage: () => void;
+  onAddAltFragment: (fragmentType?: CombinedFragmentType) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  onLoadTemplate?: (templateType: string) => void;
+}
+
+// Fragment settings update type
+export interface FragmentSettingsUpdateData {
+  width?: number;
+  height?: number;
+  label?: string;
+  conditions?: string[];
+}
+
+// History entry type for undo/redo functionality
+export interface SequenceHistoryEntry {
+  nodes: SequenceNode[];
+  edges: SequenceEdge[];
+}
+
+// Template data return type
+export interface SequenceTemplateData {
+  nodes: SequenceNode[];
+  edges: SequenceEdge[];
+}

package/packages/diagrams/src/lib/types/shared-node-types.ts

@@ -0,0 +1,21 @@
+export type ActorStyle = 'stickman' | 'business';
+
+export interface ActorNodeData {
+  label: string;
+  style?: ActorStyle;
+  description?: string;
+  color?: string;
+  sourcePosition?: 'left' | 'right';
+  targetPosition?: 'left' | 'right';
+  resizable?: boolean;
+  infiniteResize?: boolean;
+  width?: number;
+  height?: number;
+  customRestrictions?: {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+  };
+  [key: string]: unknown;
+}

package/packages/diagrams/src/lib/types/state-machine-types.ts

@@ -0,0 +1,225 @@
+import { Node, Edge, NodeProps, EdgeProps, Connection } from '@xyflow/react';
+
+// Base node data interface
+export interface BaseNodeData {
+  label?: string;
+  onResize?: (id: string, width: number, height: number) => void;
+  width?: number;
+  height?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  infiniteResize?: boolean;
+  customRestrictions?: {
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+  };
+  measured?: {
+    width: number;
+    height: number;
+  };
+  [key: string]: unknown;
+}
+
+// State node specific data
+export interface StateNodeData extends BaseNodeData {
+  activities?: string[] | string;
+}
+
+// Composite state node specific data
+export interface CompositeStateNodeData extends BaseNodeData {
+  expanded?: boolean;
+  children?: string[];
+}
+
+// Fork/Join node specific data
+export interface ForkJoinNodeData extends BaseNodeData {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+// Edge data interface
+export interface StateMachineEdgeData {
+  label?: string;
+  isProxy?: boolean;
+  arrowHeadLeft?: boolean;
+  arrowHeadRight?: boolean;
+  nodeWidth?: number;
+  nodeHeight?: number;
+  nodeX?: number;
+  nodeY?: number;
+  [key: string]: unknown;
+}
+
+// State machine node types
+export type StateMachineNodeType =
+  | 'StateNode'
+  | 'InitialStateNode'
+  | 'FinalStateNode'
+  | 'CompositeStateNode'
+  | 'HistoryStateNode'
+  | 'JunctionPointNode'
+  | 'ChoicePointNode'
+  | 'EntryPointNode'
+  | 'ExitPointNode'
+  | 'ForkJoinNode'
+  | 'PinPointNode'
+  | 'bendpoint';
+
+// State machine edge types
+export type StateMachineEdgeType = 'customEdge' | 'selfconnecting';
+
+// Typed node interface
+export interface StateMachineNode extends Node {
+  type?: StateMachineNodeType;
+  data:
+    | StateNodeData
+    | CompositeStateNodeData
+    | ForkJoinNodeData
+    | BaseNodeData;
+}
+
+// Typed edge interface
+export interface StateMachineEdge extends Edge {
+  type?: StateMachineEdgeType;
+  data: StateMachineEdgeData;
+}
+
+// Node type map for creating nodes
+export interface NodeTypeMap {
+  StateNode: { type: 'StateNode'; data: StateNodeData };
+  InitialStateNode: { type: 'InitialStateNode'; data: BaseNodeData };
+  FinalStateNode: { type: 'FinalStateNode'; data: BaseNodeData };
+  CompositeStateNode: {
+    type: 'CompositeStateNode';
+    data: CompositeStateNodeData;
+  };
+  HistoryStateNode: { type: 'HistoryStateNode'; data: BaseNodeData };
+  JunctionPointNode: { type: 'JunctionPointNode'; data: BaseNodeData };
+  ChoicePointNode: { type: 'ChoicePointNode'; data: BaseNodeData };
+  EntryPointNode: { type: 'EntryPointNode'; data: BaseNodeData };
+  ExitPointNode: { type: 'ExitPointNode'; data: BaseNodeData };
+  ForkJoinNode: { type: 'ForkJoinNode'; data: ForkJoinNodeData };
+  BendpointNode: { type: 'bendpoint'; data: BaseNodeData };
+}
+
+// Node type map keys
+export type NodeTypeMapKey = keyof NodeTypeMap;
+
+// Props for node components
+export interface StateMachineNodeProps extends NodeProps {
+  data:
+    | StateNodeData
+    | CompositeStateNodeData
+    | ForkJoinNodeData
+    | BaseNodeData;
+}
+
+// Props for edge components
+export interface StateMachineEdgeProps extends EdgeProps {
+  data: StateMachineEdgeData;
+}
+
+// Layout direction
+export type LayoutDirection = 'DOWN' | 'RIGHT';
+
+// History state interface
+export interface HistoryState {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+// Editing state interface
+export interface EditingState {
+  nodeId?: string | null;
+  edgeId?: string | null;
+  label?: string;
+  type?: 'node' | 'edge';
+}
+
+// Settings state interfaces
+export interface StateNodeSettingsState {
+  id: string | null;
+}
+
+export interface EdgeSettingsState {
+  id: string | null;
+}
+
+// Node selection context interface
+export interface NodeSelectionContextType {
+  selectedNodeType: string | null;
+  setSelectedNodeType: (type: string | null) => void;
+  addNodeAtCenter?: (nodeType: string) => void;
+}
+
+// Diagram controls props interface
+export interface DiagramControlsProps {
+  onAddEntity: (shape?: string) => void;
+  onAddMessage?: () => void;
+  onAddAltFragment?: (fragmentType?: string) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  onLoadTemplate?: (templateType: string) => void;
+  edges: StateMachineEdge[];
+  nodes: StateMachineNode[];
+  onEditEdge: (edge: StateMachineEdge) => void;
+  onUpdateEdgeLabel?: (edgeId: string, newLabel: string) => void;
+  onToggleEdgeArrowHead?: (edgeId: string, direction: 'left' | 'right') => void;
+}
+
+// Node type interface for controls
+export interface NodeType {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+}
+
+// Tab panel props interface
+export interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+// Position interface
+export interface Position {
+  x: number;
+  y: number;
+}
+
+// Size interface
+export interface Size {
+  width: number;
+  height: number;
+}
+
+// Resize observer callback interface
+export interface ResizeObserverCallback {
+  width: number;
+  height: number;
+}
+
+// Layout function types
+export interface LayoutFunctions {
+  getLayoutedElements: () => void;
+  layoutDirection: LayoutDirection;
+  setLayoutDirection: (direction: LayoutDirection) => void;
+}
+
+// Composite state node wrapper props
+export interface CompositeStateNodeWrapperProps {
+  onSettingsClick?: () => void;
+  [key: string]: unknown; // For other props passed through
+}
+
+// Update functions type
+export type UpdateFunction<T> = (updates: Partial<T>) => void;
+
+// Close function type
+export type CloseFunction = () => void;
+
+// Delete function type
+export type DeleteFunction = () => void;

package/packages/diagrams/src/lib/types/stencil-item.ts

@@ -0,0 +1,7 @@
+import { ICardNodeData } from './card-node';
+export interface StencilItemType {
+  id: string;
+  data: ICardNodeData;
+  label: string;
+  iconName: string;
+}

package/packages/diagrams/src/lib/types/structures.ts

@@ -0,0 +1,80 @@
+import { Edge } from '@xyflow/react';
+import { NodeVariant } from './card-node';
+
+export interface StructureNode {
+  title: string;
+  variant?: NodeVariant;
+  branchIndex?: number | 'default';
+}
+
+export interface StructureEdge {
+  source: number;
+  target: number;
+  label?: string;
+}
+
+export const structures: {
+  [key: string]: { nodes: StructureNode[]; edges: StructureEdge[] };
+} = {
+  branch: {
+    nodes: [
+      { title: 'Branch', variant: 'branch' },
+      { title: 'Then', variant: 'emptyNode', branchIndex: 0 },
+      { title: 'Else', variant: 'emptyNode', branchIndex: 1 },
+      { title: 'Final', variant: 'emptyNode' },
+    ],
+    edges: [
+      { source: 0, target: 1, label: 'then' },
+      { source: 0, target: 2, label: 'else' },
+      { source: 1, target: 3 },
+      { source: 2, target: 3 },
+    ],
+  },
+  switch: {
+    nodes: [
+      { title: 'Switch', variant: 'switch' },
+      { title: 'Case 1', variant: 'emptyNode', branchIndex: 0 },
+      { title: 'Case 2', variant: 'emptyNode', branchIndex: 1 },
+      { title: 'Default', variant: 'emptyNode', branchIndex: 'default' },
+      { title: 'Final', variant: 'emptyNode' },
+    ],
+    edges: [
+      { source: 0, target: 1, label: 'case 1' },
+      { source: 0, target: 2, label: 'case 2' },
+      { source: 0, target: 3, label: 'default' },
+      { source: 1, target: 4 },
+      { source: 2, target: 4 },
+      { source: 3, target: 4 },
+    ],
+  },
+  workflow: {
+    nodes: [{ title: 'workflow' }],
+    edges: [],
+  },
+  tryCatch: {
+    nodes: [
+      { title: 'Try', variant: 'try' },
+      { title: 'Catch', variant: 'catch', branchIndex: 0 },
+      { title: 'Finally', variant: 'emptyNode' },
+    ],
+    edges: [
+      { source: 0, target: 1, label: 'catch' },
+      { source: 0, target: 2, label: 'finally' },
+      { source: 0, target: 2 },
+      { source: 1, target: 2 },
+    ],
+  },
+  sequence: {
+    nodes: [
+      { title: 'Actor1', variant: 'entity' },
+      { title: 'Actor2', variant: 'entity' },
+      { title: 'Actor3', variant: 'entity' },
+    ],
+    edges: [
+      { source: 0, target: 1, label: 'message 1' },
+      { source: 1, target: 2, label: 'message 2' },
+      { source: 2, target: 1, label: 'response 1' },
+      { source: 1, target: 0, label: 'response 2' },
+    ],
+  },
+};