Stub out drawing connections in the editor

js/format-util.js

@@ -26,6 +26,14 @@ export class StoredLevel {
         this.custom_cloner_wiring = {};
     }
 
+    scalar_to_coords(n) {
+        return [n % this.size_x, Math.floor(n / this.size_x)];
+    }
+
+    coords_to_scalar(x, y) {
+        return x + y * this.size_x;
+    }
+
     check() {
     }
 }

js/main.js

@@ -8,7 +8,7 @@ import { Level } from './game.js';
 import CanvasRenderer from './renderer-canvas.js';
 import { Tileset, CC2_TILESET_LAYOUT, LL_TILESET_LAYOUT, TILE_WORLD_TILESET_LAYOUT } from './tileset.js';
 import TILE_TYPES from './tiletypes.js';
-import { random_choice, mk, promise_event, fetch, walk_grid } from './util.js';
+import { random_choice, mk, mk_svg, promise_event, fetch, walk_grid } from './util.js';
 
 const PAGE_TITLE = "Lexy's Labyrinth";
 // Stackable modal overlay of some kind, usually a dialog
@@ -1046,11 +1046,19 @@ class Editor extends PrimaryView {
 
         // FIXME don't hardcode size here, convey this to renderer some other way
         this.renderer = new CanvasRenderer(this.conductor.tileset, 32);
+
+        // FIXME need this in load_level which is called even if we haven't been setup yet
+        this.connections_g = mk_svg('g');
     }
 
     setup() {
         // Level canvas and mouse handling
-        this.root.querySelector('.level').append(this.renderer.canvas);
+        // 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.root.querySelector('.level').append(
+            this.renderer.canvas,
+            this.svg_overlay);
         this.mouse_mode = null;
         this.mouse_button = null;
         this.mouse_cell = null;
@@ -1289,6 +1297,16 @@ class Editor extends PrimaryView {
             row.push(cell);
         }
 
+        // Load connections
+        for (let [src, dest] of Object.entries(this.stored_level.custom_trap_wiring)) {
+            let [sx, sy] = this.stored_level.scalar_to_coords(src);
+            let [dx, dy] = this.stored_level.scalar_to_coords(dest);
+            this.connections_g.append(
+                mk_svg('rect.overlay-cxn', {x: sx, y: sy, width: 1, height: 1}),
+                mk_svg('line.overlay-cxn', {x1: sx + 0.5, y1: sy + 0.5, x2: dx + 0.5, y2: dy + 0.5}),
+            );
+        }
+
         this.renderer.set_level(stored_level);
         if (this.active) {
             this.renderer.draw();

js/util.js

@@ -2,10 +2,7 @@ export function random_choice(list) {
     return list[Math.floor(Math.random() * list.length)];
 }
 
-export function mk(tag_selector, ...children) {
+function _mk(el, children) {
-    let [tag, ...classes] = tag_selector.split('.');
-    let el = document.createElement(tag);
-    el.classList = classes.join(' ');
     if (children.length > 0) {
         if (!(children[0] instanceof Node) && children[0] !== undefined && typeof(children[0]) !== "string" && typeof(children[0]) !== "number") {
             let [attrs] = children.splice(0, 1);
@@ -18,6 +15,20 @@ export function mk(tag_selector, ...children) {
     return el;
 }
 
+export function mk(tag_selector, ...children) {
+    let [tag, ...classes] = tag_selector.split('.');
+    let el = document.createElement(tag);
+    el.classList = classes.join(' ');
+    return _mk(el, children);
+}
+
+export function mk_svg(tag_selector, ...children) {
+    let [tag, ...classes] = tag_selector.split('.');
+    let el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    el.classList = classes.join(' ');
+    return _mk(el, children);
+}
+
 export function promise_event(element, success_event, failure_event) {
     let resolve, reject;
     let promise = new Promise((res, rej) => {

style.css

@@ -576,8 +576,26 @@ main.--has-demo .demo-controls {
 
 #editor .level {
     grid-area: level;
+    position: relative;
     overflow: auto;
 }
+#editor .level-editor-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /* FIXME get real size */
+    width: 1024px;
+    height: 1024px;
+}
+#editor .level-editor-overlay rect.overlay-cxn {
+    stroke-width: 0.0625;
+    stroke: red;
+    fill: none;
+}
+#editor .level-editor-overlay line.overlay-cxn {
+    stroke-width: 0.0625;
+    stroke: red;
+}
 
 #editor .controls {
     grid-area: controls;