From ea09b6a1a1a924b6e55939b478b1e6ec8edb7d25 Mon Sep 17 00:00:00 2001 From: deyihu Date: Thu, 14 Dec 2023 14:30:46 +0800 Subject: [PATCH 1/3] add GlobalEvent for monitor visibilitychange/devicePixelRatio change --- src/core/Browser.js | 66 +++++-------------------- src/core/GlobalEvent.js | 71 +++++++++++++++++++++++++++ src/index.js | 3 +- src/map/Map.js | 3 -- src/renderer/map/MapCanvasRenderer.js | 24 ++++++--- src/renderer/map/MapRenderer.js | 12 +++++ 6 files changed, 113 insertions(+), 66 deletions(-) create mode 100644 src/core/GlobalEvent.js diff --git a/src/core/Browser.js b/src/core/Browser.js index a0a8207c1a..af9bb1da53 100644 --- a/src/core/Browser.js +++ b/src/core/Browser.js @@ -2,7 +2,7 @@ import { isFunction } from './util/common'; import { IS_NODE } from './util/env'; let Browser = {}; -const maps = {}; +// const maps = {}; function getDevicePixelRatio() { return (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI)); @@ -126,11 +126,11 @@ if (!IS_NODE) { monitorDPRChange: true, supportsPassive, proxy, - removeDPRListening: (map) => { - if (map) { - delete maps[map.id]; - } - }, + // removeDPRListening: (map) => { + // // if (map) { + // // delete maps[map.id]; + // // } + // }, checkDevicePixelRatio: () => { if (typeof window !== 'undefined' && Browser.monitorDPRChange) { const devicePixelRatio = getDevicePixelRatio(); @@ -142,55 +142,11 @@ if (!IS_NODE) { } return false; }, - addDPRListening: (map) => { - if (map) { - maps[map.id] = map; - } - } + // addDPRListening: (map) => { + // // if (map) { + // // maps[map.id] = map; + // // } + // } }; - //monitor devicePixelRatio change - if (typeof window !== 'undefined' && window.matchMedia) { - for (let i = 1; i < 500; i++) { - const dpi = (i * 0.01).toFixed(2); - const screen = window.matchMedia(`screen and (resolution: ${dpi}dppx)`); - if (screen) { - if (screen.addEventListener) { - screen.addEventListener('change', Browser.checkDevicePixelRatio); - } else if (screen.addListener) { - screen.addListener(Browser.checkDevicePixelRatio); - } - } - } - - } - - if (Browser.devicePixelRatio) { - let tempDPI = Browser.devicePixelRatio; - Object.defineProperty(Browser, 'devicePixelRatio', { - get: () => { - return tempDPI; - }, - set: (value) => { - if (value === tempDPI) { - return; - } - //when devicePixelRatio change force resize all layers - tempDPI = value; - if (!Browser.monitorDPRChange) { - return; - } - for (const mapId in maps) { - const map = maps[mapId]; - if (!map || !map.options || map.options['devicePixelRatio'] || !map.checkSize || !map.getRenderer) { - continue; - } - const renderer = map.getRenderer(); - if (renderer) { - map.checkSize(true); - } - } - } - }); - } } export default Browser; diff --git a/src/core/GlobalEvent.js b/src/core/GlobalEvent.js new file mode 100644 index 0000000000..e65d769f5b --- /dev/null +++ b/src/core/GlobalEvent.js @@ -0,0 +1,71 @@ +import Eventable from './Eventable'; +import Browser from './Browser'; +import { addDomEvent } from './util/dom'; + +class Base { + +} + +class GlobalEventable extends Eventable(Base) { + +} + +// this is global event bus for doc state change +// such as : devicePixelRatio ,visibilitychange,... etc + +export const GlobalEvent = new GlobalEventable(); + +export const EVENT_DPR_CHANGE = 'dprchange'; +export const EVENT_DOC_VISIBILITY_CHANGE = 'docvisibilitychange'; +export const EVENT_DOC_DRAGSTART = 'dragstart'; +export const EVENT_DOC_DRAGEND = 'dragend'; + + +//monitor devicePixelRatio change +if (typeof window !== 'undefined' && window.matchMedia) { + for (let i = 1; i < 500; i++) { + const dpi = (i * 0.01).toFixed(2); + const screen = window.matchMedia(`screen and (resolution: ${dpi}dppx)`); + if (screen) { + if (screen.addEventListener) { + screen.addEventListener('change', Browser.checkDevicePixelRatio); + } else if (screen.addListener) { + screen.addListener(Browser.checkDevicePixelRatio); + } + } + } + +} + +if (Browser.devicePixelRatio) { + let tempDPI = Browser.devicePixelRatio; + Object.defineProperty(Browser, 'devicePixelRatio', { + get: () => { + return tempDPI; + }, + set: (value) => { + if (value === tempDPI) { + return; + } + //when devicePixelRatio change force resize all layers + tempDPI = value; + if (!Browser.monitorDPRChange) { + return; + } + GlobalEvent.fire(EVENT_DPR_CHANGE, { devicePixelRatio: value }); + } + }); +} + +//monitor document visibilitychange change +if (Browser.webgl && typeof document !== 'undefined') { + addDomEvent(document, 'visibilitychange', () => { + GlobalEvent.fire(EVENT_DOC_VISIBILITY_CHANGE, { visibilityState: document.visibilityState }); + }); + addDomEvent(document, 'dragstart', () => { + GlobalEvent.fire(EVENT_DOC_DRAGSTART); + }); + addDomEvent(document, 'dragend', () => { + GlobalEvent.fire(EVENT_DOC_DRAGEND); + }); +} diff --git a/src/index.js b/src/index.js index 3dc8556209..3128ee1097 100644 --- a/src/index.js +++ b/src/index.js @@ -14,6 +14,7 @@ export { default as Promise } from './core/Promise'; // core classes export { default as Class } from './core/Class'; export { default as Eventable } from './core/Eventable'; +export { GlobalEvent } from './core/GlobalEvent'; export { default as JSONAble } from './core/JSONAble'; export { default as CollisionIndex } from './core/CollisionIndex'; @@ -74,7 +75,7 @@ import Actor from './core/worker/Actor'; * @namespace worker */ const worker = { - Actor : Actor + Actor: Actor }; export { worker }; diff --git a/src/map/Map.js b/src/map/Map.js index a96ac280bf..6f0e2bc33c 100644 --- a/src/map/Map.js +++ b/src/map/Map.js @@ -1601,9 +1601,6 @@ class Map extends Handlerable(Eventable(Renderable(Class))) { delete this.renderer; this._fireEvent('removeend'); this._clearAllListeners(); - if (Browser.removeDPRListening) { - Browser.removeDPRListening(this); - } return this; } diff --git a/src/renderer/map/MapCanvasRenderer.js b/src/renderer/map/MapCanvasRenderer.js index b1fff69b42..3532f00795 100644 --- a/src/renderer/map/MapCanvasRenderer.js +++ b/src/renderer/map/MapCanvasRenderer.js @@ -1,5 +1,6 @@ import { IS_NODE, isNumber, isFunction, requestAnimFrame, cancelAnimFrame, equalMapView, calCanvasSize } from '../../core/util'; -import { createEl, preventSelection, computeDomPosition, addDomEvent, removeDomEvent } from '../../core/util/dom'; +import { createEl, preventSelection, computeDomPosition } from '../../core/util/dom'; +import { GlobalEvent, EVENT_DOC_DRAGEND, EVENT_DOC_VISIBILITY_CHANGE, EVENT_DPR_CHANGE, EVENT_DOC_DRAGSTART } from './../../core/GlobalEvent'; import Browser from '../../core/Browser'; import Point from '../../geo/Point'; import Canvas2D from '../../core/Canvas'; @@ -438,9 +439,13 @@ class MapCanvasRenderer extends MapRenderer { remove() { if (Browser.webgl && typeof document !== 'undefined') { - removeDomEvent(document, 'visibilitychange', this._thisDocVisibilitychange, this); - removeDomEvent(document, 'dragstart', this._thisDocDragStart, this); - removeDomEvent(document, 'dragend', this._thisDocDragEnd, this); + GlobalEvent.on(EVENT_DPR_CHANGE, this._thisDocDPRChange, this); + GlobalEvent.on(EVENT_DOC_VISIBILITY_CHANGE, this._thisDocVisibilitychange, this); + GlobalEvent.on(EVENT_DOC_DRAGSTART, this._thisDocDragStart, this); + GlobalEvent.on(EVENT_DOC_DRAGEND, this._thisDocDragEnd, this); + // removeDomEvent(document, 'visibilitychange', this._thisDocVisibilitychange, this); + // removeDomEvent(document, 'dragstart', this._thisDocDragStart, this); + // removeDomEvent(document, 'dragend', this._thisDocDragEnd, this); } if (this._resizeInterval) { clearInterval(this._resizeInterval); @@ -942,9 +947,14 @@ class MapCanvasRenderer extends MapRenderer { }); if (Browser.webgl && typeof document !== 'undefined') { - addDomEvent(document, 'visibilitychange', this._thisDocVisibilitychange, this); - addDomEvent(document, 'dragstart', this._thisDocDragStart, this); - addDomEvent(document, 'dragend', this._thisDocDragEnd, this); + GlobalEvent.on(EVENT_DPR_CHANGE, this._thisDocDPRChange, this); + GlobalEvent.on(EVENT_DOC_VISIBILITY_CHANGE, this._thisDocVisibilitychange, this); + GlobalEvent.on(EVENT_DOC_DRAGSTART, this._thisDocDragStart, this); + GlobalEvent.on(EVENT_DOC_DRAGEND, this._thisDocDragEnd, this); + + // addDomEvent(document, 'visibilitychange', this._thisDocVisibilitychange, this); + // addDomEvent(document, 'dragstart', this._thisDocDragStart, this); + // addDomEvent(document, 'dragend', this._thisDocDragEnd, this); } if (Browser.addDPRListening) { Browser.addDPRListening(this.map); diff --git a/src/renderer/map/MapRenderer.js b/src/renderer/map/MapRenderer.js index 02ebe1434d..05a8eec8a3 100644 --- a/src/renderer/map/MapRenderer.js +++ b/src/renderer/map/MapRenderer.js @@ -20,6 +20,7 @@ class MapRenderer extends Class { this._thisDocVisibilitychange = this._onDocVisibilitychange.bind(this); this._thisDocDragStart = this._onDocDragStart.bind(this); this._thisDocDragEnd = this._onDocDragEnd.bind(this); + this._thisDocDPRChange = this._onDocDPRChange.bind(this); } callInNextFrame(fn) { @@ -137,6 +138,17 @@ class MapRenderer extends Class { return; } + _onDocDPRChange() { + const map = this.map; + if (!map || !map.options || map.options['devicePixelRatio'] || !map.checkSize || !map.getRenderer) { + return; + } + const renderer = map.getRenderer(); + if (renderer) { + map.checkSize(true); + } + } + _containerIsOffscreen() { const container = this.map.getContainer(); if (!container || !container.style || container.style.display === 'none') { From df0c3ce39675daad27ed2ea18bc9b05c8a7e731e Mon Sep 17 00:00:00 2001 From: deyihu Date: Thu, 14 Dec 2023 14:34:34 +0800 Subject: [PATCH 2/3] updates --- src/renderer/map/MapCanvasRenderer.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/renderer/map/MapCanvasRenderer.js b/src/renderer/map/MapCanvasRenderer.js index 3532f00795..d678d97dcb 100644 --- a/src/renderer/map/MapCanvasRenderer.js +++ b/src/renderer/map/MapCanvasRenderer.js @@ -956,9 +956,6 @@ class MapCanvasRenderer extends MapRenderer { // addDomEvent(document, 'dragstart', this._thisDocDragStart, this); // addDomEvent(document, 'dragend', this._thisDocDragEnd, this); } - if (Browser.addDPRListening) { - Browser.addDPRListening(this.map); - } } _onMapMouseMove(param) { From 9b3070058b3618f62552eb1fe702dc5253de5607 Mon Sep 17 00:00:00 2001 From: deyihu Date: Mon, 18 Dec 2023 11:22:12 +0800 Subject: [PATCH 3/3] fix remove --- src/renderer/map/MapCanvasRenderer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/renderer/map/MapCanvasRenderer.js b/src/renderer/map/MapCanvasRenderer.js index d678d97dcb..c9197c4eda 100644 --- a/src/renderer/map/MapCanvasRenderer.js +++ b/src/renderer/map/MapCanvasRenderer.js @@ -439,10 +439,10 @@ class MapCanvasRenderer extends MapRenderer { remove() { if (Browser.webgl && typeof document !== 'undefined') { - GlobalEvent.on(EVENT_DPR_CHANGE, this._thisDocDPRChange, this); - GlobalEvent.on(EVENT_DOC_VISIBILITY_CHANGE, this._thisDocVisibilitychange, this); - GlobalEvent.on(EVENT_DOC_DRAGSTART, this._thisDocDragStart, this); - GlobalEvent.on(EVENT_DOC_DRAGEND, this._thisDocDragEnd, this); + GlobalEvent.off(EVENT_DPR_CHANGE, this._thisDocDPRChange, this); + GlobalEvent.off(EVENT_DOC_VISIBILITY_CHANGE, this._thisDocVisibilitychange, this); + GlobalEvent.off(EVENT_DOC_DRAGSTART, this._thisDocDragStart, this); + GlobalEvent.off(EVENT_DOC_DRAGEND, this._thisDocDragEnd, this); // removeDomEvent(document, 'visibilitychange', this._thisDocVisibilitychange, this); // removeDomEvent(document, 'dragstart', this._thisDocDragStart, this); // removeDomEvent(document, 'dragend', this._thisDocDragEnd, this);