Cache the interactive context to prevent context thrashing (#664)

This commit is contained in:
Matt Harker 2018-11-28 23:32:30 +00:00 committed by Xiaoji Chen
parent f8e2f64fd2
commit 97e2f31b22

View File

@ -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,