This project provides a Web Component for viewing and editing flow-based programming graphs. It is a fork of the brilliant TheGraph library, ported to Polymer 1.x with special customization for use with Cubbles.
BDE Graph has the following dependencies:
- Polymer for providing various polyfills for emerging web technologies like custom elements and pointer events
- React for the "virtual DOM" to make SVG fast
- KLay Layered graph autolayout via KLayJS
Get dependencies:
npm i && bower i
BDE Graph is made up of several components that are bound at the root by the <bde-graph/> element.
TheGraphApp
TheGraphGraph
[TheGraphGroup]
[TheGraphEdge]
[TheGraphIIP]
[TheGraphNode]
[TheGraphPort] (inports)
[TheGraphPort] (outports)
[TheGraphNode] (ex-inports)
[TheGraphNode] (ex-outports)
TheGraphTooltip
TheGraphNodeMenu
[TheGraphNodeMenuPorts] (inports)
[TheGraphMenuPort]
[TheGraphNodeMenuPorts] (outports)
[TheGraphMenuPort]
TheGraphMenu
Wrapping elements omitted for better readability.
TheGraph initializes the application and provides some sugar functions.
contextPortSize Context menus
zbp(Big|Normal|Small) Zoom breakpoints
config An object containing various settings
factories The components factory functions
mixins An object referencing application global mixins (e.g. Tooltip)
findMinMax(graph, nodes) Find the bounds of the graph, returns { minX, minY, maxX, maxY }.
findFit(graph, width, height) Find pan and scale to fit all elements of the graph, returns { x, y, sacle }.
findAreaFit(point1, point2, width, height) Find pan and scale to fit all elements inside the point1, point2 bounds, returns { x, y, sacle }.
findNodeFit(node, width, height) Find pan and scale to fit the provided node. Requires current graph width and height, returns { x, y, sacle }.
merge(src, dest, overwrite) Merges two objects and returns the result.
getOffset(domNode) Returns unreliably the offset of the application on screen.
-
SVGImage -
TextBG
TheGraphApp will render as the outermost element in the DOM. It contains all other elements that are rendered on screen.
x, y, scale, width, height, offsetY Pan, scale, and position of the application on screen.
minZoom, maxZoom Zoom constraints.
tooltip, tooltipX, tooltipY. tooltipVisible Tooltip content and position.
showContext(options) Show the context menu. options defines the menu.
hideContext Hide the context menu.
changeTooltip(event) Show the tooltip at the position of the event.
hideTooltip Hide the tooltip.
triggerFit Fit the graph to all elements.
focusNode(node) Focus the graph to the given node.
unselectAll Clear edge and node selections.
renderGraph Mark the graph dirty for rendering.
renderCanvas Render the <canvas/> (the dotted background).
getContext(menu, options, hide) Return a context menu. The menu definition is done on the <bde-graph/> level.
render The React render method. Renders background, context menu, TheGraphGraph, and Tooltip.
edgeStart Hide context menu and trigger TheGraphGraph.edgeStart.
onTrack Handle track events on the graph. Change pan accordingly.
onPanScale Pass pan/scale events to <bde-graph/>
onShowContext(event) Show the context menu at the position of the event.
keyDown, keyUp Handle key events
TheGraphClipboard handles copy and paste in the application.
Methods:
copy(graph, keys) Copy the nodes specified in keys to the clipboard.
paste(graph) Paste the nodes from the clipboard.
TheGraphEdge represents all connections (edges) in the graph.
Properties:
sX, sY The start point of the edge.
tX, tY The end point of the edge.
selected, animated Wether or not the edge is currently selected and/or animated.
track -> dontPan Dont drag the edge when a menu is shown.
tap -> onEdgeSelection Call onEdgeSelection on <bde-graph/>.
contextmenu -> showContext Show the context menu at the position of the event.
TheGraphGraph will handle all interactions with the graph and render all containing elements to the screen.
displaySelectionGroup Wether to create a temporary group when selecting nodes.
edgePreview, edgePreviewX, edgePreviewY References the temporary edge that is shown while dragging a new connection.
forceSelection Wether to force-select nodes when interacting.
selectedNodes, errorNodes Arrays of selected or errored nodes.
selectedEdges, animatedEdges Arrays of selected or animated edges.
offsetX, offsetY The offset of the application on screen.
addEdge, changeEdge, removeEdge, removeInitial -> resetPortRoute Mark nodes with changed rotues for rerender.
changeNode, changeInport, changeOutport, endTransaction -> markDirty Mark the graph dirty for rerender.
TheGraphGroup handles the display of groups in the graph.
x, y, width, height Size and position of the group.
track -> onTrack Change to position of the group.
TheGraphIIP handles the display of initializers on nodes ports.
x, y The position of the initializer.
TheGraphMenu handles display and interaction of the menus. Menus can be defined in <bde-graph/> by assigning icon, label, and function to one of four quadrants; n4, s4, e4, w4 representing the position of the feature on the menu circle.
width, height The size of the menu.
getPosition Returns the current position of the menu.
tap -> onTapN4, onTapS4, onTapE4, onTapW4 Handles taps on the corresponding circle slice.
TheGraphNodeMenuPort handles display and interaction of a single port in the nodes menu.
x, y The position of the port.
up -> edgeStart Create a new edge when clicked or tapped on.
TheGraphNodeMenuPorts displays a list of ports in the node menu.
scale The current scale of the application.
ports An array of ports associated with the current node.
processKey The process id of the current node.
deltaX, deltaY The position of the group of ports.
TheGraphNodeMenu handles display and interaction of the node menu.
processKey The process id of the current node.
nodeWidth, nodeHeight The size of the current node.
TheGraphNode handles display and interaction with a single node.
x, y The position of the node.
icon, label, sublabel Icon and label of the node.
ports An array of ports for the node.
selected, error Flags for selected and error state.
track -> onTrack Handle dragging the node.
tap -> onNodeSelection Defer event to <bde-graph/>.
contextmenu -> showContext Trigger showContext in TheGraphApp.
getContext Create a new TheGraphMenu, TheGraphPorts, and TheGraphPort.
TheGraphPort handles display and interaction of the node ports.
label The name of the port.
isIn Wether the port is an input.
type The type of the port.
tap, track, the-graph-edge-drop -> edgeStart Start a preview edge.
track -> triggerDroponTarget Complete the preview edge.
contextmenu -> showContext Display the port menu.
TheGraphTooltip displays various tooltips.
label The content of the tooltip.
visible Wether the tooltip is visible.
noflo-cubbles is a customized and stripped down version of noflo containing only the necessary parts for displaying a graph.
EventEmitter
setMaxListeners Set the maximum number of listeners for an event. Default: 10
addListener(type, listener) Add a listener to an event.
emit(type, data*) Emit an event
on(type, listener) Alias of addListener.
once(type, listener) Add a listener that is only fired once.
removeListener(type, listener) Remove a specific listener from the stack.
removeAllListeners(type) Remove all listeners for a specific event.
listeners(type) Return all registered listeners for an event.
listenerCount(type) Return the number of registered listeners for an event.
Graph
Graph will emit an event for every altering method called.
name (String) The name of the current graph.
properties An object of properties. Currently only caseSensitive is supported.
nodes Array of nodes.
edges Array of edges.
initializers Array of initializers.
inports Key-Value-Map of inports.
outports Key-Value-Map of outports.
groups Array of groups.
transaction The currently running transaction.
caseSensitive Flag wether to be case sensitive when handling names.
Graph(name, properties) Class constructor
getPortName(port) Return the lowercased name of a port, if not case sensitive.
startTransaction(id, metadata) Start a new transaction.
endTransaction(id, metadata) End a transaction.
checkTransactionStart Start an implicit transaction.
checkTransactionEnd End an implicit transaction.
setProperties(properties) Set the properties object.
addInport(publicPort, type, metadata) Add an inport.
removeInport(publicPort) Remove an inport.
renameInport(oldPort, newPort) Rename an inport.
setInportMetadata(publicPort, metadata) Set an inports metadata. {x, y, width, heigth}
addOutport(publicPort, type, metadata) Add an outport.
removeOutport(publicPort) Remove an outport.
renameOutport(oldPort, newPort) Rename an outport.
setOutportMetadata(publicPort, metadata) Set an outports metadata. {x, y, width, heigth}
addGroup(group, nodes, metadata) Add a group.
renameGroup(oldName, newName) Rename a group.
removeGroup(groupName) Remove a group. This will not remove nodes.
setGroupMetadata(groupName, metadata) Set a groups metadata.
addNode(id, component, metadata) Add a node.
removeNode(id) Remove a node. Also removes affected edges.
getNode(id) Return the node with the given id.
renameNode(oldId, newId) Rename a node. Also changes affected edges.
setNodeMetadata(id, metadata) Set a nodes metadata.
addEdge(outNode, outPort, inNode, inPort, metadata) Add an edge.
removeEdge(node, port, node2, port2) Remove an edge.
getEdge(node, port, node2, port2) Return an edge for the given nodes.
setEdgeMetadata(node, port, node2, port2, metadata) Set an edges metadata.
addInitial(data, node, port, metadata) Add an IIP.
removeInitial(node, port) Remove an IIP.
This module convertes cubble graphs to KGraphs for use with the klayjs autolayouter.
init(params) Initializes the autolayouter.
layout(params) Get the layouted graph.
cubblesToKieler(graph, portInfo, direction) Convert the cubbles graph to a KGraph. PortInfo is a key-value-map of node-port information. Direction is a string "RIGHT|DOWN" selecting how the resulting graph will be layed out.