DEV Community: Matthew Jones

Conway's Game of Life (With Emojis!) in C# and Blazor WebAssembly

Matthew Jones — Tue, 04 Aug 2020 15:45:27 +0000

I've been looking for new games to include in my project site BlazorGames.net, and Khalid Abuhakmeh had a perfect one in a post of his from a few weeks ago: Conway's Game of Life.

Not that one! Photo by Randy Fath / Unsplash

So I decided to ~~steal his code~~ add that idea to my BlazorGames.net project. In this post, let's see how to build Conway's Game of Life using C# and Blazor!

The Sample Project

As always, there's a sample project for this post available on GitHub. You can also see the running code on BlazorGames.net.

What is Conway's Game of Life?

Conway's Game of Life is a cellular automaton simulation developed by mathematician John Conway in 1970. It takes place on a grid of cells, where each cell can be either alive or dead at any given time.

The state of each cell's neighbors determine that cell's state in the next generation. The game proceeds according to the following rules:

Any live cell with fewer than two live neighbors dies, as if by underpopulation.
Any live cell with two or three live neighbors lives on to the next generation.
Any live cell with more than three live neighbors dies, as if by overpopulation.
Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

Goals

We want our system to be able to do the following in Blazor WebAssembly:

Build and run Conway's Game of Life on a 20-by-20 grid. (This size is arbitrarily chosen; the real Game of Life is run on an infinitely-large grid).
Allow for the user to randomize the starting cell states.
Allow for the user to click on cells and change their current state at any time during the simulation.
Display the cellular states in each generation using emojis.
Allow the user to change which set of emoji's they want to use.

The C# Model - Enumerations

In order to model Conway's Game of Life with emojis, we need two enumerations: one for the cellular states (alive or dead) and one for the emoji theme.

public enum Status
{
    Dead,
    Alive,
}

public enum Theme
{
    [Name("faces", "Smiley faces and skulls")]
    Faces,

    [Name("cats", "Cats and mice")]
    Cats,

    [Name("aliens", "Aliens and astronauts")]
    Aliens,

    [Name("boxes", "Simple boxes")]
    Boxes
}

The Custom [Name] Attribute

The [Name] attribute is a custom attribute I developed for this project. Here is its code:

public class NameAttribute : Attribute
{
    public string Name { get; private set; }
    public string Description { get; private set; }

    public NameAttribute(string name, string description)
    {
        this.Name = name;
        this.Description = description;
    }
}

It is used with two extension methods and Reflection to pull out the annotated name and description from an Enum value:

public static class EnumExtensions
{
    public static string GetDisplayName(this Enum en)
    {
        if (en == null)
            return "<none selected>";

        try
        {
            FieldInfo field = en.GetType().GetField(en.ToString());

            if (field == null)
                return en.ToString();

            NameAttribute[] attributes = (NameAttribute[])field.GetCustomAttributes(typeof(NameAttribute), false);

            if (attributes.Length > 0)
                return attributes[0].Name;
            else
                return en.ToString();
        }
        catch
        {
            return en.ToString();
        }
    }

    public static string GetDisplayDescription(this Enum en)
    {
        if (en == null)
            return "<none selected>";

        try
        {
            FieldInfo field = en.GetType().GetField(en.ToString());

            if (field == null)
                return en.ToString();

            NameAttribute[] attributes = (NameAttribute[])field.GetCustomAttributes(typeof(NameAttribute), false);

            if (attributes.Length > 0)
                return attributes[0].Description;
            else
                return en.ToString();
        }
        catch
        {
            return en.ToString();
        }
    }
}

With this infrastructure, we can now start building the Razor component that will run the Game of Life!

Starting the Blazor Component

The actual Blazor component will need a few properties to correctly model the Game of Life. We need to know the number of rows and columns, as well as the currently-selected theme, whether or not the simulation is currently running, and a representation of the actual cell grid. Here's the basic component with those properties:

@page "/gameoflife"

@code {
    public int Rows { get; set; }
    public int Columns { get; set; }
    public bool RunSimulation { get; set; }
    public Theme Theme { get; set; }

    public Status[,] Grid { get; set; }

    public GameOfLife()
    {
        Rows = 20;
        Columns = 20;
        Grid = new Status[Rows, Columns];
    }
}

We will need to expand this component to model the Game of Life. Let's start by modeling the Randomize function.

Randomizing the Grid

For each cell in the grid, we can set it randomly to Alive or Dead.

@code {
    public void Randomize()
    {
        for (var row = 0; row < Rows; row++)
        {
            for (var column = 0; column < Columns; column++)
            {
                Grid[row, column] = (Status)RandomNumberGenerator.GetInt32(0, 2);
            }
        }
    }
}

RandomNumberGenerator is available in System.Security.Cryptography

Calculating the Next Generation

The most difficult part of this simulation is calculating the next generation of cells. Lucky for us, we don't need to actually do this part, we just need to steal it from Khalid's post and slightly modify it to match our own naming:

@code {
    public void CalculateNextGeneration()
    {
        var nextGeneration = new Status[Rows, Columns];

        // Loop through every cell 
        for (var row = 1; row < Rows - 1; row++)
        {
            for (var column = 1; column < Columns - 1; column++)
            {
                // Find the alive neighbors
                var aliveNeighbors = 0;
                for (var i = -1; i <= 1; i++)
                {
                    for (var j = -1; j <= 1; j++)
                    {
                        aliveNeighbors += Grid[row + i, column + j] == Status.Alive ? 1 : 0;
                    }
                }

                var currentCell = Grid[row, column];

                // Subtract the current cell from the neighbor count
                aliveNeighbors -= currentCell == Status.Alive ? 1 : 0;

                // Implementing the Rules of Life 

                // Cell is lonely and dies 
                if (currentCell == Status.Alive && aliveNeighbors < 2)
                {
                    nextGeneration[row, column] = Status.Dead;
                }

                // Cell dies due to over population 
                else if (currentCell == Status.Alive && aliveNeighbors > 3)
                {
                    nextGeneration[row, column] = Status.Dead;
                }

                // A new cell is born 
                else if (currentCell == Status.Dead && aliveNeighbors == 3)
                {
                    nextGeneration[row, column] = Status.Alive;
                }

                // All other cells stay the same
                else
                {
                    nextGeneration[row, column] = currentCell;
                }
            }
        }
        Grid = nextGeneration;
    }
}

Click to Change Status

Because we want to allow our users to click on cells and change their alive status, we need a corresponding C# method:

public void ChangeStatus(int row, int column)
{
    Grid[row, column] = 
        Grid[row, column] == Status.Dead ? Status.Alive : Status.Dead;
}

Setting the Theme

We also need a method to change the current emoji theme of the simulation:

public void SetTheme(ChangeEventArgs e)
{
    Theme = (Theme)Enum.Parse(typeof(Theme), e.Value.ToString());
}

The ChangeEventArgs class is defined by .NET Core.

Starting and Stopping the Simulation

The last part of the C# implementation is to start and stop the simulation. The stop method is simple:

public void Stop()
{
    RunSimulation = false;
}

The start method is slightly more complex: here it is, annotated:

public async Task Run()
{
    RunSimulation = true;
    while (RunSimulation)
    {
        CalculateNextGeneration();
        StateHasChanged(); //Tell Blazor to re-render the component
        await Task.Delay(1000); //Calculate the next generation after 1 second
    }
}

That's all of the pieces, but like any good puzzle, we still have to put them together.

The Razor Markup

Now we can start writing the Razor markup for our component.

<div class="container">
    <div class="row">
        <div class="col-4">
            <label>Theme: </label>
            <select @onchange="@SetTheme">
                <option value="@Theme.Faces">   
                    @Theme.Faces.GetDisplayDescription()
                </option>
                <option value="@Theme.Cats">
                    @Theme.Cats.GetDisplayDescription()
                </option>
                <option value="@Theme.Aliens">
                    @Theme.Aliens.GetDisplayDescription()
                </option>
                <option value="@Theme.Boxes">
                    @Theme.Boxes.GetDisplayDescription()
                </option>
            </select>
        </div>
        <div class="col-2">
            @if (RunSimulation)
            {
                <!-- If the simulation is running, disable this button -->
                <button class="btn btn-primary" disabled>Randomize</button>
            }
            else
            {
                <!-- Otherwise, let the user randomize the cell states -->
                <button class="btn btn-primary" 
                        @onclick="(() => Randomize())">Randomize</button>
            }
        </div>
        <div class="col-2">
            @if (RunSimulation)
            {
                <button class="btn btn-secondary" 
                        @onclick="(() => Stop())">
                    <i class="fa fa-stop"></i> Stop
                </button>
            }
            else
            {
                <button class="btn btn-primary" 
                        @onclick="(async () => await Run())">
                    <i class="fa fa-play"></i> Run
                </button>
            }
        </div>
    </div>
    @for (int i = 1; i < Rows; i++)
    {
        <div class="row flex-nowrap gameoflife-container">
            @for (int j = 1; j < Columns; j++)
            {
                var x = i;
                var y = j;
                var cell = Grid[x, y];

                if (cell == Status.Alive)
                {
                    <div class="gameoflife-alivecell-@Theme.GetDisplayName()"
                         @onclick="(() => ChangeStatus(x,y))"></div>
                }
                else
                {
                    <div class="gameoflife-cell 
                                gameoflife-deadcell-@Theme.GetDisplayName()"
                         @onclick="(() => ChangeStatus(x,y))"></div>
                }
            }
        </div>
    }
</div>

The CSS classes used here can be viewed on GitHub.

GIF Time!

The below GIF shows the features we just coded in action:

Tada! We made the Game of Life in C# and Blazor!

Summary

Thank you, dear reader, for reading this post. If you have any questions or suggestions, feel free to use the comments below. If you can improve on my implementation, please do! Go ahead and submit a pull request.

Happy Coding!

Minesweeper in Blazor WebAssembly Part 2: The Blazor Component

Matthew Jones — Fri, 31 Jul 2020 17:57:13 +0000

In our previous post, we demonstrated how to model the classic computer game Minesweeper as a C# program. In this post, we're going to take that model and use Blazor WebAssembly to create a working game. Let's go!

The Sample Project

As always, the code for this series can be found over on GitHub. Also check out the other posts in my Modeling Practice series over on my blog.

The Initial Component

In Blazor, we do not have "pages"; rather we use Components (files that have the .razor suffix). To be fair, they look almost exactly like Razor Pages.

Here's a starting Component we can use for this post:

@page "/minesweeper"
@using BlazorGames.Models.Minesweeper
@using BlazorGames.Models.Minesweeper.Enums

@code {
    GameBoard board = new GameBoard();
}

Let's take a look at a Minesweeper board again:

See the border running around the game area and the header? We need to have a way to create that border. Since it is essentially an additional space on any given side of the board, we need extra space in our calculations. Keep that in mind.

For now, let's concentrate on the area of the board where the numbers and mines are. For the size of the board X by Y, we need X + 2 columns of Y + 2 height, where the extremes (uppermost, lowermost, leftmost, rightmost) rows and columns are the border. Therefore our markup might look like this:

<div class="minesweeper-board">
    @{
        var maxWidth = board.Width + 1;
        var maxHeight = board.Height + 1;
    }

    @for (int i = 0; i <= maxWidth; i++)
    {
        @for (int j = 0; j <= maxHeight; j++)
        {
            int x = i;
            int y = j;

            if (x == 0 && y == 0) //Upper-left corner
            {
                <div class="minesweeper-border-jointleft"></div>
            }
            else if (x == 0 && y == maxHeight) //Upper-right corner
            {
                <div class="minesweeper-border-jointright"></div>
            }
            else if (x == maxWidth && y == 0) //Lower-left corner
            {
                <div class="minesweeper-border-bottomleft"></div>
            }
            else if (x == maxWidth && y == maxHeight) //Lower-right corner
            {
                <div class="minesweeper-border-bottomright"></div>
            }
            else if (y == 0 || y == maxHeight) //Leftmost column
            {
                <div class="minesweeper-border-vertical"></div>
            }
            else if (x == 0 || x == maxWidth) //Rightmost column
            {
                <div class="minesweeper-border-horizontal"></div>
            }
            else if (y > 0 && y < maxHeight)
            {
                <!-- Output panels -->
            }
        }
    }  
</div>

NOTE: The CSS classes in use here are originally from Minesweeper Online, were modified and renamed by me for use in this project, and can be viewed on GitHub.

We now need to consider how to output the panels themselves.

Displaying the Panels

In our implementation a Panel may, at any time, be in one of five potential states:

Revealed Mine
Revealed Number
Revealed Blank
Flagged
Unrevealed

We need special CSS classes for each state, and so the finished markup for the page will need to include the following:

<div class="minesweeper-board">
    @{
        var maxWidth = board.Width + 1;
        var maxHeight = board.Height + 1;
    }

    @for (int i = 0; i <= maxWidth; i++)
    {
        @for (int j = 0; j <= maxHeight; j++)
        {
            int x = i;
            int y = j;

            if (x == 0 && y == 0) //Upper-left corner
            {
                <div class="minesweeper-border-jointleft"></div>
            }

            //...All the other IF clauses

            else if (y > 0 && y < maxHeight)
            {
                var currentPanel = board.Panels.First(m => m.X == x 
                                                           && m.Y == y);
                if (currentPanel.IsRevealed)
                {
                    if (currentPanel.IsMine) //Mine
                    {
                        <div class="minesweeper-gamepiece minesweeper-mine"></div>
                    }
                    else if (currentPanel.AdjacentMines == 0) //Blank
                    {
                        <div class="minesweeper-gamepiece minesweeper-0"></div>
                    }
                    else //Number
                    {
                        <div class="minesweeper-gamepiece minesweeper-@currentPanel.AdjacentMines">@currentPanel.AdjacentMines</div>
                    }
                }
                else if (currentPanel.IsFlagged)
                {
                    <div class="minesweeper-gamepiece minesweeper-flagged"></div>
                }
                else //Unrevealed
                {
                    <div class="minesweeper-gamepiece minesweeper-unrevealed"></div>
                }
            }
        }
    }  
</div>

There's an additional wrinkle to consider: in some of these states, namely the Flagged and Unrevealed ones, the user can interact with the panel by left clicking (to reveal) or right-clicking (to flag). We need to implement that functionality.

Left-Click to Reveal

You may recall that we implemented a MakeMove() method in the C# model. The reason why was so that it could be called here. This is the markup for the unrevealed panel, now with an @onclick event:

<div class="minesweeper-gamepiece minesweeper-unrevealed" 
     @onclick="@(() => board.MakeMove(x, y))" 
     @oncontextmenu="@(() => board.FlagPanel(x, y))"
     @oncontextmenu:preventDefault>
</div>

There's a lot to dissect here:

The @onclick directive is a Blazor directive that binds a C# method to an onclick event. In this case, we are calling MakeMove() and passing the coordinates of the clicked panel.
The @oncontextmenu directive allows us to specify what should happen when the context menu (AKA the right-click menu) should be displayed. Since we want to flag panels on right-click, we say that here.
The @oncontextmenu:preventDefault is a specialized instruction to Blazor that prevents the context menu from displaying on right-clicks.

Let's also see the markup for the flagged panel:

<div class="minesweeper-gamepiece minesweeper-flagged" 
     @oncontextmenu="@(() => board.FlagPanel(x, y))" 
     @oncontextmenu:preventDefault>
</div>

Notice that there's no @onclick directive here: left-clicking a flagged panel should do nothing.

Okay! We have our playing area ready. Now let's build the header where the mine counter, timer, and face are placed.

The Header

Here's the full markup for the header area:

<div class="minesweeper-board" 
     @oncontextmenu:preventDefault 
     onmousedown="faceOooh(event);" <!-- Explanation below -->
     onmouseup="faceSmile();">
    <div class="minesweeper-border-topleft"></div>
    @for (int i = 1; i < maxWidth; i++)
    {
        <div class="minesweeper-border-horizontal"></div>
    }
    <div class="minesweeper-border-topright"></div>
    <div class="minesweeper-border-vertical-long"></div>
    <div class="minesweeper-time-@GetPlace(board.MinesRemaining, 100)" 
         id="mines_hundreds"></div>
    <div class="minesweeper-time-@GetPlace(board.MinesRemaining, 10)" 
         id="mines_tens"></div>
    <div class="minesweeper-time-@GetPlace(board.MinesRemaining, 1)" 
         id="mines_ones"></div>
    @if (board.Status == GameStatus.Failed)
    {
        <div class="minesweeper-face-dead" 
             id="face" 
             style="margin-left:70px; margin-right:70px;" 
             @onclick="@(() => board.Reset())"></div>
    }
    else if (board.Status == GameStatus.Completed)
    {
        <div class="minesweeper-face-win" 
             id="face" 
             style="margin-left:70px; margin-right:70px;"
             @onclick="@(() => board.Reset())"></div>
    }
    else
    {
        <div class="minesweeper-face-smile" 
             id="face" 
             style="margin-left:70px; margin-right:70px;" 
             @onclick="@(() => board.Reset())"></div>
    }
    <div class="minesweeper-time-@GetPlace(board.Stopwatch.Elapsed.Seconds,100)" 
         id="seconds_hundreds"></div>
    <div class="minesweeper-time-@GetPlace(board.Stopwatch.Elapsed.Seconds,10)" 
         id="seconds_tens"></div>
    <div class="minesweeper-time-@GetPlace(board.Stopwatch.Elapsed.Seconds,1)" 
         id="seconds_ones"></div>
    <div class="minesweeper-border-vertical-long"></div>
</div>

Make 'Em Say "Oooh"

There are certain things that Blazor, in its current form, is just not good at. For example, in the desktop version of Minesweeper, whenever the user left-clicks a panel the smiley face turns to an "oooh" face. Blazor cannot do this (or, more accurately, I could not figure out how to do this in Blazor). So, I turned to good old JavaScript to get the face to say "oooh!".

function faceOooh(event) {
    if (event.button === 0) { //Left-click only
        document.getElementById("face").className = "minesweeper-face-oooh";
    }
}

function faceSmile() {
    var face = document.getElementById("face");

    if (face !== undefined)
        face.className = "minesweeper-face-smile";
}

What Time Is It Anyway?

Surprisingly, to me anyway, the timer proved to be the most difficult part of this entire implementation, and exactly why that is true requires some explaining.

Blazor has a special method, StateHasChanged(), which allows us developers to tell it that the state of its object has changed and it should refresh the display. But my timer, you might remember, was implemented on the backend as a C# Stopwatch class, and of course the C# code has no way to notify the Blazor frontend that something has changed (namely, that a second has gone by).

So, I had to fake it, and that required a couple parts. First I needed a JavaScript method to display a passed-in time:

function setTime(hundreds, tens, ones) {
    var hundredsElement = document.getElementById("seconds_hundreds");
    var tensElement = document.getElementById("seconds_tens");
    var onesElement = document.getElementById("seconds_ones");

    if (hundredsElement !== null) {
        hundredsElement.className = "minesweeper-time-" + hundreds;
    }
    if (tensElement !== null) {
        tensElement.className = "minesweeper-time-" + tens;
    }
    if (onesElement !== null) {
        onesElement.className = "minesweeper-time-" + ones;
    }
}

On the Blazor component itself, I needed to use the special method OnAfterRenderAsync, which fires after the control is rendered to the browser:

@inject IJSRuntime _jsRuntime
@inject NavigationManager _navManager

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        while (board.Status == GameStatus.InProgress && _navManager.Uri.Contains("minesweeper"))
        {
            await Task.Delay(500);
            var elapsedTime = (int)board.Stopwatch.Elapsed.TotalSeconds;
            var hundreds = GetPlace(elapsedTime, 100);
            var tens = GetPlace(elapsedTime, 10);
            var ones = GetPlace(elapsedTime, 1);

            await _jsRuntime.InvokeAsync<string>("setTime", hundreds, tens, ones);
        }
    }
}

This solution is 100% a hack; every half-second it invokes a JS method to display the new time. To even be able to do this I had to inject two new dependencies to the component:

IJSRuntime, which allows Blazor code to invoke JavaScript functions AND
NavigationManager, which allows access to URIs used by the Blazor app.

Obviously this is not a perfect solution, but it works, which is good enough for now.

We're Done!

Guess what? We did it! We created a fully-functional Minesweeper clone in ASP.NET Core, C#, and Blazor. Pretty sweet huh?

But don't take my word for it: try it out yourself!

I created and hosted a site called BlazorGames.net that has this Minesweeper implementation, along with several others.

I intend for this site to become a learning site for Blazor WebAssembly, where we can learn how to build complex, real-world problems AND see the fruits of the labor in the same place. And it's all open source, and available on GitHub. I would love to hear any and all opinions on it!

Summary

It took some specialized markup and judicious use of the dreaded JavaScript, but we got a working game of Minesweeper working in Blazor WebAssembly. And the best part is, with the new site BlazorGames.net up and running, you no longer have to take my word for it!

Happy Coding!

Minesweeper in Blazor WebAssembly Part 1: C# Implementation

Matthew Jones — Thu, 02 Jul 2020 17:57:41 +0000

I am LOVING all things Blazor! You can probably tell, from my previous posts about it. The ability to write C# and have it run in the browser is amazing, particularly for those of us who don't like JavaScript very much.

With the recent release of Blazor WebAssembly to general availability in .NET Core 3.2, I've been spending all my free time on building some new models with it. I want to share what I've learned so far, and to do that in a fun way. So, let's build a game.

Specifically, let's build the venerable computer game Minesweeper using Blazor WebAssembly.

So close, so close! Image by Brandenads, found on Wikimedia

In this post and the next, we will build a working game of Minesweeper and implement it using Blazor WebAssembly, ASP.NET Core, and C#. Let's get going!

The Sample Code

As always, the sample code for this series can be found over on GitHub. And, if you like this post, you can check out my other Modeling Practice series posts over on my blog.

Modeling the Game

NOTE: I previously modeled a Minesweeper solver as a C# project, and much of the C# code in these posts is modified from that one.

Let's take a look at a sample board of Minesweeper.

There are a couple of components we need to consider when modeling this game, and it all starts with the small pieces in the board that the user clicks on. We're going to call those pieces "Panels", because that's what they look like.

Each panel can be either unrevealed (the starting state) or revealed, and once revealed, each panel has either a mine, a number that represents the count of adjacent mines, or a blank space. Further, an unrevealed panel can be "flagged" so that the user cannot accidentally click on it; this is done to mark where the mines likely are.

Let's create a C# class that has all of these attributes:

public class Panel
{
    public int ID { get; set; }

    //Horizontal position
    public int X { get; set; }

    //Vertical position
    public int Y { get; set; }

    public bool IsMine { get; set; }

    public int AdjacentMines { get; set; }

    public bool IsRevealed { get; set; }

    public bool IsFlagged { get; set; }

    public Panel(int id, int x, int y)
    {
        ID = id;
        X = x;
        Y = y;
    }
}

For easy access later, we also added an ID field.

Each panel has two possible actions that can be performed against it: they can be revealed (when clicked), or flagged (when right-clicked).

public class Panel
{
    //... Properties

    public void Flag()
    {
        if(!IsRevealed)
        {
            IsFlagged = !IsFlagged;
        }
    }

    public void Reveal()
    {
        IsRevealed = true;
        IsFlagged = false; //Revealed panels cannot be flagged
    }
}

As far as the panels are concerned, this is the extent of their functionality. The real work comes next, as we begin to design the game board itself.

The Board

Wrong spelling. Photo by Joshua Rawson-Harris / Unsplash

A game of minesweeper takes place on a board of X width and Y height, where those numbers are defined by the user. Each board has Z mines hidden in its panels. For every panel that is not a mine, a number is placed showing the count of mines adjacent to that panel. We therefore need our GameBoard class to keep track of its own dimensions, mine count, and collection of panels.

public class GameBoard
{
    public int Width { get; set; } = 16;
    public int Height { get; set; } = 16;
    public int MineCount { get; set; } = 40;
    public List<Panel> Panels { get; set; }
}

We will be greatly expanding this class as we develop our game.

Game Status

Because the appearance of the Minesweeper board is determined by the state of the game, we can use an enumeration to track said state.

public enum GameStatus
{
    AwaitingFirstMove,
    InProgress,
    Failed,
    Completed
}

We must also allow the board to track the game state:

public class GameBoard
{
    //...Other properties

    public GameStatus Status { get; set; }
}

Initializing the Game

Every game of Minesweeper begins in the same state, with all panels hidden. Let's create a method to initialize a game, including creating the collection of panels. Given the height, width, and mine count as parameters, here's what our initialization method would look like:

public class GameBoard
{
    //...Properties

    public void Initialize(int width, int height, int mines)
    {
        Width = width;
        Height = height;
        MineCount = mines;
        Panels = new List<Panel>();

        int id = 1;
        for (int i = 1; i <= height; i++)
        {
            for (int j = 1; j <= width; j++)
            {
                Panels.Add(new Panel(id, j, i));
                id++;
            }
        }

        Status = GameStatus.AwaitingFirstMove;
    }
}

You might be wondering: why didn't we place the mines and calculate the adjacent numbers? That's because of a trick in most implementations of Minesweeper: they don't calculate where the mines are placed until after the user clicks on their first panel. This is so that the user doesn't click on a mine on the first move, because that's no fun.

For later usage, let's also implement a Reset method, which will reset the board to a new game using the same width, height, and mine count:

public class GameBoard
{
    //...Other Properties and Methods

    public void Reset()
    {
        Initialize(Width, Height, MineCount);
    }
}

Now we can work on the next major step of this implementation: the first move.

The First Move and Getting Neighbors

No, not that kind of first move. Algorithms do not help with this. Photo by Paul García / Unsplash

We now need a method which represents the user's first move, and therefore determines where the mines go and calculates the adjacent mines numbers. That algorithm looks something like this:

When the user makes the first move, take that panel and a certain number of neighbor panels, and mark them as unavailable for mines.
For every other panel, place the mines randomly.
For every panel which is not a mine (including the panels from Step 1), calculate the adjacent mines.
Mark the game as started

The trickiest part of this algorithm is calculating the neighbors of a given panel. Remember that the neighbors of any given panel are the first panel above, below, to the left, to the right, and on each diagonal.

C for clicked, N for neighbor.

For our implementation, we have an entire method to do this:

public class GameBoard
{
    //...Other Properties and Methods

    public List<Panel> GetNeighbors(int x, int y)
    {
        var nearbyPanels = Panels.Where(panel => panel.X >= (x - 1)
                                                 && panel.X <= (x + 1)
                                                 && panel.Y >= (y - 1)
                                                 && panel.Y <= (y + 1));

        var currentPanel = Panels.Where(panel => panel.X == x 
                                                 && panel.Y == y);

        return nearbyPanels.Except(currentPanel).ToList();
    }
}

Using our "first move" algorithm, the new GetNeighbors() method, and some fancy LINQ, we end up with this method to implement the first move:

public class GameBoard
{
    //...Other Properties and Methods

    public void FirstMove(int x, int y)
    {
        Random rand = new Random();

        //For any board, take the user's first revealed panel 
        // and any neighbors of that panel, and mark them 
        // as unavailable for mine placement.
        var neighbors = GetNeighbors(x, y); //Get all neighbors

        //Add the clicked panel to the "unavailable for mines" group.
        neighbors.Add(Panels.First(z => z.X == x && z.Y == y));

        //Select all panels from set which are available for mine placement.
        //Order them randomly.
        var mineList = Panels.Except(neighbors)
                             .OrderBy(user => rand.Next());

        //Select the first Z random panels.
        var mineSlots = mineList.Take(MineCount)
                                .ToList()
                                .Select(z => new { z.X, z.Y });

        //Place the mines in the randomly selected panels.
        foreach (var mineCoord in mineSlots)
        {
            Panels.Single(panel => panel.X == mineCoord.X 
                           && panel.Y == mineCoord.Y)
                  .IsMine = true;
        }

        //For every panel which is not a mine, 
        // including the unavailable ones from earlier,
        // determine and save the adjacent mines.
        foreach (var openPanel in Panels.Where(panel => !panel.IsMine))
        {
            var nearbyPanels = GetNeighbors(openPanel.X, openPanel.Y);
            openPanel.AdjacentMines = nearbyPanels.Count(z => z.IsMine);
        }

        //Mark the game as started.
        Status = GameStatus.InProgress;
    }
}

There's one last thing we need to finish the first move implementation: a method which activates when a user makes a move, and if it is the first move, calls our FirstMove() method. Here's that method:

public class GameBoard
{
    //...Other Properties and Methods

    public void MakeMove(int x, int y)
    {
        if (Status == GameStatus.AwaitingFirstMove)
        {
            FirstMove(x, y);
        }
        RevealPanel(x, y);
    }
}

All right! First move implementation is complete, and we can now move on to what happens on every other panel.

Revealing Panels

For every move except the first one, clicking on a panel reveals that panel. A more specific algorithm for moves after the first one might be this:

When the user left-clicks on a panel, reveal that panel.
If that panel is a mine, show all mines and end the game.
If that panel is a zero, show that panel and all neighbors. If any neighbors are also zero, show all their neighbors, and continue until all adjacent zeroes and their neighbors are revealed. (I termed this a "cascade reveal").
If that panel is NOT a mine, check to see if any remaining unrevealed panels are not mines. If there are any, the game continues.
If all remaining unrevealed panels are mines, the game is complete. This is the "win" condition.

Using that algorithm, we end up with this method:

public class GameBoard
{
    //...Other Properties and Methods

    public void RevealPanel(int x, int y)
    {
        //Step 1: Find and reveal the clicked panel
        var selectedPanel = Panels.First(panel => panel.X == x 
                                                  && panel.Y == y);
        selectedPanel.Reveal();

        //Step 2: If the panel is a mine, show all mines. Game over!
        if (selectedPanel.IsMine)
        {
            Status = GameStatus.Failed;
            RevealAllMines();
            return;
        }

        //Step 3: If the panel is a zero, cascade reveal neighbors.
        if (selectedPanel.AdjacentMines == 0)
        {
            RevealZeros(x, y);
        }

        //Step 4: If this move caused the game to be complete, mark it as such
        CompletionCheck();
    }
}

We now have several methods to create to finish this part of our implementation.

Revealing All Mines

Found one! Photo by Dominik Vanyi / Unsplash

The simplest of the methods we need is this one: showing all mines on the board.

public class GameBoard
{
    //...Other Methods and Properties

    private void RevealAllMines()
    {
        Panels.Where(x => x.IsMine)
              .ToList()
              .ForEach(x => x.IsRevealed = true);
    }
}

Cascade Reveal Neighbors

When a zero is clicked, the game needs to reveal all of that panel's neighbors, and if any of the neighbors are zero, reveal the neighbors of that panel as well. This calls for a recursive method:

public class GameBoard
{
    //...Other Methods and Properties

    public void RevealZeros(int x, int y)
    {
        //Get all neighbor panels
        var neighborPanels = GetNeighbors(x, y)
                               .Where(panel => !panel.IsRevealed);

        foreach (var neighbor in neighborPanels)
        {
            //For each neighbor panel, reveal that panel.
            neighbor.IsRevealed = true;

            //If the neighbor is also a 0, reveal all of its neighbors too.
            if (neighbor.AdjacentMines == 0)
            {
                RevealZeros(neighbor.X, neighbor.Y);
            }
        }
    }
}

Is The Game Complete?

A game of Minesweeper is complete when all remaining unrevealed panels are mines. We can use this method to check for that:

public class GameBoard
{
    //...Other Properties and Methods

    private void CompletionCheck()
    {
        var hiddenPanels = Panels.Where(x => !x.IsRevealed)
                                 .Select(x => x.ID);

        var minePanels = Panels.Where(x => x.IsMine)
                               .Select(x => x.ID);

        if (!hiddenPanels.Except(minePanels).Any())
        {
            Status = GameStatus.Completed;
            Stopwatch.Stop();
        }
    }
}

With this functionality in place, there's only one thing left to do: flagging.

Flagging a Panel

"Flagging" a panel means marking it as the location of a mine. Doing this means that left-clicking that panel will do nothing.

Well, that's one way to get all the mines...

In our game, we will use right-click to flag a panel.

Recall that our Panel class already has a Flag() method. Now we just need to call that method from the GameBoard:

public class GameBoard
{
    //...Other Properties and Methods

    public void FlagPanel(int x, int y)
    {
        var panel = Panels.Where(z => z.X == x && z.Y == y).First();

        panel.Flag();
    }
}

We're almost there!

Implementing a Timer

Take a look at the top part of the Minesweeper game we saw earlier:

Other than the smiley face's piercing stare, what do you notice? The counters!

The left counter is for mines; it goes down as the number of flagged panels increases. The right counter is for the time; it ticks up every second. We need to implement a timer for our Minesweeper game.

For this, we will use the C# Stopwatch class. We will use the following algorithm:

Whenever the game is created or reset, we reset the timer.
When the player makes their first move, start the timer.
When the game is either complete or failed, stop the timer.

The corresponding changes we need to make to our GameBoard class look like this:

public class GameBoard
{
    //...Other Properties
    public Stopwatch Stopwatch { get; set; }

    //...Other Methods

    public void Reset()
    {
        Initialize(Width, Height, MineCount);
        Stopwatch = new Stopwatch();
    }

    public void FirstMove()
    {
        //...Implementation
        Stopwatch.Start();
    }

    private void CompletionCheck()
    {
        var hiddenPanels = Panels.Where(x => !x.IsRevealed)
                                 .Select(x => x.ID);

        var minePanels = Panels.Where(x => x.IsMine)
                               .Select(x => x.ID);

        if (!hiddenPanels.Except(minePanels).Any())
        {
            Status = GameStatus.Completed;
            Stopwatch.Stop(); //New line
        }
    }
}

Ta-da! With the timer implemented, all of our implementation for the Minesweeper game is complete!

Summary

To model a game of Minesweeper, we needed a Panel class and a GameBoard class. The panels can be revealed or flagged, and the board tracks everything else, including the dimensions, mine count, and current game status.

Mines are not placed on the board until after the user clicks their first panel, at which point they are spread randomly around.

When a panel is clicked, if it's a mine, it's game over. If it's a zero, we reveal all neighbors, and if any neighbors are also zero, we reveal their neighbors. If it's a number, the game continues.

If, after revealing a panel, all remaining unrevealed panels are mines, the player has won the game!

Feeling good / Like I should / Went and took a walk around the neighborhood

Thanks for Reading!

Thank you, Dear Readers, for reading along with me! Stay tuned, because we still have to implement this C# implementation as a Blazor component, and post showing how to do just that is coming soon!

Don't forget to check out the sample project over on GitHub! And if you see a way to improve this implementation, don't hesitate to submit a pull request.

Also, check out the completed, running project on my site BlazorGames.net! Feedback appreciated!

Happy Coding!

Creating Tic-Tac-Toe in C# and Blazor WebAssembly

Matthew Jones — Thu, 25 Jun 2020 17:37:03 +0000

Blazor WebAssembly was released a little while ago, and since I'm a fan of all things Blazor, I decided it might be a good time for another game post!

In this post, we're going to build a working C# and Blazor WebAssembly application that can play the children's game tic-tac-toe. Let's get going!

Watch your fingers! Photo by Viktor Talashuk / Unsplash

The Sample Project

As always, there's a sample project on GitHub to go along with this post. Check it out, and pull requests are welcome!

Requirements

To develop in Blazor WebAssembly, we need to download the .NET Core SDK from this page.

You can also use Visual Studio 16.6, Visual Studio Code with the C# extension, or Visual Studio Mac to develop using Blazor WebAssembly. For this project, I used the full Visual Studio.

Creating the Project

The screenshots below are from Visual Studio 2019 v16.6; your process to set up a new Blazor WebAssembly project may be different.

Let's create a new project! In Visual Studio, navigate to File -> New -> Project and select Blazor App:

On the next screen, name your project and solution and specify the directory you want to use, then press Create:

Finally, select "Blazor WebAssembly App":

The resulting project's file directory will look something like this:

If we run the app, we see that we have a fully-functional Blazor application:

Ta-da! We're on our way! Now let's start the hard part: modeling a tic-tac-toe game.

Tic, Tac, Toe, Won!

We're going to take a lot of cues from one of my earlier posts about modeling Connect Four in Blazor.

Before we can write our code, let's first think about the kinds of things (or "models") a game of tic-tac-toe has.

It has a game board, which might look like this:

Such a board has nine spaces on which a player can draw an X or an O.

We also consider the X's and O's themselves. For this demo, we'll call them "Game Pieces" and think of them like tokens you place on the board. So, we'll need a class to model them.

Finally, we need trackers for when the game is won, or if the game is a draw.

Let's get modeling!

Board to Pieces

Let's start with the game pieces, i.e. the X's and O's. The only distinguishing characteristic of these pieces is that each has a letter associated. Let's create an enumeration for those letters, and a class for the pieces.

public enum PieceStyle
{
    X,
    O,
    Blank
}

public class GamePiece
{
    public PieceStyle Style;

    public GamePiece()
    {
        Style = PieceStyle.Blank;
    }
}

Let's also start modeling a class for the game board:

public class GameBoard
{
    //A 2D array of game pieces, 
    //expected to blank at the beginning of the game.
    public GamePiece[,] Board { get; set; }

    public PieceStyle CurrentTurn = PieceStyle.X;

    public GameBoard()
    {
        Reset();
    }
}

Note the constructor method, and the Reset() method called by it. All this method does is reset every space to blank:

public void Reset()
{
    Board = new GamePiece[3, 3];

    //Populate the Board with blank pieces
    for (int i = 0; i <= 2; i++)
    {
        for (int j = 0; j <= 2; j++)
        {
            Board[i, j] = new GamePiece();
        }
    }
}

But now we start the real work: how do we model a game being played?

Children, Take Turns!

Let's consider the kinds of steps we need to take to model a game of tic-tac-toe in progress.

We need to track whose turn it is. In our GameBoard class, we can do this by using a property CurrentTurn, and a method SwitchTurns():

public class GameBoard
{
    //...Other Properties

    public PieceStyle CurrentTurn = PieceStyle.X;

    private void SwitchTurns()
    {
        //This is equivalent to: if currently X's turn, 
        // make it O's turn, and vice-versa
        CurrentTurn = 
            CurrentTurn == PieceStyle.X ? PieceStyle.O : PieceStyle.X;
    }
}

We also need a method to represent a turn being taken. On a player's turn, they will click an empty space and place their marker (X or O) on that space. However, they shouldn't be able to click any spaces in two conditions:

The space is already occupied OR
The game is complete.

Let's deal with the second condition first. We can use a new property to check if the game is complete:

public class GameBoard 
{
    //...Other Properties

    public bool GameComplete => GetWinner() != null || IsADraw();

    //...Other Methods
}

We will implement the methods GetWinner() and IsADraw() later. The main thing to take away from this is that the game is complete when either a winner is declared or a draw occurs.

Now we can write a method to allow players to "claim" spaces, which also includes a check to make sure that they aren't already claimed:

public class GameBoard 
{
    //...Other Properties and Methods

    //Given the coordinates of the space that was clicked...
    public void PieceClicked(int x, int y)
    { 
        //If the game is complete, do nothing
        if (GameComplete) { return; }

        //If the space is not already claimed...
        GamePiece clickedSpace = Board[x, y];
        if (clickedSpace.Style == PieceStyle.Blank)
        {
            //Set the marker to the current turn marker (X or O)
            clickedSpace.Style = CurrentTurn;

            //Make it the other player's turn
            SwitchTurns();
        }
    }
}

That's all the code we need for our tic-tac-toe players to take turns! Now let's deal with some other scenarios.

3, 2, 1... Draw!

NOTE: The code in this section and the next was originally submitted by John Tomlinson and modified by me.

It's possible (and if the players are older than five, likely) that a tic-tac-toe game will end in a draw. A "draw" occurs when all spaces are occupied and no winner can be found. So, let's create a method to watch for this situation.

public class GameBoard 
{
    public bool IsADraw()
    {
        int pieceBlankCount = 0;

        //Count all the blank spaces. 
        //If the count is 0, this is a draw.
        for (int i = 0; i < 3; i++)
        {
            for (int j = 0; j < 3; j++)
            {
                pieceBlankCount = this.Board[i, j].Style == PieceStyle.Blank
                                    ? pieceBlankCount + 1
                                    : pieceBlankCount;
            }
        }

        return pieceBlankCount == 0;
    }
}

The Only Winning Move is Not to Play

Now we come to the most complex of the scenarios we're going to be dealing with: how do we determine if a game has been won?

The method to check this is going to be brute-force: for each space on the board, check each possible direction for matching pieces, and if you find three in a row, stop checking.

First, let's implement an enumeration to show the directions from which we will look for tic-tac-toes:

public enum EvaluationDirection
{
    Up,
    UpRight,
    Right,
    DownRight
}

The method to do this for a single given space looks like this:

public class GameBoard
{
    //...Other Properties and Methods

    private WinningPlay EvaluatePieceForWinner(int i, int j, 
                                               EvaluationDirection dir)
    {
        GamePiece currentPiece = Board[i, j];
        if (currentPiece.Style == PieceStyle.Blank)
        {
            return null;
        }

        int inARow = 1;
        int iNext = i;
        int jNext = j;

        var winningMoves = new List<string>();

        while (inARow < 3)
        {
            //For each direction, increment the pointers 
            //to the next space to be evaluated
            switch (dir)
            {
                case EvaluationDirection.Up:
                    jNext -= 1;
                    break;
                case EvaluationDirection.UpRight:
                    iNext += 1;
                    jNext -= 1;
                    break;
                case EvaluationDirection.Right:
                    iNext += 1;
                    break;
                case EvaluationDirection.DownRight:
                    iNext += 1;
                    jNext += 1;
                    break;
            }

            //If the next "space" is off the board, 
            //don't check it.
            if (iNext < 0 || iNext >= 3 
                || jNext < 0 || jNext >= 3) { break; }

            //If the next space has a matching letter...
            if (Board[iNext, jNext].Style == currentPiece.Style)
            {
                //Add this space to the collection 
                //of winning spaces.
                winningMoves.Add($"{iNext},{jNext}");
                inARow++;
            }
            else //Otherwise, no tic-tac-toe is found 
                 //for this space/direction
            {
                return null;
            }
        }

        //If we found three in a row
        if (inARow >= 3)
        {
            //Return this set of spaces as the winning set
            winningMoves.Add($"{i},{j}");

            return new WinningPlay()
            {
                WinningMoves = winningMoves,
                WinningStyle = currentPiece.Style,
                WinningDirection = dir,
            };
        }

        //If we got here, we didn't find any tic-tac-toes 
        //for the given space.
        return null;
    }
}

But that method only evaluates for a single space; now we need a method to do that for all spaces.

public class GameBoard
{
    public WinningPlay GetWinner()
    {
        WinningPlay winningPlay = null;

        for (int i = 0; i < 3; i++)
        {
            for (int j = 0; j < 3; j++)
            {
                foreach (EvaluationDirection evalDirection in (EvaluationDirection[])Enum.GetValues(typeof(EvaluationDirection)))
                {
                    winningPlay = EvaluatePieceForWinner(i, j, evalDirection);
                    if (winningPlay != null) { return winningPlay; }
                }
            }
        }

        return winningPlay;
    }
}

The above code is the "brute force" I mentioned earlier: a triple-nested loop!

A Couple of Extras

Finally, let's implement two more methods: one which gets a message to display the user when the game is won or drawn, and one to check for those situations so we can display the message.

public class GameBoard
{
    public string GetGameCompleteMessage()
    {
        var winningPlay = GetWinner();
        return winningPlay != null 
               ? $"{winningPlay.WinningStyle} Wins!" : "Draw!";
    }

    public bool IsGamePieceAWinningPiece(int i, int j)
    {
        var winningPlay = GetWinner();
        return winningPlay?.WinningMoves?
                           .Contains($"{i},{j}") ?? false;
    }
}

With that, our GameBoard class is complete! Now we just need to use it on a razor component.

The Component of Your Doom

Here's a basic razor component (which is what Blazor calls the .razor files) that we will modify to host our tic-tac-toe game.

@page "/tictactoe"
@using BlazorWasmTicTacToe.Models;

<h1>Tic-Tac-Toe</h1>

@code {
    GameBoard board = new GameBoard();
}

First, let's write the markup for the board itself.

<div class="board">
    @for (int i = 0; i < 3; i++)
    {
        <div class="column">
            @for (int j = 0; j < 3; j++)
            {
                int x = i;
                int y = j;
                <div class="gamepiece
                         @board.Board[i,j].Style.ToString().ToLower()" 
                         @onclick="@(() => board.PieceClicked(x,y))"
                         style="@(board.IsGamePieceAWinningPiece(i, j)
                                  ? "opacity: 0.6" : "")"></div>
            }
        </div>
    }
</div>

Note that the div with class "gamepiece" has styles dynamically applied to it when it is occupied by a letter and when it is part of the winning tic-tac-toe.

The last little piece is to output a message for wins and draws.

@if (!board.GameComplete)
{
    <h2>@board.CurrentTurn's Turn!</h2>
}
else
{
    <h2>@board.GetGameCompleteMessage() 
        <button class="btn btn-success" 
                @onclick="@(() => board.Reset())">
            Reset
        </button>
    </h2>
}

And with that, we have a working tic-tac-toe game written in C# and Blazor WebAssembly!

GIF Time!

Here's how our tic-tac-toe game looks:

Turned out pretty well, if I do say so myself! But you don't have to believe me, because you can check out the sample project over on GitHub.

Summary

Building a sample Blazor WebAssembly project with C# isn't too hard at all! Just remember that you need very up-to-date IDEs (VS 2019 or VS Code) and to download the SDK from Microsoft's site.

I love the fact that I can write C# and it can be turned into a fully client-side application! So much that I am proud to say:

"Cheers to the coming death of JavaScript!"

Photo by Kelsey Knight / Unsplash

Well, actually, that might be a bit too much. It's probably more like:

"Here's to the mild annoyance of JavaScript developers!"

Yeah, that sounds right.

Thanks for reading, and Happy Coding!

Drawing with FabricJS and TypeScript Part 9: Saving and Conclusion

Matthew Jones — Wed, 27 May 2020 18:52:48 +0000

For the final post in this series about drawing with FabricJS and TypeScript, let's figure out a way to save our created drawing to the server with an AJAX call.

Get this guy a pencil sharpener! Photo by Taru Huhkio / Unsplash

The Sample Project

For the final time, don't forget to check out the sample project for this series over on GitHub. It really is quite useful.

The Final DrawingEditor Modifications

Our save function will need to exist on the Razor Page code-behind file. Because of this, we require a way for our main DrawingEditor class to use that function as a callback. We also need to be able to create the JSON for the current drawing, and lucky for us, FabricJS provides a way to do exactly that:

class DrawingEditor {
    //...Properties and Constructor

    //...Other methods 

    setSaveFunc(saveFunction: Function) {
        this.saveFunc = saveFunction;
    }

    save() {
        this.saveFunc();
    }

    getJson(): string {
        //This method serializes the canvas content to JSON
        const outP = this.canvas.toJSON();
        return outP;
    }
}

The Final Markup Modifications

The rest of our changes will take place on our Drawing.cshtml Razor Page. First, we need to add a save button to the markup:

<div class="row drawingToolbar bg-secondary text-light">
    <div class="btn-toolbar">
        <div class="btn-group mr-2" role="group">
            <div id="undoComponent"></div>
            <div id="redoComponent"></div>
            <button onclick="saveDrawing(event); return false;" title="Save" class="btn btn-success">
                <i class="fa fa-save d-inline"></i>
                <span>Save</span>
            </button>
            <div id="deleteComponent"></div>
        </div>
    </div>
    <!--Other components -->
</div>

Note the saveDrawing() function; this is not implemented quite yet. The next thing we need is to make the page handler that will "process" the POSTed drawing JSON. Since we're not actually doing anything with the JSON, the code is very short:

public class DrawingModel : PageModel
{
    [BindProperty]
    public string DrawingContent { get; set; }

    public void OnGet() { }

    public void OnPostSave()
    {
        var drawingJson = DrawingContent;
    }
}

In normal circumstances, we'd almost certainly want the OnPostSave() method to return something, be it IActionResult, JsonResult, or just a string.

The Final Script

Now we need to return to the Razor Page and implement the saveDrawing() function to call the new OnPostSave() method. We also need to show and hide the "saving" status message on the status bar immediately below the canvas.

One additional thing Chris decided to do was put some extra code in to prevent "double-click" saving, so our save method can only be called one second after it was last called. You can see all of this code below:

$(function () {
    //...Initialize canvas

    //Set the DrawingEditor's saveFunc
    editor.saveFunc = saveDrawing();
});

function saveDrawing() {
    //If we can save...
    if (!savingLocked) {
        //Show the save message
        showSaving();

        //Create the AJAX content
        const drawing = {
            DrawingContent: JSON.stringify(editor.getJson()),
        };

        //POST the content to the server
        $.ajax({
            type: "POST",
            data: drawing,
            async: true,
            url: '?handler=Save'
        }).done(function (data) {
            //When this is done, hide the saving message
            hideSaving();
        }).fail(function () {
            //If this fails, hide the saving message
            //and show an alert
            hideSaving();
            alert('We are unable to save changes at this time.');
        });
    }
}

function showSaving() {
    message = savingMessage;
    $('#StatusBar').html(message);
    savingLocked = true; //Cannot save again for one second
    setTimeout(function () { savingLocked = false; }, 1000);
}

function hideSaving() {
    if (savingLocked)
        //Cannot hide the saving message again for 100 milliseconds
        setTimeout(() => hideSaving(), 100);
    else {
        $('#Saving').remove();
        message = '';
    }
}

With all of this in place, we now have a working save feature!

The Last Hotkey

There's one last little thing we should do: since we already have hotkeys for cut, copy, paste, etc. we should implement the hotkey for save (Ctrl+S) as well. Here's the modifications we need to make to DrawingEditor to realize this:

class DrawingEditor {
    //...Properties

    private keyCodes = {
        'C': 67,
        'S': 83, //New key code
        'V': 86,
        'X': 88,
        'Y': 89,
        'Z': 90
    }

    //...Constructor and other methods

    //Initializes hotkey events
    private initializeKeyCodeEvents() {
        window.addEventListener('keydown', (event: KeyboardEvent) => {
            //process Ctrl Commands
            if (event.ctrlKey) {
                switch (event.keyCode) {
                    case this.keyCodes['Z']:
                        this.undo();
                        break;
                    case this.keyCodes['Y']:
                        this.redo();
                        break;
                    case this.keyCodes['C']:
                        this.copier.copy();
                        break;
                    case this.keyCodes['X']:
                        this.copier.cut();
                        break;
                    case this.keyCodes['V']:
                        this.copier.paste();
                        break;
                    //New key code implementation
                    case this.keyCodes['S']:
                        this.saveFunc();
                        break;
                }

                event.preventDefault();
                event.stopPropagation();
                return false;
            }
        });
    };
}

GIF Time!

Let's see how this works in a GIF:

Pay special attention to the lower-right side of the GIF, where the "Saving" message will appear very briefly.

Conclusion

That's it! With this last feature, we have made our drawing canvas match the goal photo from the beginning of the series! Thank you, dear readers, for reading these posts about creating a drawing canvas with FabricJS and TypeScript! Chris and I are pretty proud of this sample, and we hope it helps you all in your projects.

For the final time, don't forget to check out the sample project for this series over on GitHub. It contains the final, working code for this series. Don't be afraid to make pull requests if you see a way we can improve!

Happy Drawing!

Drawing with FabricJS and TypeScript Part 8: Cut/Copy/Paste and Hotkeys

Matthew Jones — Fri, 22 May 2020 18:30:58 +0000

We're nearing the end of our Drawing with FabricJS and TypeScript series. In this part, let's add one last set of improvements by implementing cut, copy, and paste functionality as well as hotkey shortcuts for those, plus undo and redo.

Watch your fingers! Photo by Igor Miske / Unsplash

The Sample Project

Don't forget about the sample project over on GitHub! It contains the final code for this entire series.

The Copier Class

Let's start with the copier class, which will implement our cut, copy, and paste functionality. The skeleton of this class looks like this:

class Copier {
    //During cut or paste, memorizedObject is the object that 
    //will be held in memory and then pasted
    private memorizedObject: fabric.Object

    constructor(private readonly editor: DrawingEditor) { }

    copy(callBack?: Function) { }

    cut() { }

    paste() { }
}

We need to fill in each of the methods (other than the constructor, which for this class doesn't have an implementation; it just gets an instance of DrawingEditor).

Let's start with the copy() method. When we copy an object, we place a copy of it in memory so that it can be pasted later. In this particular case, we need to get the active object on the FabricJS canvas, clone it, and then set it to the memorizedObject property of Copier. Plus, we have an optional callback method that needs to be executed, if it is not undefined. Here's how that looks:

copy(callBack?: Function) {
    //Get active object on canvas
    const activeObject = this.editor.canvas.getActiveObject();

    //If the active object is not null
    if (activeObject !== null) {
        //Clone the object...
        activeObject.clone((object) => {
            //...and set it as the memorizedObject property
            this.memorizedObject = object;

            //When the object is pasted, offset the paste location
            //from the original object.
            object.set({
                left: object.left + 10,
                top: object.top + 10
            });

            //If the callback method exists, call it
            if (callBack !== undefined)
                callBack();
        });
    }
}

The callback method becomes immediately useful, because we now need to implement the cut() method. Cut is really just copy and then delete, so our cut() method will pass a function that deletes the selected object after it is cut. Here's the implementation:

cut() {
    this.copy(() => this.editor.deleteSelected());
}

The last part of this is the paste() method. In this method, we clone the memorized object, add it to the canvas, and re-render the canvas. Here's the code:

paste() {
    if (this.memorizedObject !== undefined) {
        this.memorizedObject.clone((clonedObject) => {
            this.editor.canvas.add(clonedObject);
            this.editor.canvas.setActiveObject(clonedObject);
            this.editor.stateManager.saveState();
            this.editor.canvas.renderAll();
        });
    }
}

All that's left to do is to make our main DrawingEditor class aware of the new Copier class...

class DrawingEditor {
    private copier: Copier;

    //...Other properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //...Rest of constructor

        this.copier = new Copier(this);
    }
}

But wait! There's currently no way the user can actually use this functionality! For cut/copy/paste, we aren't going to add display components to the toolbar, like we did with previous controls. Instead, we're going to enable hotkeys (e.g. Ctrl+X, Ctrl+C, Ctrl+V).

Hotkeys

Not only will we enable hotkeys for cut, copy, and paste, we'll also enable them for undo (Ctrl+Z) and redo (Ctrl+Y). To start, we need our DrawingEditor class to be aware of the key codes for each of the letters. One of the ways we can do this is by using a very neat site called keycode.info. Here's the keycodes for X, C, V, Z, and Y:

class DrawingEditor {
    //...Other properties

    private keyCodes = {
        'C': 67,
        'V': 86,
        'X': 88,
        'Y': 89,
        'Z': 90
    }
}

TypeScript defines for us a KeyboardEvent class which represents an event where the user pressed a key on the keyboard. That event also tells us if the Ctrl key was pressed during the event. We can use this class to initialize our key code events:

class DrawingEditor {
    //...Other properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //...Rest of constructor
        this.initializeKeyCodeEvents();
    }

    //...Other methods

    private initializeKeyCodeEvents() {
        //When a key is pressed...
        window.addEventListener('keydown', (event: KeyboardEvent) => {
            //...check if the Ctrl key was also pressed...
            if (event.ctrlKey) {
                //...and do different events based on the other key pressed.
                switch (event.keyCode) {
                    case this.keyCodes['Z']:
                        this.undo();
                        break;
                    case this.keyCodes['Y']:
                        this.redo();
                        break;
                    case this.keyCodes['C']:
                        this.copier.copy();
                        break;
                    case this.keyCodes['X']:
                        this.copier.cut();
                        break;
                    case this.keyCodes['V']:
                        this.copier.paste();
                        break;
                }

                event.preventDefault();
                event.stopPropagation();
                return false;
            }
        });
    };
}

That's all we need to do for hotkeys! Now the user can cut, copy, paste, undo, and redo using the keyboard shortcuts for those events! This is difficult to put into a GIF (because you wouldn't be able to see what keyboard shortcut I was using), so there won't be one for this part of the series.

Summary

To implement cut/copy/paste, we needed to:

Create a Copier class that defines this functionality.
Wire that Copier class to the DrawingEditor.

To implement hotkey shortcuts, we needed to:

Create the hotkey initialization method.
Call that method in the DrawingEditor constructor.

Don't forget to check out the sample project over on GitHub!

In the next and final part of this series, we'll see how to submit the generated JSON of objects on our canvas to the server, so that it can be saved into a database!

Happy Drawing!

Drawing with FabricJS and TypeScript Part 7: Undo/Redo

Matthew Jones — Tue, 19 May 2020 15:23:38 +0000

In this part, we're going to further improve our drawing canvas by adding an undo/redo functionality. To accomplish this, we have to implement a state manager system which keeps track of the various states of the canvas and the objects on it. It's not as bad as it sounds, I promise. Let's go!

And our manager will be WAY less hipster-y. Photo by Icons8 Team / Unsplash

The Sample Project

As I'm sure you're aware by now, there's a sample project that goes along with this series of posts. Check it out!

The State Manager

In order to accomplish this undo/redo functionality, we need a class that will keep track of the various states of the drawing canvas. Said class will need to keep a representation of the canvas in JSON, so that said representation can be easily restored.

Lucky for us, FabricJS already provides a way to get the JSON for the canvas: the method toDatalessJSON(). By using this method, we can get the complete state of the canvas at any given time.

The state manager itself will need to keep a stack of states, so that we can pop off the top state to undo. It will also need to keep a separate stack of popped states, so that we can redo.

Photo by Iva Rajović / Unsplash

Let's see the annotated code for our StateManager class:

class StateManager {
    private currentState: string; 
    private stateStack: string[]; //Undo stack
    private redoStack: string[]; //Redo stack
    private locked: boolean; //Determines if the state can currently be saved.
    private maxCount: number = 100; //We keep 100 items in the stacks at any time.

    constructor(readonly canvas: fabric.Canvas) {
        this.currentState = canvas.toDatalessJSON();
        this.locked = false;
        this.redoStack = [];
        this.stateStack = [];
    }

    saveState() {
        if (!this.locked) {
            if (this.stateStack.length === this.maxCount) {
                //Drop the oldest element
                this.stateStack.shift();
            }

            //Add the current state
            this.stateStack.push(
                this.currentState
            );

            //Make the state of the canvas the current state
            this.currentState = this.canvas.toDatalessJSON()

            //Reset the redo stack.
            //We can only redo things that were just undone.
            this.redoStack.length = 0;
        }
    }

    //Pop the most recent state. Use the specified callback method.
    undo(callback?: Function) {
        if (this.stateStack.length > 0)
            this.applyState(this.redoStack, this.stateStack.pop(), callback);
    }

    //Pop the most recent redo state. Use the specified callback method.
    redo(callback?: Function) {
        if (this.redoStack.length > 0) 
            this.applyState(this.stateStack, this.redoStack.pop(), callback);
    }

    //Root function for undo and redo; operates on the passed-in stack
    private applyState(stack: string[], newState, callBack?: Function) {
        //Push the current state
        stack.push(this.currentState);

        //Make the new state the current state
        this.currentState = newState;

        //Lock the stacks for the incoming change
        const thisStateManager = this;
        this.locked = true;

        //Update canvas with the new current state
        this.canvas.loadFromJSON(this.currentState, function () {
            if (callBack !== undefined)
                callBack();

            //Unlock the stacks
            thisStateManager.locked = false;
        });       
    }
}

Now our question is, how do we use this class?

Modifications to DrawingEditor

We must make a few modifications to the root DrawingEditor class.

First, we need some shortcut methods to allow the DrawingEditor to undo, redo, and save the current state:

class DrawingEditor {
    stateManager: StateManager;
    //...Other properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //...Initialize canvas

        this.stateManager = new StateManager(this.canvas);

        //...
    }

    //...Other methods

    undo(): void {
        this.stateManager.undo();
    }

    redo(): void {
        this.stateManager.redo();
    }

    private saveState() {
        this.stateManager.saveState();
        this.canvas.renderAll();
    }
}

The method saveState() is used as a shortcut method to allow other methods to a) save the current state and b) render all objects on the canvas again. saveState() needs to be used in quite a few places, most notably whenever a canvas object is modified, created, or deleted.

class DrawingEditor {
    //...Properties and constructor

    private initializeCanvasEvents() {
        //...Other events

        this.canvas.on('mouse:up', (o) => {
            this.isDown = false;
            switch (this.cursorMode) {
                //If the cursor mode is currently Draw when a mouseup
                //event occurs, we have just finished dragging to
                //create that object. Hence, we need to add the new
                //state of the canvas to the state manager.
                case CursorMode.Draw:
                    this.isObjectSelected = false;
                    this.saveState();
            }
        });

        //If an object has been modified at all, save the new state
        this.canvas.on("object:modified", (e) => {
            this.saveState();
        });
    }

    //This method is called by the DeleteComponent from Part 5.
    deleteSelected(): void {
        this.canvas.remove(this.canvas.getActiveObject());
        this.canvas.renderAll();

        this.saveState();
    }

    //...Other methods
}

Our DrawingEditor will now save the state of the canvas whenever objects are changed, created, or deleted. But we still need toolbar items for undo/redo. Guess what that means? We need some new display components!

Components for Undo/Redo

First up is the UndoComponent:

class UndoComponent extends ControlComponent {

    constructor(target: string, parent: DrawingEditor) {
        super(
            target, //Selector
            "fa fa-undo", //Icon CSS Classes
            "Undo", //Tooltip
            parent,
            {
                'click': () => { parent.undo(); }
            });
    }

    render() {
        const html = `<button id="${this.target.replace('#', '')}" title="${this.hoverText}" class="btn btn-info">
                        <i class="${this.cssClass}"></i>
                     </button>`;

        $(this.target).replaceWith(html);
    }
}

Nothing too complex here, I think. We also need the RedoComponent:

class RedoComponent extends ControlComponent {

    constructor(target: string, parent: DrawingEditor) {
        super(
            target, //Selector
            "fa fa-repeat", //Icon CSS Classes
            "Redo", //Tooltip
            parent,
            {
                'click': () => { parent.redo(); }
            });
    }

    render() {
        const html = `<button id="${this.target.replace('#', '')}" title="${this.hoverText}" class="btn btn-info">
                        <i class="${this.cssClass}"></i>
                     </button>`;

        $(this.target).replaceWith(html);
    }
}

Just like the other components, we need to modify the DrawingEditor and the Razor Page markup and script:

class DrawingEditor {
    //...Properties and constructor
    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            //...Other cases
            case 'undo':
                this.components[component] 
                  = [new UndoComponent(target, this)];
                break;
            case 'redo':
                this.components[component] 
                  = [new RedoComponent(target, this)];
                break;
        }
    }
}

<div class="row drawingToolbar bg-secondary text-light">
    <div class="btn-toolbar">
        <div class="btn-group mr-2" role="group">
            <div id="undoComponent"></div>
            <div id="redoComponent"></div>
            <div id="deleteComponent"></div>
        </div>
    </div>
    <!--Shapes toolbar-->
    <!--Color, style, and thickness toolbar-->
</div>

var editor;
$(function () {
    //Instantiate canvas
    const components = [
        //Other components
        { id: '#undoComponent', type: 'undo' },
        { id: '#redoComponent', type: 'redo' }
    ];

    //...Rest of script
});

GIF Time!

Now it's time to see what we've got! Here's a GIF of the undo/redo functionality in action:

That works pretty well, I'd say! Now we have functioning undo/redo calls in our FabricJS canvas!

Summary

In order to implement undo/redo, we needed to do the following:

Create a StateManager class which could store stacks of canvas state for both undo and redo.
Create undo and redo components that the user could click on.

Don't forget to check out the sample project over on GitHub!

In the next part of this series, we'll implement our own cut/copy/paste functionality, as well as hotkeys! Stay tuned for the penultimate part of Drawing with FabricJS and TypeScript!

Happy Drawing!

Drawing with FabricJS and TypeScript Part 6: Colors and Styles

Matthew Jones — Fri, 15 May 2020 18:37:55 +0000

Our drawing canvas is coming along quite nicely! From drawing basic shapes, to text and freeform lines, to deleting objects, our canvas is getting more and more useful features.

Today, we add another set: allowing the user to select line color, fill color, line style, and line thickness. We'll even implement our own custom selector class to do this. Let's go!

The COLORS, Duke, the COLORS!!! (I'm colorblind, kid). Photo by Sharon Pittaway / Unsplash

The Sample Project

The sample project for this post and all posts in this series is over on GitHub. Check it out!

Creating the Custom Image Dropdown

Drawing is an inherently visual endeavor, and due to this Chris felt that we needed an appropriately visual selector for the colors, line styles, and fills. Hence he created something he termed an Image Dropdown, a class which shows you little images instead of text for each selectable object, and can be used for multiple types of selections.

But before we can use it, we have to make it. And we need some basic stuff to start. Basic stuff like a class to represent each option in the Image Dropdown...

class ImageOption {
    display: string;
    value: any;
    text: string;
}

...a class to represent the options we need to select to render the image dropdown itself...

class ImageDropdownOptions {
    selectedStyle: ImageDropdownStyle;
    width: number;
    childWidth?: number;
    selectedIndex: any;
    optionsList: ImageOption[];
    handlers?: { [key: string]: (value?: any) => void }
}

...and an enumeration for the layout style of the items within the image dropdown.

const enum ImageDropdownStyle {
    Fill, //Used for colors
    Copy //Used for text or other displays
}

Now we can start to build our custom Image Dropdown class. Let's start with a very basic skeleton:

class ImageDropdown {
    element: HTMLElement; //ID of the element 
                          //where this dropdown will be rendered
    value: any; //Property holder for the value of the selected item
    handlers: { [key: string]: (value?: any) => void };

    constructor(private readonly selector: string, 
                private readonly options: ImageDropdownOptions) {
        this.element = document.getElementById(this.selector);
        this.handlers = options.handlers;
        this.render();
        this.attachEvents();
    }

    //Renders the basic HTML for the control
    render() { }

    //When an option is selected, render that option specially
    renderSelectedDiv() { }

    //Render all options in the dropdown
    renderOptions() { }

    //Attach events (e.g. click events) to elements in the dropdown
    attachEvents() { }
}

We can fill in each of the events separately, and walk through what happens in them while doing so.

render(), renderSelected(), renderOptions() Methods

This method needs to render the actual dropdown object. In reality, it's just a div surrounding an unordered list, but that div has the given selector as its ID. The method looks like this:

render() {
    this.element.outerHTML =
        `<div id="${this.selector}" class='imageDropdown'>
            <div style="width: ${this.options.width}px">
            ${this.renderSelected()}
            <i class="fa fa-caret-square-o-down"></i>
            </div>
            <ul class="hidden" style="width: ${this.options.childWidth || this.options.width}px">
            ${this.renderOptions()}                    
            </ul>
         </div>`;
}

Note that in the above class, unlike the display components, we are passing in the ID without the '#' value.

That render() method, in turn, calls both renderSelected() to show the selected option and renderOptions() to show all options. The code for the former is relatively uncomplicated:

renderSelected() {
    switch (this.options.selectedStyle) {
        case ImageDropdownStyle.Copy:
            return `<div id="${this.selector}_selected" style="width: ${this.options.width - 20}px">${this.options.optionsList[this.options.selectedIndex].display}</div>`;
        //The below case is used for color options
        case ImageDropdownStyle.Fill:
            return `<div id="${this.selector}_selected" style="width: ${this.options.width - 20}px; height:20px; background-color: ${this.options.optionsList[this.options.selectedIndex].value}"><span></span></div>`;
    }
}

The code for renderOptions() is also not too difficult, all things considered:

renderOptions() {
    let output = '';
    this.options.optionsList.map((record) => {
        switch (this.options.selectedStyle) {
            case ImageDropdownStyle.Copy:
                output += `<li class="vertical" title="${record.text}">${record.display}</li>`;
                break;
            case ImageDropdownStyle.Fill:
                output += `<li class="horizontal" title="${record.text}">${record.display}</li>`;
                break;
        }
    });

    return output;
}

But now we come to the most difficult portion of this implementation: the attachEvents() method.

attachEvents() Method

Whenever an element in the Image Dropdown is clicked, we need to ensure that the next objects which will be drawn in the canvas are drawn with the selected line color, fill color, or style. Plus, the item that has been selected must appear in the "viewable" portion of the display, just like in a standard drop down.

With that in mind, let's see the annotated code for the attachEvents() method.

attachEvents() {
    this.element = document.getElementById(this.selector);
    const container = this; //The ImageDropdown itself
    const selectedDiv = this.element.children[0]; //The displayed value
    const list = this.element.children[1]; //The list of values
    const options = [...list.children];

    //On click, if the selected class already has the CSS class 'hidden'
    //remove that class. Otherwise, add that class.
    selectedDiv.addEventListener('click', () => {
        if (list.classList.contains('hidden'))
            list.classList.remove('hidden');
        else
            list.classList.add('hidden');
    });

    //When the user clicks on one of the options,
    //that option should be shown in the display window
    //and the drawing brush should be modified to match the selection.
    options.forEach((element: HTMLLIElement, index: number) => {
        element.addEventListener('click', (o) => {
            const selected = this.options.optionsList[index];
            list.classList.add('hidden');

            //Update value and display
            if (container.value != selected.value) {
                switch (container.options.selectedStyle) {
                    //Use the selected value to modify the drawing brush.
                    case ImageDropdownStyle.Copy:
                        selectedDiv.children[0].innerHTML = selected.display;
                        container.value = selected.value;

                        break;

                    //For colors. Use the selected color to
                    //modify the drawing brush.
                    case ImageDropdownStyle.Fill:
                        Object.assign((selectedDiv.children[0] as HTMLElement).style, {
                            backgroundColor: selected.value
                        });

                        container.value = selected.value;
                        break;
                }

                //If the Image Dropdown has a "change" event handler, call it.
                if (container.handlers['change'] != null) {
                    container.handlers['change'](this.value);
                }
            }
        });
    });
}

We have now fully written our reusable ImageDropdown class! Time to implement a few instances of it.

Line Color and Fill Color

We can demonstrate how to use our new ImageDropdown class by implementing a way for the user to select the line color and fill color for the lines, shapes, and text they want to draw.
‌
We're making a couple assumptions about this element:

There will only be a certain number of colors available. The user won't pick from a color wheel (though this would be an excellent improvement if you, dear reader, want to make a pull request for it) AND
The same set of colors will be available for lines and fill color.

Let's build a reusable display component that will make use of ImageDropdown and let the users choose colors! Here's the code for our component.

class ColorChooserComponent {
    //These colors will be available to pick from
    private colors = [
        { key: 0, code: '', text: 'Transparent' },
        { key: 1, code: '#FFFFFF', text: 'White' },
        { key: 2, code: '#C0C0C0', text: 'Silver' },
        { key: 3, code: '#808080', text: 'Gray' },
        { key: 4, code: '#000000', text: 'Black' },
        { key: 5, code: '#FF0000', text: 'Red' },
        { key: 6, code: '#800000', text: 'Maroon' },
        { key: 7, code: '#FFFF00', text: 'Yellow' },
        { key: 8, code: '#808000', text: 'Olive' },
        { key: 9, code: '#00FF00', text: 'Lime' },
        { key: 10, code: '#008000', text: 'Green' },
        { key: 11, code: '#00FFFF', text: 'Aqua' },
        { key: 12, code: '#008080', text: 'Teal' },
        { key: 13, code: '#0000FF', text: 'Blue' },
        { key: 14, code: '#000080', text: 'Navy' },
        { key: 15, code: '#FF00FF', text: 'Fuchsia' },
        { key: 16, code: '#800080', text: 'Purple' }
    ]

    constructor(private readonly target: string, 
                private readonly parent: DrawingEditor, 
                private readonly defaultColor: string, 
                private readonly handlers: { [key: string]: (value?: any) => void }) {
        this.render();
    }

    render(): void {
        var opt = new ImageDropdownOptions();
        const def = this.colors.filter((c) => {
            if (c.code === this.defaultColor)
                return c;
        });

        Object.assign(opt, {
            selectedStyle: ImageDropdownStyle.Fill,
            selectedIndex: def[0].key,
            width: 50,
            childWidth: 153,
            optionsList: this.getOptions(),
            handlers: this.handlers
        });

        new ImageDropdown(this.target, opt);
    }

    private getOptions(): ImageOption[] {
        const values: ImageOption[] = [];
        this.colors.forEach((color) => {
            const fillColor = color.code === '' ? 'none' : color.code;
            values.push(
                {
                    display: `<svg width="16px" height="15px" viewBox="0 0 15 15"><rect width="15" height="15" top="0" fill="${fillColor}" stroke="black" stroke-width="1px" /></svg>`,
                    value: color.code,
                    text: color.text
                }
            );
        });

        return values;
    }
}

NOTE: In the above code and in many other places throughout this series, you may see constructors that have readonly parameters. In TypeScript, this is the same as instantiating a property for the class that contains that constructor, and so we don't need to define a property. I did not know this before starting this series, and I can see how it's a useful feature to have. See the docs for more info.

Just like our earlier display components, we need to modify the base DrawingEditor class and the Razor Page markup and script to wire up the new ColorChooserComponent. But this time, there's some extra changes that also need to be made.

In DrawingEditor, because it is that class which is aware of the brush currently being used to draw objects, we need to modify that brush whenever a new fill color or line color is selected. This is in addition to adding the new line/fill components to the addComponents() method, like we did for the other ones. Here's the changes to DrawingEditor for both of these:

class DrawingEditor {
    //...Properties and Constructor

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] 
                  = [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] 
                  = [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] 
                  = [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] 
                  = [new TriangleDisplayComponent(target, this)];
                break;
            case 'text':
                this.components[component] 
                  = [new TextDisplayComponent(target, this)];
                break;
            case 'polyline':
                this.components[component] 
                  = [new PolylineDisplayComponent(target, this)];
                break;
            case 'delete':
                this.components[component] 
                  = [new DeleteComponent(target, this)];
                break;
            //New components
            case 'lineColorChooser':
                this.components[component] = [
                    new ColorChooserComponent(target, this, '#000000', {
                        'change': (newColor: string) => {
                            this.setLineColor(newColor);
                        }
                    })
                ];
                break;
            case 'fillColorChooser':
                this.components[component] = [
                    new ColorChooserComponent(target, this, '', {
                        'change': (newColor: string) => {
                            this.setFillColor(newColor);
                        }
                    })
                ];
                break;
        }
    }

    //...Other methods

    //Sets the fill color of the brush
    setFillColor(color: string): void {
        this.drawerOptions.fill = color;
    }

    //Sets the "stroke" or line color of the brush
    setLineColor(color: string): void {
        this.drawerOptions.stroke = color;
    }
}

Let's also change the markup on the Razor Page...

<div class="row drawingToolbar bg-secondary text-light">
    <div class="btn-toolbar">
        <div class="btn-group mr-2" role="group">
            <div id="deleteComponent"></div>
        </div>
    </div>
    <div class="btn-toolbar">
        <label class="col-form-label controlLabel">Tools:</label>
        <div class="d-inline-block">
            <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                <div id="polylineDisplayComponent"></div>
                <div id="lineDisplayComponent"></div>
                <div id="rectangleDisplayComponent"></div>
                <div id="ovalDisplayComponent"></div>
                <div id="triangleDisplayComponent"></div>
                <div id="textDisplayComponent"></div>
            </div>
        </div>
    </div>
    <!---New components and markup -->
    <div class="separator"></div>
    <div class="btn-toolbar">
        <label class="col-form-label controlLabel d-inline">Lines:</label>
        <div id="lineColorComponent"></div>

        <div class="separator"></div>

        <label class="col-form-label controlLabel ">Fill:</label>
        <div id="fillColorComponent"></div>
    </div>
</div>

...and the script to initialize our drawing canvas, on the same Razor Page:

var editor;
$(function () {
    //Initialize canvas

    //Create a list of available display components
    const components = [
        { id: '#lineDisplayComponent', type: 'line' },
        { id: '#rectangleDisplayComponent', type: 'rect' },
        { id: '#ovalDisplayComponent', type: 'oval' },
        { id: '#triangleDisplayComponent', type: 'tria' },
        { id: '#textDisplayComponent', type: 'text' },
        { id: '#polylineDisplayComponent', type: 'polyline' },
        { id: '#deleteComponent', type: 'delete' },
        //New components
        { id: 'fillColorComponent', type: 'fillColorChooser' },
        { id: 'lineColorComponent', type: 'lineColorChooser' }
    ];

    //Add the components to the DrawingEditor, which will render them.
    editor.addComponents(components);
    $('#lineDisplayComponent').click();

    //...Key events and other methods
});

GIF Time 1!

Now we can finally run the app, and use our new line color and fill color pickers! Here's a GIF that shows these features in action:

But wait, we're not done yet! Now let's see how to change the line styles and width.

Line Styles

Our requirements for this project specified that we needed a way to change the line "style" of the shapes. That is, we needed to allow the user to draw dotted, dashed, or solid lines. So, let's build a component to do this!

In FabricJS, there is a class called BaseBrush, which represents the brush being used at any given time to draw objects. BaseBrush contains two properties we will need to use: strokeLineCap and strokeDashArray.

strokeLineCap sets the line ending of the line being drawn; in our case, we only use the value "round".

strokeDashArray sets the properties of the dashes being drawn as part of a line. This allows us to set the size of the dashes. Our requirements specify that we need both dotted and dashed lines, so we will use strokeDashArray to create each of these.

class LineTypeComponent {
    private selectedType: string;

    constructor(private readonly target: string, 
                private readonly parent: DrawingEditor) {
        this.render();
    }

    render(): void {
        var opt = new ImageDropdownOptions();
        Object.assign(opt, {
            selectedStyle: ImageDropdownStyle.Copy,
            selectedIndex: 0,
            width: 50,
            optionsList:
                [
                    {
                        display: '<svg width="50px" height="10px" viewBox="0 0 50 10"><line x1="1" y1="1" x2="50" y2="1" stroke="black" stroke-width="3px" /></svg>',
                        value: 'solid',
                        text: 'Solid'
                    },
                    {
                        display: '<svg width="50px" height="10px" viewBox="0 0 50 10"><line x1="3" y1="1" x2="50" y2="1" stroke="black" stroke-linecap="round" stroke-width="3px" stroke-dasharray="1 6" /></svg>',
                        value: 'dotted',
                        text: 'Dotted'
                    },
                    {
                        display: '<svg width="50px" height="10px" viewBox="0 0 50 10"><line x1="3" y1="1" x2="50" y2="1" stroke="black" stroke-width="3px" stroke-dasharray="6 6" /></svg>',
                        value: 'dashed',
                        text: 'Dashed'
                    }
                ],
            handlers: {
                'change': (lineType: string) => {
                    this.selectedType = lineType;
                    this.update();
                }
            }
        });
        new ImageDropdown(this.target, opt);
    }

    update() {
        switch (this.selectedType) {
            case 'solid':
                delete this.parent.drawerOptions.strokeLineCap;
                delete this.parent.drawerOptions.strokeDashArray;
                break;
            case 'dotted':
                this.parent.drawerOptions.strokeLineCap = 'round';
                this.parent.drawerOptions.strokeDashArray 
                  = [1, this.parent.drawerOptions.strokeWidth * 2];
                break;
            case 'dashed':
                delete this.parent.drawerOptions.strokeLineCap;
                this.parent.drawerOptions.strokeDashArray 
                  = [this.parent.drawerOptions.strokeWidth * 2,
                     this.parent.drawerOptions.strokeWidth * 1.5];
                break;
        }
    }
}

The update() method will change the brush's properties whenever a new item is selected in the image dropdown.

This next part is probably pretty familiar by now: we need to modify DrawingEditor and the Razor Page markup and script:

class DrawingEditor {
    //...Properties and Constructor

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] 
                  = [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] 
                  = [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] 
                  = [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] 
                  = [new TriangleDisplayComponent(target, this)];
                break;
            case 'text':
                this.components[component] 
                  = [new TextDisplayComponent(target, this)];
                break;
            case 'polyline':
                this.components[component] 
                  = [new PolylineDisplayComponent(target, this)];
                break;
            case 'delete':
                this.components[component] 
                  = [new DeleteComponent(target, this)];
                break;
            case 'lineColorChooser':
                this.components[component] = [
                    new ColorChooserComponent(target, this, '#000000', {
                        'change': (newColor: string) => {
                            this.setLineColor(newColor);
                        }
                    })
                ];
                break;
            case 'fillColorChooser':
                this.components[component] = [
                    new ColorChooserComponent(target, this, '', {
                        'change': (newColor: string) => {
                            this.setFillColor(newColor);
                        }
                    })
                ];
                break;
            //New component
            case 'lineType':
                this.components[component] 
                  = [new LineTypeComponent(target, this)];
                break;
        }
    }

    //...Other methods
}

<div class="row drawingToolbar bg-secondary text-light">
    <!--Delete component-->
    <!--Shapes toolbar-->
    <div class="separator"></div>
    <div class="btn-toolbar">
        <!-- New line style component -->
        <label class="col-form-label controlLabel d-inline">Style:</label>
        <div id="lineTypeComponent"></div>

        <div class="separator"></div>

        <label class="col-form-label controlLabel d-inline">Lines:</label>
        <div id="lineColorComponent"></div>

        <div class="separator"></div>

        <label class="col-form-label controlLabel ">Fill:</label>
        <div id="fillColorComponent"></div>
    </div>
</div>

var editor;
$(function () {
    //...Initialize canvas

    //Create a list of available display components
    const components = [
        { id: '#lineDisplayComponent', type: 'line' },
        { id: '#rectangleDisplayComponent', type: 'rect' },
        { id: '#ovalDisplayComponent', type: 'oval' },
        { id: '#triangleDisplayComponent', type: 'tria' },
        { id: '#textDisplayComponent', type: 'text' },
        { id: '#polylineDisplayComponent', type: 'polyline' },
        { id: '#deleteComponent', type: 'delete' },
        { id: 'fillColorComponent', type: 'fillColorChooser' },
        { id: 'lineColorComponent', type: 'lineColorChooser' },
        //New component
        { id: 'lineTypeComponent', type: 'lineType' },
    ];

    //Add the components to the DrawingEditor, which will render them.
    editor.addComponents(components);
    $('#lineDisplayComponent').click();

    //...Events and other methods
});

GIF Time 2!

Guess what? It's GIF time again! Let's see how the new LineTypeComponent looks:

Woohoo! Almost there! There's only one thing left we need to do, and that's to create a component which allows the user to choose the thickness of the line being drawn.

Line Thickness

Given that you, dear reader, have probably seen this pattern many times by this point, I'm going to give you the short version of implementing this component. First, we need the new component class, LineThicknessComponent:

class LineThicknessComponent {

    constructor(private readonly target: string, private readonly parent: DrawingEditor) {
        this.render();
    }

    render(): void {
        var opt = new ImageDropdownOptions();
        Object.assign(opt, {
            selectedStyle: ImageDropdownStyle.Copy,
            selectedIndex: 0,
            width: 50,
            optionsList:
                [
                    { display: '<svg width="50px" height="10px"><line x1="0" y1="1" x2="50" y2="1" stroke="black" stroke-width="1px" /></svg>', value: 1, text: '1px' },
                    { display: '<svg width="50px" height="10px"><line x1="0" y1="1" x2="50" y2="1" stroke="black" stroke-width="3px" /></svg>', value: 3, text: '3px' },
                    { display: '<svg width="50px" height="10px"><line x1="0" y1="1" x2="50" y2="1" stroke="black" stroke-width="5px" /></svg>', value: 5, text: '5px' },
                    { display: '<svg width="50px" height="10px"><line x1="0" y1="1" x2="50" y2="1" stroke="black" stroke-width="10px" /></svg>', value: 10, text: '10px' }
                ],
            handlers: {
                'change': (newWidth: number) => {
                    this.parent.setStrokeWidth(<number>newWidth);
                }
            }
        });
        new ImageDropdown(this.target, opt);
    }
}

We also need to modify DrawingEditor (note that there's a new method, setStrokeWidth():

class DrawingEditor {
    //...Properties and Constructor

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] 
                  = [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] 
                  = [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] 
                  = [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] 
                  = [new TriangleDisplayComponent(target, this)];
                break;
            case 'text':
                this.components[component] 
                  = [new TextDisplayComponent(target, this)];
                break;
            case 'polyline':
                this.components[component] 
                  = [new PolylineDisplayComponent(target, this)];
                break;
            case 'delete':
                this.components[component] 
                  = [new DeleteComponent(target, this)];
                break;
            case 'lineColorChooser':
                this.components[component] = [
                    new ColorChooserComponent(target, this, '#000000', {
                        'change': (newColor: string) => {
                            this.setLineColor(newColor);
                        }
                    })
                ];
                break;
            case 'fillColorChooser':
                this.components[component] = [
                    new ColorChooserComponent(target, this, '', {
                        'change': (newColor: string) => {
                            this.setFillColor(newColor);
                        }
                    })
                ];
                break;
            case 'lineType':
                this.components[component] 
                  = [new LineTypeComponent(target, this)];
                break;
            //New component
            case 'lineThickness':
                this.components[component] 
                  = [new LineThicknessComponent(target, this)];
                break;
        }
    }

    //...Other methods

    setStrokeWidth(strokeWidth: number): void {
        this.drawerOptions.strokeWidth = strokeWidth;
    }
}

Finally, we need to modify the markup and script:

<div class="row drawingToolbar bg-secondary text-light">
    <!--Delete component-->
    <!--Shapes toolbar-->
    <div class="separator"></div>
    <div class="btn-toolbar">
        <!--New component-->
        <label class="col-form-label controlLabel d-inline">Size:</label>
        <div id="lineThicknessComponent"></div>

        <div class="separator"></div>

        <label class="col-form-label controlLabel d-inline">Style:</label>
        <div id="lineTypeComponent"></div>

        <div class="separator"></div>

        <label class="col-form-label controlLabel d-inline">Lines:</label>
        <div id="lineColorComponent"></div>

        <div class="separator"></div>

        <label class="col-form-label controlLabel ">Fill:</label>
        <div id="fillColorComponent"></div>
    </div>
</div>

var editor;
$(function () {
    //...Initialize canvas

    //Create a list of available display components
    const components = [
        { id: '#lineDisplayComponent', type: 'line' },
        { id: '#rectangleDisplayComponent', type: 'rect' },
        { id: '#ovalDisplayComponent', type: 'oval' },
        { id: '#triangleDisplayComponent', type: 'tria' },
        { id: '#textDisplayComponent', type: 'text' },
        { id: '#polylineDisplayComponent', type: 'polyline' },
        { id: '#deleteComponent', type: 'delete' },
        { id: 'fillColorComponent', type: 'fillColorChooser' },
        { id: 'lineColorComponent', type: 'lineColorChooser' },
        { id: 'lineTypeComponent', type: 'lineType' },
        { id: 'lineThicknessComponent', type: 'lineThickness' },
    ];

    //Add the components to the DrawingEditor, which will render them.
    editor.addComponents(components);
    $('#lineDisplayComponent').click();

    //...Click events and methods
});

GIF Time 3!

Once again, it is GIF time! Let's see how the new Line Thickness selector works:

We are done. Phew! Now we can change line thickness, line style, line color, and fill color in our drawings!

Summary

In order to implement the line styles, thickness, color, and fills, we had to do the following:

Create a base ImageDropdown class and related classes
Use the base ImageDropdown to create selectors for line color and fill color.
Use the base ImageDropdown to create selector for line thickness and style.

Don't forget to check out the sample project over on GitHub!

In the next part of the series, we're going to implement undo/redo functionality, including creating a state manager to keep the changes made to the drawing canvas in memory. Stay tuned!

Happy Drawing!

Drawing with FabricJS and TypeScript Part 5: Deleting Objects

Matthew Jones — Thu, 14 May 2020 16:35:40 +0000

We've now completed our implementation for drawing simple objects in FabricJS, using our TypeScript models. Let's now work on how to remove objects from the canvas.

Lighter not included. Photo by Devin Avery / Unsplash

The Sample Project

As always, there's a sample project over on GitHub that contains the completed code for this series. Check it out!

Implementing the DeleteComponent

We're going to implement this delete functionality a bit backwards from the way we've implement other functionality: we're going to write the component first, then integrate it with the drawing editor.

Our component will exist in the toolbar, but needs to only be active when an object is selected; otherwise it should be disabled. Further, this isn't going to be the only component that changes the canvas: later in this series we're going to implement undo/redo functionality. So, we need a "base" class for all components that will do non-drawing functionality.

Chris termed these components ControlComponents, and implemented the following abstract class:

abstract class ControlComponent {
    target: string; //Selector for the component's render location
    cssClass: string; //CSS classes for icons
    hoverText: string; //Tooltip text
    canvassDrawer: DrawingEditor;
    handlers: { [key: string]: () => void };

    constructor(selector: string, classNames: string, altText: string, parent: DrawingEditor, handlers: { [key: string]: () => void }) {
        this.target = selector;
        this.cssClass = classNames;
        this.hoverText = altText;
        this.canvassDrawer = parent;
        this.render();
        this.handlers = handlers;
        this.attachEvents();
    }

    abstract render();

    attachEvents() {
        if (this.handlers['click'] != null) {
            $(this.target).click(this, () => {
                this.handlers['click']();
            });
        }

        if (this.handlers['change'] != null) {
            $(this.target).change(this, () => {
                this.handlers['change']();
            });
        }
    }
}

All of our non-drawing toolbar items will inherit from this abstract class.

Speaking of which, we now need such a class for the delete component. Here's the annotated code:

class DeleteComponent extends ControlComponent {
    constructor(target: string, parent: DrawingEditor) {
        super(
            target,
            "fa fa-trash-o", //CSS class for icons
            "Delete Selected Item", //Tooltip text
            parent,
            {
                //The component invokes a method 
                //on DrawingEditor to delete selected objects.
                'click': () => { parent.deleteSelected(); }
            });
    }

    //Render a disabled button with a trash can icon
    render() {
        const html = `<button id="${this.target.replace('#', '')}" title="${this.hoverText}" disabled class="btn btn-danger">
                        <i class="${this.cssClass}"></i>
                     </button>`;

        $(this.target).replaceWith(html);
    }

    //Enable the button
    //Will be called when a canvas object is selected
    enable() {
        var ele = document.getElementById(this.target.replace('#', ''));

        Object.assign(ele, {
            disabled: false
        });
    }

    //Disable the button
    //Will be called when no canvas objects are selected
    disable() {
        var ele = document.getElementById(this.target.replace('#', ''));

        Object.assign(ele, {
            disabled: true
        });
    }
}

With our component written, it's time to implement a few changes on the main DrawingEditor class.

Modifying the DrawingEditor

Our main DrawingEditor class now needs to react when canvas elements are selected, so it can enable or disable the delete button.

Here's the scenarios we want to react to:

First, if an item is selected in the canvas, enable the Delete button.
If no items are selected in the canvas, disable the Delete button.
If the user clicks the Delete key, delete the selected objects.

We can implement the first two scenarios by modifying the DrawingEditor class to enable/disable the delete button and implement the deleteSelected() method needed by our DeleteComponent.

class DrawingEditor {
    //...Properties and Constructor

    private initializeCanvasEvents() {
        //...Other events

        this.canvas.on('object:selected', (o) => {
            this.cursorMode = CursorMode.Select;
            //sets currently selected object
            this.object = o.target;

            //If the delete component exists, enable it
            if (this.components['delete'] !== undefined) {
                (this.components['delete'][0] as DeleteComponent).enable();
            }
        });

        this.canvas.on('selection:cleared', (o) => {
            //If the delete component exists, disable it
            if (this.components['delete'] !== undefined) {
                (this.components['delete'][0] as DeleteComponent).disable();
            }

            this.cursorMode = CursorMode.Draw;
        });
    }

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] 
                  = [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] 
                  = [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] 
                  = [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] 
                  = [new TriangleDisplayComponent(target, this)];
                break;
            case 'text':
                this.components[component] 
                  = [new TextDisplayComponent(target, this)];
                break;
            case 'polyline':
                this.components[component] 
                  = [new PolylineDisplayComponent(target, this)];
                break;
            //New component
            case 'delete':
                this.components[component] 
                  = [new DeleteComponent(target, this)];
                break;
        }
    }

    //...Other methods

    deleteSelected(): void {
        //Get currently-selected object
        const obj = this.canvas.getActiveObject();

        //Delete currently-selected object
        this.canvas.remove(this.canvas.getActiveObject());
        this.canvas.renderAll(); //Re-render the drawing in Fabric
    }

Modifying the Markup and Script

There's something little bit strange about FabricJS's Canvas object: it doesn't provide events for keydown or keypress, so we have to wire those events up against the page, and then call the appropriate methods in the DrawingEditor class.

Here's the markup changes and script changes we need to make in our Razor Page. Note that the delete button will sit by itself on the leftmost side of the toolbar:

<div class="row bg-secondary text-light">
    <div class="btn-toolbar">
        <div class="btn-group mr-2" role="group">
            <!-- New Component -->
            <div id="deleteComponent"></div>
        </div>
    </div>
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar">
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <div id="polylineDisplayComponent"></div>
                        <div id="lineDisplayComponent"></div>
                        <div id="rectangleDisplayComponent"></div>
                        <div id="ovalDisplayComponent"></div>
                        <div id="triangleDisplayComponent"></div>
                        <div id="textDisplayComponent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Note also that we need to implement a new listener event for "keydown" in the script below:

@section Scripts{
    //...Get scripts
    <script>
        var editor; //We now need to access the editor outside of the
                    //initialization method
        $(function () {
            //...Instantiate editor

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' },
                { id: '#rectangleDisplayComponent', type: 'rect' },
                { id: '#ovalDisplayComponent', type: 'oval' },
                { id: '#triangleDisplayComponent', type: 'tria' },
                { id: '#textDisplayComponent', type: 'text' },
                { id: '#polylineDisplayComponent', type: 'polyline' },
                //New component
                { id: '#deleteComponent', type: 'delete'}
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);
            $('#lineDisplayComponent').click();

            //New event, which listens for the delete key
            $("html").on('keydown', function (event) {
                const key = event.key;
                if (key == "Delete") {
                    editor.deleteSelected();
                }
            });
        });
    </script>
}

GIF Time!

Once the drawer, display component, markup, and script are updated, we can now delete objects on our canvas! Here's an example GIF:

Ta-da! We've completed the delete functionality for our drawing canvas!

Summary

To implement deletion of the selected object in our drawing canvas, we needed to:

Create a new abstract base component for a toolbar control.
Implement the abstract base component to create a Delete component.
Wire up the delete component to the DrawingEditor class.
Listen for the Delete key, and delete selected objects.

Don't forget to check out the sample project over on GitHub!

In the next part of this series, we will implement an undo/redo function, in which we keep track of the items being added to the canvas and can undo or redo them at any time!

Happy Drawing!

Drawing with FabricJS and TypeScript Part 4: Text and Freeform Lines

Matthew Jones — Thu, 07 May 2020 15:20:33 +0000

Let's continue adding useful tools to our FabricJS canvas by implementing text and freeform lines!

Maybe letter magnets would be a good toolbar item? Photo by Jason Leung / Unsplash

The Sample Project

As with all my code-heavy series, there is an example project over on GitHub that shows all the code we have developed and will include in this series. Check it out!

Text

Continuing from the previous post, let's create the drawer and display component classes for a text object. The below drawer uses the FabricJS Text object to represent text on the canvas.

class TextDrawer implements IObjectDrawer {
    drawingMode: DrawingMode = DrawingMode.Text;

    make(x: number, y: number, 
         options: fabric.IObjectOptions): Promise<fabric.Object> {
         //We will need to render a textbox for the text to draw
        const text = <HTMLInputElement>document.getElementById('textComponentInput');
        return new Promise<fabric.Object>(resolve => {
            resolve(new fabric.Text(text.value, {
                left: x,
                top: y,
                ...options
            }));
        });
    }

    resize(object: fabric.Text, x: number, y: number): Promise<fabric.Object> {
        object.set({
            left: x,
            top: y
        }).setCoords();

        return new Promise<fabric.Object>(resolve => {
            resolve(object);
        });
    }
}

Now, let's see the component:

class TextDisplayComponent extends DisplayComponent {

    constructor(target: string, parent: DrawingEditor) {
        const options = new DisplayComponentOptions();
        Object.assign(options, {
            altText: 'Text',
            classNames: 'fa fa-font',
            childName: 'textComponentInput'
        });
        super(DrawingMode.Text, target, parent, options);
    }

    render(): void {
        super.render();
        //We need to render a hidden textbox next to the text button.
        $(this.target).parent().append(`<input id="${this.childName}" class="col-sm-6 form-control hidden" />`);
    }

    //The two methods below, selectionUpdated and selectedChanged,
    //only exist on the base DisplayComponent class
    //because this TextDisplayComponent class needs them.

    //Show the textbox if the text button is selected
    selectionUpdated(newTarget: string) {
        $(newTarget).removeClass('hidden');
    }

    selectedChanged(componentName: string): void {
        //If the text button is selected, show the textbox
        if (componentName === this.target) {
            $(`#${this.childName}`).removeClass('hidden');
        }
        //Otherwise, hide the textbox.
        else {
            $(`#${this.childName}`).addClass('hidden').val('');
        }
    }
}

Finally, let's update the main DrawingEditor class, the Razor Page markup, and the script:

class DrawingEditor {
    //...Properties

    constructor(private readonly selector: string,
        //...Rest of constructor
        this.drawers = [
            new LineDrawer(),
            new RectangleDrawer(),
            new OvalDrawer(),
            new TriangleDrawer(),
            new TextDrawer()
        ];
    }

    //...Other methods

     addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] 
                  = [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] 
                  = [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] 
                  = [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] 
                  = [new TriangleDisplayComponent(target, this)];
                break;
            case 'text':
                //New component
                this.components[component] 
                  = [new TextDisplayComponent(target, this)];
                break;
        }
    }

<div class="row bg-secondary text-light">
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar">
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <div id="lineDisplayComponent"></div>
                        <div id="rectangleDisplayComponent"></div>
                        <div id="ovalDisplayComponent"></div>
                        <div id="triangleDisplayComponent"></div>
                        <!-- New Component -->
                        <div id="textDisplayComponent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    //Initialize scripts
    <script>
        $(function () {
            //Instantiate DrawingEditor

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' },
                { id: '#rectangleDisplayComponent', type: 'rect' },
                { id: '#ovalDisplayComponent', type: 'oval' },
                { id: '#triangleDisplayComponent', type: 'tria' },
                { id: '#textDisplayComponent', type: 'text' },
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);
            $('#lineDisplayComponent').click();
        });
    </script>
}

With all of these changes in place, we can now write text onto our canvas, as shown in this GIF:

Note that our implementation did not require us to change things like the text font, size, style, or color, and so I leave those kinds of improvements up to you, my dear readers.

Let's also take a few minutes to implement another useful FabricJS feature: polylines.

Freeform Lines (AKA Polylines)

"Freeform" lines are lines which are drawn freely onto the canvas: think using the pencil tool in Paint. FabricJS terms these "polylines" because in reality a "freeform" line consists of many tiny straight lines that combine to form what looks like curves. These straight lines are created by storing a list of ordinal points, between which lines are connected (essentially like playing a giant version of connect-the-dots).

As with Text, we need two parts: a drawer and a display component. Here's the drawer class:

class PolylineDrawer implements IObjectDrawer {
    drawingMode: DrawingMode = DrawingMode.Polyline;

    make(x: number, y: number, options: fabric.IObjectOptions, 
         rx?: number, ry?: number): Promise<fabric.Object> {
        return new Promise<fabric.Object>(resolve => {
            resolve(new fabric.Polyline(
                [{ x, y }],
                { ...options, fill: 'transparent' }
            ));
        });
    }

    resize(object: fabric.Polyline, x: number, y: number)
        : Promise<fabric.Object> {
        //Create and push a new Point for the Polyline
        object.points.push(new fabric.Point(x, y));
        const dim = object._calcDimensions();

        object.set({
            left: dim.left,
            top: dim.top,
            width: dim.width,
            height: dim.height,
            dirty: true,
            pathOffset: new fabric.Point(dim.left + dim.width / 2, dim.top + dim.height / 2)
        }).setCoords();

        return new Promise<fabric.Object>(resolve => {
            resolve(object);
        });
    }
}

And here's the display component:

class PolylineDisplayComponent extends DisplayComponent {
    constructor(target: string, parent: DrawingEditor) {
        const options = new DisplayComponentOptions();
        Object.assign(options, {
            altText: 'Pencil',
            classNames: 'fa fa-pencil',
            childName: null
        });
        super(DrawingMode.Polyline, target, parent, options);
    }
}

Just as with the earlier shape drawers and components, we need to modify the DrawingEditor class...

class DrawingEditor {
    //...Properties

    constructor(private readonly selector: string,
        //...Initialize canvas

        this.drawers = [
            new LineDrawer(),
            new RectangleDrawer(),
            new OvalDrawer(),
            new TriangleDrawer(),
            new TextDrawer(),
            new PolylineDrawer()
        ];
        //...Rest of constructor
    }

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] 
                    = [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] 
                    = [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] 
                    = [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] 
                    = [new TriangleDisplayComponent(target, this)];
                break;
            case 'text':
                this.components[component] 
                    = [new TextDisplayComponent(target, this)];
                break;
            //New component
            case 'polyline':
                this.components[component] 
                    = [new PolylineDisplayComponent(target, this)];
                break;
        }
    }
}

...as well as the markup and script on our Razor Page.

<div class="row bg-secondary text-light">
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar">
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <!-- New Component -->
                        <div id="polylineDisplayComponent"></div>
                        <div id="lineDisplayComponent"></div>
                        <div id="rectangleDisplayComponent"></div>
                        <div id="ovalDisplayComponent"></div>
                        <div id="triangleDisplayComponent"></div>
                        <div id="textDisplayComponent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    //Add scripts
    <script>
        var editor;
        $(function () {
            //Instantiate DrawingEditor

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' },
                { id: '#rectangleDisplayComponent', type: 'rect' },
                { id: '#ovalDisplayComponent', type: 'oval' },
                { id: '#triangleDisplayComponent', type: 'tria' },
                { id: '#textDisplayComponent', type: 'text' },
                //New component
                { id: '#polylineDisplayComponent', type: 'polyline' }
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);
            $('#lineDisplayComponent').click();

            //...Other methods
        });
    </script>
}

GIF Time!

All of this together allows us to draw freeform lines, as shown in the below GIF:

Ta-da! Now we have some very useful tools added to our FabricJS canvas toolbox!

Summary

Just like with the basic shapes, for both Text and Polylines we needed to implement a drawer and a display component. Those classes then needed to be wired up to the main DrawingEditor class, and into the Razor Page markup and script.

Don't forget to check out the sample project over on GitHub!

In the next part of this series, we will implement a toolbar button and hotkey functionality to delete objects from the canvas.

Happy Drawing!

Drawing with FabricJS and TypeScript Part 3: Basic Shapes

Matthew Jones — Mon, 04 May 2020 17:20:21 +0000

Now that we have a canvas and can draw straight lines, let's find out how to draw other basic shapes, as well as create a "toolbar" for the user so they can pick what kinds of shapes to draw.

Stars, fish, hearts, and buttons not included. Photo by Soraya Irving / Unsplash

The Sample Project

The sample project for this series is over on GitHub, and contains the complete codebase for the finished drawing canvas.

Initializing the Display Components

Before we can build more shape drawers, we first need a way to display the existing drawers in a "toolbar" so the user can select which one they want. We need a lot of pieces to make this work, so let's get started building them.

The first thing we need is a class that represents each displayed option. We are calling these classes "display components" and we need a base one from which all specific components can inherit. This class will need some properties that allow us to set up things like the CSS classes and icon displayed, as well as set the Drawing Mode.

Here's the annotated code for this base class, called DisplayComponent:

class DisplayComponent {
    drawingMode: DrawingMode; //Line, Rectangle, Oval, etc.
    target: string; //The selector for the HTML element 
                    //this Component will be rendered in
    hoverText: string; //The tooltip text
    svg: string; //The SVG for the component's icon
    cssClass: string; //CSS class for the FontAwesome 
                      //icon used by this display component
    childName: string; //Selector for the child element; 
                       //only used by text components.
    canvasDrawer: DrawingEditor;

    constructor(mode: DrawingMode, selector: string, parent: DrawingEditor, options: DisplayComponentOptions) {
        this.drawingMode = mode;
        this.target = selector; 
        this.cssClass = options.classNames;
        this.hoverText = options.altText;
        this.svg = options.svg;
        this.childName = options.childName;
        this.canvasDrawer = parent; 
        this.render();
        this.attachEvents();
    }

    //This method replaces the target HTML with the component's HTML.
    //The radio button is included to have Bootstrap use the correct styles.
    render() {
        const html = `<label id="${this.target.replace('#', '')}" class="btn btn-primary text-light " title="${this.hoverText}">
                        <input type="radio" name="options" autocomplete="off">
                        ${this.iconStr()}
                     </label>`;

        $(this.target).replaceWith(html);
    }

    private iconStr(): string {
        if (this.cssClass != null) {
            return `<i class="${this.cssClass}"></i>`;
        }
        else {
            return this.svg;
        }
    }

    //This method attaches the componentSelected event in DrawingEditor
    attachEvents() {
        const data = {
            mode: this.drawingMode,
            container: this.canvasDrawer,
            target: this.target
        };

        //When clicking the <label>, fire this event.
        $(this.target).click(data, function () {
            data.container.drawingMode = data.mode;
            data.container.componentSelected(data.target);
        });
    }

    selectedChanged(componentName: string) { }
}

class DisplayComponentOptions {
    altText: string;
    svg?: string;
    classNames?: string;
    childName?: string;
}

Because the icon's SVG format and the tooltip text are different per component, we extract them into the class DisplayComponentOptions.

We've already created the ability to draw straight lines in our previous post, so now we need a display component that the user can click on to draw a straight line.

First, let's extend the DisplayComponent class to create LineDisplayComponent:

class LineDisplayComponent extends DisplayComponent {
    constructor(target: string, parent: DrawingEditor) {
        const options = new DisplayComponentOptions();
        Object.assign(options, {
            altText: 'Line',
            svg: `<svg width="13px" height="15px" viewBox="2 0 13 17">
                    <line x1="0" y1="13" x2="13" y2="0" stroke="white" stroke-width="2px" />
                  </svg>`
        });
        super(DrawingMode.Line, target, parent, options);
    }
}

This class implements an SVG definition for the component's icon, and saves the alt text, before using super() to call the parent class DisplayComponent's constructor.

Showing the Display Components

We're halfway to being able to, ahem, display the display components. Now we need to make some changes to the main DrawingEditor class.

We want our DrawingEditor class (which, as a reminder, represents the drawing area as a whole, including our display components) to be able to initialize components at creation time. To do this, we're going to create two methods:

class DrawingEditor {
    //...Properties and Other Methods

    //Adds the list of components to this drawing area
    addComponents(componentList: [{ id: string, type: string }]) {
        componentList.forEach((item) => {
            this.addComponent(item.id, item.type);
        });
    }

    //Creates new classes for each included component
    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] = [new LineComponent(target, this)];
                break;
        }
    }
}

We also need to know which component is selected. You may recall the following line in the code for DisplayComponent:

$(this.target).children().first().click(data, function () {
    //...
    data.container.componentSelected(data.target);
});

The method componentSelected() needs to be implemented on DrawingEditor. We do that like this:

class DrawingEditor {
    //...Properties and Methods

    componentSelected(componentName: string) {
        //Deselect any objects on the canvas that are selected
        this.canvas.discardActiveObject();

        //FOREACH component in the drawing editor...
        for (var key in this.components) {

            // IF this component has a property with the passed-in name
            // THEN do nothing
            if (!this.components.hasOwnProperty(key)) continue;

            //OTHERWISE...
            const obj = this.components[key];

            //IF the component with the passed-in name
            //IS the component we expect
            if (obj[0].target === componentName) {
                //SET the drawing mode to the drawing mode
                //needed by the component
                this.drawingMode = obj[0].drawingMode;
            }

            //IF the method selectedChanged is defined on the component,
            //THEN call that method
            if (obj[0].selectedChanged !== undefined) {
                obj[0].selectedChanged(componentName);
            }
        }
    }
}

HTML and Script

We have one last piece we need to do to set up our first display component: we need to insert some HTML and some JavaScript on our Razor Page where we want to make a drawing.

<div class="row bg-secondary text-light">
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar"> <!--Drawing toolbar-->
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <!--The LineDisplayComponent will go here -->
                        <div id="lineDisplayComponent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row editorContainer">
    <div class="CanvasContainer">
        <div id="canvas"></div>
    </div>
</div>

@section Scripts{
    <script src="~/lib/fabric.js/fabric.min.js"></script>
    <script src="~/js/drawingEditor.js" asp-append-version="true"></script>
    <script>
        $(function () {
            //...calculate canvas height and width

            var editor = new DrawingEditor('canvas', 
                                           canvasHeight, canvasWidth);

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' }
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);

            //By default, select the LineDisplayComponent
            $('#lineDisplayComponent').click();
        });
    </script>
}

With all of this now written, we have a toolbar on our page that looks like this:

Which is great! But we don't have any other tools yet, so let's make some!

Rectangles

From this point on, for each drawing tool we need we must create both a "drawer" class (to draw the objects) and a "display component" class (to render the user-selectable control for that drawer).

Let's start adding basic shapes by first dealing with Rectangles. FabricJS provides us with a Rect class that represents this shape, so let's create a "drawer" class that can draw rectangles!

class RectangleDrawer implements IObjectDrawer {
    private origX: number;
    private origY: number;

    drawingMode: DrawingMode = DrawingMode.Rectangle;

    make(x: number, y: number, 
         options: fabric.IObjectOptions, 
         width?: number, height?: number)
            : Promise<fabric.Object> {
        this.origX = x;
        this.origY = y;

        return new Promise<fabric.Object>(resolve => {
            resolve(new fabric.Rect({
                left: x,
                top: y,
                width: width,
                height: height,
                fill: 'transparent',
                ...options
            }));
        });
    }

    resize(object: fabric.Rect, x: number, y: number): Promise<fabric.Object> {
        //Calculate size and orientation of resized rectangle
        object.set({
            originX: this.origX > x ? 'right' : 'left',
            originY: this.origY > y ? 'bottom' : 'top',
            width: Math.abs(this.origX - x),
            height: Math.abs(this.origY - y),
        }).setCoords();

        return new Promise<fabric.Object>(resolve => {
            resolve(object);
        });
    }
}

In order to use this drawer, we need to include it in the list of drawers available.

class DrawingEditor {
    //... Properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //...
        this.drawers = [
            new LineDrawer(),
            new RectangleDrawer() //New drawer
        ];
        //...
    }

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] = 
                    [new LineDisplayComponent(target, this)];
                break;
            case 'rect': //New component
                this.components[component] = 
                    [new RectangleDisplayComponent(target, this)];
                break;
        }
    }

    //...
}

Now, let's include the display component. Here's our new RectangleDisplayComponent class:

class RectangleDisplayComponent extends DisplayComponent {
    constructor(target: string, parent: DrawingEditor) {
        const options = new DisplayComponentOptions();
        Object.assign(options, {
            altText: 'Rectangle',
            classNames: 'fa fa-square-o',
            childName: null
        });
        super(DrawingMode.Rectangle, target, parent, options);
    }
}

Note that this display component uses a FontAwesome icon as the display icon, not an SVG element (which is what the earlier line display component used).

Now, on the Razor Page, we need to add the HTML element where this display component will be placed, and instantiate the display component in the toolbar:

<div class="row bg-secondary text-light">
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar">
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <div id="lineDisplayComponent"></div>
                        <!--New display component -->
                        <div id="rectangleDisplayComponent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    //...Script includes
    <script>
        $(function () {
            //...Instantiate drawing editor

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' },
                { id: '#rectangleDisplayComponent', type: 'rect' }
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);
            $('#lineDisplayComponent').click();
        });
    </script>
}

We now have a working rectangle tool, as shown in this GIF:

But we're not done yet! Let's build the tools for ovals!

Ovals

Here's the drawer for an oval, which uses the Fabric class Ellipse:

class OvalDrawer implements IObjectDrawer {
    private origX: number;
    private origY: number;

    drawingMode: DrawingMode = DrawingMode.Oval;

    make(x: number, y: number, options: fabric.IObjectOptions, rx?: number, ry?: number): Promise<fabric.Object> {
        this.origX = x;
        this.origY = y;

        return new Promise<fabric.Object>(resolve => {
            resolve(new fabric.Ellipse({
                left: x,
                top: y,
                rx: rx,
                ry: ry,
                fill: 'transparent',
                ...options
            }));
        });
    }

    resize(object: fabric.Ellipse, x: number, y: number): Promise<fabric.Object> {
        object.set({
            originX: this.origX > x ? 'right' : 'left',
            originY: this.origY > y ? 'bottom' : 'top',
            rx: Math.abs(x - object.left) / 2,
            ry: Math.abs(y - object.top) / 2
        }).setCoords();

        return new Promise<fabric.Object>(resolve => {
            resolve(object);
        });
    }
}

Now we need to create an OvalDisplayComponent class...

class OvalDisplayComponent extends DisplayComponent {
    constructor(target: string, parent: DrawingEditor) {
        const options = new DisplayComponentOptions();
        Object.assign(options, {
            altText: 'Oval',
            classNames: 'fa fa-circle-o',
            childName: null
        });
        super(DrawingMode.Oval, target, parent, options);
    }
}

With the drawer and display component created, we can update the DrawingEditor class to use them...

class DrawingEditor {
    //...Properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //...

        this.drawers = [
            new LineDrawer(),
            new RectangleDrawer(),
            new OvalDrawer()
        ];
        //...
    }

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] = 
                    [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] = 
                    [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] = 
                    [new OvalDisplayComponent(target, this)];
                break;
        }
    }

...as well as updating the markup and script on the Razor Page:

<div class="row bg-secondary text-light">
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar">
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <div id="lineDisplayComponent"></div>
                        <div id="rectangleDisplayComponent"></div>
                        <!-- New display component -->
                        <div id="ovalDisplayComponent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    //...Script imports
    <script>
        $(function () {
            //...Initialize drawing editor

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' },
                { id: '#rectangleDisplayComponent', type: 'rect' },
                { id: '#ovalDisplayComponent', type: 'oval' } //New
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);
            $('#lineDisplayComponent').click();
        });
    </script>
}

We can now draw ovals! Triangles are up next.

Triangles

First, the drawer:

class TriangleDrawer implements IObjectDrawer {
    private origX: number;
    private origY: number;

    drawingMode: DrawingMode = DrawingMode.Triangle;

    make(x: number, y: number, options: fabric.IObjectOptions, width?: number, height?: number): Promise<fabric.Object> {
        this.origX = x;
        this.origY = y;

        return new Promise<fabric.Object>(resolve => {
            resolve(new fabric.Triangle({
                left: x,
                top: y,
                width: width,
                height: height,
                fill: 'transparent',
                ...options
            }));
        });
    }

    resize(object: fabric.Triangle, x: number, y: number): Promise<fabric.Object> {
        object.set({
            originX: this.origX > x ? 'right' : 'left',
            originY: this.origY > y ? 'bottom' : 'top',
            width: Math.abs(this.origX - x),
            height: Math.abs(this.origY - y),
        }).setCoords();

        return new Promise<fabric.Object>(resolve => {
            resolve(object);
        });
    }
}

Note that the drawer for triangles is remarkably similar to the earlier RectangleDrawer class.

Let's now build the TriangleDisplayComponent class:

class TriangleDisplayComponent extends DisplayComponent {
    constructor(target: string, parent: DrawingEditor) {
        const options = new DisplayComponentOptions();
        Object.assign(options, {
            altText: 'Triangle',
            svg: `<svg width="13px" height="15px" viewBox="0 0 20 20">
                    <line x1="0" y1="20" x2="10" y2="0" 
                    stroke="white" stroke-width="2px" />
                    <line x1="10" y1="0" x2="20" y2="20" 
                    stroke="white" stroke-width="2px" />
                    <line x1="0" y1="20" x2="20" y2="20" 
                    stroke="white" stroke-width="2px" />
                  </svg>`,
        });
        super(DrawingMode.Triangle, target, parent, options);
    }
}

We can now update DrawingEditor:

class DrawingEditor {
    //...Properties

    constructor(private readonly selector: string,
        //...

        this.drawers = [
            new LineDrawer(),
            new RectangleDrawer(),
            new OvalDrawer(),
            new TriangleDrawer()
        ];
        //...
    }

    //...Other methods

    addComponent(target: string, component: string) {
        switch (component) {
            case 'line':
                this.components[component] = 
                    [new LineDisplayComponent(target, this)];
                break;
            case 'rect':
                this.components[component] = 
                    [new RectangleDisplayComponent(target, this)];
                break;
            case 'oval':
                this.components[component] = 
                    [new OvalDisplayComponent(target, this)];
                break;
            case 'tria':
                this.components[component] = 
                    [new TriangleDisplayComponent(target, this)];
                break;
        }
    }

Finally, let's update the script and markup:

<div class="row bg-secondary text-light">
    <div class="col-sm-11">
        <div class="row col-12">
            <div class="row drawingToolbar">
                <label class="col-form-label controlLabel">Tools:</label>
                <div class="d-inline-block">
                    <div class="btn-group btn-group-toggle" role="group" data-toggle="buttons" aria-label="Drawing Components">
                        <div id="lineDisplayComponent"></div>
                        <div id="rectangleDisplayComponent"></div>
                        <div id="ovalDisplayComponent"></div>
                        <!--New display component -->
                        <div id="triangleDisplayComponent"></div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    //...Include scripts
    <script>
        $(function () {
            //Initialize drawing editor

            //Create a list of available display components
            const components = [
                { id: '#lineDisplayComponent', type: 'line' },
                { id: '#rectangleDisplayComponent', type: 'rect' },
                { id: '#ovalDisplayComponent', type: 'oval' },
                { id: '#triangleDisplayComponent', type: 'tria' }
            ];

            //Add the components to the DrawingEditor, which will render them.
            editor.addComponents(components);
            $('#lineDisplayComponent').click();
        });
    </script>
}

Now we can draw both triangles and ovals, just like in this GIF:

With that, we've completed the basic shapes portion of this series!

Summary

In order to draw basic shapes on our FabricJS canvas, we needed to do the following:

Create a base class for all "display components" e.g. items on the toolbar.
Modify the DrawingEditor class to display a list of display components.
Modify the HTML markup to place the display components at the correct location.
Modify the script on the page to create and submit a list of known-valid components.
Create new child display component classes for lines, rectangles, ovals, and triangles.

Don't forget to check out the sample project over on GitHub! It contains the completed drawing control with all features implemented.

Next up in this series, we'll make a new component that will allow us to delete objects from the canvas, and implement hotkey functionality for the same. Stay tuned for Part 4 of Drawing with FabricJS and TypeScript!

Happy Drawing!

Drawing with FabricJS and TypeScript Part 2: Straight Lines

Matthew Jones — Mon, 04 May 2020 16:59:25 +0000

Our drawing canvas is now created, but it doesn't do anything yet. In this part of our series on creating a drawing canvas with FabricJS and TypeScript, we're going to refactor our drawing editor to draw what might be the simplest kind of shape: a straight line. Unfortunately, doing such a thing is not as easy as it sounds.

This is how a good night becomes a bad one. Photo by Anika Huizinga / Unsplash

Sample Project

As always, there's a sample project that contains the finished code for this series. Check it out!

Fabric Objects, Drawers, and DrawingMode

FabricJS has a concept of "objects" or two-dimensional things that have been placed onto the drawing canvas. In FabricJS, ALL 2D objects inherit from a base "Object" class. Objects can then implement certain events.

In this tutorial, we have a concept of "drawers" or classes that create objects. For each kind of object that can be drawn onto the canvas, we will have a "drawer" class which is responsible for creating the object, which in turn inherits from Fabric.Object. Each of these drawers should therefore implement an interface, one which allows them to "draw" the object they represent.

Thus, we have the IObjectDrawer interface:

interface IObjectDrawer {
    drawingMode: DrawingMode;
    //Makes the current object
    readonly make: (x: number, //Horizontal starting point
        y: number, //Vertical starting point
        options: fabric.IObjectOptions,
        x2?: number, //Horizontal ending point
        y2?: number) //Vertical ending point
            => Promise<fabric.Object>;
    //Resizes the object (used during the mouseOver event below)
    readonly resize: (object: fabric.Object, x: number, y: number) 
        => Promise<fabric.Object>;
}

Note that this interface expects the classes that implement its methods to return a Promise<fabric.Object> for both the make() and resize() methods.

Also note the drawingMode property. This is an enum which tells the drawing canvas which mode we are currently in (alternatively, which shape will be drawn on the next mouse event); this allows the user to draw a single shape or line multiple times without needing to set the drawer again. The values are as follows:

const enum DrawingMode {
    Line,
    Rectangle,
    Oval,
    Text,
    Polyline,
    Path
}

We will only be implementing the type Line in this post; the others will be implemented in later posts in this series.

The LineDrawer Class

Now we need to implement the actual class that will draw straight lines on our canvas. Here's the code for that:

class LineDrawer implements IObjectDrawer {
    drawingMode: DrawingMode = DrawingMode.Line;
    make(x: number, y: number, options: fabric.IObjectOptions,
         x2?: number, y2?: number)
        : Promise<fabric.Object> { 
        //Return a Promise that will draw a line
        return new Promise<fabric.Object>(resolve => {
            //Inside the Promise, draw the actual line from (x,y) to (x2,y2)
            resolve(new fabric.Line([x, y, x2, y2], options));
        });
    }

    resize(object: fabric.Line, x: number, y: number)
        : Promise<fabric.Object> {
        //Change the secondary point (x2, y2) of the object 
        //This resizes the object between starting point (x,y)
        //and secondary point (x2,y2), where x2 and y2 have new values.
        object.set({
            x2: x,
            y2: y
        }).setCoords();

        //Wrap the resized object in a Promise
        return new Promise<fabric.Object>(resolve => {
            resolve(object);
        });
    }
}

Note that we are using the Fabric.Line class, which is FabricJS's implementation of a straight line. Wherever possible, we will use the FabricJS definitions for our classes.

We now have a class that will draw straight lines for us! Now what we need to do is create events that our canvas can listen to, which will allow the user to actually draw the lines.

Canvas Properties

At this point in the tutorial, we need to make some changes to the root DrawingEditor object we created in Part 1.

The first thing we need to do is allow the drawing editor to keep track of which drawer class is currently being used, as well as all the possible drawer classes that can be selected. For this, we need to modify the DrawingEditor class like so:

class DrawingEditor {
    canvas: fabric.Canvas;

    private _drawer: IObjectDrawer; //Current drawer
    readonly drawerOptions: fabric.IObjectOptions; //Current drawer options
    private readonly drawers: IObjectDrawer[]; //All possible drawers
    private object: fabric.Object; //The object currently being drawn

    constructor(private readonly selector: string, 
                canvasHeight: number, canvasWidth: number) {
        $(`#${selector}`).replaceWith(`<canvas id="${selector}" height=${canvasHeight} width=${canvasWidth}> </canvas>`);

        //Create the Fabric canvas
        this.canvas = new fabric.Canvas(`${selector}`, { selection: false });

        //Create a collection of all possible "drawer" classes
        this.drawers = [
            new LineDrawer(),
        ];

        //Set the current "drawer" class
        this._drawer = this.drawers[DrawingMode.Line];

        //Set the default options for the "drawer" class, including 
        //stroke color, width, and style
        this.drawerOptions = {
            stroke: 'black',
            strokeWidth: 1,
            selectable: true,
            strokeUniform: true
        };
    }
}

These changes will allow us to modify which drawer is currently selected based on some kind of user input. You'll see specific demos of this in later parts of the series.

Let's now discuss exactly how we want the user to interface with the canvas in order to draw a line.

User Interactions and Events

For this tutorial series, we're going to specify that a user draws an object by clicking down the mouse button, dragging the cursor to a new location, and then releasing the button. In this way, our drawing canvas will behave like many other drawing applications, using a "click-drag-release" pattern.

That means we must define "events" for each part of this sequence: mouse down (click), mouse over while holding button (drag), mouse up (release). We also need to specify what happens if the user is clicking-and-dragging the mouse over an-already created object, where the already-created object should not be modified in any way.

The problem is the "dragging". We need a way to tell the canvas that the user is currently holding down the mouse button, and therefore certain interactions should be modified. We do this by adding a new property to the DrawingEditor class:

class DrawingEditor {
    canvas: fabric.Canvas;

    private _drawer: IObjectDrawer;
    readonly drawerOptions: fabric.IObjectOptions;
    private readonly drawers: IObjectDrawer[];
    private isDown: boolean; //Is user dragging the mouse?

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //...

        this.isDown = false; //To start, user is NOT dragging the mouse
    }
}

We can now start to define our events. First, we need a new method that will hold the events we are initializing:

class DrawingEditor {
    //... Properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //... Rest of constructor

        this.initializeCanvasEvents();
    }

    private initializeCanvasEvents() { } //New method
}

MouseDown Event (Click)

Let's create a method within the DrawingEditor class that represents what should happen when the mouse is clicked.

class DrawingEditor {
    //... Properties
    //... Constructor
    //... Other Methods

    private async mouseDown(x: number, y: number): Promise<any> {
        this.isDown = true; //The mouse is being clicked

        //Create an object at the point (x,y)
        this.object = await this.make(x, y);

        //Add the object to the canvas
        this.canvas.add(this.object);

        //Renders all objects to the canvas
        this.canvas.renderAll();
    }
}

When the user clicks the mouse within the canvas, the drawer should begin to draw an object starting from the point where the mouse was clicked. Fabric provides us with the MouseEvent class to represent mouse events, as well as a canvas.getPointer() method we can use to get the current position of the mouse pointer at the time of the event. By getting the MouseEvent and the pointer location, we can initialize an event and call our mouseDown() method like so:

class DrawingEditor {
    //... Properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        //... Rest of constructor

        this.initializeCanvasEvents();
    }

    private initializeCanvasEvents() {
        this.canvas.on('mouse:down', (o) => {
            const e = <MouseEvent>o.e;

            const pointer = this.canvas.getPointer(o.e);
            this.mouseDown(pointer.x, pointer.y);
        });
    }

    private async mouseDown(x: number, y: number): Promise<any> {
        this.isDown = true;

        this.object = await this.make(x, y);
        this.canvas.add(this.object);
        this.canvas.renderAll();
    }

    //Method which allows any drawer to Promise their make() function
    private async make(x: number, y: number): Promise<fabric.Object> {
        return await this._drawer.make(x, y, this.drawerOptions);
    }
}

MouseMove Event (Drag)

Now we need to handle the "drag" portion of click-drag-release. When the user is moving the mouse, we should resize the "dragged" object to the new size based on the current location of the pointer.

The implementation looks like:

private initializeCanvasEvents() {
    this.canvas.on('mouse:move', (o) => {
        const pointer = this.canvas.getPointer(o.e);
        this.mouseMove(pointer.x, pointer.y);
    });
}

private mouseMove(x: number, y: number): any {
    if (!this.isDown) {
        return; //If the user isn't holding the mouse button, do nothing
    }

    //Use the Resize method from the IObjectDrawer interface
    this._drawer.resize(this.object, x, y);
    this.canvas.renderAll();
}

MouseUp Event (Release)

Finally, in our mouseUp event, all we need to do is set isDown to false.

private initializeCanvasEvents() {
    //... Other events
    this.canvas.on('mouse:up', (o) => {
       this.isDown = false;
    });
}

Example Lines

With all of the events in place, we can now draw straight lines! Here's a GIF of this code in action:

Bug: Drawing Lines when Moving Objects

We've done quite a lot so far! However, there's a problem with our current implementation: while trying to drag an already-created object (a function which Fabric supports natively) we will accidentally draw another line! It looks like this:

We need to do some additional work to ensure this situation doesn't happen.

First, we need to keep track of what "mode" the cursor is in at any given time. This means we need to know if it is currently drawing or selecting an object. Hence, we need a new enumeration:

const enum CursorMode {
    Draw,
    Select
}

We also need our DrawingEditor object to keep track of the current CursorMode:

class DrawingEditor {
    private cursorMode: CursorMode;
    //... Other properties

    constructor(private readonly selector: string,
        canvasHeight: number, canvasWidth: number) {
        this.cursorMode = CursorMode.Draw;
        //..Rest of constructor
    }
}

The mouseDown() and mouseMove() functions need to be modified so that an object is not drawn if the cursor mode is Select:

private async mouseDown(x: number, y: number): Promise<any> {
    this.isDown = true;

    if (this.cursorMode !== CursorMode.Draw) {
        return;
    }

    this.object = await this.make(x, y);
    this.canvas.add(this.object);
    this.canvas.renderAll();
}

private mouseMove(x: number, y: number): any {
    if (!(this.cursorMode.valueOf() === CursorMode.Draw.valueOf() 
        && this.isDown)) {
        return;
    }
    this._drawer.resize(this.object, x, y);
    this.canvas.renderAll();
}

Finally, we need two new events: one in which when an object is selected the cursor mode is changed to Select; and one in which when the selected object is "cleared" (i.e. no longer selected) the cursor mode is reset to the default Draw.

private initializeCanvasEvents() {
    //... Other events

    this.canvas.on('object:selected', (o) => {
        this.cursorMode = CursorMode.Select;
        //sets currently selected object
        this.object = o.target;
    });

    this.canvas.on('selection:cleared', (o) => {
        this.cursorMode = CursorMode.Draw;
    });
}

GIF Time!
With all of this in place, we no longer draw lines when moving already created objects, as shown by this GIF:

Summary

In the second part of our Drawing with FabricJS and TypeScript series, we used our previously-created DrawingEditor object repesenting a canvas and refactored it to code up the ability to draw straight lines. In the process, we learned about "drawer" classes and mouse events, and which ones we needed to implement. We also encountered and fixed a bug that happened when dragging already-created lines.

Don't forget to check out the sample project over on GitHub!

In the next part of the series, we'll start working on drawers for basic shapes, including ovals and rectangles, as well as for text. We'll also need to work out a way for the user to select which drawer they want to use. For all of that, check out Part 3 of Drawing with FabricJS and TypeScript!

Happy Drawing!