jsplumb

Prevent two connections from sharing the same anchor

自作多情 提交于 2019-12-23 19:08:44
问题 I am using jsPlumb to allow users to build graphs. I allow users to drag these elements around, so I'm using a collection of anchors for each endpoint, letting jsPlumb pick the "best" anchor from that collection for me when connections are made. The problem I'm having is that I can potentially have up to a dozen connections coming from any given endpoint, so these connections will become visually distracting when many end up choosing the same "best" anchor - creating an appearance of

jsplumb 1.4.1 deleteEndpoint by uuid or object example

倖福魔咒の 提交于 2019-12-23 19:04:14
问题 I have some div elements with 2 endpoints for each element (one the left and one the right side). Now I want to delete every right sided endpoint. Everyone of this endpoints has its own unique uuid. I got an array of every uuid of the right sided endpoints -> iterate through them and delete every single one of them but this wont work can anyone give me an working example of deleting an endpoint by uuid or object ? in my case it wont work with both. I got this errormessage every time:

jsPlumb removes Straight connection when calling setPaintStyle()

可紊 提交于 2019-12-23 18:05:43
问题 I am using jsPlumb for a medium size project. Although the documentation is slim in terms of solid explanations, I've managed to complete the project and now I'm ready to deliver it. Right before deliver date I've been asked to make the connection lines straight instead of curved. I thought this would be as easy as adding a keyword to the jsPlumb connect method like: jsPlumb.connect({ connector: 'Straight'... }) ... and it is. So what's the problem? This project I'm working on has to allow

jsPlumb using a click instead of dragging to connect elements

廉价感情. 提交于 2019-12-22 10:29:50
问题 I am trying to use jsPlumb to connect questions with answers in a quiz. I have most of this working expect I want to be able to click a question and then click an answer instead of dragging from an endpoint to another endpoint. This is because dragging on a touch device is tedious. Is this possible? Here is my jsbin with the dragging working Here is the jquery I am using. $(document).ready(function () { var targetOption = { anchor: "LeftMiddle", isSource: false, isTarget: true, reattach: true

How can I prevent overlapping in a family tree generator?

一世执手 提交于 2019-12-18 14:14:39
问题 I'm creating an interactive family tree creator, unlike more simpler versions which are simple pedigree charts/trees. The requirements for mine (based on familyecho.com) are: multiple partners vs just a simple 2 parent to 1 child that you normally see. multiple siblings partners dont necessarily need to have children there doesn't always have to be a parent "pair", there can just be a single father/mother The problem I'm encountering is: I'm generating the offsets based on the "current" node

Child nodes not go out of the parent div

主宰稳场 提交于 2019-12-13 19:10:53
问题 I have this div : <div id="composition_area" style="width: 700px; height: 600px; float:left; border: solid 2px"> <div id="a" class="a window" style="width: 80px; height: 80px; border: solid 1px" contenteditable="true">foo</div> </div> and inside of this with id="composition_area" I add nodes with the jsplumb . In this example I have a node with id="a" . All the nodes are draggable and the user can move the divs anywhere he wants. But I want not to go out of the parent div. How can I do that?

Making Divs Draggable But Contained Using jsPlumb With YUI

此生再无相见时 提交于 2019-12-13 16:22:39
问题 I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using: jsPlumb.draggable("window2", { containment:"parent" }); the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward. To see

Programmatic connection in jsplumb

北慕城南 提交于 2019-12-13 06:42:44
问题 How can I recreate/redraw a connection in jsplumb that has two different image endpoints? For example: instance.connect({source:"source", target:"target", anchors:["Bottom", "Top"], endpoint:[ "Image" , {url:"nameofpicture.jpg"} ], connector: "Flowchart"}); this works for one image(the image is the same on the source and target element) instance.connect({source:"source", target:"target", anchors:["Bottom", "Top"], endpoints:["Dot","Rectangle"], connector: "Flowchart"}); this works and

How can I connect multiple targets from a single source?

泄露秘密 提交于 2019-12-13 05:29:45
问题 I am using this code to connect a single object one another object and this works fine. Could anybody help me to modify this to link a single object to multiple objects. var start = 'logo'; var end = 'link'; jsPlumb.connect({ source:start, target:end, connector: [ "Flowchart", {cornerRadius:1} ], paintStyle:{ lineWidth:5, strokeStyle:'#3E2522' }, anchors: [[1.02, 0.5, 0, 1], [-0.02, 0.5, 0, 0]], endpointStyle: { radius:0.5 } }); 回答1: Store all the id's of the target elements in an array and

Display hyperlinks in jsPlumb nodes?

孤街浪徒 提交于 2019-12-13 04:22:45
问题 How do i display hyperlink in jsplumb nodes. I want users to to create task flow chart with links in nodes. I want to create a flowchart editor for my website users. I am able to create the nodes but i cant set a title or hyperlink in the node 回答1: Any DOM element can behave as a jsPlumb node. <div id="#myLinkDiv"> Start <br> <a href="http://example.com">Link</a> </div> <div id='second'> Second </div> jsPlumb.makeSource('myLinkDiv'); jsPlumb.makeTarget('second'); If you're worried about