Skip to content

AlexeyBoiko/BlazorDraggableDemo

Repository files navigation

Blazor Webassembly SVG Drag And Drop

Blazor Webassembly implementation of

  • drag and drop of SVG objects
  • connecting lines of SVG objects

Demo | Article

Drag And Drop

Blazor Webassembly SVG Drag And Drop demo

Example of use

Without two way binding of X, Y parameters:

@inject MouseService mouseSrv;

<svg xmlns="http://www.w3.org/2000/svg"
    @onmousemove=@(e => mouseSrv.FireMove(this, e)) 
    @onmouseup=@(e => mouseSrv.FireUp(this, e))>

    <Draggable X=250 Y=150>
        <circle r="60" fill="#ff6600" />
        <text text-anchor="middle" alignment-baseline="central" style="fill:#fff;">Sun</text>
    </Draggable>
</svg>

With two way binding:

@inject MouseService mouseSrv;

<svg xmlns="http://www.w3.org/2000/svg"
    @onmousemove=@(e => mouseSrv.FireMove(this, e)) 
    @onmouseup=@(e => mouseSrv.FireUp(this, e))>>

    <Draggable @bind-X=X @bind-Y=Y>
       <circle r="60" fill="#ff6600" />
        <text text-anchor="middle" alignment-baseline="central" style="fill:#fff;">Sun</text>
    </Draggable>
</svg>

@code {
    double X = 250;
    double Y = 150;
}

How to include Draggable in your project

  1. Create MouseService
// inject IMouseService into subscribers
public interface IMouseService {
    event EventHandler<MouseEventArgs>? OnMove;
    event EventHandler<MouseEventArgs>? OnUp;
}

// use MouseService to fire events
public class MouseService : IMouseService {
    public event EventHandler<MouseEventArgs>? OnMove;
    public event EventHandler<MouseEventArgs>? OnUp;

    public void FireMove(object obj, MouseEventArgs evt) => OnMove?.Invoke(obj, evt);
    public void FireUp(object obj, MouseEventArgs evt) => OnUp?.Invoke(obj, evt);
}
  1. Register MouseService in Program.cs
builder.Services
	.AddSingleton<MouseService>()
	.AddSingleton<IMouseService>(ff => ff.GetRequiredService<MouseService>());
  1. Create Draggable component Copy and paste Draggable component code from source code.

  2. Subscribe on SVG events onmousemove and onmouseup, and fire MouseService events

@inject MouseService mouseSrv;

<svg xmlns="http://www.w3.org/2000/svg"
    @onmousemove=@(e => mouseSrv.FireMove(this, e)) 
    @onmouseup=@(e => mouseSrv.FireUp(this, e))>
    ...
</svg>

Connecting Lines

Blazor Webassembly SVG Connectors demo

Example of use

<svg xmlns="http://www.w3.org/2000/svg">

    <Connector 
        X1=100 Y1=100 
        Dir1=Direction.Right
                
        X2=300 Y2=250
        Dir2=Direction.Left />

</svg>

How to include Connector in your project

Just copy and past Connector component from source code.