2

I'm trying to create a drag and drop tool using Jquery UI to drop rooms of a house into a Konva stage and then save that stage as a JSON string.

Here is the JSFiddle: http://jsfiddle.net/RossWilliams94/cxzhabgL/4/

function dragDrop(e, ui) {
    // get the drop point
    var x = parseInt(ui.offset.left - offsetX, 10);
    var y = parseInt(ui.offset.top - offsetY, 10);

    // get the drop payload (here the payload is the image)
    var element = ui.draggable;
    var data = element.data("url");
    //var theImage = document.getElementById('bedroom');
    var theImage = element.data("image");
    // create a new Konva.Image at the drop point
    // be sure to adjust for any border width (here border==1)
    var image = new Konva.Image({
        name: data,
        x: x,
        y: y,
        image: theImage,
        draggable: true
    });

    image.on('dblclick', function() {
        image.remove();
        layer.draw();
    });

    var $clone = ui.helper.clone();
    // all clones are draggable
    // if clone is shape then draggable + resizable
    if (!$clone.is('.inside-droppable')) {
        $(this).append($clone.addClass('inside-droppable').draggable({
            containment: $stageContainer,
            tolerance: 'fit',
            cursor: 'pointer',
            position: 'relative',
            snap: true,
            snapTolerance: 15
        }));

        if ($clone.is(".imag") === false) {
            $clone.resizable({
                containment: $stageContainer
            });
        }
        $clone.on('dblclick', function () {
            $clone.remove();
            layer.draw();
        });
        $clone.css({top: y, left: x, position:'absolute'});
    }


    json = stage.toJSON();
    group.add(image);
    layer.add(group);
    stage.add(layer);

}

However the problem I have run into is that as you can see from the JSFiddle when I click the save button it doesn't save the rooms dropped in from the JQuery UI only the background and label.

Is it actually possible to accomplish this? Or is it because I'm using Jquery UI with Konva which creates the problems?

Thanks.

2 Answers 2

0

Not sure. However, I ran into a lot of problems with the same issue. www.onlinecakedesign.com -- click the bottom icon. I ended up saving only an image. The reason is -- parsing the object is not done through Kinetic. It uses standard JSON commands. And they do not parse Kinetic objects down to the finest detail. So you end up with much less results than expected. Maybe this is the problem you are having.

Kinetic JS doesn't do anything unique - it uses the standard logic, but the standard logic does not parse down to the tree level required to save a Kinetic JS object. Hope that makes sense.

1
  • I can save the Kinetic Stage using stage.toJSON() and then using Konva.Node.create(json, 'container') to recreate it. However the problem is that the rooms I drag from Jquery UI dont actually get saved to the stage when I use stage.toJSON(). Do you think I could solve my problem if I used two stages, one to drag the rooms from and the other to drag them into?
    – Ross
    Feb 19, 2015 at 16:44
0

I have fixed by problem by getting all children from the layer of type Image using var images = stage.find('Image');

Then I loop through images using images.each(function (image){};

Inside each iteration of the images in the stage I do:

var x = image.index - 2;
if (image.attrs['id'] == "sensor0") {

                    var imageObj = new Image();

                    imageObj.onload = function () {
                        stage.get('.sensor')[x].image(imageObj);
                        stage.get('.sensor')[x].draggable(false);
                        stage.draw();
                    };

                    imageObj.src = 'images/sensor.png';

Where it sets the correct image source to the image and make the image not draggable.

You can also add more if statements checking for the image id and setting the image source accordingly.

The problem was that when you do stage.toJSON() it doesn't record the image only attributes, you have to reload the image manually where you are redrawing the stage.

This tutorial helped: http://konvajs.github.io/docs/data_&_serialization/Complex_Load.html

Hope this helps anyone or if there are any better ways of doing this let me know!

1
  • Hint: It's a better performance to put stage.draw() after the each iteration Jun 29, 2016 at 13:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.