From 0535cbc0bf0bff2f795260f4f1234a853f31d151 Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Sun, 20 Sep 2020 21:17:18 -0600
Subject: [PATCH] Stub out drawing connections in the editor

---
 js/format-util.js |  8 ++++++++
 js/main.js        | 22 ++++++++++++++++++++--
 js/util.js        | 19 +++++++++++++++----
 style.css         | 18 ++++++++++++++++++
 4 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/js/format-util.js b/js/format-util.js
index 740f860..b97ad85 100644
--- a/js/format-util.js
+++ b/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() {
     }
 }
diff --git a/js/main.js b/js/main.js
index b2df351..6b6958b 100644
--- a/js/main.js
+++ b/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();
diff --git a/js/util.js b/js/util.js
index 9ca5486..2c5277a 100644
--- a/js/util.js
+++ b/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) {
-    let [tag, ...classes] = tag_selector.split('.');
-    let el = document.createElement(tag);
-    el.classList = classes.join(' ');
+function _mk(el, children) {
     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) => {
diff --git a/style.css b/style.css
index b2f8376..40561bc 100644
--- a/style.css
+++ b/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;