At the core of jsPlumb's Angular integration is the jsPlumb Service, which offers access to, and management of, Toolkit instances and Surfaces. It is recommended to create an instance of the Toolkit programmatically at the top level of your application, which you can then share between different components. For instance, this is the ngOnInit method of the top level component in the Angular demo that ships with the Toolkit:
Methods
The jsPlumb Service offers several methods. getToolkit and getSurface are the methods client applications will mostly use; unless you write your own component that renders a Surface you won't need to use the methods that add/remove Surfaces.
• getToolkit(id:string, params?:jsPlumbToolkitOptions)
Either retrieves an existing Toolkit with the given ID, or creates a Toolkit instance and returns it. Options for the Toolkit instance may be passed in as the second argument; these are ignored if a Toolkit with the given ID already exists.
• getSurface(id:string, callback:(surface:Surface)=>void, _params:SurfaceOptions)
Either retrieves the Surface with the given ID, or creates one, with the given Surface options, and returns it. The second argument to this method is a callback function - it is asynchronous, not returning the Surface until it has been initialised fully.
• addSurface(id:string, surface:Surface)
Registers a Surface with the service. This method is used by the jsplumb-surface component that ships with the Toolkit.
• removeSurface(id:string, surface:Surface)
Unregisters a Surface from the service, also calling destroy on the Surface (which calls destroy on any attached Miniviews). This method is used by the jsplumb-surface component that ships with the Toolkit.
• addMiniview(surfaceId:string, params:MiniviewOptions)
Used by the jsplumb-miniview component.
jsPlumb's Palette
This is an "attribute component": it is created by adding this attribute to some other element. The Palette component provides a means to implement drag/drop of new Nodes/Groups onto your Surface.
Attributes
• selector A valid CSS3 selector identifying descendant nodes that are to be configured as draggable/droppables.
• surfaceId The ID of the Surface to which to attach the Palette.
• typeExtractor A Function that, given some DOM element, can return the type of the Node/Group the element represents. In this example, our typeExtractor function would return the value of the data-node-type attribute.
• dataGenerator This optional Function can be used to provide default data for some Node/Group type.
jsPlumb's Drag Drop
This is a newer version of the jsplumb-palette discussed above. This component wraps an instance of the Drop Manager, and is an improvement over the jsplumb-palette in a few ways:
• it uses a delegated drag handler so you do not need to inform it when its child content has been updated
• the component can be enabled/disabled
• it supports dropping nodes onto edges
For more details on our products and services, please feel free to visit us at gantt chart, diagram, process flow, process chart, Flowchart