Changing shape at drop on paper

Question

I'm using rappidjs 3.2 and I'm trying to make a stencil shape that changes shape when I drop it to the paper. For testing purposes I want to just print in the console the type of shape throught dragEndClone (As far as I understood from documentation this is what I need to use).

Stencil :

var stencil = new joint.ui.Stencil({
   paper: paper,
   scaleClones: true,
   width: 240,
   groups: {
       myShapesGroup1: { index: 1, label: 'My Shapes' }
   },
   dropAnimation: true,
   groupsToggleButtons: true,
   search: {
       '*': ['type', 'attrs/label/text']
   },
   layout: true, // Use default Grid Layout
   dragEndClone: function (el) {
        console.log(el.get('type'));
   }
});
document.querySelector('.stencil-container').appendChild(stencil.el);

Shape :

joint.dia.Element.define('standard.Rectangle', {
   attrs: {
       body: {
           refWidth: '100%',
           refHeight: '100%',
           strokeWidth: 0,
           stroke: '#000000',
           fill: {
               type: 'linearGradient',
               stops: [
                   { offset: '0%', color: '#FEB663' },
                   { offset: '100%', color: '#31D0C6' }
               ],
               // Top-to-bottom gradient.
               attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' }
           }
       },
       label: {
           textVerticalAnchor: 'middle',
           textAnchor: 'middle',
           rx: '1%',
           refX: '50%',
           refY: '50%',
           fontSize: 14,
           fill: '#333333',
           text: 'Siemans'
       }
   }
}, {
    markup: [{ tagName: 'rect', selector: 'body' }, { tagName: 'text', selector: 'label' }]
});

Add shape to stencil :

stencil.render().load({ myShapesGroup1: [{ type: 'standard.Rectangle' }] });

The code previously shown gives me this error :

rappid.js:50779 Uncaught TypeError: Cannot read property 'getBBox' of undefined
    at child.drop (rappid.js:50779)
    at child.onDragEnd (rappid.js:50638)
    at HTMLDocument.dispatch (jquery.js:5429)
    at HTMLDocument.elemData.handle

Answer 1

dragEndClone needs to return an element.

dragEndClone: function (el) {
  console.log(el.get('type'));
  return el.clone();
}