nateshmbhat · Feb 22, 2022 · Feb 22, 2022 · Feb 22, 2022 · Mar 9, 2022 · Mar 9, 2022
diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 30
+    compileSdkVersion 31
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'
@@ -36,7 +36,7 @@ android {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.geekytech.touchable.example"
         minSdkVersion 16
-        targetSdkVersion 30
+        targetSdkVersion 31
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

diff --git a/example/android/build.gradle b/example/android/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.5.10'
     repositories {
         google()
         jcenter()

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -2,7 +2,6 @@ import 'package:example/screens/screen1.dart';
 import 'package:example/screens/screen2.dart';
 import 'package:example/screens/screen3.dart';
 import 'package:flutter/material.dart';
-import 'package:touchable/touchable.dart';
 
 void main() {
   runApp(MaterialApp(

diff --git a/example/lib/screens/screen1.dart b/example/lib/screens/screen1.dart
@@ -26,6 +26,10 @@ class _Screen1State extends State<Screen1> with SingleTickerProviderStateMixin {
                 width: 400,
                 height: 900,
                 child: CanvasTouchDetector(
+                  gesturesToOverride: [
+                    GestureType.onTapDown,
+                    GestureType.onTapUp,
+                  ],
                   builder: (context) {
                     return CustomPaint(
                       painter: MyPainter(context, (String circleColor) {
@@ -74,8 +78,9 @@ class MyPainter extends CustomPainter {
   void paint(Canvas _canvas, Size size) {
     TouchyCanvas canvas = TouchyCanvas(context, _canvas);
 
-    canvas.drawCircle(Offset(0, 0), 60, Paint()..color = Colors.deepOrange, onTapDown: (_) {
-      print("orange Circle touched");
+    canvas.drawCircle(Offset(0, 0), 60, Paint()..color = Colors.deepOrange,
+        onTapDown: (_) {
+      print('orange Circle touched');
       setState('orange');
     });
 
@@ -87,7 +92,7 @@ class MyPainter extends CustomPainter {
           ..strokeWidth = 200
           ..style = PaintingStyle.stroke, onTapDown: (detail) {
       setState('black');
-      print("black line touched");
+      print('black line touched');
     });
 
     canvas.drawOval(
@@ -96,7 +101,7 @@ class MyPainter extends CustomPainter {
           ..color = Colors.deepPurple
           ..style = PaintingStyle.stroke
           ..strokeWidth = 70, onTapDown: (_) {
-      print("purple oval touched");
+      print('purple oval touched');
       setState('purple');
     });
 
@@ -106,7 +111,7 @@ class MyPainter extends CustomPainter {
           ..color = Colors.deepOrange
           ..style = PaintingStyle.stroke
           ..strokeWidth = 50, onTapDown: (_) {
-      print("orange rect touched");
+      print('orange rect touched');
       setState('orange');
     });
 
@@ -115,11 +120,13 @@ class MyPainter extends CustomPainter {
       ..style = PaintingStyle.stroke
       ..strokeWidth = 10;
     canvas.drawCircle(Offset(150, 50), 60, paint, onTapDown: (_) {
-      print("green Circle touched");
+      print('green Circle touched');
       setState('green');
     });
 
-    canvas.drawCircle(Offset(150, 250), 70, Paint()..color = Colors.lightBlueAccent, onTapDown: (_) {
+    canvas.drawCircle(
+        Offset(150, 250), 70, Paint()..color = Colors.lightBlueAccent,
+        onTapDown: (_) {
       print('light blue Circle tap down');
       setState('white');
     }, onTapUp: (detail) {
@@ -145,11 +152,12 @@ class MyPainter extends CustomPainter {
           ..strokeWidth = 40
           ..color = Colors.grey, onTapDown: (_) {
       setState('grey');
-      print("grey RRect touched");
+      print('grey RRect touched');
     });
 
     canvas.drawRRect(
-        RRect.fromLTRBR(100 - 20.0, 340 - 20.0, 300 + 20.0, 650 + 20.0, Radius.elliptical(100 + 20.0, 150 + 20.0)),
+        RRect.fromLTRBR(100 - 20.0, 340 - 20.0, 300 + 20.0, 650 + 20.0,
+            Radius.elliptical(100 + 20.0, 150 + 20.0)),
         Paint()
           ..strokeWidth = 1
           ..style = PaintingStyle.stroke

diff --git a/example/lib/screens/screen2.dart b/example/lib/screens/screen2.dart
@@ -1,6 +1,5 @@
 import 'dart:math';
-import 'dart:ui';
-import 'package:flutter/cupertino.dart';
+
 import 'package:flutter/material.dart';
 import 'package:touchable/touchable.dart';
 
@@ -106,7 +105,7 @@ class MyPainter extends CustomPainter {
         pi,
         false,
         Paint()..color = Colors.black, onTapDown: (detail) {
-      print("clicked");
+      print('clicked');
       if (smileAnimation.value == 90) {
         smileAnimationController.reverse();
       }
@@ -116,11 +115,11 @@ class MyPainter extends CustomPainter {
   void drawNose(TouchyCanvas canvas, Size size) {
     var center = Offset(size.width / 2, size.height / 2);
     var noseColor =
-    ColorTween(begin: Colors.blueGrey, end: Colors.lightBlueAccent).animate(
-        CurvedAnimation(
-            parent: noseAnimationController, curve: Curves.bounceOut));
+        ColorTween(begin: Colors.blueGrey, end: Colors.lightBlueAccent).animate(
+            CurvedAnimation(
+                parent: noseAnimationController, curve: Curves.bounceOut));
     var noseLength =
-    Tween<double>(begin: 0, end: 100).animate(noseAnimationController);
+        Tween<double>(begin: 0, end: 100).animate(noseAnimationController);
     var upperbound = noseAnimationController.upperBound;
 
     void drawNose(Color color, double extraLength) {
@@ -132,12 +131,13 @@ class MyPainter extends CustomPainter {
               Offset(center.dx + 15, center.dy + 25 + extraLength)
             ], true),
           Paint()..color = color, onTapDown: (_) {
-        print("On Pan Down");
+        print('On Pan Down');
         if (noseAnimationController.value == upperbound ||
             noseAnimationController.status == AnimationStatus.forward) {
           noseAnimationController.reverse();
-        } else
+        } else {
           noseAnimationController.forward();
+        }
       });
     }
 
@@ -161,8 +161,8 @@ class MyPainter extends CustomPainter {
           Offset(center.dx - xOffset, center.dy - 40), 10, Paint());
       canvas.drawCircle(Offset(center.dx + xOffset, center.dy - 50), 20,
           Paint()..color = Colors.transparent, onTapDown: (_) {
-            eyeAnimationController.reverse();
-          });
+        eyeAnimationController.reverse();
+      });
     }
 
     void drawEyeLid(double xOffset) {
@@ -186,4 +186,4 @@ class MyPainter extends CustomPainter {
   bool shouldRepaint(CustomPainter oldDelegate) {
     return true;
   }
-}
+}
diff --git a/example/lib/screens/screen3.dart b/example/lib/screens/screen3.dart
@@ -25,9 +25,10 @@ class _Screen3State extends State<Screen3> with SingleTickerProviderStateMixin {
                 width: 400,
                 height: 900,
                 child: CanvasTouchDetector(
+                  gesturesToOverride: [GestureType.onTapUp, GestureType.onTapDown],
                   builder: (context) {
                     return CustomPaint(
-                      painter: MyPainter(context, (String circleColor) {
+                      painter: MyPainter(context, color, (String circleColor) {
                         setState(() {
                           switch (circleColor) {
                             case 'orange':
@@ -65,16 +66,19 @@ class _Screen3State extends State<Screen3> with SingleTickerProviderStateMixin {
 
 class MyPainter extends CustomPainter {
   Function(String) setState;
+  final Color color;
   final BuildContext context;
 
-  MyPainter(this.context, this.setState);
+  MyPainter(this.context, this.color, this.setState);
 
   @override
   void paint(Canvas _canvas, Size size) {
     TouchyCanvas canvas = TouchyCanvas(context, _canvas);
+    canvas.scale(0.5, 0.5);
 
-    canvas.drawRect(Rect.fromLTWH(0, 0, 100, 300), Paint()..color = Colors.blue, onTapDown: (_) {
-      setState('blue');
+    canvas.translate(0, 100);
+    canvas.drawRect(Rect.fromLTWH(100, 100, 100, 200), Paint()..color = Colors.blue, onTapDown: (_) {
+      setState(color == Colors.pinkAccent ? 'grey' : 'pink');
     });
   }
 

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.6.1"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,14 +21,14 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.2.0"
   charcode:
     dependency: transitive
     description:
       name: charcode
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
@@ -73,14 +73,21 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.10"
+    version: "0.12.11"
+  material_color_utilities:
+    dependency: transitive
+    description:
+      name: material_color_utilities
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.3"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.7.0"
   path:
     dependency: transitive
     description:
@@ -134,14 +141,14 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.0"
+    version: "0.4.8"
   touchable:
     dependency: "direct main"
     description:
       path: ".."
       relative: true
     source: path
-    version: "1.0.0"
+    version: "1.0.1"
   typed_data:
     dependency: transitive
     description:
@@ -155,6 +162,6 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
 sdks:
-  dart: ">=2.12.0 <3.0.0"
+  dart: ">=2.14.0 <3.0.0"
diff --git a/example/test/widget_test.dart b/example/test/widget_test.dart
@@ -5,10 +5,4 @@
 // gestures. You can also use WidgetTester to find child widgets in the widget
 // tree, read text, and verify that the values of widget properties are correct.
 
-import 'package:flutter/material.dart';
-import 'package:flutter_test/flutter_test.dart';
-
-import 'package:example/main.dart';
-
-void main() {
-}
+void main() {}
diff --git a/lib/src/canvas_touch_detector.dart b/lib/src/canvas_touch_detector.dart
@@ -178,6 +178,11 @@ class _CanvasTouchDetectorState extends State<CanvasTouchDetector> {
                   touchController
                       .add(Gesture(GestureType.onPanDown, tapDetail));
                 },
+          onPanEnd: !widget.gesturesToOverride.contains(GestureType.onPanEnd)
+              ? null
+              : (tapDetail) {
+                  touchController.add(Gesture(GestureType.onPanEnd, tapDetail));
+                },
           onSecondaryTapDown: !widget.gesturesToOverride
                   .contains(GestureType.onSecondaryTapDown)
               ? null

diff --git a/lib/src/shape_handler.dart b/lib/src/shape_handler.dart
@@ -11,6 +11,11 @@ class ShapeHandler {
   final List<ClipShapeItem> clipItems = [];
   final Set<GestureType> _registeredGestures = {};
 
+  double _scaleX = 1;
+  double _scaleY = 1;
+  double _translationX = 0;
+  double _translationY = 0;
+
   Set<GestureType> get registeredGestures => _registeredGestures;
 
   void addShape(Shape shape) {
@@ -88,11 +93,13 @@ class ShapeHandler {
     ScrollController? scrollController,
     AxisDirection direction = AxisDirection.down,
   }) async {
-    var touchPoint = _getActualOffsetFromScrollController(
-        TouchCanvasUtil.getPointFromGestureDetail(gesture.gestureDetail), scrollController, direction);
+    var touchPoint = _getActualOffsetWithScaleAndTranslation(_getActualOffsetFromScrollController(
+        TouchCanvasUtil.getPointFromGestureDetail(gesture.gestureDetail), scrollController, direction));
     if (!_registeredGestures.contains(gesture.gestureType)) return;
 
-    var touchedShapes = _getTouchedShapes(touchPoint);
+    final fixedTouchPoint = gesture.gestureType == GestureType.onPanEnd ? Offset(touchPoint.dx.abs(), touchPoint.dy.abs()) : touchPoint;
+
+    var touchedShapes = _getTouchedShapes(fixedTouchPoint);
     if (touchedShapes.isEmpty) return;
     for (var touchedShape in touchedShapes) {
       if (touchedShape.registeredGestures.contains(gesture.gestureType)) {
@@ -101,4 +108,19 @@ class ShapeHandler {
       }
     }
   }
+
+  Offset _getActualOffsetWithScaleAndTranslation(Offset touchPoint) {
+    //return Offset(touchPoint.dx / _scaleX - _translationX, touchPoint.dy / _scaleY - _translationY);
+    return Offset((touchPoint.dx - _translationX) / _scaleX, (touchPoint.dy - _translationY) / _scaleY);
+  }
+
+  void scale(double sx, [double? sy]) {
+    _scaleX = sx;
+    _scaleY = sy ?? sx;
+  }
+
+  void translate(double sx, double sy) {
+    _translationX = sx;
+    _translationY = sy;
+  }
 }