Merge pull request #5 from jiteshjha/properties-skeleton

properties-skeleton

2 files changed, 126 insertions, 32 deletions

diff --git a/css/common.css b/css/common.css
index 5eb0b45..fb41533 100644
--- a/css/common.css
+++ b/css/common.css
@@ -150,3 +150,25 @@ td.mxPopupMenuIcon {
 	background-color: #D0D0D0;
 	padding: 2px 4px 2px 4px;
 }
+
+/* Properties window - Start */
+
+#contentProperties {
+	border-style: solid;
+	border-width: 1px;
+	margin:10px 10px 10px 10px;
+}
+
+#headingProperties {
+	padding-left:2pc;
+}
+
+#resetButtonProperties{
+	float:right;
+}
+
+#formProperties {
+	margin-right:2pc;
+	margin-left:2pc;
+	margin-bottom:2pc;
+}
diff --git a/index.html b/index.html
index 3a9b2cd..85627c5 100644
--- a/index.html
+++ b/index.html
@@ -8,11 +8,11 @@
         BODY {
             font-family: Arial;
         }
-        
+
         H1 {
             font-size: 18px;
         }
-        
+
         H2 {
             font-size: 16px;
         }
@@ -166,9 +166,12 @@
                         if (!this.isHtmlLabel(cell)) {
                             this.startEditingAtCell(cell);
                         } else {
+                            /*
                             var content = document.createElement('div');
                             content.innerHTML = this.convertValueToString(cell);
                             showModalWindow(this, 'Properties', content, 400, 300);
+                            */
+                            showPropertiesWindow(graph);
                         }
                     }
 
@@ -385,6 +388,103 @@
             }
         };
 
+
+        function showPropertiesWindow(graph) {
+
+            var array = ["Number of curves",
+                "color (>0) or mark (<0)",
+                "line or mark size",
+                "Output window number (-1 for automatic)",
+                "Output window position",
+                "Output window sizes",
+                "Xmin and Xmax",
+                "Ymin and Ymax",
+                "Zmin and Zmax",
+                "Alpha and Theta",
+                "Buffer size"
+            ];
+
+            // Create basic structure for the form.
+            var content = document.createElement('div');
+            //content.id = "contentProperties";
+            content.setAttribute("id", "contentProperties");
+
+            // Heading of content.
+            var heading = document.createElement('h2');
+            heading.innerHTML = "Set Scope Parameters";
+            heading.id = "headingProperties"
+            content.appendChild(heading);
+
+            // Add Form.
+            var myform = document.createElement("form");
+            myform.method = "post";
+            myform.id = "formProperties";
+
+            // Line break.
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
+
+            for (field in array) {
+                // Input Title.
+                var fieldName = array[field];
+                var namelabel = document.createElement('label');
+                namelabel.innerHTML = fieldName;
+                myform.appendChild(namelabel);
+
+
+                // Input.
+                var input = document.createElement("input");
+                input.name = fieldName;
+                input.style.cssText = 'float: right;';
+                input.id = fieldName;
+                myform.appendChild(input);
+
+                // Line break.
+                var linebreak = document.createElement('br');
+                myform.appendChild(linebreak);
+
+                // Line break.
+                var linebreak = document.createElement('br');
+                myform.appendChild(linebreak);
+
+            }
+            // Line break.
+            var linebreak = document.createElement('br');
+            myform.appendChild(linebreak);
+
+            // Button - Submit.
+            var btn = document.createElement("button");
+            btn.innerHTML = 'Submit';
+            btn.type = "button";
+            btn.name = "submit";
+
+            // Executes when button 'btn' is clicked.
+            btn.onclick = function() {
+
+            };
+            myform.appendChild(btn);
+
+            // Button - Reset.
+            var btn = document.createElement("button");
+            btn.innerHTML = 'Reset';
+            btn.type = "button";
+            btn.name = "submit";
+            btn.id = "resetButtonProperties"
+                //btn.style.cssText='float:right;';
+            btn.onclick = function() {
+                // Only removes the content div, not the modal window.
+            };
+
+
+            myform.appendChild(btn);
+            // Base height without fields : 135 px
+            height = 135 + 26 * array.length + 15;
+
+            content.appendChild(myform);
+            showModalWindow(graph, 'Properties', content, 450, height);
+        };
+
+
         function createButtonImage(button, image) {
             if (image != null) {
                 var img = document.createElement('img');
@@ -470,6 +570,7 @@
             wnd.addListener(mxEvent.DESTROY, function(evt) {
                 graph.setEnabled(true);
                 mxEffects.fadeOut(background, 50, true, 10, 30, true);
+                //alert("jitesh");
             });
 
             graph.setEnabled(false);
@@ -998,16 +1099,6 @@
                     pt = new mxPoint(this.getRoutingCenterX(terminal),
                         this.getRoutingCenterY(terminal));
                 }
-
-                // Snaps point to grid
-                /*if (pt != null)
-                {
-                	var tr = this.graph.view.translate;
-                	var s = this.graph.view.scale;
-
-                	pt.x = (this.graph.snap(pt.x / s - tr.x) + tr.x) * s;
-                	pt.y = (this.graph.snap(pt.y / s - tr.y) + tr.y) * s;
-                }*/
             }
 
             edge.setAbsoluteTerminalPoint(pt, source);
@@ -1070,7 +1161,6 @@
 
                 // Sets the terminal point of an edge if we're moving one of the endpoints
                 if (this.graph.getModel().isEdge(clone.cell)) {
-                    // TODO: Only set this if the target or source terminal is an edge
                     clone.cell.geometry.setTerminalPoint(point, this.isSource);
                 } else {
                     clone.cell.geometry.setTerminalPoint(null, this.isSource);
@@ -1173,7 +1263,6 @@
             }
 
             // Adds the first point
-            // TODO: Should move along connected segment
             var pt = pts[0];
 
             if (pt == null && source != null) {
@@ -1186,22 +1275,6 @@
 
             // Adds the waypoints
             if (hints != null && hints.length > 0) {
-                // FIXME: First segment not movable
-                /*hint = state.view.transformControlPoint(state, hints[0]);
-                mxLog.show();
-                mxLog.debug(hints.length,'hints0.y='+hint.y, pt.y)
-
-                if (horizontal && Math.floor(hint.y) != Math.floor(pt.y))
-                {
-                	mxLog.show();
-                	mxLog.debug('add waypoint');
-
-                	pt = new mxPoint(pt.x, hint.y);
-                	result.push(pt);
-                	pt = pt.clone();
-                	//horizontal = !horizontal;
-                }*/
-
                 for (var i = 0; i < hints.length; i++) {
                     horizontal = !horizontal;
                     hint = state.view.transformControlPoint(state, hints[i]);
@@ -1223,7 +1296,6 @@
             // Adds the last point
             pt = pts[pts.length - 1];
 
-            // TODO: Should move along connected segment
             if (pt == null && target != null) {
                 pt = new mxPoint(state.view.getRoutingCenterX(target), state.view.getRoutingCenterY(target));
             }
@@ -1271,7 +1343,7 @@
     <!-- Creates a container for the splash screen -->
     <div id="splash" style="position:absolute;top:0px;left:0px;width:100%;height:100%;background:white;z-index:1;">
         <center id="splash" style="padding-top:230px;">
-            <img src="editors/images/loading.gif">
+            <img src="images/loading.gif">
         </center>
     </div>