archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-18 15:54:22 +00:00
Code Issues Projects Releases Wiki Activity

Consistent onViewportChange events on map resize (#1335)

Browse Source
This commit is contained in:
Xiaoji Chen 2021-02-06 11:04:45 -08:00 committed by Xiaoji Chen
parent 38281748aa
commit 0a26431f62
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/interactive-map.js
View File

@ -354,16 +354,18 @@ const InteractiveMap = forwardRef((props, ref) => {
};
const updateControllerOpts = () => {
const opts = Object.assign({}, thisRef.props, thisRef.props.viewState, {
isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
onViewportChange: handleViewportChange,
onStateChange: handleInteractionStateChange,
eventManager,
width: thisRef.width,
height: thisRef.height
});
controller.setOptions(opts);
if (thisRef.width && thisRef.height) {
controller.setOptions({
...thisRef.props,
...thisRef.props.viewState,
isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
onViewportChange: handleViewportChange,
onStateChange: handleInteractionStateChange,
eventManager,
width: thisRef.width,
height: thisRef.height
});
}
};
const onResize = ({width, height}) => {

14
src/utils/map-controller.js
View File

@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
/* eslint-disable complexity */
/* eslint-disable complexity, max-statements */
import MapState from './map-state';
import {LinearInterpolator} from './transition';
import TransitionManager, {TRANSITION_EVENTS} from './transition-manager';
@ -142,7 +142,8 @@ export default class MapController {
// formats map state and invokes callback function
updateViewport(newMapState, extraProps, interactionState) {
// Always trigger callback on initial update (resize)
const oldViewport = this.mapState ? this.mapState.getViewportProps() : {};
const oldViewport =
this.mapState instanceof MapState ? this.mapState.getViewportProps() : this.mapState;
const newViewport = {...newMapState.getViewportProps(), ...extraProps};
const viewStateChanged = Object.keys(newViewport).some(
@ -199,12 +200,15 @@ export default class MapController {
this.onViewportChange = onViewportChange;
this.onStateChange = onStateChange;
const dimensionChanged = !this.mapStateProps || this.mapStateProps.height !== options.height;
const prevOptions = this.mapStateProps || {};
const dimensionChanged =
prevOptions.height !== options.height || prevOptions.width !== options.width;
this.mapStateProps = options;
if (dimensionChanged && options.height) {
// Dimensions changed, normalize the props
if (dimensionChanged) {
// Dimensions changed, normalize the props and fire change event
this.mapState = prevOptions;
this.updateViewport(new MapState(options));
}
// Update transition