Questions tagged [jsplumb]

jsPlumb provides a way to "plumb" elements of a UI together.

Filter by
Sorted by
Tagged with
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'...
jonathan_OJ's user avatar
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 ...
Will Comeaux's user avatar
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 &...
Afrose ahamed's user avatar
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 ...
rionalab's user avatar
-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"...
Yorn Qiu's user avatar
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 ...
Satrughna's user avatar
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. '...
Sree Raag's user avatar
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
omar elfrex's user avatar
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 (...
sharp's user avatar
  • 1,191
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 ...
Sujeet Singh's user avatar
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 ...
MrSnrub's user avatar
  • 1,123
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-...
Abelini's user avatar
  • 71
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 ...
KeerthanaK's user avatar
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 ...
jalaj agrawal's user avatar
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 ...
Rex Remus's user avatar
  • 171
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 ...
Adrian's user avatar
  • 105
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 ...
Weilory's user avatar
  • 2,661
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 ...
sreenath's user avatar
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 ...
BATMAN_2008's user avatar
  • 2,769
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 ...
BATMAN_2008's user avatar
  • 2,769
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 ...
BATMAN_2008's user avatar
  • 2,769
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 ...
BATMAN_2008's user avatar
  • 2,769
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?
SzymonS's user avatar
  • 15
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(...
Kamya Kashyap's user avatar
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<...
Kamya Kashyap's user avatar
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 ...
Kamya Kashyap's user avatar
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:...
Kamya Kashyap's user avatar
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 ...
Kamya Kashyap's user avatar
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 ...
Eric Malalel's user avatar
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 ...
Ali Sertaç Cebeci's user avatar
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 ...
Eric Malalel's user avatar
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 ...
Eric Malalel's user avatar
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 ...
lucataglia's user avatar
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 ...
Isaac's user avatar
  • 3
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> ...
Rashid's user avatar
  • 1,700
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." ...
Paresh Varde's user avatar
  • 1,084
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, ...
Develop Man's user avatar
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 ...
user avatar
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 ...
Pradeep Jagadeesan's user avatar
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 ...
Konstantinos Papakonstantinou's user avatar
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....
Akshay Singh's user avatar
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....
Konstantinos Papakonstantinou's user avatar
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'...
Khalil Abdellah's user avatar
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 ...
Med Ben's user avatar
  • 11
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 ...
joe's user avatar
  • 9
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 ...
Janani Hariharan's user avatar
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 ...
Eslam Magdy's user avatar
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 ...
Vishnu Prasad's user avatar
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 ...
Akshay Srivastava's user avatar
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, ...
Akarshan Dehal's user avatar

1
2 3 4 5
12