From 54f974f0ee9ec636eee16dc6a59432d918e082e7 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Fri, 15 Nov 2024 14:05:01 +0800 Subject: [PATCH 1/4] Block Map DOM events when the mouse is at the skybox fix #2460 --- src/map/Map.DomEvents.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/map/Map.DomEvents.ts b/src/map/Map.DomEvents.ts index ee3a8b5a0d..1a63164a75 100644 --- a/src/map/Map.DomEvents.ts +++ b/src/map/Map.DomEvents.ts @@ -466,6 +466,10 @@ Map.include(/** @lends Map.prototype */ { } const eventParam = this._parseEvent(e, type); + //mouse point Beyond the visible range of the map(Sky Box Area) + if (!eventParam.coordinate && type !== 'keypress') { + return; + } this._wrapTerrainData(eventParam); if (isMoveEvent(type)) { this.getRenderer().callInNextFrame(() => { From be20be9b7fa4ccb96c70e622c7cd410563919d17 Mon Sep 17 00:00:00 2001 From: deyihu Date: Sat, 30 Nov 2024 09:10:56 +0800 Subject: [PATCH 2/4] updates --- src/map/Map.DomEvents.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/map/Map.DomEvents.ts b/src/map/Map.DomEvents.ts index 1a63164a75..59fd58e7f2 100644 --- a/src/map/Map.DomEvents.ts +++ b/src/map/Map.DomEvents.ts @@ -467,7 +467,7 @@ Map.include(/** @lends Map.prototype */ { const eventParam = this._parseEvent(e, type); //mouse point Beyond the visible range of the map(Sky Box Area) - if (!eventParam.coordinate && type !== 'keypress') { + if (!eventParam.coordinate && type !== 'keypress' && type.indexOf('dom:') === -1) { return; } this._wrapTerrainData(eventParam); From 1e6e7ece92fe36b392164bb933eaac8347c3dc95 Mon Sep 17 00:00:00 2001 From: deyihu Date: Sat, 30 Nov 2024 09:19:35 +0800 Subject: [PATCH 3/4] spec --- test/map/MapEventSpec.js | 104 +++++++++++++++++++++++++-------------- 1 file changed, 67 insertions(+), 37 deletions(-) diff --git a/test/map/MapEventSpec.js b/test/map/MapEventSpec.js index c6c56c0a05..ca60de83da 100644 --- a/test/map/MapEventSpec.js +++ b/test/map/MapEventSpec.js @@ -11,7 +11,7 @@ describe('Map.Event', function () { container.style.height = '20px'; document.body.appendChild(container); var option = { - zoomAnimation:false, + zoomAnimation: false, zoom: 17, center: center }; @@ -31,13 +31,13 @@ describe('Map.Event', function () { map.on('click', spy); happen.mousedown(eventContainer, { - 'clientX':point.x, - 'clientY':point.y + 'clientX': point.x, + 'clientY': point.y }); setTimeout(function () { happen.click(eventContainer, { - 'clientX':point.x, - 'clientY':point.y + 'clientX': point.x, + 'clientY': point.y }); expect(spy.called).not.to.be.ok(); done(); @@ -51,17 +51,17 @@ describe('Map.Event', function () { map.on('click', spy); happen.once(eventContainer, { - 'type' : 'touchstart', - 'touches' : [{ - 'clientX':point.x, - 'clientY':point.y + 'type': 'touchstart', + 'touches': [{ + 'clientX': point.x, + 'clientY': point.y }] }); happen.once(eventContainer, { - 'type' : 'touchend', - 'touches' : [{ - 'clientX':point.x, - 'clientY':point.y + 'type': 'touchend', + 'touches': [{ + 'clientX': point.x, + 'clientY': point.y }] }); expect(spy.called).to.be.ok(); @@ -74,31 +74,31 @@ describe('Map.Event', function () { map.on('dblclick', spy); happen.once(eventContainer, { - 'type' : 'touchstart', - 'touches' : [{ - 'clientX':point.x, - 'clientY':point.y + 'type': 'touchstart', + 'touches': [{ + 'clientX': point.x, + 'clientY': point.y }] }); happen.once(eventContainer, { - 'type' : 'touchend', - 'touches' : [{ - 'clientX':point.x, - 'clientY':point.y + 'type': 'touchend', + 'touches': [{ + 'clientX': point.x, + 'clientY': point.y }] }); happen.once(eventContainer, { - 'type' : 'touchstart', - 'touches' : [{ - 'clientX':point.x, - 'clientY':point.y + 'type': 'touchstart', + 'touches': [{ + 'clientX': point.x, + 'clientY': point.y }] }); happen.once(eventContainer, { - 'type' : 'touchend', - 'touches' : [{ - 'clientX':point.x, - 'clientY':point.y + 'type': 'touchend', + 'touches': [{ + 'clientX': point.x, + 'clientY': point.y }] }); expect(spy.called).to.be.ok(); @@ -110,18 +110,18 @@ describe('Map.Event', function () { var spy = sinon.spy(); map.once('click', spy); happen.mousedown(eventContainer, { - 'clientX':point.x, - 'clientY':point.y + 'clientX': point.x, + 'clientY': point.y }); happen.click(eventContainer, { - 'clientX':point.x, - 'clientY':point.y + 'clientX': point.x, + 'clientY': point.y }); expect(spy.called).to.be.ok(); spy.reset(); happen.click(eventContainer, { - 'clientX':point.x, - 'clientY':point.y + 'clientX': point.x, + 'clientY': point.y }); expect(spy.called).not.to.be.ok(); }); @@ -132,8 +132,8 @@ describe('Map.Event', function () { var spy = sinon.spy(); map.on('click', spy); happen.click(eventContainer, { - 'clientX':point.x, - 'clientY':point.y + 'clientX': point.x, + 'clientY': point.y }); expect(spy.called).not.to.be.ok(); }); @@ -165,4 +165,34 @@ describe('Map.Event', function () { }); expect(spy.called).not.to.be.ok(); }); + + it('block map mouse event when point in sky area', function (done) { + Object.assign(container.style, { width: '1000px', height: '500px' }); + + setTimeout(() => { + const { width, height } = map.getSize(); + const point = new maptalks.Point(width / 2, 2); + var spy = sinon.spy(); + const spy1 = sinon.spy(); + map.on('click', spy); + map.on('dom:click', spy1); + + happen.mousedown(eventContainer, { + 'clientX': point.x, + 'clientY': point.y + }); + setTimeout(function () { + happen.click(eventContainer, { + 'clientX': point.x, + 'clientY': point.y + }); + expect(spy.called).not.to.be.ok(); + expect(spy1.called).to.be.ok(); + done(); + }, 500); + + + }, 500); + + }); }); From 644a335e0615bc6b9a93ec776d79c8250e20e2b5 Mon Sep 17 00:00:00 2001 From: deyihu Date: Sat, 30 Nov 2024 09:47:35 +0800 Subject: [PATCH 4/4] updates --- test/map/MapEventSpec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/map/MapEventSpec.js b/test/map/MapEventSpec.js index ca60de83da..29a0262c6e 100644 --- a/test/map/MapEventSpec.js +++ b/test/map/MapEventSpec.js @@ -170,6 +170,7 @@ describe('Map.Event', function () { Object.assign(container.style, { width: '1000px', height: '500px' }); setTimeout(() => { + map.setPitch(80); const { width, height } = map.getSize(); const point = new maptalks.Point(width / 2, 2); var spy = sinon.spy();