Implement constrained click and drag that doesn't leave spaces

[KenCoder]

Closes #240

[KenCoder]

I first had the constrain logic inside draggingCreateUpdateFn , but the problem is that the paint container takes its location directly from gridData, so all the position related things (like the hovering cursor) are wrong. It would also require modifying placeEntityContainer everywhere to take an optional position. And even then, things like checkBuildable use the current position so I worry it would require a lot of tweaking. That seemed uglier and riskier but I can bring it back if you want to see what it's like.

Also for the update logic it seemed like it might matter that the x16, y16, x32 and y32 variables be consistent. Your code does not step the x16 variables. Note that even though the positions are passed as part of the update event, many handlers look back at gridData to get the position in the handler (this code for example):

    protected setNewPosition(size: IPoint): void {
        if (size.x % 2 === 0) {
            const npx = this.bpc.gridData.x16 * 16
            this.x = npx + (npx % 32 === 0 ? 0 : 16)
        } else {
            this.x = this.bpc.gridData.x32 * 32 + 16
        }

        if (size.y % 2 === 0) {
            const npy = this.bpc.gridData.y16 * 16
            this.y = npy + (npy % 32 === 0 ? 0 : 16)
        } else {
            this.y = this.bpc.gridData.y32 * 32 + 16
        }
    }

My idea was that if it "looked" to the all code like the user just happened to drag the mouse in a horizontal line that is slow enough to hit every point, then everything would just work (which it did). Having gridData made this super easy.

[KenCoder]

I fixed the issue with the editor not opening - thanks!