CODEWITHSUNDEEP
jointjsrappid
Dev
Dev

Reputation: 11

Adding new stencil option in BPMN editor with Rappid JS

I am using trial version of Rappid JS which has stencil with default options in bpmn editor. I need to add new element in the list so that I could use it and append inspector form associated with it.

Below is my code which i tried. This is required for POC to implement Rappid JS.

bpmn.js

stencil.load([
    new joint.shapes.bpmn.Gateway,
    new joint.shapes.bpmn.Activity,
    .
    .
    new joint,shapes.bpmn.myStencil
]);

inpector.js

window.inputs = {
    'bpmn.Gateway': {
        .
        .
    },
     .
     .
    'bpmn.myStencil':{
    //same as in-built Gateway code
    }
};

Error Shown:

joint.shapes.bpmn.myStencil is not a Constructor.

Upvotes: 0

Views: 487

Answers (1)

Dev
Dev

Reputation: 11

I get it done using below code inside bpmn.js:

joint.shapes.basic.Rect = joint.shapes.basic.Generic.extend({
    markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><text class="label"/></g>',

    defaults: joint.util.deepSupplement({
        type: 'basic.Rect',
        attrs: {
            'rect': { fill: 'white', stroke: 'black', 'follow-scale': true, width: 80, height: 40 },
            ".label":{text:"",ref:".body","ref-x":.5,"ref-dy":20,"y-alignment":"middle","x-alignment":"middle","font-size":14,"font-family":"Arial, helvetica, sans-serif",fill:"#000000"},
            'text': { 'font-size': 14, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle' }
        }
    }, joint.shapes.basic.Generic.prototype.defaults)
});

Upvotes: 1

Related Questions