can i change default size of elements on paper and stencil? [Jointjs] [RappidJS]

Question

I want to provide default size of elements when dragged to paper from stencil. I am using standard.image type of elements. Is it possible with rappid library?

Answer 1

As I understand, you want to have a certain size of elements in the stencil and change the size as soon as they are placed on the paper.

When you define your stencil elements, add the desired paper size as an attribute.

{
  type: 'standard.Image',
  size: { width: 100, height: 100 }, // stencil size
  paperSize: { width: 200, height: 200 }, // paper size
  attrs: { image: { xlinkHref: 'image.png' }}
}

Then use dragEndClone stencil option to clone and resize the element.

new joint.ui.Stencil({
  dragEndClone: function(el) {
    var clone = el.clone();
    var paperSize = el.get('paperSize');
    if (paperSize) {
      clone.resize(paperSize.width, paperSize.height);
      clone.unset('paperSize');
    }
    return clone; 
  }
});

Alternatively, you can use dragStartClone to use the paper size as soon as the user starts dragging an element from the stencil.