Add Origin Marker

[Craftidore]

Adds an origin circle as requested in #394 .

This is an initial functional implementation to make sure I'm on the right track here.
I stole most of the implementation from shapes/variants/circle.ts.

Adjustments needed before it's ready to merge:

• DM Setting/Location Setting for whether to show origin
• DM Setting/Location Setting for origin circle color (and radius?)
• DM Setting/Location Setting for whether to show Players the origin circle

Questions for you about preferred implementation:

• Should origin circle be on its own layer, or is it fine to put it in the grid layer?
  • I'm assuming it does need to be its own layer, since the entire grid layer is hidden upon disabling the grid.
• This is my first time working with an html canvas, so some questions:
  • How concerned should I be about resetting the ctx to its initial state after finishing my drawing? For example, I'm remembering then resetting fillState after drawing, but that's redundant if your code doesn't assume that.
  • When you call a draw function, after calling a setTransform, and that draw function calls setTransform then resetTransform, does that preserve the initial transform like a push/pop action, or does it full reset the transform? If the latter, how should I handle this instead?
• Do you want the grid to bleed through the origin marker?

[Kruptein]

• Should origin circle be on its own layer, or is it fine to put it in the grid layer?

It should not need its own layer as that would be pretty heavy for just 1 shape.

My first instinct was to say that it should indeed be on the grid layer, but that does also mean that it will be hidden behind fog. For DMs this is usually not a big deal as they generally will have some transparency on the fog. So it mostly depends on whether you want players to be able to see the origin. We could do it on the fow layer instead, ensuring that it's always visible, but then it will also appear on top of any shapes which also sounds weird, so the grid layer seems fine to me.

• I'm assuming it does need to be its own layer, since the entire grid layer is hidden upon disabling the grid.

We can modify the logic to hide the full layer only when nothing has to be rendered (i.e. no grid and no origin).

• This is my first time working with an html canvas, so some questions:

  • How concerned should I be about resetting the ctx to its initial state after finishing my drawing? For example, I'm remembering then resetting fillState after drawing, but that's redundant if your code doesn't assume that.

You don't have to actively reset most ctx properties, it's assumed that all code configures the fill and stroke styles to something relevant for their use. The only exception I think is if you modify the globalCompositeOperation, in which case you might have to reset to the original value depending on where in the code it occurs.

• When you call a draw function, after calling a setTransform, and that draw function calls setTransform then resetTransform, does that preserve the initial transform like a push/pop action, or does it full reset the transform? If the latter, how should I handle this instead?

resetTransform resets to the identity matrix, setTransform fully overwrites the matrix, so no push/pop is present here. For those operations you should call .save and later .restore.

That said I'm not sure why it's relevant, in your current code you don't call any other draw functions except builtin canvas functions, so the transform you're setting is the only transform present.

It's also actually not really necessary to change the transform. The regular shape draw function sets a transform because for shapes we operate under a rotation and it's just way easier to reason in this frame of reference when the (0, 0) coord is at the center of the shape. For simpler cases like here where there is no complexity of rotation, we can generally reason in the normal global transform pretty easily. (changing transform comes with a small cost, though it's rather small)

• Do you want the grid to bleed through the origin marker?

I have no strong opinion on this :p

I'm personally not really sure if a circle is super clear as the origin symbol, some specific icon might be clearer. But at the same time I don't really expect to use it myself, so this might be good enough for what people want. In which case there is no need to over-engineer it.

[Craftidore]

Thank you! I should have an update sometime around the middle of next week.

[develroo]

I'm personally not really sure if a circle is super clear as the origin symbol, some specific icon might be clearer. But at the same time I don't really expect to use it myself, so this might be good enough for what people want. In which case there is no need to over-engineer it.

FWIW Common origin markers are like this

Though obviously it does not need to look so fancy.

[Craftidore]

Hmmmm.... I do think that would convey things better than a circle. I'll have to check and see if the project is already using an icon pack anywhere, and if so I'll see about lifting something from that. Right off the bat, there's this lucide dev icon, and I'm sure other icon packs have something similar.

My initial estimates on when I would have time to work on this got really thrown off due to some medical things, so no eta, but I hope to have something kind of soon.

[Kruptein]

PA uses the fontawesome base icon set in general. There is a specialized shape (https://github.com/Kruptein/PlanarAlly/blob/dev/client/src/game/shapes/variants/fontAwesomeIcon.ts) you can use to draw FA icons straight to the canvas. (You might have to update fa.ts if you add a new icon though)

[Craftidore]

Forgot pushing triggered tests.
Anyway, here's what I've got so far:

(fill red, stroke black, stroke-width 10)

Before this is ready to merge, I plan to add the following:

• DM Settings:
  • Show/Hide origin
  • Set origin fill color
• Behavior:
  • Make the font icon url cache respect the color and strokewidth options
  • Don't show origin to players
  • Disabling grid shouldn't hide origin marker (currently changing the setting to no-grid hides origin, but loading the game with the grid already off does not).

I can't really think of a reason to have an option to show origin to players, at least not a reason that wouldn't be solved by the GM just putting something where the origin icon is.

Code thoughts:

• I've added the SvgDisplayOverrides type to fontAwesomeIcon.ts; not sure if there is a better location to put this.
• FontAwesomeIcon expects a top-left coordinate and a width, then auto-calculates the height. However, I need to place the icon based on the center of its base, so I'm left forced to use hardcoded values for the top-left offset. I don't like this, but changing it seems like it would require rewriting the FontAwesomeIcon class.
• The icon itself looks like the top and bottom are slightly cut off & flat. Not entirely sure why, I'm assuming it has something to do with how FontAwesomeIcon displays icons, and consider fixing that outside the scope of this.

[Craftidore]

Ok, another thought: Maybe the icon should be bigger. If you zoom out the last or second to last zoom level, you can't see it at all, which is a problem. If I up the size to 40, it becomes barely visible at max zoom level.

That makes it kinda large at lesser zoom levels though. I dunno how intrusive that feels.

[Kruptein]

By default shapes size along with the zoom level. You can however pass a third parameter to the draw function to set a custom width/height which will be fixed at all zoom levels. You could try and see how that feels.

[rexy712]

I'm personally not really sure if a circle is super clear as the origin symbol, some specific icon might be clearer.

I would advocate for one of these icons, but that's just my taste. These are fontawesome location-crosshairs and location-dot.

Do you want the grid to bleed through the origin marker?

My vote would be for yes. Making the origin mark slightly transparent in general would be nice, so that the piece of a map underneath isn't entirely obscured by it.

[Craftidore]

Sounds good. I think I'll do location-dot unless somebody else has a good argument for a different one. And you make a good point about transparency.

[Craftidore]

I kinda forgot to answer this (feel free to ping me if you think I forgot).
#1707

Poke, @Kruptein, I think this is ready for review.

[Kruptein]

I kinda forgot to answer this (feel free to ping me if you think I forgot).
#1707

Poke, @Kruptein, I think this is ready for review.

Just letting you know that I've seen the PRs. I'm waiting with reviewing/merging these until I've published a new release as otherwise it keeps getting postponed :p