Commit a6385000 authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

improve plot inspector behavior on touch devices

parent 1f50605f
......@@ -231,6 +231,7 @@ export interface IChartStateController {
removeListener: (eventName: string, listener: ChartEventListener) => void;
showInspector: () => void;
hideInspector: () => void;
toggleInspector: () => void;
moveInspector: (xOffset: number) => void;
}
......@@ -248,6 +249,7 @@ export function makeChartStateController(
removeListener,
showInspector,
hideInspector,
toggleInspector,
moveInspector,
});
......@@ -292,12 +294,15 @@ export function makeChartStateController(
const nextXScale = xScaleChanged ? xScale : state.xScale;
const nextXOffset = xOffsetChanged ? xOffset : state.xOffset;
state.setXViewRange(nextXScale, nextXOffset);
hideInspector();
fireEvent('xViewRangeChanged');
fireEvent('yViewRangeChanged');
}
function toggleDataSetVisibility(dataSet: IDataSet) {
state.toggleDataSetVisibility(dataSet);
state.setInspectorVisibility(false);
hideInspector();
fireEvent('yViewRangeChanged');
fireEvent('dataSetVisibilityChanged');
}
......@@ -312,8 +317,14 @@ export function makeChartStateController(
fireEvent('inspectorVisibilityChanged');
}
function toggleInspector() {
state.setInspectorVisibility(!state.inspectorIsActive);
fireEvent('inspectorVisibilityChanged');
}
function moveInspector(xOffset: number) {
state.moveInspector(xOffset);
state.setInspectorVisibility(true);
fireEvent('moveInspector');
}
}
......@@ -12,6 +12,8 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
) {
const stateController = chartStateController;
let plotSize: ISize;
let touchStartTime: number;
const tapThresh = 100;
return {
render,
......@@ -40,13 +42,12 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
function attachInspectorHandlers(container: HTMLElement) {
container.addEventListener('mouseenter', handleMouseEnter);
container.addEventListener('touchstart', handleMouseEnter);
container.addEventListener('mouseleave', handleMouseLeave);
container.addEventListener('touchend', handleMouseLeave);
container.addEventListener('touchcancel', handleMouseLeave);
container.addEventListener('mousemove', handleMouseMove);
container.addEventListener('touchstart', handleTouchStart);
container.addEventListener('touchend', handleTouchEnd);
container.addEventListener('touchcancel', handleTouchEnd);
container.addEventListener('touchmove', handleTouchMove);
}
......@@ -62,6 +63,17 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
moveInspector(evt.offsetX);
}
function handleTouchStart() {
touchStartTime = Date.now();
}
function handleTouchEnd() {
const now = Date.now();
if (now - touchStartTime < tapThresh) {
stateController.toggleInspector();
}
}
function handleTouchMove(evt: TouchEvent) {
if (evt.touches.length !== 1) {
return;
......
......@@ -166,6 +166,7 @@ export function makePlotsInspector(
}
function updateInspector() {
updateInspectorLineVisibility();
updateInspectorXCoordinate();
updateInspectorLine();
updateInspectorPoints();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment