diff --git a/js/main-editor.js b/js/main-editor.js
index 0b485a0..fabb934 100644
--- a/js/main-editor.js
+++ b/js/main-editor.js
@@ -84,6 +84,19 @@ class MouseOperation {
this.cleanup();
}
+ *iter_touched_cells(gxf, gyf) {
+ for (let pt of walk_grid(
+ this.gx1f, this.gy1f, gxf, gyf,
+ // Bound the grid walk to one cell beyond the edges of the level, so that dragging the
+ // mouse in from outside the actual edges still works reliably
+ -1, -1, this.editor.stored_level.size_x, this.editor.stored_level.size_y))
+ {
+ if (this.editor.is_in_bounds(...pt)) {
+ yield pt;
+ }
+ }
+ }
+
// Implement these
start() {}
step(x, y) {}
@@ -94,8 +107,9 @@ class MouseOperation {
class PanOperation extends MouseOperation {
step(mx, my) {
- this.editor.viewport_el.scrollLeft -= mx - this.mx1;
- this.editor.viewport_el.scrollTop -= my - this.my1;
+ let target = this.editor.viewport_el.parentNode;
+ target.scrollLeft -= mx - this.mx1;
+ target.scrollTop -= my - this.my1;
}
}
@@ -107,7 +121,7 @@ class PencilOperation extends DrawOperation {
this.editor.place_in_cell(this.gx1, this.gy1, this.editor.palette_selection);
}
step(mx, my, gxf, gyf) {
- for (let [x, y] of walk_grid(this.gx1f, this.gy1f, gxf, gyf)) {
+ for (let [x, y] of this.iter_touched_cells(gxf, gyf)) {
this.editor.place_in_cell(x, y, this.editor.palette_selection);
}
}
@@ -125,7 +139,7 @@ class ForceFloorOperation extends DrawOperation {
// the same direction, but shouldn't
let i = 0;
let prevx, prevy;
- for (let [x, y] of walk_grid(this.gx1f, this.gy1f, gxf, gyf)) {
+ for (let [x, y] of this.iter_touched_cells(gxf, gyf)) {
i++;
// The very first cell is the one the mouse was already in, and we don't
// have a movement direction yet, so leave that alone
@@ -542,7 +556,7 @@ export class Editor extends PrimaryView {
constructor(conductor) {
super(conductor, document.body.querySelector('main#editor'));
- this.viewport_el = this.root.querySelector('.level');
+ this.viewport_el = this.root.querySelector('.editor-canvas .-container');
// FIXME don't hardcode size here, convey this to renderer some other way
this.renderer = new CanvasRenderer(this.conductor.tileset, 32);
@@ -575,6 +589,7 @@ export class Editor extends PrimaryView {
}
else if (ev.button === 1) {
// Middle button: always pan
+ console.log("middle button!");
this.mouse_op = new PanOperation(this, ev);
ev.preventDefault();
@@ -593,7 +608,10 @@ export class Editor extends PrimaryView {
this.renderer.draw();
}
});
- this.viewport_el.addEventListener('mousemove', ev => {
+ // Once the mouse is down, we should accept mouse movement anywhere
+ window.addEventListener('mousemove', ev => {
+ if (! this.active)
+ return;
if (! this.mouse_op)
return;
if ((ev.buttons & this.mouse_op.button_mask) === 0) {
@@ -766,7 +784,7 @@ export class Editor extends PrimaryView {
}
}
- is_in_level(x, y) {
+ is_in_bounds(x, y) {
return 0 <= x && x < this.stored_level.size_x && 0 <= y && y < this.stored_level.size_y;
}
@@ -775,11 +793,6 @@ export class Editor extends PrimaryView {
if (! name)
return;
- // TODO seems like a big problem to silently ignore, but it can happen from mouse
- // coordinates while drawing
- if (! this.is_in_level(x, y))
- return;
-
let type = TILE_TYPES[name];
let direction;
if (type.is_actor) {
diff --git a/js/util.js b/js/util.js
index dd762be..c738629 100644
--- a/js/util.js
+++ b/js/util.js
@@ -153,7 +153,7 @@ export function string_from_buffer_ascii(buf, start = 0, len) {
}
// Cast a line through a grid and yield every cell it touches
-export function* walk_grid(x0, y0, x1, y1) {
+export function* walk_grid(x0, y0, x1, y1, min_a, min_b, max_a, max_b) {
// TODO if the ray starts outside the grid (extremely unlikely), we should
// find the point where it ENTERS the grid, otherwise the 'while'
// conditions below will stop immediately
@@ -193,27 +193,24 @@ export function* walk_grid(x0, y0, x1, y1) {
step_a = -step_a;
offset_x = 1 - offset_x;
}
- // Zero offset means we're on a grid line, so we're actually a full cell
- // away from the next grid line
- if (offset_x === 0) {
+ else if (offset_x === 0) {
+ // Zero offset means we're on a grid line, so we're a full cell away from the next grid line
+ // (if we're moving forward; if we're moving backward, the next cell really is 0 away)
offset_x = 1;
}
let step_b = 1;
- let offset_y = 1 - (y0 - b);
+ let offset_y = 1 - (y0 - b);
if (dy < 0) {
dy = -dy;
step_b = -step_b;
offset_y = 1 - offset_y;
}
- if (offset_y === 0) {
+ else if (offset_y === 0) {
offset_y = 1;
}
let err = dy * offset_x - dx * offset_y;
- let min_a = 0, min_b = 0;
- // TODO get these passed in fool
- let max_a = 31, max_b = 31;
if (dx > dy) {
// Main axis is x/a
while (min_a <= a && a <= max_a && min_b <= b && b <= max_b) {
@@ -252,6 +249,8 @@ export function* walk_grid(x0, y0, x1, y1) {
}
}
}
+window.walk_grid = walk_grid;
+// console.table(Array.from(walk_grid(13, 27.133854389190674, 12.90625, 27.227604389190674)))
// Root class to indirect over where we might get files from
// - a pool of uploaded in-memory files
diff --git a/style.css b/style.css
index 9688dc4..fbd91fd 100644
--- a/style.css
+++ b/style.css
@@ -883,14 +883,31 @@ main.--has-demo .demo-controls {
margin: auto 1em;
}
-#editor .level {
+#editor .editor-canvas {
grid-area: level;
position: relative;
overflow: auto;
- /* Padding and background make it easier to tell when we're at the edge of the map */
- /* TODO padding should be half a cell, and svg should respect it too */
- /* padding: 1em; */
+ /* Flex layout to center the canvas and overlay together */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-items: safe center;
+ justify-content: safe center;
background: #202020;
+ border: 0.125em solid black;
+}
+#editor .editor-canvas .-container {
+ /* Give the canvas/overlay a bit of a margin; it has to be a border because, due to some quirk
+ * of overflowing flexboxes I guess, padding and margins won't extend the scroll area on the
+ * right and bottom */
+ /* TODO padding should be half a cell? */
+ border: 1em solid transparent;
+}
+#editor .editor-canvas canvas {
+ display: block;
+ width: calc(var(--viewport-width) * var(--tile-width) * var(--scale));
+ --viewport-width: 9;
+ --viewport-height: 9;
}
/* SVG overlays */
#editor svg.level-editor-overlay {