From fb2f79823ca276204c386b86d11e94dd70ad2d86 Mon Sep 17 00:00:00 2001
From: "Eevee (Evelyn Woods)" <eevee.git@veekun.com>
Date: Wed, 30 Dec 2020 17:28:41 -0700
Subject: [PATCH] Stub out a selection tool for the editor

---
 icons/editor-icons.aseprite | Bin 3254 -> 3502 bytes
 icons/tool-select-box.png   | Bin 0 -> 147 bytes
 icons/tool-wire.png         | Bin 257 -> 259 bytes
 js/main-editor.js           | 122 +++++++++++++++++++++++++++++++++++-
 style.css                   |  28 ++++++++-
 5 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 icons/tool-select-box.png

diff --git a/icons/editor-icons.aseprite b/icons/editor-icons.aseprite
index 30d53b64c0ac32eb200aafa4990bec4ff6541567..320cf97c8447a35104c0b7adae942da5feffb039 100644
GIT binary patch
delta 458
zcmdlcxlWpC9q&Y@I$k|q28LfBl^IeP7#Nf{_BJyyGHn)Qj%Q?)o4k-&l#`92q$n{t
zyI5{=A&aOQ8$)qwPHJ+A98fWf0uzvgf&V}T8$(fkNn%Or=Cv&QSQ)QQ&f$_(J;>Xj
zz~dTufOW<x%^7XHGRHJ+r26|7YI;u2s>|kP_pEbTU{g1FEti?#<xOTErF><?6Wvng
zYD>*Oe|GX0E_W7Dp`gym_S~(Ep_7ktE7kvBf0r?NrQ@;ohviStiX@g4uS}KW3C@z+
z^?zmRy^J5dZTB;N@c#WE{h~-hT%KXGmtX27pu<=d_!w9jm>B-UT`a~R#ZWQl?v;bQ
z2NXD1FPwX*!1qwW@A0{9DylyXIXb=t3HdM84_R<M)xG}E#BDNvd-d;3xl}m2{_bS6
z`;5DHZ+r6g#x(Jbn(L=LGTN*6bj!8A*;~V|cGUgPxLBLu@=JB+kGd57w7v4NXWuwi
zWIdHRyX4-3nP*?U`u^`~?A*YW`G0hF`I|hi&=LQh6!tj7Yu(o47Sk=C>)qTewdOzH
x?3xSL-t`vm(YrM-F2h)9=d{e9FRET|sd+Q|IPY%8kN*~=ECu^XV6p_yJOJ_tyk-CZ

delta 205
zcmV;;05bos8@3q&whWO1ehoGZ008>&Apm3m001Geje`OK1G5nWUjYFhlaB-y2?qd7
zVR>b8ATpD11Q-T$Wo%_*bhF9?z6Al)lZgr)B+(6kAPhvAgN<B-0i1(b9K;_dFm9rz
zBu%Qh))qb_xr9J@T$9TRHWACTHt`xw92a3mWSuJ--{#Yk5(`HJ1d)5LlU)mi0Zo(R
z3nDQLP#`tP_|yW_HWy|dt<0sCdDH@<;YS%54L{1jNDse(E{AdP0g{wmsign_00kfq
HlMoG_8=6P`

diff --git a/icons/tool-select-box.png b/icons/tool-select-box.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d3863243c4cb21c825cca4de091fb785000515d
GIT binary patch
literal 147
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnH3?%tPCZz)@#^NA%Cx&(BWL^R}JOMr-u0UE!
zO6pyC^Z#piVr1JgL5fO({DK)Ap4~_Tax^?$9780+lM@v9H`K8<@t@%N7wRC;a3+D(
n&`!bl#VR#94yFl`PZ$_J{Bp|tESl8>)WhKE>gTe~DWM4fx5y`}

literal 0
HcmV?d00001

diff --git a/icons/tool-wire.png b/icons/tool-wire.png
index 435aa9887acb7adb03080690bc14404649b43d3e..d4361c96e75cbf5c2d35a21e9bc639a5a88cb870 100644
GIT binary patch
delta 223
zcmV<503iQ?0)qmO7zqRe0001iRA<MLAsBxRo4*<w8c^reW@cuLjEvpi-?rj15&!@I
z0d!JMQvg8b*k%9#0FOyTK~yNuwU99m!ypVr5jSuxWhO}NPPs!55DE5F&A<N<YL^C_
zB~$x1KRp{8=l+%`In<CC;(@vWp@Z9|Mtu$dydJ;+SBO%vj2T5+%9!D)NXUXuE}cvG
zq&3rhU&XT!PBZ7Q8=Q0EICD4{!S|MCm{-2WSiKqMmSz~RsxjH)R-)<bI2ZM}c=pM^
Z&KpnMBIHpwx4QrU002ovPDHLkV1i~wUsV7A

delta 221
zcmV<303!c`0)YaM7zqdi0000)q>9FoAsBxe8X9J1W{ixCu1U(za{k@l-=$sY&j0`b
z2Xs<SQvm<}|NsC0rGKXT0001oNkl<ZIE~ek;SPWx2!utz_kZLNY1%mb(XYBSb36Qq
z&Qg9R3T^Ec!X<9AKUM;Lz6p#ff?sQN$pzek;TzP0XA9&P65)`@reG16lyus*)$~cj
zNHj|9O?_2L1a*z$eLWC7nEVZs0H=5olHXPW%wi?ruqI&})*!qM%Lc#0I^4?RrTwrj
Xis%IbVOS6d00000NkvXXu0mjf)-__B

diff --git a/js/main-editor.js b/js/main-editor.js
index e3b39c4..169dde7 100644
--- a/js/main-editor.js
+++ b/js/main-editor.js
@@ -482,6 +482,36 @@ class PencilOperation extends DrawOperation {
     }
 }
 
+class SelectOperation extends MouseOperation {
+    start() {
+        this.pending_selection = this.editor.selection.create_pending();
+        this.update_pending_selection();
+        this.has_moved = false;
+    }
+    step(mx, my, gxf, gyf, gx, gy) {
+        this.has_moved = true;
+        this.update_pending_selection();
+    }
+
+    update_pending_selection() {
+        this.pending_selection.set_extrema(this.gx0, this.gy0, this.gx1, this.gy1);
+    }
+
+    commit() {
+        if (! this.has_moved) {
+            // Plain click clears selection
+            this.pending_selection.discard();
+            this.editor.selection.clear();
+        }
+        else {
+            this.pending_selection.commit();
+        }
+    }
+    abort() {
+        this.pending_selection.discard();
+    }
+}
+
 class ForceFloorOperation extends DrawOperation {
     start() {
         // Begin by placing an all-way force floor under the mouse
@@ -1094,6 +1124,12 @@ const EDITOR_TOOLS = {
         desc: "Flood-fill an area with tiles",
         uses_palette: true,
     },
+    select_box: {
+        icon: 'icons/tool-select-box.png',
+        name: "Box select",
+        desc: "Select and manipulate rectangles.",
+        op1: SelectOperation,
+    },
     'force-floors': {
         icon: 'icons/tool-force-floors.png',
         name: "Force floors",
@@ -1141,7 +1177,7 @@ const EDITOR_TOOLS = {
     // slade when you have some selected?
     // TODO ah, railroads...
 };
-const EDITOR_TOOL_ORDER = ['pencil', 'adjust', 'force-floors', 'tracks', 'wire', 'camera'];
+const EDITOR_TOOL_ORDER = ['pencil', 'select_box', 'adjust', 'force-floors', 'tracks', 'wire', 'camera'];
 
 // TODO this MUST use a LL tileset!
 const EDITOR_PALETTE = [{
@@ -2063,6 +2099,81 @@ for (let cycle of [
     }
 }
 
+// TODO probably need to combine this with Selection somehow since it IS one, just not committed yet
+class PendingSelection {
+    constructor(owner) {
+        this.owner = owner;
+        this.element = mk_svg('rect.overlay-pending-selection');
+        this.owner.svg_group.append(this.element);
+        this.rect = null;
+    }
+
+    set_extrema(x0, y0, x1, y1) {
+        this.rect = new DOMRect(Math.min(x0, x1), Math.min(y0, y1), Math.abs(x0 - x1) + 1, Math.abs(y0 - y1) + 1);
+        this.element.classList.add('--visible');
+        this.element.setAttribute('x', this.rect.x);
+        this.element.setAttribute('y', this.rect.y);
+        this.element.setAttribute('width', this.rect.width);
+        this.element.setAttribute('height', this.rect.height);
+    }
+
+    commit() {
+        this.owner.set_from_rect(this.rect);
+        this.element.remove();
+    }
+
+    discard() {
+        this.element.remove();
+    }
+}
+
+class Selection {
+    constructor(editor) {
+        this.editor = editor;
+
+        this.svg_group = mk_svg('g');
+        this.editor.svg_overlay.append(this.svg_group);
+
+        this.rect = null;
+        this.element = mk_svg('rect.overlay-selection.overlay-transient');
+        this.svg_group.append(this.element);
+
+        this.floating_contents = null;
+    }
+
+    get is_empty() {
+        return this.rect === null;
+    }
+
+    contains(x, y) {
+        // Empty selection means everything is selected?
+        if (this.rect === null)
+            return true;
+
+        return this.rect.left <= x && x < this.rect.right && this.rect.top <= y && y < this.rect.bottom;
+    }
+
+    create_pending() {
+        return new PendingSelection(this);
+    }
+
+    set_from_rect(rect) {
+        this.rect = rect;
+        this.element.classList.add('--visible');
+        this.element.setAttribute('x', this.rect.x);
+        this.element.setAttribute('y', this.rect.y);
+        this.element.setAttribute('width', this.rect.width);
+        this.element.setAttribute('height', this.rect.height);
+    }
+
+    clear() {
+        this.rect = null;
+        this.element.classList.remove('--visible');
+    }
+
+    // TODO allow floating/dragging, ctrl-dragging to copy, anchoring...
+    // TODO make more stuff respect this (more things should go through Editor for undo reasons anyway)
+}
 
 export class Editor extends PrimaryView {
     constructor(conductor) {
@@ -2098,7 +2209,7 @@ export class Editor extends PrimaryView {
 
     setup() {
         // Add more bits to SVG overlay
-        this.svg_cursor = mk_svg('rect.overlay-cursor', {x: 0, y: 0, width: 1, height: 1});
+        this.svg_cursor = mk_svg('rect.overlay-transient.overlay-cursor', {x: 0, y: 0, width: 1, height: 1});
         this.svg_overlay.append(this.svg_cursor);
 
         // Keyboard shortcuts
@@ -2389,6 +2500,8 @@ export class Editor extends PrimaryView {
 
         this.palette_selection = null;
         this.select_palette('floor', true);
+
+        this.selection = new Selection(this);
     }
 
     activate() {
@@ -2743,6 +2856,9 @@ export class Editor extends PrimaryView {
         if (! tile)
             return;
 
+        if (! this.selection.contains(x, y))
+            return;
+
         let cell = this.cell(x, y);
         // Replace whatever's on the same layer
         // TODO should preserve wiring if possible too
@@ -2769,6 +2885,8 @@ export class Editor extends PrimaryView {
     }
 
     erase_tile(cell, tile = null) {
+        // TODO respect selection
+
         if (tile === null) {
             tile = this.palette_selection;
         }
diff --git a/style.css b/style.css
index f5be779..4f07929 100644
--- a/style.css
+++ b/style.css
@@ -1413,13 +1413,35 @@ body.--debug #player-debug {
     stroke-width: 0.0625;
     fill: none;
 }
-#editor .level-editor-overlay rect.overlay-cursor {
+#editor .level-editor-overlay .overlay-transient {
     display: none;
+}
+#editor .level-editor-overlay .overlay-transient.--visible {
+    display: initial;
+}
+#editor .level-editor-overlay rect.overlay-cursor {
+    x-stroke: hsla(225, 100%, 60%, 0.5);
+    fill: hsla(225, 100%, 75%, 0.25);
+}
+#editor .level-editor-overlay rect.overlay-pending-selection {
     stroke: hsla(225, 100%, 60%, 0.5);
     fill: hsla(225, 100%, 75%, 0.25);
 }
-#editor .level-editor-overlay rect.overlay-cursor.--visible {
-    display: initial;
+#editor .level-editor-overlay rect.overlay-selection {
+    stroke: #000c;
+    fill: hsla(225, 0%, 75%, 0.25);
+    stroke-dasharray: 0.125, 0.125;
+    animation: marching-ants 1s linear infinite;
+    pointer-events: auto;
+    cursor: move;
+}
+@keyframes marching-ants {
+    0% {
+        stroke-dashoffset: 0.25;
+    }
+    100% {
+        stroke-dashoffset: 0;
+    }
 }
 #editor .level-editor-overlay rect.overlay-cxn {
     stroke: red;