Skip to content

Added onHover and onTapCancel callbacks#50

Open
apalala-dev wants to merge 2 commits intonateshmbhat:masterfrom
apalala-dev:master
Open

Added onHover and onTapCancel callbacks#50
apalala-dev wants to merge 2 commits intonateshmbhat:masterfrom
apalala-dev:master

Conversation

@apalala-dev
Copy link
Copy Markdown

@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
Copy Markdown
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
Copy Markdown
Author

I updated the description and merged the conflict :)

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

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