Rendering (internals)

The Grapheditor uses an instance of each of the renderers for nodes, edges and common features to render the content into the svg. Overriding these renderers allows for greater customization of the looks and behaviour. This comes at the cost of increased complexity and additional maintanance costs because of a possibly unstable API of the renderers.

Warning

Use these only if customization using other means is not possible or sufficient!

class NodeRenderer(graph, cache)

Class handling the rendering of nodes to the svg dom.

This class is only used internally in the grapheditor. The methods of this class should not be called by user code directly!

Create a new instance of a node renderer.

Arguments:

  • graph (default) –

  • cache (GraphObjectCache) –

Returns:

NodeRenderer –

NodeRenderer.graph

type: WeakRef<default>

NodeRenderer.objectCache

type: GraphObjectCache

NodeRenderer.completeNodeGroupsRender(nodesGroup, nodes, forceUpdateTemplates=false)

Render a full node update for all nodes.

Arguments:

  • nodesGroup (Selection<SVGGElement, unknown, any, unknown>) –

  • nodes (Node[]) –

  • forceUpdateTemplates (boolean) –

NodeRenderer.derefGraph()

Safely deref the grapheditor weak reference.

Returns:

default –

NodeRenderer.getGroupDictatedPositionOfNode(node)

Get the position the group dictates for this node.

If the node is not in a group or has no fixed position in that group this method returns null.

Arguments:
Returns:

Point –

NodeRenderer.getNodeLinkDragBehaviour(event, node)

Get a ‘link’ drag behaviour for a node.

Behaves the same as dragging a link handle of a node. Is also used to implement the link handle drag behaviour.

Arguments:

  • event (D3DragEvent<SVGGElement, unknown, NodeDragBehaviour<unknown>>) –

  • node (Node) –

Returns:

NodeDragBehaviour<{capturingGroup: string, edge: DraggedEdge}> –

NodeRenderer.getNodeMoveDragBehaviour(event, node)

Get a ‘move’ drag behaviour for a node.

Moves the node with the drag pointer.

Arguments:

  • event (D3DragEvent<SVGGElement, Node, NodeDragBehaviour<unknown>>) –

  • node (Node) –

Returns:

NodeDragBehaviour<NodeMovementInformation> –

NodeRenderer.getNodeMovementInformation(node, x, y)

Get the movement information for moving a Node.

The calculated movement information contains the actual node to move, the start offset and all affected nodes. The actual node to move may be a (indirect) parent of the given node. If the group that captured the movement of the given node has no node a dummy node is used instead to track the movement.

This method calls onBeforeNodeMove with the node movement information.

Arguments:

  • node (Node) –

  • x (number) –

  • y (number) –

Returns:

NodeMovementInformation –

NodeRenderer.moveNodeInternal(nodeMovementInfo, x, y, eventSource)

Move a node to the desired point (x,y).

If the node has a fixed position dictated by its group it will not be moved from that position! If the nodeMovementInfo contains children every child will be moved the same offset as the node. Group dictated positions are not checked for these children!

Arguments:
Returns:

boolean –

NodeRenderer.onNodeDrag(eventType, movementInfo, eventSource)

Create and dispatch ‘nodedragstart’ and ‘nodedragend’ events.

Arguments:
NodeRenderer.onNodePositionChange(node, eventSource=EventSource.USER_INTERACTION)

Callback for creating nodepositionchange events.

Arguments:

  • node (Node) –

  • eventSource (EventSource) –

NodeRenderer.tryJoinNodeIntoGroup(nodeMovementInformation, x, y, eventSource, sourceEvent)

Try for the given node to join a group if it moves to the point (x, y).

This method checks if the node can join a group when it moves to the given coordinates. If the node can join a group it is added to the group.

The node will join in the same tree as the group it joined. If the group it joined was not part of a tree it is marked as a tree root. If the joining node was a tree root it will no longer be a tree root as it is joined to the parent tree.

Arguments:

  • nodeMovementInformation (NodeMovementInformation) –

  • x (number) –

  • y (number) –

  • eventSource (EventSource) –

  • sourceEvent (Event) –

Returns:

boolean –

NodeRenderer.tryToLeaveCurrentGroup(nodeMovementInformation, x, y, eventSource, sourceEvent)

Try for the given node to leave its group if it moves to the point (x, y).

This method checks if the node can leave its group when it moves to the given coordinates. If the node can leave the group then the node is removed from the group.

Arguments:

  • nodeMovementInformation (NodeMovementInformation) –

  • x (number) –

  • y (number) –

  • eventSource (EventSource) –

  • sourceEvent (Event) –

Returns:

boolean –

NodeRenderer.updateNodeClasses(nodeSelection, classesToRemove=...)

Update node classes.

Arguments:

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

  • classesToRemove (Set<string>) –

NodeRenderer.updateNodeDropAreas(nodeSelection)

Update node drop zones.

Arguments:

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

NodeRenderer.updateNodeHighligts(nodeSelection, hovered, linkSource, linkTarget)

Calculate highlighted nodes and update their classes.

Arguments:

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

  • hovered (Set<string|number>) –

  • linkSource (string|number) –

  • linkTarget (string|number) –

NodeRenderer.updateNodePositions(nodeSelection)

Update node positions.

Arguments:

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

NodeRenderer.updateNodeText(nodeSelection, force=false)

Update text of existing nodes.

Arguments:

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

  • force (boolean) –

NodeRenderer.updateNodes(nodeSelection)

Update existing nodes.

Arguments:

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

class EdgeRenderer(graph, cache)

Class handling the rendering of edges to the svg dom.

This class is only used internally in the grapheditor. The methods of this class should not be called by user code directly!

Create a new instance of a edge renderer.

Arguments:

  • graph (default) –

  • cache (GraphObjectCache) –

Returns:

EdgeRenderer –

EdgeRenderer.graph

type: WeakRef<default>

EdgeRenderer.objectCache

type: GraphObjectCache

EdgeRenderer.calculateAbsolutePositionOnLine(pathLength, positionOnLine, absolutePositionOnLine)

Calculate the safe absolutePositionOnLine value for the given path length.

If absolutePositidragHandlesonOnLine is negative it is counted from the end of the path. If absolutePositidragHandlesonOnLine exceeds the path length positionOnLine will be used as fallback.

Arguments:

  • pathLength (number) –

  • positionOnLine (number) –

  • absolutePositionOnLine (number) –

Returns:

number –

EdgeRenderer.calculateLineAttachementVector(startingAngle, markerSelection, strokeWidth)

Calculate the attachement vector for a marker.

Arguments:

  • startingAngle (number|RotationVector) –

  • markerSelection (Selection<SVGGElement, Marker, any, unknown>) –

  • strokeWidth (number) –

Returns:

RotationVector –

EdgeRenderer.calculatePathNormalAtPosition(path, absolutePositionOnLine, point, length)

Calculate a normal vector pointing in the direction of the path at the positonOnLine.

Arguments:

  • path (SVGPathElement) –

  • absolutePositionOnLine (number) –

  • point (DOMPoint) –

  • length (number) –

Returns:

RotationVector –

EdgeRenderer.calculatePathObjectTransformation(point, pathObject, strokeWidth, normal)

Calculate the transformation attribute for a path object placed on an edge.

Arguments:
Returns:

string –

EdgeRenderer.completeEdgeGroupsRender(edgesGroup, edges, forceUpdateTemplates=false)

Render a full update for all edges.

Arguments:

  • edgesGroup (Selection<SVGGElement, unknown, any, unknown>) –

  • edges (Edge[]) –

  • forceUpdateTemplates (boolean) –

EdgeRenderer.createDraggedEdge(event, sourceNode)

Create a new dragged edge from a source node.

Arguments:

  • event (Event) –

  • sourceNode (Node) –

Returns:

DraggedEdge –

EdgeRenderer.createDraggedEdgeFromExistingEdge(event, edge, reverseEdgeDirection=false)

Create a dragged edge from an existing edge.

Arguments:

  • event (Event) –

  • edge (Edge) –

  • reverseEdgeDirection (boolean) –

Returns:

DraggedEdge –

EdgeRenderer.derefGraph()

Safely deref the grapheditor weak reference.

Returns:

default –

EdgeRenderer.dropDraggedEdge(event, edge, isReversedEdge)

Drop dragged edge.

Arguments:

  • event (Event) –

  • edge (DraggedEdge) –

  • isReversedEdge (boolean) –

EdgeRenderer.onEdgeClick(event, edgeDatum)

Callback on edges for click event.

Arguments:

  • event (Event) –

  • edgeDatum (any) –

EdgeRenderer.onEdgeTextDrag(eventType, textComponent, edge, eventSource)

Create and dispatch ‘edgetextdragstart’ and ‘edgetextdragend’ events.

Arguments:

  • eventType ("start"|"end") –

  • textComponent (TextComponent) –

  • edge (Edge) –

  • eventSource (any) –

EdgeRenderer.onEdgeTextPositionChange(textComponent, edge)

Callback for creating edgetextpositionchange events.

Arguments:
EdgeRenderer.parseStrokeWidth(singlePathSelection)

Get the current stroke width of a path.

Arguments:

  • singlePathSelection (Selection<SVGPathElement, unknown, any, unknown>) –

Returns:

number –

EdgeRenderer.updateDraggedEdge(event, edge, capturingGroup)

Update dragged edge on drag event.

Arguments:

  • event (Event) –

  • edge (DraggedEdge) –

  • capturingGroup (string) –

EdgeRenderer.updateDraggedEdgeGroups()

Update draggededge groups.

EdgeRenderer.updateEdgeGroup(edgeGroupSelection, d)

Update markers and path attributes.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • d (Edge) –

EdgeRenderer.updateEdgeGroupClasses(edgeGroupSelection, classesToRemove=...)

Update classes of edgeGroups

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • classesToRemove (Set<string>) –

EdgeRenderer.updateEdgeGroups(edgeGroupSelection)

Update edge groups.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

EdgeRenderer.updateEdgeHighligts(edgeSelection, hovered, linkSource, linkTarget)

Calculate highlighted edges and update their classes.

Arguments:

  • edgeSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • hovered (Set<string|number>) –

  • linkSource (string|number) –

  • linkTarget (string|number) –

EdgeRenderer.updateEdgeLinkHandles(edgeSelection)

Calculate the link handles for each edge and store them into the edge.

Arguments:

  • edgeSelection (Selection<SVGPathElement, Edge|DraggedEdge, any, unknown>) –

EdgeRenderer.updateEdgePath(edgeSelection)

Update existing edge path.

Arguments:

  • edgeSelection (Selection<SVGPathElement, Edge, any, unknown>) –

EdgeRenderer.updateEdgePositions(edgeGroupSelection)

Update edge path and marker positions.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

EdgeRenderer.updateEdgeText(edgeGroupSelection, d, force=false)

Update all edge texts in a edge group.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • d (Edge) –

  • force (boolean) –

EdgeRenderer.updateEdgeTextPositions(edgeGroupSelection, d)

Update all edge text positions in a edge group.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • d (Edge) –

EdgeRenderer.updateEndMarker(edgeGroupSelection, marker, markerClass, edge)

Update a specific edge end marker (either start or end marker).

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • marker (Marker) –

  • markerClass (string) –

  • edge (Edge) –

EdgeRenderer.updateEndMarkerPosition(path, length, positionOnLine, marker, handle, markerClass, strokeWidth, edgeGroupSelection)

Update a single end marker position (either start or end marker).

Arguments:

  • path (Selection<SVGPathElement, Edge, any, unknown>) –

  • length (number) –

  • positionOnLine (number) –

  • marker (Marker) –

  • handle (LinkHandle) –

  • markerClass (string) –

  • strokeWidth (number) –

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

EdgeRenderer.updateEndMarkerPositions(edgeGroupSelection, d)

Update positions of edge-end and edge-start marker.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • d (Edge) –

EdgeRenderer.updateEndMarkers(edgeGroupSelection, d)

Update edge-end and edge-start marker.

Arguments:

  • edgeGroupSelection (Selection<SVGGElement, Edge, any, unknown>) –

  • d (Edge) –

EdgeRenderer.updateMarker(markerSelection, edge)

Update existing edge marker.

Arguments:

  • markerSelection (Selection<SVGGElement, Marker, any, unknown>) –

  • edge (Edge) –

EdgeRenderer.updateMarkerPositions(markerSelection)

Update all edge marker positions

Arguments:

  • markerSelection (Selection<SVGGElement, Marker, any, unknown>) –

class ExtrasRenderer(graph)

Class to render features found in nodes and in edges.

Arguments:

  • graph (default) –

Returns:

ExtrasRenderer –

ExtrasRenderer.graph

type: WeakRef<default>

ExtrasRenderer.updatableAttributes

type: string[]

List of dynamically updatable attributes.

ExtrasRenderer.derefGraph()

Safely deref the grapheditor weak reference.

Returns:

default –

ExtrasRenderer.updateContentTemplate(element, templateId, templateType, dynamic=false, parent)

Update the content template of a SVGGElement to the new template id.

If the SVGGElement already uses the template the content is not touched.

Arguments:

  • element (Selection<SVGGElement, T, any, unknown>) –

  • templateId (string) –

  • templateType (string) –

  • dynamic (boolean) –

  • parent (Node|Edge) –

ExtrasRenderer.updateDynamicMarkerContentTemplate(templateId, element, parent)

Update a marker (edge marker or link handle) group with the corresponding template.

Arguments:

  • templateId (string) –

  • element (Selection<SVGGElement, LinkHandle|Marker, any, unknown>) –

  • parent (Node|Edge) –

ExtrasRenderer.updateDynamicNodeContentTemplate(templateId, element)

Update a node group with the corresponding template.

Arguments:

  • templateId (string) –

  • element (Selection<SVGGElement, Node, any, unknown>) –

ExtrasRenderer.updateDynamicProperties(groupSelection)

Update non text elements of existing nodes or edges.

Arguments:

  • groupSelection (Selection<SVGGElement, Node|Edge, any, unknown>) –

ExtrasRenderer.updateDynamicTextComponentContentTemplate(templateId, element, parent)

Update a text component group with the corresponding template.

Arguments:

  • templateId (string) –

  • element (Selection<SVGGElement, TextComponent, any, unknown>) –

  • parent (Node|Edge) –

ExtrasRenderer.updateStaticContentTemplate(element, templateId, templateType)

Update the static content template of a SVGGElement to the new template id.

If the SVGGElement already uses the template the content is not touched.

Arguments:

  • element (Selection<SVGGElement, T, any, unknown>) –

  • templateId (string) –

  • templateType (string) –