Skip to content

Commit

Permalink
fix(interaction): correcting scroll behavior when interaction is disa…
Browse files Browse the repository at this point in the history 
…bled

The mouse wheel was still being listened to even when disableInteraction was
set.
  • Loading branch information
@markmcdowell
markmcdowell committed Sep 26, 2019
1 parent 7fe415e commit 1e32380
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 19 deletions.
32 changes: 24 additions & 8 deletions packages/charts/src/ChartCanvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -512,15 +512,18 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
fullData: this.fullData,
};
}

public getCanvasContexts() {
if (this.canvasContainerNode) {
return this.canvasContainerNode.getCanvasContexts();
}
}

public generateSubscriptionId() {
this.lastSubscriptionId++;
return this.lastSubscriptionId;
}

public clearBothCanvas() {
const canvases = this.getCanvasContexts();
if (canvases && canvases.axes) {
Expand All @@ -531,6 +534,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
], this.props.ratio);
}
}

public clearMouseCanvas() {
const canvases = this.getCanvasContexts();
if (canvases && canvases.mouseCoord) {
Expand All @@ -540,6 +544,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
], this.props.ratio);
}
}

public clearThreeCanvas() {
const canvases = this.getCanvasContexts();
if (canvases && canvases.axes) {
Expand All @@ -551,6 +556,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
], this.props.ratio);
}
}

public subscribe(id, rest) {
const { getPanConditions = functor({
draggable: false,
Expand All @@ -562,25 +568,30 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
getPanConditions,
});
}

public unsubscribe(id) {
this.subscriptions = this.subscriptions.filter((each) => each.id !== id);
}

public getAllPanConditions() {
return this.subscriptions
.map((each) => each.getPanConditions());
}

public setCursorClass(className) {
if (this.eventCaptureNode != null) {
this.eventCaptureNode.setCursorClass(className);
}
}

public amIOnTop(id) {
const dragableComponents = this.subscriptions
.filter((each) => each.getPanConditions().draggable);

return dragableComponents.length > 0
&& last(dragableComponents).id === id;
}

public handleContextMenu(mouseXY, e) {
const { xAccessor, chartConfig, plotData, xScale } = this.state;

Expand All @@ -593,6 +604,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
currentCharts,
}, e);
}

public calculateStateForDomain(newDomain) {
const {
xAccessor,
Expand Down Expand Up @@ -633,6 +645,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
chartConfig,
};
}

public pinchZoomHelper(initialPinch, finalPinch) {
const { xScale: initialPinchXScale } = initialPinch;

Expand Down Expand Up @@ -745,7 +758,7 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
if (this.panInProgress) {
return;
}
// console.log("zoomDirection ", zoomDirection, " mouseXY ", mouseXY);

const { xAccessor, xScale: initialXScale, plotData: initialPlotData } = this.state;
const {
zoomMultiplier = ChartCanvas.defaultProps.zoomMultiplier,
Expand Down Expand Up @@ -1171,13 +1184,20 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt

const {
type = ChartCanvas.defaultProps.type,
useCrossHairStyleCursor,
onSelect,
height,
width,
margin = ChartCanvas.defaultProps.margin,
className,
zIndex = ChartCanvas.defaultProps.zIndex,
defaultFocus, ratio, mouseMoveEvent, panEvent, zoomEvent } = this.props;
const { useCrossHairStyleCursor, onSelect } = this.props;
defaultFocus,
ratio,
mouseMoveEvent,
panEvent,
zoomEvent,
disableInteraction,
} = this.props;

const { plotData, xScale, xAccessor, chartConfig } = this.state;
const dimensions = getDimensions(this.props);
Expand Down Expand Up @@ -1213,15 +1233,13 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
mouseMove={mouseMoveEvent && interaction}
zoom={zoomEvent && interaction}
pan={panEvent && interaction}

width={dimensions.width}
height={dimensions.height}
chartConfig={chartConfig}
xScale={xScale}
xAccessor={xAccessor}
focus={defaultFocus}
disableInteraction={this.props.disableInteraction}

disableInteraction={disableInteraction}
getAllPanConditions={this.getAllPanConditions}
onContextMenu={this.handleContextMenu}
onClick={this.handleClick}
Expand All @@ -1230,11 +1248,9 @@ export class ChartCanvas extends React.Component<ChartCanvasProps, ChartCanvasSt
onMouseMove={this.handleMouseMove}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}

onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragComplete={this.handleDragEnd}

onZoom={this.handleZoom}
onPinchZoom={this.handlePinchZoom}
onPinchZoomEnd={this.handlePinchZoomEnd}
Expand Down
26 changes: 15 additions & 11 deletions packages/charts/src/EventCapture.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,10 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
}

public componentDidMount() {
if (this.node) {

const { disableInteraction } = this.props;

if (!disableInteraction && this.node) {
select(this.node)
.on(MOUSEENTER, this.handleEnter)
.on(MOUSELEAVE, this.handleLeave);
Expand All @@ -124,7 +127,10 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
}

public componentWillUnmount() {
if (this.node) {

const { disableInteraction } = this.props;

if (!disableInteraction && this.node) {
select(this.node)
.on(MOUSEENTER, null)
.on(MOUSELEAVE, null);
Expand Down Expand Up @@ -474,7 +480,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
.on(TOUCHEND, null);

if (this.panHappened
// && !this.contextMenuClicked
&& panEnabled
&& onPanEnd) {
const { dx, dy } = this;
Expand Down Expand Up @@ -553,7 +558,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
const touch2Pos = touchPosition(getTouchProps(e.touches[1]), e);

if (this.panHappened
// && !this.contextMenuClicked
&& panEnabled
&& onPanEnd) {

Expand All @@ -579,7 +583,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur
const [touch1Pos, touch2Pos] = touches(this.node);
const { xScale, zoom: zoomEnabled, onPinchZoom } = this.props;

// eslint-disable-next-line no-unused-vars
const { chartsToPan, ...initialPinch } = this.state.pinchZoomStart;

if (zoomEnabled && onPinchZoom) {
Expand All @@ -601,7 +604,6 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur

const { zoom: zoomEnabled, onPinchZoomEnd } = this.props;

// eslint-disable-next-line no-unused-vars
const { chartsToPan, ...initialPinch } = this.state.pinchZoomStart;

if (zoomEnabled && onPinchZoomEnd) {
Expand All @@ -623,11 +625,13 @@ export class EventCapture extends React.Component<EventCaptureProps, EventCaptur

public render() {
const { height, width, disableInteraction, useCrossHairStyleCursor } = this.props;
const className = this.state.cursorOverrideClass !== undefined
? this.state.cursorOverrideClass
: !useCrossHairStyleCursor ? "" : this.state.panInProgress
? "react-financial-charts-grabbing-cursor"
: "react-financial-charts-crosshair-cursor";

const className = disableInteraction ? undefined :
this.state.cursorOverrideClass !== undefined
? this.state.cursorOverrideClass
: !useCrossHairStyleCursor ? undefined : this.state.panInProgress
? "react-financial-charts-grabbing-cursor"
: "react-financial-charts-crosshair-cursor";

const interactionProps = disableInteraction || {
onMouseDown: this.handleMouseDown,
Expand Down

0 comments on commit 1e32380

Please sign in to comment.