This is a migrated thread and some comments may be shown as answers.

Connection Labeling, hover event, ...

6 Answers 229 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Aleksander
Top achievements
Rank 1
Aleksander asked on 22 Jul 2014, 11:40 AM
Hello,

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

Sort by
0
Iliana Nikolova
Telerik team
answered on 24 Jul 2014, 09:06 AM
Hello Aleksander,

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,
},
Note with Kendo UI Q2 2014 official release this option is disabled by default (online demos);

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Aleksander
Top achievements
Rank 1
answered on 31 Jul 2014, 03:26 PM
Hello Iliana,

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
0
Accepted
Iliana Nikolova
Telerik team
answered on 04 Aug 2014, 02:23 PM
Hi 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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sumit Shrivastava
Top achievements
Rank 1
answered on 12 Jun 2015, 05:02 AM

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);                    
                }
            }

        });

0
Mario
Top achievements
Rank 1
answered on 23 Jun 2015, 05:22 PM

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}"

0
T. Tsonev
Telerik team
answered on 26 Jun 2015, 09:01 AM
Hi,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Diagram
Asked by
Aleksander
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Aleksander
Top achievements
Rank 1
Sumit Shrivastava
Top achievements
Rank 1
Mario
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or