d_map vs d_3d for markers

js/index.css

@@ -240,6 +240,20 @@ html, body, #x3d_wrapper {
     text-align:center;
 }
 
+#window-markinfo{
+    z-index: 10;
+    background: rgba(256,256,256,1);
+    border: 0px solid rgba(100,100,100,0.5);
+    border-radius: 1px;
+    color: black;
+    font-size: 16px;
+    margin-top: 2px;
+}
+
+#window-markinfo td{
+    text-align:center;
+}
+
 .input{
     text-align: right;
     width: 100px;

js/ui_init.js

@@ -16,7 +16,7 @@ var SETTINGS = {
     'moreinfo':  true,
     'crosshair': false,
     'shiftspeed': 0.01,
-    'verticaldrag': false
+    'slidingdrag': true
 }
 
 $(function(){
@@ -408,9 +408,15 @@ function leaf_events(){
                 mark.y = 0;
                 mark.z = -distance*Math.cos(Math.PI/180*angle);
                 
+                mark.d_map = distance;
+                mark.d_x3d = "<font style='color:red;'>drag over 3D</font>";
+                
                 Data.markers.push(mark);
                 
-                new X3DOMObject.Marker(mark.x,mark.y,mark.z);
+                X3DOMObject.displayMarkInfo(Data.markers.length-1);
+                
+                //new X3DOMObject.Marker(mark.x,mark.y,mark.z,true);
+                new X3DOMObject.Marker(mark.x,mark.y,mark.z,false);
                 
                 //Scene.createMarker(mark.x,mark.y,mark.z);
                 //x3d_markerEvents(Data.markers.length-1);
@@ -532,6 +538,10 @@ function leaf_drag_marker(){
         mark.x = distance*Math.sin(Math.PI/180*angle);
         mark.z = -distance*Math.cos(Math.PI/180*angle);
         
+        mark.d_map = distance;
+        
+        X3DOMObject.displayMarkInfo(index);
+        
         X3DOMObject.Marker.place(mark.x,mark.y,mark.z,"my-sph-"+index);
     
     }
@@ -665,6 +675,7 @@ function parseURL(){
             case "viewinfo":     SETTINGS.viewinfo  = true; break;
             case "moreinfo":     SETTINGS.moreinfo  = true; break;
             case "crosshair":    SETTINGS.crosshair = true; break;
+            case "slidingdrag":  SETTINGS.slidingdrag = true; break;
             case "shiftspeed": SETTINGS.shiftspeed = parseFloat(parameters[i][1]); break;
         }
     }

js/x3dom_functions.js

@@ -52,22 +52,22 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
             y = shootRay.pickPosition.y;
             z = shootRay.pickPosition.z;
         
+            dist_xz  = Math.sqrt(x*x+z*z);
+            
         }else{
             
             x = Data.markers[index].x;
             y = Data.markers[index].y;
             z = Data.markers[index].z;
         
+            dist_xz  = Data.markers[index].d_x3d;
+            if (isNaN(dist_xz)){
+                dist_xz  = Math.sqrt(x*x+z*z);
+            }
         }
         
-        dist_xz  = Math.sqrt(x*x+z*z);
         dist_xyz = Math.sqrt(y*y+dist_xz*dist_xz);
         
-        if (round){
-            dist_xz.toFixed(2);
-            dist_xyz.toFixed(2);
-        }
-        
         id = $(shootRay.pickObject).attr("id");
         
     }else{
@@ -106,6 +106,7 @@ function x3dom_getXYPosOr(cnvx,cnvy,round){
     }
     
     result.id = id;
+    result.index = index;
     
     return result;
 
@@ -336,7 +337,7 @@ function x3dom_matrix_test(){
 
 /**
  * Get World to Camera coordinates tranform matrix
- * what's native getWCtoCCMatrix()?
+ * what's x3dom's native getWCtoCCMatrix()? canvas-to-world?
  */
 function x3dom_W2C(){
     return new x3dom.fields.SFMatrix4f(

test.html

@@ -37,7 +37,7 @@
           <navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>
           <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>
           <group>            
-            <inline name="1487451413_967079" namespacename="1487451413_967079" url="x3d/1487451413_967079.x3d"/>
+            <inline name="mymodel" namespacename="mymodel" url="x3d/1487451413_967079.x3d"/>
           </group>
           <group>
             <inline name="back" namespacename="back" url="x3d/background.x3d"/>
@@ -57,6 +57,7 @@
     </div>
     <div id='info-wrapper'>
         <div id='window-info'></div>
+        <div id='window-markinfo'></div>
         <div id='window-viewinfo'></div>
     </div>
     <div id='menu-content'>