[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.

[ghost]

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.

[LavanyaGowtham2021]

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