Merge pull request #1445 from tradingview/can-prevent-touch-scroll-ca…

…pture-on-price-scale

disabling touch scrolling should apply to scales as well

src/gui/price-axis-widget.ts

@@ -145,7 +145,7 @@ export class PriceAxisWidget implements IDestroyable {
 			this._topCanvasBinding.canvasElement,
 			handler,
 			{
-				treatVertTouchDragAsPageScroll: () => false,
+				treatVertTouchDragAsPageScroll: () => !this._options.handleScroll.vertTouchDrag,
 				treatHorzTouchDragAsPageScroll: () => true,
 			}
 		);

src/gui/time-axis-widget.ts

@@ -124,7 +124,7 @@ export class TimeAxisWidget<HorzScaleItem> implements MouseEventHandlers, IDestr
 			this,
 			{
 				treatVertTouchDragAsPageScroll: () => true,
-				treatHorzTouchDragAsPageScroll: () => false,
+				treatHorzTouchDragAsPageScroll: () => !this._chart.options().handleScroll.horzTouchDrag,
 			}
 		);
 	}

tests/e2e/interactions/interactions-test-cases.ts

@@ -142,6 +142,8 @@ describe('Interactions tests', function(): void {
 				});
 			});
 
+			await page.close();
+
 			if (errors.length !== 0) {
 				throw new Error(`Page has errors:\n${errors.join('\n')}`);
 			}

tests/e2e/interactions/test-cases/touch/dont-horz-page-scroll-when-handle-scroll-is-enabled.js

@@ -0,0 +1,80 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'swipeTouchHorizontal', target: 'timescale' }];
+}
+
+function finalInteractionsToPerform() {
+	return [{ action: 'swipeTouchHorizontal', target: 'timescale' }];
+}
+
+let chart;
+let initialScrollPosition = 0;
+
+function beforeInteractions(container) {
+	const halfWindowWidth = Math.round(window.innerWidth / 2);
+	container.style.height = '300px';
+	container.style.width = `${halfWindowWidth}px`;
+	container.style.position = 'relative';
+	const beforeContent = document.createElement('div');
+	beforeContent.style.height = '300px';
+	beforeContent.style.width = `${halfWindowWidth}px`;
+	document.body.insertBefore(beforeContent, container);
+	const afterContent = document.createElement('div');
+	afterContent.style.height = '300px';
+	afterContent.style.width = `${halfWindowWidth}px`;
+	document.body.appendChild(afterContent);
+	document.body.style.whiteSpace = 'nowrap';
+	document.body.style.overflowX = 'auto';
+	document.body.style.display = 'flex';
+	document.body.style.flexDirection = 'row';
+	document.body.style.width = halfWindowWidth * 3 + 'px';
+
+	window.scrollTo(halfWindowWidth / 2, 0);
+
+	chart = LightweightCharts.createChart(container, {
+		handleScroll: {
+			horzTouchDrag: true,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	const mainSeriesData = generateData();
+	mainSeries.setData(mainSeriesData);
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			initialScrollPosition = window.scrollX;
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
+
+function afterFinalInteractions() {
+	if (Math.abs(window.scrollX - initialScrollPosition) > 0) {
+		throw new Error(
+			`Expected page to NOT be scrolled. Starting: ${initialScrollPosition}, End: ${window.scrollX}`
+		);
+	}
+
+	return Promise.resolve();
+}

tests/e2e/interactions/test-cases/touch/dont-vertical-page-scroll-when-handle-scroll-is-enabled.js

@@ -0,0 +1,74 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'swipeTouchVertical', target: 'rightpricescale' }];
+}
+
+function finalInteractionsToPerform() {
+	return [{ action: 'swipeTouchVertical', target: 'rightpricescale' }];
+}
+
+let chart;
+let initialScrollPosition = 0;
+
+function beforeInteractions(container) {
+	container.style.height = '300px';
+	container.style.position = 'relative';
+	const windowHeight = window.innerHeight;
+	const beforeContent = document.createElement('div');
+	beforeContent.style.height = Math.round(windowHeight / 2) + 'px';
+	beforeContent.style.width = '100%';
+	document.body.insertBefore(beforeContent, container);
+	const afterContent = document.createElement('div');
+	afterContent.style.height = Math.round(windowHeight / 2) + 'px';
+	afterContent.style.width = '100%';
+	document.body.appendChild(afterContent);
+
+	window.scrollTo(0, 300);
+
+	chart = LightweightCharts.createChart(container, {
+		handleScroll: {
+			vertTouchDrag: true,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	const mainSeriesData = generateData();
+	mainSeries.setData(mainSeriesData);
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			initialScrollPosition = window.scrollY;
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
+
+function afterFinalInteractions() {
+	if (Math.abs(window.scrollY - initialScrollPosition) > 0) {
+		throw new Error(
+			`Expected page to NOT be scrolled. Starting: ${initialScrollPosition}, End: ${window.scrollY}`
+		);
+	}
+
+	return Promise.resolve();
+}

tests/e2e/interactions/test-cases/touch/horz-page-scroll-when-handle-scroll-is-disabled.js

@@ -0,0 +1,80 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'swipeTouchHorizontal', target: 'timescale' }];
+}
+
+function finalInteractionsToPerform() {
+	return [{ action: 'swipeTouchHorizontal', target: 'timescale' }];
+}
+
+let chart;
+let initialScrollPosition = 0;
+
+function beforeInteractions(container) {
+	const halfWindowWidth = Math.round(window.innerWidth / 2);
+	container.style.height = '300px';
+	container.style.width = `${halfWindowWidth}px`;
+	container.style.position = 'relative';
+	const beforeContent = document.createElement('div');
+	beforeContent.style.height = '300px';
+	beforeContent.style.width = `${halfWindowWidth}px`;
+	document.body.insertBefore(beforeContent, container);
+	const afterContent = document.createElement('div');
+	afterContent.style.height = '300px';
+	afterContent.style.width = `${halfWindowWidth}px`;
+	document.body.appendChild(afterContent);
+	document.body.style.whiteSpace = 'nowrap';
+	document.body.style.overflowX = 'auto';
+	document.body.style.display = 'flex';
+	document.body.style.flexDirection = 'row';
+	document.body.style.width = halfWindowWidth * 3 + 'px';
+
+	window.scrollTo(halfWindowWidth / 2, 0);
+
+	chart = LightweightCharts.createChart(container, {
+		handleScroll: {
+			horzTouchDrag: false,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	const mainSeriesData = generateData();
+	mainSeries.setData(mainSeriesData);
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			initialScrollPosition = window.scrollX;
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
+
+function afterFinalInteractions() {
+	if (Math.abs(window.scrollX - initialScrollPosition) < 100) {
+		throw new Error(
+			`Expected page to be scrolled by at least 100 pixels. Starting: ${initialScrollPosition}, End: ${window.scrollX}`
+		);
+	}
+
+	return Promise.resolve();
+}

tests/e2e/interactions/test-cases/touch/vertical-page-scroll-when-handle-scroll-is-disabled.js

@@ -0,0 +1,74 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function initialInteractionsToPerform() {
+	return [{ action: 'swipeTouchVertical', target: 'rightpricescale' }];
+}
+
+function finalInteractionsToPerform() {
+	return [{ action: 'swipeTouchVertical', target: 'rightpricescale' }];
+}
+
+let chart;
+let initialScrollPosition = 0;
+
+function beforeInteractions(container) {
+	container.style.height = '300px';
+	container.style.position = 'relative';
+	const windowHeight = window.innerHeight;
+	const beforeContent = document.createElement('div');
+	beforeContent.style.height = Math.round(windowHeight / 2) + 'px';
+	beforeContent.style.width = '100%';
+	document.body.insertBefore(beforeContent, container);
+	const afterContent = document.createElement('div');
+	afterContent.style.height = Math.round(windowHeight / 2) + 'px';
+	afterContent.style.width = '100%';
+	document.body.appendChild(afterContent);
+
+	window.scrollTo(0, 300);
+
+	chart = LightweightCharts.createChart(container, {
+		handleScroll: {
+			vertTouchDrag: false,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	const mainSeriesData = generateData();
+	mainSeries.setData(mainSeriesData);
+
+	return new Promise(resolve => {
+		requestAnimationFrame(() => {
+			initialScrollPosition = window.scrollY;
+			resolve();
+		});
+	});
+}
+
+function afterInitialInteractions() {
+	return new Promise(resolve => {
+		requestAnimationFrame(resolve);
+	});
+}
+
+function afterFinalInteractions() {
+	if (Math.abs(window.scrollY - initialScrollPosition) < 100) {
+		throw new Error(
+			`Expected page to be scrolled by at least 100 pixels. Starting: ${initialScrollPosition}, End: ${window.scrollY}`
+		);
+	}
+
+	return Promise.resolve();
+}