Connection Labeling, hover event, ...

7 posts, 1 answers
  1. Aleksander
    Aleksander avatar
    5 posts
    Member since:
    Jul 2013

    Posted 22 Jul 2014 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 24 Jul 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Aleksander
    Aleksander avatar
    5 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2014 in reply to Iliana Nikolova Link to this post

    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
  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 04 Aug 2014 Link to this post

    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!
     
  6. Sumit Shrivastava
    Sumit Shrivastava avatar
    1 posts
    Member since:
    Feb 2013

    Posted 12 Jun 2015 Link to this post

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

            });

  7. Mario
    Mario avatar
    8 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 Link to this post

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

  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 26 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready