SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1
0

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

Version
2.0.2146
Images
JavaScript RolloverModifier   Modifier
Share
  • You must to post comments
Filter
Sort by: Most Votes
0
0

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.

Images
  • You must to post comments
0
0

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

Images
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.