Search code examples
javascriptjointjsrappid

JointJS Rappid Toolkit Diamond shape?

I want to add a diamond shape to the Rappid stencil like I added the rectangle and the circle.

var r = new joint.shapes.basic.Rect({ 
    position: { x: 10, y: 10 }, size: { width: 50, height: 30 },
    attrs: { rect: { fill: '#2ECC71' }, text: { text: 'rect', fill: 'black' } }
});
var c = new joint.shapes.basic.Circle({ 
    position: { x: 70, y: 10 }, size: { width: 50, height: 30 },
    attrs: { circle: { fill: '#9B59B6' }, text: { text: 'circle', fill: 'white' } }
});



stencil.load([r, c]);

I tried using new joint.shapes.basic.Diamond but it doesn't seem that there's such object.

Solution

  • You can use the joint.shapes.basic.Path to create an arbitrary shaped element. A diamond, or rhombus, can be defined as:

    var rhombus = new joint.shapes.basic.Path({
   size: { width: 70, height: 70 },
   attrs: {
       path: { d: 'M 30 0 L 60 30 30 60 0 30 z', fill: 'blue' },
       text: { text: 'Rhombus', 'ref-y': .5, fill: 'white' }
   }
})

    Note the d attribute which consists of SVG path data (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).