Skip to content
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

Simplifying marker rotation #11563

Merged
merged 3 commits into from
Mar 4, 2022
Merged

Simplifying marker rotation #11563

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05441e3
Removing unecessary calls to marker._transformedOffset()
SnailBones Mar 3, 2022
09eaae4
Fix
SnailBones Mar 4, 2022
2dbf60f
Replacing _transformedOffset function with CSS transforms
SnailBones Mar 4, 2022
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
30 changes: 11 additions & 19 deletions src/ui/marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,7 +413,7 @@ export default class Marker extends Evented {
const map = this._map;
if (!map) return;

const pos = this._pos ? this._pos.sub(this._transformedOffset()) : null;
const pos = this._pos;

if (!pos || pos.x < 0 || pos.x > map.transform.width || pos.y < 0 || pos.y > map.transform.height) {
this._clearFadeTimer();
Expand Down Expand Up @@ -450,10 +450,16 @@ export default class Marker extends Evented {
}

_updateDOM() {
const pos = this._pos || new Point(0, 0);
const pos = this._pos;
if (!pos) { return; }
const offset = this._offset.mult(this._scale);
const pitch = this._calculatePitch();
const rotation = this._calculateRotation();
this._element.style.transform = `${anchorTranslate[this._anchor]} translate(${pos.x}px, ${pos.y}px) rotateX(${pitch}deg) rotateZ(${rotation}deg)`;
this._element.style.transform = `
translate(${pos.x}px, ${pos.y}px) ${anchorTranslate[this._anchor]}
rotateX(${pitch}deg) rotateZ(${rotation}deg)
translate(${offset.x}px, ${offset.y}px)
`;
}

_calculatePitch(): number {
Expand Down Expand Up @@ -483,7 +489,7 @@ export default class Marker extends Evented {
this._lngLat = smartWrap(this._lngLat, this._pos, map.transform);
}

this._pos = map.project(this._lngLat)._add(this._transformedOffset());
this._pos = map.project(this._lngLat);

// because rounding the coordinates at every `move` event causes stuttered zooming
// we only round them when _update is called with `moveend` or when its called with
Expand Down Expand Up @@ -512,20 +518,6 @@ export default class Marker extends Evented {
});
}

/**
* This is initially added to fix the behavior of default symbols only, in order
* to prevent any regression for custom symbols in client code.
* @private
*/
_transformedOffset() {
if (!this._defaultMarker || !this._map) return this._offset;
const tr = this._map.transform;
const offset = this._offset.mult(this._scale);
if (this._rotationAlignment === "map") offset._rotate(tr.angle);
if (this._pitchAlignment === "map") offset.y *= Math.cos(tr._pitch);
return offset;
}

/**
* Get the marker's offset.
*
Expand Down Expand Up @@ -640,7 +632,7 @@ export default class Marker extends Evented {
// to calculate the new marker position.
// If we don't do this, the marker 'jumps' to the click position
// creating a jarring UX effect.
this._positionDelta = e.point.sub(this._pos).add(this._transformedOffset());
this._positionDelta = e.point.sub(this._pos);

this._pointerdownPos = e.point;

Expand Down