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

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