Further optimize the loading of large scenes

Entities are only selected after creation if requested - this was
taking a lot of time, and was pointless. The tick-drawing function
doesn't read calculated styles as much now, but it still forces
a reflow when setting the font, weirdly.

macrovision.js

@@ -158,10 +158,18 @@ function updateSizes(dirtyOnly = false) {
 }
 
 function drawScale() {
+    const canvas = document.querySelector("#display");
+
+    /** @type {CanvasRenderingContext2D} */
+
+    const ctx = canvas.getContext("2d");
+    const clientHeight = canvasHeight;
+    const clientWidth = canvasWidth;
+
     function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx, pixelsPer, heightPer) {
         let total = heightPer.clone();
         total.value = 0;
-        for (let y = ctx.canvas.clientHeight - 50; y >= 50; y -= pixelsPer) {
+        for (let y = clientHeight - 50; y >= 50; y -= pixelsPer) {
             drawTick(ctx, 50, y, total);
             total = math.add(total, heightPer);
         }
@@ -179,34 +187,26 @@ function drawScale() {
 
         ctx.beginPath();
         ctx.moveTo(x + 20, y);
-        ctx.lineTo(ctx.canvas.clientWidth - 70, y);
+        ctx.lineTo(clientWidth - 70, y);
         ctx.strokeStyle = "#aaaaaa";
         ctx.stroke();
 
         ctx.beginPath();
-        ctx.moveTo(ctx.canvas.clientWidth - 70, y);
-        ctx.lineTo(ctx.canvas.clientWidth - 50, y);
+        ctx.moveTo(clientWidth - 70, y);
+        ctx.lineTo(clientWidth - 50, y);
         ctx.strokeStyle = "#000000";
         ctx.stroke();
 
-        const oldFont = ctx.font;
-        ctx.font = 'normal 24pt coda';
         ctx.fillStyle = "#dddddd";
 
         ctx.beginPath();
         ctx.fillText(value.format({ precision: 3 }), x + 20, y + 35);
 
-        ctx.font = oldFont;
         ctx.strokeStyle = oldStroke;
         ctx.fillStyle = oldFill;
     }
-    const canvas = document.querySelector("#display");
-
-    /** @type {CanvasRenderingContext2D} */
 
-    const ctx = canvas.getContext("2d");
-
-    let pixelsPer = (ctx.canvas.clientHeight - 100) / config.height.toNumber();
+    let pixelsPer = (clientHeight - 100) / config.height.toNumber();
 
     heightPer = 1;
 
@@ -226,16 +226,18 @@ function drawScale() {
     heightPer = math.unit(heightPer, config.height.units[0].unit.name)
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.scale(1, 1);
-    ctx.canvas.width = canvas.clientWidth;
-    ctx.canvas.height = canvas.clientHeight;
+    ctx.canvas.width = clientWidth;
+    ctx.canvas.height = clientHeight;
+
+    ctx.font = 'normal 24pt coda';
 
     ctx.beginPath();
     ctx.moveTo(50, 50);
-    ctx.lineTo(50, ctx.canvas.clientHeight - 50);
+    ctx.lineTo(50, clientHeight - 50);
     ctx.stroke();
     ctx.beginPath();
-    ctx.moveTo(ctx.canvas.clientWidth - 50, 50);
-    ctx.lineTo(ctx.canvas.clientWidth - 50, ctx.canvas.clientHeight - 50);
+    ctx.moveTo(clientWidth - 50, 50);
+    ctx.lineTo(clientWidth - 50, clientHeight - 50);
     ctx.stroke();
 
     drawTicks(ctx, pixelsPer, heightPer);
@@ -847,7 +849,7 @@ function removeEntity(element) {
 
 
 }
-function displayEntity(entity, view, x, y) {
+function displayEntity(entity, view, x, y, selectEntity=false) {
     const box = document.createElement("div");
     box.classList.add("entity-box");
 
@@ -919,7 +921,8 @@ function displayEntity(entity, view, x, y) {
         fitWorld();
     }
 
-    select(box);
+    if (selectEntity)
+        select(box);
 
     entity.dirty = false;
 }
@@ -1302,7 +1305,7 @@ function prepareEntities() {
         button.innerText = "Create";
         button.addEventListener("click", e => {
             const newEntity = entityList[select.value].constructor()
-            displayEntity(newEntity, newEntity.defaultView, 0.5, 1);
+            displayEntity(newEntity, newEntity.defaultView, 0.5, 1, true);
         });
 
         const categoryOption = document.createElement("option");