Yeah, so I've been playing with jsPlumb. Let's say I have a div with two endpoints; one TopCenter, one BottomCenter.
When a new connection is created, I can bind to that event with the function below. My question is, how do I get the anchor position for the endpoints? I do get the Source and TargetEndpoint objects, but looking at the documentation, I don't see a way to get the anchor position...
thanks!
jsPlumb.bind("jsPlumbConnection", function(connectionInfo) {
/*
connection : the new Connection. you can register listeners on this etc.
sourceId : id of the source element in the Connection
targetId : id of the target element in the Connection
source : the source element in the Connection
target : the target element in the Connection
sourceEndpoint : the source Endpoint in the Connection
targetEndpoint : the targetEndpoint in the Connection
*/
});
connectionInfo.connection.endpoints[0].anchor.type is the source position.
connectionInfo.connection.endpoints[1].anchor.type is the target position.
I found the following solution to the problem:
console.log('anchors: %o %o',connectionInfo.sourceEndpoint.anchor.x, connectionInfo.sourceEndpoint.anchor.y);
By getting the x and y coordinates of the endpoints I know the position of the anchor and can use that to recreate a diagram.
Related
I would like to be able to use the dc.js select menu (dc.selectMenu) in such a way that when I click on an element it gets the value of said element and that becomes the value of the select, once selected it should refresh the data as it normally would if you had just selected in the first place.
The problem I'm having is that I can set the value, but dc.redrawAll() seems to do nothing for me so I think I must be filtering wrongly, but I can't find much information online regarding how to do it other than simply using the filter method (not onclick).
I have tried to set the destination to whatever data-destination is which appears to be working, the value of the select does update when I check with console.log to check the value of the select menu, I then use the dc.redrawAll() function expecting it would filter based on the select option but it does nothing (not even an error in the console)
My function so far is looking like:
function select_destination(ndx) {
var destination_dim = ndx.dimension(dc.pluck('destination'));
var destination_group = destination_dim.group();
var destination = null;
document.addEventListener('click', function(e) {
if (!e.target.matches('.open-popup-link')) return;
e.preventDefault();
var destination = e.target.getAttribute('data-destination').toString();
document.getElementById('select-destination').value = destination;
dc.redrawAll();
});
dc.selectMenu('#select-destination')
.dimension(destination_dim)
.group(destination_group)
.filter(destination);
}
I would expect the graphs to update based on the select option but nothing happens, and I get no error message to go off either.
I suspect I'm using dc.redrawAll() wrongly as if I go to the console and type dc.redrawAll(); I get undefined but I'm really at a loss now and the documentation isn't really helping me at this point so I don't know what else to do.
they are bits of your code that I don't quite understand, for instance why do you have have filter(destination /*=null */)
anyway, So you want to filter the select menu? you can call directly the replaceFilter function with the value, as done in the source code:
menu.replaceFilter(destination);
dc.events.trigger(function () {
menu.redrawGroup();
});
See the source code for the full example of how it's done
https://dc-js.github.io/dc.js/docs/html/select-menu.js.html#sunlight-1-line-129
as for why it doesn't work, I have had some surprising results mixing d3 with pure dom js. Try to rewrite your even handler in d3, eg
d3.select('#select-destination').property('value', destination);
it's possibly that changing the value on the dom directly isn't triggering the change event.
My experience with d3 is that it works better to change the underlying data (call directly filter functions or whatever you want to do) and let dc redraw the needed rather than manipulating the dom directly
Here i'm working on Decision tree using d3 tree example: Search collapse tree. In this example, user can search the node and the path from root to selected node will be highlighted. But in my case, when user enters, the nodes that connects to the output node, the path from the root node to the output node should be highlighted. Just like shown in the image:
I need to work the tree just like shown in the image but my logic seems not working. Please check out my FIDDLE. To get the outputh path, i added a method named as "searchPath" that works on click function of "Find output path" button. (In fiddle, the click function is not working, dont know why. In normal html page it works):
function searchPath(){
var searchText = $("#newpath").val();
//alert(searchText)
var textspl = searchText.split(",");
var path="";
for(var i=0;i<textspl.length;i++){
var paths= searchTree(treejson2,textspl[i],[]);
fullpath.push(paths[Object.keys(paths).length-1]);
}
console.log("finally : ");
console.log(fullpath);
d3.selectAll("circle").filter(function(d) {
console.log("circle name "+d.name);
});
//return fullpath;
}
To select the circle and link element based on the path, i added "id" attributes to those element. For circle, i give id as d.name and for link i give id as d.source.name+":"+d.target.name", so as to easily identify the source node and target node of a particular link.
But now i'm stuck with the code, i'm not getting any idea or logic to go forward.
I am new to Kony framework. Now i am going through Widget. There i came across Segment widgets using I would create a flex container with some labels and textbox.
My UI design are :
1. I Created a segment and set a flex container with some labels and text box in that segment
2. After that I turn off the flex container visible
3. And I type a code like :
function flex()
{
frmAssign.sgmt1.flex1.isVisible = true;//to show flex as visible but it does not read the property of that flex
}
In simple terms just If I click segment first row flex container isVisible should be true
enter image description here
want to achieve this design in kony
Try change frmAssign.sgmt1.flex1.isVisible = true;
frmAssign.sgmt1.flex1.setVisibility(true);
You cannot access the widget of segment directly.
You have to create a property (eg:isVisible) in Master Data of the segment.
initial Value of this property would be "false",
Then change the value as you per your need.
To change properties in segment data you have change the properties in array which you have set to data of segment.
Basically idea is
if you are using masterdata then you need to read the data change
property values and reassign.
if you are dynamically setting data
then you need to change that array and reassign
// always check for Null for selecteindex
//Note keep your existing properties and just change isVisible to true
var selecteindex= frmAssign.sgmt1.selectedRowIndex;
var segData = frmAssign.sgmt1.data[selecteindex];
segData[selecteindex] =("YourFlexName": {
"text": "CButton1",
"isVisible":true
});
form1.segment1.setDataAt(segData,selecteindex);
The right way to do this is :
var selectedIndex= frmAssign.sgmt1.selectedRowIndex;
var rowData = frmAssign.sgmt1.data[selectedIndex];
rowData["flex1"]["isVisible"] = true;
form1.segment1.setDataAt(rowData, selectedIndex);
I have the following code:
var cnt = 0;
$(document).ready(function () {
var data = [
{
"id": cnt++,
"text":"node_" + cnt
}
];
var tree = $("#treeview").kendoTreeView({
dataSource:kendo.observableHierarchy(data)
}).data("kendoTreeView");
$("#push").click(function () {
var pos = tree.dataItem(tree.select());
pos.items.push({id:cnt++, text:"node_" + cnt});
});
$("#append").click(function () {
var pos = tree.select();
tree.append({id:cnt++, text:"node_" + cnt}, pos);
});
$("#show").click(function () {
var data = tree.dataItem(".k-item:first");
$("#content").html(JSON.stringify(data, null, 2));
});
});
And there are two functions:
1. push: once selected a node in the tree, it uses dataItem to get current data item and pushes one additional node into it (child node). This should be valid since dataSource is an ObservableHierarchy object.
2. append: once selected a node in the tree, it uses append to introduce one additional node into it (child node). This was valid on previous release of KendoUI and modify the tree but should not reflect changes in the DataSource.
The question / problem is:
1. If I use append the tree is update (visually) but the dataItem is not updated.
2. If I use push then dataItem is update but not the tree.
3. If I select a node, use append and then push, the tree is visually updated and the model too.
It seems that the first time that I introduce a child append updates some internal structure and from there the tree 'observes' the observable hierarchy put if I directly push it then the tree does not observe the observable hierarchy.
How should I insert nodes dynamically being able to check the DataSource and get the current state of the tree?
NOTE This is with the latest version of KendoUI Q2.1024.
Ok so,I just got an answer on a ticket about this matter after 2 days.
It is indeed a BUG which is already fixed in the latest builds,but the builds are only available for customers with an active subscription...
It will be available for the rest of the community in the next official release (around March 2013).So currently the only solution is to purchase a commercial subscription and you will get immediate access to the new builds...
Kinda disappointed with all this commercial stuff since it is a bug..But anyway,nothing we can do about it..
At least we know we are not crazy,and in a few months we can replace our code with the fixed build. :P
Kinda my problem too at the moment since append doesn't update the dataSource at all and while push updates the dataSource,it does so only the first time I add a node,I can't even select that node afterwards until I save the dataSource and refresh the page.(or I get an pos.items is undifined error)
What I've though so far is that maybe we can use the push method that adds the child-node to the dataSource and try to force load the selected node's children in the dataSource everytime through treeview.dataSource.get(treeview.select()).load()
According to documentation here http://docs.kendoui.com/documentation/api/framework/node
If we can get the selected Node we can load it's children forcibly.But I haven't been able to have datasource.get() or dataSource.view()[] read the selected node so far..
PS I know this is not a complete answer but maybe it helps..
Hi all I am working in JS plumb library for making connections.I am stuck at one point and need help from experts.
Here is my scenario.
I have many connections and what I want is that when I click on one connection a certain label appears on it to show that it is selected.When I click one some other connection previously clicked connection disappears and new connection get selected.
What I have done so far is that
jsPlumbInst.bind('click', function(c) {
c.showOverlay('selected');
var previously_active = jsPlumbInst.getConnections({scope:"active"});//this function not returning me values
if(previously_active.length != 0) {
/*So never go in this statement*/
previously_active[0].hideOverlay('selected');
previously_active.scope("jsPlumb_DefaultScope");
}
c.scope = "active";
});
Here the problem is that my connection scope is set to "active"
jsPlumbInst.getConnections({scope:"active"})
is not returning anything.
So can any one kindly guide me that whether I am doing right?
Or is there any other way to achieve this?
var sourcecon = jsPlumb.getConnections({source: e}) ;
for(i=0; i<sourcecon.length; i++)
{
var target = getName(sourcecon[i].targetId) ;
var source = getName(sourcecon[i].sourceId) ;
removefrommatrix(source, target,sourcecon[i].sourceId,sourcecon[i].targetId) ;
}
This is code snippet which I am using. It works fine. Your code looks fine except just one difference that you have used jsPlumbInst rather than jsPlumb. I guess that could be the problem. For me its like static class in Java.Not sure about that. But try and see if it could help you.Seems like I am almost a year late in replying. All the best :-)