feat: support zooming through gestures.

.pubignore

@@ -0,0 +1 @@
+/docs

CHANGELOG.md

@@ -1,5 +1,10 @@
+## 1.1.1
+- fix usage of both Scale and Pan on mobile platforms. ( [#12](https://github.com/graph-cn/flutter_graph_view/pull/12), via: [Mykyta Sadchenko](https://github.com/muknta))
+- feat: support zooming through gestures.
+
 ## 1.1.0
 - feat: add interface to `GraphComponent`: addVertex, addEdge, mergeGraph
+- feat: add implementation of PersistenceDecorator to store position of vertex. ([#10](https://github.com/graph-cn/flutter_graph_view/pull/10) [#11](https://github.com/graph-cn/flutter_graph_view/pull/11), via: [jersonal-com](https://github.com/jersonal-com))
 
 ### Behavior change:
 - interface change: add a graph parameter to `DataConvertor.convertGraph`

lib/core/graph_algorithm.dart

@@ -4,7 +4,6 @@
 
 import 'dart:math';
 
-import 'package:flame/events.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_graph_view/flutter_graph_view.dart';
 

lib/flutter_graph_widget.dart

@@ -1,6 +1,7 @@
 // Copyright (c) 2023- All flutter_graph_view authors. All rights reserved.
 //
 // This source code is licensed under Apache 2.0 License.
+import 'package:flame/extensions.dart';
 import 'package:flame/game.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_graph_view/flutter_graph_view.dart';
@@ -42,16 +43,48 @@ class _FlutterGraphWidgetState extends State<FlutterGraphWidget> {
 
   @override
   Widget build(BuildContext context) {
-    return GameWidget(
-      backgroundBuilder: widget.options?.backgroundBuilder,
-      overlayBuilderMap: overlayBuilderMap2,
-      game: graphCpn = GraphComponent(
-        data: widget.data,
-        convertor: widget.convertor,
-        algorithm: widget.algorithm,
-        options: widget.options,
-        context: context,
-      ),
+    double? scale;
+    Vector2 center = Vector2.zero();
+    return Stack(
+      children: [
+        Positioned.fill(
+          child: GameWidget(
+            backgroundBuilder: widget.options?.backgroundBuilder,
+            overlayBuilderMap: overlayBuilderMap2,
+            game: graphCpn = GraphComponent(
+              data: widget.data,
+              convertor: widget.convertor,
+              algorithm: widget.algorithm,
+              options: widget.options,
+              context: context,
+            ),
+          ),
+        ),
+        Positioned.fill(
+            child: MouseRegion(
+          onHover: (ev) => center = ev.localPosition.toVector2(),
+          opaque: false,
+        )),
+        Positioned.fill(
+            child: GestureDetector(
+          onScaleUpdate: (ScaleUpdateDetails details) {
+            // single finger pan
+            if (details.pointerCount == 1) {
+              var v = details.focalPointDelta.toVector2();
+              graphCpn.onPanUpdate(v);
+            } else if (details.pointerCount == 2) {
+              graphCpn.onZoom(
+                zoomCenter: center,
+                zoomDelta: scale == null
+                    ? (details.scale - 1)
+                    : (details.scale - scale!),
+              );
+              scale = details.scale;
+            }
+          },
+          onScaleEnd: (details) => scale = null,
+        ))
+      ],
     );
   }
 }

lib/widgets/graph_component.dart

@@ -169,10 +169,16 @@ class GraphComponent extends FlameGame
 
   @override
   void onScroll(PointerScrollInfo info) {
+    var zoomCenter = info.eventPosition.widget;
+    var zoomDelta = info.scrollDelta.global.y.sign * zoomPerScrollUnit;
+    onZoom(zoomCenter: zoomCenter, zoomDelta: zoomDelta);
+  }
+
+  void onZoom({required Vector2 zoomCenter, double zoomDelta = 0}) {
     var vf = camera.viewfinder;
     var opg = vf.localToGlobal(Vector2.zero());
     var oz = vf.zoom;
-    var zoomDelta = info.scrollDelta.global.y.sign * zoomPerScrollUnit;
+
     if (vf.zoom + zoomDelta > 0) {
       vf.zoom += zoomDelta;
     }
@@ -181,14 +187,23 @@ class GraphComponent extends FlameGame
     if (vf.zoom <= options.scaleRange.x || vf.zoom >= options.scaleRange.y) {
       return;
     }
-
-    keepMousePosition(info, opg, zoomDelta, vf, oz);
+    keepMousePosition(null, opg, zoomDelta, vf, oz, zoomCenter);
   }
 
   /// ![](https://gitee.com/graph-cn/flutter_graph_view/raw/main/lib/widgets/GraphComponent_scale_explain.jpg)
-  void keepMousePosition(PointerScrollInfo info, Vector2 opg, double zoomDelta,
-      Viewfinder vf, double oz) {
-    var wp = info.eventPosition.widget;
+  void keepMousePosition(
+    PointerScrollInfo? info,
+    Vector2 opg,
+    double zoomDelta,
+    Viewfinder vf,
+    double oz, [
+    Vector2? wp,
+  ]) {
+    assert(
+      info != null || wp != null,
+      'scroll info and widgetPosition cannot be null at the same time',
+    );
+    wp = wp ?? info!.eventPosition.widget;
     var wpg = wp - opg;
     var wpgDelta = wpg * zoomDelta;
     var npg = vf.localToGlobal(Vector2.zero());
@@ -216,6 +231,5 @@ class GraphComponent extends FlameGame
 
       legendCount = i;
     }
-    print(legendCount);
   }
 }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_graph_view
 description: Widgets for beautiful graphic data structures, such as force-oriented diagrams.
-version: 1.1.0
+version: 1.1.1
 repository: https://github.com/dudu-ltd/flutter_graph_view
 homepage: https://graph-cn.github.io/flutter_graph_view