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
- chinghung lai asked 1 year ago
- last edited 1 year ago
Hi Chinghung. This looks like a bug. We created a task to fix it. You can track the progress here https://abtsoftware.myjetbrains.com/youtrack/issue/SCJS-955
Hello Also, could you provide a minimalistic setup for reproducing the issue, like something npm installable? You can use one of our examples as a boilerplate https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox
hi Michael, Ivan, here is minimalistic setup for reproducing the issue https://drive.google.com/file/d/1itPsrPbiM1BhwcZNxNet2dP0eGmaOaE9/view?usp=sharing (1) npm install (2) npm run dev (3) chrome F12 + simulate device here is demo video: https://youtu.be/nOkwEy7f92Y Thanks for your help !- hi guys, I have done a lot of tests, and the final conclusion is that a long press will definitely cause ZoomPanModifier anomalies. I can’t avoid this problem, please help, thank you!
Hi Chinghung, the task priority has been changed to major, it will help to fix the problem faster.
- You must login to post comments
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.
- Michael Klishevich answered 1 year ago
- last edited 1 year ago
- You must login to post comments
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
- chinghung lai answered 1 year ago
- last edited 1 year ago
- You must login to post comments
Please login first to submit.
