Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added onHover and onTapCancel callbacks #50

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

apalala-dev
Copy link

@apalala-dev apalala-dev commented Sep 27, 2022

Touchable didn't provide onTapCancel and onHover callbacks, so I added them.
It can be used to interact better with the canvas on web & desktop.

An example for the onHover usage is to display a MouseRegion with a SystemMouseCursors.click when hovering clickable parts of a canvas.

On the other end, onTapCancel allows to disable more easily a pressed state when cancelling a tap on a Shape.

Example:

MouseRegion(
  cursor: _cursor ?? SystemMouseCursors.basic,
  child: CanvasTouchDetector(
    gesturesToOverride: const [
      GestureType.onTapDown,
      GestureType.onTapUp,
      GestureType.onHover,
      GestureType.onTapCancel,
    ],
    builder: (context) => CustomPaint(
      painter: MyCustomPainter(
        context,
        // other args
        onHover: (details) {
          if (details.hovering == true) {
            if (_cursor != SystemMouseCursors.click) {
              setState(() {
                _cursor = SystemMouseCursors.click;
              });
            }
          } else {
            if (_cursor != SystemMouseCursors.basic) {
              setState(() {
                _cursor = SystemMouseCursors.basic;
              });
            }
          }
        },
        onTapDown: (_) {
          // Do some stuff
          setState(() {
            _isPressing = true;
          });
        },
        onTapUp: (_) {
          setState(() {
            _isPressing = false;
          });
        },
        onTapCancel: () {
          setState(() {
            _isPressing = false;
          });
        },
      ),
    ),
  ),
);

And in MyCustomPainter's paint method:

var myCanvas = TouchyCanvas(context, canvas);
myCanvas.drawRRect(
      buttonRect,
      Paint()..color = isPressing ? Colors.blue : Colors.red,
      onTapDown: onTapDown,
      onTapUp: onTapUp,
      onTapCancel: onTapCancel,
      onHover: onHover,
    );

@nateshmbhat
Copy link
Owner

@apalala-dev thank you for your contribution ! :)
can u please give a description of the changes u've done and the reasons for the changes ?

there's a conflict in one file, please push a fix.

# Conflicts:
#	lib/src/touchy_canvas.dart
@apalala-dev
Copy link
Author

I updated the description and merged the conflict :)

@juskek juskek mentioned this pull request May 18, 2023
@darkomenx
Copy link

Is there possible to process a review for this pull request please ?
It is a very useful add for this package...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants