adds reset zoom button, "fixes" save vis/vis to resource buttons (again?)

css/icons.css

@@ -93,6 +93,11 @@
 	mask-image: url("../res/icons/settings.svg");
 }
 
+.ui.icon > .icon-unzoom {
+	-webkit-mask-image: url("../res/icons/scaling.svg");
+	mask-image: url("../res/icons/scaling.svg");
+}
+
 .ui.inline-icon.icon-grid::after,
 .ui.icon > .icon-grid {
 	-webkit-mask-image: url("../res/icons/grid.svg");

index.html

@@ -5,7 +5,7 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="css/colors.css?v=f732f19" rel="stylesheet" />
-		<link href="css/icons.css?v=e907764" rel="stylesheet" />
+		<link href="css/icons.css?v=a8ec439" rel="stylesheet" />
 
 		<link href="css/index.css?v=aaad3e5" rel="stylesheet" />
 		<link href="css/layers.css?v=92c0352" rel="stylesheet" />
@@ -244,7 +244,7 @@
 					<br />
 					<span id="version">
 						<a href="https://github.com/zero01101/openOutpaint" target="_blank">
-							Alpha release v0.0.15.1 (20230330.001)
+							Alpha release v0.0.15.2 (20230405.001)
 						</a>
 						<br />
 						<a
@@ -305,7 +305,17 @@
 			id="ui-layers"
 			class="floating-window"
 			style="right: 10px; bottom: 10px">
-			<div class="draggable floating-window-title">Layers</div>
+			<div class="draggable floating-window-title">
+				Layers
+				<div style="flex: 1"></div>
+				<button
+					id="unzoom-btn"
+					class="ui icon header-button"
+					title="Reset Zoom to 1x"
+					onclick="unzoom()">
+					<div class="icon-unzoom"></div>
+				</button>
+			</div>
 			<div class="menu-container" style="min-width: 200px">
 				<div class="layer-manager">
 					<div id="layer-list" class="layer-list"></div>
@@ -359,7 +369,7 @@
 		<div
 			id="ui-script"
 			class="floating-window"
-			style="right: 10px; top: 400px; display: none">
+			style="right: 10px; top: 330px; display: none">
 			<div class="draggable floating-window-title">Script</div>
 			<div class="menu-container" style="min-width: 200px">
 				<div id="script-select" class="script-select">
@@ -462,7 +472,7 @@
 			src="js/ui/floating/history.js?v=4f29db4"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/floating/layers.js?v=cf1089d"
+			src="js/ui/floating/layers.js?v=3f5807f"
 			type="text/javascript"></script>
 
 		<!-- Load Tools -->
@@ -478,7 +488,7 @@
 			src="js/ui/tool/colorbrush.js?v=84ff9fa"
 			type="text/javascript"></script>
 		<script
-			src="js/ui/tool/select.js?v=b84bf02"
+			src="js/ui/tool/select.js?v=044d8f3"
 			type="text/javascript"></script>
 		<script src="js/ui/tool/stamp.js?v=4494df6" type="text/javascript"></script>
 		<script

js/ui/floating/layers.js

@@ -2,6 +2,13 @@
  * The layering UI window
  */
 
+function unzoom() {
+	viewport.zoom = 1;
+	viewport.transform(imageCollection.element);
+	//toolbar._current_tool.redrawui && toolbar._current_tool.redrawui();
+	notifications.notify("Zoom reset to 1x");
+}
+
 const uil = {
 	/** @type {Observer<{uilayer: UILayer}>} */
 	onactive: new Observer(),

js/ui/tool/select.js

@@ -470,6 +470,7 @@ const selectTransformTool = () =>
 						selection.dragendcb(evn);
 
 						const bb = selection.bb;
+						state.backupBB = bb;
 
 						state.reset();
 
@@ -741,7 +742,11 @@ const selectTransformTool = () =>
 					saveVisibleSelectionButton.onclick = () => {
 						console.debug(state.selected);
 						console.debug(state.selected.bb);
-						const canvas = uil.getVisible(state._selected.bb, {
+						var selectBB =
+							state.selected.bb != undefined
+								? state.selected.bb
+								: state.backupBB;
+						const canvas = uil.getVisible(selectBB, {
 							categories: ["image", "user", "select-display"],
 						});
 						downloadCanvas({
@@ -757,7 +762,11 @@ const selectTransformTool = () =>
 					createVisibleResourceButton.title =
 						"Saves Visible Selection as a Resource";
 					createVisibleResourceButton.onclick = () => {
-						const canvas = uil.getVisible(state._selected.bb, {
+						var selectBB =
+							state.selected.bb != undefined
+								? state.selected.bb
+								: state.backupBB;
+						const canvas = uil.getVisible(selectBB, {
 							categories: ["image", "user", "select-display"],
 						});
 						const image = document.createElement("img");

pages/configuration.html

@@ -5,7 +5,7 @@
 		<title>openOutpaint 🐠</title>
 		<!-- CSS Variables -->
 		<link href="../css/colors.css?v=f732f19" rel="stylesheet" />
-		<link href="../css/icons.css?v=e907764" rel="stylesheet" />
+		<link href="../css/icons.css?v=a8ec439" rel="stylesheet" />
 
 		<link href="../css/index.css?v=aaad3e5" rel="stylesheet" />
 		<link href="../css/layers.css?v=92c0352" rel="stylesheet" />
@@ -142,6 +142,18 @@
 						onchange="changeSmoothRendering()" />
 				</td>
 			</tr>
+			<!-- //TODO implement this
+			<tr>
+				<td class="title">Marching Ants Update MS</td>
+				<td class="input">
+					<input
+						id="marching-ants-update-ms"
+						class="canvas-size-input"
+						type="number"
+						step="1"
+						value="20" />
+				</td>
+			</tr> -->
 		</table>
 
 		<script>

res/icons/scaling.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 3 9 15"></path>
+  <path d="M12 3H3v18h18v-9"></path>
+  <path d="M16 3h5v5"></path>
+  <path d="M14 15H9v-5"></path>
+
+</svg>