From 54a12ccc1578fa00f104f5924430678f13ef0f89 Mon Sep 17 00:00:00 2001 From: JannisX11 Date: Wed, 21 Oct 2020 18:31:26 +0200 Subject: [PATCH] Rewrite preview control element scaling closes #743 + Add support for multiple events in Blockbench.on() --- js/animations/animation.js | 4 +--- js/api.js | 14 ++++++++------ js/interface/interface.js | 5 +++-- js/preview/canvas.js | 7 +++---- js/preview/preview.js | 14 +++++++++++++- js/preview/transformer.js | 36 +++++------------------------------- js/transform.js | 9 +++------ 7 files changed, 36 insertions(+), 53 deletions(-) diff --git a/js/animations/animation.js b/js/animations/animation.js index 655070fc..1b82eb39 100644 --- a/js/animations/animation.js +++ b/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) }) }, diff --git a/js/api.js b/js/api.js index 8b274951..25dc71c3 100644 --- a/js/api.js +++ b/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) { diff --git a/js/interface/interface.js b/js/interface/interface.js index a6419897..a5131c86 100644 --- a/js/interface/interface.js +++ b/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) diff --git a/js/preview/canvas.js b/js/preview/canvas.js index aff9cbfe..ac474472 100644 --- a/js/preview/canvas.js +++ b/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) { diff --git a/js/preview/preview.js b/js/preview/preview.js index 6af96112..54c247b6 100644 --- a/js/preview/preview.js +++ b/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; diff --git a/js/preview/transformer.js b/js/preview/transformer.js index 2cae9bc7..455fba8f 100644 --- a/js/preview/transformer.js +++ b/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); diff --git a/js/transform.js b/js/transform.js index e9b6ae05..2e2329bc 100644 --- a/js/transform.js +++ b/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(); }