Factor out mock tests, add browser test page, initial canvas backend

14 years ago · d2c96d420a
2 changed files with 156 additions and 48 deletions
--- a/pdf.js
+++ b/pdf.js
@ -675,6 +675,8 @@ var Interpreter = (function() {
				@@ -675,6 +675,8 @@ var Interpreter = (function() {

        dispatch: function(cmdObj, args) {
            var fnName = this.getAndCheckCmd(cmdObj, args);
+            if (!(fnName in this.gfx))
+                this.error("Unimplemented function '"+ fnName +"'");
            this.gfx[fnName].apply(this.gfx,
                                   args.map(function(o) o.lowerToJS()));
        },
@ -916,6 +918,12 @@ var CanvasGraphics = (function() {
				@@ -916,6 +918,12 @@ var CanvasGraphics = (function() {

    constructor.prototype = {
        // Graphics state
+        setLineWidth: function(width) {
+            this.ctx.lineWidth = width;
+        },
+        setDash: function(dashArray, dashPhase) {
+            // NYI
+        },
        save: function() {
            this.ctx.save();
            this.stateStack.push(this.current);
@ -927,6 +935,55 @@ var CanvasGraphics = (function() {
				@@ -927,6 +935,55 @@ var CanvasGraphics = (function() {
            this.current = this.stateStack.pop();
            this.ctx.restore();
        },
+
+        // Path
+        moveTo: function(x, y) {
+            this.ctx.moveTo(x, y);
+        },
+        lineTo: function(x, y) {
+            this.ctx.lineTo(x, y);
+        },
+        curveTo: function(x1, y1, x2, y2, x3, y3) {
+            this.ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3);
+        },
+        rectangle: function(x, y, width, height) {
+            this.ctx.rect(x, y, width, height);
+        },
+        stroke: function() {
+            this.ctx.stroke();
+            this.consumePath();
+        },
+        fillStroke: function() {
+            this.ctx.fill();
+            this.ctx.stroke();
+            this.consumePath();
+        },
+        closeFillStroke: function() {
+            return this.fillStroke();
+        },
+
+        // Clipping
+        // Text
+        // Type3 fonts
+
+        // Color
+        setFillGray: function(gray) {
+            this.setFillRGBColor(gray, gray, gray);
+        },
+        setStrokeRGBColor: function(r, g, b) {
+            this.ctx.strokeStyle = this.makeCssRgb(r, g, b);
+        },
+        setFillRGBColor: function(r, g, b) {
+            this.ctx.fillStyle = this.makeCssRgb(r, g, b);
+        },
+
+        consumePath: function() {
+            this.ctx.beginPath();
+        },
+        makeCssRgb: function(r, g, b) {
+            var ri = (255 * r) | 0, gi = (255 * g) | 0, bi = (255 * b) | 0;
+            return "rgb("+ ri +","+ gi +","+ bi +")";
+        },
    };

    return constructor;
@ -936,6 +993,12 @@ var CanvasGraphics = (function() {
				@@ -936,6 +993,12 @@ var CanvasGraphics = (function() {
 //var SVGGraphics

 // XXX temporary testing code
+var inJSShell = false;
+try {
+    putstr("");
+    inJSShell = true;
+} catch (e) { }
+
 var MockParser = (function() {
    function constructor(objs) {
        this.objs = objs;
@ -950,7 +1013,6 @@ var MockParser = (function() {
				@@ -950,7 +1013,6 @@ var MockParser = (function() {
    return constructor;
 })();

-function runEchoTests() {
 function cmd(c)     { return new Obj(Obj.Cmd, c); }
 function name(n)    { return new Obj(Obj.Name, n); }
 function int(i)     { return new Obj(Obj.Int, i); }
@ -999,6 +1061,7 @@ function runEchoTests() {
				@@ -999,6 +1061,7 @@ function runEchoTests() {
    },
 ];

+function runEchoTests() {
    tests.forEach(function(test) {
        putstr("Running echo test '"+ test.name +"'... ");

@ -1012,4 +1075,5 @@ function runEchoTests() {
				@@ -1012,4 +1075,5 @@ function runEchoTests() {
    });
 }

+if (inJSShell)
    runEchoTests();
--- a/test.html
+++ b/test.html
@ -0,0 +1,44 @@
				@@ -0,0 +1,44 @@
+<html>
+<head>
+  <title>Simple pdf.js page viewer</title>
+  <script type="application/javascript;version=1.8"
+          src="pdf.js"></script>
+  <style type"text/css">
+#viewer {
+  padding: 5px;
+  border: 5px solid black;
+  width: 8.5in;
+  height: 11in;
+}
+  </style>
+
+  <script type="application/javascript;version=1.8">
+var canvas;
+function load() {
+    canvas = document.getElementById("canvas");
+    displayPage();
+}
+
+function displayPage() {
+    var page = tests[1].objs;
+
+    var gfx = new CanvasGraphics(canvas.getContext("2d"), 96.0, 96.0, null);
+    var interp = new Interpreter(null, null, null, gfx);
+    interp.interpretHelper(new MockParser(page));
+}
+  </script>
+</head>
+
+<body onload="load();">
+  <div>
+    <button>Previous</button>
+    <input type="text" id="pageNumber" value="0"></input>
+    <button>Next</button>
+  <div id="viewer">
+    <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
+      -- are always 96 dpi.  These dimensions are 8.5x11in at 96dpi. -->
+    <canvas id="canvas" width="816" height="1056"></canvas>
+  </div>
+</body>
+
+</html>