Custom mode bar buttons are displayed upside down

[bruno-rino]

The mode bar icons that ship with plotly are for some reason flipped vertically. To compensate, plotly applies transformation matrix that includes a vertical flip (the -1 in the following line):

path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');

To illustrate: the following example of how to add a custom icon uses a SVG path that looks good, because it is actually an upside down image (I render the SVG inline for comparison): http://codepen.io/bruno-rino/pen/bgowQx

The -1 in the transformation matrix should be configurable. Or else any normal SVG path has to be flipped manually (and I don't know even how to go about doing that) before it can be used as an icon in the mode bar.

[etpinard]

Ha. Good catch.

Yes, our stock mode bar icons use bottom-to-top y axis (from fontastic.me I believe) which need to be flipped in the browser.

We have a few options here:

1- reverse our icons

in src/fonts/ploticons/ and remove the useless -1 matrix transform. Problem: some users might be currently using our built icons paths by accessing them here; this change might be considered backward incompatible.

2- add a general transform field

for example

modeBarButtonsToAdd: [{
    name: 'my icon',
    icon: /* icon string path */,
    ascent: 100,
    transform: 'matrix(1 0 0 -1 0 100)',
    click: function(gd) { }
}]

This solution might be too confusing for some.

3- add a flip boolean field

or direction: 'up' | 'down', ...

modeBarButtonsToAdd: [{
    name: 'my icon',
    icon: /* icon string path */,
    ascent: 100,
    filp: true,
    click: function(gd) { }
}]

---

Personally, I prefer a type 3 solution (once we agree on the field name and values) for its simplicity. unless you think we need to cover other cases through the API.

[rreusser]

Perhaps flipy is preferable both since it's more fully descriptive and since flipx could conceivably be useful too (left right arrows without needing two separate svg assets?)

[bruno-rino]

The spikeline icon required a special matrix; so maybe option 2 would be best?

[vdh]

So did anyone actually get around to fixing this, or are we forced to always have a flip transform applied to custom icons whether we like it or not?

[etpinard]

So did anyone actually get around to fixing this,

No.

or are we forced to always have a flip transform applied to custom icons whether we like it or not?

Right now, yes. But we're hoping to add an option as proposed in #1335 (comment)

[vdh]

@etpinard I could do a PR to implement option 2, it looks like the most robust solution.

[etpinard]

Resolved by @vdh 's #2762