Questions tagged [jsplumb]
jsPlumb provides a way to "plumb" elements of a UI together.
566
questions
0
votes
0
answers
10
views
Overflow horizontal in jsPlomb, line dont work
In my project we are using the jsPlomb for connect cards with dynamic mode, this is an example:
And this happens when use the scroll lateral:
I tried to use the jsPlomb.repaintEverything(), but don'...
0
votes
0
answers
10
views
JSPlumb Element in wrong position
I have a design surface that is allowing drag-drop from a toolbar onto the surface.
The first item I drag, drops to the position where I drop it. After that, each subsequent dropped item is somehow ...
0
votes
0
answers
38
views
Can't download images with arrows while using Html2Canvas JsPlumb. How to fix it?
In Html2Canvas JsPlumb connectors are not showing. Is there any possible to show connectors.
This is the output in my page. When downloading its not arrows.
When download arrows are not capturing
&...
0
votes
1
answer
55
views
How to get all nodes and connector (edges) as JSON using JSPlumb in reactJS
so im working with jsplumb with reactjs, everything works fine but i have a button when it clicked it will store the jsplumb data to database, i cant find any method from surface or toolkit instance ...
-1
votes
1
answer
31
views
jsplumb - how to make connector fixed?
As this png, the connector is at "BOTTOM", and if I move the box to left, the connector moved to "LEFT" too(as the 2nd png).
But I want the connector to fixed at "BOTTOM"...
0
votes
0
answers
34
views
JsPlumb, How to save connector labels?
Could someone help me out with what I am missing?
The scenario is: there are several nodes. Among them, one node can connect with 3 other nodes and those connections should be labeled.
The codes are ...
0
votes
1
answer
103
views
Issue while dragging elements inside a group
I have two groups and each group has a child element inside. Both child elements are connected using JsPlumb 5.12. When I click on the element and drag, the connections are broken.
For example. '...
0
votes
1
answer
36
views
Is there a way to retreive labels of edges in jsplumb asynchronously, cuz I get undefined when I subscribe to observable to get data labels of edges
in place of +N (I wanna get data from backend and put it as label of edges)
can you please help me to fix that issue ?
thanks to all
get jsplumb graph labels of edges asynchronously
2
votes
1
answer
156
views
Set style for connector and endpoints on hover
I'm trying to create a css style for all connections and endpoints which are connected to a specific element. I have managed to color all source/targets but I'm not managing to color the connections (...
0
votes
1
answer
58
views
Improve the rendering time of jsplumb chart
I am creating a chart using jsplumb having around 300 nodes and more than 1000 connections, it takes more than 10 sec to create the connection, render and sometimes it even causes the browser to ...
0
votes
1
answer
108
views
jQuery 3.6.0 and jsPlumb Community Edition 5.10.4 RC: Uncaught TypeError: el.getAttribute is not a function
I can't make the current versions of jQuery (3.6.0) and jsPlumb Community Edition (5.10.4 RC) work with each other. I use the current version of Mozilla Firefox on Windows 10.
If I initialize my ...
0
votes
1
answer
173
views
jsPlumb make connectors editable with EditableFlowchart
I've been looking for a few days to develop a flowchar with connector editalbe, something like the picture below.
In the documentation it says that I need another package - jsplumbtoolkit-editable-...
0
votes
1
answer
365
views
How to dynamically draw edges between nodes using jsplumbtoolkit-react
I'm using jsplumbtoolkit-react 2.x version. Using toolkit.addNode to add new nodes dynamically to the graph. But I'm struggling to draw the connection between the newly added nodes. Can someone please ...
0
votes
1
answer
38
views
detach method in jsplumb removes from connection array but does not update in UI
I when i click on connection there are some properties, in those properties we have delete connection button, which use delegate undelgate method with click event.
It deletes connection from ...
0
votes
1
answer
230
views
jsPlumb - How do you get all of the actual connections from a scrollable list when some connected elements are scrolled out of view?
I need to allow mapping between two long scrollable lists and I want to be able to get a list of all the connections created. Using the demo code off the jsPlumb community website I can create the ...
1
vote
1
answer
160
views
JsPlumb : Issue with connnector lines
I would like to draw this following lines with angles.
Actual
Expected
I tried to find documentation about this problem, without success. I'm attaching a snippet of what I have set up so far.
If ...
3
votes
1
answer
411
views
Jsplumb detach connection
I am trying to detach a connection when widget is clicked.
refers to the posts:
Jsplumb remove all connections not working with verion 2.4.3
How to delete jsPlumb connection
I am on newest CDNJS ...
0
votes
1
answer
135
views
getting document is not defined error in Angular SSR while using jsPlumb & @jsplumb/browser-ui with third-party library
getting document is not defined error in Angular SSR while using jsPlumb & @jsplumb/browser-ui with third-party library
When we start running with npm run build:ssr, there is no issues with the ...
1
vote
1
answer
425
views
How to create Nodes using jsPlumb community edition
I am using the @jsplumb/browser-ui to create some Nodes within my Nuxtjs/Vuejs application like as mentioned in their documentation. But I would like to create the Nodes at run-time. I am unable to ...
0
votes
1
answer
226
views
Unable to add Nodes or shapes in Jsplumb community edition
I am using the @jsplumb/browser-ui to create some Nodes within my Nuxtjs/Vuejs application like as mentioned in their documentation. But I would like to create the Nodes at run-time. I am unable to ...
3
votes
2
answers
919
views
How to get started with the @jsplumb/browser-ui in the Vuejs/Nuxtjs application?
I am trying to integrate the @jsplumb/browser-ui community edition into my application. As per the recommendation from jsplumb team, I am using the @jsplumb/browser-ui but I am not understanding how ...
0
votes
1
answer
222
views
jsPlumb integration with Nuxtjs throwing the error document is not defined
I know there are a few questions similar to this but they did not work for me so I am posting this.
I am trying to add jsPlumb into my Nuxtjs/Vuejs application. I did the following steps:
npm i ...
0
votes
1
answer
75
views
How to move all connections connected to an endpoint at once?
Image
Is it possible to drag multiple connections at the same time?
See image, Node 1 and 2 are connected to Node 3. Is it possible to move that connection with one drag in jsPlumb?
0
votes
1
answer
171
views
How to drag all nodes and connection together
I want to drag all nodes, connections together when i click and drag anywhere inside the instance. Though, when i drag any node, i don't want other nodes to be dragged. I could find addToDragSelection(...
0
votes
1
answer
320
views
How to add event listeners on endpoint
Earlier we could add event listener to endpoints using -
this.instance = newInstance({
container: this.wrapper.nativeElement,
});
_addEndpoints(
id: string,
sourceAnchors: Array<...
0
votes
1
answer
55
views
getAllConnections is not a functoin
jsPlumb2.x had getAllConnections on instance to get all the connected uuids. I'm using 5.x version and getting this error and could not find any alternate function in source code as well as ...
0
votes
1
answer
801
views
jsPlumb function failed : TypeError: Cannot read properties of undefined (reading 'resetBounds')
When i add connector property with type 'Bezier', then upon adding connection it throws
jsPlumb function failed : TypeError: Cannot read properties of undefined (reading 'resetBounds')
ERROR TypeError:...
0
votes
2
answers
651
views
jsPlumbBrowserUI.getInstance is not a function
I'm trying to setup @jsplumb/browser-ui in my angular project as per the documentation https://docs.jsplumbtoolkit.com/community/ . But, i'm not able to access the getInstance method.
import * as ...
0
votes
1
answer
191
views
click event not triggered on nodes and connections of a jsplumb graph on mobile
I have an Angular app with a jsPlumb graph built dynamically from data in a database, and on each node and connection created, the user can click to edit properties and save them to database.
I test ...
0
votes
1
answer
261
views
jsPlumb flowchart connector layout direction change in 5x
I am using jsPlumb 5x for a flowchart application. Used packages are @jsplumb/connector-flowchart and @jsplumb/browser-ui. I decided to use flowchart connectors. I couldn't find a way to change the ...
0
votes
1
answer
185
views
how to disable mouse hover when hovering specific jsplumb connection
I use JSPlumb Community Edition to dynamically build flowcharts from database.
In these flowcharts, some connectors should not be clickable.
I have been able to change the color of such connectors by ...
0
votes
1
answer
118
views
how to align jsplumb flowchart nodes when they are drag and dropped by user
I use jsPlumb to display flowcharts in my angular app, and I would like to have the flowchart nodes aligned, even when the user drag and drops them.
To do this, I think I need to bind a function on ...
4
votes
1
answer
479
views
JSPLUMB: disable nodes drag and drop after a specific user interaction
I'm using the community edition of jsplumb (version 2.15.5) within a React project.
// Outside the component
plumb = jsPlumb.getInstance(mySetting);
...
useEffect(() => {
// Handle endpoints
...
0
votes
1
answer
222
views
Jsplumb drawn wrong endpoint of continuous anchor with multiple connections
I'm trying to connect multiple endpoint with multiple sources
In this example, 'pointAB' should be connected with two sources but 'pointA' does
it seems that the actual endpoint instances are ...
1
vote
2
answers
145
views
jsplumb in Nuxt app throws document is not defined
I am planning to use jsplumb in my app
my current code looks like this
<template>
<client-only>
<div id="canvas"></div>
</client-only>
</template>
...
0
votes
1
answer
131
views
JSPlumb toolkit licence
I have a license copy of the toolkit and updated files downloaded from the website into the demo application. However, I keep getting the message "jsPlumb Toolkit evaluation period expired." ...
0
votes
1
answer
74
views
JsPlumb Recreate Canvas Using AJAX
I use a function called "initJsPlumb" to create diagram and send it to my ajax data which includes route and node informations as parameter.In this function,I generate instance, ...
0
votes
2
answers
91
views
Endpoint no longer drags with Anchor after Anchor ID is changed after creation - JSPlumb
I'm building an editor and when I place a shape (also requires entering ID for that shape) onto the canvas, endpoints get created and attached to the shape. The ID of the shape is used for the ...
1
vote
1
answer
899
views
jsPlumb + Panzoom infinite droppable canvas
I have created a codepen that uses jquery ui droppable(for drag/drop), jsPlumb (for flowcharting) and Panzoom (panning and zooming) to create a flowchart builder. You could drag the list items from ...
0
votes
0
answers
165
views
Print a diagram with html2Canvas, jsPdf, file-saver
I have an Angular application where I use the jsPlumb library to create a diagram. The output of jsPlumb is a wrapper div with many other divs and svgs inside positioned as absolute.
This wrapper div ...
0
votes
1
answer
344
views
"cannot read property 'ready' of undefined" on calling jsPlumb.ready in React JS
I'm creating a page in React JS to implement OCR functionality to map document ocr data key value pairs to their corresponding bounding-box element shown on the document image.
on calling "window....
0
votes
1
answer
187
views
Unable to create straight connectors in jsplumb
I'm using version 2.15 of jsplumb in an Angular project and am trying to create straight connections between the elements. The code below initiates the instance
ngAfterViewInit() {
this....
0
votes
0
answers
191
views
jsPlumb or jQuery Connections, used on collapsible content
I'm trying to add connecting lines from a chat bubble to two child bubbles that are collapsible. Example in the link. I am not very experienced with JS, I'm learning as I try to create this project.
I'...
1
vote
1
answer
102
views
jsPlumb does not connect correctly elements inside a table
I'm trying to use the connect function to link elements inside a table.
I have made this Stackblitz to show that the line is not connecting correctly the two elements:
Stackblitz
I dont know if I am ...
0
votes
0
answers
186
views
How can I disable jsplumb dragaable for a specific node on click
I'm using jsPlumb and I'm firing summer-note on double click on the text inside node, what I want is to disable dragging of the node when my summer-note jQuery executes. I searched over Google but was ...
0
votes
1
answer
895
views
How to generate group in jsplumb angular and add nodes to it dynamically after the group is created in angular 7
I would like to create a jsplumb group and then add nodes to it dynamically. But I can find in the document that one node needs to created and then after that only it can be added to the group. But in ...
0
votes
2
answers
622
views
jsPlumb: How to make conditional connections
Am trying to create connections between nodes based on rules for example:
"API request" endpoint can't connect to any other nodes except the "Initiate Call".
"Failed" endpoint can't connect to "Play ...
1
vote
0
answers
120
views
Find all in-between connections from a node to other in jsPlumb
In jsPlumb, I am trying to get the full path between 2 nodes as an array with a single query even if there is multiple nodes in between source and destination. I am currently doing it with a BFS ...
2
votes
0
answers
158
views
unable to create connection between nodes in Jsplumb
I have created the flowchart using jsplumb free angular version parent to parent node connection is working but if i added the child nodes inside the parent then i can make child to parent node ...
0
votes
1
answer
74
views
JS Plumb connect function not accepting params
instance.connect({
source: "src",
target: "tar",
endpoint: ["Dot", {
radius: 5,
cssClass: "hasInfluencedEndpointStrong"
}],
anchor: "Center",
paintStyle: {
width: 25,
...