From 1a1854825edc911f0478a9c1830e532df5f9a481 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 14:24:59 -0400 Subject: [PATCH 1/8] chore: remove unused custom diagram items --- .../CustomLink/CustomLinkFactory.js | 22 -------- .../components/CustomLink/CustomLinkModel.js | 22 -------- .../components/CustomLink/CustomLinkWidget.js | 51 ------------------- .../components/CustomPort/CustomPortModel.js | 12 ----- 4 files changed, 107 deletions(-) delete mode 100644 front-end/src/components/CustomLink/CustomLinkFactory.js delete mode 100644 front-end/src/components/CustomLink/CustomLinkModel.js delete mode 100644 front-end/src/components/CustomLink/CustomLinkWidget.js delete mode 100644 front-end/src/components/CustomPort/CustomPortModel.js diff --git a/front-end/src/components/CustomLink/CustomLinkFactory.js b/front-end/src/components/CustomLink/CustomLinkFactory.js deleted file mode 100644 index f4be4e9..0000000 --- a/front-end/src/components/CustomLink/CustomLinkFactory.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import { CustomLinkModel } from './CustomLinkModel'; -import { CustomLinkWidget } from './CustomLinkWidget'; -import { DefaultLinkFactory } from '@projectstorm/react-diagrams'; - -export class CustomLinkFactory extends DefaultLinkFactory { - constructor() { - super('advanced'); - } - - generateModel() { - return new CustomLinkModel(); - } - - generateLinkSegment(model, selected, path) { - return ( - - - - ); - } -} diff --git a/front-end/src/components/CustomLink/CustomLinkModel.js b/front-end/src/components/CustomLink/CustomLinkModel.js deleted file mode 100644 index 51f7245..0000000 --- a/front-end/src/components/CustomLink/CustomLinkModel.js +++ /dev/null @@ -1,22 +0,0 @@ -import { DefaultLinkModel } from '@projectstorm/react-diagrams'; - -export class CustomLinkModel extends DefaultLinkModel { - constructor() { - super({ - type: 'advanced', - width: 5 - }); - } - - getSVGPath() { - if (this.isLastPositionDefault()) { - return; - } - - return super.getSVGPath(); - } - - isLastPositionDefault() { - return this.getLastPoint().getX() === 0 && this.getLastPoint().getY() === 0; - } -} diff --git a/front-end/src/components/CustomLink/CustomLinkWidget.js b/front-end/src/components/CustomLink/CustomLinkWidget.js deleted file mode 100644 index 65bb035..0000000 --- a/front-end/src/components/CustomLink/CustomLinkWidget.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; - -export class CustomLinkWidget extends React.Component { - - path; - - constructor(props) { - super(props); - this.percent = 0; - } - - componentDidMount() { - this.mounted = true; - this.callback = () => { - if (!this.path) { - return; - } - - this.percent += 2; - if (this.percent > 100) { - this.percent = 0; - } - - if (this.mounted) { - requestAnimationFrame(this.callback); - } - }; - requestAnimationFrame(this.callback); - } - - componentWillUnmount() { - this.mounted = false; - } - - render() { - return ( - <> - { - this.path = ref; - }} - strokeWidth={this.props.model.getOptions().width} - stroke="rgba(255,0,0,0.5)" - d={this.props.path} - /> - - ); - } - -} diff --git a/front-end/src/components/CustomPort/CustomPortModel.js b/front-end/src/components/CustomPort/CustomPortModel.js deleted file mode 100644 index 1199224..0000000 --- a/front-end/src/components/CustomPort/CustomPortModel.js +++ /dev/null @@ -1,12 +0,0 @@ -import { DefaultPortModel } from '@projectstorm/react-diagrams'; -import { CustomLinkModel } from '../CustomLink/CustomLinkModel'; - -export class CustomPortModel extends DefaultPortModel { - createLinkModel() { - return new CustomLinkModel(); - } - - canLinkToPort(port) { - return port instanceof CustomPortModel; - } -} From e33115b9c8152390295c5964cfa13995b3ed483f Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 16:50:13 -0400 Subject: [PATCH 2/8] feat(ui): add API functions for edge handler endpoint --- front-end/src/API.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/front-end/src/API.js b/front-end/src/API.js index e75e5e6..04f8043 100644 --- a/front-end/src/API.js +++ b/front-end/src/API.js @@ -118,4 +118,33 @@ export async function uploadWorkflow(formData) { body: formData }; return fetchWrapper("/workflow/open", options); -} \ No newline at end of file +} + + +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} - 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} - server response + */ +export async function deleteEdge(link) { + return handleEdge(link, "DELETE"); +} From e5f3ce818331d251403b47f567d561fe4305e7d3 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 16:53:33 -0400 Subject: [PATCH 3/8] style: fix indentation --- front-end/src/components/VPLink/VPLinkFactory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front-end/src/components/VPLink/VPLinkFactory.js b/front-end/src/components/VPLink/VPLinkFactory.js index 84e4908..e9f9e62 100644 --- a/front-end/src/components/VPLink/VPLinkFactory.js +++ b/front-end/src/components/VPLink/VPLinkFactory.js @@ -4,6 +4,6 @@ import { DefaultLinkFactory } from '@projectstorm/react-diagrams'; export class VPLinkFactory extends DefaultLinkFactory { generateModel() { - return new VPLinkModel(); + return new VPLinkModel(); } } From 24b10750c671a2554a86be7a00a5afc4bc6f076d Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 16:54:08 -0400 Subject: [PATCH 4/8] fix(ui): prevent drag-and-drop callback on icons --- front-end/src/components/Workspace.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/front-end/src/components/Workspace.js b/front-end/src/components/Workspace.js index 2f7017f..b05e2bf 100644 --- a/front-end/src/components/Workspace.js +++ b/front-end/src/components/Workspace.js @@ -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); From 20a75459b989491a162dc26918954e5d3c12cdb9 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 16:55:36 -0400 Subject: [PATCH 5/8] refactor(ui): improve use of react-diagrams base classes --- front-end/src/components/VPPort/VPPortFactory.js | 11 ++++++----- front-end/src/components/VPPort/VPPortModel.js | 10 +++++++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/front-end/src/components/VPPort/VPPortFactory.js b/front-end/src/components/VPPort/VPPortFactory.js index e67210f..b844a77 100644 --- a/front-end/src/components/VPPort/VPPortFactory.js +++ b/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'; -export class VPPortFactory extends DefaultPortFactory { +export class VPPortFactory extends AbstractModelFactory { - getType() { - return "vp-port"; + constructor() { + super("vp-port"); } - generateModel(event) { + + generateModel() { return new VPPortModel({name: 'vp-port-name'}); } } diff --git a/front-end/src/components/VPPort/VPPortModel.js b/front-end/src/components/VPPort/VPPortModel.js index ca80e88..081395b 100644 --- a/front-end/src/components/VPPort/VPPortModel.js +++ b/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 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; } } From 5c7f81beaa9695e6ead82c2c9c198043565ff0f7 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 16:57:59 -0400 Subject: [PATCH 6/8] feat(ui): integrate link create/delete with server endpoints --- front-end/src/components/VPLink/VPLinkModel.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/front-end/src/components/VPLink/VPLinkModel.js b/front-end/src/components/VPLink/VPLinkModel.js index 309d77c..77d4863 100644 --- a/front-end/src/components/VPLink/VPLinkModel.js +++ b/front-end/src/components/VPLink/VPLinkModel.js @@ -1,4 +1,5 @@ import { DefaultLinkModel } from '@projectstorm/react-diagrams'; +import * as API from '../../API'; export class VPLinkModel extends DefaultLinkModel { constructor() { @@ -7,6 +8,11 @@ export class VPLinkModel extends DefaultLinkModel { width: 5, color: 'orange' }); + this.registerListener({ + targetPortChanged: event => { + API.addEdge(this).catch(() => {}); + }, + }) } getSVGPath() { @@ -25,11 +31,9 @@ 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(); + console.log("deleting link"); + API.deleteEdge(this) + .then(() => super.remove()) + .catch(() => {}); } } From 7aa7c66e46d67198e628ebd4c55e4027654078dd Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sat, 4 Apr 2020 17:01:56 -0400 Subject: [PATCH 7/8] refactor(ui): use default exports --- front-end/src/components/CustomNode/CustomNodeFactory.js | 6 +++--- front-end/src/components/CustomNode/CustomNodeModel.js | 4 ++-- front-end/src/components/CustomNode/CustomNodeWidget.js | 2 +- front-end/src/components/VPLink/VPLinkFactory.js | 4 ++-- front-end/src/components/VPLink/VPLinkModel.js | 2 +- front-end/src/components/VPLink/VPLinkWidget.js | 2 +- front-end/src/components/VPPort/VPPortFactory.js | 4 ++-- front-end/src/components/VPPort/VPPortModel.js | 4 ++-- front-end/src/components/Workspace.js | 8 ++++---- 9 files changed, 18 insertions(+), 18 deletions(-) diff --git a/front-end/src/components/CustomNode/CustomNodeFactory.js b/front-end/src/components/CustomNode/CustomNodeFactory.js index 30da6a8..a7a64eb 100644 --- a/front-end/src/components/CustomNode/CustomNodeFactory.js +++ b/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'); } diff --git a/front-end/src/components/CustomNode/CustomNodeModel.js b/front-end/src/components/CustomNode/CustomNodeModel.js index 3b84d5e..7403630 100644 --- a/front-end/src/components/CustomNode/CustomNodeModel.js +++ b/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({ diff --git a/front-end/src/components/CustomNode/CustomNodeWidget.js b/front-end/src/components/CustomNode/CustomNodeWidget.js index 0baeae0..b1e38d5 100644 --- a/front-end/src/components/CustomNode/CustomNodeWidget.js +++ b/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); diff --git a/front-end/src/components/VPLink/VPLinkFactory.js b/front-end/src/components/VPLink/VPLinkFactory.js index e9f9e62..8b493aa 100644 --- a/front-end/src/components/VPLink/VPLinkFactory.js +++ b/front-end/src/components/VPLink/VPLinkFactory.js @@ -1,7 +1,7 @@ -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(); diff --git a/front-end/src/components/VPLink/VPLinkModel.js b/front-end/src/components/VPLink/VPLinkModel.js index 77d4863..2db3a26 100644 --- a/front-end/src/components/VPLink/VPLinkModel.js +++ b/front-end/src/components/VPLink/VPLinkModel.js @@ -1,7 +1,7 @@ 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', diff --git a/front-end/src/components/VPLink/VPLinkWidget.js b/front-end/src/components/VPLink/VPLinkWidget.js index c58b599..f441160 100644 --- a/front-end/src/components/VPLink/VPLinkWidget.js +++ b/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 { } diff --git a/front-end/src/components/VPPort/VPPortFactory.js b/front-end/src/components/VPPort/VPPortFactory.js index b844a77..292a0c2 100644 --- a/front-end/src/components/VPPort/VPPortFactory.js +++ b/front-end/src/components/VPPort/VPPortFactory.js @@ -1,7 +1,7 @@ -import { VPPortModel } from './VPPortModel'; import { AbstractModelFactory } from '@projectstorm/react-canvas-core'; +import VPPortModel from './VPPortModel'; -export class VPPortFactory extends AbstractModelFactory { +export default class VPPortFactory extends AbstractModelFactory { constructor() { super("vp-port"); diff --git a/front-end/src/components/VPPort/VPPortModel.js b/front-end/src/components/VPPort/VPPortModel.js index 081395b..4c0897a 100644 --- a/front-end/src/components/VPPort/VPPortModel.js +++ b/front-end/src/components/VPPort/VPPortModel.js @@ -1,7 +1,7 @@ import { DefaultPortModel } from '@projectstorm/react-diagrams'; -import { VPLinkFactory } from '../VPLink/VPLinkFactory'; +import VPLinkFactory from '../VPLink/VPLinkFactory'; -export class VPPortModel extends DefaultPortModel { +export default class VPPortModel extends DefaultPortModel { createLinkModel() { const factory = new VPLinkFactory(); diff --git a/front-end/src/components/Workspace.js b/front-end/src/components/Workspace.js index b05e2bf..6a4924f 100644 --- a/front-end/src/components/Workspace.js +++ b/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'; From 7d343c92ea977d834fb22185c330193dc4bc81c4 Mon Sep 17 00:00:00 2001 From: Samir Reddigari Date: Sun, 5 Apr 2020 16:18:07 -0400 Subject: [PATCH 8/8] fix(ui): remove visual link before API call so it disappears --- front-end/src/components/VPLink/VPLinkModel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/front-end/src/components/VPLink/VPLinkModel.js b/front-end/src/components/VPLink/VPLinkModel.js index 2db3a26..a29e2bb 100644 --- a/front-end/src/components/VPLink/VPLinkModel.js +++ b/front-end/src/components/VPLink/VPLinkModel.js @@ -31,9 +31,8 @@ export default class VPLinkModel extends DefaultLinkModel { * TODO: Notify backend the link has been removed */ remove() { - console.log("deleting link"); + super.remove(); API.deleteEdge(this) - .then(() => super.remove()) .catch(() => {}); } }