Set mouse cursor in the viewport based on tool state

[Keavon]

Add a FrontendMessage to set the cursor to an enum value with variants like Default, ZoomIn, ZoomOut, Grabbing, and Crosshair. Then apply the CSS cursor rule and have the document viewport <div class="canvas" ref="canvas"> apply the cursor style property like <div class="canvas" ref="canvas" :style="{ cursor: canvasCursor }"> where the default cursor is the JS undefined value (so Vue applies no style value).

The Navigate tool should display ZoomIn by default since LMB clicking causes a zoom in operation, and LMB dragging zooms in and out. While holding the Shift modifier, switch to the ZoomOut cursor since LMB clicking with that held down zooms out. When MMB dragging, switch to the Grabbing cursor (both in the Navigate tool and the global behavior). For rotating the document, that can stay the default cursor until we design a custom SVG cursor for that (and probably all icons but the default cursor icon).

The shape drawing tools (Line, Rectangle, Ellipse, and Shape) should all get the Crosshair cursor.

The Select, Path, Pen, Eyedropper, Fill, and other future tools will eventually get their own SVG icons also. @Keavon needs to design those in a format that's optimized for a mouse cursor.

Ideally, the cursor should stay the same when the mouse leaves the viewport .canvas element while a drag is occurring. See this for how.

[Keavon]

A helpful resource for including the SVG code in the CSS: https://gist.github.com/indrekpaas/4d6dfa5c29da805219d4149352c4703b