Highlight mesh name in list on canvas click.

website/include/importerapp.css

@@ -125,9 +125,17 @@ div.menuitem
 	overflow : hidden;
 }
 
-div.menugroup
+div.menuitem.highlighted
+{
+	background : #95cae4;
+	padding : 1px;
+	border : 1px solid #008ab8;
+}
+
+div.menuitemcontent
 {
 	margin-left : 15px;
+	margin-bottom : 5px;
 }
 
 div.menutext

website/include/importerapp.js

@@ -18,6 +18,8 @@ ImporterApp = function ()
 	this.viewer = null;
 	this.fileNames = null;
 	this.inGenerate = false;
+	this.meshesGroup = null;
+	this.meshMenuItems = null;
 	this.extensions = [];
 	this.importerButtons = null;
 	this.extensionButtons = null;
@@ -45,7 +47,7 @@ ImporterApp.prototype.Init = function ()
 	var myThis = this;
 	var top = document.getElementById ('top');
 	this.importerButtons = new ImporterButtons (top);
-	this.importerButtons.AddLogo ('Online 3D Viewer <span class="version">v 0.6.0</span>', function () { myThis.ShowAboutDialog (); });
+	this.importerButtons.AddLogo ('Online 3D Viewer <span class="version">v 0.6.1</span>', function () { myThis.ShowAboutDialog (); });
 	this.importerButtons.AddButton ('images/openfile.png', 'Open File', function () { myThis.OpenFile (); });
 	this.importerButtons.AddButton ('images/fitinwindow.png', 'Fit In Window', function () { myThis.FitInWindow (); });
 	this.importerButtons.AddToggleButton ('images/fixup.png', 'images/fixupgray.png', 'Enable/Disable Fixed Up Vector', function () { myThis.SetFixUp (); });
@@ -62,8 +64,10 @@ ImporterApp.prototype.Init = function ()
 	window.addEventListener ('resize', this.Resize.bind (this), false);
 	this.Resize ();
 
+	var canvasName = 'example';
+	this.RegisterCanvasClick (canvasName);
 	this.viewer = new ImporterViewer ();
-	this.viewer.Init ('example');
+	this.viewer.Init (canvasName);
 
 	window.addEventListener ('dragover', this.DragOver.bind (this), false);
 	window.addEventListener ('drop', this.Drop.bind (this), false);
@@ -258,7 +262,7 @@ ImporterApp.prototype.GenerateMenu = function ()
 			});
 		}
 		
-		meshesGroup.AddSubItem (mesh.name, {
+		var meshMenuItem = meshesGroup.AddSubItem (mesh.name, {
 			openCloseButton : {
 				title : 'Show/Hide Details',
 				onOpen : function (contentDiv, mesh) {
@@ -310,6 +314,8 @@ ImporterApp.prototype.GenerateMenu = function ()
 				}
 			]
 		});
+		
+		return meshMenuItem;
 	}		
 	
 	var jsonData = this.viewer.GetJsonData ();
@@ -340,11 +346,13 @@ ImporterApp.prototype.GenerateMenu = function ()
 		AddMaterial (importerMenu, materialsGroup, material);
 	}
 	
-	var meshesGroup = AddDefaultGroup (importerMenu, 'Meshes', 'meshesmenuitem');
-	var mesh;
+	this.meshesGroup = AddDefaultGroup (importerMenu, 'Meshes', 'meshesmenuitem');
+	this.meshMenuItems = [];
+	var mesh, meshMenuItem;
 	for (i = 0; i < jsonData.meshes.length; i++) {
 		mesh = jsonData.meshes[i];
-		AddMesh (this, importerMenu, meshesGroup, mesh, i);
+		meshMenuItem = AddMesh (this, importerMenu, this.meshesGroup, mesh, i);
+		this.meshMenuItems.push (meshMenuItem);
 	}
 };
 
@@ -509,6 +517,47 @@ ImporterApp.prototype.ProcessFiles = function (fileList, isUrl)
 	});
 };
 
+ImporterApp.prototype.RegisterCanvasClick = function (canvasName)
+{
+	var myThis = this;
+	var canvas = $('#' + canvasName);
+	var mouseMoved = false;
+	canvas.mousedown (function () {
+		mouseMoved = false;
+	});
+	canvas.mouseup (function (event) {
+		if (!mouseMoved) {
+			var x = event.pageX - $(this).offset ().left;
+			var y = event.pageY - $(this).offset ().top;
+			myThis.OnCanvasClick (x, y);
+		}
+		mouseMoved = false;
+	});
+	canvas.mousemove (function () {
+		mouseMoved = true;
+	});
+};
+
+ImporterApp.prototype.OnCanvasClick = function (x, y)
+{
+	var objects = this.viewer.GetMeshesUnderPosition (x, y);
+	var meshIndex = -1;
+	if (objects.length > 0) {
+		meshIndex = objects[0].originalJsonIndex;
+		this.meshesGroup.SetOpen (true);
+	}
+	
+	var i;
+	for (i = 0; i < this.meshMenuItems.length; i++) {
+		if (i == meshIndex) {
+			this.meshMenuItems[i].Highlight (true);
+			this.meshMenuItems[i].menuItemDiv.get (0).scrollIntoView ();
+		} else {
+			this.meshMenuItems[i].Highlight (false);
+		}
+	}
+};
+
 ImporterApp.prototype.DragOver = function (event)
 {
 	event.stopPropagation ();

website/include/importermenu.js

@@ -76,7 +76,6 @@ ImporterMenuItem.prototype.AddSubItem = function (name, parameters)
 	return new ImporterMenuItem (this.contentDiv, name, parameters);
 };
 
-
 ImporterMenuItem.prototype.GetContentDiv = function ()
 {
 	return this.contentDiv;
@@ -86,22 +85,11 @@ ImporterMenuItem.prototype.AddOpenCloseButton = function ()
 {
 	var myThis = this;
 	this.isOpen = false;
-	this.contentDiv = $('<div>').addClass ('menugroup').hide ().appendTo (this.parentDiv);
+	this.contentDiv = $('<div>').addClass ('menuitemcontent').hide ().appendTo (this.parentDiv);
 	this.openCloseImage = $('<img>').addClass ('menubutton').attr ('title', this.parameters.openCloseButton.title).appendTo (this.menuItemDiv);
 	this.openCloseImage.attr ('src', 'images/closed.png');
 	this.menuItemDiv.click (function () {
-		myThis.isOpen = !myThis.isOpen;
-		if (myThis.isOpen) {
-			if (IsSet (myThis.parameters.openCloseButton.onOpen)) {
-				myThis.parameters.openCloseButton.onOpen (myThis.contentDiv, myThis.parameters.openCloseButton.userData);
-			}
-		} else {
-			if (IsSet (myThis.parameters.openCloseButton.onClose)) {
-				myThis.parameters.openCloseButton.onClose (myThis.contentDiv, myThis.parameters.openCloseButton.userData);
-			}
-		}
-		myThis.contentDiv.toggle ();
-		myThis.openCloseImage.attr ('src', myThis.isOpen ? 'images/opened.png' : 'images/closed.png');
+		myThis.SetOpen (!myThis.isOpen);
 	});
 };
 
@@ -122,6 +110,33 @@ ImporterMenuItem.prototype.AddUserButton = function (userButton)
 	}
 };
 
+ImporterMenuItem.prototype.SetOpen = function (isOpen)
+{
+	this.isOpen = isOpen;
+	if (this.isOpen) {
+		if (IsSet (this.parameters.openCloseButton.onOpen)) {
+			this.parameters.openCloseButton.onOpen (this.contentDiv, this.parameters.openCloseButton.userData);
+		}
+		this.contentDiv.show ();
+		this.openCloseImage.attr ('src', 'images/opened.png');
+	} else {
+		if (IsSet (this.parameters.openCloseButton.onClose)) {
+			this.parameters.openCloseButton.onClose (this.contentDiv, this.parameters.openCloseButton.userData);
+		}
+		this.contentDiv.hide ();
+		this.openCloseImage.attr ('src', 'images/closed.png');
+	}
+};
+
+ImporterMenuItem.prototype.Highlight = function (highlight)
+{
+	if (highlight) {
+		this.menuItemDiv.addClass ('highlighted');
+	} else {
+		this.menuItemDiv.removeClass ('highlighted');
+	}
+};
+
 ImporterMenu = function (parentDiv)
 {
 	this.parentDiv = parentDiv;

website/include/importerviewer.js

@@ -70,6 +70,19 @@ ImporterViewer.prototype.ShowAllMeshes = function (inEnvironment)
 	JSM.ConvertJSONDataToThreeMeshes (this.jsonData, this.Draw.bind (this), environment);
 };
 
+ImporterViewer.prototype.GetMeshesUnderPosition = function (x, y)
+{
+	var objects = this.viewer.GetObjectsUnderPosition (x, y);
+	var meshes = [];
+	var i;
+	for (i = 0; i < objects.length; i++) {
+		if (objects[i].object instanceof THREE.Mesh) {
+			meshes.push (objects[i].object);
+		}
+	}
+	return meshes;
+};
+
 ImporterViewer.prototype.ShowMesh = function (index)
 {
 	var myThis = this;