From 0e4cc6ccd6b4f6ca924490d6a119bab83ea9be77 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Tue, 19 Aug 2025 09:46:37 +0800 Subject: [PATCH 1/4] fix ui collision when collision state change --- packages/maptalks/src/map/Map.Collision.ts | 10 +++++++++- packages/maptalks/src/map/Map.ts | 2 +- packages/maptalks/src/ui/UIComponent.ts | 20 +++++++++++++++++++- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/maptalks/src/map/Map.Collision.ts b/packages/maptalks/src/map/Map.Collision.ts index f8243ce484..3e40e445c1 100644 --- a/packages/maptalks/src/map/Map.Collision.ts +++ b/packages/maptalks/src/map/Map.Collision.ts @@ -11,7 +11,9 @@ declare module "./Map" { _insertUICollidesQueue(): this uiCollides(): this //@internal - _addUI(ui: UIComponent): this + _addUI(ui: UIComponent): this; + //@internal + _sortUI(): this //@internal _removeUI(ui: UIComponent): number } @@ -79,6 +81,7 @@ Map.include({ const ui = uiList[i]; const { collisionBufferSize, collision } = ui.options; if (!collision) { + ui._collidesEffect(true); continue; } const dom = ui.getDOM(); @@ -137,6 +140,11 @@ Map.include({ return this; } this.uiList.push(ui); + return this._sortUI(); + }, + + _sortUI() { + this.uiList = this.uiList || []; this.uiList = this.uiList.sort((a, b) => { return b.options['collisionWeight'] - a.options['collisionWeight']; }); diff --git a/packages/maptalks/src/map/Map.ts b/packages/maptalks/src/map/Map.ts index 01045f1f85..09ca88f1c9 100644 --- a/packages/maptalks/src/map/Map.ts +++ b/packages/maptalks/src/map/Map.ts @@ -327,6 +327,7 @@ export class Map extends Handlerable(Eventable(Renderable(Class))) { const layers = opts['layers']; delete opts['layers']; super(opts); + this.isMap = true; /** * @property {String} - Version of library @@ -371,7 +372,6 @@ export class Map extends Handlerable(Eventable(Renderable(Class))) { this._Load(); this.proxyOptions(); - this.isMap = true; } /** diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index 9c536f3144..91c68c278f 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -62,6 +62,8 @@ const options: UIComponentOptionsType = { 'zIndex': 0 }; +const COLLISION_STATES = ['collision', 'collisionBufferSize', 'collisionWeight', 'collisionFadeIn'] + /** * @classdesc * Base class for all the UI component classes, a UI component is a HTMLElement positioned with geographic coordinate.
@@ -992,8 +994,24 @@ class UIComponent extends Eventable(Class) { return false; } - onConfig() { + onConfig(config: Record) { + let collisionStateChange = false; + if (config) { + COLLISION_STATES.forEach(key => { + if (key in config) { + collisionStateChange = true; + } + + }); + } this._updatePosition(); + if (collisionStateChange) { + this._collides(); + const map = this.getMap(); + if (map && map._sortUI) { + map._sortUI(); + } + } return this; } From eb76602310595b7025578e8c0dde78254a8c8320 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Tue, 19 Aug 2025 09:51:36 +0800 Subject: [PATCH 2/4] spec --- packages/maptalks/test/ui/UIMarkerSpec.js | 29 +++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/maptalks/test/ui/UIMarkerSpec.js b/packages/maptalks/test/ui/UIMarkerSpec.js index e013e40d8d..f3e421d806 100644 --- a/packages/maptalks/test/ui/UIMarkerSpec.js +++ b/packages/maptalks/test/ui/UIMarkerSpec.js @@ -266,4 +266,33 @@ describe('UI.UIMarker', function () { } done(); }); + + it('#2607 collision should update when collision state change', function (done) { + var marker1 = new maptalks.ui.UIMarker(map.getCenter(), { + content: '
maptalks
', + verticalAlignment: 'top', + collision: true + }).addTo(map); + var marker2 = new maptalks.ui.UIMarker(map.getCenter(), { + content: '
maptalks
', + verticalAlignment: 'top', + collision: true + }).addTo(map); + + setTimeout(() => { + expect(marker1.getDOM().style.visibility).to.be.equal('visible'); + expect(marker2.getDOM().style.visibility).to.be.equal('hidden'); + marker2.config({ + collision: false + }); + setTimeout(() => { + expect(marker1.getDOM().style.visibility).to.be.equal('visible'); + expect(marker2.getDOM().style.visibility).to.be.equal('visible'); + done(); + }, 100); + }, 100); + + + + }); }); From f4a6b333fffe04366ec73a8b6d68a3315dc3d648 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Tue, 19 Aug 2025 13:37:57 +0800 Subject: [PATCH 3/4] updates --- packages/maptalks/src/map/Map.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/maptalks/src/map/Map.ts b/packages/maptalks/src/map/Map.ts index b235065ae4..ba3b217699 100644 --- a/packages/maptalks/src/map/Map.ts +++ b/packages/maptalks/src/map/Map.ts @@ -327,7 +327,6 @@ export class Map extends Handlerable(Eventable(Renderable(Class))) { const layers = opts['layers']; delete opts['layers']; super(opts); - this.isMap = true; /** * @property {String} - Version of library From 6b325f894d10737ce1e6c8e46697cfa930520fb2 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Wed, 20 Aug 2025 09:07:51 +0800 Subject: [PATCH 4/4] updates --- packages/maptalks/src/ui/UIComponent.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index 91c68c278f..e5c8654ec4 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -997,14 +997,16 @@ class UIComponent extends Eventable(Class) { onConfig(config: Record) { let collisionStateChange = false; if (config) { - COLLISION_STATES.forEach(key => { + for (let i = 0, len = COLLISION_STATES.length; i < len; i++) { + const key = COLLISION_STATES[i]; if (key in config) { collisionStateChange = true; + break; } - - }); + } } this._updatePosition(); + //https://github.com/maptalks/maptalks.js/issues/2609 if (collisionStateChange) { this._collides(); const map = this.getMap();