mirror of
https://github.com/visgl/react-map-gl.git
synced 2026-01-18 15:54:22 +00:00
Cache the interactive context to prevent context thrashing (#664)
This commit is contained in:
parent
f8e2f64fd2
commit
97e2f31b22
@ -170,6 +170,11 @@ type State = {
|
||||
isHovering: boolean
|
||||
};
|
||||
|
||||
type InteractiveContextProps = {
|
||||
isDragging: boolean,
|
||||
eventManager: any
|
||||
};
|
||||
|
||||
export default class InteractiveMap extends PureComponent<InteractiveMapProps, State> {
|
||||
|
||||
static supported() {
|
||||
@ -191,6 +196,11 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
|
||||
this._eventManager = new EventManager(null, {
|
||||
touchAction: props.touchAction
|
||||
});
|
||||
|
||||
this._updateInteractiveContext({
|
||||
isDragging: false,
|
||||
eventManager: this._eventManager
|
||||
});
|
||||
}
|
||||
|
||||
state : State = {
|
||||
@ -219,12 +229,17 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
|
||||
this._setControllerProps(this.props);
|
||||
}
|
||||
|
||||
componentWillUpdate(nextProps : InteractiveMapProps) {
|
||||
componentWillUpdate(nextProps : InteractiveMapProps, nextState : State) {
|
||||
this._setControllerProps(nextProps);
|
||||
|
||||
if (nextState.isDragging !== this.state.isDragging) {
|
||||
this._updateInteractiveContext({isDragging: nextState.isDragging});
|
||||
}
|
||||
}
|
||||
|
||||
_controller : MapController;
|
||||
_eventManager : any;
|
||||
_interactiveContext : InteractiveContextProps;
|
||||
_width : number = 0;
|
||||
_height : number = 0;
|
||||
_eventCanvasRef: { current: null | HTMLDivElement } = createRef();
|
||||
@ -284,6 +299,10 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
|
||||
}
|
||||
}
|
||||
|
||||
_updateInteractiveContext(updatedContext : $Shape<InteractiveContextProps>) {
|
||||
this._interactiveContext = Object.assign({}, this._interactiveContext, updatedContext);
|
||||
}
|
||||
|
||||
_onResize = ({width, height} : {width : number, height : number}) => {
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
@ -414,12 +433,8 @@ export default class InteractiveMap extends PureComponent<InteractiveMapProps, S
|
||||
height,
|
||||
cursor: getCursor(this.state)
|
||||
});
|
||||
const interactiveContext = {
|
||||
isDragging: this.state.isDragging,
|
||||
eventManager: this._eventManager
|
||||
};
|
||||
|
||||
return createElement(InteractiveContext.Provider, {value: interactiveContext},
|
||||
return createElement(InteractiveContext.Provider, {value: this._interactiveContext},
|
||||
createElement('div', {
|
||||
key: 'event-canvas',
|
||||
ref: this._eventCanvasRef,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user