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

Remove outdated DOM utilities and simplify marker SVG #11321

Merged
merged 4 commits into from
Dec 1, 2021
Merged

Remove outdated DOM utilities and simplify marker SVG #11321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f97665
remove outdated dom utilities
mourner Dec 1, 2021
68f1f5b
simplify svg code
mourner Dec 1, 2021
29a74f9
simplify and cleanup marker svg
mourner Dec 1, 2021
6d27042
svg cleanup
mourner Dec 1, 2021
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
2 changes: 1 addition & 1 deletion src/ui/control/attribution_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ class AttributionControl {
}

onRemove() {
DOM.remove(this._container);
this._container.remove();

this._map.off('styledata', this._updateData);
this._map.off('sourcedata', this._updateData);
Expand Down
2 changes: 1 addition & 1 deletion src/ui/control/fullscreen_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ class FullscreenControl {
}

onRemove() {
DOM.remove(this._controlContainer);
this._controlContainer.remove();
this._map = (null: any);
window.document.removeEventListener(this._fullscreenchange, this._changeIcon);
}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/control/geolocate_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ class GeolocateControl extends Evented {
this._accuracyCircleMarker.remove();
}

DOM.remove(this._container);
this._container.remove();
this._map.off('zoom', this._onZoom);
this._map = (undefined: any);
numberOfWatches = 0;
Expand Down
2 changes: 1 addition & 1 deletion src/ui/control/logo_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class LogoControl {
}

onRemove() {
DOM.remove(this._container);
this._container.remove();
this._map.off('sourcedata', this._updateLogo);
this._map.off('resize', this._updateCompact);
}
Expand Down
30 changes: 15 additions & 15 deletions src/ui/control/navigation_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ class NavigationControl {
}

onRemove() {
DOM.remove(this._container);
this._container.remove();
if (this.options.showZoom) {
this._map.off('zoom', this._updateZoomButtons);
}
Expand Down Expand Up @@ -172,11 +172,11 @@ class MouseRotateWrapper {
if (pitch) this.mousePitch = new MousePitchHandler({clickTolerance: map.dragRotate._mousePitch._clickTolerance});

bindAll(['mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend', 'reset'], this);
DOM.addEventListener(element, 'mousedown', this.mousedown);
DOM.addEventListener(element, 'touchstart', this.touchstart, {passive: false});
DOM.addEventListener(element, 'touchmove', this.touchmove);
DOM.addEventListener(element, 'touchend', this.touchend);
DOM.addEventListener(element, 'touchcancel', this.reset);
element.addEventListener('mousedown', this.mousedown);
element.addEventListener('touchstart', this.touchstart, {passive: false});
element.addEventListener('touchmove', this.touchmove);
element.addEventListener('touchend', this.touchend);
element.addEventListener('touchcancel', this.reset);
}

down(e: MouseEvent, point: Point) {
Expand All @@ -197,24 +197,24 @@ class MouseRotateWrapper {

off() {
const element = this.element;
DOM.removeEventListener(element, 'mousedown', this.mousedown);
DOM.removeEventListener(element, 'touchstart', this.touchstart, {passive: false});
DOM.removeEventListener(element, 'touchmove', this.touchmove);
DOM.removeEventListener(element, 'touchend', this.touchend);
DOM.removeEventListener(element, 'touchcancel', this.reset);
element.removeEventListener('mousedown', this.mousedown);
element.removeEventListener('touchstart', this.touchstart, {passive: false});
element.removeEventListener('touchmove', this.touchmove);
element.removeEventListener('touchend', this.touchend);
element.removeEventListener('touchcancel', this.reset);
this.offTemp();
}

offTemp() {
DOM.enableDrag();
DOM.removeEventListener(window, 'mousemove', this.mousemove);
DOM.removeEventListener(window, 'mouseup', this.mouseup);
window.removeEventListener('mousemove', this.mousemove);
window.removeEventListener('mouseup', this.mouseup);
}

mousedown(e: MouseEvent) {
this.down(extend({}, e, {ctrlKey: true, preventDefault: () => e.preventDefault()}), DOM.mousePos(this.element, e));
DOM.addEventListener(window, 'mousemove', this.mousemove);
DOM.addEventListener(window, 'mouseup', this.mouseup);
window.addEventListener('mousemove', this.mousemove);
window.addEventListener('mouseup', this.mouseup);
}

mousemove(e: MouseEvent) {
Expand Down
2 changes: 1 addition & 1 deletion src/ui/control/scale_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class ScaleControl {
}

onRemove() {
DOM.remove(this._container);
this._container.remove();
this._map.off('move', this._onMove);
this._map = (undefined: any);
}
Expand Down
5 changes: 2 additions & 3 deletions src/ui/handler/box_zoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,7 @@ class BoxZoomHandler {

this._map._requestDomTask(() => {
if (this._box) {
DOM.setTransform(this._box, `translate(${minX}px,${minY}px)`);

this._box.style.transform = `translate(${minX}px,${minY}px)`;
this._box.style.width = `${maxX - minX}px`;
this._box.style.height = `${maxY - minY}px`;
}
Expand Down Expand Up @@ -163,7 +162,7 @@ class BoxZoomHandler {
this._container.classList.remove('mapboxgl-crosshair');

if (this._box) {
DOM.remove(this._box);
this._box.remove();
this._box = (null: any);
}

Expand Down
8 changes: 5 additions & 3 deletions src/ui/handler_manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ class HandlerManager {
_updatingCamera: boolean;
_changes: Array<[HandlerResult, Object, any]>;
_previousActiveHandlers: { [string]: Handler };
_listeners: Array<[HTMLElement, string, void | {passive?: boolean, capture?: boolean}]>;
_listeners: Array<[HTMLElement, string, void | EventListenerOptionsOrUseCapture]>;
_trackingEllipsoid: TrackingEllipsoid;
_dragOrigin: ?vec3;

Expand Down Expand Up @@ -219,13 +219,15 @@ class HandlerManager {
];

for (const [target, type, listenerOptions] of this._listeners) {
DOM.addEventListener(target, type, target === window.document ? this.handleWindowEvent : this.handleEvent, listenerOptions);
const listener = target === window.document ? this.handleWindowEvent : this.handleEvent;
target.addEventListener((type: any), (listener: any), listenerOptions);
}
}

destroy() {
for (const [target, type, listenerOptions] of this._listeners) {
DOM.removeEventListener(target, type, target === window.document ? this.handleWindowEvent : this.handleEvent, listenerOptions);
const listener = target === window.document ? this.handleWindowEvent : this.handleEvent;
target.removeEventListener((type: any), (listener: any), listenerOptions);
}
}

Expand Down
123 changes: 27 additions & 96 deletions src/ui/marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default class Marker extends Evented {
_popup: ?Popup;
_lngLat: LngLat;
_pos: ?Point;
_color: ?string;
_color: string;
_scale: number;
_defaultMarker: boolean;
_draggable: boolean;
Expand Down Expand Up @@ -117,107 +117,38 @@ export default class Marker extends Evented {
this._element.setAttribute('aria-label', 'Map marker');

// create default map marker SVG
const svg = DOM.createNS('http://www.w3.org/2000/svg', 'svg');
const defaultHeight = 41;
const defaultWidth = 27;
svg.setAttributeNS(null, 'display', 'block');
svg.setAttributeNS(null, 'height', `${defaultHeight}px`);
svg.setAttributeNS(null, 'width', `${defaultWidth}px`);
svg.setAttributeNS(null, 'viewBox', `0 0 ${defaultWidth} ${defaultHeight}`);

const markerLarge = DOM.createNS('http://www.w3.org/2000/svg', 'g');
markerLarge.setAttributeNS(null, 'stroke', 'none');
markerLarge.setAttributeNS(null, 'stroke-width', '1');
markerLarge.setAttributeNS(null, 'fill', 'none');
markerLarge.setAttributeNS(null, 'fill-rule', 'evenodd');

const page1 = DOM.createNS('http://www.w3.org/2000/svg', 'g');
page1.setAttributeNS(null, 'fill-rule', 'nonzero');

const shadow = DOM.createNS('http://www.w3.org/2000/svg', 'g');
shadow.setAttributeNS(null, 'transform', 'translate(3.0, 29.0)');
shadow.setAttributeNS(null, 'fill', '#000000');

const ellipses = [
{'rx': '10.5', 'ry': '5.25002273'},
{'rx': '10.5', 'ry': '5.25002273'},
{'rx': '9.5', 'ry': '4.77275007'},
{'rx': '8.5', 'ry': '4.29549936'},
{'rx': '7.5', 'ry': '3.81822308'},
{'rx': '6.5', 'ry': '3.34094679'},
{'rx': '5.5', 'ry': '2.86367051'},
{'rx': '4.5', 'ry': '2.38636864'}
];

for (const data of ellipses) {
const ellipse = DOM.createNS('http://www.w3.org/2000/svg', 'ellipse');
ellipse.setAttributeNS(null, 'opacity', '0.04');
ellipse.setAttributeNS(null, 'cx', '10.5');
ellipse.setAttributeNS(null, 'cy', '5.80029008');
ellipse.setAttributeNS(null, 'rx', data['rx']);
ellipse.setAttributeNS(null, 'ry', data['ry']);
shadow.appendChild(ellipse);
}

const background = DOM.createNS('http://www.w3.org/2000/svg', 'g');
background.setAttributeNS(null, 'fill', this._color);

const bgPath = DOM.createNS('http://www.w3.org/2000/svg', 'path');
bgPath.setAttributeNS(null, 'd', 'M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z');

background.appendChild(bgPath);

const border = DOM.createNS('http://www.w3.org/2000/svg', 'g');
border.setAttributeNS(null, 'opacity', '0.25');
border.setAttributeNS(null, 'fill', '#000000');

const borderPath = DOM.createNS('http://www.w3.org/2000/svg', 'path');
borderPath.setAttributeNS(null, 'd', 'M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z');

border.appendChild(borderPath);

const maki = DOM.createNS('http://www.w3.org/2000/svg', 'g');
maki.setAttributeNS(null, 'transform', 'translate(6.0, 7.0)');
maki.setAttributeNS(null, 'fill', '#FFFFFF');

const circleContainer = DOM.createNS('http://www.w3.org/2000/svg', 'g');
circleContainer.setAttributeNS(null, 'transform', 'translate(8.0, 8.0)');

const circle1 = DOM.createNS('http://www.w3.org/2000/svg', 'circle');
circle1.setAttributeNS(null, 'fill', '#000000');
circle1.setAttributeNS(null, 'opacity', '0.25');
circle1.setAttributeNS(null, 'cx', '5.5');
circle1.setAttributeNS(null, 'cy', '5.5');
circle1.setAttributeNS(null, 'r', '5.4999962');

const circle2 = DOM.createNS('http://www.w3.org/2000/svg', 'circle');
circle2.setAttributeNS(null, 'fill', '#FFFFFF');
circle2.setAttributeNS(null, 'cx', '5.5');
circle2.setAttributeNS(null, 'cy', '5.5');
circle2.setAttributeNS(null, 'r', '5.4999962');

circleContainer.appendChild(circle1);
circleContainer.appendChild(circle2);

page1.appendChild(shadow);
page1.appendChild(background);
page1.appendChild(border);
page1.appendChild(maki);
page1.appendChild(circleContainer);

svg.appendChild(page1);

svg.setAttributeNS(null, 'height', `${defaultHeight * this._scale}px`);
svg.setAttributeNS(null, 'width', `${defaultWidth * this._scale}px`);

this._element.appendChild(svg);
const svg = DOM.createSVG('svg', {
display: 'block',
height: `${defaultHeight * this._scale}px`,
width: `${defaultWidth * this._scale}px`,
viewBox: `0 0 ${defaultWidth} ${defaultHeight}`
}, this._element);

const gradient = DOM.createSVG('radialGradient', {id: 'shadowGradient'}, DOM.createSVG('defs', {}, svg));
DOM.createSVG('stop', {offset: '10%', 'stop-opacity': 0.4}, gradient);
DOM.createSVG('stop', {offset: '100%', 'stop-opacity': 0.05}, gradient);
DOM.createSVG('ellipse', {cx: 13.5, cy: 34.8, rx: 10.5, ry: 5.25, fill: 'url(#shadowGradient)'}, svg); // shadow

DOM.createSVG('path', { // marker shape
fill: this._color,
d: 'M27,13.5C27,19.07 20.25,27 14.75,34.5C14.02,35.5 12.98,35.5 12.25,34.5C6.75,27 0,19.22 0,13.5C0,6.04 6.04,0 13.5,0C20.96,0 27,6.04 27,13.5Z'
}, svg);
DOM.createSVG('path', { // border
opacity: 0.25,
d: 'M13.5,0C6.04,0 0,6.04 0,13.5C0,19.22 6.75,27 12.25,34.5C13,35.52 14.02,35.5 14.75,34.5C20.25,27 27,19.07 27,13.5C27,6.04 20.96,0 13.5,0ZM13.5,1C20.42,1 26,6.58 26,13.5C26,15.9 24.5,19.18 22.22,22.74C19.95,26.3 16.71,30.14 13.94,33.91C13.74,34.18 13.61,34.32 13.5,34.44C13.39,34.32 13.26,34.18 13.06,33.91C10.28,30.13 7.41,26.31 5.02,22.77C2.62,19.23 1,15.95 1,13.5C1,6.58 6.58,1 13.5,1Z'
}, svg);

DOM.createSVG('circle', {fill: 'white', cx: 13.5, cy: 13.5, r: 5.5}, svg); // circle

// if no element and no offset option given apply an offset for the default marker
// the -14 as the y value of the default marker offset was determined as follows
//
// the marker tip is at the center of the shadow ellipse from the default svg
// the y value of the center of the shadow ellipse relative to the svg top left is "shadow transform translate-y (29.0) + ellipse cy (5.80029008)"
// offset to the svg center "height (41 / 2)" gives (29.0 + 5.80029008) - (41 / 2) and rounded for an integer pixel offset gives 14
// the y value of the center of the shadow ellipse relative to the svg top left is 34.8
// offset to the svg center "height (41 / 2)" gives 34.8 - (41 / 2) and rounded for an integer pixel offset gives 14
// negative is used to move the marker up from the center so the tip is at the Marker lngLat
this._offset = Point.convert(options && options.offset || [0, -14]);
} else {
Expand Down Expand Up @@ -295,7 +226,7 @@ export default class Marker extends Evented {
delete this._map;
}
this._clearFadeTimer();
DOM.remove(this._element);
this._element.remove();
if (this._popup) this._popup.remove();
return this;
}
Expand Down Expand Up @@ -549,7 +480,7 @@ export default class Marker extends Evented {
if (!this._map) return;

if (this._element && this._pos && this._anchor) {
DOM.setTransform(this._element, `${anchorTranslate[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px) ${pitch} ${rotation}`);
this._element.style.transform = `${anchorTranslate[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px) ${pitch} ${rotation}`;
}

if ((this._map.getTerrain() || this._map.getFog()) && !this._fadeTimer) {
Expand Down
6 changes: 3 additions & 3 deletions src/ui/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,11 +204,11 @@ export default class Popup extends Evented {
*/
remove() {
if (this._content) {
DOM.remove(this._content);
this._content.remove();
}

if (this._container) {
DOM.remove(this._container);
this._container.remove();
delete this._container;
}

Expand Down Expand Up @@ -621,7 +621,7 @@ export default class Popup extends Evented {
const offsetedPos = pos.add(offset[anchor]).round();
this._map._requestDomTask(() => {
if (this._container && anchor) {
DOM.setTransform(this._container, `${anchorTranslate[anchor]} translate(${offsetedPos.x}px,${offsetedPos.y}px)`);
this._container.style.transform = `${anchorTranslate[anchor]} translate(${offsetedPos.x}px,${offsetedPos.y}px)`;
}
});
}
Expand Down
Loading