diff --git a/macrovision.js b/macrovision.js index 90e281f2..79fb17c3 100644 --- a/macrovision.js +++ b/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");