@flowuent-org/diagramming-core 1.0.8 → 1.1.1

package/apps/diagramming/src/main.tsx

@@ -1,463 +1,463 @@
-import '../../workflow/i18n';
-import ReactDOM from 'react-dom/client';
-import {
-  Change,
-  Controls,
-  DiagrammingPage,
-  DownloadPanel,
-  HistoryPane,
-  MiniMap,
-  PropertiesPane,
-  SmartDynamicFormField,
-  Stencil,
-} from '@flowuent-labs/diagrams';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import {
-  archEdges,
-  archNodes,
-  classDefaultEdges,
-  classDefaultNodes,
-  workflowDefaultNodesAndEdges,
-} from './node-data';
-import { stencilItems } from './stencil-items';
-import React from 'react';
-import DiagramTabs from './DiagramTabs';
-import {
-  useCaseDefaultEdges,
-  useCaseDefaultNodes,
-} from './UseCaseDiagramData';
-import {
-  sequenceDiagramEdges,
-  sequenceDiagramNodes,
-} from './SequenceDiagramData';
-import {
-  stateMachineDefaultNodes,
-  stateMachineDefaultEdges,
-} from './StateMachineDiagramData';
-import {
-  systemFlowDefaultNodes,
-  systemFlowDefaultEdges,
-} from '../../../packages/diagrams/src/lib/templates/systemFlow/data/template-data';
-import HomePage from './Pages/Home';
-import { cloudInitialEdges, cloudInitialNodes } from './cloud-data';
-import { collaborationNodes, collaborationEdges } from './CollaborationDiagramData';
-import { automationDefaultNodes, automationDefaultEdges } from './AutomationDiagramData';
-import { NodeForm } from '@flowuent-labs/diagrams';
-import { AddNodeView } from './components/AddNodeView';
-import { colorMap } from '../../../packages/diagrams/src/lib/types/colors';
-import MiniMapCommon from '../../../packages/diagrams/src/lib/components/MiniMapCommon';
-import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
-import { AutomationExecutionPanel } from '../../../packages/diagrams/src/lib/components/automation';
-
-const edgePropertiesConfig: SmartDynamicFormField[] = [
-  {
-    type: 'Select',
-    props: {
-      name: 'markerStart',
-      label: 'Marker Start',
-      options: 'getMarkerOptions',
-    },
-  },
-  {
-    type: 'Select',
-    props: {
-      name: 'markerEnd',
-      label: 'Marker End',
-      options: 'getMarkerOptions',
-    },
-  },
-  {
-    type: 'NumberField',
-    props: {
-      name: 'style.strokeWidth',
-      label: 'Stroke Width',
-      validation: {
-        type: 'number',
-        required: true,
-        message: 'Stroke width is required',
-      },
-    },
-  },
-  {
-    type: 'Select',
-    props: {
-      name: 'style.stroke',
-      label: 'Stroke Color',
-      options: 'getColorOptions',
-      validation: {
-        type: 'string',
-        required: true,
-        message: 'Stroke color is required',
-      },
-    },
-  },
-];
-
-const nodePropertiesConfig: SmartDynamicFormField[] = [
-  {
-    type: 'TextField',
-    props: {
-      name: 'data.title',
-      label: 'Title',
-      validation: {
-        type: 'string',
-        required: true,
-        message: 'Title is required',
-      },
-    },
-  },
-  {
-    type: 'NumberField',
-    props: {
-      name: 'position.x',
-      label: 'X',
-      validation: {
-        type: 'number',
-        required: true,
-        message: 'X coordinate is required',
-      },
-    },
-  },
-  {
-    type: 'NumberField',
-    props: {
-      name: 'position.y',
-      label: 'Y',
-      validation: {
-        type: 'number',
-        required: true,
-        message: 'Y coordinate is required',
-      },
-    },
-  },
-  {
-    type: 'Select',
-    props: {
-      name: 'data.color',
-      label: 'Color',
-      options: 'getColorOptions',
-      validation: {
-        type: 'string',
-        required: true,
-        message: 'Color is required',
-      },
-    },
-  },
-  {
-    type: 'NumberField',
-    props: {
-      name: 'width',
-      label: 'Width',
-      validation: {
-        type: 'number',
-        required: true,
-        message: 'Width is required',
-      },
-    },
-  },
-  {
-    type: 'NumberField',
-    props: {
-      name: 'height',
-      label: 'Height',
-      validation: {
-        type: 'number',
-        required: true,
-        message: 'Height is required',
-      },
-    },
-  },
-  {
-    type: 'Switch',
-    props: {
-      name: 'data.isBlock',
-      label: 'Is Block',
-    },
-  },
-];
-// Common children for DiagrammingPage
-const commonChildren = (
-  <>
-    {/* <MiniMap
-      position="bottom-left"
-      pannable
-      bgColor="#181818"
-      maskColor="rgba(40,40,40,0.6)"
-      maskStrokeColor="#888"
-      style={{
-        border: '1px solid #232323',
-        marginBottom: '3rem',
-        borderRadius: '10px',
-      }}
-      nodeColor={() => '#232323'}
-      nodeBorderRadius={30}
-
-    /> */}
-    <MiniMapCommon />
-    <DownloadPanel />
-    {/* <Controls /> */}
-    <Stencil stencilItems={stencilItems} />
-    <PropertiesPane
-      nodeSchema={nodePropertiesConfig}
-      edgeSchema={edgePropertiesConfig}
-      onNodeUpdate={(values) => console.log('Node updated', values)}
-    />
-    <HistoryPane />
-  </>
-);
-
-// Automation-specific children with execution panel
-const automationChildren = (
-  <>
-    <MiniMapCommon />
-    {/* <DownloadPanel />
-    <Stencil stencilItems={stencilItems} />
-    <PropertiesPane
-      nodeSchema={nodePropertiesConfig}
-      edgeSchema={edgePropertiesConfig}
-      onNodeUpdate={(values) => console.log('Node updated', values)}
-    />
-    <HistoryPane />
-    <AutomationExecutionPanel
-      nodes={automationDefaultNodes}
-      edges={automationDefaultEdges}
-      workflowId="automation-workflow-1"
-      onNodeUpdate={(nodeId, updatedData) => {
-        console.log('Node updated with execution result:', nodeId, updatedData);
-      }}
-    /> */}
-  </>
-);
-
-const onChange = (change: Change) =>
-  console.log('Logging change from on change', change);
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <Router>
-    <Routes>
-      <Route path="/" element={<HomePage />} />
-      <Route
-        path="/erd"
-        element={
-          <DiagramTabs
-            defaultEdges={classDefaultEdges}
-            defaultNodes={classDefaultNodes}
-            diagramType={'erd'}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/flow"
-        element={
-          <DiagramTabs
-            defaultEdges={classDefaultEdges}
-            defaultNodes={classDefaultNodes}
-            diagramType="flow"
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/sequence"
-        element={
-          <DiagramTabs
-            defaultEdges={sequenceDiagramEdges}
-            defaultNodes={sequenceDiagramNodes}
-            diagramType={'sequence'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 3,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/arch"
-        element={
-          <DiagramTabs
-            defaultEdges={archEdges}
-            defaultNodes={archNodes}
-            diagramType={'arch'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 4,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/cloud-architecture"
-        element={
-          <DiagramTabs
-            defaultEdges={cloudInitialEdges}
-            defaultNodes={cloudInitialNodes}
-            diagramType={'cloud-architecture'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 4,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/case"
-        element={
-          <DiagramTabs
-            defaultEdges={useCaseDefaultEdges}
-            defaultNodes={useCaseDefaultNodes}
-            diagramType={'case'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 5,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/collaboration"
-        element={
-          <DiagramTabs
-            defaultEdges={collaborationEdges}
-            defaultNodes={collaborationNodes}
-            diagramType={'collaboration'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 6,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/workflow"
-        element={
-          <DiagramTabs
-            defaultEdges={workflowDefaultNodesAndEdges.edges}
-            defaultNodes={workflowDefaultNodesAndEdges.nodes}
-            diagramType="workflow"
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [{ id: '1', code: 'return a + b;', args: [{ name: 'a', type: 'number' }, { name: 'b', type: 'number' }], name: 'add' },],
-              id: 1,
-              workflowNodeContent: (data: ICardNodeData, setNodeData: (data: ICardNodeData) => void) => (
-                <NodeForm data={data} setNodeData={setNodeData} />
-              ),
-              renderAddNodeView: (addNode: (type: string) => void, open: boolean, setOpen: (open: boolean) => void) => (
-                <AddNodeView addNode={addNode} open={open} setOpen={setOpen} />
-              ),
-              getDefaultNodeData: (type: string) => {
-                switch (type) {
-                  case 'function':
-                    return { formData: { type: 'function', parameters: [], name: 'New Function', body: [] } };
-                  case 'let':
-                    return { formData: { type: 'let', mode: 'simple', bindings: [] } };
-                  case 'api':
-                    return {
-                      formData: {
-                        type: 'api',
-                        method: 'GET',
-                        url: '',
-                        headers: [],
-                        queryParams: [],
-                        body: '',
-                        bodyType: 'json',
-                        responseVariable: 'apiResponse',
-                        responseDataType: 'Object'
-                      }
-                    };
-                  case 'graphql':
-                    return {
-                      formData: {
-                        type: 'graphql',
-                        mode: 'normal',
-                        operationType: 'query',
-                        operationName: '',
-                        rootField: '',
-                        url: '',
-                        headers: [],
-                        arguments: [],
-                        fields: [],
-                        variables: [],
-                        responseVariable: 'graphqlResponse',
-                        responseDataType: 'Object',
-                        customQuery: ''
-                      }
-                    };
-                  default:
-                    return {};
-                }
-              },
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/stateMachine"
-        element={
-          <DiagramTabs
-            defaultEdges={stateMachineDefaultEdges}
-            defaultNodes={stateMachineDefaultNodes}
-            diagramType={'stateMachine'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 4,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/systemFlow"
-        element={
-          <DiagramTabs
-            defaultEdges={systemFlowDefaultEdges}
-            defaultNodes={systemFlowDefaultNodes}
-            diagramType={'systemFlow'}
-            diagramPageProps={{
-              onChange,
-              availableFunctions: [],
-              id: 7,
-            }}
-          >
-            {commonChildren}
-          </DiagramTabs>
-        }
-      />
-      <Route
-        path="/automation"
-        element={
-          <DiagrammingPage
-            defaultEdges={automationDefaultEdges}
-            defaultNodes={automationDefaultNodes}
-            diagramType={'automation'}
-            onChange={onChange}
-            availableFunctions={[]}
-            id={8}
-          >
-            {/* {automationChildren} */}
-          </DiagrammingPage>
-        }
-      />
-    </Routes>
-  </Router>,
-);
+import '../../workflow/i18n';
+import ReactDOM from 'react-dom/client';
+import {
+  Change,
+  Controls,
+  DiagrammingPage,
+  DownloadPanel,
+  HistoryPane,
+  MiniMap,
+  PropertiesPane,
+  SmartDynamicFormField,
+  Stencil,
+} from '@flowuent-labs/diagrams';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  archEdges,
+  archNodes,
+  classDefaultEdges,
+  classDefaultNodes,
+  workflowDefaultNodesAndEdges,
+} from './node-data';
+import { stencilItems } from './stencil-items';
+import React from 'react';
+import DiagramTabs from './DiagramTabs';
+import {
+  useCaseDefaultEdges,
+  useCaseDefaultNodes,
+} from './UseCaseDiagramData';
+import {
+  sequenceDiagramEdges,
+  sequenceDiagramNodes,
+} from './SequenceDiagramData';
+import {
+  stateMachineDefaultNodes,
+  stateMachineDefaultEdges,
+} from './StateMachineDiagramData';
+import {
+  systemFlowDefaultNodes,
+  systemFlowDefaultEdges,
+} from '../../../packages/diagrams/src/lib/templates/systemFlow/data/template-data';
+import HomePage from './Pages/Home';
+import { cloudInitialEdges, cloudInitialNodes } from './cloud-data';
+import { collaborationNodes, collaborationEdges } from './CollaborationDiagramData';
+import { automationDefaultNodes, automationDefaultEdges } from './AutomationDiagramData';
+import { NodeForm } from '@flowuent-labs/diagrams';
+import { AddNodeView } from './components/AddNodeView';
+import { colorMap } from '../../../packages/diagrams/src/lib/types/colors';
+import MiniMapCommon from '../../../packages/diagrams/src/lib/components/MiniMapCommon';
+import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
+import { AutomationExecutionPanel } from '../../../packages/diagrams/src/lib/components/automation';
+
+const edgePropertiesConfig: SmartDynamicFormField[] = [
+  {
+    type: 'Select',
+    props: {
+      name: 'markerStart',
+      label: 'Marker Start',
+      options: 'getMarkerOptions',
+    },
+  },
+  {
+    type: 'Select',
+    props: {
+      name: 'markerEnd',
+      label: 'Marker End',
+      options: 'getMarkerOptions',
+    },
+  },
+  {
+    type: 'NumberField',
+    props: {
+      name: 'style.strokeWidth',
+      label: 'Stroke Width',
+      validation: {
+        type: 'number',
+        required: true,
+        message: 'Stroke width is required',
+      },
+    },
+  },
+  {
+    type: 'Select',
+    props: {
+      name: 'style.stroke',
+      label: 'Stroke Color',
+      options: 'getColorOptions',
+      validation: {
+        type: 'string',
+        required: true,
+        message: 'Stroke color is required',
+      },
+    },
+  },
+];
+
+const nodePropertiesConfig: SmartDynamicFormField[] = [
+  {
+    type: 'TextField',
+    props: {
+      name: 'data.title',
+      label: 'Title',
+      validation: {
+        type: 'string',
+        required: true,
+        message: 'Title is required',
+      },
+    },
+  },
+  {
+    type: 'NumberField',
+    props: {
+      name: 'position.x',
+      label: 'X',
+      validation: {
+        type: 'number',
+        required: true,
+        message: 'X coordinate is required',
+      },
+    },
+  },
+  {
+    type: 'NumberField',
+    props: {
+      name: 'position.y',
+      label: 'Y',
+      validation: {
+        type: 'number',
+        required: true,
+        message: 'Y coordinate is required',
+      },
+    },
+  },
+  {
+    type: 'Select',
+    props: {
+      name: 'data.color',
+      label: 'Color',
+      options: 'getColorOptions',
+      validation: {
+        type: 'string',
+        required: true,
+        message: 'Color is required',
+      },
+    },
+  },
+  {
+    type: 'NumberField',
+    props: {
+      name: 'width',
+      label: 'Width',
+      validation: {
+        type: 'number',
+        required: true,
+        message: 'Width is required',
+      },
+    },
+  },
+  {
+    type: 'NumberField',
+    props: {
+      name: 'height',
+      label: 'Height',
+      validation: {
+        type: 'number',
+        required: true,
+        message: 'Height is required',
+      },
+    },
+  },
+  {
+    type: 'Switch',
+    props: {
+      name: 'data.isBlock',
+      label: 'Is Block',
+    },
+  },
+];
+// Common children for DiagrammingPage
+const commonChildren = (
+  <>
+    {/* <MiniMap
+      position="bottom-left"
+      pannable
+      bgColor="#181818"
+      maskColor="rgba(40,40,40,0.6)"
+      maskStrokeColor="#888"
+      style={{
+        border: '1px solid #232323',
+        marginBottom: '3rem',
+        borderRadius: '10px',
+      }}
+      nodeColor={() => '#232323'}
+      nodeBorderRadius={30}
+
+    /> */}
+    <MiniMapCommon />
+    <DownloadPanel />
+    {/* <Controls /> */}
+    <Stencil stencilItems={stencilItems} />
+    <PropertiesPane
+      nodeSchema={nodePropertiesConfig}
+      edgeSchema={edgePropertiesConfig}
+      onNodeUpdate={(values) => console.log('Node updated', values)}
+    />
+    <HistoryPane />
+  </>
+);
+
+// Automation-specific children with execution panel
+const automationChildren = (
+  <>
+    <MiniMapCommon />
+    {/* <DownloadPanel />
+    <Stencil stencilItems={stencilItems} />
+    <PropertiesPane
+      nodeSchema={nodePropertiesConfig}
+      edgeSchema={edgePropertiesConfig}
+      onNodeUpdate={(values) => console.log('Node updated', values)}
+    />
+    <HistoryPane />
+    <AutomationExecutionPanel
+      nodes={automationDefaultNodes}
+      edges={automationDefaultEdges}
+      workflowId="automation-workflow-1"
+      onNodeUpdate={(nodeId, updatedData) => {
+        console.log('Node updated with execution result:', nodeId, updatedData);
+      }}
+    /> */}
+  </>
+);
+
+const onChange = (change: Change) =>
+  console.log('Logging change from on change', change);
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <Router>
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route
+        path="/erd"
+        element={
+          <DiagramTabs
+            defaultEdges={classDefaultEdges}
+            defaultNodes={classDefaultNodes}
+            diagramType={'erd'}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/flow"
+        element={
+          <DiagramTabs
+            defaultEdges={classDefaultEdges}
+            defaultNodes={classDefaultNodes}
+            diagramType="flow"
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/sequence"
+        element={
+          <DiagramTabs
+            defaultEdges={sequenceDiagramEdges}
+            defaultNodes={sequenceDiagramNodes}
+            diagramType={'sequence'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 3,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/arch"
+        element={
+          <DiagramTabs
+            defaultEdges={archEdges}
+            defaultNodes={archNodes}
+            diagramType={'arch'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 4,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/cloud-architecture"
+        element={
+          <DiagramTabs
+            defaultEdges={cloudInitialEdges}
+            defaultNodes={cloudInitialNodes}
+            diagramType={'cloud-architecture'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 4,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/case"
+        element={
+          <DiagramTabs
+            defaultEdges={useCaseDefaultEdges}
+            defaultNodes={useCaseDefaultNodes}
+            diagramType={'case'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 5,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/collaboration"
+        element={
+          <DiagramTabs
+            defaultEdges={collaborationEdges}
+            defaultNodes={collaborationNodes}
+            diagramType={'collaboration'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 6,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/workflow"
+        element={
+          <DiagramTabs
+            defaultEdges={workflowDefaultNodesAndEdges.edges}
+            defaultNodes={workflowDefaultNodesAndEdges.nodes}
+            diagramType="workflow"
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [{ id: '1', code: 'return a + b;', args: [{ name: 'a', type: 'number' }, { name: 'b', type: 'number' }], name: 'add' },],
+              id: 1,
+              workflowNodeContent: (data: ICardNodeData, setNodeData: (data: ICardNodeData) => void) => (
+                <NodeForm data={data} setNodeData={setNodeData} />
+              ),
+              renderAddNodeView: (addNode: (type: string) => void, open: boolean, setOpen: (open: boolean) => void) => (
+                <AddNodeView addNode={addNode} open={open} setOpen={setOpen} />
+              ),
+              getDefaultNodeData: (type: string) => {
+                switch (type) {
+                  case 'function':
+                    return { formData: { type: 'function', parameters: [], name: 'New Function', body: [] } };
+                  case 'let':
+                    return { formData: { type: 'let', mode: 'simple', bindings: [] } };
+                  case 'api':
+                    return {
+                      formData: {
+                        type: 'api',
+                        method: 'GET',
+                        url: '',
+                        headers: [],
+                        queryParams: [],
+                        body: '',
+                        bodyType: 'json',
+                        responseVariable: 'apiResponse',
+                        responseDataType: 'Object'
+                      }
+                    };
+                  case 'graphql':
+                    return {
+                      formData: {
+                        type: 'graphql',
+                        mode: 'normal',
+                        operationType: 'query',
+                        operationName: '',
+                        rootField: '',
+                        url: '',
+                        headers: [],
+                        arguments: [],
+                        fields: [],
+                        variables: [],
+                        responseVariable: 'graphqlResponse',
+                        responseDataType: 'Object',
+                        customQuery: ''
+                      }
+                    };
+                  default:
+                    return {};
+                }
+              },
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/stateMachine"
+        element={
+          <DiagramTabs
+            defaultEdges={stateMachineDefaultEdges}
+            defaultNodes={stateMachineDefaultNodes}
+            diagramType={'stateMachine'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 4,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/systemFlow"
+        element={
+          <DiagramTabs
+            defaultEdges={systemFlowDefaultEdges}
+            defaultNodes={systemFlowDefaultNodes}
+            diagramType={'systemFlow'}
+            diagramPageProps={{
+              onChange,
+              availableFunctions: [],
+              id: 7,
+            }}
+          >
+            {commonChildren}
+          </DiagramTabs>
+        }
+      />
+      <Route
+        path="/automation"
+        element={
+          <DiagrammingPage
+            defaultEdges={automationDefaultEdges}
+            defaultNodes={automationDefaultNodes}
+            diagramType={'automation'}
+            onChange={onChange}
+            availableFunctions={[]}
+            id={8}
+          >
+            {/* {automationChildren} */}
+          </DiagrammingPage>
+        }
+      />
+    </Routes>
+  </Router>,
+);