Fix #1629 Image editor disappears when enabling quad view

Add image_editor format feature

js/desktop.js

@@ -190,7 +190,7 @@ async function updateRecentProjectThumbnail() {
 
 	let thumbnail;
 
-	if (Format.id == 'image' && Texture.all.length) {		
+	if (Format.image_editor && Texture.all.length) {		
 		await new Promise((resolve, reject) => {
 			let tex = Texture.getDefault();
 			let frame = new CanvasFrame(180, 100);

js/interface/interface.js

@@ -518,7 +518,7 @@ function resizeWindow(event) {
 			element.preview_controller.updateWindowSize(element);
 		}
 	})
-	if (Format.id == 'image') {
+	if (Format.image_editor) {
 		UVEditor.updateSize();
 	}
 	var dialog = $('dialog#'+open_dialog)

js/io/format.js

@@ -244,6 +244,7 @@ new Property(ModelFormat, 'boolean', 'select_texture_for_particles');
 new Property(ModelFormat, 'boolean', 'texture_mcmeta');
 new Property(ModelFormat, 'boolean', 'bone_binding_expression');
 new Property(ModelFormat, 'boolean', 'animation_files');
+new Property(ModelFormat, 'boolean', 'image_editor');
 new Property(ModelFormat, 'boolean', 'edit_mode', {default: true});
 new Property(ModelFormat, 'boolean', 'paint_mode', {default: true});
 new Property(ModelFormat, 'boolean', 'pose_mode');

js/io/formats/image.js

@@ -90,6 +90,7 @@ new ModelFormat('image', {
 	single_texture: true,
 	animated_textures: true,
 	edit_mode: false,
+	image_editor: true,
 	new() {
 		if (newProject(this)) {
 			TextureGenerator.addBitmapDialog();

js/io/project.js

@@ -265,7 +265,7 @@ class ModelProject {
 	}
 	unselect(closing) {
 		if (!closing) {
-			if (Format.id !== 'image') {
+			if (!Format.image_editor) {
 				this.thumbnail = Preview.selected.canvas.toDataURL();
 			} else if (Texture.all.length) {
 				this.thumbnail = Texture.getDefault()?.source;
@@ -795,7 +795,7 @@ onVueSetup(() => {
 					img.src = project.thumbnail;
 					img.attributes.width = '240px';
 					img.className = 'project_thumbnail';
-					if (project.format.id == 'image') img.classList.add('pixelated');
+					if (project.Format.image_editor) img.classList.add('pixelated');
 					let offset = $(event.target).offset();
 					img.style.left = (offset.left) + 'px';
 					img.style.top = (offset.top + event.target.clientHeight+2) + 'px';

js/modes.js

@@ -152,7 +152,7 @@ BARS.defineActions(function() {
 
 			Panels.uv.handle.firstChild.textContent = tl('mode.paint');
 
-			if (Format.id == 'image') {
+			if (Format.image_editor) {
 				let old_color_slot = Panels.color.slot;
 				Panels.color.position_data = Interface.data.panels.color_2d;
 				if (Panels.color.slot !== old_color_slot) Panels.color.moveTo(Panels.color.slot);

js/outliner/outliner.js

@@ -1364,7 +1364,7 @@ Interface.definePanels(function() {
 
 	new Panel('outliner', {
 		icon: 'list_alt',
-		condition: {modes: ['edit', 'paint', 'animate', 'pose'], method: () => Format.id !== 'image'},
+		condition: {modes: ['edit', 'paint', 'animate', 'pose'], method: () => !Format.image_editor},
 		default_position: {
 			slot: 'right_bar',
 			float_position: [0, 0],

js/preview/preview.js

@@ -2134,7 +2134,7 @@ BARS.defineActions(function() {
 	new Action('toggle_quad_view', {
 		icon: 'grid_view',
 		category: 'view',
-		condition: () => !Modes.display,
+		condition: () => !Modes.display && !Format.image_editor,
 		keybind: new Keybind({key: 9}),
 		click: function () {
 			main_preview.toggleFullscreen()
@@ -2143,6 +2143,7 @@ BARS.defineActions(function() {
 	new Action('focus_on_selection', {
 		icon: 'center_focus_weak',
 		category: 'view',
+		condition: () => !Format.image_editor,
 		click: function () {
 			if (!Project) return;
 			if (Prop.active_panel == 'uv') {

js/texturing/painter.js

@@ -2241,7 +2241,7 @@ BARS.defineActions(function() {
 	new Toggle('painting_grid', {
 		icon: 'grid_on',
 		category: 'view',
-		condition: () => Modes.paint && Format.id != 'image',
+		condition: () => Modes.paint && !Format.image_editor,
 		keybind: new Keybind({key: 'g'}),
 		linked_setting: 'painting_grid'
 	})

js/texturing/textures.js

@@ -572,7 +572,7 @@ class Texture {
 		return this;
 	}
 	updateMaterial() {
-		if (Format.id == 'image') return this;
+		if (Format.image_editor) return this;
 		let mat = this.getMaterial();
 		mat.name = this.name;
 		mat.map.image = this.img;
@@ -736,7 +736,7 @@ class Texture {
 		this.selected = true
 		Texture.selected = this;
 		this.scrollTo();
-		if (Format.id == 'image') {
+		if (Format.image_editor) {
 			Project.texture_height = this.display_height;
 			Project.texture_width = this.width;
 		}
@@ -1265,7 +1265,7 @@ class Texture {
 				scope.saved = true;
 			})
 		}
-		if (Format.id == 'image' && !Texture.all.find(t => !t.saved)) {
+		if (Format.image_editor && !Texture.all.find(t => !t.saved)) {
 			if (isApp) {
 				Format.codec.afterSave();
 			} else {
@@ -1464,9 +1464,9 @@ class Texture {
 			{
 				icon: 'draw',
 				name: 'menu.texture.edit_in_blockbench',
-				condition: (texture) => Format.id !== 'image' && texture.path,
+				condition: (texture) => !Format.image_editor && texture.path,
 				click(texture) {
-					let existing_tab = ModelProject.all.find(project => project.format.id == 'image' && project.textures.find(t => t.path && t.path == texture.path));
+					let existing_tab = ModelProject.all.find(project => project.Format.image_editor && project.textures.find(t => t.path && t.path == texture.path));
 					if (existing_tab) {
 						let tex2 = existing_tab.textures.find(t => t.path && t.path == texture.path);
 						existing_tab.select();

js/texturing/uv.js

@@ -1737,7 +1737,7 @@ Interface.definePanels(function() {
 		icon: 'photo_size_select_large',
 		selection_only: true,
 		expand_button: true,
-		condition: {modes: ['edit', 'paint'], method: () => Format.id != 'image'},
+		condition: {modes: ['edit', 'paint'], method: () => !Format.image_editor},
 		display_condition: () => UVEditor.getMappableElements().length || Modes.paint,
 		default_position: {
 			slot: 'left_bar',
@@ -1749,14 +1749,14 @@ Interface.definePanels(function() {
 			bottom: Toolbars.UVEditor
 		},
 		onResize: function() {
-			UVEditor.vue.hidden = Format.id == 'image' ? false : !this.isVisible();
+			UVEditor.vue.hidden = Format.image_editor ? false : !this.isVisible();
 			Vue.nextTick(() => {
 				UVEditor.vue.updateSize();
 			})
 		},
 		onFold: function() {
 			Vue.nextTick(() => {
-				UVEditor.vue.hidden = Format.id == 'image' ? false : !this.isVisible();
+				UVEditor.vue.hidden = Format.image_editor ? false : !this.isVisible();
 			})
 		},
 		component: {
@@ -1849,11 +1849,11 @@ Interface.definePanels(function() {
 				updateSize() {
 					if (!this.$refs.viewport) return;
 					let old_size = this.width;
-					let size = Format.id == 'image'
+					let size = Format.image_editor
 							? Math.floor(Math.clamp(Interface.center_screen.clientWidth - 10, 64, 1e5))
 							: Math.floor(Math.clamp(UVEditor.panel.width - 10, 64, 1e5));
 					this.width = size;
-					if (Format.id == 'image') {
+					if (Format.image_editor) {
 						this.height = Interface.center_screen.clientHeight - 38;
 
 					} else if (Panels.uv.slot.includes('_bar')) {