rappid/rAppid.js

Changing shape at drop on paper

gabrielbalinca opened this issue · 4 comments

gabrielbalinca commented

'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 have to use).

Graph :

var graph = new joint.dia.Graph;

Paper :

var paper = new joint.dia.Paper({
el: $('.paper-container'),
width: 'calc(100% - 480px)',
height: '100%',
gridSize: 10,
drawGrid: true,
model: graph, // Set graph as the model for paper
defaultLink: function (elementView, magnet) {
return new joint.shapes.standard.Link({
attrs: {
line: {
strokeWidth: 2,
stroke: 'white'
}
}
});
},
interactive: { linkMove: false },
snapLinks: { radius: 70 },
defaultConnectionPoint: { name: 'boundary' }
});

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 when I did write dragEndClone line in the stencil :

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

it-ony commented

Seems like you created an issue for the wrong project.

From what I see, it seems the framework you're using has a null pointer. Most likely it tries to create a SVG node, but doesn't do so, and then has no reference to the SVG node where it tries to call getBBox.

gabrielbalinca commented

That error like I said come from this line :

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

I don't know what you mean by wrong project as example I used GettingStarted project.

it-ony commented

Wrong project means, you have created an issue for rAppid.js - the declaration js framework, but you actually have a problem with a different product/project/library which is not maintained in this repository.