From b931579c353652bbbe615533a32123b0e85565f0 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Thu, 17 Oct 2024 14:47:46 +0800 Subject: [PATCH 01/17] chore: checking --- src/store/ChartAdapterStore.ts | 164 ++++++++++++++++++++++----------- 1 file changed, 109 insertions(+), 55 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 6e36b2dca..90aa1b1e3 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -251,10 +251,97 @@ export default class ChartAdapterStore { } } + // onTouch(e: TouchEvent) { + // console.log('here', e.type); + // // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: + // const chartNode = this.mainStore.chart.chartNode; + // if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { + // if (this.touchValues.multiTouch) { + // if (e.type === 'touchend') { + // this.touchValues.touchIds = this.touchValues.touchIds?.filter( + // id => id === e.changedTouches[0].identifier + // ); + // this.touchValues = { multiTouch: !!this.touchValues.touchIds?.length }; + // } + // return; + // } + // if (e.touches.length > 1) { + // this.touchValues = { multiTouch: true }; + // this.touchValues.touchIds = Array.from(e.touches).map(touch => touch.identifier); + // return; + // } + + // const { pageX, pageY } = e.changedTouches[0]; + + // if (['touchmove', 'touchend'].includes(e.type)) { + // const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; + // const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; + // const { top, left } = chartNode.getBoundingClientRect(); + // const xCoord = pageX - left; + // const yCoord = pageY - top; + // const isForcedScrollArea = xCoord < forcedScrollAreaWidth && yCoord < forcedScrollAreaHeight; + + // if (this.touchValues.x && this.touchValues.y) { + // const xDiff = this.touchValues.x - pageX; + // const yDiff = this.touchValues.y - pageY; + // const deltaXTotal = (this.touchValues.deltaXTotal ?? 0) + xDiff; + // const deltaYTotal = (this.touchValues.deltaYTotal ?? 0) + yDiff; + // const deltaX = e.type === 'touchend' ? Math.abs(deltaXTotal) : Math.abs(xDiff); + // const deltaY = e.type === 'touchend' ? Math.abs(deltaYTotal) : Math.abs(yDiff); + // const isVerticalScroll = deltaY > deltaX; + // this.touchValues = { ...this.touchValues, deltaXTotal, deltaYTotal }; + + // if (isForcedScrollArea && isVerticalScroll) { + // const shouldForceMaxScroll = + // Math.abs(Number(this.touchValues.deltaYTotal)) > 10 && e.type === 'touchend'; + // if (!this.isXScrollBlocked) this.toggleXScrollBlock(); + // if (shouldForceMaxScroll) { + // // handling max scroll on quick swipe + // // this.scrollableChartParent?.scrollTo({ + // // top: + // // Number(this.touchValues.deltaYTotal) < 0 + // // ? 0 + // // : this.scrollableChartParent.scrollHeight, + // // behavior: 'smooth', + // // }); + // } else if (e.type === 'touchmove') { + // // handling slow scroll + // this.scrollableChartParent?.scrollBy({ + // top: yDiff, + // }); + + // // if (!this.clearTouchDeltasTimer) { + // // this.clearTouchDeltasTimer = setTimeout(() => { + // // // clearing total deltas to avoid triggering max scroll after the slow scroll + // // this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; + // // this.clearTouchDeltasTimer = undefined; + // // }, 100); + // // } + // } + // } + // } + // this.touchValues = { ...this.touchValues, x: pageX, y: pageY }; + // if (e.type === 'touchend' && this.isXScrollBlocked) { + // this.enableXScrollTimer = setTimeout(() => { + // this.toggleXScrollBlock(false); + // }, 100); + // } + // } + // if (['touchstart', 'touchend'].includes(e.type)) { + // this.touchValues = + // e.type === 'touchstart' + // ? { x: pageX, y: pageY } + // : { deltaYTotal: this.touchValues.deltaYTotal, deltaXTotal: this.touchValues.deltaXTotal }; + // } + // } + // } + onTouch(e: TouchEvent) { - // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: const chartNode = this.mainStore.chart.chartNode; + + // Ensure the chart node and parent container are available and vertical scroll is disabled for the chart. if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { + // Handle multi-touch events. if (this.touchValues.multiTouch) { if (e.type === 'touchend') { this.touchValues.touchIds = this.touchValues.touchIds?.filter( @@ -264,6 +351,8 @@ export default class ChartAdapterStore { } return; } + + // Detect multi-touch and store touch identifiers. if (e.touches.length > 1) { this.touchValues = { multiTouch: true }; this.touchValues.touchIds = Array.from(e.touches).map(touch => touch.identifier); @@ -271,65 +360,30 @@ export default class ChartAdapterStore { } const { pageX, pageY } = e.changedTouches[0]; + const { top, left } = chartNode.getBoundingClientRect(); + const xCoord = pageX - left; + const yCoord = pageY - top; - if (['touchmove', 'touchend'].includes(e.type)) { - const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; - const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; - const { top, left } = chartNode.getBoundingClientRect(); - const xCoord = pageX - left; - const yCoord = pageY - top; - const isForcedScrollArea = xCoord < forcedScrollAreaWidth && yCoord < forcedScrollAreaHeight; + const isForcedScrollArea = + xCoord < chartNode.offsetWidth - this.mainStore.chart.yAxisWidth && + yCoord < chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; - if (this.touchValues.x && this.touchValues.y) { - const xDiff = this.touchValues.x - pageX; + // Track touch coordinates for scrolling. + if (isForcedScrollArea) { + if (this.touchValues.x !== undefined && this.touchValues.y !== undefined) { const yDiff = this.touchValues.y - pageY; - const deltaXTotal = (this.touchValues.deltaXTotal ?? 0) + xDiff; - const deltaYTotal = (this.touchValues.deltaYTotal ?? 0) + yDiff; - const deltaX = e.type === 'touchend' ? Math.abs(deltaXTotal) : Math.abs(xDiff); - const deltaY = e.type === 'touchend' ? Math.abs(deltaYTotal) : Math.abs(yDiff); - const isVerticalScroll = deltaY > deltaX; - this.touchValues = { ...this.touchValues, deltaXTotal, deltaYTotal }; - - if (isForcedScrollArea && isVerticalScroll) { - const shouldForceMaxScroll = - Math.abs(Number(this.touchValues.deltaYTotal)) > 10 && e.type === 'touchend'; - if (!this.isXScrollBlocked) this.toggleXScrollBlock(); - if (shouldForceMaxScroll) { - // handling max scroll on quick swipe - this.scrollableChartParent?.scrollTo({ - top: - Number(this.touchValues.deltaYTotal) < 0 - ? 0 - : this.scrollableChartParent.scrollHeight, - behavior: 'smooth', - }); - } else if (e.type === 'touchmove') { - // handling slow scroll - this.scrollableChartParent?.scrollBy({ - top: yDiff, - }); - if (!this.clearTouchDeltasTimer) { - this.clearTouchDeltasTimer = setTimeout(() => { - // clearing total deltas to avoid triggering max scroll after the slow scroll - this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; - this.clearTouchDeltasTimer = undefined; - }, 100); - } - } + + // Scroll the parent container normally based on touch movement. + if (e.type === 'touchmove') { + this.scrollableChartParent?.scrollBy({ top: yDiff }); } } - this.touchValues = { ...this.touchValues, x: pageX, y: pageY }; - if (e.type === 'touchend' && this.isXScrollBlocked) { - this.enableXScrollTimer = setTimeout(() => { - this.toggleXScrollBlock(false); - }, 100); - } + this.touchValues = { x: pageX, y: pageY }; // Update coordinates for next move. } + + // Reset touch values on touch start or touch end. if (['touchstart', 'touchend'].includes(e.type)) { - this.touchValues = - e.type === 'touchstart' - ? { x: pageX, y: pageY } - : { deltaYTotal: this.touchValues.deltaYTotal, deltaXTotal: this.touchValues.deltaXTotal }; + this.touchValues = e.type === 'touchstart' ? { x: pageX, y: pageY } : {}; } } } @@ -588,7 +642,7 @@ export default class ChartAdapterStore { delta_x = this.getXFromEpoch((barNext.DT as Date).getTime()) - x; ratio = - ((date as unknown as number) - (bar.DT as Date).getTime()) / + (((date as unknown) as number) - (bar.DT as Date).getTime()) / ((barNext.DT as Date).getTime() - (bar.DT as Date).getTime()); if (price) delta_y = barNext.Close - price; @@ -596,7 +650,7 @@ export default class ChartAdapterStore { delta_x = x - this.getXFromEpoch((barPrev.DT as Date).getTime()); ratio = - ((date as unknown as number) - (bar.DT as Date).getTime()) / + (((date as unknown) as number) - (bar.DT as Date).getTime()) / ((bar.DT as Date).getTime() - (barPrev.DT as Date).getTime()); if (price) delta_y = price - barPrev.Close; From a8a137ee3eedf2205963ec461d099efadeeeb1ec Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 21 Oct 2024 13:50:30 +0800 Subject: [PATCH 02/17] fix --- src/store/ChartAdapterStore.ts | 163 +++++++++++---------------------- 1 file changed, 56 insertions(+), 107 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 90aa1b1e3..90b9860fb 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -251,97 +251,11 @@ export default class ChartAdapterStore { } } - // onTouch(e: TouchEvent) { - // console.log('here', e.type); - // // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: - // const chartNode = this.mainStore.chart.chartNode; - // if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { - // if (this.touchValues.multiTouch) { - // if (e.type === 'touchend') { - // this.touchValues.touchIds = this.touchValues.touchIds?.filter( - // id => id === e.changedTouches[0].identifier - // ); - // this.touchValues = { multiTouch: !!this.touchValues.touchIds?.length }; - // } - // return; - // } - // if (e.touches.length > 1) { - // this.touchValues = { multiTouch: true }; - // this.touchValues.touchIds = Array.from(e.touches).map(touch => touch.identifier); - // return; - // } - - // const { pageX, pageY } = e.changedTouches[0]; - - // if (['touchmove', 'touchend'].includes(e.type)) { - // const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; - // const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; - // const { top, left } = chartNode.getBoundingClientRect(); - // const xCoord = pageX - left; - // const yCoord = pageY - top; - // const isForcedScrollArea = xCoord < forcedScrollAreaWidth && yCoord < forcedScrollAreaHeight; - - // if (this.touchValues.x && this.touchValues.y) { - // const xDiff = this.touchValues.x - pageX; - // const yDiff = this.touchValues.y - pageY; - // const deltaXTotal = (this.touchValues.deltaXTotal ?? 0) + xDiff; - // const deltaYTotal = (this.touchValues.deltaYTotal ?? 0) + yDiff; - // const deltaX = e.type === 'touchend' ? Math.abs(deltaXTotal) : Math.abs(xDiff); - // const deltaY = e.type === 'touchend' ? Math.abs(deltaYTotal) : Math.abs(yDiff); - // const isVerticalScroll = deltaY > deltaX; - // this.touchValues = { ...this.touchValues, deltaXTotal, deltaYTotal }; - - // if (isForcedScrollArea && isVerticalScroll) { - // const shouldForceMaxScroll = - // Math.abs(Number(this.touchValues.deltaYTotal)) > 10 && e.type === 'touchend'; - // if (!this.isXScrollBlocked) this.toggleXScrollBlock(); - // if (shouldForceMaxScroll) { - // // handling max scroll on quick swipe - // // this.scrollableChartParent?.scrollTo({ - // // top: - // // Number(this.touchValues.deltaYTotal) < 0 - // // ? 0 - // // : this.scrollableChartParent.scrollHeight, - // // behavior: 'smooth', - // // }); - // } else if (e.type === 'touchmove') { - // // handling slow scroll - // this.scrollableChartParent?.scrollBy({ - // top: yDiff, - // }); - - // // if (!this.clearTouchDeltasTimer) { - // // this.clearTouchDeltasTimer = setTimeout(() => { - // // // clearing total deltas to avoid triggering max scroll after the slow scroll - // // this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; - // // this.clearTouchDeltasTimer = undefined; - // // }, 100); - // // } - // } - // } - // } - // this.touchValues = { ...this.touchValues, x: pageX, y: pageY }; - // if (e.type === 'touchend' && this.isXScrollBlocked) { - // this.enableXScrollTimer = setTimeout(() => { - // this.toggleXScrollBlock(false); - // }, 100); - // } - // } - // if (['touchstart', 'touchend'].includes(e.type)) { - // this.touchValues = - // e.type === 'touchstart' - // ? { x: pageX, y: pageY } - // : { deltaYTotal: this.touchValues.deltaYTotal, deltaXTotal: this.touchValues.deltaXTotal }; - // } - // } - // } - onTouch(e: TouchEvent) { + console.log('here', e.type); + // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: const chartNode = this.mainStore.chart.chartNode; - - // Ensure the chart node and parent container are available and vertical scroll is disabled for the chart. if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { - // Handle multi-touch events. if (this.touchValues.multiTouch) { if (e.type === 'touchend') { this.touchValues.touchIds = this.touchValues.touchIds?.filter( @@ -351,8 +265,6 @@ export default class ChartAdapterStore { } return; } - - // Detect multi-touch and store touch identifiers. if (e.touches.length > 1) { this.touchValues = { multiTouch: true }; this.touchValues.touchIds = Array.from(e.touches).map(touch => touch.identifier); @@ -360,30 +272,66 @@ export default class ChartAdapterStore { } const { pageX, pageY } = e.changedTouches[0]; - const { top, left } = chartNode.getBoundingClientRect(); - const xCoord = pageX - left; - const yCoord = pageY - top; - const isForcedScrollArea = - xCoord < chartNode.offsetWidth - this.mainStore.chart.yAxisWidth && - yCoord < chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; + if (['touchmove', 'touchend'].includes(e.type)) { + const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; + const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; + const { top, left } = chartNode.getBoundingClientRect(); + const xCoord = pageX - left; + const yCoord = pageY - top; + const isForcedScrollArea = xCoord < forcedScrollAreaWidth && yCoord < forcedScrollAreaHeight; - // Track touch coordinates for scrolling. - if (isForcedScrollArea) { - if (this.touchValues.x !== undefined && this.touchValues.y !== undefined) { + if (this.touchValues.x && this.touchValues.y) { + const xDiff = this.touchValues.x - pageX; const yDiff = this.touchValues.y - pageY; - - // Scroll the parent container normally based on touch movement. - if (e.type === 'touchmove') { - this.scrollableChartParent?.scrollBy({ top: yDiff }); + const deltaXTotal = (this.touchValues.deltaXTotal ?? 0) + xDiff; + const deltaYTotal = (this.touchValues.deltaYTotal ?? 0) + yDiff; + const deltaX = e.type === 'touchend' ? Math.abs(deltaXTotal) : Math.abs(xDiff); + const deltaY = e.type === 'touchend' ? Math.abs(deltaYTotal) : Math.abs(yDiff); + const isVerticalScroll = deltaY > deltaX; + this.touchValues = { ...this.touchValues, deltaXTotal, deltaYTotal }; + + if (isForcedScrollArea && isVerticalScroll) { + const shouldForceMaxScroll = + Math.abs(Number(this.touchValues.deltaYTotal)) > 10 && e.type === 'touchend'; + if (!this.isXScrollBlocked) this.toggleXScrollBlock(); + if (shouldForceMaxScroll) { + // handling max scroll on quick swipe + // this.scrollableChartParent?.scrollTo({ + // top: + // Number(this.touchValues.deltaYTotal) < 0 + // ? 0 + // : this.scrollableChartParent.scrollHeight, + // behavior: 'smooth', + // }); + } else if (e.type === 'touchmove') { + // handling slow scroll + this.scrollableChartParent?.scrollBy({ + top: yDiff, + }); + + if (!this.clearTouchDeltasTimer) { + this.clearTouchDeltasTimer = setTimeout(() => { + // clearing total deltas to avoid triggering max scroll after the slow scroll + this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; + this.clearTouchDeltasTimer = undefined; + }, 100); + } + } } } - this.touchValues = { x: pageX, y: pageY }; // Update coordinates for next move. + this.touchValues = { ...this.touchValues, x: pageX, y: pageY }; + if (e.type === 'touchend' && this.isXScrollBlocked) { + this.enableXScrollTimer = setTimeout(() => { + this.toggleXScrollBlock(false); + }, 100); + } } - - // Reset touch values on touch start or touch end. if (['touchstart', 'touchend'].includes(e.type)) { - this.touchValues = e.type === 'touchstart' ? { x: pageX, y: pageY } : {}; + this.touchValues = + e.type === 'touchstart' + ? { x: pageX, y: pageY } + : { deltaYTotal: this.touchValues.deltaYTotal, deltaXTotal: this.touchValues.deltaXTotal }; } } } @@ -397,6 +345,7 @@ export default class ChartAdapterStore { const nonScrollableAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; const { left } = chartNode.getBoundingClientRect(); const isVerticalScroll = e.deltaY && e.deltaX === 0; + ``; const x = e.pageX - left; if (x < nonScrollableAreaWidth && isVerticalScroll) { if (this.enableYScrollTimer) return; From 16faffb795c3c1ee2920c969a7042c342a927703 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Thu, 24 Oct 2024 11:43:08 +0800 Subject: [PATCH 03/17] from react side --- src/store/ChartAdapterStore.ts | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 90b9860fb..c6813765b 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -252,7 +252,6 @@ export default class ChartAdapterStore { } onTouch(e: TouchEvent) { - console.log('here', e.type); // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: const chartNode = this.mainStore.chart.chartNode; if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { @@ -345,7 +344,6 @@ export default class ChartAdapterStore { const nonScrollableAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; const { left } = chartNode.getBoundingClientRect(); const isVerticalScroll = e.deltaY && e.deltaX === 0; - ``; const x = e.pageX - left; if (x < nonScrollableAreaWidth && isVerticalScroll) { if (this.enableYScrollTimer) return; @@ -540,7 +538,24 @@ export default class ChartAdapterStore { toggleXScrollBlock = (isBlocked = true) => { this.isXScrollBlocked = isBlocked; - window.flutterChart?.app.toggleXScrollBlock(isBlocked); + + const flutterChart = document.getElementsByClassName('flutter-chart')[0]; + console.log('isBlocked', isBlocked); + + if (flutterChart) { + if (isBlocked) { + flutterChart.style.overflowY = 'scroll'; + flutterChart.style.touchAction = 'pan-y'; + } else { + flutterChart.style.touchAction = 'auto'; + flutterChart.style.overflowY = 'hide'; + } + } else { + console.log('No element with the class "flutter-chart" found.'); + } + + // this.isXScrollBlocked = isBlocked; + // window.flutterChart?.app.toggleXScrollBlock(isBlocked); }; toggleDataFitMode = () => { From c6de2a6dd417cbc668dc9f9595bf45b6ddacad94 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Thu, 24 Oct 2024 12:42:42 +0800 Subject: [PATCH 04/17] fix --- src/store/ChartAdapterStore.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index c6813765b..79d9f73a8 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -539,7 +539,7 @@ export default class ChartAdapterStore { toggleXScrollBlock = (isBlocked = true) => { this.isXScrollBlocked = isBlocked; - const flutterChart = document.getElementsByClassName('flutter-chart')[0]; + const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; console.log('isBlocked', isBlocked); if (flutterChart) { From 27d3e02b209af7f558ae05a289c2028830e801ab Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Thu, 24 Oct 2024 15:23:34 +0800 Subject: [PATCH 05/17] fix --- src/store/ChartAdapterStore.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 79d9f73a8..71d05d813 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -546,16 +546,17 @@ export default class ChartAdapterStore { if (isBlocked) { flutterChart.style.overflowY = 'scroll'; flutterChart.style.touchAction = 'pan-y'; + window.flutterChart?.app.toggleXScrollBlock(isBlocked); } else { flutterChart.style.touchAction = 'auto'; flutterChart.style.overflowY = 'hide'; + window.flutterChart?.app.toggleXScrollBlock(isBlocked); } } else { console.log('No element with the class "flutter-chart" found.'); } // this.isXScrollBlocked = isBlocked; - // window.flutterChart?.app.toggleXScrollBlock(isBlocked); }; toggleDataFitMode = () => { From 02fd03a043ecf12953c1ef147f77067ebee6615b Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Thu, 24 Oct 2024 16:17:07 +0800 Subject: [PATCH 06/17] testing it --- src/store/ChartAdapterStore.ts | 47 ++++++++++++++++------------------ 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 71d05d813..9c681cfbc 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -291,19 +291,8 @@ export default class ChartAdapterStore { this.touchValues = { ...this.touchValues, deltaXTotal, deltaYTotal }; if (isForcedScrollArea && isVerticalScroll) { - const shouldForceMaxScroll = - Math.abs(Number(this.touchValues.deltaYTotal)) > 10 && e.type === 'touchend'; if (!this.isXScrollBlocked) this.toggleXScrollBlock(); - if (shouldForceMaxScroll) { - // handling max scroll on quick swipe - // this.scrollableChartParent?.scrollTo({ - // top: - // Number(this.touchValues.deltaYTotal) < 0 - // ? 0 - // : this.scrollableChartParent.scrollHeight, - // behavior: 'smooth', - // }); - } else if (e.type === 'touchmove') { + if (e.type === 'touchmove') { // handling slow scroll this.scrollableChartParent?.scrollBy({ top: yDiff, @@ -539,24 +528,32 @@ export default class ChartAdapterStore { toggleXScrollBlock = (isBlocked = true) => { this.isXScrollBlocked = isBlocked; - const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; console.log('isBlocked', isBlocked); + const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; if (flutterChart) { - if (isBlocked) { - flutterChart.style.overflowY = 'scroll'; - flutterChart.style.touchAction = 'pan-y'; - window.flutterChart?.app.toggleXScrollBlock(isBlocked); - } else { - flutterChart.style.touchAction = 'auto'; - flutterChart.style.overflowY = 'hide'; - window.flutterChart?.app.toggleXScrollBlock(isBlocked); - } - } else { - console.log('No element with the class "flutter-chart" found.'); + flutterChart.style.touchAction = 'pan-y'; + flutterChart.style.overflowY = 'scroll'; + document.getElementsByTagName('body')[0].style.touchAction = 'none'; + + // if (isBlocked) { + // flutterChart.style.overflowY = 'scroll'; + // flutterChart.style.touchAction = 'pan-y'; + + // // window.flutterChart?.app.toggleXScrollBlock(isBlocked); + // // flutterChart.addEventListener('touchmove', this.preventHorizontalScroll, { passive: false }); + // } else { + // flutterChart.style.overflowY = 'hide'; + // flutterChart.style.touchAction = 'auto'; + // // window.flutterChart?.app.toggleXScrollBlock(isBlocked); + // // flutterChart.removeEventListener('touchmove', this.preventHorizontalScroll); + // } } + }; - // this.isXScrollBlocked = isBlocked; + preventHorizontalScroll = (event: TouchEvent) => { + event.stopPropagation(); + event.preventDefault(); }; toggleDataFitMode = () => { From 40223785f5a1a25ca51566ae6aed37a0a7adcee3 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:20:10 +0800 Subject: [PATCH 07/17] fix from react and request animation --- src/store/ChartAdapterStore.ts | 63 ++++++++++++++++++++++------------ 1 file changed, 42 insertions(+), 21 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 9c681cfbc..80c740a2e 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -254,6 +254,11 @@ export default class ChartAdapterStore { onTouch(e: TouchEvent) { // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: const chartNode = this.mainStore.chart.chartNode; + const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; + if (!this.isXScrollBlocked) { + this.stopScroll(flutterChart); + } + if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { if (this.touchValues.multiTouch) { if (e.type === 'touchend') { @@ -527,33 +532,49 @@ export default class ChartAdapterStore { toggleXScrollBlock = (isBlocked = true) => { this.isXScrollBlocked = isBlocked; - - console.log('isBlocked', isBlocked); const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; if (flutterChart) { - flutterChart.style.touchAction = 'pan-y'; - flutterChart.style.overflowY = 'scroll'; - document.getElementsByTagName('body')[0].style.touchAction = 'none'; - - // if (isBlocked) { - // flutterChart.style.overflowY = 'scroll'; - // flutterChart.style.touchAction = 'pan-y'; - - // // window.flutterChart?.app.toggleXScrollBlock(isBlocked); - // // flutterChart.addEventListener('touchmove', this.preventHorizontalScroll, { passive: false }); - // } else { - // flutterChart.style.overflowY = 'hide'; - // flutterChart.style.touchAction = 'auto'; - // // window.flutterChart?.app.toggleXScrollBlock(isBlocked); - // // flutterChart.removeEventListener('touchmove', this.preventHorizontalScroll); - // } + if (isBlocked) { + flutterChart.style.overflowY = 'scroll'; + flutterChart.style.overflowX = 'hidden'; + flutterChart.style.touchAction = 'pan-y'; + } else { + this.allowTemporaryScroll(flutterChart); + } } }; - preventHorizontalScroll = (event: TouchEvent) => { - event.stopPropagation(); - event.preventDefault(); + allowTemporaryScroll = (element: HTMLElement) => { + let lastScrollTop = element.scrollTop; + let isScrolling = false; + let scrollTimeout: ReturnType; + + const monitorScroll = () => { + if (element.scrollTop !== lastScrollTop) { + isScrolling = true; + lastScrollTop = element.scrollTop; + + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + this.stopScroll(element); + }, 200); + } else { + isScrolling = false; + } + + if (isScrolling) { + requestAnimationFrame(monitorScroll); + } + }; + + requestAnimationFrame(monitorScroll); + }; + + stopScroll = (element: HTMLElement) => { + element.style.removeProperty('overflow-y'); + element.style.removeProperty('overflow-x'); + element.style.removeProperty('touch-action'); }; toggleDataFitMode = () => { From d04849c6bb23673d2613deee2b2f7e7aef3c46a2 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Fri, 25 Oct 2024 17:25:15 +0800 Subject: [PATCH 08/17] chore: for ios fix --- src/store/ChartAdapterStore.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 80c740a2e..188ec8367 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -256,6 +256,9 @@ export default class ChartAdapterStore { const chartNode = this.mainStore.chart.chartNode; const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; if (!this.isXScrollBlocked) { + if (e.type === 'touchstart' || e.type === 'touchmove') { + e.preventDefault(); + } this.stopScroll(flutterChart); } @@ -536,6 +539,7 @@ export default class ChartAdapterStore { if (flutterChart) { if (isBlocked) { + console.log('isBlocked', isBlocked); flutterChart.style.overflowY = 'scroll'; flutterChart.style.overflowX = 'hidden'; flutterChart.style.touchAction = 'pan-y'; @@ -566,9 +570,8 @@ export default class ChartAdapterStore { if (isScrolling) { requestAnimationFrame(monitorScroll); } + requestAnimationFrame(monitorScroll); }; - - requestAnimationFrame(monitorScroll); }; stopScroll = (element: HTMLElement) => { From fcc7b0f4a37251e6764d4dc9b3d008267675f70f Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 11:20:30 +0800 Subject: [PATCH 09/17] rollback iphone changes --- src/store/ChartAdapterStore.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 188ec8367..f1784e915 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -256,9 +256,6 @@ export default class ChartAdapterStore { const chartNode = this.mainStore.chart.chartNode; const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; if (!this.isXScrollBlocked) { - if (e.type === 'touchstart' || e.type === 'touchmove') { - e.preventDefault(); - } this.stopScroll(flutterChart); } From 76ab265f0c2f3e960baec1023137d3a267832b6e Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 11:51:03 +0800 Subject: [PATCH 10/17] trigger From 3b112d4011ac9cbd8e90649bd5da9a3726912fd4 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 13:03:17 +0800 Subject: [PATCH 11/17] fix --- src/store/ChartAdapterStore.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index f1784e915..02e523cfd 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -280,6 +280,7 @@ export default class ChartAdapterStore { if (['touchmove', 'touchend'].includes(e.type)) { const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; + const { top, left } = chartNode.getBoundingClientRect(); const xCoord = pageX - left; const yCoord = pageY - top; @@ -299,17 +300,17 @@ export default class ChartAdapterStore { if (!this.isXScrollBlocked) this.toggleXScrollBlock(); if (e.type === 'touchmove') { // handling slow scroll - this.scrollableChartParent?.scrollBy({ - top: yDiff, - }); - - if (!this.clearTouchDeltasTimer) { - this.clearTouchDeltasTimer = setTimeout(() => { - // clearing total deltas to avoid triggering max scroll after the slow scroll - this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; - this.clearTouchDeltasTimer = undefined; - }, 100); - } + // this.scrollableChartParent?.scrollBy({ + // top: yDiff, + // }); + + // if (!this.clearTouchDeltasTimer) { + // this.clearTouchDeltasTimer = setTimeout(() => { + // // clearing total deltas to avoid triggering max scroll after the slow scroll + // this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; + // this.clearTouchDeltasTimer = undefined; + // }, 100); + // } } } } @@ -536,9 +537,8 @@ export default class ChartAdapterStore { if (flutterChart) { if (isBlocked) { - console.log('isBlocked', isBlocked); flutterChart.style.overflowY = 'scroll'; - flutterChart.style.overflowX = 'hidden'; + // flutterChart.style.overflowX = 'hidden'; flutterChart.style.touchAction = 'pan-y'; } else { this.allowTemporaryScroll(flutterChart); From c50ba94559ff5a795c41ee4f860e9d2532aabbb5 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 13:33:08 +0800 Subject: [PATCH 12/17] testing --- src/store/ChartAdapterStore.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 02e523cfd..bd37c4a83 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -332,6 +332,7 @@ export default class ChartAdapterStore { onWheel = (e: WheelEvent) => { e.preventDefault(); + e.stopPropagation(); // Prevent vertical scroll on the chart on wheel devices by disabling pointer events to make chart parent scrollable: const chartNode = this.mainStore.chart.chartNode; @@ -538,7 +539,8 @@ export default class ChartAdapterStore { if (flutterChart) { if (isBlocked) { flutterChart.style.overflowY = 'scroll'; - // flutterChart.style.overflowX = 'hidden'; + flutterChart.style.overflowX = 'hidden'; + flutterChart.style.overscrollBehavior = 'contain'; flutterChart.style.touchAction = 'pan-y'; } else { this.allowTemporaryScroll(flutterChart); From cd3cda1bfc1ff2d1474d872c9e3c94dd51546e16 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 13:36:30 +0800 Subject: [PATCH 13/17] fix --- src/store/ChartAdapterStore.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index bd37c4a83..8d2eb617c 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -304,13 +304,13 @@ export default class ChartAdapterStore { // top: yDiff, // }); - // if (!this.clearTouchDeltasTimer) { - // this.clearTouchDeltasTimer = setTimeout(() => { - // // clearing total deltas to avoid triggering max scroll after the slow scroll - // this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; - // this.clearTouchDeltasTimer = undefined; - // }, 100); - // } + if (!this.clearTouchDeltasTimer) { + this.clearTouchDeltasTimer = setTimeout(() => { + // clearing total deltas to avoid triggering max scroll after the slow scroll + this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; + this.clearTouchDeltasTimer = undefined; + }, 100); + } } } } From 7a49abede303843fce6985befb85a0a405193817 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 14:35:47 +0800 Subject: [PATCH 14/17] fix: scroll From 4d01f967fd342fde8d96a758e63909beb9c1f434 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 17:09:31 +0800 Subject: [PATCH 15/17] fixes --- src/store/ChartAdapterStore.ts | 26 +++++--------------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 8d2eb617c..3ec478fcc 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -255,9 +255,6 @@ export default class ChartAdapterStore { // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: const chartNode = this.mainStore.chart.chartNode; const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; - if (!this.isXScrollBlocked) { - this.stopScroll(flutterChart); - } if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { if (this.touchValues.multiTouch) { @@ -280,7 +277,7 @@ export default class ChartAdapterStore { if (['touchmove', 'touchend'].includes(e.type)) { const forcedScrollAreaWidth = chartNode.offsetWidth - this.mainStore.chart.yAxisWidth; const forcedScrollAreaHeight = chartNode.offsetHeight - this.mainStore.chart.xAxisHeight; - + const { top, left } = chartNode.getBoundingClientRect(); const xCoord = pageX - left; const yCoord = pageY - top; @@ -298,20 +295,8 @@ export default class ChartAdapterStore { if (isForcedScrollArea && isVerticalScroll) { if (!this.isXScrollBlocked) this.toggleXScrollBlock(); - if (e.type === 'touchmove') { - // handling slow scroll - // this.scrollableChartParent?.scrollBy({ - // top: yDiff, - // }); - - if (!this.clearTouchDeltasTimer) { - this.clearTouchDeltasTimer = setTimeout(() => { - // clearing total deltas to avoid triggering max scroll after the slow scroll - this.touchValues = { ...this.touchValues, deltaYTotal: 0, deltaXTotal: 0 }; - this.clearTouchDeltasTimer = undefined; - }, 100); - } - } + } else if (!this.isXScrollBlocked) { + this.stopScroll(flutterChart); } } this.touchValues = { ...this.touchValues, x: pageX, y: pageY }; @@ -543,12 +528,12 @@ export default class ChartAdapterStore { flutterChart.style.overscrollBehavior = 'contain'; flutterChart.style.touchAction = 'pan-y'; } else { - this.allowTemporaryScroll(flutterChart); + this.allowScroll(flutterChart); } } }; - allowTemporaryScroll = (element: HTMLElement) => { + allowScroll = (element: HTMLElement) => { let lastScrollTop = element.scrollTop; let isScrolling = false; let scrollTimeout: ReturnType; @@ -569,7 +554,6 @@ export default class ChartAdapterStore { if (isScrolling) { requestAnimationFrame(monitorScroll); } - requestAnimationFrame(monitorScroll); }; }; From 155a93c1ea9190aac1375123d75416796c722306 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 28 Oct 2024 18:44:38 +0800 Subject: [PATCH 16/17] gix --- src/store/ChartAdapterStore.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index 3ec478fcc..b423fe424 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -254,7 +254,7 @@ export default class ChartAdapterStore { onTouch(e: TouchEvent) { // Prevent vertical scroll on the chart for touch devices by forcing scroll on a scrollable parent of the chart: const chartNode = this.mainStore.chart.chartNode; - const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; + const flutterChart = document.querySelector('.flutter-chart') as HTMLElement; if (chartNode && this.scrollableChartParent && !this.mainStore.state.isVerticalScrollEnabled) { if (this.touchValues.multiTouch) { @@ -294,7 +294,7 @@ export default class ChartAdapterStore { this.touchValues = { ...this.touchValues, deltaXTotal, deltaYTotal }; if (isForcedScrollArea && isVerticalScroll) { - if (!this.isXScrollBlocked) this.toggleXScrollBlock(); + if (!this.isXScrollBlocked) this.toggleXScrollBlock(true, flutterChart); } else if (!this.isXScrollBlocked) { this.stopScroll(flutterChart); } @@ -302,7 +302,7 @@ export default class ChartAdapterStore { this.touchValues = { ...this.touchValues, x: pageX, y: pageY }; if (e.type === 'touchend' && this.isXScrollBlocked) { this.enableXScrollTimer = setTimeout(() => { - this.toggleXScrollBlock(false); + this.toggleXScrollBlock(false, flutterChart); }, 100); } } @@ -517,10 +517,8 @@ export default class ChartAdapterStore { } } - toggleXScrollBlock = (isBlocked = true) => { + toggleXScrollBlock = (isBlocked = true, flutterChart: HTMLElement) => { this.isXScrollBlocked = isBlocked; - const flutterChart = document.getElementsByClassName('flutter-chart')[0] as HTMLElement; - if (flutterChart) { if (isBlocked) { flutterChart.style.overflowY = 'scroll'; @@ -555,6 +553,7 @@ export default class ChartAdapterStore { requestAnimationFrame(monitorScroll); } }; + requestAnimationFrame(monitorScroll); }; stopScroll = (element: HTMLElement) => { From 62cc02dd97b7effeefef6819848a445e2ffe361d Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 29 Oct 2024 11:49:43 +0800 Subject: [PATCH 17/17] improvement --- src/store/ChartAdapterStore.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/store/ChartAdapterStore.ts b/src/store/ChartAdapterStore.ts index b423fe424..9728f8fab 100644 --- a/src/store/ChartAdapterStore.ts +++ b/src/store/ChartAdapterStore.ts @@ -283,6 +283,8 @@ export default class ChartAdapterStore { const yCoord = pageY - top; const isForcedScrollArea = xCoord < forcedScrollAreaWidth && yCoord < forcedScrollAreaHeight; + const isTouchOnYAxis = xCoord >= forcedScrollAreaWidth; + if (this.touchValues.x && this.touchValues.y) { const xDiff = this.touchValues.x - pageX; const yDiff = this.touchValues.y - pageY; @@ -295,7 +297,7 @@ export default class ChartAdapterStore { if (isForcedScrollArea && isVerticalScroll) { if (!this.isXScrollBlocked) this.toggleXScrollBlock(true, flutterChart); - } else if (!this.isXScrollBlocked) { + } else if (!this.isXScrollBlocked && isTouchOnYAxis) { this.stopScroll(flutterChart); } }