Add option to adjust opacity

Saving all textures in image editor now marks project as saved
Add cancel_on_click_outside option for dialogs

js/boot_loader.js

@@ -57,7 +57,7 @@ Blockbench.startup_count = parseInt(localStorage.getItem('startups')||0) + 1;
 localStorage.setItem('startups', Blockbench.startup_count);
 
 document.getElementById('blackout').addEventListener('click', event => {
-	if (typeof open_interface.cancel == 'function') {
+	if (typeof open_interface.cancel == 'function' && open_interface.cancel_on_click_outside !== false) {
 		open_interface.cancel(event);
 	} else if (typeof open_interface == 'string' && open_dialog) {
 		$('dialog#'+open_dialog).find('.cancel_btn:not([disabled])').trigger('click');

js/interface/dialog.js

@@ -407,6 +407,7 @@ window.Dialog = class Dialog {
 		this.width = options.width
 		this.draggable = options.draggable
 		this.darken = options.darken !== false
+		this.cancel_on_click_outside = options.cancel_on_click_outside !== false
 		this.singleButton = options.singleButton
 		this.buttons = options.buttons instanceof Array ? options.buttons : (options.singleButton ? ['dialog.close'] : ['dialog.confirm', 'dialog.cancel'])
 		this.form_first = options.form_first;

js/interface/menu_bar.js

@@ -273,6 +273,7 @@ const MenuBar = {
 		new BarMenu('texture', [
 			'adjust_brightness_contrast',
 			'adjust_saturation_hue',
+			'adjust_opacity',
 			'invert_colors',
 			'adjust_curves',
 			'_',

js/texturing/edit_texture.js

@@ -433,6 +433,80 @@ BARS.defineActions(function() {
 			}).show();
 		}
 	})
+	new Action('adjust_opacity', {
+		icon: 'gradient',
+		category: 'textures',
+		condition: {modes: ['paint'], method: () => Texture.all.length},
+		click() {
+			let textures = getTextures();
+			let original_imgs = textures.map(tex => {
+				return tex.img.cloneNode();
+			})
+			Undo.initEdit({textures, bitmap: true});
+
+			new Dialog({
+				id: 'adjust_opacity',
+				title: 'action.adjust_opacity',
+				darken: false,
+				component: {
+					data() {return {
+						show_preview,
+						opacity: 100,
+						textures
+					}},
+					methods: {
+						change() {
+							textures.forEach((texture, i) => {
+								texture.edit((canvas) => {
+									let ctx = canvas.getContext('2d');
+									ctx.clearRect(0, 0, texture.width, texture.height);
+									ctx.filter = `opacity(${this.opacity}%)`;
+									ctx.drawImage(original_imgs[i], 0, 0);
+									if (this.opacity > 100) {
+										ctx.filter = `opacity(${this.opacity-100}%)`;
+										ctx.drawImage(original_imgs[i], 0, 0);
+									}
+
+									let ref_ctx = this.$refs.canvas[i].getContext('2d');
+									ref_ctx.clearRect(0, 0, texture.width, texture.height);
+									ref_ctx.drawImage(canvas, 0, 0);
+
+								}, {no_undo: true, use_cache: true});
+							})
+						},
+						togglePreview() {
+							this.show_preview = show_preview = !this.show_preview;
+						}
+					},
+					template: `
+						<div>
+							<div class="texture_adjust_previews checkerboard" :class="{folded: !show_preview}">
+								<canvas v-for="(texture, i) in textures" :height="texture.height" :width="texture.width" ref="canvas" />
+							</div>
+							<div class="tool texture_adjust_preview_toggle" @click="togglePreview()"><i class="material-icons">{{ show_preview ? 'expand_more' : 'expand_less' }}</i></div>
+							<div class="bar slider_input_combo">
+								<input type="range" class="tool" min="0" max="200" step="0.1" v-model="opacity" @input="change()">
+								<input lang="en" type="number" class="tool" style="width: 64px;" min="0" max="200" step="0.1" v-model.number="opacity" @input="change()">
+							</div>
+						</div>
+					`,
+					mounted() {
+						textures.forEach((texture, i) => {
+							let ref_ctx = this.$refs.canvas[i].getContext('2d');
+							ref_ctx.clearRect(0, 0, texture.width, texture.height);
+							ref_ctx.drawImage(texture.img, 0, 0);
+						})
+					}
+				},
+				onConfirm() {
+					Undo.finishEdit('Adjust opacity');
+				},
+				onCancel() {
+					Undo.cancelEdit();
+				}
+			}).show();
+		}
+	})
 
 	new Action('flip_texture_x', {
 		icon: 'icon-mirror_x',

js/texturing/textures.js

@@ -1132,6 +1132,9 @@ class Texture {
 				scope.saved = true;
 			})
 		}
+		if (Format.id == 'image' && !Texture.all.find(t => !t.saved)) {
+			Project.saved = true;
+		}
 		return this;
 	}
 	exportEmissionMap() {

lang/en.json

@@ -1234,6 +1234,8 @@
 	"action.adjust_saturation_hue.desc": "Adjust the saturation and hue of the selected texture",
 	"action.invert_colors": "Invert Colors",
 	"action.invert_colors.desc": "Invert all colors of the selected texture",
+	"action.adjust_opacity": "Adjust Opacity...",
+	"action.adjust_opacity.desc": "Adjust the opacity of the selected texture",
 	"action.adjust_curves": "Adjust Curves...",
 	"action.adjust_curves.desc": "Adjust the brightness curves of the selected texture",
 	"action.flip_texture_x": "Flip Texture Horizontally",