Rank 1
1. As soon as a connection is double clicked, an input pops up and the label may be entered. Is it possible to disable this functionality?
2. Is it possible to detect the hover event for shapes and connections?
3. Is it possible to allow only connected connections? In other words, connections which are connecting shape A and shape B.
4. is it possible to set the default connector dimensions? (diameter or radius).
Best regards,
Aleksander
6 Answers, 1 is accepted
Straight to the questions:
1. As soon as a connection is double clicked, an input pops up and the label may be entered. Is it possible to disable this functionality? For this requirement you should set shapeDefaults.editable option to false:
//.....shapeDefaults: { //..... editable: false,},2. Is it possible to detect the hover event for shapes and connections? Currently Kendo UI Diagram does not raise a hover event for its shapes / connectors. We will appreciate it if you submit this idea as a feature request at our UserVoice page - this way the community would be able to evaluate it and if the suggestion gains popularity we will consider its implementation;
3. Is it possible to allow only connected connections? In other words, connections which are connecting shape A and shape B.
I am not quite sure if I understand this requirement correctly - could you please elaborate a bit more?
4. is it possible to set the default connector dimensions? (diameter or radius).
You can set connector dimension via its configuration options. As an example:
//.... connectionDefaults: { stroke: { //.... width: 20 },}Regards,
Iliana Nikolova
Telerik
Rank 1
Sorry for time gap, but I had to prepare some examples
1. With shapeDefaults.editable option set to false I cannot create connections. My intention is to create connections but without labels. So I just don't want to an input box show up when i double click the connection.
3. Let me put it other way. With diagram we can use connections to connect shapes but we can also just "draw" a connection between two points on the canvas. From my application's point of view this kind of connection is "illegal". So as soon as connection is created by user I would like to chek if this connection connects two shapes and if not, I would like remove it (this is like in ERD/UML Class diagrams: only connection between two tables/classes makes sense).
4. I've meant connectors (white dots) not connections. I would like them to be "bigger"
Here is also weird thing (bug?). I have example of "drawing tool" (based on telerik's example) http://jsbin.com/magob/1 created with version 2014.1.528. Works as expected, but with version 2014.2.716 http://jsbin.com/kuwebocu/2 I cannot use some of my shapes (reducer, tee) anymore. Did you change tle legal path definition?
Best regards,
Aleksander
Up to the questions / requirements:
1. I would suggest to upgrade to Kendo UI Q2 2014 official release as there is no another approach for this requirement which I can suggest;
3. For this requirement I would suggest to attach a handler to the diagram select event, check if the connection connects two shapes and if not - remove it. For your convenience here is a simple example which demonstrates the suggested approach in action;
4. Apologies for the misunderstanding. For this requirement you can use width / height options of connectorDefaults / connectionDefaults.selection (dojo example) ;
Here is also weird thing (bug?)....
It appears the observed behaviour is due to a bug in the current version of Kendo UI Diagram, however we have managed to address it and the fix will be included in our next internal build. Meanwhile I would suggest to change the path for Tee and Reducer shapes:
<span class="shapeItem" data-shape='{"type":"trojnik","path":"m 0,45 l 15,0 0,15 30,0 0,-60 -30,0 0,15 -15,0 z","connectors":[{"name":"left"},{"name":"top"},{"name":"bottom"}]}' style="background-position: -120px 0" data-role="draggable"></span>//....<span class="shapeItem" data-shape='{"type":"reduktor","path":"M 0,20 L 60,0 60,60 0,40 z","connectors":[{"name":"left"},{"name":"right"}]}' style="background-position: -180px 0" data-role="draggable"></span>Regards,
Iliana Nikolova
Telerik
Rank 1
how can add/edit label on connection between two shapes
$("#diagram").kendoDropTarget({
drop: function (e) {
var item, pos, transformed;
if (e.draggable.hint) {
item = e.draggable.hint.data("shape");
pos = e.draggable.hintOffset;
pos = new Point(pos.left, pos.top);
var transformed = diagram.documentToModel(pos);
item.x = transformed.x;
item.y = transformed.y;
var timestamp = Number(new Date()); // current time as number
if (item.type == "starttask") {
item.id = "starttask_" + timestamp.toString();
item.path = "M74.5,37.5 C74.5,57.91 57.91,74.5 37.5,74.5 C17,74.5 0.5,57.91 0.5,37.5 C0.5,17 17,0.5 37.5,0.5 C57.91,0.5 74.5,17 74.5,37.5 z";
item.fill = "#46BA7D";
item.content = {
align: 'center middle',
color: 'white',
text: 'Start Task'
};
}
diagram.addShape(item);
}
}
});
Rank 1
Can i put something like this
source : 'data:image/svg+xml;base64,etcetc', inside data-shape="" ?
ou a custom shape like:
data-shape="{visual: myCustomElementMethod}"Please accept my apologies for the delayed response.
The connection label is available as content.text. It can be set on existing connections like this:
var connection = $("#diagram").data("kendoDiagram").connections[0];
connection.redraw({ content: { text: "Foo" } });
The diagram shapes can import paths using the SVG syntax, but can't process entire SVG documents. For example:
data-shape="{"path":"m60,0 L108.12,23.17 L120,75.24 L86.7,116.99 L33.3,116.99 L0,75.24 L11.88,23.17 z"}"
Otherwise you're free to set any data attributes as longer you can process them as required in the drop handler.
I hope this helps.
Regards,
T. Tsonev
Telerik