From 486e6117e3f578903938b7a57efef32f477e7323 Mon Sep 17 00:00:00 2001 From: "Alex M. Sielicki" Date: Mon, 4 Dec 2017 15:28:10 -0700 Subject: [PATCH] Fixing remaining issues with STL viewer. Closes #794 --- web-server/js/slycat-3d-viewer.js | 66 ++++++++++--------- .../plugins/slycat-parameter-image/css/ui.css | 1 - web-server/templates/slycat-3d-viewer.html | 27 +++++--- 3 files changed, 51 insertions(+), 43 deletions(-) diff --git a/web-server/js/slycat-3d-viewer.js b/web-server/js/slycat-3d-viewer.js index 12a206824..891364d77 100644 --- a/web-server/js/slycat-3d-viewer.js +++ b/web-server/js/slycat-3d-viewer.js @@ -63,6 +63,13 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping' vm.controlsZoomingSpeed = ko.observable(1.5); vm.controlsPanningSpeed = ko.observable(1); vm.controlsDynamicDampingFactor = ko.observable(0.3); + + vm.rotating = ko.observable(false); + vm.rotate_x = ko.observable(false); + vm.rotate_y = ko.observable(true); + vm.rotate_z = ko.observable(false); + + vm.displayStats = ko.observable(false); /** */ var mid = params.mid || URI(window.location).segment(-1); @@ -221,15 +228,32 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping' return false; }); - $('.slycat-3d-btn-rotate', $container).on('click', function() { - onRotation.bind(this)(animation, container, renderer, scene, camera, mesh, controls, fps, ms); + vm.rotate = function(data, event) { + cancelAnimationFrame(animation.id); + if (!vm.rotating()) { + renderRotate(animation, container, renderer, scene, camera, mesh, controls, fps, ms, vm); + } else { + renderFixed(animation, renderer, scene, camera, controls, fps, ms); + } + // Toggle roation state + vm.rotating(!vm.rotating()); return false; - }); + } - $('.slycat-3d-stats-check', $container).on('change', function() { - toggleStats(container, viewer, renderer, camera, fps, ms, $(this).is(':checked'), isModel); - }); + vm.toggleStats = function(data, event) { + toggleStats(container, viewer, renderer, camera, fps, ms, !vm.displayStats(), isModel); + vm.displayStats(!vm.displayStats()); + } + vm.toggleX = function(data, event) { + vm.rotate_x(!vm.rotate_x()); + } + vm.toggleY = function(data, event) { + vm.rotate_y(!vm.rotate_y()); + } + vm.toggleZ = function(data, event) { + vm.rotate_z(!vm.rotate_z()); + } $(window).on('resize', function() { resizeViewer(container, viewer, renderer, camera, isModel); }); }, @@ -345,14 +369,14 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping' * @param {Object} fps * @param {Object} ms */ - var renderRotate = function(animation, container, renderer, scene, camera, mesh, controls, fps, ms) { + var renderRotate = function(animation, container, renderer, scene, camera, mesh, controls, fps, ms, vm) { var rr = function() { controls.update(); renderer.render(scene, camera); - var x = $('.slycat-3d-x-check', $(container)).is(':checked'); - var y = $('.slycat-3d-y-check', $(container)).is(':checked'); - var z = $('.slycat-3d-z-check', $(container)).is(':checked'); + var x = vm.rotate_x(); + var y = vm.rotate_y(); + var z = vm.rotate_z(); if (mesh && x) mesh.rotation.x -= 0.01; if (mesh && y) mesh.rotation.y -= 0.01; @@ -367,28 +391,6 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping' rr(); }; - /** - * Function executed on click on the Rotate/Fixed button. - * @param {Object} animation animation object with an 'id' attribute - * @param {Object} container - * @param {Object} renderer reference to the rendered - * @param {Object} scene reference to the scene - * @param {Object} camera reference to the camera - * @param {Object} mesh reference to the mesh (i.e. geometry) - * @param {Object} controls reference to the controls - */ - var onRotation = function(animation, container, renderer, scene, camera, mesh, controls, fps, ms) { - cancelAnimationFrame(animation.id); - - if ($(this).text() === 'Rotate') { - renderRotate(animation, container, renderer, scene, camera, mesh, controls, fps, ms); - $(this).text('Fixed'); - } else { - renderFixed(animation, renderer, scene, camera, controls, fps, ms); - $(this).text('Rotate'); - } - }; - /** * Function executed on click on the Reset button. * @param {Object} controls refernce to the controls diff --git a/web-server/plugins/slycat-parameter-image/css/ui.css b/web-server/plugins/slycat-parameter-image/css/ui.css index f2c4ea426..7618315e3 100644 --- a/web-server/plugins/slycat-parameter-image/css/ui.css +++ b/web-server/plugins/slycat-parameter-image/css/ui.css @@ -1031,7 +1031,6 @@ a { } slycat-3d-viewer .header-bar { - overflow: scroll; height: 37px; white-space: nowrap; } \ No newline at end of file diff --git a/web-server/templates/slycat-3d-viewer.html b/web-server/templates/slycat-3d-viewer.html index 870390887..773b03158 100644 --- a/web-server/templates/slycat-3d-viewer.html +++ b/web-server/templates/slycat-3d-viewer.html @@ -1,17 +1,24 @@
- - - - - - - +
+ + + + + +
- - -