From ca000acf2ae753f8e05126b65330a32a8b46197a Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 22 Sep 2017 17:40:34 +1200 Subject: [PATCH 1/3] Add space for a footer to put undo/redo buttons in --- scripts/vr-edit/modules/createPalette.js | 8 +--- scripts/vr-edit/modules/toolsMenu.js | 60 ++++++++++++------------ scripts/vr-edit/modules/uit.js | 5 +- 3 files changed, 35 insertions(+), 38 deletions(-) diff --git a/scripts/vr-edit/modules/createPalette.js b/scripts/vr-edit/modules/createPalette.js index 11229562ef..132be3ab79 100644 --- a/scripts/vr-edit/modules/createPalette.js +++ b/scripts/vr-edit/modules/createPalette.js @@ -98,11 +98,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) { PALETTE_PANEL_PROPERTIES = { dimensions: UIT.dimensions.panel, - localPosition: { - x: 0, - y: UIT.dimensions.panel.y / 2 - UIT.dimensions.canvas.y / 2, - z: UIT.dimensions.panel.z / 2 - }, + localPosition: { x: 0, y: (UIT.dimensions.panel.y - UIT.dimensions.canvas.y) / 2, z: UIT.dimensions.panel.z / 2 }, localRotation: Quat.ZERO, color: UIT.colors.baseGray, alpha: 1.0, @@ -430,7 +426,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) { function itemPosition(index) { // Position relative to palette panel. var ITEMS_PER_ROW = 4, - ROW_ZERO_Y_OFFSET = 0.0580, + ROW_ZERO_Y_OFFSET = 0.0860, ROW_SPACING = 0.0560, COLUMN_ZERO_OFFSET = -0.08415, COLUMN_SPACING = 0.0561, diff --git a/scripts/vr-edit/modules/toolsMenu.js b/scripts/vr-edit/modules/toolsMenu.js index 36bc92f187..7ca5d807a9 100644 --- a/scripts/vr-edit/modules/toolsMenu.js +++ b/scripts/vr-edit/modules/toolsMenu.js @@ -180,7 +180,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { MENU_PANEL_PROPERTIES = { dimensions: UIT.dimensions.panel, - localPosition: { x: 0, y: UIT.dimensions.panel.y / 2 - UIT.dimensions.canvas.y / 2, z: UIT.dimensions.panel.z / 2 }, + localPosition: { x: 0, y: (UIT.dimensions.panel.y - UIT.dimensions.canvas.y) / 2, z: UIT.dimensions.panel.z / 2 }, localRotation: Quat.ZERO, color: UIT.colors.baseGray, alpha: 1.0, @@ -612,7 +612,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: -0.0935, - y: 0.0513, + y: 0.0513 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -633,7 +633,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: -0.0561, - y: 0.0513, + y: 0.0513 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -654,7 +654,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: -0.0935, - y: 0.0153, + y: 0.0153 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -675,7 +675,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: -0.0561, - y: 0.0153, + y: 0.0153 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -696,7 +696,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: -0.0935, - y: -0.0207, + y: -0.0207 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -717,7 +717,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: -0.0561, - y: -0.0207, + y: -0.0207 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -739,7 +739,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0668, y: 0.001 }, localPosition: { x: -UIT.dimensions.panel.x / 2 + UIT.dimensions.leftMargin + 0.0668 / 2, - y: -UIT.dimensions.panel.y / 2 + 0.0481, + y: -UIT.dimensions.panel.y / 2 + 0.0481 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset } } @@ -750,7 +750,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: 0.04675, - y: 0.01655, + y: 0.01655 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -766,7 +766,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: 0.04675, - y: -0.0620, + y: -0.0620 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 }, localRotation: Quat.fromVec3Degrees({ x: 0, y: 0, z: -90 }) @@ -786,7 +786,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.1229, y: 0.001 }, localPosition: { x: 0.04675, - y: -0.0781, + y: -0.0781 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset } } @@ -798,7 +798,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: -0.0935, - y: -0.064, + y: -0.064 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -817,7 +817,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.imageOverlayOffset }, localPosition: { x: -0.0561, - y: -0.064, + y: -0.064 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -892,7 +892,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0321, y: 0.0320 }, localPosition: { x: -UIT.dimensions.panel.x / 2 + UIT.dimensions.leftMargin + 0.0321 / 2, - y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0320 / 2, + y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0320 / 2 + UIT.dimensions.footerHeight, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset }, color: UIT.colors.white // Icon SVG is already lightGray color. @@ -904,9 +904,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { url: "../assets/tools/stretch/info-text.svg", scale: 0.1340, - localPosition: { + localPosition: { // Vertically center on info icon. x: -UIT.dimensions.panel.x / 2 + 0.0679 + 0.1340 / 2, - y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0320 / 2, // Center on info icon. + y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0320 / 2 + UIT.dimensions.footerHeight, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset }, color: UIT.colors.white @@ -1023,7 +1023,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { }, localPosition: { x: 0, - y: -UIT.dimensions.panel.y / 2 + 0.0120 + 0.0680 / 2, + y: -UIT.dimensions.panel.y / 2 + 0.0120 + 0.0680 / 2 + UIT.dimensions.footerHeight, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 }, color: UIT.colors.baseGrayShadow @@ -1076,7 +1076,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: -0.0748, - y: 0.0480, + y: 0.0480 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1124,7 +1124,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: -0.0748, - y: 0.0120, + y: 0.0120 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1172,7 +1172,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: -0.0748, - y: -0.0240, + y: -0.0240 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1376,7 +1376,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.1416, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: UIT.dimensions.panel.x / 2 - UIT.dimensions.rightMargin - 0.1416 / 2, - y: 0.0480, + y: 0.0480 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1435,7 +1435,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: -0.0187, - y: -0.0240, + y: -0.0240 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1464,7 +1464,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: 0.0187, - y: -0.0240, + y: -0.0240 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1493,7 +1493,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: 0.0561, - y: -0.0240, + y: -0.0240 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1522,7 +1522,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, localPosition: { x: 0.0935, - y: -0.0240, + y: -0.0240 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 } }, @@ -1608,7 +1608,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { dimensions: { x: 0.0321, y: 0.0320 }, localPosition: { x: -UIT.dimensions.panel.x / 2 + UIT.dimensions.leftMargin + 0.0321 / 2, - y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0320 / 2, + y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0320 / 2 + UIT.dimensions.footerHeight, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset }, color: UIT.colors.white // Icon SVG is already lightGray color. @@ -1620,9 +1620,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { url: "../assets/tools/delete/info-text.svg", scale: 0.1416, - localPosition: { + localPosition: { // Vertically off-center w.r.t. info icon. x: -UIT.dimensions.panel.x / 2 + 0.0679 + 0.1340 / 2, - y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0240 / 2 + 0.0063 / 2, // Off-center w.r.t. info icon. + y: -UIT.dimensions.panel.y / 2 + 0.0200 + 0.0240 / 2 + 0.0063 / 2 + UIT.dimensions.footerHeight, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset }, color: UIT.colors.white @@ -1632,7 +1632,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { }, MENU_ITEM_XS = [-0.08415, -0.02805, 0.02805, 0.08415], - MENU_ITEM_YS = [0.058, 0.002, -0.054], + MENU_ITEM_YS = [0.086, 0.030, -0.026], MENU_ITEMS = [ { @@ -1998,7 +1998,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { setHand(side); function getOverlayIDs() { - return [menuPanelOverlay, menuHeaderOverlay].concat(menuOverlays).concat(optionsOverlays); + return [menuHeaderOverlay, menuPanelOverlay].concat(menuOverlays).concat(optionsOverlays); } function getIconInfo(tool) { diff --git a/scripts/vr-edit/modules/uit.js b/scripts/vr-edit/modules/uit.js index fa69c9045e..7ad6e67c56 100644 --- a/scripts/vr-edit/modules/uit.js +++ b/scripts/vr-edit/modules/uit.js @@ -32,7 +32,7 @@ UIT = (function () { // Coordinate system: UI lies in x-y plane with the front surface being +z. // Offsets are relative to parents' centers. dimensions: { - canvas: { x: 0.24, y: 0.24 }, // Overall UI size. + canvas: { x: 0.24, y: 0.296 }, // Overall UI size. canvasSeparation: 0.004, // Gap between Tools menu and Create panel. handOffset: 0.085, // Distance from hand (wrist) joint to center of canvas. handLateralOffset: 0.01, // Offset of UI in direction of palm normal. @@ -44,7 +44,8 @@ UIT = (function () { header: { x: 0.24, y: 0.048, z: 0.012 }, headerHeading: { x: 0.24, y: 0.044, z: 0.012 }, headerBar: { x: 0.24, y: 0.004, z: 0.012 }, - panel: { x: 0.24, y: 0.18, z: 0.008 }, + panel: { x: 0.24, y: 0.236, z: 0.008 }, + footerHeight: 0.056, itemCollisionZone: { x: 0.0481, y: 0.0480, z: 0.0040 }, // Cursor intersection zone for Tools and Create items. From edd6310a071ab24288fb2fb50315ce8841a74c64 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 22 Sep 2017 21:46:33 +1200 Subject: [PATCH 2/3] Move undo/redo buttons to footer area and make persistent --- scripts/vr-edit/modules/createPalette.js | 1 - scripts/vr-edit/modules/toolsMenu.js | 190 ++++++++++++++++++----- 2 files changed, 151 insertions(+), 40 deletions(-) diff --git a/scripts/vr-edit/modules/createPalette.js b/scripts/vr-edit/modules/createPalette.js index 132be3ab79..e178e41294 100644 --- a/scripts/vr-edit/modules/createPalette.js +++ b/scripts/vr-edit/modules/createPalette.js @@ -492,7 +492,6 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) { properties = Object.clone(PALETTE_ITEM.properties); properties.parentID = palettePanelOverlay; properties.localPosition = itemPosition(i); - paletteItemOverlays[i] = Overlays.addOverlay(PALETTE_ITEM.overlay, properties); paletteItemPositions[i] = properties.localPosition; diff --git a/scripts/vr-edit/modules/toolsMenu.js b/scripts/vr-edit/modules/toolsMenu.js index 7ca5d807a9..b520ccbc3e 100644 --- a/scripts/vr-edit/modules/toolsMenu.js +++ b/scripts/vr-edit/modules/toolsMenu.js @@ -53,6 +53,12 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { }, optionsToggles = {}, // Cater for toggle buttons without a setting. + footerOverlays = [], + footerHoverOverlays = [], + footerIconOverlays = [], + footerLabelOverlays = [], + footerEnabled = [], + swatchHighlightOverlay = null, staticOverlays = [], @@ -766,7 +772,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: 0.04675, - y: -0.0620 + UIT.dimensions.footerHeight / 2, + y: -0.064 + UIT.dimensions.footerHeight / 2, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 }, localRotation: Quat.fromVec3Degrees({ x: 0, y: 0, z: -90 }) @@ -779,18 +785,6 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { method: "setColorPerSlider" } }, - { - id: "colorRule3", - type: "horizontalRule", - properties: { - dimensions: { x: 0.1229, y: 0.001 }, - localPosition: { - x: 0.04675, - y: -0.0781 + UIT.dimensions.footerHeight / 2, - z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset - } - } - }, { id: "pickColor", type: "toggleButton", @@ -1632,7 +1626,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { }, MENU_ITEM_XS = [-0.08415, -0.02805, 0.02805, 0.08415], - MENU_ITEM_YS = [0.086, 0.030, -0.026], + MENU_ITEM_YS = [0.086, 0.030, -0.026, -0.082], MENU_ITEMS = [ { @@ -1863,6 +1857,26 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { callback: { method: "deleteTool" } + } + ], + COLOR_TOOL = 0, // Indexes of corresponding MENU_ITEMS item. + SCALE_TOOL = 1, + CLONE_TOOL = 2, + GROUP_TOOL = 3, + PHYSICS_TOOL = 4, + DELETE_TOOL = 5, + + FOOTER_ITEMS = [ + { + id: "footerRule", + type: "horizontalRule", + properties: { + localPosition: { + x: 0, + y: -UIT.dimensions.panel.y / 2 + 0.0600, + z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset + } + } }, { id: "undoButton", @@ -1870,7 +1884,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: MENU_ITEM_XS[2], - y: MENU_ITEM_YS[2], + y: MENU_ITEM_YS[3] - 0.008, // Allow space for horizontal rule and Line up with Create palette row. z: UIT.dimensions.panel.z / 2 + UI_ELEMENTS.menuButton.properties.dimensions.z / 2 } }, @@ -1896,7 +1910,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { properties: { localPosition: { x: MENU_ITEM_XS[3], - y: MENU_ITEM_YS[2], + y: MENU_ITEM_YS[3] - 0.008, z: UIT.dimensions.panel.z / 2 + UI_ELEMENTS.menuButton.properties.dimensions.z / 2 } }, @@ -1917,12 +1931,6 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { } } ], - COLOR_TOOL = 0, // Indexes of corresponding MENU_ITEMS item. - SCALE_TOOL = 1, - CLONE_TOOL = 2, - GROUP_TOOL = 3, - PHYSICS_TOOL = 4, - DELETE_TOOL = 5, NONE = -1, @@ -1998,7 +2006,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { setHand(side); function getOverlayIDs() { - return [menuHeaderOverlay, menuPanelOverlay].concat(menuOverlays).concat(optionsOverlays); + return [menuHeaderOverlay, menuPanelOverlay].concat(menuOverlays).concat(optionsOverlays).concat(footerOverlays); } function getIconInfo(tool) { @@ -2092,6 +2100,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { menuHoverOverlays = []; menuIconOverlays = []; menuLabelOverlays = []; + menuEnabled = []; pressedItem = null; } @@ -2415,6 +2424,57 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { openMenu(); } + function displayFooter() { + var properties, + itemID, + buttonID, + overlayID, + i, + length; + + // Display footer items. + for (i = 0, length = FOOTER_ITEMS.length; i < length; i += 1) { + properties = Object.clone(UI_ELEMENTS[FOOTER_ITEMS[i].type].properties); + properties = Object.merge(properties, FOOTER_ITEMS[i].properties); + properties.visible = isVisible; + properties.parentID = menuPanelOverlay; + if (properties.url) { + properties.url = Script.resolvePath(properties.url); + } + itemID = Overlays.addOverlay(UI_ELEMENTS[FOOTER_ITEMS[i].type].overlay, properties); + footerOverlays[i] = itemID; + footerEnabled[i] = true; + + if (FOOTER_ITEMS[i].type === "menuButton") { + // Collision overlay. + properties = Object.clone(UI_ELEMENTS.menuButton.hoverButton.properties); + properties.parentID = itemID; + buttonID = Overlays.addOverlay(UI_ELEMENTS.menuButton.hoverButton.overlay, properties); + footerHoverOverlays[i] = buttonID; + + // Icon. + properties = Object.clone(UI_ELEMENTS[UI_ELEMENTS.menuButton.icon.type].properties); + properties = Object.merge(properties, UI_ELEMENTS.menuButton.icon.properties); + properties = Object.merge(properties, FOOTER_ITEMS[i].icon.properties); + properties.url = Script.resolvePath(properties.url); + properties.visible = isVisible; + properties.parentID = buttonID; + overlayID = Overlays.addOverlay(UI_ELEMENTS[UI_ELEMENTS.menuButton.icon.type].overlay, properties); + footerIconOverlays[i] = overlayID; + + // Label. + properties = Object.clone(UI_ELEMENTS[UI_ELEMENTS.menuButton.label.type].properties); + properties = Object.merge(properties, UI_ELEMENTS.menuButton.label.properties); + properties = Object.merge(properties, FOOTER_ITEMS[i].label.properties); + properties.url = Script.resolvePath(properties.url); + properties.visible = isVisible; + properties.parentID = itemID; + overlayID = Overlays.addOverlay(UI_ELEMENTS[UI_ELEMENTS.menuButton.label.type].overlay, properties); + footerLabelOverlays.push(overlayID); + } + } + } + function clearTool() { closeOptions(); } @@ -2860,6 +2920,21 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { } } + for (i = 0, length = footerOverlays.length; i < length; i += 1) { + Overlays.editOverlay(footerOverlays[i], { visible: visible }); + } + for (i = 0, length = footerIconOverlays.length; i < length; i += 1) { + Overlays.editOverlay(footerIconOverlays[i], { visible: visible }); + } + for (i = 0, length = footerLabelOverlays.length; i < length; i += 1) { + Overlays.editOverlay(footerLabelOverlays[i], { visible: visible }); + } + if (!visible) { + for (i = 0, length = footerHoverOverlays.length; i < length; i += 1) { + Overlays.editOverlay(footerHoverOverlays[i], { visible: false }); + } + } + isVisible = visible; } @@ -2953,6 +3028,13 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { intersectionItems = optionsItems; intersectionOverlays = optionsOverlays; intersectionEnabled = optionsEnabled; + } else { + intersectedItem = footerOverlays.indexOf(intersection.overlayID); + if (intersectedItem !== NONE) { + intersectionItems = FOOTER_ITEMS; + intersectionOverlays = footerOverlays; + intersectionEnabled = footerEnabled; + } } } } @@ -2964,13 +3046,23 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { // Unhover old item. switch (hoveredElementType) { case "menuButton": - Overlays.editOverlay(menuHoverOverlays[hoveredItem], { - localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, - visible: false - }); - Overlays.editOverlay(menuIconOverlays[hoveredItem], { - color: UI_ELEMENTS.menuButton.icon.properties.color - }); + if (hoveredSourceOverlays === menuOverlays) { + Overlays.editOverlay(menuHoverOverlays[hoveredItem], { + localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, + visible: false + }); + Overlays.editOverlay(menuIconOverlays[hoveredItem], { + color: UI_ELEMENTS.menuButton.icon.properties.color + }); + } else { + Overlays.editOverlay(footerHoverOverlays[hoveredItem], { + localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, + visible: false + }); + Overlays.editOverlay(footerIconOverlays[hoveredItem], { + color: UI_ELEMENTS.menuButton.icon.properties.color + }); + } break; case "button": if (hoveredSourceItems[hoveredItem].enabledColor !== undefined && optionsEnabled[hoveredItem]) { @@ -3054,13 +3146,25 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { switch (hoveredElementType) { case "menuButton": Feedback.play(otherSide, Feedback.HOVER_MENU_ITEM); - Overlays.editOverlay(menuHoverOverlays[hoveredItem], { - localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, MENU_HOVER_DELTA), - visible: true - }); - Overlays.editOverlay(menuIconOverlays[hoveredItem], { - color: UI_ELEMENTS.menuButton.icon.highlightColor - }); + if (intersectionOverlays === menuOverlays) { + Overlays.editOverlay(menuHoverOverlays[hoveredItem], { + localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, + MENU_HOVER_DELTA), + visible: true + }); + Overlays.editOverlay(menuIconOverlays[hoveredItem], { + color: UI_ELEMENTS.menuButton.icon.highlightColor + }); + } else { + Overlays.editOverlay(footerHoverOverlays[hoveredItem], { + localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, + MENU_HOVER_DELTA), + visible: true + }); + Overlays.editOverlay(footerIconOverlays[hoveredItem], { + color: UI_ELEMENTS.menuButton.icon.highlightColor + }); + } break; case "button": if (intersectionEnabled[hoveredItem]) { @@ -3179,7 +3283,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { }; // Button press actions. - if (intersectionOverlays === menuOverlays && intersectionItems[intersectedItem].toolOptions) { + if (intersectionOverlays === menuOverlays) { openOptions(intersectionItems[intersectedItem]); } if (intersectionItems[intersectedItem].command) { @@ -3396,8 +3500,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { staticOverlays = [menuHeaderOverlay, menuHeaderHeadingOverlay, menuHeaderBarOverlay, menuHeaderTitleOverlay, menuPanelOverlay]; - // Menu items. + // Menu and footer. openMenu(); + displayFooter(); // Initial values. optionsItems = null; @@ -3442,10 +3547,17 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { menuHoverOverlays = []; menuIconOverlays = []; menuLabelOverlays = []; + menuEnabled = []; optionsOverlays = []; optionsOverlaysLabels = []; optionsOverlaysSublabels = []; optionsExtraOverlays = []; + optionsEnabled = []; + footerOverlays = []; + footerHoverOverlays = []; + footerIconOverlays = []; + footerLabelOverlays = []; + footerEnabled = []; isDisplaying = false; } From 64acc0d0a3eea8e3e5db915caff3e29743542ac2 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Sat, 23 Sep 2017 13:01:38 +1200 Subject: [PATCH 3/3] Press undo/redo and menu buttons when click them --- scripts/vr-edit/modules/toolsMenu.js | 102 ++++++++++++++++----------- 1 file changed, 60 insertions(+), 42 deletions(-) diff --git a/scripts/vr-edit/modules/toolsMenu.js b/scripts/vr-edit/modules/toolsMenu.js index b520ccbc3e..50e001d5a1 100644 --- a/scripts/vr-edit/modules/toolsMenu.js +++ b/scripts/vr-edit/modules/toolsMenu.js @@ -2941,6 +2941,8 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { function update(intersection, groupsCount, entitiesCount) { var intersectedItem = NONE, intersectionItems, + menuButtonHoverOverlays, + menuButtonIconOverlays, color, localPosition, parameter, @@ -3047,22 +3049,19 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { switch (hoveredElementType) { case "menuButton": if (hoveredSourceOverlays === menuOverlays) { - Overlays.editOverlay(menuHoverOverlays[hoveredItem], { - localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, - visible: false - }); - Overlays.editOverlay(menuIconOverlays[hoveredItem], { - color: UI_ELEMENTS.menuButton.icon.properties.color - }); + menuButtonHoverOverlays = menuHoverOverlays; + menuButtonIconOverlays = menuIconOverlays; } else { - Overlays.editOverlay(footerHoverOverlays[hoveredItem], { - localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, - visible: false - }); - Overlays.editOverlay(footerIconOverlays[hoveredItem], { - color: UI_ELEMENTS.menuButton.icon.properties.color - }); + menuButtonHoverOverlays = footerHoverOverlays; + menuButtonIconOverlays = footerIconOverlays; } + Overlays.editOverlay(menuButtonHoverOverlays[hoveredItem], { + localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, + visible: false + }); + Overlays.editOverlay(menuButtonIconOverlays[hoveredItem], { + color: UI_ELEMENTS.menuButton.icon.properties.color + }); break; case "button": if (hoveredSourceItems[hoveredItem].enabledColor !== undefined && optionsEnabled[hoveredItem]) { @@ -3147,24 +3146,20 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { case "menuButton": Feedback.play(otherSide, Feedback.HOVER_MENU_ITEM); if (intersectionOverlays === menuOverlays) { - Overlays.editOverlay(menuHoverOverlays[hoveredItem], { - localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, - MENU_HOVER_DELTA), - visible: true - }); - Overlays.editOverlay(menuIconOverlays[hoveredItem], { - color: UI_ELEMENTS.menuButton.icon.highlightColor - }); + menuButtonHoverOverlays = menuHoverOverlays; + menuButtonIconOverlays = menuIconOverlays; } else { - Overlays.editOverlay(footerHoverOverlays[hoveredItem], { - localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, - MENU_HOVER_DELTA), - visible: true - }); - Overlays.editOverlay(footerIconOverlays[hoveredItem], { - color: UI_ELEMENTS.menuButton.icon.highlightColor - }); + menuButtonHoverOverlays = footerHoverOverlays; + menuButtonIconOverlays = footerIconOverlays; } + Overlays.editOverlay(menuButtonHoverOverlays[hoveredItem], { + localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, + MENU_HOVER_DELTA), + visible: true + }); + Overlays.editOverlay(menuButtonIconOverlays[hoveredItem], { + color: UI_ELEMENTS.menuButton.icon.highlightColor + }); break; case "button": if (intersectionEnabled[hoveredItem]) { @@ -3259,28 +3254,51 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) { || isTriggerClicked !== (pressedItem !== null)) { if (pressedItem) { // Unpress previous button. - Overlays.editOverlay(pressedSource[pressedItem.index], { - localPosition: isHoveringButtonElement && hoveredItem === pressedItem.index - ? Vec3.sum(pressedItem.localPosition, OPTION_HOVER_DELTA) - : pressedItem.localPosition - }); - pressedItem = null; + if (pressedItem !== null) { + if (pressedItem.pressedOverlays) { + pressedSource = pressedItem.pressedOverlays; + } + Overlays.editOverlay(pressedSource[pressedItem.index], { + localPosition: isHoveringButtonElement && hoveredItem === pressedItem.index + ? Vec3.sum(pressedItem.localPosition, pressedItem.hoverDelta) + : pressedItem.localPosition + }); + pressedItem = null; + } pressedSource = null; } if (isHoveringButtonElement && (intersectionEnabled === null || intersectionEnabled[intersectedItem]) && isTriggerClicked && !wasTriggerClicked) { // Press new button. - localPosition = intersectionItems[intersectedItem].properties.localPosition; - if (hoveredElementType !== "menuButton") { + pressedSource = intersectionOverlays; + if (hoveredElementType === "menuButton") { + if (intersectionItems === MENU_ITEMS) { + menuButtonHoverOverlays = menuHoverOverlays; + } else { + menuButtonHoverOverlays = footerHoverOverlays; + } + localPosition = UI_ELEMENTS.menuButton.hoverButton.properties.localPosition; + Overlays.editOverlay(menuButtonHoverOverlays[intersectedItem], { + localPosition: Vec3.sum(Vec3.sum(localPosition, MENU_HOVER_DELTA), BUTTON_PRESS_DELTA) + }); + pressedItem = { + index: intersectedItem, + localPosition: localPosition, + hoverDelta: MENU_HOVER_DELTA, + pressedOverlays: menuButtonHoverOverlays + }; + } else { + localPosition = intersectionItems[intersectedItem].properties.localPosition; Overlays.editOverlay(intersectionOverlays[intersectedItem], { localPosition: Vec3.sum(localPosition, BUTTON_PRESS_DELTA) }); + pressedItem = { + index: intersectedItem, + localPosition: localPosition, + hoverDelta: OPTION_HOVER_DELTA + }; } pressedSource = intersectionOverlays; - pressedItem = { - index: intersectedItem, - localPosition: localPosition - }; // Button press actions. if (intersectionOverlays === menuOverlays) {