Got error when resize the BoxAnnotation by dragging the left or right border (SciChart v3 only)

I am failed to reproduce it with CodePen:

But in my dev environment, it only happens with SciChart v3. Is it possible related to the data? Do you have any idea?

Please find my codes to add box annotation below:

const addPowerAnnotation = useCallback((x1, x2) => {
    x1 = parseFloat(x1);
    x2 = parseFloat(x2);        
    if (x1 != null && x2 != null) {
        if (!powerAnnotation.current) {
            powerAnnotation.current = new BoxAnnotation({
                id: "powerBox",
                fill: "#0d6efd30",
                stroke: "#0d6efd",
                strokeThickness: 1,
                xCoordinateMode: ECoordinateMode.DataValue,
                x1: x1,
                x2: x2,
                yCoordinateMode: ECoordinateMode.Relative,
                y1: 0.0,
                y2: 1.0,
                isEditable: true,
                resizeDirections: EXyDirection.XDirection,  
            });
            sciChartSurfaceRef.current.annotations.add(powerAnnotation.current);

            // I tried to comment out the dragDelta and dragEnded event handlers. The problem still happens.
            powerAnnotation.current.dragDelta.handlers.push(() => {
                powerAnnotation.current.y1 = 0.0;
                powerAnnotation.current.y2 = 1.0;

                const minX = specSettingsRef.current.start/freqUnits.KHZ;
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;

                if (minX != null && maxX != null) {
                    if (powerAnnotation.current.x1 < minX) {
                        powerAnnotation.current.x1 = minX;
                    } else if (powerAnnotation.current.x1 > maxX) {
                        powerAnnotation.current.x1 = maxX;
                    } else if (powerAnnotation.current.x2 > maxX) {
                        powerAnnotation.current.x2 = maxX;
                    } else if (powerAnnotation.current.x2 < minX) {
                        powerAnnotation.current.x2 = minX;
                    }
                }
            });

            powerAnnotation.current.dragEnded.handlers.push(() => {
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const x1 = powerAnnotation.current.x1;
                const x2 = powerAnnotation.current.x2;

                if (x1 != null && x2 != null && maxX != null) {
                    if (x1 > x2) {
                        powerAnnotation.current.x1 = x2;
                        powerAnnotation.current.x2 = x1;
                    } else if (x2 < x1) {
                        powerAnnotation.current.x1 = x2;
                        powerAnnotation.current.x2 = x1;
                    } else if (x1 === x2) {
                        if (x2 + xInterval.current <= maxX) {
                            powerAnnotation.current.x2 = x2 + xInterval.current;
                        } else {
                            powerAnnotation.current.x1  = x1 - xInterval.current;
                        }
                    }

                    const origStartFreq = parseFloat(channelPowerRef.current.startFreq);
                    const origStopFreq = parseFloat(channelPowerRef.current.stopFreq);
                    const newStartFreq = parseFloat((powerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
                    const newStopFreq = parseFloat((powerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));

                    if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
                        setChannelPower(origObj => ({...origObj, ...{
                            startFreq: newStartFreq,
                            stopFreq: newStopFreq,
                        }}));
                        updateChannelPower(newStartFreq, newStopFreq);
                    }
                }
            });
        } else {
            updatePowerAnnotation(x1, x2);
        }
    }
}, [setChannelPower, updateChannelPower, freqUnits.KHZ, numDP.FREQ, updatePowerAnnotation, removeBandwidthAnnotation]);

Hi Quyen,

We’ve reproduced the issue you reported, and logged bug SCJS-1456

I noticed there’s two problems here.

1/ is that you can drag the annotation vertically outside the viewport
2/ is that when you click on the drag adorner outside the viewport, you get a crash + error message “Cannot read properties of undefined (reading ‘x’)”

For (1) please add this code. It will restrict annotation dragging so that it cannot be dragged vertically.

powerAnnotation = new BoxAnnotation({
    // ... 
    onDrag: (args) => {
        powerAnnotation.y1 = 0.0;
        powerAnnotation.y2 = 1.0;
    }
});

For (2) we are investigating and will update you when we have a resolution.

Best regards,
Andrew