Allow a parent to be specified for the sidebar and dialogs. Dragging …

…and resizing will be limited inside the parent.

src/modules/ScaffoldViewer.js

@@ -474,7 +474,6 @@ var ScaffoldViewer = function(typeAtStartUp)  {
       for (var i = 0; i < intersects.length; i++) {
         if (intersects[i].object.userData && (false == Array.isArray(intersects[i].object.userData))) {
           if (intersects[i].object.userData.groupName === "intersect") {
-            console.log(intersects[i])
             return createMarker(intersects[i].point, null);
           }
         }

src/styles/sidebar.css

@@ -61,6 +61,8 @@
 	opacity:0.9;
 	color: #fff;
 	background-color:#00357d;
+	height: 100%;
+	position:relative!important;
 }
 
 #addManager {

src/ui/BaseDialog.js

@@ -10,6 +10,7 @@ require("../styles/jquery-ui.theme.min.css");
 
 var BaseDialog = function() {
   this.container = undefined;
+  this.parent = undefined;
   this.content = undefined;
   this.datGui = undefined;
   this.UIIsReady = false;
@@ -44,10 +45,13 @@ BaseDialog.prototype.resizeStopCallback = function(myInstance) {
   }
 }
 
-BaseDialog.prototype.create = function(htmlData, dataController) {
+BaseDialog.prototype.create = function(htmlData) {
   this.container = $('<div></div>');
   this.container.attr('title', this.title);
+  if (this.parent === undefined)
+	  this.parent = $('body');
   this.container.dialog({
+	appendTo: this.parent,
     show: "blind",
     hide: "blind",
     width: 600,
@@ -65,7 +69,12 @@ BaseDialog.prototype.create = function(htmlData, dataController) {
     beforeClose: this.beforeClose(this),
     close: this.close(this)
   });
-
+  this.container.parent().draggable({
+	  containment: this.parent
+  });
+  this.container.parent().resizable({
+	  containment: this.parent
+  });
   var childNodes = $.parseHTML(htmlData);
   for (i = 0; i < childNodes.length; i++) {
     this.container[0].appendChild(childNodes[i]);
@@ -102,14 +111,16 @@ BaseDialog.prototype.setHeight = function(heightIn) {
   if (typeof(heightIn) == "string") {
     if (/^\d+(\.\d+)?%$/.test(heightIn)) {
       var value = parseFloat(heightIn) / 100.0;
-      var wHeight = $(window).height();
+      var wHeight = $(this.parent).height();
       var dHeight = wHeight * value;
       var actualHeight = Math.floor(dHeight + 0.5);
       if (actualHeight > 0)
         this.container.dialog( "option", "height", actualHeight );
     }
   } else if (typeof(heightIn) == "number") {
     var actualHeight = Math.floor(heightIn + 0.5);
+    if (actualHeight > $(this.parent).height())
+    	actualHeight = $(this.parent).height();
     if (actualHeight > 0)
       this.container.dialog( "option", "height", actualHeight );
   }
@@ -123,15 +134,16 @@ BaseDialog.prototype.setWidth = function(widthIn) {
   if (typeof(widthIn) == "string") {
     if (/^\d+(\.\d+)?%$/.test(widthIn)) {
       var value = parseFloat(widthIn) / 100.0;
-      var wWidth = $(window).width();
+      var wWidth = $(this.parent).width();
       var dWidth = wWidth * value;
       var actualWidth = Math.floor(dWidth + 0.5);
-      console.log(actualWidth);
       if (actualWidth > 0)
         this.container.dialog( "option", "width", actualWidth );
     }
   } else if (typeof(widthIn) == "number") {
     var actualWidth = Math.floor(widthIn + 0.5);
+    if (actualWidth > $(this.parent).width())
+    	actualWidth = $(this.parent).width();
     if (actualWidth > 0)
       this.container.dialog( "option", "width", actualWidth );
   }

src/ui/BodyViewerDialog.js

@@ -1,8 +1,9 @@
 /**
  * A customised dialog for body viewer.
  */
-var BodyViewerDialog = function(bodyViewerIn) {
+var BodyViewerDialog = function(bodyViewerIn, parentIn) {
   (require('./BaseDialog').BaseDialog).call(this);
+  this.parent = parentIn;
   var bodyViewer = bodyViewerIn;
   var systemGuiFolder = new Array();
   var systemPartsGuiControls = new Array();
@@ -17,7 +18,6 @@ var BodyViewerDialog = function(bodyViewerIn) {
       this.Background = [ 255, 255, 255 ]; // RGB array
   }
 
-
   var bodyBackGroundChanged = function() {
     return function(value) {
       var redValue = parseInt(value[0]);

src/ui/CellPanelDialog.js

@@ -1,5 +1,6 @@
-var CellPanelDialog = function() {
+var CellPanelDialog = function(parentIn) {
   (require('./BaseDialog').BaseDialog).call(this);
+  this.parent = parentIn;
   var otherCellControls = undefined;
   var _this = this;
 

src/ui/ManagerSidebar.js

@@ -1,5 +1,5 @@
 var SidebarItemArray = function() {
-  var array = new Object();;
+  var array = new Object();
   var _this = this;
 
   this.push = function(name, managerItem, element) {
@@ -238,7 +238,7 @@ var ManagerSidebar = function(parentIn) {
     if ((dialogName !== "Please pick one") && name !== "") {
       var module = moduleManager.createModule(dialogName);
       module.setName(name);
-      var dialog = moduleManager.createDialog(module);
+      var dialog = moduleManager.createDialog(module, parent);
       dialog.destroyModuleOnClose = true;
       moduleManager.manageDialog(dialog);
       addDialog.dialog("close");
@@ -285,6 +285,7 @@ var ManagerSidebar = function(parentIn) {
     sidebarEle = jelem.find("#managerSidebar")[0];
     var renameElem = jelem.find("#rename-form");
     renameDialog = renameElem.dialog({
+      appendTo: parent,
       autoOpen : false,
       height : 300,
       width : 400,
@@ -300,9 +301,13 @@ var ManagerSidebar = function(parentIn) {
         renameDialog.dialog("close");
       }
     });
+    renameElem.parent().draggable({
+    	  containment: parent
+      });
 
     var addManagerDialogElem = jelem.find("#add-manager-form");
     addManagerDialog = addManagerDialogElem.dialog({
+      appendTo: parent,
       autoOpen : false,
       width : 400,
       resizable : false,
@@ -317,9 +322,13 @@ var ManagerSidebar = function(parentIn) {
         addManagerDialog.dialog("close");
       }
     });
+    addManagerDialogElem.parent().draggable({
+  	  containment: parent
+    });
 
     var addDialogElem = jelem.find("#add-dialog-form");
     addDialog = addDialogElem.dialog({
+      appendTo: parent,
       autoOpen : false,
       height : 300,
       width : 400,
@@ -335,13 +344,20 @@ var ManagerSidebar = function(parentIn) {
         addDialog.dialog("close");
       }
     });
+    addDialogElem.parent().draggable({
+    	  containment: parent
+      });
 
     var messageDialogElem = jelem.find("#message-dialog");
     messageDialog = messageDialogElem.dialog({
+      appendTo: parent,
       autoOpen : false,
       resizable : false,
       modal : true
     });
+    messageDialogElem.parent().draggable({
+  	  containment: parent
+    });
 
     addUICallback();
   }

src/ui/ModelViewerDialog.js

@@ -1,8 +1,9 @@
 /**
  * A customised dialog for model panel.
  */
-var ModelViewerDialog = function(modelPanelIn) {
+var ModelViewerDialog = function(modelPanelIn, parentIn) {
   (require('./BaseDialog').BaseDialog).call(this);
+  this.parent = parentIn;
   var modelPanel = modelPanelIn;
   var otherModelControls = undefined;
   var modelControl = function() {

src/ui/OrgansViewerDialog.js

@@ -1,5 +1,6 @@
-var OrgansViewerDialog = function(organsViewerIn) {
+var OrgansViewerDialog = function(organsViewerIn, parentIn) {
   (require('./BaseDialog').BaseDialog).call(this);
+  this.parent = parentIn;
   var sceneData = undefined;
   var organsViewer = organsViewerIn;
   var organPartsGui = undefined;

src/ui/ScaffoldDialog.js

@@ -1,8 +1,9 @@
 /**
  * A customised dialog for body viewer.
  */
-var ScaffoldDialog = function(scaffoldViewerIn) {
+var ScaffoldDialog = function(scaffoldViewerIn, parentIn) {
   (require('./BaseDialog').BaseDialog).call(this);
+  this.parent = parentIn;
   var scaffoldViewer = scaffoldViewerIn;
   var modal = undefined;
   var optionsChanged = false;

src/utilities/csg.js

@@ -21,7 +21,6 @@ exports.csg = function(sceneIn, zincRendererIn) {
   var currentBoundingBox = undefined;
   var currentMaterial = undefined;
   var boxGeometry = undefined;
-  var boxGeometry2 = undefined;
   var zincCSG = undefined;
   var glyphsetCSG = undefined;
   var intersect = undefined;
@@ -116,9 +115,7 @@ exports.csg = function(sceneIn, zincRendererIn) {
     var radY = THREE.Math.degToRad(guiControls.yRotation);
     var radZ = THREE.Math.degToRad(guiControls.zRotation);
     boxGeometry.morph.rotation.x = radX;
-    boxGeometry2.morph.rotation.x = radX;
     boxGeometry.morph.rotation.y = radY;
-    boxGeometry2.morph.rotation.y = radY;
     var euler = new THREE.Euler(radX, radY, radZ);
     boxGeometry.morph.position.set(0, 0, 0);
     console.log(plane.constant);
@@ -192,8 +189,6 @@ exports.csg = function(sceneIn, zincRendererIn) {
   var createCube = function(width, height, depth) {
     var tempGeometry = new THREE.BoxGeometry(width, height, depth);
     boxGeometry = scene.addZincGeometry(tempGeometry, 40001, 0xdddddd, 1.0, false, false, true);
-    if (boxGeometry2 === undefined)
-      boxGeometry2 = csgScene.addZincGeometry(tempGeometry, 40001, 0xdddddd, 1.0, false, false, true);
     boxGeometry.morph.matrixAutoUpdate = false;
     boxGeometry.morph.visible = false;
     if (plane === undefined) {
@@ -233,9 +228,6 @@ exports.csg = function(sceneIn, zincRendererIn) {
 		  if (boxGeometry && boxGeometry.geometry) {
 			  boxGeometry.geometry.scale(dimension, dimension, 1.0);
 		  }
-		  if (boxGeometry2 && boxGeometry2.geometry) {
-			  boxGeometry2.geometry.scale(dimension, dimension, 1.0);
-		  }
 		  if (planeHelper) {
 			  planeHelper.geometry.scale(dimension, dimension, 1.0);
 		  }
@@ -251,7 +243,6 @@ exports.csg = function(sceneIn, zincRendererIn) {
 	    csgScene.clearAll();
 	    zincCSG = undefined;
 	    boxGeometry = undefined;
-	    boxGeometry2 = undefined;
 	    currentGeometry = undefined;
 	    createCube(1, 1, 0.0005);
 	  }

src/utilities/manager.js

@@ -12,35 +12,35 @@ exports.ModuleManager = function() {
       module.readSystemMeta();
       return module; 
     }
-    this["Body Viewer"].dialog = function(module) {
-      var dialog = new (require("../ui/BodyViewerDialog").BodyViewerDialog)(module);
+    this["Body Viewer"].dialog = function(module, parent) {
+      var dialog = new (require("../ui/BodyViewerDialog").BodyViewerDialog)(module, parent);
       return dialog; 
     }
     this["Organs Viewer"] = [];
     this["Organs Viewer"].module =  function() {
       var module = new (require("../modules/organsRenderer").OrgansViewer)(modelsLoader);
       return module; 
     }
-    this["Organs Viewer"].dialog=  function(module) {
-      var dialog = new (require("../ui/OrgansViewerDialog").OrgansViewerDialog)(module);
+    this["Organs Viewer"].dialog=  function(module, parent) {
+      var dialog = new (require("../ui/OrgansViewerDialog").OrgansViewerDialog)(module, parent);
       return dialog; 
     }
     this["Model Panel"] = [];
     this["Model Panel"].module =  function() {
       var module = new (require("../modules/model_panel").ModelPanel)();
       return module; 
     }
-    this["Model Panel"].dialog=  function(module) {
-      var dialog = new (require("../ui/ModelViewerDialog").ModelViewerDialog)(module);
+    this["Model Panel"].dialog=  function(module, parent) {
+      var dialog = new (require("../ui/ModelViewerDialog").ModelViewerDialog)(module, parent);
       return dialog; 
     }
     this["Scaffold Viewer"] = [];
     this["Scaffold Viewer"].module = function() {
       var module = new (require("../modules/ScaffoldViewer").ScaffoldViewer)();
       return module; 
     }
-    this["Scaffold Viewer"].dialog = function(module) {
-      var dialog = new (require("../ui/ScaffoldDialog").ScaffoldDialog)(module);
+    this["Scaffold Viewer"].dialog = function(module, parent) {
+      var dialog = new (require("../ui/ScaffoldDialog").ScaffoldDialog)(module, parent);
       return dialog; 
     }
   };
@@ -204,10 +204,10 @@ exports.ModuleManager = function() {
       itemChangedCallbacks.push(callback);
   }
 
-  this.createDialog = function(module) {
+  this.createDialog = function(module, parent) {
     if (module && ready) {
       if (constructors[module.typeName]) {
-        var dialog = constructors[module.typeName].dialog(module);
+        var dialog = constructors[module.typeName].dialog(module, parent);
         _this.manageDialog(dialog);
         return dialog;
       }

src/utility.js

@@ -25,22 +25,6 @@ exports.createDialogContainer = function (DialogNameIn, data) {
   return e1;
 }
 
-/**
- * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
- * @param {String} elementID - id of the target dom element.
- * @returns {Zinc.Renderer}
- */
-exports.setupRenderer = function (elementID) {
-	var localContainer = document.createElement( 'div' );
-	document.getElementById(elementID).appendChild( localContainer );
-	localContainer.style.height = "100%"
-	var localRenderer = new Zinc.Renderer(localContainer, window);
-	Zinc.defaultMaterialColor = 0xFFFF9C;
-	localRenderer.initialiseVisualisation();
-	localRenderer.playAnimation = false;	
-	return localRenderer;
-}
-
 /**
  * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
  * @param {String} elementID - id of the target dom element.
@@ -77,3 +61,35 @@ exports.findCSSRule = function(selectorText) {
 		}
 	}
 }
+
+exports.getSelector = function(element) {
+    var path, node = $(element);
+    while (node.length) {
+        var realNode = node[0];
+        var name = realNode.localName;
+        if (!name)
+        	break;
+        name = name.toLowerCase();
+        if (realNode.id) {
+            // As soon as an id is found, there's no need to specify more.
+            name +=  '#' + realNode.id;
+        } else if (realNode.className) {
+            name += '.' + realNode.className.split(/\s+/).join('.');
+        }
+        var parent = node.parent();
+
+        var sameTagSiblings = parent.children(name);
+        if (sameTagSiblings.length > 1) { 
+            var allSiblings = parent.children();
+            var index = allSiblings.index(realNode) + 1;
+            if (index > 1) {
+                name += ':nth-child(' + index + ')';
+            }
+        }
+
+        path = name + (path ? '>' + path : '');
+        node = parent;
+    }
+
+    return path;
+}