How to obtain ID of Konva Label from Konva's 'dblclick' event

Question

I'm looking for a way to obtain ID (123 in the code below) of a Konva Label ("Hello World!" in the code below) from Konva's 'dblclick' event.

I could obtain ID (321 in the code below) of a Konva Image (Konva's LOGO "K" in the code below) from both of Konva's 'dblclick' and 'dragmove' events. Also I could obtain the ID (123 in the code below) of the Konva Label ("Hello World!") from 'dragmove' event; however I couldn't obtain the ID (123 in the code below) of the Konva Label ("Hello World!") from Konva's 'dblclick' event.

My code:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <span id="container"></span>
    </body>
    <script>
        //Konva Stage
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
        });
        //Konva Layer
        var layer = new Konva.Layer();
        stage.add(layer);
        //Konva Image
        var imageObj = new Image();
        imageObj.src = 'https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png';
        imageObj.addEventListener('load', function() {
            var kImage = new Konva.Image({
                x: window.innerWidth*2.5/10,
                y: window.innerHeight*1/10,
                image: imageObj,
                id: 321,
                draggable: true,
            });
            layer.add(kImage);
            layer.draw();
        });
        //Konva Label
        WordLabel = new Konva.Label({
            x: window.innerWidth*3/10,
            y: window.innerHeight*4/10,
            opacity: 0.75,
            draggable: true,
            fill: 'green',
            id: 123,
        });
        //Konva Tag
        WordLabel.add(
            new Konva.Tag({
                fill: 'green',
            })
        );
        //Konva Text
        WordLabel.add(
            new Konva.Text({
                text: 'Hello World!',
                fontFamily: 'Calibri',
                fontSize: 18,
                padding: 5,
                fill: 'white',
                strokeWidth: 0,
            })
        );
        layer.add(WordLabel);
        layer.draw();
        //Konva dragstart event
        stage.on('dragstart', function(e) {
            console.log('ID (dragstart) = ' + parseInt(e.target.id()));
        });
        //Konva dblclick event
        stage.on('dblclick dbltap', function (e) {
            console.log('ID (dblclick) = ' +parseInt(e.target.id()));
        });
    </script>
</html>

score 2 · Accepted Answer · answered Oct 22 '20 at 10:33

If you look at the e.target object you can see that it is the text node rather than the label node that received the click.

Use e.target.findAncestors (see shape API) to get and iterate the shape hierarchy looking for an ancestor shape with the ID attribute you seek.

Working snippet below.

        //Konva Stage
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
        });
        //Konva Layer
        var layer = new Konva.Layer();
        stage.add(layer);
        //Konva Image
        var imageObj = new Image();
        imageObj.src = 'https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png';
        imageObj.addEventListener('load', function() {
            var kImage = new Konva.Image({
                x: window.innerWidth*2.5/10,
                y: window.innerHeight*1/10,
                image: imageObj,
                id: 321,
                draggable: true,
            });
            layer.add(kImage);
            layer.draw();
        });
        //Konva Label
        WordLabel = new Konva.Label({
            x: 10,
            y: 20,
            opacity: 0.75,
            draggable: true,
            fill: 'green',
            id: 123,
        });
        //Konva Tag
        WordLabel.add(
            new Konva.Tag({
                fill: 'green'
            })
        );
        //Konva Text
        WordLabel.add(
            new Konva.Text({
                text: 'Hello World!',
                fontFamily: 'Calibri',
                fontSize: 18,
                padding: 5,
                fill: 'white',
                strokeWidth: 0
            })
        );
        layer.add(WordLabel);
        layer.draw();
        //Konva dragstart event
        stage.on('dragstart', function(e) {
            console.log('ID (dragstart) = ' + parseInt(e.target.id()));
        });
        //Konva dblclick event
        stage.on('dblclick dbltap', function (e) {
            
            // Looking for a specif attr on a parent shape. In this 
            // case we know the parent is a Label so search for ancestors of that type
            var nodes = e.target.findAncestors('Label', true);
            if (nodes.length > 0) {
            
                for (var i = 0; i < nodes.length; i++){
                  var id = nodes[i].getAttr("id")              
                  console.log('shape ' + i + ' ID (dblclick)', id )
                }
              }
            else {
                  console.log('ID (dblclick) = ' + parseInt(e.target.id()));
            }
            
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <span id="container"></span>
    </body>
    <script>

    </script>
</html>

Dear @VanquishedWombat, you are my GOD. Thank you so much for your super greatest helpful and kindest answer! Appreciated, appreciated, appreciated!! It helped me completely and also I learned a lot from the answer. It will likely be my epoch‐making Q&A in my javascript life. How kind you are!! Thank you so much!!! (In the end, please allow me to report that jquery.min.js wasn't necessary in my test environment, which is Google Chrome Version 85.0.4183.121). — Rio, Oct 22 '20 at 15:11
Thanks - though I think you may be overreacting. The jq min was my bad - a reflex action! — Vanquished Wombat, Oct 22 '20 at 15:21
Never exaggerated for me, since I remenber you kindky gave me exact and detailed answers before. I couldn't solve this problem by web searching. You descended and saved me. I felt you were GOD. You always helped me lots!!! Thank you so much for your kindness. — Rio, Oct 22 '20 at 16:07

How to obtain ID of Konva Label from Konva's 'dblclick' event

1 Answers1