Fleshed out editor tools considerably

- Added a layer selector

- Added a line tool

- Changed the fill tool to stop at blocking terrain, when filling with
  something other than terrain

- Updated the rotate tool to respect the layer selector

- Updated the adjust tool to respect the layer selector

- Added support to the adjust tool for railroad tracks, ice, swivels,
  force floors

- Restored the adjust tool's support for buttons, added a pressed-button
  preview, and added support for blue buttons

- Added an ice tool, for drawing ice corners interactively

- Added a text tool, for writing longer text via letter tiles

- Added a thin walls tool

- Changed the wire tool to draw wires for more types of mouse movements,
  so that any kind of scribble should produce a continuous wire;
  individual clicks will also place a wire immediately

js/editor/editordefs.js

@@ -7,8 +7,21 @@ export const TOOLS = {
     pencil: {
         icon: 'icons/tool-pencil.png',
         name: "Pencil",
-        desc: "Place, erase, and select tiles.\n\n[mouse1] Draw\n[shift] [mouse1] Draw, replacing entire cell\n[ctrl] [mouse1] Erase (terrain becomes background)\n[ctrl] [shift] [mouse1] Erase entire cell\n\n[mouse2] Pick foreground tile\n[ctrl] [mouse2] Pick background tile",
+        desc: [
+            "Place, erase, and select tiles.",
+            "Picks the top-most tile by default.",
+            "Use the layer selector to pick specific tiles.",
+            "",
+            "[mouse1] Draw",
+            "[shift] [mouse1] Draw, replacing entire cell",
+            "[ctrl] [mouse1] Erase (terrain becomes background)",
+            "[ctrl] [shift] [mouse1] Erase entire cell",
+            "",
+            "[mouse2] Pick foreground tile",
+            "[ctrl] [mouse2] Pick background tile",
+        ].join("\n"),
         uses_palette: true,
+        uses_layers: true,
         op1: mouseops.PencilOperation,
         op2: mouseops.EyedropOperation,
         shortcut: 'b',
@@ -19,7 +32,10 @@ export const TOOLS = {
         name: "Line",
         desc: "Draw straight lines",
         uses_palette: true,
+        uses_layers: undefined,
         shortcut: 'l',
+        op1: mouseops.LineOperation,
+        op2: mouseops.EyedropOperation,
     },
     box: {
         // TODO not implemented
@@ -27,13 +43,27 @@ export const TOOLS = {
         name: "Box",
         desc: "Fill a rectangular area with tiles",
         uses_palette: true,
+        uses_layers: undefined,
         shortcut: 'u',
     },
     fill: {
         icon: 'icons/tool-fill.png',
         name: "Fill",
-        desc: "Flood-fill an area with tiles.",
+        desc: [
+            "Flood-fill an area with the current tile.",
+            "By default, fills the traversable region within the same layer.",
+            "Use the layer selector to floodfill within a specific layer.",
+            "",
+            "[mouse1] Floodfill",
+            "[ctrl] [mouse1] Floodfill, ignoring traversability",
+            "[shift] [mouse1] Fill all matching tiles in the entire level",
+            "",
+            "[mouse2] Pick foreground tile",
+            // TODO override the traversable part?  ctrl?
+            // TODO fill all similar tiles instead?  shift?
+        ].join("\n"),
         uses_palette: true,
+        uses_layers: undefined,
         op1: mouseops.FillOperation,
         op2: mouseops.EyedropOperation,
         shortcut: 'g',
@@ -41,31 +71,119 @@ export const TOOLS = {
     select_box: {
         icon: 'icons/tool-select-box.png',
         name: "Box select",
-        desc: "Select and manipulate rectangles.\n\n[mouse1] Select rectangle\n[shift] [mouse1] Add to selection\n[ctrl] [mouse1] Remove from selection\n\n[mouse1] Move selection\n[ctrl] [mouse1] Clone selection",
+        desc: [
+            "Select and manipulate rectangles.",
+            "",
+            "[mouse1] Select rectangle",
+            "[shift] [mouse1] Add to selection",
+            "[ctrl] [mouse1] Remove from selection",
+            "",
+            "[mouse1] Move selection",
+            "[ctrl] [mouse1] Clone selection",
+        ].join("\n"),
         affects_selection: true,
+        uses_layers: undefined,
         op1: mouseops.SelectOperation,
         shortcut: 'm',
     },
+    select_wand: {
+        icon: 'icons/tool-select-wand.png',
+        name: "Wand select",
+        desc: [
+            "Select regions of similar tiles.",
+            "",
+            "[mouse1] Select contiguous similar tiles",
+            "[mouse2] Select all similar tiles",
+            "[shift] Add to selection",
+            "[ctrl] Remove from selection",
+            "",
+            "[mouse1] Move selection",
+            "[ctrl] [mouse1] Clone selection",
+        ].join("\n"),
+        affects_selection: true,
+        uses_layers: true,
+        op1: mouseops.WandSelectOperation,
+        shortcut: 'w',
+    },
     'force-floors': {
         icon: 'icons/tool-force-floors.png',
         name: "Force floors",
         desc: "Draw force floors following the cursor.",
+        uses_layers: false,
+        min_version: 'cc1',
         op1: mouseops.ForceFloorOperation,
     },
+    ice: {
+        icon: 'icons/tool-ice.png',
+        name: "Ice",
+        desc: [
+            "Draw ice following the cursor.",
+            "",
+            "[mouse1] Lay ice",
+        ].join("\n"),
+        uses_layers: false,
+        min_version: 'cc1',
+        op1: mouseops.IceOperation,
+        op2: mouseops.IceOperation,
+    },
     tracks: {
         icon: 'icons/tool-tracks.png',
         name: "Tracks",
-        desc: "Draw tracks following the cursor.\n\n[mouse1] Lay tracks\n[ctrl] [mouse1] Erase tracks\n[mouse2] Toggle track switch",
+        desc: [
+            "Draw tracks following the cursor.",
+            "",
+            "[mouse1] Lay tracks",
+            "[ctrl] [mouse1] Erase tracks",
+            "[mouse2] Toggle track switch",
+        ].join("\n"),
+        uses_layers: false,
+        min_version: 'cc2',
         op1: mouseops.TrackOperation,
         op2: mouseops.TrackOperation,
     },
+    text: {
+        icon: 'icons/tool-text.png',
+        name: "Text",
+        desc: [
+            "Type text directly onto the floor.",
+            "",
+            "[mouse1] Move cursor",
+        ].join("\n"),
+        uses_layers: false,
+        min_version: 'cc2',
+        op1: mouseops.TextOperation,
+        op2: mouseops.TextOperation,
+    },
+    thin_walls: {
+        icon: 'icons/tool-thin-walls.png',
+        name: "Thin walls",
+        desc: [
+            "Draw thin walls by dragging along the edges of cells.",
+            "",
+            "[mouse1] Draw thin walls",
+            "[mouse2] Draw one-way walls (LL only)",
+            "[ctrl] Erase",
+        ].join("\n"),
+        uses_layers: false,
+        op1: mouseops.ThinWallOperation,
+        op2: mouseops.ThinWallOperation,
+    },
     // TODO this is so clumsy.  maybe right-click to cycle target, like pencil?  i don't know.  that
     // seems annoying for piercing through a lot of thin walls
     // TODO you can't shift-mouse2 in firefox also, it brings up the real context menu
     rotate: {
         icon: 'icons/tool-rotate.png',
         name: "Rotate",
-        desc: "Rotate existing tiles.\nAffects the top-most tile by default.\n\n[mouse1] Rotate clockwise\n[mouse2] Rotate counter-clockwise\n[ctrl] Target terrain\n[shift] Target actor",  // TODO? \n[ctrl] [shift] Affect actor without rotating 
+        desc: [
+            "Rotate existing tiles.",
+            "Works on both actors and orientable terrain.",
+            "Affects the top-most rotatable tile by default.",
+            "Use the layer selector to affect specific tiles.",
+            "",
+            "[mouse1] Rotate clockwise",
+            "[mouse2] Rotate counter-clockwise",
+        ].join("\n"),
+        uses_layers: new Set(['terrain', 'actor']),
         op1: mouseops.RotateOperation,
         op2: mouseops.RotateOperation,
         shortcut: 'r',
@@ -73,7 +191,20 @@ export const TOOLS = {
     adjust: {
         icon: 'icons/tool-adjust.png',
         name: "Adjust",
-        desc: "Inspect and alter miscellaneous tiles in a variety of ways.\nGive it a try!  Affects the top-most tile by default.\n\n[mouse1] Toggle tile type\n[mouse1] Press button\n[mouse2] Edit properties of complex tiles\n(wires, railroads, hints, etc.)\n[ctrl] Target terrain\n[shift] Target actor\n[ctrl] [shift] Target item",
+        desc: [
+            "Inspect and alter tiles in a variety of ways:",
+            "• Transmogrify tiles (including terrain)",
+            "• Edit letter tiles or hint text",
+            "• Change frame block arrows, track directions",
+            "• Preview or press buttons",
+            "• Edit thin walls",
+            "Affects the top-most adjustable tile by default.",
+            "Use the layer selector to affect specific tiles.",
+            "",
+            "[mouse1] Adjust tile",
+            //"[mouse2] Adjust tile backwards",
+        ].join("\n"),
+        uses_layers: true,
         op1: mouseops.AdjustOperation,
         op2: mouseops.AdjustOperation,
         shortcut: 'a',
@@ -89,22 +220,45 @@ export const TOOLS = {
         // shift-drag: create a new connection (arbitrary cells)
         // right drag: move a connection endpoint
         // ctrl-right drag: move the other endpoint (if a cell is both source and dest)
-        desc: "Set up CC1-style clone and trap connections.\n(WIP)\nNOTE: Not supported in the real CC2!\n\n[mouse2] Auto link using Lynx/CC2 rules",
+        desc: [
+            "Set up CC1-style clone and trap connections.",
+            "(WIP)",
+            "NOTE: Not supported in the real CC2!",
+            "",
+            "[mouse2] Auto link using Lynx/CC2 rules",
         //desc: "Set up CC1-style clone and trap connections.\nNOTE: Not supported in CC2!\nLeft drag: link button with valid target\nCtrl-click: erase link\nRight click: auto link using Lynx rules",
+        ].join("\n"),
+        uses_layers: false,
         op1: mouseops.ConnectOperation,
         op2: mouseops.ConnectOperation,
     },
     wire: {
         icon: 'icons/tool-wire.png',
         name: "Wire",
-        desc: "Edit CC2 wiring.\n\n[mouse1] Draw wire\n[ctrl] [mouse1] Erase wire\n\n[mouse2] Toggle tunnels (floor only)",
+        desc: [
+            "Edit CC2 wiring.",
+            "",
+            "[mouse1] Draw wire",
+            "[ctrl] [mouse1] Erase wire",
+            "",
+            "[mouse2] Toggle tunnels (floor only)",
+        ].join("\n"),
+        uses_layers: true,
         op1: mouseops.WireOperation,
         op2: mouseops.WireOperation,
     },
     camera: {
         icon: 'icons/tool-camera.png',
         name: "Camera",
-        desc: "Draw and edit camera regions.\n(LL only.  When the player is within a camera region,\nthe camera stays locked inside it.)\n\n[mouse1] Create or edit a region\n[mouse2] Delete a region",
+        desc: [
+            "Draw and edit camera regions.",
+            "(LL only.  When the player is within a camera region,",
+            "the camera stays locked inside it.)",
+            "",
+            "[mouse1] Create or edit a region",
+            "[mouse2] Delete a region",
+        ].join("\n"),
+        uses_layers: false,
         op1: mouseops.CameraOperation,
         op2: mouseops.CameraEraseOperation,
     },
@@ -113,7 +267,14 @@ export const TOOLS = {
     // slade when you have some selected?
     // TODO ah, railroads...
 };
-export const TOOL_ORDER = ['pencil', 'select_box', 'fill', 'rotate', 'adjust', 'force-floors', 'tracks', 'connect', 'wire', 'camera'];
+export const TOOL_ORDER = [
+    'pencil', 'line', 'box', 'fill',
+    'select_box', 'select_wand',
+    'rotate', 'adjust',
+    'force-floors', 'ice', 'tracks', 'text', 'thin_walls',
+    'wire', 'connect',
+    'camera',
+];
 export const TOOL_SHORTCUTS = {};
 for (let [tool, tooldef] of Object.entries(TOOLS)) {
     if (tooldef.shortcut) {
@@ -121,6 +282,9 @@ for (let [tool, tooldef] of Object.entries(TOOLS)) {
     }
 }
 
+export const SELECTABLE_LAYERS = [null, 'terrain', 'item', 'item_mod', 'actor', 'swivel', 'thin_wall', 'canopy'];
+export const SELECTABLE_LAYER_NAMES = ["auto", "terrain", "items", "item mods", "actors", "swivels", "thin walls", "canopies"];
+
 // TODO this MUST use a LL tileset!
 export const PALETTE = [{
     title: "Basics",

js/editor/main.js

@@ -12,7 +12,10 @@ import { mk, mk_svg, string_from_buffer_ascii, bytestring_to_buffer } from '../u
 import * as util from '../util.js';
 
 import * as dialogs from './dialogs.js';
-import { TOOLS, TOOL_ORDER, TOOL_SHORTCUTS, PALETTE, SPECIAL_PALETTE_ENTRIES, SPECIAL_TILE_BEHAVIOR, TILE_DESCRIPTIONS, transform_direction_bitmask } from './editordefs.js';
+import {
+    TOOLS, TOOL_ORDER, TOOL_SHORTCUTS, SELECTABLE_LAYERS, SELECTABLE_LAYER_NAMES, PALETTE, SPECIAL_PALETTE_ENTRIES,
+    SPECIAL_TILE_BEHAVIOR, TILE_DESCRIPTIONS, transform_direction_bitmask
+} from './editordefs.js';
 import { SVGConnection, Selection } from './helpers.js';
 import * as mouseops from './mouseops.js';
 import { TILES_WITH_PROPS } from './tile-overlays.js';
@@ -147,6 +150,14 @@ export class Editor extends PrimaryView {
             if (! this.active)
                 return;
 
+            if (this.mouse_op && this.redirect_keys_to_tool) {
+                if (this.mouse_op.handle_key(ev.key)) {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                }
+                return;
+            }
+
             if (ev.ctrlKey) {
                 if (ev.key === 'a') {
                     // Select all
@@ -189,6 +200,14 @@ export class Editor extends PrimaryView {
                         this.mouse_op.do_abort();
                     }
                 }
+                else if (ev.key === 'Tab') {
+                    if (ev.shiftKey) {
+                        this.select_layer((this.selected_layer_index - 1 + SELECTABLE_LAYERS.length) % SELECTABLE_LAYERS.length);
+                    }
+                    else {
+                        this.select_layer((this.selected_layer_index + 1) % SELECTABLE_LAYERS.length);
+                    }
+                }
                 else if (ev.key === ',') {
                     if (ev.shiftKey) {
                         this.rotate_palette_left();
@@ -233,6 +252,7 @@ export class Editor extends PrimaryView {
         this.mouse_coords = null;
         this.mouse_ops = [null, new mouseops.PanOperation(this, 1), null];  // left, middle, right
         this.mouse_op = null;
+        this.redirect_keys_to_tool = false;
         this.viewport_el.addEventListener('mousedown', ev => {
             this.mouse_coords = [ev.clientX, ev.clientY];
             this.cancel_mouse_drag();
@@ -361,7 +381,7 @@ export class Editor extends PrimaryView {
                 rotate_right_button, this.fg_tile_el, rotate_left_button,
                 this.bg_tile_el));
         // Tools themselves
-        let toolbox = mk('div.icon-button-set', {id: 'editor-toolbar'});
+        let toolbox = mk('div.icon-button-set.-toolbar-section', {id: 'editor-toolbar'});
         this.root.querySelector('.controls').append(toolbox);
         this.tool_button_els = {};
         for (let toolname of TOOL_ORDER) {
@@ -417,6 +437,30 @@ export class Editor extends PrimaryView {
             this.select_tool(button.getAttribute('data-tool'));
         });
 
+        // Layer selection
+        this.layer_selector = mk('div.-toolbar-section', {id: 'editor-layer-selector'},
+            mk('img', {src: 'icons/layer-all.png'}),
+            mk('h3', "Layer"),
+            mk('output'),
+        );
+        this.root.querySelector('.controls').append(this.layer_selector);
+        this.select_layer(0);
+        this.layer_selector.addEventListener('mousedown', ev => {
+            if (ev.button === 0) {
+                this.select_layer((this.selected_layer_index + 1) % SELECTABLE_LAYERS.length);
+            }
+            else if (ev.button === 2) {
+                this.select_layer((this.selected_layer_index - 1 + SELECTABLE_LAYERS.length) % SELECTABLE_LAYERS.length);
+                ev.preventDefault();
+            }
+        });
+        this.layer_selector.addEventListener('dblclick', ev => {
+            ev.preventDefault;
+        });
+        this.layer_selector.addEventListener('contextmenu', ev => {
+            ev.preventDefault();
+        });
+
         // Toolbar buttons for saving, exporting, etc.
         let button_container = mk('div.-buttons');
         this.root.querySelector('.controls').append(button_container);
@@ -1207,6 +1251,7 @@ export class Editor extends PrimaryView {
 
         if (this.current_tool) {
             this.tool_button_els[this.current_tool].classList.remove('-selected');
+            this.redirect_keys_to_tool = false;
         }
         this.current_tool = tool;
         this.tool_button_els[this.current_tool].classList.add('-selected');
@@ -1249,6 +1294,14 @@ export class Editor extends PrimaryView {
         this.mouse_op = this.mouse_ops[button];
     }
 
+    select_layer(index) {
+        this.selected_layer_index = index;
+        this.selected_layer = SELECTABLE_LAYERS[index];
+        this.layer_selector.querySelector('img').setAttribute('src',
+            `icons/layer-${SELECTABLE_LAYERS[index] ?? 'all'}.png`);
+        this.layer_selector.querySelector('output').textContent = SELECTABLE_LAYER_NAMES[index];
+    }
+
     show_palette_tooltip(key) {
         let desc = TILE_DESCRIPTIONS[key];
         if (! desc && SPECIAL_PALETTE_ENTRIES[key]) {

js/tiletypes.js

@@ -181,6 +181,9 @@ function player_visual_state(me) {
 }
 
 function button_visual_state(me) {
+    if (me && me._editor_pressed) {
+        return 'pressed';
+    }
     if (me && me.cell) {
         let actor = me.cell.get_actor();
         if (actor && ! actor.movement_cooldown) {

style.css

@@ -2361,10 +2361,14 @@ svg.level-editor-overlay .overlay-adjust-cursor[data-layer=item] {
     stroke: hsl(50deg, 80%, 20%, 0.8);
     fill: hsl(50deg, 80%, 60%, 0.4);
 }
+svg.level-editor-overlay .overlay-adjust-cursor[data-layer=item-mod] {
+}
 svg.level-editor-overlay .overlay-adjust-cursor[data-layer=actor] {
     stroke: hsl(215deg, 80%, 20%, 0.8);
     fill: hsl(215deg, 80%, 60%, 0.4);
 }
+svg.level-editor-overlay .overlay-adjust-cursor[data-layer=swivel] {
+}
 svg.level-editor-overlay .overlay-adjust-cursor[data-layer=thin-wall] {
     stroke: hsl(330deg, 80%, 20%, 0.8);
     fill: hsl(330deg, 80%, 60%, 0.4);
@@ -2375,7 +2379,7 @@ svg.level-editor-overlay .overlay-adjust-gray-button-radius {
 }
 svg.level-editor-overlay .overlay-adjust-gray-button-shroud {
     stroke: none;
-    fill: hsla(10, 10%, 60%, 0.75);
+    fill: hsla(10, 10%, 30%, 0.6);
 }
 svg.level-editor-overlay rect.overlay-camera {
     stroke: #808080;
@@ -2402,6 +2406,10 @@ svg.level-editor-overlay text.overlay-adjust-hint {
     text-anchor: middle;
     dominant-baseline: auto;
 }
+svg.level-editor-overlay .overlay-text-cursor {
+    stroke: hsla(50, 90%, 60%, 0.75);
+    fill: hsla(50, 90%, 60%, 0.25);
+}
 
 .editor-big-tooltip {
     /* shared between toolbar and palette tooltips */
@@ -2490,17 +2498,44 @@ svg.level-editor-overlay text.overlay-adjust-hint {
     transition-delay: 0.5s;
     transition-timing-function: ease-in;
 }
+#editor .controls #editor-layer-selector {
+    display: grid;
+    grid:
+        "icon header" auto
+        "icon name"   1fr
+        / auto 6em
+    ;
+    align-items: center;
+    gap: 0 0.5em;
+    line-height: 1;
+    user-select: none;
+}
+#editor .controls #editor-layer-selector > img {
+    grid-area: icon;
+}
+#editor .controls #editor-layer-selector > h3 {
+    grid-area: header;
+    margin: 0;
+    font-size: 0.75em;
+    font-weight: normal;
+    color: #606060;
+}
+#editor .controls #editor-layer-selector > output {
+    grid-area: name;
+}
 #editor .controls .-buttons {
     grid-area: menu;
 }
-.icon-button-set {
-    display: flex;
-    flex-wrap: wrap;
+#editor .controls .-toolbar-section {
     padding: 2px;
     border-radius: 4px;
     background: hsl(var(--selected-hue), 10%, 10%);
     border: 1px solid hsl(var(--selected-hue), 10%, 20%);
 }
+.icon-button-set {
+    display: flex;
+    flex-wrap: wrap;
+}
 .icon-button-set button {
     width: auto;
     height: auto;
@@ -2513,10 +2548,10 @@ svg.level-editor-overlay text.overlay-adjust-hint {
     box-shadow: none;
 }
 .icon-button-set button:hover {
-    background: hsl(var(--hover-hue), 40%, 30%);
+    background: hsl(var(--hover-hue), 50%, 40%);
 }
 .icon-button-set button.-selected {
-    background: hsl(var(--selected-hue), 50%, 75%);
+    background: hsl(var(--selected-hue), 90%, 75%);
 }
 .icon-button-set button img {
     display: block;