GraphEditor

class GraphEditor()

Extends:

HTMLElement()

Returns:: default –

GraphEditor.backgroundDragInteraction: type: “none”|”select”|”move”|”zoom”|”custom”

GraphEditor.calculateLinkHandlesForEdge

type: (edge: Edge|DraggedEdge, sourceHandles: LinkHandle[], source: Node, targetHandles: LinkHandle[], target: Point|Node) => {sourceHandles: LinkHandle[], targetHandles: LinkHandle[]}

Callback to calculate LinkHandle lists used for rendering edges.

This will NOT affect displayed link handles of nodes!

Use this callback to customize where an edge attaches to a node. If more than one link handle is in the result list the nearest one will be used. If the list is empty or null then the LinkHandles of the template will be used.

GraphEditor.classes: type: string[]

GraphEditor.currentViewWindow: type: Rect

GraphEditor.currentZoomTransform: type: ZoomTransform

GraphEditor.defaultEdgePathGenerator: type: EdgePathGenerator

GraphEditor.draggedEdgeList: type: DraggedEdge[]

GraphEditor.dynamicTemplateRegistry

type: DynymicTemplateRegistry

The dynamic template registry of this graph.

The dynamic template registry does not get cleared automatically when the other templates get updated!

GraphEditor.edgeDragInteraction: type: “none”|”link”

GraphEditor.edgeList: type: Edge[]

GraphEditor.edgePathGeneratorRegistry

type: EdgePathGeneratorRegistry

The edge path generator registry of this graph.

The registry does not get cleared automatically when the other templates get updated!

GraphEditor.edgeRenderer

type: EdgeRenderer

Renderer for edge specific rendering functionality.

Do not call methods from this object directly!

Do not replace this object!

GraphEditor.extrasRenderer

type: ExtrasRenderer

Renderer for common rendering functionality found in nodes and edges.

Do not call methods from this object directly!

Do not replace this object!

GraphEditor.groupingManager

type: GroupingManager

Object responsible for managing node groups and group behaviours.

Do not replace this object!

GraphEditor.nodeClickInteraction: type: “none”|”select”|”link”

GraphEditor.nodeDragInteraction: type: “none”|”link”|”move”

GraphEditor.nodeList: type: Node[]

GraphEditor.nodeRenderer

type: NodeRenderer

Renderer for node specific rendering functionality.

Do not call methods from this object directly!

Do not replace this object!

GraphEditor.onBeforeCompleteRender

type: (eventSource: EventSource) => void

Callback before the graph is updated by the completeRender method.

Use this callback to reorder nodeList or edgeList to change which node/edge gets drawn above which node/edge. See also GroupingManager.getGroupDepthOf .

GraphEditor.onBeforeNodeMove

type: (nodeMovementInfo: NodeMovementInformation) => NodeMovementInformation

Callback before a Node is moved.

Use this callback to manipulate the provided movement information. The callback must return the modified movement information. If the callback returns null the node movement is cancelled.

GraphEditor.onCreateDraggedEdge

type: (edge: DraggedEdge) => DraggedEdge

Callback when a new dragged edge is created.

Use this callback only to customize the edge attributes like markers or type! The callback must return the modified edge. If the callback returns null the drag is cancelled.

GraphEditor.onDraggedEdgeTargetChange

type: (edge: DraggedEdge, sourceNode: Node, targetNode: Node) => void

Callback dragged edge has a new target.

Only modify the existing edge!

GraphEditor.onDropDraggedEdge

type: (edge: DraggedEdge, sourceNode: Node, targetNode: Node) => Edge

Callback when a existing dragged edge is dropped.

Use this callback only to customize the edge attributes like markers or type! The callback must return the modified edge. The returned edge must not be null !

GraphEditor.selected: type: Set<string>

GraphEditor.selectionMode: type: “none”|”single”|”multiple”

GraphEditor.setEdgeClass

type: (className: string, edge: Edge|DraggedEdge, sourceNode: Node, targetNode: Node) => boolean

Callback to set/unset a given class for an edge.

The callback will be called for each class defined in classes for each edge.

GraphEditor.setNodeClass

type: (className: string, node: Node) => boolean

Callback to set/unset a given class for a node.

The callback will be called for each class defined in classes for each node.

GraphEditor.staticTemplateRegistry

type: StaticTemplateRegistry

The static template registry.

The templates will be automatically loaded when the svg changes or updateTemplates gets called.

GraphEditor.zoomMode: type: “none”|”manual”|”automatic”|”both”

GraphEditor.addDefaultTemplates(svg)

Add missing default templates to the defs tag.

This method will be automatically called if the svg changes. If templates are changed call this method and make a completeRender(true) to render the graph with the new templates.

Arguments:

svg (Selection<SVGSVGElement, any, any, any>) –

GraphEditor.addEdge(edge, redraw=false, eventSource=EventSource.API)

Add a single edge to the graph.

Arguments:

edge (Edge) –
redraw (boolean) –
eventSource (EventSource) –

Returns:

boolean –

GraphEditor.addNode(node, redraw=false)

Add a single node to the graph.

Arguments:

node (Node) –
redraw (boolean) –

GraphEditor.changeSelected(selected, updateHighlights=false)

Completely replace the current node selection.

Use an empty set or null to clear the current selection.

This method will cause a ‘selection’ event if the selection has changed. This method does not check if the node id’s in the set exist. If selection mode is ‘single’ th given set must only contain one node! This method returns silently if the selection mode is none.

Arguments:

selected (Set<string>) –
updateHighlights (boolean) –

GraphEditor.completeRender(forceUpdateTemplates=false, eventSource=EventSource.API)

Render all changes of the data to the graph.

Arguments:

forceUpdateTemplates (boolean) –
eventSource (EventSource) –

GraphEditor.deselectNode(nodeId, updateHighlights=false)

Remove a node from the selected set.

This method will cause a ‘selection’ event if the selection has changed. This method does not check if the nodeId exists. This method returns silently if the selection mode is none.

To update the graph the updateHighlights method is used iff updateHighlights is true .

Arguments:

nodeId (string|number) –
updateHighlights (boolean) –

GraphEditor.getClientPointFromGraphCoordinates(graphPoint)

Convert from graph coordinates to screen coordinates.

This method can be useful together with getNodesFromPoint.

Most events already contain screen/client coordinates! Only use this method if no scren/client coordinates are available.

Arguments:

graphPoint (Point) –

Returns:

Point –

GraphEditor.getDraggedEdgeSelection()

Get the dragged edge selection with bound data.

Returns:: Selection<SVGGElement, DraggedEdge, any, unknown> –

GraphEditor.getEdge(edgeId)

Get the edge with the given id.

Arguments:

edgeId (string|number) –

Returns:

Edge –

GraphEditor.getEdgeSelection()

Get the edge selection with bound data.

Returns:: Selection<SVGGElement, Edge, any, unknown> –

GraphEditor.getEdgesBySource(sourceNodeId)

Get all edges that have the given nodeId as source.

Arguments:

sourceNodeId (string|number) –

Returns:

Set<Edge> –

GraphEditor.getEdgesByTarget(targetNodeId)

Get all edges that have the given nodeId as target.

Arguments:

targetNodeId (string|number) –

Returns:

Set<Edge> –

GraphEditor.getEdgesGroup()

Get the d3 selection of the SVG g element containing all edge groups.

Returns:: Selection<SVGGElement, any, any, any> –

GraphEditor.getGraphGroup()

Get the d3 selection of the SVG g element containing the graph.

Returns:: Selection<SVGGElement, any, any, any> –

GraphEditor.getGraphPointFromClientCoordinates(clientPoint)

Convert from screen coordinates to graph coordinates.

Inverse operation of getClientPointFromGraphCoordinates .

Arguments:

clientPoint (Point) –

Returns:

Point –

GraphEditor.getNode(nodeId)

Get the node with the given id.

Arguments:

nodeId (string|number) –

Returns:

Node –

GraphEditor.getNodeBBox(node)

Get the bounding box of a node.

The box is relative to the node. Add node.x and node.y to the x and y coordinates of the box to get a box at the correct coordinates.

The bounding box is only available/updated after the node was rendered to the graph!

The bounding box includes all displayed elements in the node group. This especially includes the link handles not hidden with disply: none !

Do not change the returned object directly!

Arguments:

node (string|number|Node) –

Returns:

Rect –

GraphEditor.getNodeDropZonesForNode(node)

Get all declared NodeDropZones of a node.

Arguments:

node (string|number|Node) –

Returns:

Map<string, NodeDropZone> –

GraphEditor.getNodeSelection()

Get the node selection with bound data.

Returns:: Selection<SVGGElement, Node, any, unknown> –

GraphEditor.getNodesFromPoint(clientX, clientY)

Get all nodes that are under the given screen/client coordinates.

Use getClientPointFromGraphCoordinates to convert from graph coordinates to client coordinates.

Arguments:

clientX (number) –
clientY (number) –

Returns:

Node[] –

GraphEditor.getNodesGroup()

Get the d3 selection of the SVG g element containing all node groups.

Returns:: Selection<SVGGElement, any, any, any> –

GraphEditor.getSVG()

Get the d3 selection of the current SVG used by this grapheditor.

Returns:: Selection<SVGSVGElement, any, any, any> –

GraphEditor.getSingleEdgeSelection(edgeId)

Get a single edge selection with bound datum.

Arguments:

edgeId (string) –

Returns:

Selection<SVGGElement, Edge, any, unknown> –

GraphEditor.initialize(svg)

Initialize the provided svg.

Setup group for zooming and groups for nodes and edges. Add a missing defs tag.

Arguments:

svg (SVGSVGElement) –

GraphEditor.isEdgeCurrentlyDragged(edgeId)

Check if an edge is currently dragged by the user.

Arguments:

edgeId (string|number) –

Returns:

boolean –

GraphEditor.moveNode(nodeId, x, y, updatePositions=false)

Move a node to the coordinates (x,y).

This method handles cases where a group captures the movement of a child node correctly. This method also handles all group-join and -leave mechanics like for dragging nodes manually.

For batch updates updatePositions is set to false. Be aware that nodeDropPositions are only updated if the graph is rerendered! This is only relevant for adding/removing dropZones or chainging their filters.

If this method returns true a complete render might be neccessary to correctly display all changes!

Arguments:

nodeId (string|number) –
x (number) –
y (number) –
updatePositions (boolean) –

Returns:

boolean –

GraphEditor.reloadSvgTemplate()

Reload the svg template.

Use this method to manually load the svg template if the template is defined later in the dom than the grapheditor.

GraphEditor.removeEdge(edge, redraw=false, eventSource=EventSource.API)

Remove a single edge from the graph.

Arguments:

edge (string|number|Edge) –
redraw (boolean) –
eventSource (EventSource) –

Returns:

boolean –

GraphEditor.removeNode(node, redraw=false)

Remove a single node from the graph.

This method removes all edges connected to this node from the graph. This method deselects the node before removing it.

Arguments:

node (string|number|Node) –
redraw (boolean) –

GraphEditor.selectNode(nodeId, updateHighlights=false)

Add a node to the selected set.

This method will cause a ‘selection’ event if the selection has changed. This method does not check if the nodeId exists. If the selection mode is single this method ensures that only the passed node is selected. This method returns silently if the selection mode is none.

To update the graph the updateHighlights method is used iff updateHighlights is true .

Arguments:

nodeId (string|number) –
updateHighlights (boolean) –

GraphEditor.setEdges(edges, redraw=false)

Set edges and redraw graph.

The edge list should not be updated outside the graph without calling setEdges again! Use addEdge and removeEdge to update the list instead.

Arguments:

edges (Edge[]) –
redraw (boolean) –

GraphEditor.setNodes(nodes, redraw=false)

Set nodes and redraw graph.

The node list should not be updated outside the graph without calling setNodes again! Use addNode and removeNode to update the list instead.

Arguments:

nodes (Node[]) –
redraw (boolean) –

GraphEditor.setZoomMode(mode)

Set the graph zoom mode.

Arguments:

mode (string) –

GraphEditor.transformBBox(bbox, transformation)

Apply a transformation to a bbox.

Arguments:

bbox (Rect) –
transformation (DOMMatrix) –

Returns:

Rect –

GraphEditor.updateGraphPositions(eventSource=EventSource.API)

Update all node positions and edge paths.

Arguments:

eventSource (EventSource) –

GraphEditor.updateHighlights()

Update Node and Edge highlights to match the current selection state and hovered state.

This should be called after manually changing the selection.

GraphEditor.updateNodeClasses(nodeSelection)

Update node classes.

Arguments:

nodeSelection (Selection<SVGGElement, Node, any, unknown>) –

GraphEditor.updateTemplates(svg)

Update the template cache from the provided svg or the current svg.

This method will add missing default and default-marker templates before updating the template cache. It will also add a default-textcomponent template and a default EdgePathGenerator to the respective registrys.

Arguments:

svg (Selection<SVGSVGElement, any, any, any>) –

GraphEditor.updateTextElements(force=false)

Updates and reflows all text elements in nodes and edges.

Arguments:

force (boolean) –

GraphEditor.zoomToBoundingBox(force=true)

Zooms and pans the graph to get all content inside the visible area.

Arguments:

force (boolean) –

GraphEditor.zoomToBox(box, padding=0.1)

Zoom to the given box.

The box will be centered in the view with some padding around.

Arguments:

box (Rect) –
padding (number) –