BaseNodeComponent
The base class for components that will be rendered as Nodes . Your node components should extend this class. It offers several class members that provide the context for the vertex that this component represents.
@Component({
template:"<div>{{data.label}}</div>"
})
export class MyNodeComponent extends BaseNodeComponent {
}
Class members
data This is the backing data object for the vertex. Use this to access values.
$data() This is the backing data presented as a signal
zoom() This signal provides the current zoom of the canvas the node is rendered on. You can use this to selectively hide/show content based on zoom.
model The underlying VisuallyJsModel.
Extends
BaseVertexComponent<Node>
Extended by
Methods
addNewPort()
addNewPort(
type,data):void
Instructs the model to add a new port with the given data to the vertex this component represents. This will call the model's portFactory.
Parameters
type
string
data
ObjectData
Returns
void
Class Member
Inherited from
BaseVertexComponent.addNewPort
addPort()
addPort(
data):Port
Adds a port with the given data to the vertex this component represents.
Parameters
data
ObjectData
Returns
Port
Class Member
Inherited from
addToSelection()
addToSelection():
void
Adds the vertex this component represents to the current selection in the model.
Returns
void
Class Member
Inherited from
BaseVertexComponent.addToSelection
cloneNode()
cloneNode(
options?):void
Instructs the model to clone this node - a new node which is a copy of this one will be added to the UI, with a position shifted slightly in X and Y from the cloned node.
Parameters
options?
SurfaceVertexCloneOptions
Returns
void
Class Member
cloneVertex()
cloneVertex(
options?):void
Clones this vertex, optionally setting to a given position, or offsetting from the original, and optionally magnetizing the new vertex's position, and flashing it to show the user where it is.
Parameters
options?
SurfaceVertexCloneOptions
Returns
void
Class Member
Inherited from
BaseVertexComponent.cloneVertex
flashNode()
flashNode(
duration,animName?):void
Flash this Node
Parameters
duration
number
Optional; defaults to 1000ms. Duration of the animation in milliseconds.
animName?
string
Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.
Returns
void
Class Member
flashVertex()
flashVertex(
duration,animName?):void
Flash this vertex
Parameters
duration
number
Optional; defaults to 1000ms. Duration of the animation in milliseconds.
animName?
string
Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.
Returns
void
Inherited from
BaseVertexComponent.flashVertex
getNode()
getNode():
Node
Gets the node that this component represents.
Returns
Node
Class Member
getPort()
getPort(
portId):Port
Gets the port with the given ID
Parameters
portId
string
ID of the port to retrieve
Returns
Port
Class Member
getVertex()
getVertex():
Node
Gets the vertex that this component represents. Subclasses have getters that return more specific subclasses of Vertex.
Returns
Node
Class Member
Inherited from
removeFromSelection()
removeFromSelection():
void
Removes the vertex this component represents from the current selection in the model.
Returns
void
Class Member
Inherited from
BaseVertexComponent.removeFromSelection
removeNode()
removeNode():
void
Shortcut method to remove the node (and therefore this whole component)
Returns
void
Class Member
removePort()
removePort(
portId):void
Removes the port with the given id.
Parameters
portId
string
ID of the port to remove
Returns
void
Class Member
removeVertex()
removeVertex():
void
Removes the vertex this component represents from the data model, which will cause this component to be cleaned up.
Returns
void
Class Member
Inherited from
BaseVertexComponent.removeVertex
setAsSelection()
setAsSelection():
void
Sets the vertex this component represents as the current selection in the model.
Returns
void
Class Member
Inherited from
BaseVertexComponent.setAsSelection
updateNode()
updateNode(
data):void
Shortcut method to update the current data backing this node, for convenience.
Parameters
data
ObjectData
Data to update node with.
Returns
void
Class Member
updateVertex()
updateVertex(
data):void
Shortcut method to update the current data backing this vertex, for convenience.
Parameters
data
ObjectData
Returns
void
Class Member
Inherited from
BaseVertexComponent.updateVertex
Properties
$data
readonly$data:WritableSignal<ObjectData>
This signal represents the underlying data for the vertex this component represents.
Class Member
Inherited from
allSourceEdges
allSourceEdges:
WritableSignal<Edge[]>
This signal provides all of the edges for which this vertex or one of its ports is the source.
Inherited from
BaseVertexComponent.allSourceEdges
allTargetEdges
allTargetEdges:
WritableSignal<Edge[]>
This signal provides all of the edges for which this vertex or one of its ports is the target.
Inherited from
BaseVertexComponent.allTargetEdges
data
data:
ObjectData
Data object for the vertex
Class Member
Inherited from
sourceEdges
sourceEdges:
WritableSignal<Edge[]>
This signal provides all of the edges for which this vertex is the source. These are edges connected to the vertex, not to its ports.
Inherited from
BaseVertexComponent.sourceEdges
targetEdges
targetEdges:
WritableSignal<Edge[]>
This signal provides all of the edges for which this vertex is the target. These are edges connected to the vertex, not to its ports.
Inherited from
BaseVertexComponent.targetEdges
zoom
zoom:
WritableSignal<number>
This is a signal that provides the current zoom for the canvas the component is in. You can use this to selectively hide/show content based upon the zoom level.