8000 Align interactions when plot created inside scaled and/or translated elements using CSS transform by alexhartstone · Pull Request #5193 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content
8000

Align interactions when plot created inside scaled and/or translated elements using CSS transform #5193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 63 commits into from
Nov 18, 2020
Merged

Align interactions when plot created inside scaled and/or translated elements using CSS transform #5193

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
b9a5d35
888: transform hover event coords to fit css scaling transform
alexhartstone Sep 29, 2020
5e6eee9
888: fix cartesian dragbox
alexhartstone Oct 12, 2020
1741a4a
fix syntax in new files
archmoj Oct 21, 2020
f0232c4
some minor changes
archmoj Oct 21, 2020
3b63fe6
renaming variables and method since list of all elements includes the…
archmoj Oct 21, 2020
5c60d5e
lets not touch dragbox keys
archmoj Oct 21, 2020
2529474
drop unused functions
archmoj Oct 21, 2020
b8e7c6a
declare isMiddle variable in hover
archmoj Oct 22, 2020
0b4f74a
correct size of hover box and position of text
archmoj Oct 22, 2020
a6aeafa
decompose scales when there is also rotation
archmoj Oct 22, 2020
7e8a0e8
drop unused function
archmoj Oct 22, 2020
41820ce
refactor matrix
archmoj Oct 22, 2020
d7665f3
fixup translate within inverseTransformMatrix function
archmoj Oct 22, 2020
c0868c2
replace invert function with gl-mat3 to compute determinant etc. corr…
archmoj Oct 22, 2020
7625a67
use parentNode instead of parentElement for IE support
archmoj Oct 22, 2020
46ed093
increase computed style calls - new one added in hover
archmoj Oct 22, 2020
44769fa
bypass and return default matrix if encountered a problem instead of …
archmoj Oct 22, 2020
463a0ab
transform drag start position
archmoj Oct 22, 2020
e7d9a53
adjust cartesian drag box endpoint in respect to scales
archmoj Oct 22, 2020
080034b adjust cartesian select start and end point according to parent trans…
archmoj Oct 22, 2020
2bfc471
adjust trace name hover text and box
archmoj Oct 23, 2020
1b78028
adjust left and right alignments
archmoj Oct 23, 2020
f412175
adjust vertical offset between multiple hover boxes
archmoj Oct 23, 2020
825d962
compute inverse transform at graph main div level not the event target
archmoj Oct 23, 2020
7e26e91
compute inverse transform for gd at makePlotFramwork and stash it on …
archmoj Oct 23, 2020
c137f14
no need for extra adjustment for y offset
archmoj Oct 23, 2020
bedbee7
adjust scale of svg hover container in respect to transform for gl3d …
archmoj Oct 23, 2020
2c810fc
handle cases where css transform has a length of 16 using 4x4 matrices
archmoj Oct 26, 2020
c409a28
fixup matrix for translate
archmoj Oct 29, 2020
68f5add
888: cartesian hover test
alexhartstone Nov 2, 2020
8e64281
888: changed transformPlot fn, added dragzoom test
alexhartstone Nov 3, 2020
dbc5232
888: select test
alexhartstone Nov 4, 2020
07b934b
888: more flexible transform testing
alexhartstone Nov 4, 2020
d75c018
888: polar hover test
alexhartstone Nov 5, 2020
d31244a
888: fix polar dragzoom
alexhartstone Nov 9, 2020
94f685f
888: fixed cartesian pan
alexhartstone Nov 10, 2020
435945b
888: use scale factors in polar too for performance
alexhartstone Nov 10, 2020
f3c03cd
888: assign scales at makePlotFramework
alexhartstone Nov 16, 2020
23b4d3c
888: fix polar plot rotation
alexhartstone Nov 16, 2020
84ede31
888: fix alignHTMLWith
archmoj Nov 16, 2020
4b1bf62
888: various syntax fixes
archmoj Nov 16, 2020
d3b548f
888: adjust scatter mapbox hover when css transition is present
archmoj Nov 16, 2020
4e1fd5f
drop unused argument
archmoj Nov 16, 2020
76afc6c
a bit of optimization in choropleth/hover - avoid creating the same a…
archmoj Nov 16, 2020
0117b41
888: fixup scattermapbox both select and hover
archmoj Nov 16, 2020
4980e24
return correct latitude and longitude from mapbox p2c
archmoj Nov 16, 2020
88b24f6
offsetX and offsetY are now implemented in FireFox - remove from blac…
archmoj Nov 17, 2020
b2eed52
888: added polar drag and select tests
alexhartstone Nov 17, 2020
8cc496c
fixup polar test
archmoj Nov 17, 2020
1dee019
expand and fix tests
archmoj Nov 17, 2020
02b6f79
removed hacky clientX and clientY from scattermaobox events
archmoj Nov 17, 2020
805d97b
add scattermapbox tests when css transform is present
archmoj Nov 17, 2020
127f171
expand choropleth hover tests to cover css transform
archmoj Nov 17, 2020
12a57c9
expand choroplethmapbox hover tests to cover css transform
archmoj Nov 17, 2020
34845ec
expand select tests for various traces to cover css transform
archmoj Nov 18, 2020
29e772d
expand ternary hover and drag zoom tests to cover css transform
archmoj Nov 18, 2020
28a9178
remove dirty matrix validation - take care of matrix3d form instead
archmoj Nov 18, 2020
a2f34c9
adjust hover positions on parcats category bands in respect to css tr…
archmoj Nov 18, 2020
9fe42b6
adjust hover positions on sankey nodes in respect to css transforms
archmoj Nov 18, 2020
5681a34
bypass test
archmoj Nov 18, 2020
e94ef47
bapass on more flaky test to pass on the CI
archmoj Nov 18, 2020
9cc0a15
integrate fullLayout inverseTransform and m shorthand
archmoj Nov 18, 2020
95a81fc
refactor polar fix
archmoj Nov 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
compute inverse transform for gd at makePlotFramwork and stash it on … 
…fullLayout
  • Loading branch information
@archmoj
archmoj committed Oct 23, 2020
commit 7e26e91b0cebada7f80eb34ed9b454cf53844a7e
14 changes: 3 additions & 11 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,6 @@ var HOVERTEXTPAD = constants.HOVERTEXTPAD;
exports.hover = function hover(gd, evt, subplot, noHoverEvent) {
gd = Lib.getGraphDiv(gd);

if(gd._inverseTransform === undefined) {
gd._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(gd));
}

Lib.throttle(
gd._fullLayout._uid + constants.HOVERID,
constants.HOVERMINTIME,
Expand Down Expand Up @@ -196,11 +192,7 @@ exports.loneHover = function loneHover(hoverItems, opts) {
d.offset -= anchor;
});

var gd = opts.gd;
if(gd._inverseTransform === undefined) {
gd._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(gd));
}
alignHoverText(hoverLabel, fullOpts.rotateLabels, gd._inverseTransform);
alignHoverText(hoverLabel, fullOpts.rotateLabels, opts.gd._fullLayout._inverseTransform);

return multiHover ? hoverLabel : hoverLabel.node();
};
Expand Down Expand Up @@ -344,7 +336,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
xpx = evt.clientX - dbb.left;
ypx = evt.clientY - dbb.top;

var transformedCoords = Lib.apply2DTransform(gd._inverseTransform)(xpx, ypx);
var transformedCoords = Lib.apply2DTransform(fullLayout._inverseTransform)(xpx, ypx);

xpx = transformedCoords[0];
ypx = transformedCoords[1];
Expand Down Expand Up @@ -729,7 +721,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {

if(!helpers.isUnifiedHover(hovermode)) {
hoverAvoidOverlaps(hoverLabels, rotateLabels ? 'xa' : 'ya', fullLayout);
alignHoverText(hoverLabels, rotateLabels, gd._inverseTransform);
alignHoverText(hoverLabels, rotateLabels, fullLayout._inverseTransform);
}

// TODO: tagName hack is needed to appease geo.js's hack of using evt.target=true
Expand Down
3 changes: 3 additions & 0 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3714,6 +3714,9 @@ function purge(gd) {
function makePlotFramework(gd) {
var gd3 = d3.select(gd);
var fullLayout = gd._fullLayout;
if(fullLayout._inverseTransform === undefined) {
fullLayout._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(gd));
}

// Plot container
fullLayout._container = gd3.selectAll('.plot-container').data([0]);
Expand Down
7 changes: 2 additions & 5 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,14 +327,11 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
x0 = startX - dragBBox.left;
y0 = startY - dragBBox.top;

if(gd._inverseTransform === undefined) {
gd._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(e.target));
}
var transformedCoords = Lib.apply2DTransform(gd._inverseTransform)(x0, y0);
var transformedCoords = Lib.apply2DTransform(gd._fullLayout._inverseTransform)(x0, y0);
x0 = transformedCoords[0];
y0 = transformedCoords[1];

var m = gd._inverseTransform;
var m = gd._fullLayout._inverseTransform;
var scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]);
var scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]);

Expand Down
8 changes: 2 additions & 6 deletions src/plots/cartesian/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,10 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
var x0 = startX - dragBBox.left;
var y0 = startY - dragBBox.top;

if(gd._inverseTransform === undefined) {
gd._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(e.target));
}

var transformedCoords = Lib.apply2DTransform(gd._inverseTransform)(x0, y0);
var transformedCoords = Lib.apply2DTransform(fullLayout._inverseTransform)(x0, y0);
x0 = transformedCoords[0];
y0 = transformedCoords[1];
var m = gd._inverseTransform;
var m = fullLayout._inverseTransform;
var scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]);
var scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]);

Expand Down
0