From 5114f82dca915e697a303bb06b05dc7cd35b8ca4 Mon Sep 17 00:00:00 2001 From: Howard Stearns Date: Tue, 23 Jun 2015 12:07:01 -0700 Subject: [PATCH] Fix https://app.asana.com/0/32622044445063/38213714069516 --- examples/controllers/hydra/gun.js | 14 ++++---- examples/dice.js | 14 ++++---- examples/edit.js | 42 ++++-------------------- examples/libraries/toolBars.js | 53 +++++++++++++++++++++++++++---- examples/pointer.js | 12 ++----- 5 files changed, 69 insertions(+), 66 deletions(-) diff --git a/examples/controllers/hydra/gun.js b/examples/controllers/hydra/gun.js index 26eee029af..a90960a330 100644 --- a/examples/controllers/hydra/gun.js +++ b/examples/controllers/hydra/gun.js @@ -100,12 +100,12 @@ var NUM_BUTTONS = 3; var screenSize = Controller.getViewportDimensions(); var startX = screenSize.x / 2 - (NUM_BUTTONS * (BUTTON_SIZE + PADDING)) / 2; Script.include(["../../libraries/toolBars.js"]); -const persistKey = "highfidelity.gun.toolbar.position"; -var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); -toolBar.save = function () { - Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y])); -}; -var old = JSON.parse(Settings.getValue(persistKey) || '0'); +var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.gun.toolbar", function (screenSize) { + return { + x: startX, + y: (screenSize.y - (BUTTON_SIZE + PADDING)), + }; +}); var reticle = Overlays.addOverlay("image", { x: screenSize.x / 2 - (BUTTON_SIZE / 2), y: screenSize.y / 2 - (BUTTON_SIZE / 2), @@ -116,8 +116,6 @@ var reticle = Overlays.addOverlay("image", { }); var offButton = toolBar.addOverlay("image", { - x: old ? old[0] : startX, - y: old ? old[1] : (screenSize.y - (BUTTON_SIZE + PADDING)), width: BUTTON_SIZE, height: BUTTON_SIZE, imageURL: HIFI_PUBLIC_BUCKET + "images/gun/close.svg", diff --git a/examples/dice.js b/examples/dice.js index ac5d1b7426..ee88984b75 100644 --- a/examples/dice.js +++ b/examples/dice.js @@ -33,15 +33,13 @@ var BUTTON_SIZE = 32; var PADDING = 3; Script.include(["libraries/toolBars.js"]); -var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); -const persistKey = "highfidelity.dice.toolbar.position"; -toolBar.save = function () { - Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y])); -}; -var old = JSON.parse(Settings.getValue(persistKey) || '0'); +var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.dice.toolbar", function (screenSize) { + return { + x: (screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING), + y: (screenSize.y - (BUTTON_SIZE + PADDING)) + }; +}); var offButton = toolBar.addOverlay("image", { - x: old ? old[0] : (screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING), - y: old ? old[1] : (screenSize.y - (BUTTON_SIZE + PADDING)), width: BUTTON_SIZE, height: BUTTON_SIZE, imageURL: HIFI_PUBLIC_BUCKET + "images/close.png", diff --git a/examples/edit.js b/examples/edit.js index 2974397cde..92e4737f29 100644 --- a/examples/edit.js +++ b/examples/edit.js @@ -49,7 +49,6 @@ selectionManager.addEventListener(function() { lightOverlayManager.updatePositions(); }); -var windowDimensions = Controller.getViewportDimensions(); var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/"; var toolHeight = 50; var toolWidth = 50; @@ -143,7 +142,12 @@ var toolBar = (function () { browseMarketplaceButton; function initialize() { - toolBar = new ToolBar(0, 0, ToolBar.VERTICAL); + toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function (windowDimensions, toolbar) { + return { + x: windowDimensions.x - 8 - toolbar.width, + y: (windowDimensions.y - toolbar.height) / 2 + }; + }); browseMarketplaceButton = toolBar.addTool({ imageURL: toolIconUrl + "marketplace.svg", @@ -321,38 +325,6 @@ var toolBar = (function () { } } - const persistKey = "highfidelity.edit.toolbar.position"; - that.move = function () { - var newViewPort, - toolsX, - toolsY; - - newViewPort = Controller.getViewportDimensions(); - - if (toolBar === undefined) { - initialize(); - - toolBar.save = function () { - Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y])); - }; - var old = JSON.parse(Settings.getValue(persistKey) || '0'); - if (old) { - windowDimensions = newViewPort; - toolBar.move(old[0], old[1]); - return; - } - } else if (windowDimensions.x === newViewPort.x && - windowDimensions.y === newViewPort.y) { - return; - } - - windowDimensions = newViewPort; - toolsX = windowDimensions.x - 8 - toolBar.width; - toolsY = (windowDimensions.y - toolBar.height) / 2; - - toolBar.move(toolsX, toolsY); - }; - var newModelButtonDown = false; var browseMarketplaceButtonDown = false; that.mousePressEvent = function (event) { @@ -552,6 +524,7 @@ var toolBar = (function () { toolBar.cleanup(); }; + initialize(); return that; }()); @@ -931,7 +904,6 @@ var lastPosition = null; // Do some stuff regularly, like check for placement of various overlays Script.update.connect(function (deltaTime) { - toolBar.move(); progressDialog.move(); selectionDisplay.checkMove(); var dOrientation = Math.abs(Quat.dot(Camera.orientation, lastOrientation) - 1); diff --git a/examples/libraries/toolBars.js b/examples/libraries/toolBars.js index 6e72795ea5..e420b668e7 100644 --- a/examples/libraries/toolBars.js +++ b/examples/libraries/toolBars.js @@ -126,7 +126,7 @@ Tool.prototype = new Overlay2D; Tool.IMAGE_HEIGHT = 50; Tool.IMAGE_WIDTH = 50; -ToolBar = function(x, y, direction) { +ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction) { this.tools = new Array(); this.x = x; this.y = y; @@ -336,7 +336,7 @@ ToolBar = function(x, y, direction) { return (that.x <= x) && (x <= (that.x + that.width)) && (that.y <= y) && (y <= (that.y + that.height)); } - that.hover = function (enable) { + that.hover = function (enable) { // Can be overriden or extended by clients. that.isHovering = enable; if (that.back) { if (enable) { @@ -348,6 +348,26 @@ ToolBar = function(x, y, direction) { }); } }; + that.windowDimensions = Controller.getViewportDimensions(); + // Maybe fixme: Keeping the same percent of the window size isn't always the right thing. + // For example, maybe we want "keep the same percentage to whatever two edges are closest to the edge of screen". + // If we change that, the places to do so are onResizeViewport, save (maybe), and the initial move based on Settings, below. + that.onResizeViewport = function (newSize) { // Can be overridden or extended by clients. + var fractionX = that.x / that.windowDimensions.x; + var fractionY = that.y / that.windowDimensions.y; + that.windowDimensions = newSize || Controller.getViewportDimensions(); + that.move(fractionX * that.windowDimensions.x, fractionY * that.windowDimensions.y); + }; + if (optionalPersistenceKey) { + this.fractionKey = optionalPersistenceKey + '.fraction'; + this.save = function () { + var screenSize = Controller.getViewportDimensions(); + var fraction = {x: that.x / screenSize.x, y: that.y / screenSize.y}; + Settings.setValue(this.fractionKey, JSON.stringify(fraction)); + } + } else { + this.save = function () { }; // Called on move. Can be overriden or extended by clients. + } // These are currently only doing that which is necessary for toolbar hover and toolbar drag. // They have not yet been extended to tool hover/click/release, etc. this.mousePressEvent = function (event) { @@ -375,15 +395,19 @@ ToolBar = function(x, y, direction) { } that.move(that.dragOffsetX + event.x, that.dragOffsetY + event.y); }; + that.checkResize = function () { // Can be overriden or extended, but usually not. See onResizeViewport. + var currentWindowSize = Controller.getViewportDimensions(); + if ((currentWindowSize.x !== that.windowDimensions.x) || (currentWindowSize.y !== that.windowDimensions.y)) { + that.onResizeViewport(currentWindowSize); + } + }; Controller.mousePressEvent.connect(this.mousePressEvent); Controller.mouseMoveEvent.connect(this.mouseMove); - // Called on move. A different approach would be to have all this on the prototype, - // and let apps extend where needed. Ex. app defines its toolbar.move() to call this.__proto__.move and then save. - this.save = function () { }; + Script.update.connect(that.checkResize); // This compatability hack breaks the model, but makes converting existing scripts easier: this.addOverlay = function (ignored, oldSchoolProperties) { var properties = JSON.parse(JSON.stringify(oldSchoolProperties)); // a copy - if (that.numberOfTools() === 0) { + if ((that.numberOfTools() === 0) && (properties.x != undefined) && (properties.y != undefined)) { that.move(properties.x, properties.y); } delete properties.x; @@ -392,6 +416,23 @@ ToolBar = function(x, y, direction) { var id = that.tools[index].overlay(); return id; } + if (this.fractionKey || optionalInitialPositionFunction) { + var savedFraction = JSON.parse(Settings.getValue(this.fractionKey) || '0'); // getValue can answer empty string + var screenSize = Controller.getViewportDimensions(); + if (savedFraction) { + // If we have saved data, keep the toolbar at the same proportion of the screen width/height. + that.move(savedFraction.x * screenSize.x, savedFraction.y * screenSize.y); + } else if (!optionalInitialPositionFunction) { + print("No initPosition(screenSize, intializedToolbar) specified for ToolBar"); + } else { + // Call the optionalInitialPositionFunctinon() AFTER the client has had a chance to set up. + var that = this; + Script.setTimeout(function () { + var position = optionalInitialPositionFunction(screenSize, that); + that.move(position.x, position.y); + }, 0); + } + } } ToolBar.SPACING = 4; ToolBar.VERTICAL = 0; diff --git a/examples/pointer.js b/examples/pointer.js index ea6b0c233f..83e2cbf776 100644 --- a/examples/pointer.js +++ b/examples/pointer.js @@ -29,19 +29,13 @@ var buttonOnColor = { }; HIFI_PUBLIC_BUCKET = "http://s3.amazonaws.com/hifi-public/"; -var screenSize = Controller.getViewportDimensions(); var userCanPoint = false; Script.include(["libraries/toolBars.js"]); -const persistKey = "highfidelity.pointer.toolbar.position"; -var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL); -toolBar.save = function () { - Settings.setValue(persistKey, JSON.stringify([toolBar.x, toolBar.y])); -}; -var old = JSON.parse(Settings.getValue(persistKey) || '0'); +var toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.pointer.toolbar", function (screenSize) { + return {x: screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING, y: screenSize.y - (BUTTON_SIZE + PADDING)}, +}); var pointerButton = toolBar.addOverlay("image", { - x: old ? old[0] : screenSize.x / 2 - BUTTON_SIZE * 2 + PADDING, - y: old ? old[1] : screenSize.y - (BUTTON_SIZE + PADDING), width: BUTTON_SIZE, height: BUTTON_SIZE, imageURL: HIFI_PUBLIC_BUCKET + "images/laser.png",