svgjointjs

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


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!


Solution

  • 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',
                                },
                            ]
                        }
                    ]
                },
            ],
        });