Skip to content

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