[syncfusion_charts] Cancel long-press zoom

[DrNiels]

Use case

Sometimes, you want to drag a chart but accidently remain in place too long and start a zoom operation by accident or just decide that you want to cancel the zoom operation while you're at it. However, you can't.

Proposal

Making the zoom operation via long-press cancelable would be nice, either by providing a hook, so a developer can introduce a cancel operation that fits their app, or by providing a default like pressing Escape.

Hi @DrNiels ,

In the current SfCartesianChart implementation, there is no default feature to cancel the zooming events. However, you can implement this functionality by using a variable to cancel zoom in sample level.

enableZooming: Added this field to control the pinch zooming, double-tap zooming, and panning properties.
enableSelectionZooming: The enableSelectionZooming variable enables selection zooming, which allows zooming into a selected area.
This approach ensures that you can prevent accidental zoom operations. Additionally, we have a zoom-out button that triggers the zoom-out behavior. We have prepared a sample and attached if for your reference. Kindly refer to the sample and modify it according to your requirements.

Demo:

GitHub_2183.zip

If you need further assistance or have additional questions, please let us know!

Regards,
Kaviyarasan Arumugam.

Please reopen this ticket, if you need further assistance with this.

[DrNiels]

It seems a bit tricky, but it's working for me now. Temporaryly disabling selection zoom will cancel the current zoom operation, see here:

Code sample

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cancel long-press zoom',
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late SfCartesianChart chart;
  late ZoomPanBehavior _zoomPanBehavior;
  bool enableZooming = false;
  bool enableSelectionZooming = false;
final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _updateZoomBehavior();
  }

  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData(10, 17),
      ChartData(20, 34),
      ChartData(30, 50),
      ChartData(40, 70),
    ];

    chart = SfCartesianChart(
      zoomPanBehavior: _zoomPanBehavior,
      series: <CartesianSeries>[
        ColumnSeries<ChartData, double>(
          dataSource: chartData,
          xValueMapper: (ChartData data, _) => data.x,
          yValueMapper: (ChartData data, _) => data.y,
        ),
      ],
    );

    return Scaffold(
      body: Center(
        child: KeyboardListener(
          focusNode: _focusNode,
          autofocus: true,
          onKeyEvent: (KeyEvent event) {
            if ((event is KeyDownEvent) && (event.logicalKey == LogicalKeyboardKey.escape) && enableSelectionZooming) {
              setState(() {
                enableSelectionZooming = !enableSelectionZooming;
                _updateZoomBehavior();
              });
              Future.delayed(const Duration(milliseconds: 100), () {
                setState(() {
                  enableSelectionZooming = !enableSelectionZooming;
                  _updateZoomBehavior();
                });
              });
            }
          },
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _buildZoomButton(
                label: enableZooming ? 'Disable Zoom' : 'Enable Zoom',
                onPressed: () {
                  setState(() {
                    enableZooming = !enableZooming;
                    _updateZoomBehavior();
                  });
                },
              ),
              _buildZoomButton(
                label:
                    enableSelectionZooming
                        ? 'Disable Selected Area Zoom'
                        : 'Enable Selected Area Zoom',
                onPressed: () {
                  setState(() {
                    enableSelectionZooming = !enableSelectionZooming;
                    _updateZoomBehavior();
                  });
                },
              ),
              _buildZoomButton(label: 'Zoom Out', onPressed: zoom),
              SizedBox(height: 300, child: chart),
            ],
          ),
        ),
      ),
    );
  }

  void _updateZoomBehavior() {
    _zoomPanBehavior = ZoomPanBehavior(
      enableSelectionZooming: enableSelectionZooming,
      enableDoubleTapZooming: enableZooming,
      enablePinching: enableZooming,
      enablePanning: enableZooming,
    );
  }

  Widget _buildZoomButton({
    required String label,
    required VoidCallback onPressed,
  }) {
    return TextButton(onPressed: onPressed, child: Text(label));
  }

  void zoom() {
    if (enableZooming) {
      _zoomPanBehavior.zoomOut();
    }
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final double x;
  final double? y;
}

Thank you for your support and sorry for the late reply

[Mugunthan-Ramalingam]

Hi @DrNiels,

We are happy to hear that the solution was found by yourself. If you have any further queries, please get back to us. We are always happy to assist you.

Regards,
Mugunthan.