Commit 1f50605f authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

add touch events support

parent 865cf316
......@@ -206,6 +206,20 @@ export const makeChartPreview: ChartComponentFactory<
attributes: dragAttributes,
});
edgesContainer.addEventListener('touchmove', (evt: TouchEvent) => {
if (evt.touches.length !== 1) {
return;
}
const { clientX } = evt.touches[0];
const { left, width } = (<HTMLElement>(
evt.currentTarget
)).getBoundingClientRect();
const windowOffsetX = clientX - left - width / 2;
resizeHandlers.moveResizeWindow(windowOffsetX);
});
edgesContainer.addEventListener('dragstart', evt => {
setGhostImage(evt);
edgesContainer.classList.add('dragging');
......@@ -254,6 +268,19 @@ export const makeChartPreview: ChartComponentFactory<
resizeHandlers.moveLeftEdge(offsetX);
});
leftEdge.addEventListener('touchmove', (evt: TouchEvent) => {
evt.preventDefault();
evt.stopPropagation();
if (evt.touches.length !== 1) {
return;
}
const { clientX } = evt.touches[0];
const { left } = edgesContainer.getBoundingClientRect();
resizeHandlers.moveLeftEdge(clientX - left);
});
rightEdge.addEventListener('dragstart', setGhostImage);
rightEdge.addEventListener('drag', evt => {
evt.preventDefault();
......@@ -265,6 +292,20 @@ export const makeChartPreview: ChartComponentFactory<
resizeHandlers.moveRightEdge(offsetX);
});
rightEdge.addEventListener('touchmove', (evt: TouchEvent) => {
console.log('rightEdgeMove');
evt.preventDefault();
evt.stopPropagation();
if (evt.touches.length !== 1) {
return;
}
const { clientX } = evt.touches[0];
const { left, width } = edgesContainer.getBoundingClientRect();
resizeHandlers.moveRightEdge(clientX - left - width);
});
edgesContainer.appendChild(leftEdge);
edgesContainer.appendChild(rightEdge);
resizeWindowElement.appendChild(edgesContainer);
......
......@@ -218,6 +218,7 @@ body.dark .axis-labels .label {
width: $edgeWidth;
cursor: col-resize;
user-select: none;
padding: 0 8px;
&.left {
left: -$edgeWidth;
......
......@@ -40,8 +40,14 @@ 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('touchmove', handleTouchMove);
}
function handleMouseEnter() {
......@@ -53,7 +59,30 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
}
function handleMouseMove(evt: MouseEvent) {
const xOffset = evt.offsetX / plotSize.width;
moveInspector(evt.offsetX);
}
function handleTouchMove(evt: TouchEvent) {
if (evt.touches.length !== 1) {
return;
}
const { clientX } = evt.touches[0];
const { left, width } = (<HTMLElement>(
evt.currentTarget
)).getBoundingClientRect();
const plotX = clientX - left;
if (plotX < 0 || plotX > width) {
return;
}
moveInspector(plotX);
}
function moveInspector(plotX: number) {
const xOffset = plotX / plotSize.width;
stateController.moveInspector(xOffset);
}
};
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