Display appropriate icon and label on tool icon per current tool

scripts/vr-edit/modules/toolIcon.js

@@ -15,15 +15,7 @@ ToolIcon = function (side) {
 
     "use strict";
 
-    var SCALE_TOOL = 0,
+    var LEFT_HAND = 0,
-        CLONE_TOOL = 1,
-        GROUP_TOOL = 2,
-        COLOR_TOOL = 3,
-        PICK_COLOR_TOOL = 4,
-        PHYSICS_TOOL = 5,
-        DELETE_TOOL = 6,
-
-        LEFT_HAND = 0,
 
         MODEL_DIMENSIONS = { x: 0.1944, y: 0.1928, z: 0.1928 },  // Raw FBX dimensions.
         MODEL_SCALE = 0.7,  // Adjust icon dimensions so that the green bar matches that of the Tools header.
@@ -54,20 +46,14 @@ ToolIcon = function (side) {
         },
 
         ICON_PROPERTIES = {
-            url: "../assets/tools/stretch-icon.svg",
-            dimensions: { x: 0.0167, y: 0.0167 },
             localPosition: { x: 0.020, y: 0.069, z: 0 },  // Relative to model overlay.
             color: UIT.colors.lightGrayText               // x is in fingers direction; y is in thumb direction.
         },
         LABEL_PROPERTIES = {
-            url: "../assets/tools/stretch-label.svg",
-            scale: 0.0311,
             localPosition: { x: -0.040, y: 0.067, z: 0 },
             color: UIT.colors.white
         },
         SUBLABEL_PROPERTIES = {
-            url: "../assets/tools/tool-label.svg",
-            scale: 0.0152,
             localPosition: { x: -0.055, y: 0.067, z: 0 },
             color: UIT.colors.lightGrayText
         },
@@ -113,7 +99,7 @@ ToolIcon = function (side) {
         }
     }
 
-    function display(icon) {
+    function display(iconInfo) {
         // Displays icon on hand.
         var handJointIndex,
             properties;
@@ -143,27 +129,28 @@ ToolIcon = function (side) {
         properties = Object.clone(IMAGE_PROPERTIES);
         properties = Object.merge(properties, ICON_PROPERTIES);
         properties.parentID = modelOverlay;
-        properties.url = Script.resolvePath(properties.url);
+        properties.url = Script.resolvePath(iconInfo.icon.properties.url);
         properties.dimensions = {
-            x: ICON_SCALE_FACTOR * properties.dimensions.x,
+            x: ICON_SCALE_FACTOR * iconInfo.icon.properties.dimensions.x,
-            y: ICON_SCALE_FACTOR * properties.dimensions.y
+            y: ICON_SCALE_FACTOR * iconInfo.icon.properties.dimensions.y
         };
+        properties.localPosition.y += ICON_SCALE_FACTOR * iconInfo.icon.headerOffset.y;
         Overlays.addOverlay(IMAGE_TYPE, properties);
 
         // Label.
         properties = Object.clone(IMAGE_PROPERTIES);
         properties = Object.merge(properties, LABEL_PROPERTIES);
         properties.parentID = modelOverlay;
-        properties.url = Script.resolvePath(properties.url);
+        properties.url = Script.resolvePath(iconInfo.label.properties.url);
-        properties.scale = LABEL_SCALE_FACTOR * properties.scale;
+        properties.scale = LABEL_SCALE_FACTOR * iconInfo.label.properties.scale;
         Overlays.addOverlay(IMAGE_TYPE, properties);
 
         // Sublabel.
         properties = Object.clone(IMAGE_PROPERTIES);
         properties = Object.merge(properties, SUBLABEL_PROPERTIES);
         properties.parentID = modelOverlay;
-        properties.url = Script.resolvePath(properties.url);
+        properties.url = Script.resolvePath(iconInfo.sublabel.properties.url);
-        properties.scale = LABEL_SCALE_FACTOR * properties.scale;
+        properties.scale = LABEL_SCALE_FACTOR * iconInfo.sublabel.properties.scale;
         Overlays.addOverlay(IMAGE_TYPE, properties);
     }
 
@@ -172,13 +159,6 @@ ToolIcon = function (side) {
     }
 
     return {
-        SCALE_TOOL: SCALE_TOOL,
-        CLONE_TOOL: CLONE_TOOL,
-        GROUP_TOOL: GROUP_TOOL,
-        COLOR_TOOL: COLOR_TOOL,
-        PICK_COLOR_TOOL: PICK_COLOR_TOOL,
-        PHYSICS_TOOL: PHYSICS_TOOL,
-        DELETE_TOOL: DELETE_TOOL,
         setHand: setHand,
         update: update,
         display: display,

scripts/vr-edit/modules/toolsMenu.js

@@ -1156,6 +1156,12 @@ 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,
 
         HIGHLIGHT_PROPERTIES = {
             xDelta: 0.004,
@@ -1249,6 +1255,15 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
         return [menuPanelOverlay, menuHeaderOverlay].concat(menuOverlays).concat(optionsOverlays);
     }
 
+    function getIconInfo(tool) {
+        // Provides details of tool icon, label, and sublabel images for the specified tool.
+        return {
+            icon: MENU_ITEMS[tool].icon,
+            label: MENU_ITEMS[tool].label,
+            sublabel: UI_ELEMENTS.menuButton.sublabel
+        };
+    }
+
     function openMenu() {
         var properties,
             itemID,
@@ -2132,7 +2147,6 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
                 }
             } else if (highlightedItem !== NONE) {
                 // Un-highlight previous button.
-                print("$$$$$$$ unhighlight clickable item");
                 Overlays.editOverlay(highlightOverlay, {
                     visible: false
                 });
@@ -2447,6 +2461,13 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
     }
 
     return {
+        COLOR_TOOL: COLOR_TOOL,
+        SCALE_TOOL: SCALE_TOOL,
+        CLONE_TOOL: CLONE_TOOL,
+        GROUP_TOOL: GROUP_TOOL,
+        PHYSICS_TOOL: PHYSICS_TOOL,
+        DELETE_TOOL: DELETE_TOOL,
+        iconInfo: getIconInfo,
         setHand: setHand,
         entityIDs: getEntityIDs,
         clearTool: clearTool,

scripts/vr-edit/vr-edit.js

@@ -224,7 +224,7 @@
         }
 
         function setToolIcon(icon) {
-            toolIcon.display(icon);
+            toolIcon.display(toolsMenu.iconInfo(icon));
         }
 
         function clearTool() {
@@ -289,13 +289,12 @@
             setHand: setHand,
             setToolIcon: setToolIcon,
             clearTool: clearTool,
-            SCALE_TOOL: toolIcon.SCALE_TOOL,
+            COLOR_TOOL: toolsMenu.COLOR_TOOL,
-            CLONE_TOOL: toolIcon.CLONE_TOOL,
+            SCALE_TOOL: toolsMenu.SCALE_TOOL,
-            GROUP_TOOL: toolIcon.GROUP_TOOL,
+            CLONE_TOOL: toolsMenu.CLONE_TOOL,
-            COLOR_TOOL: toolIcon.COLOR_TOOL,
+            GROUP_TOOL: toolsMenu.GROUP_TOOL,
-            PICK_COLOR_TOOL: toolIcon.PICK_COLOR_TOOL,
+            PHYSICS_TOOL: toolsMenu.PHYSICS_TOOL,
-            PHYSICS_TOOL: toolIcon.PHYSICS_TOOL,
+            DELETE_TOOL: toolsMenu.DELETE_TOOL,
-            DELETE_TOOL: toolIcon.DELETE_TOOL,
             display: display,
             updateUIEntities: setUIEntities,
             doPickColor: doPickColor,
@@ -1355,7 +1354,7 @@
         case "pickColorTool":
             grouping.clear();
             toolSelected = TOOL_PICK_COLOR;
-            ui.setToolIcon(ui.PICK_COLOR_TOOL);
+            ui.setToolIcon(ui.COLOR_TOOL);
             ui.updateUIEntities();
             break;
         case "physicsTool":