Added Panning example.

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioPannerEditor/ListenerShape.cs

@@ -0,0 +1,29 @@
+using AngleSharp.Dom;
+using KristofferStrube.Blazor.SVGEditor;
+
+namespace KristofferStrube.Blazor.WebAudio.WasmExample.AudioPannerEditor;
+
+public class ListenerShape : Circle
+{
+    public ListenerShape(IElement element, SVGEditor.SVGEditor svg) : base(element, svg)
+    {
+    }
+
+    public static ListenerShape AddNew(SVGEditor.SVGEditor SVG, double x, double y)
+    {
+        IElement element = SVG.Document.CreateElement("CIRCLE");
+
+        ListenerShape circle = new(element, SVG)
+        {
+            Changed = SVG.UpdateInput,
+            Fill = "lightgrey",
+            Cx = x,
+            Cy = y,
+            R = 1
+        };
+
+        SVG.AddElement(circle);
+
+        return circle;
+    }
+}

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioPannerEditor/ListenerShapeEditor.razor

@@ -0,0 +1,35 @@
+@using KristofferStrube.Blazor.SVGEditor
+@using KristofferStrube.Blazor.SVGEditor.ShapeEditors
+@using KristofferStrube.Blazor.SVGEditor.Extensions
+@inherits ShapeEditor<Circle>
+
+<g transform="translate(@SVGElement.SVG.Translate.x.AsString() @SVGElement.SVG.Translate.y.AsString()) scale(@SVGElement.SVG.Scale.AsString())">
+    <circle @ref=ElementReference
+            @onfocusin="FocusElement"
+            @onfocusout="UnfocusElement"
+            @onpointerdown="SelectAsync"
+            @onkeyup="KeyUp" tabindex="@(SVGElement.IsChildElement ? -1 : 0)"
+            cx=@SVGElement.Cx.AsString()
+            cy=@SVGElement.Cy.AsString()
+            r=@SVGElement.R.AsString()
+            fill="@SVGElement.Fill">
+    </circle>
+    <circle @onfocusin="FocusElement"
+            @onfocusout="UnfocusElement"
+            @onpointerdown="SelectAsync"
+            @onkeyup="KeyUp" tabindex="@(SVGElement.IsChildElement ? -1 : 0)"
+            cx=@((SVGElement.Cx - SVGElement.R).AsString())
+            cy=@SVGElement.Cy.AsString()
+            r=@((SVGElement.R / 2).AsString())
+            fill="@SVGElement.Fill">
+    </circle>
+    <circle @onfocusin="FocusElement"
+            @onfocusout="UnfocusElement"
+            @onpointerdown="SelectAsync"
+            @onkeyup="KeyUp" tabindex="@(SVGElement.IsChildElement ? -1 : 0)"
+            cx=@((SVGElement.Cx + SVGElement.R).AsString())
+            cy=@SVGElement.Cy.AsString()
+            r=@((SVGElement.R / 2).AsString())
+            fill="@SVGElement.Fill">
+    </circle>
+</g>

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioPannerEditor/PannerNodeShape.cs

@@ -0,0 +1,56 @@
+using AngleSharp.Dom;
+using KristofferStrube.Blazor.SVGEditor;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace KristofferStrube.Blazor.WebAudio.WasmExample.AudioPannerEditor;
+
+public class PannerNodeShape : Rect
+{
+    public PannerNodeShape(IElement element, SVGEditor.SVGEditor svg) : base(element, svg)
+    {
+    }
+
+    public override Type Presenter => typeof(PannerNodeShapeEditor);
+
+    public double Rotation { get; set; }
+
+    public override string StateRepresentation => base.StateRepresentation + Rotation;
+
+    public override void HandlePointerMove(PointerEventArgs eventArgs)
+    {
+        if (SVG.CurrentAnchor is not 4 || SVG.EditMode is not EditMode.MoveAnchor)
+        {
+            base.HandlePointerMove(eventArgs);
+            return;
+        }
+
+        (double x, double y) = SVG.LocalDetransform((eventArgs.OffsetX, eventArgs.OffsetY));
+
+        (double x, double y) rotationVector = 
+            (
+                x - (X + (Width / 2)),
+                y - (Y + (Height / 2))
+            );
+
+        Rotation = (-Math.Atan(rotationVector.x / rotationVector.y) * 180 / Math.PI) + (rotationVector.y < 0 ? 180 : 0);
+    }
+
+    public static PannerNodeShape AddNew(SVGEditor.SVGEditor SVG, double x, double y, double rotation, string color)
+    {
+        IElement element = SVG.Document.CreateElement("RECT");
+
+        PannerNodeShape pannerNode = new(element, SVG)
+        {
+            Changed = SVG.UpdateInput,
+            StrokeWidth = "0",
+            Fill = color,
+            Rotation = rotation
+        };
+        (pannerNode.X, pannerNode.Y) = (x, y);
+        (pannerNode.Width, pannerNode.Height) = (2, 2);
+
+        SVG.AddElement(pannerNode);
+
+        return pannerNode;
+    }
+}

samples/KristofferStrube.Blazor.WebAudio.WasmExample/AudioPannerEditor/PannerNodeShapeEditor.razor

@@ -0,0 +1,32 @@
+@using KristofferStrube.Blazor.SVGEditor
+@using KristofferStrube.Blazor.SVGEditor.ShapeEditors
+@using KristofferStrube.Blazor.SVGEditor.Extensions
+@inherits ShapeEditor<PannerNodeShape>
+
+<g transform="translate(@SVGElement.SVG.Translate.x.AsString() @SVGElement.SVG.Translate.y.AsString()) scale(@SVGElement.SVG.Scale.AsString())">
+    <rect @ref=ElementReference
+          @onfocusin="FocusElement"
+          @onfocusout="UnfocusElement"
+          @onpointerdown="SelectAsync"
+          @onkeyup="KeyUp"
+          tabindex="@(SVGElement.IsChildElement ? -1 : 0)"
+          x=@SVGElement.X.AsString()
+          y=@SVGElement.Y.AsString()
+          width=@SVGElement.Width.AsString()
+          height=@SVGElement.Height.AsString()
+          fill="@SVGElement.Fill"
+          transform="rotate(@(SVGElement.Rotation.AsString()) @((SVGElement.X + SVGElement.Width / 2).AsString()) @((SVGElement.Y + SVGElement.Height / 2).AsString()))">
+    </rect>
+</g>
+@if (SVGElement.Selected && SVGElement.SVG.EditMode is not EditMode.Add)
+{
+    <Anchor OnPointerDown="() => AnchorSelect(4)" Position="anchorPosition" />
+}
+
+@code {
+    private (double x, double y) anchorPosition =>
+        (
+            x: SVGElement.X + SVGElement.Width / 2 + Math.Sin(-SVGElement.Rotation / 180 * Math.PI) * SVGElement.Height,
+            y: SVGElement.Y + SVGElement.Height / 2 + Math.Cos(-SVGElement.Rotation / 180 * Math.PI) * SVGElement.Height
+        );
+}