Add zoom gestures

Author: CodeDoctorDE

app/lib/board/cell.dart

@@ -189,7 +189,7 @@ class GameCell extends PositionComponent
   }
 
   VectorDefinition toDefinition() =>
-      (position.clone()..divide(grid.cellSizeWithZoom)).toDefinition();
+      (position.clone()..divide(grid.cellSize)).toDefinition();
 
   GlobalVectorDefinition toGlobalDefinition(ClientWorldState state) =>
       GlobalVectorDefinition.fromLocal(state.tableName, toDefinition());

app/lib/board/game.dart

@@ -4,6 +4,7 @@ import 'package:flame/components.dart';
 import 'package:flame/events.dart';
 import 'package:flame/game.dart';
 import 'package:flame_bloc/flame_bloc.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 import 'package:setonix/bloc/settings.dart';
@@ -17,7 +18,7 @@ import 'package:setonix/helpers/vector.dart';
 import 'package:setonix_api/setonix_api.dart';
 
 class BoardGame extends FlameGame
-    with ScrollDetector, KeyboardEvents, HasCollisionDetection {
+    with ScrollDetector, KeyboardEvents, HasCollisionDetection, ScaleDetector {
   final VoidCallback onEscape;
   final ContextMenuController contextMenuController;
   late final Sprite selectionSprite, blankSprite;
@@ -45,10 +46,20 @@ class BoardGame extends FlameGame
     await add(
       FlameBlocProvider<SettingsCubit, SetonixSettings>.value(
         value: settingsCubit,
-        children: [provider],
+        children: [
+          provider,
+          FlameBlocListener<SettingsCubit, SetonixSettings>(
+            listenWhen: (previousState, newState) =>
+                previousState.zoom != newState.zoom,
+            onNewState: (state) {
+              camera.viewfinder.zoom = state.zoom.clamp(0.4, 2.0);
+            },
+          ),
+        ],
       ),
     );
     provider.addAll([camera, world]);
+    camera.viewfinder.zoom = settingsCubit.state.zoom;
     selectionSprite = await Sprite.load('selection.png');
     blankSprite = await Sprite.load('blank.png');
     _hand = GameHand();
@@ -74,11 +85,55 @@ class BoardGame extends FlameGame
 
   static const zoomPerScrollUnit = 0.02;
 
+  double _startZoom = 1.0;
+  Vector2 _startPosition = Vector2.zero();
+
+  @override
+  void onScaleStart(ScaleStartInfo info) {
+    _startZoom = camera.viewfinder.zoom;
+    _startPosition = info.eventPosition.global;
+  }
+
+  @override
+  void onScaleUpdate(ScaleUpdateInfo info) {
+    final zoom = camera.viewfinder.zoom;
+    final delta = (info.delta.global..negate()) / zoom;
+
+    if (info.scale.global.x == 0 || info.scale.global.x == 1.0) {
+      camera.moveBy(delta);
+      return;
+    }
+
+    final newZoom = (_startZoom * info.scale.global.x).clamp(0.4, 2.0);
+    final oldZoom = camera.viewfinder.zoom.clamp(0.4, 2.0);
+    camera.viewfinder.zoom = newZoom;
+    // Zoom inside towards the focal point
+    final screenCenter = camera.viewport.size / 2;
+    final zoomDelta = newZoom - oldZoom;
+    if (((4.0 - newZoom) < precisionErrorTolerance &&
+            (4.0 - oldZoom) < precisionErrorTolerance) ||
+        ((0.4 - newZoom) < precisionErrorTolerance &&
+            (0.4 - oldZoom) < precisionErrorTolerance)) {
+      return;
+    }
+    final focalPoint = info.eventPosition.global - screenCenter;
+    final focalDelta = (focalPoint - _startPosition) / newZoom;
+    camera.moveBy(focalDelta * (zoomDelta / newZoom) + delta);
+  }
+
+  @override
+  void onScaleEnd(ScaleEndInfo info) {
+    settingsCubit.resetZoom(camera.viewfinder.zoom);
+  }
+
   @override
   void onScroll(PointerScrollInfo info) {
-    componentsAtPoint(
+    final handled = componentsAtPoint(
       info.eventPosition.widget,
     ).whereType<ScrollCallbacks>().any((element) => element.onScroll(info));
+    if (handled) return;
+    camera.viewfinder.zoom +=
+        info.scrollDelta.global.y.sign * zoomPerScrollUnit;
   }
 
   Vector2 _currentCameraVelocity = Vector2.zero();
@@ -88,7 +143,8 @@ class BoardGame extends FlameGame
     super.update(dt);
 
     if (!_currentCameraVelocity.isZero()) {
-      camera.moveBy(_currentCameraVelocity * dt * 60);
+      final zoom = camera.viewfinder.zoom;
+      camera.moveBy(_currentCameraVelocity * dt * 500 / zoom);
     }
   }
 

app/lib/board/grid.dart

@@ -1,21 +1,17 @@
 import 'package:flame/components.dart';
 import 'package:flame/extensions.dart';
-import 'package:flame_bloc/flame_bloc.dart';
-import 'package:setonix/bloc/settings.dart';
 import 'package:setonix/board/cell.dart';
 
-class BoardGrid extends PositionComponent
-    with HasGameReference, FlameBlocListenable<SettingsCubit, SetonixSettings> {
+class BoardGrid extends PositionComponent with HasGameReference {
   final Vector2 cellSize;
   static const _padding = 3.0;
   Rect? _lastViewport;
-  double _zoom = 1.0;
 
   BoardGrid({required this.cellSize});
 
   Rect get viewport {
     final Rect viewport = game.camera.visibleWorldRect;
-    final currentSize = cellSizeWithZoom;
+    final currentSize = cellSize;
     return Rect.fromLTRB(
       (viewport.left / currentSize.x - _padding).floor() * currentSize.x,
       (viewport.top / currentSize.y - _padding).floor() * currentSize.y,
@@ -35,7 +31,7 @@ class BoardGrid extends PositionComponent
   void _updateGrid() {
     if (!shouldReset()) return;
     final viewport = this.viewport;
-    final currentSize = cellSizeWithZoom;
+    final currentSize = cellSize;
     // Remove components that are out of the viewport
     removeAll(
       children.where((element) {
@@ -67,8 +63,6 @@ class BoardGrid extends PositionComponent
     _lastViewport = viewport;
   }
 
-  Vector2 get cellSizeWithZoom => cellSize * _zoom;
-
   @override
   void update(double dt) {
     super.update(dt);
@@ -83,22 +77,4 @@ class BoardGrid extends PositionComponent
 
   Component _createCell({required Vector2 position, required Vector2 size}) =>
       GameCell(position: position, size: size);
-
-  @override
-  void onInitialState(SetonixSettings state) {
-    _zoom = state.zoom;
-  }
-
-  @override
-  bool listenWhen(SetonixSettings previousState, SetonixSettings newState) =>
-      previousState.zoom != newState.zoom;
-
-  @override
-  void onNewState(SetonixSettings state) {
-    if (_zoom != state.zoom) {
-      _zoom = state.zoom;
-      _lastViewport = null;
-      removeAll(children);
-    }
-  }
 }

app/pubspec.lock

@@ -414,10 +414,10 @@ packages:
     dependency: "direct main"
     description:
       name: flame
-      sha256: "348136b7d928188a8c9a11cd844d9125b02e7afc6c83bb9a52a16aee88ab7e81"
+      sha256: "6a98c1697bfe4669c604e4459cb01ca96559f464d3523f6af90a8956bf2080ee"
       url: "https://pub.dev"
     source: hosted
-    version: "1.34.0"
+    version: "1.35.0"
   flame_bloc:
     dependency: "direct main"
     description:

app/pubspec.yaml

@@ -47,7 +47,7 @@ dependencies:
   rxdart: ^0.28.0
   collection: ^1.18.0
   flame_bloc: ^1.12.14
-  flame: ">=1.34.0 <1.35.0"
+  flame: ">=1.35.0 <1.36.0"
   flame_tiled: ^3.0.4
   # Networking
   http: ^1.2.1

metadata/en-US/changelogs/11.txt

@@ -1,3 +1,4 @@
+* Add zoom gestures
 * Fix server builds not created for released versions
 
 Read more here: https://linwood.dev/setonix/0.6.1