Add custom theme restore button

Fix copy paste tool
Add Sketchfab categories
Fix #1054
Fix #1067 Start menu bottom graphic icon offset
Fix template generator face rotation accuracy
Update meta data
[ci-build]

README.md

@@ -1,7 +1,7 @@
 # Blockbench
 
-Blockbench is a free, modern model editor for boxy models and pixel art textures.
-Models can be exported for Minecraft Java and Bedrock Edition as well as most game engines and other 3D applications.
+Blockbench is a free, modern model editor for low-poly and boxy models with pixel art textures.
+Models can be exported into standardized formats, to be shared, rendered, 3D-printed, or used in game engines. There are also multiple dedicated formats for Minecraft Java and Bedrock Edition with format-specific features. 
 
 Blockbench features a modern and intuitive UI, plugin support and innovative features. It is the industry standard for creating custom 3D models for the Minecraft Marketplace.
 

css/dialogs.css

@@ -670,6 +670,23 @@
 	.theme_preview.borders .theme_preview_sidebar:last-child {
 		border-left: 2px solid var(--color-border);
 	}
+	.theme_backup_bar {
+		padding: 2px 6px;
+		border: 2px solid var(--color-accent);
+		margin-bottom: 7px;
+		cursor: pointer;
+	}
+	.theme_backup_bar:hover {
+		color: var(--color-light);
+	}
+	.theme_backup_bar > i {
+		padding: 1px;
+		color: var(--color-text);
+		float: right;
+	}
+	.theme_backup_bar > i:hover {
+		color: var(--color-light);
+	}
 
 	/*About*/
 	#about_page_title {

css/window.css

@@ -595,6 +595,8 @@
 	}
 	#start_screen h3 {
 		margin: 0;
+	}
+	#start_screen #start-files h3 {
 		padding-bottom: 0;
 		height: auto;
 		font-size: 18px;
@@ -730,16 +732,16 @@
 		max-width: 100%;
 		flex-grow: 0;
 	}
-	#start_screen div.start_screen_left.graphic {
+	#start_screen div.graphic:not(.graphic_icon) {
 		background-size: cover;
 		position: relative;
 		padding: 0;
 	}
-	#start_screen div.start_screen_left.graphic p {
+	#start_screen div.graphic p {
 		position: absolute;
 		font-size: 0.96em;
 	}
-	#start_screen div.start_screen_left i.graphic_icon {
+	#start_screen div.graphic.graphic_icon i {
 		font-size: 40px;
 		width: 12px;
 		margin-top: 6px;

index.html

@@ -25,7 +25,7 @@
 	<script>
 		if (typeof module === 'object') {window.module = module; module = undefined;}//jQuery Fix
 		const isApp = typeof require !== 'undefined';
-		const appVersion = '4.0.0-beta.2';
+		const appVersion = '4.0.0-beta.3';
 
 
 		if (localStorage.getItem('theme')) {

js/copy_paste.js

@@ -30,7 +30,7 @@ const Clipbench = {
 		if (Animator.open && Timeline.animators.length && (Timeline.selected.length || mode === 2) && ['keyframe', 'timeline', 'preview'].includes(p)) {
 			return Clipbench.types.keyframe
 		}
-		if (Modes.edit && p == 'preview' && Mesh.selected[0] && Mesh.selected[0].getSelectedVertices().length) {
+		if (Modes.edit && p == 'preview' && Mesh.selected[0] && Mesh.selected[0].getSelectedVertices().length && (mode !== 2 || Clipbench.vertices)) {
 			return Clipbench.types.mesh_selection;
 		}
 		if (mode == 2 && Modes.edit && Format.meshes && Clipbench.last_copied == 'mesh_selection' && (p == 'preview' || p == 'outliner')) {

js/interface/interface.js

@@ -553,7 +553,7 @@ function addStartScreenSection(id, data) {
 
 		if (data.graphic.type === 'icon') {
 			var icon = Blockbench.getIconNode(data.graphic.icon)
-			$(icon).addClass('graphic_icon')
+			left.addClass('graphic_icon')
 			left.append(icon)
 		} else {
 			left.css('background-image', `url('${data.graphic.source}')`)
@@ -704,7 +704,7 @@ function addStartScreenSection(id, data) {
 				color: 'var(--color-back)',
 				graphic: {type: 'icon', icon: 'fa-archive'},
 				text: [
-					{type: 'h1', text: tl('message.recover_backup.title')},
+					{type: 'h2', text: tl('message.recover_backup.title')},
 					{text: tl('message.recover_backup.message')},
 					{type: 'button', text: tl('dialog.ok'), click: (e) => {
 						loadModelFile({content: backup_model, path: 'backup.bbmodel', no_file: true})
@@ -725,7 +725,7 @@ function addStartScreenSection(id, data) {
 				text_color: '#ffffff',
 				graphic: {type: 'icon', icon: 'fab.fa-twitter'},
 				text: [
-					{type: 'h1', text: 'Blockbench on Twitter'},
+					{type: 'h2', text: 'Blockbench on Twitter'},
 					{text: 'Follow Blockbench on Twitter for the latest news as well as cool models from the community! [twitter.com/blockbench](https://twitter.com/blockbench/)'}
 				],
 				last: true
@@ -738,7 +738,7 @@ function addStartScreenSection(id, data) {
 				text_color: '#ffffff',
 				graphic: {type: 'icon', icon: 'fab.fa-discord'},
 				text: [
-					{type: 'h1', text: 'Discord Server'},
+					{type: 'h2', text: 'Discord Server'},
 					{text: 'You need help with modeling or you want to chat about Blockbench? Join the official [Blockbench Discord](https://discord.gg/WVHg5kH)!'}
 				],
 				last: true

js/interface/themes.js

@@ -113,6 +113,7 @@ const CustomTheme = {
 			},
 			component: {
 				data: {
+					backup: '',
 					data: CustomTheme.data,
 					open_category: 'select',
 					themes: CustomTheme.themes
@@ -154,6 +155,15 @@ const CustomTheme = {
 						CustomTheme.loadTheme(theme);
 						saveChanges();
 					},
+					loadBackup() {
+						CustomTheme.loadTheme(JSON.parse(CustomTheme.backup_data));
+						CustomTheme.data.customized = true;
+						this.clearBackup();
+					},
+					clearBackup() {
+						this.backup = '';
+						CustomTheme.backup_data = null;
+					},
 					customizeTheme() {
 						CustomTheme.customizeTheme();
 					},
@@ -193,6 +203,10 @@ const CustomTheme = {
 				template: `
 					<div id="theme_editor">
 						<div v-if="open_category == 'select'">
+							<div v-if="backup" class="theme_backup_bar" @click.stop="loadBackup()">
+								{{ tl('layout.restore_backup', [backup]) }}
+								<i class="material-icons" @click.stop="clearBackup()">clear</i>
+							</div>
 							<h2 class="i_b">${tl('layout.select')}</h2>
 
 							<div id="theme_list">
@@ -375,13 +389,21 @@ const CustomTheme = {
 	},
 	loadTheme(theme) {
 		var app = CustomTheme.data;
+
+		if (app.customized && app.name) {
+			// Backup
+			CustomTheme.dialog.content_vue.backup = app.name;
+			CustomTheme.backup_data = JSON.stringify(app);
+		}
+
 		app.id = '';
 		app.name = '';
 		app.author = '';
 		app.main_font = '';
 		app.headline_font = '';
 		app.code_font = '';
 		app.borders = false;
+		app.customized = false;
 		Merge.string(app, theme, 'id')
 		Merge.string(app, theme, 'name')
 		Merge.string(app, theme, 'author')
@@ -397,7 +419,6 @@ const CustomTheme = {
 			}
 		}
 		Merge.string(app, theme, 'css');
-		app.customized = false;
 		this.updateColors();
 		this.updateSettings();
 	},

js/io/io.js

@@ -297,15 +297,39 @@ function uploadSketchfabModel() {
 	if (Project.name) tag_suggestions.push(clean_project_name);
 	if (clean_project_name.includes('-')) tag_suggestions.safePush(...clean_project_name.split('-').filter(s => s.length > 2 && s != 'geo').reverse());
 
+	let categories = {
+		"": "-",
+		"animals-pets": "Animals & Pets",
+		"architecture": "Architecture",
+		"art-abstract": "Art & Abstract",
+		"cars-vehicles": "Cars & Vehicles",
+		"characters-creatures": "Characters & Creatures",
+		"cultural-heritage-history": "Cultural Heritage & History",
+		"electronics-gadgets": "Electronics & Gadgets",
+		"fashion-style": "Fashion & Style",
+		"food-drink": "Food & Drink",
+		"furniture-home": "Furniture & Home",
+		"music": "Music",
+		"nature-plants": "Nature & Plants",
+		"news-politics": "News & Politics",
+		"people": "People",
+		"places-travel": "Places & Travel",
+		"science-technology": "Science & Technology",
+		"sports-fitness": "Sports & Fitness",
+		"weapons-military": "Weapons & Military",
+	}
+
 	var dialog = new Dialog({
 		id: 'sketchfab_uploader',
 		title: 'dialog.sketchfab_uploader.title',
 		width: 640,
 		form: {
 			token: {label: 'dialog.sketchfab_uploader.token', value: settings.sketchfab_token.value, type: 'password'},
 			about_token: {type: 'info', text: tl('dialog.sketchfab_uploader.about_token', ['[sketchfab.com/settings/password](https://sketchfab.com/settings/password)'])},
-			name: {label: 'dialog.sketchfab_uploader.name'},
+			name: {label: 'dialog.sketchfab_uploader.name', value: capitalizeFirstLetter(Project.name.replace(/\..+/, '').replace(/[_.-]/g, ' '))},
 			description: {label: 'dialog.sketchfab_uploader.description', type: 'textarea'},
+			category1: {label: 'dialog.sketchfab_uploader.category', type: 'select', options: categories, value: ''},
+			category2: {label: 'dialog.sketchfab_uploader.category2', type: 'select', options: categories, value: ''},
 			tags: {label: 'dialog.sketchfab_uploader.tags', placeholder: 'Tag1 Tag2'},
 			tag_suggestions: {label: 'dialog.sketchfab_uploader.suggested_tags', type: 'buttons', buttons: tag_suggestions, click(index) {
 				let {tags} = dialog.getFormResult();
@@ -316,9 +340,7 @@ function uploadSketchfabModel() {
 				}
 			}},
 			animations: {label: 'dialog.sketchfab_uploader.animations', value: true, type: 'checkbox', condition: (Format.animation_mode && Animator.animations.length)},
-			//color: {type: 'color', label: 'dialog.sketchfab_uploader.color'},
-			draft: {label: 'dialog.sketchfab_uploader.draft', type: 'checkbox'},
-			// Category
+			draft: {label: 'dialog.sketchfab_uploader.draft', type: 'checkbox', value: true},
 			divider: '_',
 			private: {label: 'dialog.sketchfab_uploader.private', type: 'checkbox'},
 			password: {label: 'dialog.sketchfab_uploader.password'},
@@ -338,11 +360,18 @@ function uploadSketchfabModel() {
 			data.append('description', formResult.description)
 			data.append('tags', formResult.tags)
 			data.append('isPublished', !formResult.draft)
-			//data.append('background', JSON.stringify({color: formResult.color.toHexString()}))
+			//data.append('background', JSON.stringify({color: '#00ff00'}))
 			data.append('private', formResult.private)
 			data.append('password', formResult.password)
 			data.append('source', 'blockbench')
 
+			if (formResult.category1 || formResult.category2) {
+				let selected_categories = [];
+				if (formResult.category1) selected_categories.push(formResult.category1);
+				if (formResult.category2) selected_categories.push(formResult.category2);
+				data.append('categories', selected_categories);
+			}
+
 			settings.sketchfab_token.value = formResult.token
 
 			Codecs.gltf.compile({animations: formResult.animations}, (content) => {

js/texturing/texture_generator.js

@@ -680,7 +680,16 @@ const TextureGenerator = {
 							)
 							let snap = 2;
 							rot = (Math.radToDeg(rot) + 360) % 90;
-							let rounded = Math.round(rot / snap) * snap;
+							let rounded
+							let last_difference = snap;
+							for (let rounded_angle in precise_rotation_angle) {
+								let precise = precise_rotation_angle[rounded_angle];
+								if (Math.abs(rot - precise) < last_difference) {
+									last_difference = Math.abs(rot - precise);
+									rounded = rounded_angle;
+								}
+							}
+							if (!rounded) rounded = Math.round(rot / snap) * snap;
 							if (rotation_angles[rounded]) {
 								rotation_angles[rounded]++;
 							} else {
@@ -1093,7 +1102,6 @@ const TextureGenerator = {
 				face.uv[vertices[1]] = [x+0.25, y+0.25];
 				face.uv[vertices[2]] = [x+0.25, y+0.75];
 				if (vertices[3]) face.uv[vertices[3]] = [x+0.75, y+0.75];
-				console.log(vertices, face.uv)
 			}
 		})
 		var dataUrl = canvas.toDataURL()