WIP: integrate edge creation/deletion

front-end/src/API.js

@@ -118,4 +118,33 @@ export async function uploadWorkflow(formData) {
         body: formData
     };
     return fetchWrapper("/workflow/open", options);
-}
+}
+
+
+async function handleEdge(link, method) {
+    const sourceId = link.getSourcePort().getNode().options.id;
+    const targetId = link.getTargetPort().getNode().options.id;
+    return fetchWrapper(
+        `/node/edge/${sourceId}/${targetId}`,
+        {method: method});
+}
+
+
+/**
+ * Add edge to server-side workflow
+ * @param {VPLinkModel} link - JS edge to create
+ * @returns {Promise<Object>} - server response
+ */
+export async function addEdge(link) {
+    return handleEdge(link, "POST");
+}
+
+
+/**
+ * Delete edge from server-side workflow
+ * @param {VPLinkModel} link - JS edge to delete
+ * @returns {Promise<Object>} - server response
+ */
+export async function deleteEdge(link) {
+    return handleEdge(link, "DELETE");
+}

front-end/src/components/CustomNode/CustomNodeFactory.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { CustomNodeModel } from './CustomNodeModel';
-import { CustomNodeWidget } from './CustomNodeWidget';
 import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
+import CustomNodeModel from './CustomNodeModel';
+import CustomNodeWidget from './CustomNodeWidget';
 
-export class CustomNodeFactory extends AbstractReactFactory {
+export default class CustomNodeFactory extends AbstractReactFactory {
     constructor() {
         super('custom-node');
     }

front-end/src/components/CustomNode/CustomNodeModel.js

@@ -1,7 +1,7 @@
 import { NodeModel } from '@projectstorm/react-diagrams';
-import { VPPortModel } from '../VPPort/VPPortModel';
+import VPPortModel from '../VPPort/VPPortModel';
 
-export class CustomNodeModel extends NodeModel {
+export default class CustomNodeModel extends NodeModel {
 
     constructor(options = {}, config = {}) {
         super({

front-end/src/components/CustomNode/CustomNodeWidget.js

@@ -7,7 +7,7 @@ import NodeConfig from './NodeConfig';
 import '../../styles/CustomNode.css';
 import * as API from '../../API';
 
-export class CustomNodeWidget extends React.Component {
+export default class CustomNodeWidget extends React.Component {
 
     constructor(props) {
         super(props);

front-end/src/components/VPLink/VPLinkFactory.js

@@ -1,9 +1,9 @@
-import { VPLinkModel } from './VPLinkModel';
 import { DefaultLinkFactory } from '@projectstorm/react-diagrams';
+import VPLinkModel from './VPLinkModel';
 
-export class VPLinkFactory extends DefaultLinkFactory {
+export default class VPLinkFactory extends DefaultLinkFactory {
 
     generateModel() {
-      return new VPLinkModel();
+        return new VPLinkModel();
     }
 }

front-end/src/components/VPLink/VPLinkModel.js

@@ -1,12 +1,18 @@
 import { DefaultLinkModel } from '@projectstorm/react-diagrams';
+import * as API from '../../API';
 
-export class VPLinkModel extends DefaultLinkModel {
+export default class VPLinkModel extends DefaultLinkModel {
     constructor() {
         super({
           type: 'default',
           width: 5,
           color: 'orange'
         });
+        this.registerListener({
+            targetPortChanged: event => {
+                API.addEdge(this).catch(() => {});
+            },
+        })
     }
 
     getSVGPath() {
@@ -25,11 +31,8 @@ export class VPLinkModel extends DefaultLinkModel {
      * TODO: Notify backend the link has been removed
     */
     remove() {
-      const sourcePort = this.getSourcePort(); // PortModel
-      const sourceNode = sourcePort.getNode(); // NodeModel
-      const targetPort = this.getTargetPort(); // PortModel
-      const targetNode = targetPort.getNode(); // NodeModel
-
-      super.remove();
+        super.remove();
+        API.deleteEdge(this)
+            .catch(() => {});
     }
 }

front-end/src/components/VPLink/VPLinkWidget.js

@@ -1,5 +1,5 @@
 import { DefaultLinkWidget } from '@projectstorm/react-diagrams';
 
-export class VPLinkWidget extends DefaultLinkWidget {
+export default class VPLinkWidget extends DefaultLinkWidget {
 
 }

front-end/src/components/VPPort/VPPortFactory.js

@@ -1,12 +1,13 @@
-import { VPPortModel } from './VPPortModel';
-import { DefaultPortFactory } from '@projectstorm/react-diagrams';
+import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
+import VPPortModel from './VPPortModel';
 
-export class VPPortFactory extends DefaultPortFactory {
+export default class VPPortFactory extends AbstractModelFactory {
 
-    getType() {
-        return "vp-port";
+    constructor() {
+        super("vp-port");
     }
-    generateModel(event) {
+
+    generateModel() {
         return new VPPortModel({name: 'vp-port-name'});
     }
 }

front-end/src/components/VPPort/VPPortModel.js

@@ -1,12 +1,16 @@
 import { DefaultPortModel } from '@projectstorm/react-diagrams';
-import { VPLinkModel } from '../VPLink/VPLinkModel';
+import VPLinkFactory from '../VPLink/VPLinkFactory';
+
+export default class VPPortModel extends DefaultPortModel {
 
-export class VPPortModel extends DefaultPortModel {
       createLinkModel() {
-          return new VPLinkModel();
+          const factory = new VPLinkFactory();
+          return factory.generateModel();
       }
 
       canLinkToPort(port) {
-        return port instanceof VPPortModel;
+          // can't both be in or out ports
+          return port instanceof VPPortModel
+              && this.options.in !== port.options.in;
       }
 }

front-end/src/components/Workspace.js

@@ -2,10 +2,10 @@ import React, { useRef } from 'react';
 import { Row, Col, Button } from 'react-bootstrap';
 import createEngine, { DiagramModel } from '@projectstorm/react-diagrams';
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
-import { VPLinkFactory } from './VPLink/VPLinkFactory';
-import { CustomNodeModel } from './CustomNode/CustomNodeModel';
-import { CustomNodeFactory } from './CustomNode/CustomNodeFactory';
-import { VPPortFactory } from './VPPort/VPPortFactory';
+import VPLinkFactory from './VPLink/VPLinkFactory';
+import CustomNodeModel from './CustomNode/CustomNodeModel';
+import CustomNodeFactory from './CustomNode/CustomNodeFactory';
+import VPPortFactory from './VPPort/VPPortFactory';
 import * as API from '../API';
 import NodeMenu from './NodeMenu';
 import '../styles/Workspace.css';
@@ -57,8 +57,9 @@ class Workspace extends React.Component {
 
     // takes data from node drop and creates node on server and in diagram
     handleNodeCreation(event) {
-        const data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
-        if (!data) return;
+        const evtData = event.dataTransfer.getData("storm-diagram-node");
+        if (!evtData) return;
+        const data = JSON.parse(evtData);
         const node = new CustomNodeModel(data.nodeInfo, data.config),
             point = this.engine.getRelativeMousePoint(event);
         node.setPosition(point);