Project on github

Frontend API

export class WorkflowComponent implements OnInit

UI Component that display the graph to the user and let her interact with it. It uses jointJS as the library to do this.

It uses a deep event handling in order to send the right messages to the server, using the FBP Network Protocol, at the right moment. Actually, most of the action are triggered by event handlers in this class.

On this component, a user can : - Move nodes - Remove nodes - Add edges - Remove edges - Connect edges to other nodes - Double-click a node to display its corresponding component

On the other side, the component reflect the Workflow data stored in the Workspace Service. So, for example, when the name of a node is changed, the displayed name change automatically on the graph. Also, when a user click on a node in the “flow-nodes-list-component”, a node is added on the chart.

This component uses a Graph-Controller that implements most of the methods used to interact with the graph itself. In this class are implemented most of the event handlers.

Created by antoine on 08/06/17.

ngOnInit()

Initialize the elements that display the paper (the element that will host the nodes and edges) and the elements needed to interact with the graph in the future.

private updateNodes ()

Update the set of nodes displayed on the graph. To do it, it retrieves the nodes from the most trusted source : the WorkspaceService and compare the displayed ones to the ones in the retrieved list. Then it update the content.

private updateEdges ()

Update the set of edges displayed on the graph. To do it, it retrieves the edges from the most trusted source : the WorkspaceService and compare the displayed ones to the ones in the retrieved list. Then it update the content.

edgeChanged (edge: Edge)

The given edge’s metadata change. Send its new metadata to the server.

nodeChanged (node: Node)

The given node’s metadata change. Send its new metadata to the server.

removedEdge (edge: Edge)

The user wants to remove the given edge from the workflow. Send this information to the server.

removedNode (node: Node)

The user wants to remove the given node from the workflow. Send this information to the server.

createEdge (e: Edge)

The user wants to create an edge with the given data. Send this information to the server. If it is possible, the server will respond with a graph:addedge message.

updateBlockName (node: Node)

Replace the name of the node with a new one.

emitCloseWindowEvent (node: Node)

Emit a ‘closewindow’ event on the eventHub in order to close the node’s detailed view.

createBlockForNode(node: Node)

Create a JointJS block for the given node.

handleDblClick(cell: any)

Handle the double click event from a jointjs cell by opening the node’s detailed view if the cell is a node.

setEventHub(hub: any)

Set the eventhub instance to use in order to communicate with the other components, and subscribe to the events useful for this component.

addGraphEventsListeners ()

Subscribe to the graph’s events useful in this component.

It subscribes to : - cell:pointdblclick

resize()

Resize the component’s window in the golden layout. This method is called each time the user change the window’s size or redimension the browser’s window.