Fix the editor's viewport size to match the level

js/main-editor.js

@@ -3,7 +3,7 @@ import * as c2g from './format-c2g.js';
 import { PrimaryView, DialogOverlay } from './main-base.js';
 import CanvasRenderer from './renderer-canvas.js';
 import TILE_TYPES from './tiletypes.js';
-import { mk, mk_svg, walk_grid } from './util.js';
+import { SVG_NS, mk, mk_svg, walk_grid } from './util.js';
 
 class EditorShareOverlay extends DialogOverlay {
     constructor(conductor, url) {
@@ -613,14 +613,13 @@ export class Editor extends PrimaryView {
 
         // FIXME need this in load_level which is called even if we haven't been setup yet
         this.connections_g = mk_svg('g');
+        // This SVG draws vectors on top of the editor, like monster paths and button connections
+        this.svg_overlay = mk_svg('svg.level-editor-overlay', {viewBox: '0 0 32 32'}, this.connections_g);
+        this.viewport_el.append(this.renderer.canvas, this.svg_overlay);
     }
 
     setup() {
         // Level canvas and mouse handling
-        // This SVG draws vectors on top of the editor, like monster paths and button connections
-        // FIXME change viewBox in load_level, can't right now because order of ops
-        this.svg_overlay = mk_svg('svg.level-editor-overlay', {viewBox: '0 0 32 32'}, this.connections_g);
-        this.viewport_el.append(this.renderer.canvas, this.svg_overlay);
         this.mouse_op = null;
         this.viewport_el.addEventListener('mousedown', ev => {
             this.cancel_mouse_operation();
@@ -769,6 +768,7 @@ export class Editor extends PrimaryView {
     load_level(stored_level) {
         // TODO support a game too i guess
         this.stored_level = stored_level;
+        this.update_viewport_size();
 
         // XXX need this for renderer compat.  but i guess it's nice in general idk
         this.stored_level.cells = [];
@@ -803,6 +803,11 @@ export class Editor extends PrimaryView {
         }
     }
 
+    update_viewport_size() {
+        this.renderer.set_viewport_size(this.stored_level.size_x, this.stored_level.size_y);
+        this.svg_overlay.setAttribute('viewBox', `0 0 ${this.stored_level.size_x} ${this.stored_level.size_y}`);
+    }
+
     select_tool(tool) {
         if (tool === this.current_tool)
             return;

js/renderer-canvas.js

@@ -11,7 +11,6 @@ export class CanvasRenderer {
         // to do so, but then we wouldn't make a canvas so it couldn't be
         // hooked, yadda yadda
         if (fixed_size) {
-            this.viewport_is_fixed = true;
             this.viewport_size_x = fixed_size;
             this.viewport_size_y = fixed_size;
         }
@@ -25,6 +24,7 @@ export class CanvasRenderer {
         this.ctx = this.canvas.getContext('2d');
         this.viewport_x = 0;
         this.viewport_y = 0;
+        this.viewport_dirty = false;
         this.use_rewind_effect = false;
     }
 
@@ -33,6 +33,13 @@ export class CanvasRenderer {
         // TODO update viewport size...  or maybe Game should do that since you might be cheating
     }
 
+    // Change the viewport size.  DOES NOT take effect until the next redraw!
+    set_viewport_size(x, y) {
+        this.viewport_size_x = x;
+        this.viewport_size_y = y;
+        this.viewport_dirty = true;
+    }
+
     cell_coords_from_event(ev) {
         let rect = this.canvas.getBoundingClientRect();
         let scale_x = rect.width / this.canvas.width;
@@ -67,6 +74,14 @@ export class CanvasRenderer {
             return;
         }
 
+        if (this.viewport_dirty) {
+            this.viewport_dirty = false;
+            this.canvas.setAttribute('width', this.tileset.size_x * this.viewport_size_x);
+            this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y);
+            this.canvas.style.setProperty('--viewport-width', this.viewport_size_x);
+            this.canvas.style.setProperty('--viewport-height', this.viewport_size_y);
+        }
+
         let tic = (this.level.tic_counter ?? 0) + tic_offset;
         let tw = this.tileset.size_x;
         let th = this.tileset.size_y;

js/util.js

@@ -28,9 +28,10 @@ export function mk(tag_selector, ...children) {
     return _mk(el, children);
 }
 
+export const SVG_NS = 'http://www.w3.org/2000/svg';
 export function mk_svg(tag_selector, ...children) {
     let [tag, ...classes] = tag_selector.split('.');
-    let el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    let el = document.createElementNS(SVG_NS, tag);
     el.classList = classes.join(' ');
     return _mk(el, children);
 }

style.css

@@ -913,10 +913,9 @@ main.--has-demo .demo-controls {
 #editor svg.level-editor-overlay {
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
-    /* FIXME get real size */
+    right: 0;
-    width: 1024px;
-    height: 1024px;
     /* allow clicks to go through us! */
     pointer-events: none;