SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Hello
My application environment is on the mobile browser, so we need to switch between [pan] and [rollover]
When I use a button to switch, everything is fine, but when I want to switch with a long press, an exception occurs
Below is my code
initModifier() {
this.partitionList.forEach((obj, idx)=>{
let sciChartSurface = this.sciObj[idx].sciChartSurface;
this.zoomPanModifier[idx] = new ZoomPanModifier();
this.rolloverModifier[idx] = new RolloverModifier({modifierGroup: this.modifierGroupId, showTooltip: false});
this.zoomPanModifier[idx].isEnabled = true;
// 擴增功能
sciChartSurface.chartModifiers.add(
this.zoomPanModifier[idx],
new ZoomExtentsModifier(),
new MouseWheelZoomModifier(),
new PinchZoomModifier(),
);
});
},
switchCross() {
let enablePan = !this.zoomPanModifier[0].isEnabled;
this.partitionList.forEach((obj, idx)=>{
let sciChartSurface = this.sciObj[idx].sciChartSurface;
this.zoomPanModifier[idx].isEnabled = enablePan;
if (enablePan)
sciChartSurface.chartModifiers.removeAt(4);
else
sciChartSurface.chartModifiers.add(this.rolloverModifier[idx]);
});
},
I recorded a video, first use the button to switch, and then long press to switch, you can see the problem I want to narrate from the video, the URL is as follows: https://youtu.be/vJjbLNGS-iM
After the problem occurred, it was expected that touchmove should be [pan], but it became [zoom]
Thanks for your help
Hi Chinghung,
I created an example with custom LongPressSwitchModifier which perfectly works.
This is my LongPressSwitchModifier.ts file:
import { ChartModifierBase2D } from "scichart/Charting/ChartModifiers/ChartModifierBase2D";
import { ModifierMouseArgs } from "scichart/Charting/ChartModifiers/ModifierMouseArgs";
export class LongPressSwitchModifier extends ChartModifierBase2D {
public readonly type = "LongPressSwitchModifier";
private timer: NodeJS.Timeout;
private callbackFn: () => void;
private timeout = 1500;
constructor(callback: () => void) {
super();
this.callbackFn = callback;
}
public modifierMouseDown(args: ModifierMouseArgs): void {
this.timer = setTimeout(this.callbackFn, this.timeout);
}
public modifierMouseMove(args: ModifierMouseArgs): void {
clearTimeout(this.timer);
}
public modifierMouseUp(args: ModifierMouseArgs): void {
clearTimeout(this.timer);
}
}
This is my example code:
export const drawExampleSwitch = async () => {
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { autoRange: EAutoRange.Once }));
const dataSeries = new XyDataSeries(wasmContext);
const POINTS = 1000;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= 1000; i++) {
const k = 1 - i / 2000;
dataSeries.append(i, Math.sin(i * STEP) * k * 0.7);
}
const rendSeries = new FastLineRenderableSeries(wasmContext, { dataSeries, strokeThickness: 2 });
sciChartSurface.renderableSeries.add(rendSeries);
rendSeries.stroke = "#FF1919FF";
sciChartSurface.chartModifiers.add(
new LongPressSwitchModifier(() => {
const currentModifierType = (sciChartSurface.chartModifiers.get(1) as ChartModifierBase2D)?.type;
if (currentModifierType === EChart2DModifierType.ZoomPan) {
console.log("switched to RolloverModifier");
sciChartSurface.chartModifiers.removeAt(1);
sciChartSurface.chartModifiers.add(new RolloverModifier());
} else if (currentModifierType === EChart2DModifierType.Rollover) {
console.log("switched to ZoomPanModifier");
sciChartSurface.chartModifiers.removeAt(1);
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
} else {
console.log("no modifiers, add RolloverModifier");
sciChartSurface.chartModifiers.add(new RolloverModifier());
}
})
);
return { wasmContext, sciChartSurface };
};
This is the resulting chart with the console output.
hi Michael,
Thank you very much for your reply. I tried to simplify my example. After testing, I found that using mousedown/mousemove/mouseup can meet expectations, but when I switch to touchstart/touchmove/touchend (the other code is exactly the same) , It will go wrong
The following is my sample code
(as the image)
The above code works normally, and then I only adjust this line, an exception will occur (chrome F12 must switch to device mode)
<div id="app" @touchstart="onStart" @touchmove="onMove" @touchend="onEnd">
So I believe this problem may only exist in the touch event
Thank for your help
Please login first to submit.