Add data- attributes to configure behaviour

[dave-artificial-agency]

Hello, what do you think about implementing some data- attributes that can be set on the HTML canvas, to allow klee users to set some configuration.

Use case: I have found benefit from having our klee blueprints behave in a few ways that are different from the defaults:

• Start the camera position at the top-left corner of the Blueprint, rather than in the middle
• Adjust the camera starting position down a bit (e.g. 150 pixels), because we have added some UI buttons and controls above the canvas to let users zoom, pan, and control what they see.

My first goal is to not affect any of the default klee behaviour, so that everything works exactly the same for users who don't care about this.
But it is nice to allow users to set some config options if they want.
I have implemented that here using HTML data- attributes.

Example usage:

<canvas id="{canvas_id}"
	class="klee"
	width="{width}"
	height="{height}"
	data-top-left-x="{min_x}"
	data-top-left-y="{min_y}"
	data-camera-position="top-left"
	data-camera-position-height-offset="{UI_HEIGHT_OFFSET_PX}"
	>
{blueprint_source_text}
</canvas>

Tests:

• By default the canvas starts in the center of the blueprint, and zooms in + out at center
• If data-camera-position="top-left": it starts in top left, zooms near where you are
• If data-camera-position-height-offset provided the UI adjusts down that many pixels for starting + return position
• If data-top-left-x and data-top-left-y are provided the canvas reads and uses supplied values

[dave-artificial-agency]

This branch is based off the add-camera-zoom branch from #10 .
GitHub won't allow me to create a PR against that branch, since it exists in my repo not this repo.
But the first four commits are the same.