Flip Element

[mkzaker]

Hi everyone, Is there a way to flip the elements?

[chill117]

Yes, you can use element.rotate(180).

[mkzaker]

there is a different between flip that i want to use and rotate(180) i want a case like mirror that change element direction but in rotate,element turn around a point i want to flip horizontal and vertical

[DavidDurman]

This is currently not supported. What you mean is a negative scale (http://stackoverflow.com/questions/23899718/scale-and-mirror-svg-object) which we don't support yet. However, it is definitely an interesting feature worth researching.

[kmansel]

+1 please. this would be a great feature to have. Can we get it on the roadmap?

[mkzaker]

+1 please

[kmansel]

Any news on this little guy?

[chill117]

Unfortunately none of us here have had time to tackle this issue just yet.

[kumilingus]

A workaround for time being that might help someone.

[kumilingus]

Here's yet another workaround (using a custom attribute).

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.

[gintarasgraciovas]

@kumilingus Has the team had a chance to implement this functionality?

[kumilingus]

No, our focus was elsewhere.

Using the calc expressions a solution can be simple as this:

joint.dia.Element.define('MyElement', {
    attrs: {
        wrapper: {
            // flip-x
            transform: 'scale(-1, 1) translate(-calc(w), 0)'
        },
    }
}, {
    markup: util.svg`
        <g @selector="wrapper">
            <path @selector="body" />
            <text @selector="label" />
        </g>
    `
});

/ flip-y
el.attr('wrapper/transform', 'scale(1, -1) translate(0, -calc(h))');

// flip-x and flip-y
// transform = 'scale(-1, -1) translate(-calc(w), -calc(h))'

Is this way of flipping not working for you? If not, please let us know why.