How to make a path in a custom JointJS element scale?

Question

I have the following custom JointJS element defined:

joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
{
    size: { width: 400, height: 100 },
    attrs: {
        body: {
            strokeWidth: 2,
            stroke: '#000000',
            fill: '#FFFFFF',
        },
    },
}, 
{
    markup: [
        {
            tagName: 'g',
            selector: 'g1',
            attributes: {
                class: 'rotatable',
            },
            children: [
                {
                    tagName: 'g',
                    selector: 'g2',
                    attributes: {
                        class: 'scalable',
                    },
                    children: [
                        {
                            tagName: 'path',
                            selector: 'body',
                            attributes: {
                                d: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25',
                            },
                        },
                    ]
                }
            ]
        },
    ],
});

Using resize or scale on the shape does not resize it, however. It always ends up being 400x100.

I thought the issue originally was that it needed to be wrapped in a class="scalable" <g> but that didn't fix it either.

I also tried using<line>s instead of <path> but no luck.

Thanks!

Answer 1

The answer is in the refDResetOffset attribute, which (like the other ref custom attributes scales with the parent):

joint.shapes.webtp.BowTie = joint.dia.Element.define('webtp.BowTie',
    {
        attrs: {
            body: {
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF',
                refDResetOffset: 'm0,0l0,100l200,-25l200,25l0,-100l-200,25l-200,-25'
            },
        },
    }, 
    {
        markup: [
            {
                tagName: 'g',
                selector: 'g1',
                attributes: {
                    class: 'rotatable',
                },
                children: [
                    {
                        tagName: 'g',
                        selector: 'g2',
                        attributes: {
                            class: 'scalable',
                        },
                        children: [
                            {
                                tagName: 'path',
                                selector: 'body',
                            },
                        ]
                    }
                ]
            },
        ],
    });