diff --git a/js/main-editor.js b/js/main-editor.js index cf17622..0c47667 100644 --- a/js/main-editor.js +++ b/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; diff --git a/js/renderer-canvas.js b/js/renderer-canvas.js index 8fbd507..8ee4416 100644 --- a/js/renderer-canvas.js +++ b/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; diff --git a/js/util.js b/js/util.js index c738629..95ea223 100644 --- a/js/util.js +++ b/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); } diff --git a/style.css b/style.css index 6232bba..843bb4a 100644 --- a/style.css +++ b/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 */ - width: 1024px; - height: 1024px; + right: 0; /* allow clicks to go through us! */ pointer-events: none;