diff --git a/website/include/importerapp.css b/website/include/importerapp.css index ad7708d..00094f3 100644 --- a/website/include/importerapp.css +++ b/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 diff --git a/website/include/importerapp.js b/website/include/importerapp.js index 25feedf..3a71e28 100644 --- a/website/include/importerapp.js +++ b/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 v 0.6.0', function () { myThis.ShowAboutDialog (); }); + this.importerButtons.AddLogo ('Online 3D Viewer v 0.6.1', 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 (); diff --git a/website/include/importermenu.js b/website/include/importermenu.js index 4b928a8..cfa9cee 100644 --- a/website/include/importermenu.js +++ b/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 = $('
').addClass ('menugroup').hide ().appendTo (this.parentDiv); + this.contentDiv = $('
').addClass ('menuitemcontent').hide ().appendTo (this.parentDiv); this.openCloseImage = $('').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; diff --git a/website/include/importerviewer.js b/website/include/importerviewer.js index 333ecc9..3b8d4de 100644 --- a/website/include/importerviewer.js +++ b/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;