From 3aaa3a85280230226ec56b2060587bf87109c549 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Thu, 15 May 2025 15:04:41 +0800 Subject: [PATCH 1/5] UI support only update position when geometry coordinates change --- packages/maptalks/src/ui/UIComponent.ts | 56 +++++++++++++++++++------ 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index 1d50192ef2..f625ab56bf 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -81,7 +81,7 @@ class UIComponent extends Eventable(Class) { //@internal _coordinate: Coordinate; //@internal - _showBySymbolChange: boolean; + _onlyUpdatePostion: boolean; //@internal _mapEventsOn: boolean; //@internal @@ -268,17 +268,25 @@ class UIComponent extends Eventable(Class) { * @property {String} type - showstart * @property {ui.UIComponent} target - UIComponent */ - if (!this._showBySymbolChange) { + if (!this._onlyUpdatePostion) { this.fire('showstart'); } const container = this._getUIContainer(); this._coordinate = coordinate; - //when single will off map events - this._removePrevDOM(); + //only update postion not remove dom + if (!this._onlyUpdatePostion) { + //when single will off map events + this._removePrevDOM(); + } if (!this._mapEventsOn) { this._switchMapEvents('on'); } - const dom = this.__uiDOM = this.buildOn(); + let dom: HTMLElement; + if (!this._onlyUpdatePostion) { + dom = this.__uiDOM = this.buildOn(); + } else { + dom = this.__uiDOM; + } dom['eventsPropagation'] = this.options['eventsPropagation']; this._observerDomSize(dom); const zIndex = this.options.zIndex; @@ -291,15 +299,16 @@ class UIComponent extends Eventable(Class) { * @property {String} type - showend * @property {ui.UIComponent} target - UIComponent */ - if (!this._showBySymbolChange) { + if (!this._onlyUpdatePostion) { this.fire('showend'); } this._collides(); this.setZIndex(zIndex); return this; } - - this._measureSize(dom); + if (!this._onlyUpdatePostion) { + this._measureSize(dom); + } if (this._singleton()) { (dom as any)._uiComponent = this; @@ -310,8 +319,9 @@ class UIComponent extends Eventable(Class) { dom.style[TRANSITION as string] = null; - container.appendChild(dom); - + if (!this._onlyUpdatePostion) { + container.appendChild(dom); + } const anim = this._getAnimation(); @@ -361,7 +371,7 @@ class UIComponent extends Eventable(Class) { dom.style[TRANSFORM] = this._toCSSTranslate(this._pos) + ' scale(1)'; } } - if (!this._showBySymbolChange) { + if (!this._onlyUpdatePostion) { this.fire('showend'); } this._collides(); @@ -857,7 +867,7 @@ class UIComponent extends Eventable(Class) { onGeometryPositionChange(param) { if (this._owner && this.isVisible()) { - this._showBySymbolChange = true; + this._onlyUpdatePostion = true; const target = param.target; const center = target.getCenter(); if (target._getAltitude) { @@ -867,7 +877,7 @@ class UIComponent extends Eventable(Class) { } } this.show(center); - delete this._showBySymbolChange; + this._onlyUpdatePostion = false; } } @@ -1037,12 +1047,32 @@ class UIComponent extends Eventable(Class) { //@internal _onDomMouseover() { this._configMapPreventWheelScroll(false); + /** + * mouseover event. + * + * @event ui.UIComponent#mouseover + * @type {Object} + * @property {String} type - mouseover + * @property {ui.UIComponent} target - UIComponent + */ + + this.fire('mouseover'); } // eslint-disable-next-line no-unused-vars //@internal _onDomMouseout() { this._configMapPreventWheelScroll(true); + /** + * mouseout event. + * + * @event ui.UIComponent#mouseout + * @type {Object} + * @property {String} type - mouseout + * @property {ui.UIComponent} target - UIComponent + */ + + this.fire('mouseout'); } } From 9839ab0eca776c95ec58f921d42d0e776a965069 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Thu, 15 May 2025 17:28:09 +0800 Subject: [PATCH 2/5] fix typo --- packages/maptalks/src/ui/UIComponent.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index f625ab56bf..49e0ed198c 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -81,7 +81,7 @@ class UIComponent extends Eventable(Class) { //@internal _coordinate: Coordinate; //@internal - _onlyUpdatePostion: boolean; + _onlyUpdatePosition: boolean; //@internal _mapEventsOn: boolean; //@internal @@ -268,13 +268,13 @@ class UIComponent extends Eventable(Class) { * @property {String} type - showstart * @property {ui.UIComponent} target - UIComponent */ - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { this.fire('showstart'); } const container = this._getUIContainer(); this._coordinate = coordinate; //only update postion not remove dom - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { //when single will off map events this._removePrevDOM(); } @@ -282,7 +282,7 @@ class UIComponent extends Eventable(Class) { this._switchMapEvents('on'); } let dom: HTMLElement; - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { dom = this.__uiDOM = this.buildOn(); } else { dom = this.__uiDOM; @@ -299,14 +299,14 @@ class UIComponent extends Eventable(Class) { * @property {String} type - showend * @property {ui.UIComponent} target - UIComponent */ - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { this.fire('showend'); } this._collides(); this.setZIndex(zIndex); return this; } - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { this._measureSize(dom); } @@ -319,7 +319,7 @@ class UIComponent extends Eventable(Class) { dom.style[TRANSITION as string] = null; - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { container.appendChild(dom); } @@ -371,7 +371,7 @@ class UIComponent extends Eventable(Class) { dom.style[TRANSFORM] = this._toCSSTranslate(this._pos) + ' scale(1)'; } } - if (!this._onlyUpdatePostion) { + if (!this._onlyUpdatePosition) { this.fire('showend'); } this._collides(); @@ -867,7 +867,7 @@ class UIComponent extends Eventable(Class) { onGeometryPositionChange(param) { if (this._owner && this.isVisible()) { - this._onlyUpdatePostion = true; + this._onlyUpdatePosition = true; const target = param.target; const center = target.getCenter(); if (target._getAltitude) { @@ -877,7 +877,7 @@ class UIComponent extends Eventable(Class) { } } this.show(center); - this._onlyUpdatePostion = false; + this._onlyUpdatePosition = false; } } From 8f6014d48772f6192b528b522670f0ea11f1e523 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Fri, 16 May 2025 09:07:08 +0800 Subject: [PATCH 3/5] updates --- packages/maptalks/src/ui/UIComponent.ts | 3 +++ packages/maptalks/src/ui/UIMarker.ts | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index 49e0ed198c..4fbd4e593d 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -259,6 +259,9 @@ class UIComponent extends Eventable(Class) { } const visible = this.isVisible(); + if (visible) { + this._onlyUpdatePosition = true; + } /** * showstart event. diff --git a/packages/maptalks/src/ui/UIMarker.ts b/packages/maptalks/src/ui/UIMarker.ts index a15f3619af..5ebdf37b36 100644 --- a/packages/maptalks/src/ui/UIMarker.ts +++ b/packages/maptalks/src/ui/UIMarker.ts @@ -260,9 +260,11 @@ class UIMarker extends Handlerable(UIComponent) { */ this.fire('positionchange'); if (this.isVisible()) { + this._onlyUpdatePosition = true; this._coordinate = this._markerCoord; this._setPosition(); this._collides(); + this._onlyUpdatePosition = false; } return this; } From 1bc6830476830fb457fb353806f29c9e838c3a38 Mon Sep 17 00:00:00 2001 From: hu de yi Date: Fri, 16 May 2025 09:14:24 +0800 Subject: [PATCH 4/5] updates --- packages/maptalks/src/ui/UIComponent.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index 4fbd4e593d..df6ab398e9 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -281,6 +281,7 @@ class UIComponent extends Eventable(Class) { //when single will off map events this._removePrevDOM(); } + //bind map events if (!this._mapEventsOn) { this._switchMapEvents('on'); } @@ -468,6 +469,7 @@ class UIComponent extends Eventable(Class) { map._removeUI(this); } this.hide(); + //remove map bind events this._switchEvents('off'); if (this.onRemove) { this.onRemove(); From a21740e05eb93991b4070f32d36ddf76cadc50dd Mon Sep 17 00:00:00 2001 From: hu de yi Date: Fri, 16 May 2025 09:23:16 +0800 Subject: [PATCH 5/5] updates --- packages/maptalks/src/ui/UIComponent.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/maptalks/src/ui/UIComponent.ts b/packages/maptalks/src/ui/UIComponent.ts index df6ab398e9..9c536f3144 100644 --- a/packages/maptalks/src/ui/UIComponent.ts +++ b/packages/maptalks/src/ui/UIComponent.ts @@ -259,9 +259,6 @@ class UIComponent extends Eventable(Class) { } const visible = this.isVisible(); - if (visible) { - this._onlyUpdatePosition = true; - } /** * showstart event.