X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=tests%2Fdrawing.html;h=03a9b5050c27153f5018f2fcaf66976409b2cade;hb=0bc4cb546af5d1ce157ad701a45169cc07c9c839;hp=e873b747b7a20fff772c0b3d6657762c6f1d4fb1;hpb=8c5fe59ea2f22d8c4fbab80fcaf702843fccf2f9;p=dygraphs.git

diff --git a/tests/drawing.html b/tests/drawing.html
index e873b74..03a9b50 100644
--- a/tests/drawing.html
+++ b/tests/drawing.html
@@ -1,29 +1,32 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Dygraphs Drawing Demo</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="../excanvas.js"></script>
-    <![endif]-->
-    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
-    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
-    <script type="text/javascript" src="../dygraph-canvas.js"></script>
-    <script type="text/javascript" src="../dygraph.js"></script>
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
 
-    <script type="text/javascript">
+    <script>
     var start_date = new Date("2002/12/29").getTime();
     var end_date = new Date().getTime();
     data = [];
     for (var d = start_date; d < end_date; d += 604800 * 1000) {
       var millis = d + 2 * 3600 * 1000;
-      data.push( [ new Date(new Date(millis).strftime("%Y/%m/%d")), 50 ]);
+      var date = new Date(millis);
+      var yyyy = date.getFullYear(),
+          mm = date.getMonth(),
+          dd = date.getDate();
+      data.push( [ new Date(Date.UTC(yyyy, mm, dd)), 50 ]);
     }
     </script>
-    <style type="text/css">
+
+    <style>
     #tool_zoom {
       background: url('drawing/tool-palette.png');
-      background-position-x: 0px;
+      background-position: 0px 0px;
       width: 32px;
       height: 33px;
       margin-left: 50px;
@@ -31,14 +34,14 @@
     }
     #tool_pencil {
       background: url('drawing/tool-palette.png');
-      background-position-x: -32px;
+      background-position: -32px 0px;
       width: 32px;
       height: 33px;
       display: inline-block;
     }
     #tool_eraser {
       background: url('drawing/tool-palette.png');
-      background-position-x: -64px;
+      background-position: -64px 0px;
       width: 33px;
       height: 33px;
       display: inline-block;
@@ -62,8 +65,9 @@
     var valueRange = [0, 100];
 
     function setPoint(event, g, context) {
-      var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(g.graphDiv);
-      var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(g.graphDiv);
+      var pos = Dygraph.findPos(g.graphDiv);
+      var canvasx = Dygraph.pageX(event) - pos.x;
+      var canvasy = Dygraph.pageY(event) - pos.y;
       var xy = g.toDataCoords(canvasx, canvasy);
       var x = xy[0], value = xy[1];
       var rows = g.numRows();
@@ -112,11 +116,15 @@
     }
 
     function change_tool(tool_div) {
-      var ids = ['tool_pencil', 'tool_zoom', 'tool_eraser'];
+      var ids = ['tool_zoom', 'tool_pencil', 'tool_eraser'];
       for (var i = 0; i < ids.length; i++) {
-        document.getElementById(ids[i]).style.backgroundPositionY = 0;
+        var div = document.getElementById(ids[i]);
+        if (div == tool_div) {
+          div.style.backgroundPosition = -(i * 32) + 'px -32px';
+        } else {
+          div.style.backgroundPosition = -(i * 32) + 'px 0px';
+        }
       }
-      tool_div.style.backgroundPositionY = '-32px';
       tool = tool_div.id.replace('tool_', '');
 
       var dg_div = document.getElementById("draw_div");
@@ -134,25 +142,19 @@
         {
           valueRange: valueRange,
           labels: [ 'Date', 'Value' ],
+          labelsUTC: true,
           interactionModel: {
             mousedown: function (event, g, context) {
               if (tool == 'zoom') {
                 Dygraph.defaultInteractionModel.mousedown(event, g, context);
               } else {
-                // prevents mouse drags from selecting page text.
-                if (event.preventDefault) {
-                  event.preventDefault();  // Firefox, Chrome, etc.
-                } else {
-                  event.returnValue = false;  // IE
-                  event.cancelBubble = true;
-                }
+                event.preventDefault();  // Firefox, Chrome, etc.
                 isDrawing = true;
                 setPoint(event, g, context);
               }
             },
             mousemove: function (event, g, context) {
               if (tool == 'zoom') {
-                Dygraph.defaultInteractionModel.mousemove(event, g, context);
               } else {
                 if (!isDrawing) return;
                 setPoint(event, g, context);
@@ -160,14 +162,12 @@
             },
             mouseup: function(event, g, context) {
               if (tool == 'zoom') {
-                Dygraph.defaultInteractionModel.mouseup(event, g, context);
               } else {
                 finishDraw();
               }
             },
             mouseout: function(event, g, context) {
               if (tool == 'zoom') {
-                Dygraph.defaultInteractionModel.mouseout(event, g, context);
               }
             },
             dblclick: function(event, g, context) {
@@ -190,13 +190,17 @@
               g.updateOptions({
                 dateWindow: dateWindow
               });
-              Dygraph.cancelEvent(event);
+              event.preventDefault();
             }
           },
           strokeWidth: 1.5,
           gridLineColor: 'rgb(196, 196, 196)',
-          drawYGrid: false,
-          drawYAxis: false
+          axes: {
+            y: {
+              drawAxis: false,
+              drawGrid: false
+            }
+          }
         });
         window.onmouseup = finishDraw;
   </script>
