chris/chart
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

jitter fix

Browse source
This commit is contained in:
Chris Amow 2026-08-16 21:44:35 -05:00
parent 7f452703d3
commit 171521cf75
1 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
static/chart.js
View file

@ -723,13 +723,16 @@ class ConfluenceChart {
distance: Math.max(distances[distances.x >= distances.y ? 'x' : 'y'], 1), distance: Math.max(distances[distances.x >= distances.y ? 'x' : 'y'], 1),
startGap: Math.max(gap(touches), 1), startGap: Math.max(gap(touches), 1),
startMid: mid, startMid: mid,
startPrice: this.candles.coordinateToPrice(centerY),
anchor, anchor,
minValue: Math.min(top, bottom), minValue: Math.min(top, bottom),
maxValue: Math.max(top, bottom), maxValue: Math.max(top, bottom),
timeRange, timeRange,
timeAnchor: timeRange.from + (timeRange.to - timeRange.from) * centerX / plot.width, timeAnchor: timeRange.from + (timeRange.to - timeRange.from) * centerX / plot.width,
plotWidth: plot.width, plotWidth: plot.width,
pricePerPx: (Math.max(top, bottom) - Math.min(top, bottom))
/ Math.max(plot.height * (1 - margins.top - margins.bottom), 1),
frame: null,
latest: null,
}; };
event.preventDefault(); event.preventDefault();
}; };
@ -742,9 +745,16 @@ class ConfluenceChart {
} }
if (!this.touchTwo || event.touches.length !== 2) return; if (!this.touchTwo || event.touches.length !== 2) return;
event.preventDefault(); event.preventDefault();
const touches = [...event.touches]; this.touchTwo.latest = [...event.touches];
const mid = midpoint(touches); if (this.touchTwo.frame) return;
this.touchTwo.frame = requestAnimationFrame(() => this.applyTouchTwo());
};
this.applyTouchTwo = () => {
const gesture = this.touchTwo; const gesture = this.touchTwo;
if (!gesture?.latest) return;
gesture.frame = null;
const touches = gesture.latest;
const mid = midpoint(touches);
if (!gesture.kind) { if (!gesture.kind) {
const midDelta = Math.hypot(mid.x - gesture.startMid.x, mid.y - gesture.startMid.y); const midDelta = Math.hypot(mid.x - gesture.startMid.x, mid.y - gesture.startMid.y);
const gapDelta = Math.abs(gap(touches) - gesture.startGap); const gapDelta = Math.abs(gap(touches) - gesture.startGap);
@ -758,14 +768,10 @@ class ConfluenceChart {
from: gesture.timeRange.from + shift, from: gesture.timeRange.from + shift,
to: gesture.timeRange.to + shift, to: gesture.timeRange.to + shift,
}); });
const nowPrice = this.candles.coordinateToPrice( const dPrice = (mid.y - gesture.startMid.y) * gesture.pricePerPx;
mid.y - this.plotCanvas().getBoundingClientRect().top,
);
const dPrice = nowPrice == null || gesture.startPrice == null
? 0 : nowPrice - gesture.startPrice;
this.manualPriceRange = { this.manualPriceRange = {
minValue: gesture.minValue - dPrice, minValue: gesture.minValue + dPrice,
maxValue: gesture.maxValue - dPrice, maxValue: gesture.maxValue + dPrice,
}; };
this.candles.applyOptions({ autoscaleInfoProvider: this.candleAutoscaleProvider }); this.candles.applyOptions({ autoscaleInfoProvider: this.candleAutoscaleProvider });
} else { } else {
@ -792,7 +798,10 @@ class ConfluenceChart {
this.renderContextLabels(); this.renderContextLabels();
}; };
this.touchEndListener = event => { this.touchEndListener = event => {
if (event.touches.length < 2) this.touchTwo = null; if (event.touches.length < 2 && this.touchTwo) {
if (this.touchTwo.frame) cancelAnimationFrame(this.touchTwo.frame);
this.touchTwo = null;
}
if (event.touches.length || !this.touchTap || this.armedTool) return; if (event.touches.length || !this.touchTap || this.armedTool) return;
const tap = this.touchTap; const tap = this.touchTap;
this.touchTap = null; this.touchTap = null;