Rewrite preview control element scaling

closes #743
+ Add support for multiple events in Blockbench.on()

js/animations/animation.js

@@ -1310,9 +1310,7 @@ const Animator = {
 	updateMotionTrailScale() {
 		Animator.motion_trail.children.forEach((object) => {
 			if (object.isLine) return;
-			var scaleVector = new THREE.Vector3();
-			var scale = scaleVector.subVectors(object.position, Preview.selected.camera.position).length() / 86;
-			if (Blockbench.isMobile) scale *= 4;
+			let scale = Preview.selected?.calculateControlScale(object.position) * 0.6;
 			object.scale.set(scale, scale, scale)
 		})
 	},

js/api.js

@@ -1,6 +1,6 @@
 const Blockbench = {
 	isWeb: !isApp,
-	isMobile: window.innerWidth <= 640,
+	isMobile: !isApp && window.innerWidth <= 640,
 	version: appVersion,
 	platform: 'web',
 	flags: [],
@@ -278,11 +278,13 @@ const Blockbench = {
 			}
 		}
 	},
-	addListener(event_name, cb) {
-		if (!this.events[event_name]) {
-			this.events[event_name] = []
-		}
-		this.events[event_name].safePush(cb)
+	addListener(event_names, cb) {
+		event_names.split(' ').forEach(event_name => {
+			if (!this.events[event_name]) {
+				this.events[event_name] = [];
+			}
+			this.events[event_name].safePush(cb);
+		})
 		return Blockbench;
 	},
 	on(event_name, cb) {

js/interface/interface.js

@@ -206,7 +206,7 @@ function setupInterface() {
 
 	setupPanels()
 	
-	if (Blockbench.isMobile) {
+	if (Blockbench.isMobile && window.setupMobilePanelSelector) {
 		setupMobilePanelSelector()
 	}
 
@@ -361,7 +361,8 @@ function resizeWindow(event) {
 			dialog.css('top', limitNumber(window.innerHeight-dialog.outerHeight(), 0, 4e3) + 'px')
 		}
 	}
-	BARS.updateToolToolbar()
+	BARS.updateToolToolbar();
+	Blockbench.dispatchEvent('resize_window', event);
 }
 $(window).on('resize orientationchange', resizeWindow)
 

js/preview/canvas.js

@@ -64,16 +64,15 @@ const Canvas = {
 	face_order: ['east', 'west', 'up', 'down', 'south', 'north'],
 	//Misc
 	raycast(event) {
-		var preview = Canvas.getCurrentPreview()
+		var preview = Canvas.getHoveredPreview()
 		if (preview) {
 			return preview.raycast(event)
 		} else {
 			return false
 		}
 	},
-	getCurrentPreview() {
-		if (quad_previews.current) return quad_previews.current;
-		var canvas = $('.preview:hover').get(0)
+	getHoveredPreview() {
+		var canvas = $('.preview canvas:hover').get(0)
 		if (canvas) return canvas.preview
 	},
 	withoutGizmos(cb) {

js/preview/preview.js

@@ -141,7 +141,7 @@ class Preview {
 		//Cameras
 		this.isOrtho = false
 		this.angle = null;
-		this.camPers = new THREE.PerspectiveCamera(45, 16 / 9, 1, 30000)
+		this.camPers = new THREE.PerspectiveCamera(settings.fov.value, 16 / 9, 1, 30000)
 		this.camOrtho = new THREE.OrthographicCamera(-600,  600, -400, 400, -200, 20000);
 		this.camOrtho.backgroundHandle = [{n: false, a: 'x'}, {n: false, a: 'y'}]
 		this.camOrtho.axis = null
@@ -682,6 +682,18 @@ class Preview {
 		delete this.rclick_cooldown;
 		return this;
 	}
+	calculateControlScale(position) {
+		if (this.isOrtho) {
+			return 0.35 / this.camera.zoom;
+		} else {
+			var scaleVector = new THREE.Vector3();
+			var scale = scaleVector.subVectors(position, this.camera.position).length() / 4;
+			scale *= this.camera.fov / this.height;
+			if (Blockbench.isMobile) scale *= 2;
+			return scale;
+		}
+
+	}
 	//Selection Rectangle
 	startSelRect(event) {
 		var scope = this;

js/preview/transformer.js

@@ -657,27 +657,10 @@
 		};
 		this.getScale = function() {
 
-			var scope = Transformer;
-			scope.camera.updateMatrixWorld();
-			camPosition.setFromMatrixPosition( scope.camera.matrixWorld );
-			//camRotation.setFromRotationMatrix( tempMatrix.extractRotation( scope.camera.matrixWorld ) );
-			//eye.copy( camPosition ).sub( worldPosition ).normalize();
-			//this.position.copy( worldPosition );
-			if ( scope.camera instanceof THREE.PerspectiveCamera ) {
+			Transformer.camera.updateMatrixWorld();
+			camPosition.setFromMatrixPosition( Transformer.camera.matrixWorld );
 
-				scale = worldPosition.distanceTo( camPosition )/6
-					  * (settings.control_size.value / 20)
-					  * (1000 / scope.camera.preview.height)
-					  * Settings.get('fov') / 45;
-
-			} else if ( scope.camera instanceof THREE.OrthographicCamera ) {
-
-				eye.copy( camPosition ).normalize();
-				scale = (6 / scope.camera.zoom) * (settings.control_size.value / 20);
-
-			}
-			scale *= (1000+scope.camera.preview.height)/2000
-			return scale;
+			return Transformer.camera.preview.calculateControlScale(worldPosition) * settings.control_size.value * 0.74;
 		}
 		this.setScale = function(sc) {
 			Transformer.scale.set(sc,sc,sc)
@@ -694,17 +677,8 @@
 			this.getWorldPosition(worldPosition)
 			this.setScale(this.getScale());
 
-			//Origin
-			if ( scope.camera instanceof THREE.PerspectiveCamera ) {
-
-				eye.copy( camPosition ).sub( worldPosition ).normalize();
-				scale = rot_origin.getWorldPosition(new THREE.Vector3()).distanceTo( camPosition ) / 16 * (settings.origin_size.value / 20) * Settings.get('fov') / 45;;
-
-			} else if ( scope.camera instanceof THREE.OrthographicCamera ) {
-
-				eye.copy( camPosition ).normalize();
-				scale = (6 / scope.camera.zoom) * (settings.origin_size.value / 50);
-			}
+			// Origin
+			let scale = scope.camera.preview.calculateControlScale(rot_origin.getWorldPosition(new THREE.Vector3())) * settings.origin_size.value * 0.2;
 			rot_origin.scale.set( scale, scale, scale );
 			if (rot_origin.base_scale) {
 				rot_origin.scale.multiply(rot_origin.base_scale);

js/transform.js

@@ -384,15 +384,12 @@ const Vertexsnap = {
 	},
 	updateVertexSize: function() {
 		Vertexsnap.vertexes.children.forEach(function(v,i) {
-			var scaleVector = new THREE.Vector3();
-			var scale = scaleVector.subVectors(v.position, Transformer.camera.position).length() / 500;
-			scale = (Math.sqrt(scale)/3 + scale/1.4) * 1.7
-			if (Blockbench.isMobile) scale *= 4;
-			v.scale.set(scale, scale, scale)
+			let scale = Preview.selected?.calculateControlScale(v.position) * 0.6;
+			v.scale.set(scale, scale, scale);
 		})
 	}
 }
-Blockbench.on('update_camera_position', e => {
+Blockbench.on('update_camera_position resize_window', e => {
 	if (Toolbox && Toolbox.selected.id == 'vertex_snap_tool') {
 		Vertexsnap.updateVertexSize();
 	}