Merge pull request #49 from seijihariki/image-editing-tools

Image editing tools
zero01101 · Nov 25, 2022 · bbdfef9 · bbdfef9
2 parents f34d1d0 + 4434e21
commit bbdfef9
Show file tree

Hide file tree

Showing 19 changed files with 1,285 additions and 348 deletions.
diff --git a/css/index.css b/css/index.css
@@ -30,20 +30,27 @@ body {
 	grid-row-gap: 5px;
 }
 
-.toolbar {
+.button-array {
 	display: flex;
-	justify-content: space-between;
+	justify-content: stretch;
 }
 
-.toolbar > .tool {
+.button-array > .button.tool {
 	flex: 1;
+	border-radius: 0;
 }
 
-.toolbar > .tool:not(:last-child) {
-	margin-right: 10px;
+.button-array > .button.tool:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
 }
 
-button.tool {
+.button-array > .button.tool:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.button.tool {
 	background-color: rgb(0, 0, 50);
 	color: rgb(255, 255, 255);
 	border-radius: 5px;
@@ -57,8 +64,11 @@ button.tool {
 	margin-bottom: 5px;
 }
 
-button.tool:hover {
-	background-color: #667;
+.button.tool:hover {
+	background-color: rgb(30, 30, 80);
+}
+.button.tool:active {
+	background-color: rgb(60, 60, 130);
 }
 
 .collapsible {
@@ -100,7 +110,7 @@ button.tool:hover {
 	font-size: medium;
 	text-align: left;
 	max-height: fit-content;
-	overflow: auto;
+	overflow: visible;
 	cursor: auto;
 }
 

diff --git a/css/ui/tool/stamp.css b/css/ui/tool/stamp.css
@@ -0,0 +1,77 @@
+.resource-manager {
+	position: relative;
+	border-radius: 5px;
+}
+
+.resource-manager {
+	user-select: none;
+}
+.resource-manager > .preview-pane {
+	display: none;
+
+	position: absolute;
+
+	height: 200px;
+	width: 200px;
+
+	right: -200px;
+	top: 0px;
+
+	background-color: white;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+
+	border-radius: 2px;
+}
+
+.resource-manager > .resource-list {
+	height: 200px;
+
+	background-color: #ffffff66;
+
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.resource-manager > .resource-list > * {
+	cursor: pointer;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.resource-manager > .resource-list > *:hover {
+	background-color: #ffff;
+}
+.resource-manager > .resource-list > .selected {
+	background-color: #fff6;
+}
+
+.resource-manager > .resource-list.dragging {
+	background-color: #ffffff88;
+	transition-duration: 0.3s;
+}
+
+.resource-manager > .upload-button {
+	display: block;
+	width: 100%;
+
+	padding-left: 0;
+	padding-right: 0;
+
+	margin-top: 0;
+
+	text-align: center;
+
+	border-top-left-radius: 0px;
+	border-top-right-radius: 0px;
+
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+
+	border: 0px;
+}
diff --git a/css/ui/toolbar.css b/css/ui/toolbar.css
@@ -32,6 +32,29 @@
 	filter: invert(90%);
 }
 
+/* Toolbar lock indicator */
+#ui-toolbar .lock-indicator {
+	position: absolute;
+	display: none;
+
+	padding: 0;
+
+	background-color: var(--c-text);
+
+	right: 2px;
+	top: 10px;
+
+	width: 15px;
+	height: 15px;
+
+	background-color: red;
+
+	-webkit-mask-image: url("/res/icons/lock.svg");
+	-webkit-mask-size: contain;
+	mask-image: url("/res/icons/lock.svg");
+	mask-size: contain;
+}
+
 /* The separator */
 #ui-toolbar .separator {
 	width: 80%;

diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
 		<link href="css/ui/history.css" rel="stylesheet" />
 		<link href="css/ui/toolbar.css" rel="stylesheet" />
 
+		<!-- Tool Specific CSS -->
+		<link href="css/ui/tool/stamp.css" rel="stylesheet" />
+
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
 
@@ -92,12 +95,8 @@
 					onchange="changeMaskBlur()" />
 				<br />
 				<!-- Save/load image section -->
-				<button type="button" class="collapsible">Save/Load/New image</button>
+				<button type="button" class="collapsible">Save/Upscaling</button>
 				<div class="content">
-					<label for="preloadImage">Load image:</label>
-					<input type="file" id="preloadImage" onchange="preloadImage()"
-					accept="image/*" / style="width: 200px;">
-					<br />
 					<button onclick="downloadCanvas()">Save canvas</button>
 					<br />
 					<label for="upscalers">Choose upscaler</label>
@@ -165,11 +164,11 @@
 			<div class="draggable floating-window-title">History</div>
 			<div class="menu-container" style="min-width: 200px">
 				<div id="history" class="history"></div>
-				<div class="toolbar" style="padding: 10px">
-					<button type="button" onclick="commands.undo()" class="tool">
+				<div class="button-array" style="padding: 10px">
+					<button type="button" onclick="commands.undo()" class="button tool">
 						undo
 					</button>
-					<button type="button" onclick="commands.redo()" class="tool">
+					<button type="button" onclick="commands.redo()" class="button tool">
 						redo
 					</button>
 				</div>
@@ -179,11 +178,12 @@
 		<!-- Toolbar -->
 		<div
 			id="ui-toolbar"
-			class="floating-window"
+			class="floating-window toolbar"
 			style="right: 10px; top: 350px">
 			<div class="draggable handle">
 				<span class="line"></span>
 			</div>
+			<div class="lock-indicator" id="toolbar-lock-indicator"></div>
 			<div class="toolbar-section"></div>
 		</div>
 
@@ -295,6 +295,8 @@
 		<!-- Load Tools -->
 		<script src="js/ui/tool/dream.js" type="text/javascript"></script>
 		<script src="js/ui/tool/maskbrush.js" type="text/javascript"></script>
+		<script src="js/ui/tool/select.js" type="text/javascript"></script>
+		<script src="js/ui/tool/stamp.js" type="text/javascript"></script>
 
 		<script src="js/ui/toolbar.js" type="text/javascript"></script>
 	</body>

diff --git a/js/commands.js b/js/commands.js
@@ -133,7 +133,7 @@ commands.createCommand(
 			options.x === undefined ||
 			options.y === undefined
 		)
-			throw "Command drawImage requires options in the format: {image, x, y, ctx?}";
+			throw "Command drawImage requires options in the format: {image, x, y, w?, h?, ctx?}";
 
 		// Check if we have state
 		if (!state.context) {
@@ -144,14 +144,14 @@ commands.createCommand(
 			const imgData = context.getImageData(
 				options.x,
 				options.y,
-				options.image.width,
-				options.image.height
+				options.w || options.image.width,
+				options.h || options.image.height
 			);
 			state.box = {
 				x: options.x,
 				y: options.y,
-				w: options.image.width,
-				h: options.image.height,
+				w: options.w || options.image.width,
+				h: options.h || options.image.height,
 			};
 			// Create Image
 			const cutout = document.createElement("canvas");
@@ -163,7 +163,17 @@ commands.createCommand(
 		}
 
 		// Apply command
-		state.context.drawImage(options.image, state.box.x, state.box.y);
+		state.context.drawImage(
+			options.image,
+			0,
+			0,
+			options.image.width,
+			options.image.height,
+			state.box.x,
+			state.box.y,
+			state.box.w,
+			state.box.h
+		);
 	},
 	(title, state) => {
 		// Clear destination area

diff --git a/js/index.js b/js/index.js
@@ -130,25 +130,6 @@ function startup() {
 	document.getElementById("scaleFactor").value = scaleFactor;
 }
 
-function drop(imageParams) {
-	const img = new Image();
-	img.onload = function () {
-		writeArbitraryImage(img, imageParams.x, imageParams.y);
-	};
-	img.src = arbitraryImageBase64;
-}
-
-function writeArbitraryImage(img, x, y) {
-	commands.runCommand("drawImage", "Image Stamp", {
-		x,
-		y,
-		image: img,
-	});
-	blockNewImages = false;
-	placingArbitraryImage = false;
-	document.getElementById("preloadImage").files = null;
-}
-
 function dream(
 	x,
 	y,
@@ -611,43 +592,6 @@ function drawBackground() {
 	}
 }
 
-function preloadImage() {
-	// possible firefox-only bug?
-	// attempt to prevent requesting a dream if double-clicking a selected image
-	document.getElementById("overlayCanvas").onmousemove = null;
-	document.getElementById("overlayCanvas").onmousedown = null;
-	document.getElementById("overlayCanvas").onmouseup = null;
-
-	var file = document.getElementById("preloadImage").files[0];
-	var reader = new FileReader();
-	reader.onload = function (evt) {
-		var imgCanvas = document.createElement("canvas");
-		var imgCtx = imgCanvas.getContext("2d");
-		arbitraryImage = new Image();
-		arbitraryImage.onload = function () {
-			blockNewImages = true;
-			// now put it into imagedata for canvas fun
-			imgCanvas.width = arbitraryImage.width;
-			imgCanvas.height = arbitraryImage.height;
-			imgCtx.drawImage(arbitraryImage, 0, 0);
-			arbitraryImageData = imgCtx.getImageData(
-				0,
-				0,
-				arbitraryImage.width,
-				arbitraryImage.height
-			); // can't use that to drawImage on a canvas...
-			arbitraryImageBitmap = createImageBitmap(arbitraryImageData); // apparently that either... maybe just the raw image?
-			arbitraryImageBase64 = imgCanvas.toDataURL();
-			placingArbitraryImage = true;
-			document.getElementById("overlayCanvas").onmousemove = mouseMove;
-			document.getElementById("overlayCanvas").onmousedown = mouseDown;
-			document.getElementById("overlayCanvas").onmouseup = mouseUp;
-		};
-		arbitraryImage.src = evt.target.result;
-	};
-	reader.readAsDataURL(file);
-}
-
 function downloadCanvas() {
 	var link = document.createElement("a");
 	link.download =