Move undoable creation to each selection creation site

- Fix "Unknown [undoable]" undoable created with Free-Form Select once you do something else (e.g. move it)
- Simplify things, and remove a HACK

src/OnCanvasSelection.js

@@ -1,6 +1,6 @@
 
 class OnCanvasSelection extends OnCanvasObject {
-	constructor(x, y, width, height, img, action_name) {
+	constructor(x, y, width, height, img) {
 		super(x, y, width, height, true);
 
 		this.$el.addClass("selection");
@@ -19,13 +19,13 @@ class OnCanvasSelection extends OnCanvasObject {
 		};
 		$G.on("option-changed", this._on_option_changed);
 
-		this.instantiate(img, action_name);
+		this.instantiate(img);
 	}
 	position() {
 		super.position(true);
 		update_helper_layer(); // TODO: under-grid specific helper layer?
 	}
-	instantiate(img, action_name) {
+	instantiate(img) {
 		this.$el.css({
 			cursor: make_css_cursor("move", [8, 8], "move")
 		});
@@ -129,29 +129,7 @@ class OnCanvasSelection extends OnCanvasObject {
 			$status_size.text("");
 		};
 		
-		if (action_name === "go_to_history_node") {
-			instantiate();
-		} else {
-			const icon =
-			(action_name && action_name.match(/Free-Form Select.*Select/)) ?
-				get_icon_for_tools([
-					get_tool_by_name("Free-Form Select"),
-					get_tool_by_name("Select"),
-				])
-				:
-				get_icon_for_tool(get_tool_by_name(
-					action_name === "Free-Form Select" ? "Free-Form Select" : "Select"
-				));
-		
-			// HACK: make selection available inside undoable
-			selection = this;
-
-			undoable({
-				name: action_name || "Select",
-				icon,
-				soft: true,
-			}, instantiate);
-		}
+		instantiate();
 	}
 	cut_out_background() {
 		const cutout = this.canvas;

src/functions.js

@@ -829,7 +829,14 @@ function paste(img){
 		select_tool(get_tool_by_name("Select"));
 		const x = Math.max(0, Math.ceil($canvas_area.scrollLeft() / magnification));
 		const y = Math.max(0, Math.ceil($canvas_area.scrollTop() / magnification));
-		selection = new OnCanvasSelection(x, y, img.width, img.height, img, "Paste");
+
+		undoable({
+			name: "Paste",
+			icon: get_icon_for_tool(get_tool_by_name("Select")),
+			soft: true,
+		}, ()=> {
+			selection = new OnCanvasSelection(x, y, img.width, img.height, img);
+		});
 	}
 }
 
@@ -998,7 +1005,6 @@ function go_to_history_node(target_history_node, canceling) {
 			target_history_node.selection_image_data.width,
 			target_history_node.selection_image_data.height,
 			target_history_node.selection_image_data,
-			"go_to_history_node"
 		);
 	}
 	if (target_history_node.textbox_font) {
@@ -1282,7 +1288,13 @@ function select_all(){
 	deselect();
 	select_tool(get_tool_by_name("Select"));
 
-	selection = new OnCanvasSelection(0, 0, canvas.width, canvas.height, null, "Select All");
+	undoable({
+		name: "Select All",
+		icon: get_icon_for_tool(get_tool_by_name("Select")),
+		soft: true,
+	}, ()=> {
+		selection = new OnCanvasSelection(0, 0, canvas.width, canvas.height);
+	});
 }
 
 const browserRecommendationForClipboardAccess = "Try using Chrome 76+";

src/tools.js

@@ -99,15 +99,21 @@ window.tools = [{
 			selection.meld_into_canvas();
 			selection = null;
 		}
-		selection = new OnCanvasSelection(
-			this.x_min,
-			this.y_min,
-			this.x_max - this.x_min,
-			this.y_max - this.y_min,
-			contents_within_polygon,
-			"Free-Form Select",
-		);
-		selection.cut_out_background();
+
+		undoable({
+			name: "Free-Form Select",
+			icon: get_icon_for_tool(get_tool_by_name("Free-Form Select")),
+			soft: true,
+		}, ()=> {
+			selection = new OnCanvasSelection(
+				this.x_min,
+				this.y_min,
+				this.x_max - this.x_min,
+				this.y_max - this.y_min,
+				contents_within_polygon,
+			);
+			selection.cut_out_background();
+		});
 	},
 	cancel() {
 		if(!this.preview_canvas){return;}
@@ -185,17 +191,31 @@ window.tools = [{
 				contents_canvas.ctx.globalCompositeOperation = "xor";
 				contents_canvas.ctx.drawImage(rect_canvas, 0, 0);
 
-				selection = new OnCanvasSelection(
-					x_min,
-					y_min,
-					x_max - x_min,
-					y_max - y_min,
-					contents_canvas,
-					"Free-Form Select⊕Select"
-				);
-				selection.cut_out_background();
+				undoable({
+					name: "Free-Form Select⊕Select",
+					icon: get_icon_for_tools([
+						get_tool_by_name("Free-Form Select"),
+						get_tool_by_name("Select"),
+					]),
+					soft: true,
+				}, ()=> {
+					selection = new OnCanvasSelection(
+						x_min,
+						y_min,
+						x_max - x_min,
+						y_max - y_min,
+						contents_canvas,
+					);
+					selection.cut_out_background();
+				});
 			} else {
-				selection = new OnCanvasSelection(rect_x, rect_y, rect_width, rect_height);
+				undoable({
+					name: "Select",
+					icon: get_icon_for_tool(get_tool_by_name("Select")),
+					soft: true,
+				}, ()=> {
+					selection = new OnCanvasSelection(rect_x, rect_y, rect_width, rect_height);
+				});
 			}
 		}
 	},