Paint.razor

@page "/paint/{sessionId}"
@using DrawTogether.UI.Client.Components;
@using DrawTogether.UI.Shared
@using Microsoft.AspNetCore.SignalR.Client
@using System.Reactive.Subjects
@using System.Reactive.Linq
@inject NavigationManager navigationManager;
@implements IDisposable;

<h3>Paint!</h3>

<ColorPicker ColorValueChanged="UpdateColor"></ColorPicker>
<CursorPicker CursorSizeChanged="UpdateCursorSize"></CursorPicker>

<section id="paint" style="background-color: cornsilk; width: 900px; height: 500px;" 
         @onmousemove="MoveCursor" onmousedown="" onmouseup="">
    <svg width="900" height="500" >
        <Circle radius="@CursorSize" cursorId="user" cX="@cX" cY="@cY" fillColor="@Color" borderColor="@Color" />
        @foreach (var c in ClientStrokes)
        {
            <polyline points="@string.Join(' ', c.points.Select(x => $"{x.X}, {x.Y}"))" 
                    stroke="@(c.color)" stroke-width="@(c.cursorSize)"/>
            //<Circle radius="@c.cursorSize" cX="@c.cX" cY="@c.cY" fillColor="@c.color" borderColor="@c.color" />
        }
    </svg>
</section>

<p>@mousePointerMessage</p>

<p>@blazorHubDebugMessage</p>

<button id="reset" @onclick="ResetScreen">Clear Screen</button>

@code {
    [Parameter]
    public string SessionId { get; set; }

    List<StrokeData> ClientStrokes = new List<StrokeData>();

    private string _hubUrl;
    private HubConnection _hubConnection;

    protected override async Task OnInitializedAsync()
    {
        // Create the chat client
        var baseUrl = navigationManager.BaseUri;

        _hubUrl = navigationManager.BaseUri.TrimEnd('/') + DrawHubConstants.HubUri;

        blazorHubDebugMessage = $"Attempting to connect to {_hubUrl}";

        _hubConnection = new HubConnectionBuilder()
            .WithUrl(_hubUrl)
            .Build();

        _hubConnection.On<StrokeData[]>("DrawStrokes", DrawStrokes);

        await _hubConnection.StartAsync();

        OutboundStrokes = _strokeSubject
            //.Throttle(TimeSpan.FromMilliseconds(20))
            .Buffer(TimeSpan.FromMilliseconds(75), 20)
            .Where(x => x.Count > 0)
            .Subscribe(OnNext);

        await _hubConnection.SendAsync("JoinSession", SessionId);

        await base.OnInitializedAsync();
    }

    private void OnNext(IList<Point> obj)
    {
        var strokeData = new StrokeData()
        {
            color = Color,
            cursorSize = CursorSize,
            points = obj.ToArray(),
        };
        _hubConnection.SendAsync("AddStrokes", SessionId, new[]{ strokeData });
    }

    private void DrawStrokes(StrokeData[] strokes)
    {
        ClientStrokes.AddRange(strokes);

        // Inform blazor the UI needs updating
        StateHasChanged();
    }


    double cX = 110.0d;
    double cY = 110.0d;
    private string mousePointerMessage = "foo";
    private string blazorHubDebugMessage = "bar";
    private string Color = "black";
    private Subject<Point> _strokeSubject = new Subject<Point>();
    private IDisposable OutboundStrokes { get; set; }
    private int CursorSize = 8;

    private void MoveCursor(MouseEventArgs e)
    {
        //mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
        cX = e.OffsetX;
        cY = e.OffsetY;
        //mousePointerMessage = $"Moving circle to {cX},{cY} [button pressed? {e.Buttons}]";
        if (e.Buttons == 1)
        {
            var x = e.OffsetX;
            var y = e.OffsetY;
            mousePointerMessage = $"Writing point {x},{y} [button pressed? {e.Buttons}]";
            _strokeSubject.OnNext(new Point(){ X = x, Y = y });
        }
    }

    private void UpdateColor(string color)
    {
        Color = color;
    }

    private void UpdateCursorSize(int cursorSize)
    {
        CursorSize = cursorSize;
    }

    private void ResetScreen()
    {
        //strokes.Clear();
    }

    public void Dispose()
    {
        _hubConnection.DisposeAsync();
        OutboundStrokes.Dispose();
    }
}