start implementing zoom and pan from outside (incl. get changes in zo…

…oming and panning)
florian03-1 · Dec 22, 2023 · cfd7317 · cfd7317
1 parent 38b8d8a
commit cfd7317
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/BlazorSvgEditor.SvgEditor/SvgEditor.Main.cs b/BlazorSvgEditor.SvgEditor/SvgEditor.Main.cs
@@ -1,3 +1,4 @@
+using BlazorSvgEditor.SvgEditor.Helper;
 using BlazorSvgEditor.SvgEditor.Misc;
 using BlazorSvgEditor.SvgEditor.Shapes;
 using Microsoft.AspNetCore.Components;
@@ -43,6 +44,8 @@ public partial class SvgEditor
 
     [Parameter] public EventCallback<ShapeChangedEventArgs> OnShapeChanged { get; set; } //Event for shape changes
 
+    [Parameter] public EventCallback<(Coord<double> translate, double scale)> TranslationChanged { get; set; }
+    private async Task InvokeTranslationChanged() => await TranslationChanged.InvokeAsync((Translate, Scale));
 
     //ReadOnly
     [Parameter] public bool ReadOnly { get; set; } = false; //Is the editor read only?

diff --git a/BlazorSvgEditor.SvgEditor/SvgEditor.PointerEvents.cs b/BlazorSvgEditor.SvgEditor/SvgEditor.PointerEvents.cs
@@ -42,13 +42,13 @@ private void OnContainerPointerUp(PointerEventArgs e)
         SelectedShape?.SnapToInteger();
     }
 
-    private void OnContainerPointerMove(PointerEventArgs e)
+    private async Task OnContainerPointerMove(PointerEventArgs e)
     {
         if(e.PointerType == "touch") return; //Touch events are handled seperately
 
         if(ShowDiagnosticInformation) _pointerPosition = new Coord<int>((int)e.OffsetX, (int) e.OffsetY);
 
-        if (IsTranslating) Pan(e.MovementX, e.MovementY);
+        if (IsTranslating) await Pan(e.MovementX, e.MovementY);
 
         if (SelectedShape != null && ReadOnly == false)
         {
@@ -57,10 +57,10 @@ private void OnContainerPointerMove(PointerEventArgs e)
         }
     }
 
-    private void OnContainerWheel(WheelEventArgs e)
+    private async Task OnContainerWheel(WheelEventArgs e)
     {
         //Zoom
-        Zoom(e.DeltaY, e.OffsetX, e.OffsetY);
+        await Zoom(e.DeltaY, e.OffsetX, e.OffsetY);
     }
 
 

diff --git a/BlazorSvgEditor.SvgEditor/SvgEditor.PublicMethods.cs b/BlazorSvgEditor.SvgEditor/SvgEditor.PublicMethods.cs
@@ -1,3 +1,4 @@
+using BlazorSvgEditor.SvgEditor.Helper;
 using BlazorSvgEditor.SvgEditor.Misc;
 using BlazorSvgEditor.SvgEditor.Shapes;
 
@@ -64,7 +65,15 @@ public async Task ClearShapes()
     public async Task ResetTransform()
     {
         await SetContainerBoundingBox();
-        ResetTransformation();
+        await ResetTransformation();
+    }
+
+    //Use this method to set the translation to a specific value -> e.g. to syncronize the translation of two SvgEditors
+    public void SetTranslateAndScale(Coord<double>? newTranslate = null, double? newScale = null)
+    {
+        if(newTranslate != null) Translate = newTranslate.Value;
+        if (newScale != null) Scale = newScale.Value;
+        StateHasChanged();
     }
 
     public async Task ReloadImage()

diff --git a/BlazorSvgEditor.SvgEditor/SvgEditor.TouchEvents.cs b/BlazorSvgEditor.SvgEditor/SvgEditor.TouchEvents.cs
@@ -19,7 +19,7 @@ private async Task OnTouchMove(TouchEventArgs touchEventArgs)
             if (_lastTouchPoint != new Coord<double>(0, 0))
             {
                 var delta = currentTouchPoint - _lastTouchPoint;
-                Pan(delta.X, delta.Y);
+                await Pan(delta.X, delta.Y);
             }
             _lastTouchPoint = currentTouchPoint;
         }
@@ -44,7 +44,7 @@ private async Task OnTouchMove(TouchEventArgs touchEventArgs)
                 var containerCenter = new Coord<double>(_containerBoundingBox.Width / 2, _containerBoundingBox.Height / 2);
 
                 var distanceDelta = currentDistance - _lastTouchDistance;
-                TouchZoom(distanceDelta ,containerCenter, delta);
+                await TouchZoom(distanceDelta ,containerCenter, delta);
             }
 
             _lastZoomCenterPoint = new Coord<double>((p1.X + p2.X) / 2, (p1.Y + p2.Y) / 2);

diff --git a/BlazorSvgEditor.SvgEditor/SvgEditor.Transformations.cs b/BlazorSvgEditor.SvgEditor/SvgEditor.Transformations.cs
@@ -15,7 +15,7 @@ public partial class SvgEditor
     internal Coord<double> MoveStartDPoint;
 
     //Delta is the amount of change in the mouse wheel (+ -> zoom in, - -> zoom out)
-    private void Zoom(double delta, double x, double y)
+    private async Task Zoom(double delta, double x, double y)
     {
         var previousScale = Scale;
         var newScale = Scale * (1 - delta / 1000.0);
@@ -26,9 +26,11 @@ private void Zoom(double delta, double x, double y)
 
         Translate = new (Translate.X + (x - Translate.X) * (1 - Scale / previousScale), Translate.Y + (y - Translate.Y) * (1 - Scale / previousScale));
         Translate = new (Translate.X.Round(3), Translate.Y.Round(3));
+
+        await InvokeTranslationChanged();
     }
 
-    private void TouchZoom(double distanceDelta, Coord<double> containerCenter, Coord<double> delta)
+    private async Task TouchZoom(double distanceDelta, Coord<double> containerCenter, Coord<double> delta)
     {
         //DistanceDelta is the amount of change in the distance between the two fingers (+ -> zoom in, - -> zoom out)
         var distanceDeltaFactor = Scale; //Damit das Skalieren zu jeder Zeit gleichmäßig ist, wird die Distanz mit dem aktuellen Scale multipliziert
@@ -44,18 +46,23 @@ private void TouchZoom(double distanceDelta, Coord<double> containerCenter, Coor
         //Set the translation, that the center of the container stays in the center of the image and pan it by the delta
         Translate = new (Translate.X + (containerCenter.X - Translate.X) * (1 - Scale / previousScale) + delta.X, Translate.Y + (containerCenter.Y - Translate.Y) * (1 - Scale / previousScale) + delta.Y);
         Translate = new (Translate.X.Round(3), Translate.Y.Round(3));
+
+        await InvokeTranslationChanged();
     }
+
 
     //x and y are the amount of change the current translation 
-    private void Pan(double x, double y)
+    private async Task Pan(double x, double y)
     {
         Translate.X = (Translate.X + x).Round(3);
         Translate.Y = (Translate.Y + y).Round(3);
+
+        await InvokeTranslationChanged();
     }
 
 
 
-    private void ResetTransformation()
+    private async Task ResetTransformation()
     {
         var containerRatio = (double)_containerBoundingBox.Width / _containerBoundingBox.Height;
         var imageRatio = (double)ImageSize.Width / ImageSize.Height;
@@ -79,6 +86,8 @@ private void ResetTransformation()
         }
 
         StateHasChanged();
+
+        await InvokeTranslationChanged();
     }