Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-07-23 13:04:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'vr-edit-footer' into vr-edit-a

Browse source 
# Conflicts:
#	scripts/vr-edit/modules/toolsMenu.js
This commit is contained in:
David Rowe 2017-09-27 10:04:31 +13:00
commit 0f5adb488c
3 changed files with 206 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
scripts/vr-edit/modules/createPalette.js
View file

@ -98,11 +98,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
PALETTE_PANEL_PROPERTIES = { PALETTE_PANEL_PROPERTIES = {
dimensions: UIT.dimensions.panel, dimensions: UIT.dimensions.panel,
localPosition: { localPosition: { x: 0, y: (UIT.dimensions.panel.y - UIT.dimensions.canvas.y) / 2, z: UIT.dimensions.panel.z / 2 },
x: 0,
y: UIT.dimensions.panel.y / 2 - UIT.dimensions.canvas.y / 2,
z: UIT.dimensions.panel.z / 2
},
localRotation: Quat.ZERO, localRotation: Quat.ZERO,
color: UIT.colors.baseGray, color: UIT.colors.baseGray,
alpha: 1.0, alpha: 1.0,
@ -430,7 +426,7 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
function itemPosition(index) { function itemPosition(index) {
// Position relative to palette panel. // Position relative to palette panel.
var ITEMS_PER_ROW = 4, var ITEMS_PER_ROW = 4,
ROW_ZERO_Y_OFFSET = 0.0580, ROW_ZERO_Y_OFFSET = 0.0860,
ROW_SPACING = 0.0560, ROW_SPACING = 0.0560,
COLUMN_ZERO_OFFSET = -0.08415, COLUMN_ZERO_OFFSET = -0.08415,
COLUMN_SPACING = 0.0561, COLUMN_SPACING = 0.0561,
@ -496,7 +492,6 @@ CreatePalette = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties = Object.clone(PALETTE_ITEM.properties); properties = Object.clone(PALETTE_ITEM.properties);
properties.parentID = palettePanelOverlay; properties.parentID = palettePanelOverlay;
properties.localPosition = itemPosition(i); properties.localPosition = itemPosition(i);
paletteItemOverlays[i] = Overlays.addOverlay(PALETTE_ITEM.overlay, properties); paletteItemOverlays[i] = Overlays.addOverlay(PALETTE_ITEM.overlay, properties);
paletteItemPositions[i] = properties.localPosition; paletteItemPositions[i] = properties.localPosition;

276
scripts/vr-edit/modules/toolsMenu.js
View file

@ -53,6 +53,12 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}, },
optionsToggles = {}, // Cater for toggle buttons without a setting. optionsToggles = {}, // Cater for toggle buttons without a setting.
footerOverlays = [],
footerHoverOverlays = [],
footerIconOverlays = [],
footerLabelOverlays = [],
footerEnabled = [],
swatchHighlightOverlay = null, swatchHighlightOverlay = null,
staticOverlays = [], staticOverlays = [],
@ -181,7 +187,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
MENU_PANEL_PROPERTIES = { MENU_PANEL_PROPERTIES = {
dimensions: UIT.dimensions.panel, 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, localRotation: Quat.ZERO,
color: UIT.colors.baseGray, color: UIT.colors.baseGray,
alpha: 1.0, alpha: 1.0,
@ -613,7 +619,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: -0.0935, x: -0.0935,
y: 0.0513, y: 0.0513 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -634,7 +640,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: -0.0561, x: -0.0561,
y: 0.0513, y: 0.0513 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -655,7 +661,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: -0.0935, x: -0.0935,
y: 0.0153, y: 0.0153 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -676,7 +682,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: -0.0561, x: -0.0561,
y: 0.0153, y: 0.0153 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -697,7 +703,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: -0.0935, x: -0.0935,
y: -0.0207, y: -0.0207 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -718,7 +724,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: -0.0561, x: -0.0561,
y: -0.0207, y: -0.0207 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -740,7 +746,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0668, y: 0.001 }, dimensions: { x: 0.0668, y: 0.001 },
localPosition: { localPosition: {
x: -UIT.dimensions.panel.x / 2 + UIT.dimensions.leftMargin + 0.0668 / 2, 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 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset
} }
} }
@ -751,7 +757,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: 0.04675, x: 0.04675,
y: 0.01655, y: 0.01655 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -767,7 +773,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: 0.04675, x: 0.04675,
y: -0.0620, y: -0.064 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
}, },
localRotation: Quat.fromVec3Degrees({ x: 0, y: 0, z: -90 }) localRotation: Quat.fromVec3Degrees({ x: 0, y: 0, z: -90 })
@ -780,18 +786,6 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
method: "setColorPerSlider" method: "setColorPerSlider"
} }
}, },
{
id: "colorRule3",
type: "horizontalRule",
properties: {
dimensions: { x: 0.1229, y: 0.001 },
localPosition: {
x: 0.04675,
y: -0.0781,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset
}
}
},
{ {
id: "pickColor", id: "pickColor",
type: "toggleButton", type: "toggleButton",
@ -799,7 +793,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: -0.0935, x: -0.0935,
y: -0.064, y: -0.064 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -818,7 +812,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.imageOverlayOffset }, dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.imageOverlayOffset },
localPosition: { localPosition: {
x: -0.0561, x: -0.0561,
y: -0.064, y: -0.064 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -893,7 +887,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0321, y: 0.0320 }, dimensions: { x: 0.0321, y: 0.0320 },
localPosition: { localPosition: {
x: -UIT.dimensions.panel.x / 2 + UIT.dimensions.leftMargin + 0.0321 / 2, 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 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset
}, },
color: UIT.colors.white // Icon SVG is already lightGray color. color: UIT.colors.white // Icon SVG is already lightGray color.
@ -905,9 +899,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
url: "../assets/tools/stretch/info-text.svg", url: "../assets/tools/stretch/info-text.svg",
scale: 0.1340, scale: 0.1340,
localPosition: { localPosition: { // Vertically center on info icon.
x: -UIT.dimensions.panel.x / 2 + 0.0679 + 0.1340 / 2, 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 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset
}, },
color: UIT.colors.white color: UIT.colors.white
@ -1017,11 +1011,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
id: "ungroupButton", id: "ungroupButton",
type: "button", type: "button",
properties: { properties: {
dimensions: { dimensions: { x: UIT.dimensions.buttonDimensions.x, y: 0.0400, z: UIT.dimensions.buttonDimensions.z },
x: UIT.dimensions.buttonDimensions.x,
y: 0.0400,
z: UIT.dimensions.buttonDimensions.z
},
localPosition: { localPosition: {
x: 0, x: 0,
y: UIT.dimensions.panel.y / 2 - 0.0280 - 0.0400 - 0.0040 - 0.0400 / 2, y: UIT.dimensions.panel.y / 2 - 0.0280 - 0.0400 - 0.0040 - 0.0400 / 2,
@ -1059,7 +1049,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.1042, y: 0.0400, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.1042, y: 0.0400, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: -0.0040 - 0.1042 / 2, x: -0.0040 - 0.1042 / 2,
y: -0.0900 + 0.0120 + 0.0400 / 2, y: UIT.dimensions.panel.y / 2 - 0.0280 - 2 * 0.0400 - 0.0160 - 0.0400 / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1078,7 +1068,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.1042, y: 0.0400, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.1042, y: 0.0400, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: 0.0040 + 0.1042 / 2, x: 0.0040 + 0.1042 / 2,
y: -0.0900 + 0.0120 + 0.0400 / 2, y: UIT.dimensions.panel.y / 2 - 0.0280 - 2 * 0.0400 - 0.0160 - 0.0400 / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
}, },
color: UIT.colors.baseGrayShadow color: UIT.colors.baseGrayShadow
@ -1131,7 +1121,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: -0.0748, x: -0.0748,
y: 0.0480, y: 0.0480 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1179,7 +1169,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: -0.0748, x: -0.0748,
y: 0.0120, y: 0.0120 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1227,7 +1217,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0668, y: 0.0280, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: -0.0748, x: -0.0748,
y: -0.0240, y: -0.0240 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1431,7 +1421,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.1416, y: 0.0280, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.1416, y: 0.0280, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: UIT.dimensions.panel.x / 2 - UIT.dimensions.rightMargin - 0.1416 / 2, 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 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1490,7 +1480,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: -0.0187, x: -0.0187,
y: -0.0240, y: -0.0240 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1519,7 +1509,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: 0.0187, x: 0.0187,
y: -0.0240, y: -0.0240 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1548,7 +1538,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: 0.0561, x: 0.0561,
y: -0.0240, y: -0.0240 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1577,7 +1567,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z }, dimensions: { x: 0.0294, y: 0.1000, z: UIT.dimensions.buttonDimensions.z },
localPosition: { localPosition: {
x: 0.0935, x: 0.0935,
y: -0.0240, y: -0.0240 + UIT.dimensions.footerHeight / 2,
z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2
} }
}, },
@ -1663,7 +1653,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
dimensions: { x: 0.0321, y: 0.0320 }, dimensions: { x: 0.0321, y: 0.0320 },
localPosition: { localPosition: {
x: -UIT.dimensions.panel.x / 2 + UIT.dimensions.leftMargin + 0.0321 / 2, 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 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset
}, },
color: UIT.colors.white // Icon SVG is already lightGray color. color: UIT.colors.white // Icon SVG is already lightGray color.
@ -1675,9 +1665,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
url: "../assets/tools/delete/info-text.svg", url: "../assets/tools/delete/info-text.svg",
scale: 0.1416, scale: 0.1416,
localPosition: { localPosition: { // Vertically off-center w.r.t. info icon.
x: -UIT.dimensions.panel.x / 2 + 0.0679 + 0.1340 / 2, 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 z: UIT.dimensions.panel.z / 2 + UIT.dimensions.imageOverlayOffset
}, },
color: UIT.colors.white color: UIT.colors.white
@ -1687,7 +1677,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}, },
MENU_ITEM_XS = [-0.08415, -0.02805, 0.02805, 0.08415], 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, -0.082],
MENU_ITEMS = [ MENU_ITEMS = [
{ {
@ -1918,6 +1908,26 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
callback: { callback: {
method: "deleteTool" 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", id: "undoButton",
@ -1925,7 +1935,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: MENU_ITEM_XS[2], 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 z: UIT.dimensions.panel.z / 2 + UI_ELEMENTS.menuButton.properties.dimensions.z / 2
} }
}, },
@ -1951,7 +1961,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
properties: { properties: {
localPosition: { localPosition: {
x: MENU_ITEM_XS[3], 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 z: UIT.dimensions.panel.z / 2 + UI_ELEMENTS.menuButton.properties.dimensions.z / 2
} }
}, },
@ -1972,12 +1982,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, NONE = -1,
@ -2055,7 +2059,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
setHand(side); setHand(side);
function getOverlayIDs() { function getOverlayIDs() {
return [menuPanelOverlay, menuHeaderOverlay].concat(menuOverlays).concat(optionsOverlays); return [menuHeaderOverlay, menuPanelOverlay].concat(menuOverlays).concat(optionsOverlays).concat(footerOverlays);
} }
function getIconInfo(tool) { function getIconInfo(tool) {
@ -2149,6 +2153,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
menuHoverOverlays = []; menuHoverOverlays = [];
menuIconOverlays = []; menuIconOverlays = [];
menuLabelOverlays = []; menuLabelOverlays = [];
menuEnabled = [];
pressedItem = null; pressedItem = null;
} }
@ -2473,6 +2478,57 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
openMenu(); 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() { function clearTool() {
closeOptions(); closeOptions();
} }
@ -2942,12 +2998,29 @@ 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; isVisible = visible;
} }
function update(intersection, groupsCount, entitiesCount) { function update(intersection, groupsCount, entitiesCount) {
var intersectedItem = NONE, var intersectedItem = NONE,
intersectionItems, intersectionItems,
menuButtonHoverOverlays,
menuButtonIconOverlays,
color, color,
localPosition, localPosition,
parameter, parameter,
@ -3036,6 +3109,13 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
intersectionItems = optionsItems; intersectionItems = optionsItems;
intersectionOverlays = optionsOverlays; intersectionOverlays = optionsOverlays;
intersectionEnabled = optionsEnabled; intersectionEnabled = optionsEnabled;
} else {
intersectedItem = footerOverlays.indexOf(intersection.overlayID);
if (intersectedItem !== NONE) {
intersectionItems = FOOTER_ITEMS;
intersectionOverlays = footerOverlays;
intersectionEnabled = footerEnabled;
}
} }
} }
} }
@ -3047,11 +3127,18 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
// Unhover old item. // Unhover old item.
switch (hoveredElementType) { switch (hoveredElementType) {
case "menuButton": case "menuButton":
Overlays.editOverlay(menuHoverOverlays[hoveredItem], { if (hoveredSourceOverlays === menuOverlays) {
menuButtonHoverOverlays = menuHoverOverlays;
menuButtonIconOverlays = menuIconOverlays;
} else {
menuButtonHoverOverlays = footerHoverOverlays;
menuButtonIconOverlays = footerIconOverlays;
}
Overlays.editOverlay(menuButtonHoverOverlays[hoveredItem], {
localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, localPosition: UI_ELEMENTS.menuButton.hoverButton.properties.localPosition,
visible: false visible: false
}); });
Overlays.editOverlay(menuIconOverlays[hoveredItem], { Overlays.editOverlay(menuButtonIconOverlays[hoveredItem], {
color: UI_ELEMENTS.menuButton.icon.properties.color color: UI_ELEMENTS.menuButton.icon.properties.color
}); });
break; break;
@ -3137,11 +3224,19 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
switch (hoveredElementType) { switch (hoveredElementType) {
case "menuButton": case "menuButton":
Feedback.play(otherSide, Feedback.HOVER_MENU_ITEM); Feedback.play(otherSide, Feedback.HOVER_MENU_ITEM);
Overlays.editOverlay(menuHoverOverlays[hoveredItem], { if (intersectionOverlays === menuOverlays) {
localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition, MENU_HOVER_DELTA), menuButtonHoverOverlays = menuHoverOverlays;
menuButtonIconOverlays = menuIconOverlays;
} else {
menuButtonHoverOverlays = footerHoverOverlays;
menuButtonIconOverlays = footerIconOverlays;
}
Overlays.editOverlay(menuButtonHoverOverlays[hoveredItem], {
localPosition: Vec3.sum(UI_ELEMENTS.menuButton.hoverButton.properties.localPosition,
MENU_HOVER_DELTA),
visible: true visible: true
}); });
Overlays.editOverlay(menuIconOverlays[hoveredItem], { Overlays.editOverlay(menuButtonIconOverlays[hoveredItem], {
color: UI_ELEMENTS.menuButton.icon.highlightColor color: UI_ELEMENTS.menuButton.icon.highlightColor
}); });
break; break;
@ -3238,32 +3333,55 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
|| isTriggerClicked !== (pressedItem !== null)) { || isTriggerClicked !== (pressedItem !== null)) {
if (pressedItem) { if (pressedItem) {
// Unpress previous button. // Unpress previous button.
Overlays.editOverlay(pressedSource[pressedItem.index], { if (pressedItem !== null) {
localPosition: if (pressedItem.pressedOverlays) {
isHoveringButtonElement && hoveredItem === pressedItem.index && optionsEnabled[pressedItem.index] pressedSource = pressedItem.pressedOverlays;
? Vec3.sum(pressedItem.localPosition, OPTION_HOVER_DELTA) }
: pressedItem.localPosition Overlays.editOverlay(pressedSource[pressedItem.index], {
}); localPosition: isHoveringButtonElement && hoveredItem === pressedItem.index
pressedItem = null; && intersectionEnabled[pressedItem.index]
? Vec3.sum(pressedItem.localPosition, pressedItem.hoverDelta)
: pressedItem.localPosition
});
pressedItem = null;
}
pressedSource = null; pressedSource = null;
} }
if (isHoveringButtonElement && (intersectionEnabled === null || intersectionEnabled[intersectedItem]) if (isHoveringButtonElement && (intersectionEnabled === null || intersectionEnabled[intersectedItem])
&& isTriggerClicked && !wasTriggerClicked) { && isTriggerClicked && !wasTriggerClicked) {
// Press new button. // Press new button.
localPosition = intersectionItems[intersectedItem].properties.localPosition; pressedSource = intersectionOverlays;
if (hoveredElementType !== "menuButton") { 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], { Overlays.editOverlay(intersectionOverlays[intersectedItem], {
localPosition: Vec3.sum(localPosition, BUTTON_PRESS_DELTA) localPosition: Vec3.sum(localPosition, BUTTON_PRESS_DELTA)
}); });
pressedItem = {
index: intersectedItem,
localPosition: localPosition,
hoverDelta: OPTION_HOVER_DELTA
};
} }
pressedSource = intersectionOverlays; pressedSource = intersectionOverlays;
pressedItem = {
index: intersectedItem,
localPosition: localPosition
};
// Button press actions. // Button press actions.
if (intersectionOverlays === menuOverlays && intersectionItems[intersectedItem].toolOptions) { if (intersectionOverlays === menuOverlays) {
openOptions(intersectionItems[intersectedItem]); openOptions(intersectionItems[intersectedItem]);
} }
if (intersectionItems[intersectedItem].command) { if (intersectionItems[intersectedItem].command) {
@ -3496,8 +3614,9 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
staticOverlays = [menuHeaderOverlay, menuHeaderHeadingOverlay, menuHeaderBarOverlay, menuHeaderTitleOverlay, staticOverlays = [menuHeaderOverlay, menuHeaderHeadingOverlay, menuHeaderBarOverlay, menuHeaderTitleOverlay,
menuPanelOverlay]; menuPanelOverlay];
// Menu items. // Menu and footer.
openMenu(); openMenu();
displayFooter();
// Initial values. // Initial values.
optionsItems = null; optionsItems = null;
@ -3546,10 +3665,17 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
menuHoverOverlays = []; menuHoverOverlays = [];
menuIconOverlays = []; menuIconOverlays = [];
menuLabelOverlays = []; menuLabelOverlays = [];
menuEnabled = [];
optionsOverlays = []; optionsOverlays = [];
optionsOverlaysLabels = []; optionsOverlaysLabels = [];
optionsOverlaysSublabels = []; optionsOverlaysSublabels = [];
optionsExtraOverlays = []; optionsExtraOverlays = [];
optionsEnabled = [];
footerOverlays = [];
footerHoverOverlays = [];
footerIconOverlays = [];
footerLabelOverlays = [];
footerEnabled = [];
isDisplaying = false; isDisplaying = false;
} }

5
scripts/vr-edit/modules/uit.js
View file

@ -32,7 +32,7 @@ UIT = (function () {
// Coordinate system: UI lies in x-y plane with the front surface being +z. // Coordinate system: UI lies in x-y plane with the front surface being +z.
// Offsets are relative to parents' centers. // Offsets are relative to parents' centers.
dimensions: { 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. canvasSeparation: 0.004, // Gap between Tools menu and Create panel.
handOffset: 0.085, // Distance from hand (wrist) joint to center of canvas. handOffset: 0.085, // Distance from hand (wrist) joint to center of canvas.
handLateralOffset: 0.01, // Offset of UI in direction of palm normal. 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 }, header: { x: 0.24, y: 0.048, z: 0.012 },
headerHeading: { x: 0.24, y: 0.044, z: 0.012 }, headerHeading: { x: 0.24, y: 0.044, z: 0.012 },
headerBar: { x: 0.24, y: 0.004, 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. itemCollisionZone: { x: 0.0481, y: 0.0480, z: 0.0040 }, // Cursor intersection zone for Tools and Create items.