Show:

jsPlumbUIComponent Class

Extends jsPlumbUtil.EventGenerator
Defined in: doc/api/uicomponent.js:1

Abstract superclass for Endpoint, Connection, Connector and Overlay. This class provides support for a few basic capabilities that are common to many objects in jsPlumb:

  • Events
  • Types
  • CSS Classes
  • Parameters
  • Paint Styles

You don't interact directly with an instance of this class; it is abstract.

Methods

addClass

(
  • class
)

Defined in doc/api/uicomponent.js:44

Adds a class or some classes to the visual elements for the given component.

Parameters:

  • class String

    The class(es) to add. The values are appended as given, meaning you can supply a space separated string of several classes if you wish.

addType

(
  • typeId
  • [params]
  • [doNotRepaint=false]
)

Defined in doc/api/uicomponent.js:99

Adds a type to the component. Note this is distinct from {@link #setType}, which overrides all current types - this function just adds a type to the existing list.

Parameters:

  • typeId String

    Id of the type to add.

  • [params] Object optional

    Optional params to use when applying the type.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after adding the type.

bind

(
  • event
  • listener
  • [insertAtStart=false]
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:89

Binds a listener to one or more events.

Parameters:

  • event String | String

    Name(s) of the event(s) to bind to. Note that if you provide multiple event names they all are bound with the same function.

  • listener Function

    Function to execute.

  • [insertAtStart=false] Boolean optional

    Whether or not to insert this listener at the start of the listener list, so it is fired before the other currently registered listeners.

cleanupListeners

()

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:126

Removes all listeners.

clearTypes

(
  • [doNotRepaint=false]
)

Defined in doc/api/uicomponent.js:79

Clears all types for a given component.

Parameters:

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after clearing the types.

fire

(
  • event
  • value
  • originalEvent
)
private

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:97

Fires an update for the given event.

Parameters:

  • event String

    Event to fire

  • value Object

    Value to pass to the event listener(s).

  • originalEvent Event

    The original event from the browser

getParameter

(
  • name
)
Object

Defined in doc/api/uicomponent.js:16

Gets a parameter from the component

Parameters:

  • name String

    Name of the parameter to get

Returns:

Object:

The given parameter's value, null if not found.

getParameters

() Object

Defined in doc/api/uicomponent.js:30

Gets all parameters from the component. Note that you are given the actual parameters object, not a copy, so you can alter their values directly, and if you hold the reference to the parameters object you could cause a memory leak.

Returns:

Object:

All of the component's parameters.

getType

() String

Defined in doc/api/uicomponent.js:73

Gets the current type - or types - for this component.

Returns:

String:

The current list of types, empty if none registered.

hasType

(
  • typeId
)
Boolean

Defined in doc/api/uicomponent.js:92

Returns whether or not the component currently has the given type.

Parameters:

  • typeId String

    Id of the type to check for

Returns:

Boolean:

True if the component has the type, false if not.

isHover

() Boolean

Defined in doc/api/uicomponent.js:122

Returns whether or not the object is currently in hover state

Returns:

Boolean:

True if in hover state, false if not.

isSuspendEvents

() Boolean

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:121

Checks whether or not events are currently suspended.

Returns:

Boolean:

True if events are suspended, false otherwise.

jsPlumbUtil.replace

(
  • inObj
  • path
  • value
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:131

Replaces values inside some JS object according to a given path spec. A path spec is a string in dotted notation, with each component optionally declaring an array index. Some examples are:

foo.bar foo.baz[2] foo.qux[3].baz[3].shwee

The function fails gracefully if the path identifies a non-existent object.

Parameters:

  • inObj Object

    Object to perform replacements inside.

  • path String

    Path to use for replacements

  • value Object

    Value to set.

reapplyTypes

(
  • [params]
)

Defined in doc/api/uicomponent.js:85

Reapplies the current list of types with the given (optional) parameters. See the jsPlumb documentation for a full discussion of types.

Parameters:

  • [params] Object optional

    Optional params to use when reapplying types.

removeClass

(
  • class
)

Defined in doc/api/uicomponent.js:50

Removes a class or some classes from the visual elements for the given component. You can supply a space separated string of several classes if you wish.

Parameters:

  • class String

    The class(es) to remove.

removeType

(
  • typeId
  • [doNotRepaint=false]
)

Defined in doc/api/uicomponent.js:107

Removes the given type from the component.

Parameters:

  • typeId String

    Id of the type to remove.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after removing the type.

setHover

(
  • hover
  • [ignoreAttachedElements=false]
)

Defined in doc/api/uicomponent.js:141

Sets/unsets the hover state of this component.

Parameters:

  • hover Boolean

    Hover state boolean

  • [ignoreAttachedElements=false] Boolean optional

    If true, does not notify any attached elements of the change in hover state. Used mostly by jsPlumb internally, to avoid infinite loops.

setHoverPaintStyle

(
  • style
  • [doNotRepaint]
)

Defined in doc/api/uicomponent.js:128

Sets the paint style to use when the mouse is hovering over the component. This is null by default. The hover paint style is applied as extensions to the paintStyle; it does not entirely replace it. This is because people will most likely want to change just one thing when hovering, say the color for example, but leave the rest of the appearance the same.

Parameters:

  • style Object

    Style to use when the mouse is hovering. The allowed values in this object originally come from valid values in an HTML5 canvas.

    • [fillStyle] String optional

      Fill style, in valid CSS format (a hex code, name, or rgb value). Note that setting a fillStyle on a Connector will cause the browser to fill the connector's path - probably not what you want.

    • [strokeStyle] String optional

      Stroke style, in valid CSS format (a hex code, name, or rgb value). You can use strokeStyle on Endpoints to define a border.

    • [lineWidth] Integer optional

      Width of the stroked line (for Connectors this is the Connector itself; for Endpoints it is the outline)

  • [doNotRepaint] Boolean optional

    If true, the component will not be repainted. Useful when setting things up initially.

setPaintStyle

(
  • style
  • [doNotRepaint=false]
)

Defined in doc/api/uicomponent.js:148

Sets the component's paint style and then repaints the component.

Parameters:

  • style Object

    Style to use. The allowed values in this object originally come from valid values in an HTML5 canvas.

    • [fillStyle] String optional

      Fill style, in valid CSS format (a hex code, name, or rgb value). Note that setting a fillStyle on a Connector will cause the browser to fill the connector's path - probably not what you want.

    • [strokeStyle] String optional

      Stroke style, in valid CSS format (a hex code, name, or rgb value). You can use strokeStyle on Endpoints to define a border.

    • [lineWidth] Integer optional

      Width of the stroked line (for Connectors this is the Connector itself; for Endpoints it is the outline)

  • [doNotRepaint=false] Boolean optional

    If true, the component will not be repainted.

setParameter

(
  • name
  • value
)

Defined in doc/api/uicomponent.js:23

Sets a parameter on the component

Parameters:

  • name String

    Name of the parameter to set

  • value Object

    Value to set

setParameters

(
  • params
)

Defined in doc/api/uicomponent.js:38

Sets all parameters on the component.

Parameters:

  • params Object

    Parameters to set.

setSuspendEvents

(
  • val
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:116

Sets whether or not events are suspended.

Parameters:

  • val Boolean

    Whether or not to suspend events.

setType

(
  • typeId
  • [params]
  • [doNotRepaint=false]
)

Defined in doc/api/uicomponent.js:64

This function sets a type for the given component. It replaces all existing types. For a full discussion of the concept of types, see the jsPlumb documentation.

Parameters:

  • typeId String

    Id of the type to set.

  • [params] Object optional

    Optional parameter object to expand.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after setting the type.

toggleType

(
  • typeId
  • [params]
  • [doNotRepaint=false]
)

Defined in doc/api/uicomponent.js:114

Toggles the given type on the component.

Parameters:

  • typeId String

    Id of the type to toggle.

  • [params] Object optional

    Optional params to use if the type is not currently set and jsPlumb applies it.

  • [doNotRepaint=false] Boolean optional

    Tells jsPlumb not to repaint after toggling the type.

unbind

(
  • [eventOrListener]
  • [listener]
)

Inherited from jsPlumbUtil.EventGenerator: doc/api/util-api.js:106

Clears either all listeners, or listeners for some specific event, or just some listener. You can call this method with zero, one or two arguments: with zero arguments, all listeners are cleared. With one argument that is a string, all listeners for the specified event type are cleared. With one argument that is a function, it is removed from the appropriate event list. With two arguments, the first is an event type, and the second is a function to be unbound. In fact this is perhaps unnecessary given that you can unbind a function just by passing it.

Parameters:

  • [eventOrListener] String | Function optional

    If a string, constrains the clear to just listeners for the event identified by the string. If a Function, unbinds this function wherever it may have been bound.

  • [listener] Function optional

    If provided, removes just this listener for the given event.

updateClasses

(
  • [classesToAdd]
  • [classesToRemove]
)

Defined in doc/api/uicomponent.js:56

Adds/removes classes at the same time, which reduces the number of reflows that occur in the page. Either parameter may be null but of course if you pass only a single parameter to this method then it will be taken to be classesToAdd.

Parameters:

  • [classesToAdd] String | String optional
  • [classesToRemove] String | String optional