| @@ -1032,9 +1032,15 @@ function updateSizes(dirtyOnly = false) { | |||
| } | |||
| }); | |||
| let zIndex = ordered.length; | |||
| let zIndex = ordered.length + 1; | |||
| let groundSet = false; | |||
| ordered.forEach((entity) => { | |||
| if (!groundSet && entity[1].priority < 0) { | |||
| document.querySelector("#ground").style.zIndex = zIndex; | |||
| zIndex -= 1; | |||
| groundSet = true; | |||
| } | |||
| const element = document.querySelector("#entity-" + entity[0]); | |||
| element.style.zIndex = zIndex; | |||
| if (!dirtyOnly || entity[1].dirty) { | |||
| @@ -1042,8 +1048,13 @@ function updateSizes(dirtyOnly = false) { | |||
| entity[1].dirty = false; | |||
| } | |||
| zIndex -= 1; | |||
| }); | |||
| if (!groundSet) { | |||
| document.querySelector("#ground").style.zIndex = zIndex; | |||
| } | |||
| document.querySelector("#ground").style.top = | |||
| pos2pix({ x: 0, y: 0 }).y + "px"; | |||
| @@ -6318,9 +6329,21 @@ function importScene(data) { | |||
| updateSizes(); | |||
| } | |||
| function renderGround(ctx) { | |||
| if (config.groundKind !== "none") { | |||
| ctx.fillStyle = backgroundColors[config.groundKind]; | |||
| ctx.fillRect( | |||
| 0, | |||
| pos2pix({ x: 0, y: 0 }).y, | |||
| canvasWidth + 100, | |||
| canvasHeight | |||
| ); | |||
| } | |||
| } | |||
| function renderToCanvas() { | |||
| const ctx = document.querySelector("#display").getContext("2d"); | |||
| let groundDrawn = false; | |||
| Object.entries(entities) | |||
| .sort((ent1, ent2) => { | |||
| z1 = document.querySelector("#entity-" + ent1[0]).style.zIndex; | |||
| @@ -6328,6 +6351,10 @@ function renderToCanvas() { | |||
| return z1 - z2; | |||
| }) | |||
| .forEach(([id, entity]) => { | |||
| if (entity.priority >= 0 && !groundDrawn) { | |||
| renderGround(ctx); | |||
| groundDrawn = true; | |||
| } | |||
| element = document.querySelector("#entity-" + id); | |||
| img = element.querySelector("img"); | |||
| @@ -6359,6 +6386,10 @@ function renderToCanvas() { | |||
| ctx.filter = oldFilter; | |||
| }); | |||
| if (!groundDrawn) { | |||
| renderGround(ctx); | |||
| } | |||
| ctx.save(); | |||
| ctx.resetTransform(); | |||
| ctx.drawImage(document.querySelector("#rulers"), 0, 0); | |||
| @@ -6375,16 +6406,6 @@ function generateScreenshot(callback) { | |||
| /** @type {CanvasRenderingContext2D} */ | |||
| const ctx = document.querySelector("#display").getContext("2d"); | |||
| if (config.groundKind !== "none") { | |||
| ctx.fillStyle = backgroundColors[config.groundKind]; | |||
| ctx.fillRect( | |||
| 0, | |||
| pos2pix({ x: 0, y: 0 }).y, | |||
| canvasWidth + 100, | |||
| canvasHeight | |||
| ); | |||
| } | |||
| renderToCanvas(); | |||
| ctx.resetTransform(); | |||