add nonsquare scale to pathops sorter tool

Change-Id: I1b45992cc6eb18d0f79edcbd97d00d73c66c349a
Reviewed-on: https://skia-review.googlesource.com/18035
Reviewed-by: Cary Clark <caryclark@google.com>
Commit-Queue: Cary Clark <caryclark@google.com>

1 files changed, 93 insertions, 60 deletions

diff --git a/tools/pathops_sorter.htm b/tools/pathops_sorter.htm
index 967ac316eb..d8371ad9be 100644
--- a/tools/pathops_sorter.htm
+++ b/tools/pathops_sorter.htm
@@ -7,26 +7,21 @@
 <div style="height:0">
 
 <div id="cubics">
-{{{403.28299,497.196991}, {403.424011,497.243988}, {391.110992,495.556}, {391.110992,495.556}}}

-{{{398.375,501.976013}, {403.28299,497.196991}}}

-{{{403.42401123046875, 497.243988037109375}, {378.7979736328125, 493.868011474609375}}}, id=0

-{{{415.5605946972181641, 498.8838844379989155}, {378.8318672594865006, 493.8897667505245295}}}, id=1

-{{{403.2954048004600622, 497.117149457477467}, {403.2729768294798873, 497.2781265045034615}}}, id=2

-{{{403.42401123046875, 497.243988037109375}, {378.7979736328125, 493.868011474609375}}}, id=3

-

+{{{152, 16}, {152, 16.0685501}, {91.06044, 16.1242027}, {16, 16.1242027}}}, id=0

+{{{16, 16.1242027}, {-59.06044, 16.1242027}, {-120, 16.0685501}, {-120, 16}}}, id=1

+{{{-120, 16}, {-120, 15.9314508}, {-59.06044, 15.8757973}, {16, 15.8757973}}}, id=2

+{{{16, 15.8757973}, {91.06044, 15.8757973}, {152, 15.9314508}, {152, 16}}}, id=3

+{{{16, 16}, {152, 16}}}, id=4

+{{{16, 17}, {152, 17}}}, id=5

+{{{16, 16}, {16, 17}}}, id=6

+{{{152, 16}, {152, 17}}}, id=7

 </div>
 
-<div id="c1">
-{{{403.28299f, 497.196991f}, {403.284241f, 497.197388f}, {403.28418f, 497.197632f}}}
-{{{403.28418f, 497.197632f}, {403.280487f, 497.224304f}, {391.110992f, 495.556f}, {391.110992f, 495.556f}}}    

-

-</div>
     </div>
 
 <script type="text/javascript">
 
     var testDivs = [
-    c1,
     cubics,
     ];
 
@@ -39,8 +34,9 @@
 
     var subscale = 1;
     var xmin, xmax, ymin, ymax;
-    var scale;
-    var initScale;
+    var hscale, vscale;
+    var hinitScale, vinitScale;
+    var uniformScale = true;
     var mouseX, mouseY;
     var mouseDown = false;
     var srcLeft, srcTop;
@@ -146,9 +142,10 @@
             subscale /= 10;
         }
         setScale(xmin, xmax, ymin, ymax);
-        mouseX = (screenWidth / 2) / scale + srcLeft;
-        mouseY = (screenHeight / 2) / scale + srcTop;
-        initScale = scale;
+        mouseX = (screenWidth / 2) / hscale + srcLeft;
+        mouseY = (screenHeight / 2) / vscale + srcTop;
+        hinitScale = hscale;
+        vinitScale = vscale;

     }
 
     function setScale(x0, x1, y0, y1) {
@@ -159,19 +156,26 @@
         var yDigits = Math.ceil(Math.log(Math.abs(ymax)) / Math.log(10));
         usableWidth -= (xDigits + yDigits) * 10;
         usableWidth -= decimal_places * 10;
-        var hscale = usableWidth / srcWidth;
-        var vscale = screenHeight / srcHeight;
-        scale = Math.min(hscale, vscale);
-        var invScale = 1 / scale;
-        var sxmin = x0 - invScale * 5;
-        var symin = y0 - invScale * 10;
-        var sxmax = x1 + invScale * (6 * decimal_places + 10);
-        var symax = y1 + invScale * 10;
+        hscale = usableWidth / srcWidth;
+        vscale = screenHeight / srcHeight;
+        if (uniformScale) {
+            hscale = Math.min(hscale, vscale);
+            vscale = hscale;

+        }
+        var hinvScale = 1 / hscale;
+        var vinvScale = 1 / vscale;
+        var sxmin = x0 - hinvScale * 5;
+        var symin = y0 - vinvScale * 10;
+        var sxmax = x1 + hinvScale * (6 * decimal_places + 10);
+        var symax = y1 + vinvScale * 10;
         srcWidth = sxmax - sxmin;
         srcHeight = symax - symin;
         hscale = usableWidth / srcWidth;
         vscale = screenHeight / srcHeight;
-        scale = Math.min(hscale, vscale);
+        if (uniformScale) {
+            hscale = Math.min(hscale, vscale);
+            vscale = hscale;
+        }
         srcLeft = sxmin;
         srcTop = symin;
     }
@@ -467,10 +471,10 @@ function dxy_at_t(curve, t) {
 
     function drawLine(x1, y1, x2, y2) {
         ctx.beginPath();
-        ctx.moveTo((x1 - srcLeft) * scale,
-                (y1 - srcTop) * scale);
-        ctx.lineTo((x2 - srcLeft) * scale,
-                (y2 - srcTop) * scale);
+        ctx.moveTo((x1 - srcLeft) * hscale,
+                (y1 - srcTop) * vscale);
+        ctx.lineTo((x2 - srcLeft) * hscale,
+                (y2 - srcTop) * vscale);
         ctx.stroke();
     }
 
@@ -484,8 +488,8 @@ function dxy_at_t(curve, t) {
         }
         drawnPts.push(px);
         drawnPts.push(py);
-        var _px = (px - srcLeft) * scale;
-        var _py = (py - srcTop) * scale;
+        var _px = (px - srcLeft) * hscale;
+        var _py = (py - srcTop) * vscale;
         ctx.beginPath();
         if (xend) {
             ctx.moveTo(_px - 3, _py - 3);
@@ -607,15 +611,15 @@ function dxy_at_t(curve, t) {
         return 1 << pow2;
     }
 
-    function drawConic(curve, srcLeft, srcTop, scale) {
-        var tol = 1 / scale;
+    function drawConic(curve, srcLeft, srcTop, hscale, vscale) {
+        var tol = 1 / Math.min(hscale, vscale);
         var pow2 = computeQuadPOW2(curve, tol);
         var pts = [];
         chopIntoQuadsPOW2(curve, pow2, pts);
         for (var i = 0; i < pts.length; i += 4) {
             ctx.quadraticCurveTo(
-                (pts[i + 0] - srcLeft) * scale, (pts[i + 1] - srcTop) * scale,
-                (pts[i + 2] - srcLeft) * scale, (pts[i + 3] - srcTop) * scale);
+                (pts[i + 0] - srcLeft) * hscale, (pts[i + 1] - srcTop) * vscale,
+                (pts[i + 2] - srcLeft) * hscale, (pts[i + 3] - srcTop) * vscale);
         }
     }
 
@@ -762,20 +766,20 @@ function dxy_at_t(curve, t) {
                 }
             }
             ctx.beginPath();
-            ctx.moveTo((curve[0] - srcLeft) * scale, (curve[1] - srcTop) * scale);
+            ctx.moveTo((curve[0] - srcLeft) * hscale, (curve[1] - srcTop) * vscale);
             if (curve.length == 4) {
-                ctx.lineTo((curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale);
+                ctx.lineTo((curve[2] - srcLeft) * hscale, (curve[3] - srcTop) * vscale);
             } else if (curve.length == 6) {
                 ctx.quadraticCurveTo(
-                    (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale,
-                    (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale);
+                    (curve[2] - srcLeft) * hscale, (curve[3] - srcTop) * vscale,
+                    (curve[4] - srcLeft) * hscale, (curve[5] - srcTop) * vscale);
             } else if (curve.length == 7) {
-                drawConic(curve, srcLeft, srcTop, scale);
+                drawConic(curve, srcLeft, srcTop, hscale, vscale);
             } else {
                 ctx.bezierCurveTo(
-                    (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale,
-                    (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale,
-                    (curve[6] - srcLeft) * scale, (curve[7] - srcTop) * scale);
+                    (curve[2] - srcLeft) * hscale, (curve[3] - srcTop) * vscale,
+                    (curve[4] - srcLeft) * hscale, (curve[5] - srcTop) * vscale,
+                    (curve[6] - srcLeft) * hscale, (curve[7] - srcTop) * vscale);
             }
             if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
                 ctx.strokeStyle = "rgba(255,0,0, 1)";
@@ -859,8 +863,8 @@ function dxy_at_t(curve, t) {
             if (draw_order) {
                 var px = x_at_t(curve, 0.75);
                 var py = y_at_t(curve, 0.75);
-                var _px = (px - srcLeft) * scale;
-                var _py = (py - srcTop) * scale;
+                var _px = (px - srcLeft) * hscale;
+                var _py = (py - srcTop) * vscale;
                 ctx.beginPath();
                 ctx.arc(_px, _py, 15, 0, Math.PI * 2, true);
                 ctx.closePath();
@@ -886,12 +890,17 @@ function dxy_at_t(curve, t) {
                     drawPointSolid(x, y);
                 }
             }
-            if (!approximately_zero(scale - initScale)) {
+            if (!approximately_zero(hscale - hinitScale)) {
                 ctx.font = "normal 20px Arial";
                 ctx.fillStyle = "rgba(0,0,0, 0.3)";
                 ctx.textAlign = "right";
-                ctx.fillText(scale.toFixed(decimal_places) + 'x',
-                        screenWidth - 10, screenHeight - 5);
+                var scaleTextOffset = hscale != vscale ? -25 : -5;
+                ctx.fillText(hscale.toFixed(decimal_places) + 'x',
+                        screenWidth - 10, screenHeight - scaleTextOffset);
+                if (hscale != vscale) {

+                    ctx.fillText(vscale.toFixed(decimal_places) + 'y',
+                            screenWidth - 10, screenHeight - 5);

+                }

             }
             if (draw_t) {
                 drawPointAtT(curve);
@@ -907,8 +916,8 @@ function dxy_at_t(curve, t) {
                 if (id >= 0) {
                     var px = x_at_t(curve, 0.5);
                     var py = y_at_t(curve, 0.5);
-                    var _px = (px - srcLeft) * scale;
-                    var _py = (py - srcTop) * scale;
+                    var _px = (px - srcLeft) * hscale;
+                    var _py = (py - srcTop) * vscale;
                     ctx.beginPath();
                     ctx.arc(_px, _py, 15, 0, Math.PI * 2, true);
                     ctx.closePath();
@@ -1095,9 +1104,11 @@ function dxy_at_t(curve, t) {
                 focusWasOn = focus_on_selection;
                 if (focusWasOn) {
                     focus_on_selection = false;
-                    scale /= 1.2;
+                    hscale /= 1.2;
+                    vscale /= 1.2;

                 } else {
-                    scale /= 2;
+                    hscale /= 2;

+                    vscale /= 2;

                 }
                 calcLeftTop();
                 redraw();
@@ -1108,9 +1119,11 @@ function dxy_at_t(curve, t) {
                 focusWasOn = focus_on_selection;
                 if (focusWasOn) {
                     focus_on_selection = false;
-                    scale *= 1.2;
+                    hscale *= 1.2;

+                    vscale *= 1.2;

                 } else {
-                    scale *= 2;
+                    hscale *= 2;

+                    vscale *= 2;

                 }
                 calcLeftTop();
                 redraw();
@@ -1147,6 +1160,26 @@ function dxy_at_t(curve, t) {
                 draw_derivative ^= true;
                 redraw();
                 break;
+            case 'g':
+                hscale *= 1.2;
+                calcLeftTop();
+                redraw();
+                break;
+            case 'G':
+                hscale /= 1.2;
+                calcLeftTop();
+                redraw();
+                break;
+            case 'h':
+                vscale *= 1.2;
+                calcLeftTop();
+                redraw();
+                break;
+            case 'H':
+                vscale /= 1.2;
+                calcLeftTop();
+                redraw();
+                break;
             case 'i':
                 draw_ray_intersect = (draw_ray_intersect + 1) % 3;
                 redraw();
@@ -1314,13 +1347,13 @@ function dxy_at_t(curve, t) {
         var tgt = e.target || e.srcElement;
         var left = tgt.offsetLeft;
         var top = tgt.offsetTop;
-        mouseX = (e.clientX - left) / scale + srcLeft;
-        mouseY = (e.clientY - top) / scale + srcTop;
+        mouseX = (e.clientX - left) / hscale + srcLeft;
+        mouseY = (e.clientY - top) / vscale + srcTop;
     }
 
     function calcLeftTop() {
-        srcLeft = mouseX - screenWidth / 2 / scale;
-        srcTop = mouseY - screenHeight / 2 / scale;
+        srcLeft = mouseX - screenWidth / 2 / hscale;
+        srcTop = mouseY - screenHeight / 2 / vscale;
     }
 
     function handleMouseClick() {