@flowuent-org/diagramming-core 1.0.5

package/apps/diagramming/src/SequenceDiagramData.ts

@@ -0,0 +1,215 @@
+// Define the vertical spacing between messages
+const MESSAGE_SPACING = 80;
+const HEADER_HEIGHT = 50;
+const LIFELINE_START_Y = 100;
+
+// Calculate vertical positions for messages
+const messagePositions = {
+  request: LIFELINE_START_Y + MESSAGE_SPACING,
+  query: LIFELINE_START_Y + MESSAGE_SPACING * 2,
+  dbResponse: LIFELINE_START_Y + MESSAGE_SPACING * 3,
+  clientResponse: LIFELINE_START_Y + MESSAGE_SPACING * 4,
+  selfProcess: LIFELINE_START_Y + MESSAGE_SPACING * 1.5, // For self message example
+};
+
+// Calculate total height needed for the diagram
+const DIAGRAM_HEIGHT = LIFELINE_START_Y + MESSAGE_SPACING * 5;
+
+// Interface for sequence entity node data
+interface SequenceEntityData {
+  label: string;
+  color: string;
+  backgroundColor: string;
+  lifelineLength: number;
+}
+
+// Interface for activation bar node data
+interface ActivationBarData {
+  entityId: string;
+  color: string;
+  borderColor: string;
+  length: number;
+}
+
+// Interface for combined fragment node data
+interface CombinedFragmentData {
+  label: string;
+  conditions: string[];
+}
+
+// Interface for sequence message edge data
+interface SequenceMessageData {
+  label: string;
+  type: 'sync' | 'async' | 'return' | 'self';
+  y: number;
+}
+
+export const sequenceDiagramNodes = [
+  // Entity nodes (participants)
+  {
+    id: 'client',
+    type: 'sequenceEntity',
+    position: { x: 100, y: 50 },
+    data: {
+      label: 'Client',
+      color: '#0066cc',
+      backgroundColor: '#e6f0ff',
+      lifelineLength: DIAGRAM_HEIGHT - LIFELINE_START_Y,
+    },
+    draggable: true,
+  },
+  {
+    id: 'server',
+    type: 'sequenceEntity',
+    position: { x: 350, y: 50 },
+    data: {
+      label: 'Server',
+      color: '#009900',
+      backgroundColor: '#e6ffe6',
+      lifelineLength: DIAGRAM_HEIGHT - LIFELINE_START_Y,
+    },
+    draggable: true,
+  },
+  {
+    id: 'database',
+    type: 'sequenceEntity',
+    position: { x: 600, y: 50 },
+    data: {
+      label: 'Database',
+      color: '#cc0000',
+      backgroundColor: '#ffe6e6',
+      lifelineLength: DIAGRAM_HEIGHT - LIFELINE_START_Y,
+    },
+    draggable: true,
+  },
+
+  // Activation bars
+  {
+    id: 'client-activation',
+    type: 'activationBar',
+    position: { x: 155, y: messagePositions.request },
+    data: {
+      entityId: 'client',
+      color: '#e6f0ff',
+      borderColor: '#0066cc',
+      length: 250,
+    },
+    draggable: true,
+  },
+  {
+    id: 'server-activation',
+    type: 'activationBar',
+    position: { x: 405, y: messagePositions.request },
+    data: {
+      entityId: 'server',
+      color: '#e6ffe6',
+      borderColor: '#009900',
+      length: 210,
+    },
+    draggable: true,
+  },
+  {
+    id: 'database-activation',
+    type: 'activationBar',
+    position: { x: 655, y: messagePositions.query },
+    data: {
+      entityId: 'database',
+      color: '#ffe6e6',
+      borderColor: '#cc0000',
+      length: 90,
+    },
+    draggable: true,
+  },
+
+  // Combined Fragment example
+  {
+    id: 'alt-fragment',
+    type: 'combinedFragment',
+    position: { x: 80, y: 300 },
+    style: { width: 500, height: 150 },
+    data: {
+      label: 'alt',
+      conditions: ['[success]', '[error]'],
+    },
+    draggable: true,
+  },
+];
+
+export const sequenceDiagramEdges = [
+  // 1. Client -> Server Request
+  {
+    id: 'seq-edge1',
+    source: 'client',
+    target: 'server',
+    type: 'sequenceMessage',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '1. Request',
+      type: 'sync', // synchronous message
+      y: messagePositions.request,
+    },
+    animated: false,
+  },
+  // 2. Server -> Database Query
+  {
+    id: 'seq-edge2',
+    source: 'server',
+    target: 'database',
+    type: 'sequenceMessage',
+    sourceHandle: 'right',
+    targetHandle: 'left',
+    data: {
+      label: '2. Query',
+      type: 'sync', // synchronous message
+      y: messagePositions.query,
+    },
+    animated: false,
+  },
+  // 3. Database -> Server Response
+  {
+    id: 'seq-edge3',
+    source: 'database',
+    target: 'server',
+    type: 'sequenceMessage',
+    sourceHandle: 'left',
+    targetHandle: 'right',
+    data: {
+      label: '3. Response',
+      type: 'return', // return message
+      y: messagePositions.dbResponse,
+    },
+    animated: false,
+  },
+  // 4. Server -> Client Response
+  {
+    id: 'seq-edge4',
+    source: 'server',
+    target: 'client',
+    type: 'sequenceMessage',
+    sourceHandle: 'left',
+    targetHandle: 'right',
+    data: {
+      label: '4. Response',
+      type: 'return', // return message
+      y: messagePositions.clientResponse,
+    },
+    animated: false,
+  },
+  // Self message example
+  {
+    id: 'seq-edge-self',
+    source: 'client',
+    target: 'client',
+    type: 'sequenceMessage',
+    sourceHandle: 'right',
+    targetHandle: 'right',
+    data: {
+      label: 'process()',
+      type: 'self', // self message
+      y: messagePositions.selfProcess,
+    },
+    animated: false,
+  },
+];
+

package/apps/diagramming/src/StateMachineDiagramData.ts

@@ -0,0 +1,64 @@
+// Default nodes for the state machine diagram
+export const stateMachineDefaultNodes = [
+  {
+    id: '1',
+    type: 'InitialStateNode',
+    position: { x: 100, y: 100 },
+    data: { label: '' },
+    width: 20,
+    height: 20,
+    measured: { width: 20, height: 20 },
+  },
+  {
+    id: '2',
+    type: 'StateNode',
+    position: { x: 250, y: 100 },
+    data: { label: 'Idle', activities: ['do / waitForInput'] },
+    width: 150,
+    height: 70,
+    measured: { width: 150, height: 70 },
+  },
+  {
+    id: '3',
+    type: 'StateNode',
+    position: { x: 450, y: 100 },
+    data: { label: 'Processing', activities: ['do / processData'] },
+    width: 150,
+    height: 70,
+    measured: { width: 150, height: 70 },
+  },
+  {
+    id: '4',
+    type: 'FinalStateNode',
+    position: { x: 650, y: 100 },
+    data: { label: '' },
+    width: 30,
+    height: 30,
+    measured: { width: 30, height: 30 },
+  },
+];
+
+// Default edges for the state machine diagram
+export const stateMachineDefaultEdges = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'customEdge',
+    data: { label: 'start' },
+  },
+  {
+    id: 'e2-3',
+    source: '2',
+    target: '3',
+    type: 'customEdge',
+    data: { label: 'buttonPress [isValid] / validate' },
+  },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    type: 'customEdge',
+    data: { label: 'complete' },
+  },
+];

package/apps/diagramming/src/UseCaseDiagramData.ts

@@ -0,0 +1,52 @@
+// Default nodes for the use case diagram
+export const useCaseDefaultNodes = [
+  {
+    id: 'actor-1',
+    type: 'actor',
+    position: { x: 100, y: 200 },
+    data: { label: 'User' },
+  },
+  {
+    id: 'usecase-1',
+    type: 'usecase',
+    position: { x: 350, y: 200 },
+    data: { label: 'Login' },
+  },
+  {
+    id: 'usecase-2',
+    type: 'usecase',
+    position: { x: 350, y: 350 },
+    data: { label: 'Register' },
+  },
+  {
+    id: 'actor-2',
+    type: 'actor',
+    position: { x: 600, y: 200 },
+    data: { label: 'Admin' },
+  },
+];
+
+// Default edges for the use case diagram
+export const useCaseDefaultEdges = [
+  {
+    id: 'e-actor1-usecase1',
+    source: 'actor-1',
+    target: 'usecase-1',
+    type: 'association',
+    data: { type: 'association' },
+  },
+  {
+    id: 'e-actor1-usecase2',
+    source: 'actor-1',
+    target: 'usecase-2',
+    type: 'association',
+    data: { type: 'association' },
+  },
+  {
+    id: 'e-actor2-usecase1',
+    source: 'actor-2',
+    target: 'usecase-1',
+    type: 'association',
+    data: { type: 'association' },
+  },
+];

package/apps/diagramming/src/cloud-data.ts

@@ -0,0 +1,371 @@
+import { Node, Edge, MarkerType } from 'reactflow';
+
+export const cloudInitialNodes: Node[] = [
+  {
+    id: 'vpc-ffecabf4-e3e8-409c-8325-08c2b2b5314b',
+    type: 'subnetNode',
+    position: {
+      x: -236.44708755828594,
+      y: 111.93957147373396,
+    },
+    data: {
+      label: 'Virtual Private Cloud',
+      color: 'rgba(97, 218, 251, 0.1)',
+      borderColor: '#61dafb',
+      width: 800,
+      height: 600,
+    },
+    style: {
+      width: 800,
+      height: 600,
+      zIndex: 1,
+    },
+    parentNode: '',
+    width: 800,
+    height: 600,
+    selected: false,
+    positionAbsolute: {
+      x: -236.44708755828594,
+      y: 111.93957147373396,
+    },
+    dragging: false,
+  },
+  {
+    id: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    type: 'serviceNode',
+    position: {
+      x: 38.55365565814054,
+      y: 249.60912240292595,
+    },
+    data: {
+      service: 'ec2',
+      label: 'EC2',
+      sublabel: 'Instance',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-ffecabf4-e3e8-409c-8325-08c2b2b5314b',
+    extent: 'parent',
+    width: 112,
+    height: 120,
+    selected: false,
+    positionAbsolute: {
+      x: -197.8934319001454,
+      y: 361.5486938766599,
+    },
+    dragging: false,
+  },
+  {
+    id: 'elastic-beanstalk-5d192e86-6f05-4ac4-99b0-6d4d68e74570',
+    type: 'serviceNode',
+    position: {
+      x: 488.69751989931865,
+      y: 472.6598036440373,
+    },
+    data: {
+      service: 'elastic-beanstalk',
+      label: 'Elastic Beanstalk',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-ffecabf4-e3e8-409c-8325-08c2b2b5314b',
+    extent: 'parent',
+    width: 184,
+    height: 110,
+    selected: false,
+    positionAbsolute: {
+      x: 252.2504323410327,
+      y: 584.5993751177713,
+    },
+    dragging: false,
+  },
+  {
+    id: 'app-runner-18e66403-dfa8-42eb-ac08-0997b8372482',
+    type: 'serviceNode',
+    position: {
+      x: 492.40798757637947,
+      y: 335.3618456545091,
+    },
+    data: {
+      service: 'app-runner',
+      label: 'App Runner',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-ffecabf4-e3e8-409c-8325-08c2b2b5314b',
+    extent: 'parent',
+    width: 128,
+    height: 110,
+    selected: false,
+    positionAbsolute: {
+      x: 255.96090001809353,
+      y: 447.3014171282431,
+    },
+    dragging: false,
+  },
+  {
+    id: 'ec2-image-builder-98456f68-96a9-477c-8513-2c0fd0541200',
+    type: 'serviceNode',
+    position: {
+      x: 494.882556570789,
+      y: 9.544179088929923,
+    },
+    data: {
+      service: 'ec2-image-builder',
+      label: 'Ec2 Image Builder',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-ffecabf4-e3e8-409c-8325-08c2b2b5314b',
+    extent: 'parent',
+    width: 184,
+    height: 110,
+    selected: false,
+    positionAbsolute: {
+      x: 258.43546901250306,
+      y: 121.48375056266389,
+    },
+    dragging: false,
+  },
+  {
+    id: 's3-outposts-e0b14a98-57e5-44ed-bc99-0a0e2723dabc',
+    type: 'serviceNode',
+    position: {
+      x: 492.78908900017734,
+      y: 175.7505751547895,
+    },
+    data: {
+      service: 's3-outposts',
+      label: 'S3',
+      sublabel: 'on Outposts',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-ffecabf4-e3e8-409c-8325-08c2b2b5314b',
+    extent: 'parent',
+    width: 136,
+    height: 120,
+    selected: false,
+    positionAbsolute: {
+      x: 256.3420014418914,
+      y: 287.69014662852345,
+    },
+    dragging: false,
+  },
+  {
+    id: 'vpc-bb20a60a-e474-4815-9b61-6485c2c2b8ad',
+    type: 'subnetNode',
+    position: {
+      x: -233.2247424672605,
+      y: 731.727084440799,
+    },
+    data: {
+      label: 'Data Layer',
+      color: 'rgba(97, 218, 251, 0.1)',
+      borderColor: '#61dafb',
+      width: 800,
+      height: 240,
+    },
+    style: {
+      width: 800,
+      height: 240,
+      zIndex: 1,
+    },
+    parentNode: '',
+    width: 800,
+    height: 240,
+    selected: true,
+    positionAbsolute: {
+      x: -233.2247424672605,
+      y: 731.727084440799,
+    },
+    dragging: false,
+  },
+  {
+    id: 'aurora-c04a6038-07d9-475a-a3e9-73600b0fff0d',
+    type: 'serviceNode',
+    position: {
+      x: 121.7351725052886,
+      y: 68.66715082594908,
+    },
+    data: {
+      service: 'aurora',
+      label: 'Amazon',
+      sublabel: 'Aurora',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-bb20a60a-e474-4815-9b61-6485c2c2b8ad',
+    extent: 'parent',
+    width: 100,
+    height: 120,
+    selected: false,
+    positionAbsolute: {
+      x: -108.22010852984704,
+      y: 821.6457345755596,
+    },
+    dragging: false,
+  },
+  {
+    id: 'documentdb-f6405751-7756-49ac-b2e6-a93ebb1ed49a',
+    type: 'serviceNode',
+    position: {
+      x: 484.4609848999129,
+      y: 67.17402618231097,
+    },
+    data: {
+      service: 'documentdb',
+      label: 'Amazon',
+      sublabel: 'DocumentDB',
+      handles: ['left', 'right'],
+    },
+    style: {
+      zIndex: 2,
+    },
+    parentNode: 'vpc-bb20a60a-e474-4815-9b61-6485c2c2b8ad',
+    extent: 'parent',
+    width: 128,
+    height: 120,
+    selected: false,
+    positionAbsolute: {
+      x: 254.50570386477727,
+      y: 820.1526099319215,
+    },
+    dragging: false,
+  },
+];
+
+export const cloudInitialEdges: Edge[] = [
+  {
+    type: 'smoothstep',
+    animated: false,
+    style: {
+      stroke: '#61dafb',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: 'arrowclosed',
+      width: 20,
+      height: 20,
+      color: '#61dafb',
+    },
+    source: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    sourceHandle: null,
+    target: 'ec2-image-builder-98456f68-96a9-477c-8513-2c0fd0541200',
+    targetHandle: null,
+    id: 'reactflow__edge-ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a-ec2-image-builder-98456f68-96a9-477c-8513-2c0fd0541200',
+    selected: false,
+  },
+  {
+    type: 'smoothstep',
+    animated: false,
+    style: {
+      stroke: '#61dafb',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: 'arrowclosed',
+      width: 20,
+      height: 20,
+      color: '#61dafb',
+    },
+    source: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    sourceHandle: null,
+    target: 'elastic-beanstalk-5d192e86-6f05-4ac4-99b0-6d4d68e74570',
+    targetHandle: null,
+    id: 'reactflow__edge-ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a-elastic-beanstalk-5d192e86-6f05-4ac4-99b0-6d4d68e74570',
+    selected: false,
+  },
+  {
+    type: 'smoothstep',
+    animated: false,
+    style: {
+      stroke: '#61dafb',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: 'arrowclosed',
+      width: 20,
+      height: 20,
+      color: '#61dafb',
+    },
+    source: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    sourceHandle: null,
+    target: 'app-runner-18e66403-dfa8-42eb-ac08-0997b8372482',
+    targetHandle: null,
+    id: 'reactflow__edge-ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a-app-runner-18e66403-dfa8-42eb-ac08-0997b8372482',
+    selected: false,
+  },
+  {
+    type: 'smoothstep',
+    animated: false,
+    style: {
+      stroke: '#61dafb',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: 'arrowclosed',
+      width: 20,
+      height: 20,
+      color: '#61dafb',
+    },
+    source: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    sourceHandle: null,
+    target: 's3-outposts-e0b14a98-57e5-44ed-bc99-0a0e2723dabc',
+    targetHandle: null,
+    id: 'reactflow__edge-ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a-s3-outposts-e0b14a98-57e5-44ed-bc99-0a0e2723dabc',
+    selected: false,
+  },
+  {
+    type: 'smoothstep',
+    animated: false,
+    style: {
+      stroke: '#61dafb',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: 'arrowclosed',
+      width: 20,
+      height: 20,
+      color: '#61dafb',
+    },
+    source: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    sourceHandle: null,
+    target: 'aurora-c04a6038-07d9-475a-a3e9-73600b0fff0d',
+    targetHandle: null,
+    id: 'reactflow__edge-ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a-aurora-c04a6038-07d9-475a-a3e9-73600b0fff0d',
+    selected: false,
+  },
+  {
+    type: 'smoothstep',
+    animated: false,
+    style: {
+      stroke: '#61dafb',
+      strokeWidth: 2,
+    },
+    markerEnd: {
+      type: 'arrowclosed',
+      width: 20,
+      height: 20,
+      color: '#61dafb',
+    },
+    source: 'ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a',
+    sourceHandle: null,
+    target: 'documentdb-f6405751-7756-49ac-b2e6-a93ebb1ed49a',
+    targetHandle: null,
+    id: 'reactflow__edge-ec2-334d8996-776f-4d4a-b1e4-eb9c433b687a-documentdb-f6405751-7756-49ac-b2e6-a93ebb1ed49a',
+    selected: false,
+  },
+];