CODEWITHSUNDEEP
javascripthtml5-canvaskonvajs
Arshad
Arshad

Reputation: 33

Not able to drag and transform rectangles in konva js when loaded with Konva.Node.create

I am struggling with the small project in which I want to add different slots and save in database.

All things are working fine as expected, I am saving the json in database and calling again on edit page.

Problem is the rectangles added by json are not draggable and not transformed.

my javascript code 

 var json = 'jsoncode';
// create node using json string
var stage = Konva.Node.create(json, 'canvas-container');

var layer = new Konva.Layer();
stage.add(layer);
layer.draw();   

stage.on('click', function (e) {
  // if click on empty area - remove all transformers
  if (e.target === stage) {
    stage.find('Transformer').destroy();
    layer.draw();
    return;
  }
  // do nothing if clicked NOT on our rectangles
  if (!e.target.hasName('rect')) {
    return;
  }
  // remove old transformers
  // TODO: we can skip it if current rect is already selected
  stage.find('Transformer').destroy();

  // create new transformer
  var tr = new Konva.Transformer();
  layer.add(tr);
  tr.attachTo(e.target);
  layer.draw();
});



$("#add-shape").click(function(e){
e.preventDefault();
addShape();
}); 

/********  add shape *********/
var addShape = function(){

console.log("add shape");
var $i = 1;

var layer = new Konva.Layer();
var parentContainer = new Konva.Rect({
        x: 30,
        y: 40,
        width: 200,
        height: 60,
        name: random_name(),
        fill: random_hex_color(),
        draggable: true,
        stroke: '#fff',
        strokeWidth: 1
    });
    layer.add(parentContainer);
    stage.add(layer);

    parentContainer.on('click',function(e){
      var tr = new Konva.Transformer();
      layer.add(tr);
      tr.attachTo(e.target);
      layer.draw();
    });


    /*
       * dblclick to remove box for desktop app
       * and dbltap to remove box for mobile app
       */
    parentContainer.on("dblclick dbltap", function() {
        this.destroy();
        stage.find('Transformer').destroy();
        layer.draw();
    });
    stage.on('click', function (e) {
  // if click on empty area - remove all transformers
    if (e.target === stage) {
      stage.find('Transformer').destroy();
      layer.draw();
      return;
    }
    });

    parentContainer.on("transform", function(e){
    console.log('Moving ' + e.target.name());
    //layer.draw();
    });

    parentContainer.on("dragend", function(e){
    console.log('X ' + e.target.x());
    //layer.draw();
    });
}

Upvotes: 0

Views: 1777

Answers (1)

lavrton
lavrton

Reputation: 20308

In your click event listener you have the condition:

// do nothing if clicked NOT on our rectangles
if (!e.target.hasName('rect')) {
  return;
}

But rectangles in your json don't have rect name. You should add this name, or remove the condition.

Upvotes: 1

Related Questions