DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG
Show:

jsPlumbToolkit.Renderers.AbstractRenderer Class

Superclass for renderers

Constructor

jsPlumbToolkit.Renderers.AbstractRenderer

(
  • params
)

Parameters:

  • params Object

    Constructor parameters.

    • [view] Object optional

      Parameters for Node, Port and Edge definitions. Although this is not a required parameter, the vast majority of applications will

    • [elementsDraggable=true] Boolean optional

      Whether or not elements should be made draggable.

    • [elementsDroppable=false] Boolean optional

      If true, elements can be dragged onto other elements and events will be fired. What you choose to do with that event is up to you.

    • [id] String optional

      Optional id for this renderer. If you provide this you can then subsequently retrieve it via toolkit.getRenderer(<id>).

    • [refreshAutomatically=true] Boolean optional

      Whether or not to automatically refresh the associated layout whenever a Node is added or deleted.

    • [enhancedView=true] Boolean optional

      If false, there will be no support for preconfigured parameters or functions in the definitions inside a view. You will want to set this for Angular if you use the 2-way data binding.

    • [assignPosse] Function optional

      optional function that, given each node, can return the id of the posse to which the node belongs. a Posse is a group of nodes that should all be dragged together.

    • [modelLeftAttribute="left"] String optional

      Optional; specifies the name of the attribute by which to store the x position of a dragged node of storePositionsInModel is true.

    • [modelTopAttribute="top"] String optional

      Optional; specifies the name of the attribute by which to store the y position of a dragged node of storePositionsInModel is true.

    • [debug=false] Boolean optional

      If true, the widget will generate debug information when various events occur.

    • [refreshLayoutOnEdgeConnect=false] Boolean optional

      If true, the layout will be refreshed each time a new edge is established. This used to be the default behaviour of the Surface widget but it now seems unnecessary. We've moved the behaviour to a flag in case anyone experiences issues with the UI not updating correctly after a new edge is added.

    • [objectFilter] Function optional

      Optional function that is given every Node or Group that is added, and is expected to return true if the Node/Group should be rendererm or false if it should be ignored.

    • [ignoreGroups=false] Boolean optional

      With this set to true, groups will not be rendered, and nodes that are inside groups will be rendered directly to the canvas as if they are not inside a group. Using this in conjunction with a suitable objectFilter gives you the ability to create a renderer for a single group.

Methods

activateState

(
  • stateId
  • [target]
)

Activates the UI state with the given ID on the objects contained in the given target. If target is not supplied, the state is activated against the entire dataset.

Parameters:

  • stateId String

    ID of the state to activate. States are defined inside a states member of your view definition.

  • [target] Selection | Path | JsPlumbToolkitInstance | Element optional

    Set of objects to activate the state on. If null, the entire dataset (Nodes, Edges and Ports) is used. If you provide an Element here, a Selection is created that consists of the Node representing the element, plus all Edges to and from the given Node.

addToPosse

(
  • obj
  • posse
  • [active=true]
)

Add the given Node to the posse with the given name

Parameters:

  • obj Element | String | Node

    A DOM element representing a Node, or a Node id, or a Node.

  • posse String

    ID of the posse to add the Node to.

  • [active=true] Boolean optional

    If true (which is the default), the Node causes all other Nodes in the Posse to be dragged. If false, this Node drags independently but is dragged whenever an active member of the Posse is dragged,

adHocLayout

(
  • layoutParams
)

Applies the given layout one time to the content.

Parameters:

  • layoutParams Object

    Parameters for the layout, including type and constructor parameters.

animateToPosition

(
  • node
  • x
  • y
  • [animateOptions]
)

Sets the position of the given Node/Group, animating the element to that position.

Parameters:

  • node String | Node | Element

    Either a Node/Group id, a DOM element representing a Node/Group, or a Node/Group.

  • x Integer

    left position for the element.

  • y Integer

    top position for the element.

  • [animateOptions] Object optional

    Options for the animation.

autoSizeGroups

()

Run the groups auto size routine on all groups.

batch

(
  • fn
)

Wraps the underlying Toolkit's batch function with the added step of first suspending events being fired from this renderer.

Parameters:

  • fn Object

    Function to run while rendering and events are both suspended.

deactivateState

(
  • stateId
  • [target]
)

Deactivates the UI state with the given ID on the objects contained in the given target. If target is not supplied, the state is deactivated against the entire dataset.

Parameters:

  • stateId String

    ID of the state to deactivate. States are defined inside a states member of your view definition.

  • [target] Selection | Path | JsPlumbToolkitInstance optional

    Set of objects to deactivate the state on. If null, the entire dataset (Nodes, Edges and Ports) is used.

getCoordinates

(
  • el
)
Object

Gets the origin and size of an element that is being managed by the Surface.

Parameters:

  • el String | Element | Selector | Node

    Element id, element, selector or Node to get position for.

Returns:

Object:

{x:.., y:..., w:..., h:...} if element found, otherwise null.

getLayout

() Layout

Gets the current layout.

Returns:

Layout:

The current layout.

getPath

(
  • params
)
Path

Gets a Path from some source Node/Port to some target Node/Port. This method is a wrapper around the Toolkit's getPath method, adding a few ui specific functions to the result.

Parameters:

  • params Object

    Path spec params

    • source Node | Port | String

      Source node or port, or id of source node/port

    • target Node | Port | String

      Target node or port, or id of target node/port

    • [strict=true] Boolean optional

      Sets whether or not paths are searched strictly by the given source/target. If, for instance, you supply a node as the source, but there are only edges connected to ports on that node, by default these edges will be ignored. Switching strict to false will mean these edges are considered.

    • [nodeFilter] Function optional

      Optional function that is given each Node's backing data and asked to return true or false - true means include the Node, false means exclude it.

    • [edgeFilter] Function optional

      Optional function that is given each Edge's backing data and asked to return true or false - true means include the Edge, false means exclude it.

Returns:

Path:

a Path object. Even if no path exists you will get a return value - but it will just be empty.

getPosition

(
  • el
)
Number | Null

Gets the position of an element that is being managed by the Surface.

Parameters:

  • el String | Element | Selector | Node

    Element id, element, selector or Node to get position for.

Returns:

Number | Null:

[left,top] position array if element found, otherwise null.

getRenderedConnection

(
  • edgeId
)
Connection

Gets the underlying jsPlumb connection that was rendered for the Edge with the given id.

Parameters:

  • edgeId String

    ID of the Edge to retrieve the Connection for.

Returns:

Connection:

A jsPlumb Connection, null if not found.

getRenderedElement

(
  • obj
)
Element

Gets the DOM node that was rendered for the given Node/Port/Group.

Parameters:

  • obj Node | Port

    Node, Group or Port for which to retrieve the rendered element.

Returns:

Element:

DOM element for the given Node/Group/Port, null if not found.

getRenderedEndpoint

(
  • portId
)
Endpoint

Gets the underlying jsPlumb Endpoint that was rendered for the given Port.

Parameters:

  • portId String

    The Port, or the ID of the Port, to retrieve the Endpoint for.

Returns:

Endpoint:

a jsPlumb Endpoint, null if not found.

getRenderedGroup

(
  • groupId
)
Element

Gets the DOM node that was rendered for the Group with the given id.

Parameters:

  • groupId String

    Group id for which to retrieve the rendered element.

Returns:

Element:

DOM element for the given Group id, null if not found.

getRenderedNode

(
  • nodeId
)
Element

Gets the DOM node that was rendered for the Node with the given id.

Parameters:

  • nodeId String

    Node id for which to retrieve the rendered element.

Returns:

Element:

DOM element for the given Node id, null if not found.

getRenderedPort

(
  • portId
)
Element

Gets the DOM node that was rendered for the Port with the given id.

Parameters:

  • portId String

    Port id for which to retrieve the rendered element. Note that you must supply the "full" id here, that is in dotted notation with the id of the Node on which the port resides.

Returns:

Element:

DOM element for the given Port id, null if not found.

getSize

(
  • el
)
Number | Null

Gets the size of an element that is being managed by the Surface.

Parameters:

  • el String | Element | Selector | Node

    Element id, element, selector or Node to get position for.

Returns:

Number | Null:

[width, height] Array if element found, otherwise null.

isHoverSuspended

() Boolean

Gets hover suspended state.

Returns:

Boolean:

Hover suspended state.

isVisible

(
  • obj
)

Checks the visibility of a node, edge or port.

Parameters:

  • obj Object

magnetize

(
  • [params]
)

Magnetize the display. You must indicate what sort of magnetization you wish to perform: if you provide an event, the event's location will be the magnetization origin. If you provide origin:{left;xxx, top:xxx}, that value will be used. If you provide neither, the computed center of all elements will be used. You can also provide an options:{...} value, whose values can contain filter, constrain and padding values for the specific run of the magnetizer.

Parameters:

  • [params] Object optional

    Magnetize parameters. If omitted, the origin of magnetization will be the computed center of all the elements.

    • [event] Event optional

      If provided, the event location will be used as the origin of magnetization.

    • [origin] Object optional

      An object with left and top properties. If provided, will be used as the origin of magnetization.

    • [options] Object optional

      Extra magnetizer options for this run of the magnetizer.

refresh

()

Incrementally update the layout, without a reset. If rendering is suspended, this method does nothing.

relayout

(
  • [newParameters]
)

Reset the layout and run it again. This is different to refresh in that refresh does not reset the layout first.

Parameters:

  • [newParameters] Object optional

    Optional new parameters for the layout.

reload

()

When the component is rendering a Selection (as opposed to an entire Toolkit instance), this causes the Selection to reload, and the component to be cleared and everything redrawn

removeFromAllPosses

(
  • obj
)

Remove the given Node from all Posses to which it belongs.

Parameters:

  • obj Element | String | Node

    A DOM element representing a Node, or a Node id, or a Node.

removeFromPosse

(
  • obj
  • posseId
)

Remove the given Node from the given Posse.

Parameters:

  • obj Element | String | Node

    A DOM element representing a Node, or a Node id, or a Node.

  • posseId String

    ID of the posse from which to remove the Node from.

resetState

()

Resets (clears) the UI state of all objects in the current dataset.

setHoverSuspended

(
  • suspended
)

Sets/unsets hover suspended state. When hover is suspended, no connections or endpoints repaint themselves on mouse hover.

Parameters:

  • suspended Boolean

setJsPlumbDefaults

(
  • defaults
)

Sets the current jsPlumb defaults

Parameters:

  • defaults Object

    Defaults to set.

setLayout

(
  • layoutParams
  • [doNotRefresh=false]
)

Sets the current layout.

Parameters:

  • layoutParams Object

    Parameters for the layout, including type and constructor parameters.

  • [doNotRefresh=false] Boolean optional

    Do not refresh the UI after setting the new layout.

setPosition

(
  • node
  • x
  • y
  • [doNotUpdateElement=false]
)

Sets the position of the given Node or Group.

Parameters:

  • node String | Node | Element

    Either a Node/Group id, a DOM element representing a Node/Group, or a Node/Group.

  • x Integer

    left position for the element.

  • y Integer

    top position for the element.

  • [doNotUpdateElement=false] Boolean optional

    If true, the DOM element will not be moved. This flag is used internally by various Toolkit methods; most external calls to this method will want the element to be moved.

setPosse

(
  • obj
  • spec
)

Sets the posse(s) for the element with the given id, creating those that do not yet exist, and removing from the element any current Posses that are not specified by this method call. This method will not change the active/passive state if it is given a posse in which the element is already a member.

Parameters:

  • obj Element | String | Node

    A DOM element representing a Node, or a Node id, or a Node

  • spec String... | Object...

    Variable args parameters. Each argument can be a either a String, indicating the ID of a Posse to which the element should be added as an active participant, or an Object containing { id:"posseId", active:false/true}. In the latter case, if active is not provided it is assumed to be true.

setPosseState

(
  • obj
  • posseId
  • active
)

Changes the participation state for the given Node in the Posse with the given ID.

Parameters:

  • obj Element | String | Node

    A DOM element, node ID or Node to change state for.

  • posseId String

    ID of the Posse to change element state for.

  • active Boolean

    True to make active, false to make passive.

setRefreshAutomatically

(
  • refreshAutomatically
)

Sets whether or not the layout is refreshed automatically after a Node, Port or Group is added or removed.

Parameters:

  • refreshAutomatically Boolean

    True to refresh automatically, false otherwise.

setSuspendRendering

(
  • val
)

Sets whether or not rendering is suspended. This actually does not mean that new nodes are not added, but it does mean that the panzoom widget is informed not to do any work involving element postions or sizes.

Parameters:

  • val Object

setView

(
  • p
)

Sets the current view for this renderer.

Parameters:

  • p Object

    View to set.

setVisible

(
  • obj
  • state
  • [doNotCascade=false]
)

Sets the visibility of some Node/Port or Edge.

Parameters:

  • obj Selection | Path | Edge | Node | Port | String | Node[] | Port[] | Edge[] | String

    An Edge, Port, Node or - in the case of String - a Node/Port id.

  • state Boolean

    Whether the object should be visible or not.

  • [doNotCascade=false] Boolean optional

    If true, the method does not cascade visibility changes down from a Node to its connected Edges, or from an Edge to its Ports. The default is for this to happen.

sizeGroupToFit

()

Run the group auto size routine on a given groups.

storePositionInModel

(
  • id
  • params
)
Integer

Writes the current left/top for some Node or Group into the data model. A common use case is to run an auto layout the first time some dataset is seen, and then to save the locations of all the Nodes/Groups once a human being has moved things around. Note that this method takes either a String, representing the Node or Group's ID, and uses the default values for left/top attribute names, or an Object, in which you provide the id and the left/top attribute names.

Parameters:

  • id String

    ID of the Node or Group for which to store the position. Either supply this, or an object containing id and values for the left/top attribute names.

  • params Object

    Parameters. An object containing id and values for the left/top attribute names. Supply this or just supply the node id as a string.

    • id Integer

      Node or Group id

    • [group=false] Boolean optional

      If true, the ID given is for a Group, not a Node.

    • [leftAttribute] String optional

      Name of the attribute to use for the left position. Default is 'left'.

    • [topAttribute] String optional

      Name of the attribute to use for the top position. Default is 'top'.

Returns:

Integer:

The current position as [left, top].

storePositionsInModel

(
  • params
)

Writes the current left/top for each node into the data model. A common use case is to run an auto layout the first time some dataset is seen, and then to save the locations of all the nodes once a human being has moved things around.

Parameters:

  • params Object

    Parameters

    • [leftAttribute] String optional

      Name of the attribute to use for the left position. Default is 'left'

    • [topAttribute] String optional

      Name of the attribute to use for the top position. Default is 'top'