#30 extending model for ports

src/constants.ts

@@ -1,4 +1,10 @@
 export enum ReactDiagramMetaTypes {
   META_NODE = 'meta-node-type',
   META_LINK = 'meta-link-type',
-}
+};
+
+export enum PortTypes {
+  INPUT_PORT = 'inputPort',
+  OUTPUT_PORT = 'outputPort',
+  PARAMETER_PORT = 'parameterPort'
+};

src/index.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
+import Sidebar from './components/Sidebar';
 import { MetaNode } from './models/MetaNode';
 import { MetaLink } from './models/MetaLink';
+import { MetaPort } from './models/MetaPort';
+import CssBaseline from '@mui/material/CssBaseline';
+import { getLinkModel } from './helpers/linksHelper';
 import { ComponentsMap } from './models/ComponentsMap';
-import createEngine, { DiagramModel } from '@projectstorm/react-diagrams';
+import { MetaNodeModel } from './react-diagrams/MetaNodeModel';
+import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import { MetaNodeFactory } from './react-diagrams/MetaNodeFactory';
 import { MetaLinkFactory } from './react-diagrams/MetaLinkFactory';
-import { CanvasWidget } from '@projectstorm/react-canvas-core';
-import { MetaNodeModel } from './react-diagrams/MetaNodeModel';
-import { getLinkModel } from './helpers/linksHelper';
-import { makeStyles } from '@mui/styles';
-import Sidebar from './components/Sidebar';
+import createEngine, { DiagramModel } from '@projectstorm/react-diagrams';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import theme from './theme';
+import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/material';
+import theme from './theme';
 
 const useStyles = makeStyles(_ => ({
   container: {
@@ -95,6 +96,7 @@ const MetaDiagram = ({
 };
 
 export default MetaDiagram;
-export { MetaNode, MetaLink, MetaNodeModel, ComponentsMap };
+export { MetaNode, MetaLink, MetaPort, MetaNodeModel, ComponentsMap };
 export { MetaLinkModel } from './react-diagrams/MetaLinkModel';
 export { Position } from './models/Position';
+export { PortTypes } from './constants';

src/models/MetaNode.ts

@@ -1,5 +1,6 @@
-import { MetaOptions } from './MetaOptions';
+import { MetaPort } from './MetaPort';
 import { Position } from './Position';
+import { MetaOptions } from './MetaOptions';
 
 export class MetaNode {
   children: MetaNode[];
@@ -11,12 +12,14 @@ export class MetaNode {
     shape: string,
     position: Position,
     variant: string,
+    ports: Map<string, MetaPort>,
     options: Map<string, any>
   ) {
     if (options === undefined) {
       options = new Map<string, any>();
     }
     this.children = [];
+    options.set('ports', ports);
     options.set('position', position);
     this.options = new MetaOptions(id, name, shape, variant, options);
   }

src/models/MetaOptions.ts

@@ -29,4 +29,12 @@ export class MetaOptions implements IShape, IId {
   getShape(): string {
     return this.options.get('shape');
   }
+
+  setNew(key: string, item: any) {
+    this.options.set(key, item);
+  }
+
+  getKey(key:string) {
+    return this.options.get(key);
+  }
 }

src/models/MetaPort.ts

@@ -0,0 +1,38 @@
+import { Position } from './Position';
+import { PortTypes } from '../constants';
+
+
+export class MetaPort {
+    id: string;
+    name: string;
+    type: PortTypes;
+    position: Position;
+
+    constructor(
+        id: string,
+        name: string,
+        type: PortTypes,
+        position: Position,
+        options: Map<string, any>
+    ) {
+        if (options === undefined) {
+            options = new Map<string, any>();
+        }
+        this.id = id;
+        this.name = name;
+        this.type = type;
+        this.position = position;
+    }
+
+    getId(): string {
+        return this.id;
+    }
+
+    getName(): string {
+        return this.name;
+    }
+
+    getType(): string {
+        return this.type;
+    }
+}

src/react-diagrams/MetaNodeModel.ts

@@ -1,26 +1,40 @@
-import { DefaultPortModel, NodeModel } from '@projectstorm/react-diagrams';
-import { ReactDiagramMetaTypes } from '../constants';
+import { PortTypes, ReactDiagramMetaTypes } from '../constants';
+import { DefaultPortModel, NodeModel, PortModel } from '@projectstorm/react-diagrams';
+import { MetaPort } from '../models/MetaPort';
 
 export class MetaNodeModel extends NodeModel {
-  constructor(options = {}) {
+  constructor(options = { ports: Map<string, PortModel> }) {
     super({
       ...options,
       type: ReactDiagramMetaTypes.META_NODE,
     });
 
-    // set up an in and out port
-
-    this.addPort(
-      new DefaultPortModel({
-        in: true,
-        name: 'in',
-      })
-    );
-    this.addPort(
-      new DefaultPortModel({
-        in: false,
-        name: 'out',
-      })
-    );
+    // ts-ignore
+    const values = Array.from(options.ports.values());
+    values.forEach((port: PortModel) => {
+      switch (port.getType()) {
+        case PortTypes.INPUT_PORT:
+          this.addPort(
+            new DefaultPortModel({
+              in: true,
+              name: port.getName(),
+            })
+          );
+          break;
+        case PortTypes.OUTPUT_PORT:
+          this.addPort(
+            new DefaultPortModel({
+              in: false,
+              name: port.getName(),
+            })
+          );
+          break;
+        case PortTypes.PARAMETER_PORT:
+          console.log('parameter type found!');
+          break;
+        default:
+          console.error('Port type')
+      }
+    });
   }
 }