svgcanvas/path2d.js

import { format } from './utils';

export default (function () {
    "use strict";

    var Path2D;

    Path2D = function (ctx, arg) {
        if (!ctx) {
            console.error("Path2D must be passed the context");
        }
        if (typeof arg === 'string') {
            // Initialize from string path.
            this.__pathString = arg;
        } else if (typeof arg === 'object') {
            // Initialize by copying another path.
            this.__pathString = arg.__pathString;
        } else {
            // Initialize a new path.
            this.__pathString = "";
        }

        this.ctx = ctx;
        this.__currentPosition = {x: undefined, y: undefined};
    }

    Path2D.prototype.__matrixTransform = function(x, y) {
        return this.ctx.__matrixTransform(x, y);
    }

    Path2D.prototype.addPath = function(path, transform) {
        if (transform) console.error("transform argument to addPath is not supported");

        this.__pathString = this.__pathString + " " + path;
    }

    /**
     * Closes the current path
     */
     Path2D.prototype.closePath = function () {
        this.addPath("Z");
    };

    /**
     * Adds the move command to the current path element,
     * if the currentPathElement is not empty create a new path element
     */
     Path2D.prototype.moveTo = function (x,y) {
        // creates a new subpath with the given point
        this.__currentPosition = {x: x, y: y};
        this.addPath(format("M {x} {y}", {
            x: this.__matrixTransform(x, y).x,
            y: this.__matrixTransform(x, y).y
        }));
    };


    /**
     * Adds a line to command
     */
     Path2D.prototype.lineTo = function (x, y) {
        this.__currentPosition = {x: x, y: y};
        if (this.__pathString.indexOf('M') > -1) {
            this.addPath(format("L {x} {y}", {
                x: this.__matrixTransform(x, y).x,
                y: this.__matrixTransform(x, y).y
            }));
        } else {
            this.addPath(format("M {x} {y}", {
                x: this.__matrixTransform(x, y).x,
                y: this.__matrixTransform(x, y).y
            }));
        }
    };

    /**
     *  Adds a rectangle to the path.
     */
     Path2D.prototype.rect = function (x, y, width, height) {
        if (this.__currentElement.nodeName !== "path") {
            this.beginPath();
        }
        this.moveTo(x, y);
        this.lineTo(x+width, y);
        this.lineTo(x+width, y+height);
        this.lineTo(x, y+height);
        this.lineTo(x, y);
        this.closePath();
    };

    /**
     * Add a bezier command
     */
     Path2D.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
        this.__currentPosition = {x: x, y: y};
        this.addPath(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
            {
                cp1x: this.__matrixTransform(cp1x, cp1y).x,
                cp1y: this.__matrixTransform(cp1x, cp1y).y,
                cp2x: this.__matrixTransform(cp2x, cp2y).x,
                cp2y: this.__matrixTransform(cp2x, cp2y).y,
                x: this.__matrixTransform(x, y).x,
                y: this.__matrixTransform(x, y).y
            }));
    };

    /**
     * Adds a quadratic curve to command
     */
     Path2D.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
        this.__currentPosition = {x: x, y: y};
        this.addPath(format("Q {cpx} {cpy} {x} {y}", {
            cpx: this.__matrixTransform(cpx, cpy).x,
            cpy: this.__matrixTransform(cpx, cpy).y,
            x: this.__matrixTransform(x, y).x,
            y: this.__matrixTransform(x, y).y
        }));
    };



    /**
     *  Arc command!
     */
     Path2D.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
      // in canvas no circle is drawn if no angle is provided.
      if (startAngle === endAngle) {
          return;
      }
      startAngle = startAngle % (2*Math.PI);
      endAngle = endAngle % (2*Math.PI);
      if (startAngle === endAngle) {
          //circle time! subtract some of the angle so svg is happy (svg elliptical arc can't draw a full circle)
          endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
      }
      var endX = x+radius*Math.cos(endAngle),
          endY = y+radius*Math.sin(endAngle),
          startX = x+radius*Math.cos(startAngle),
          startY = y+radius*Math.sin(startAngle),
          sweepFlag = counterClockwise ? 0 : 1,
          largeArcFlag = 0,
          diff = endAngle - startAngle;

      // https://github.com/gliffy/canvas2svg/issues/4
      if (diff < 0) {
          diff += 2*Math.PI;
      }

      if (counterClockwise) {
          largeArcFlag = diff > Math.PI ? 0 : 1;
      } else {
          largeArcFlag = diff > Math.PI ? 1 : 0;
      }

      var scaleX = Math.hypot(this.ctx.__transformMatrix.a, this.ctx.__transformMatrix.b);
      var scaleY = Math.hypot(this.ctx.__transformMatrix.c, this.ctx.__transformMatrix.d);

      this.lineTo(startX, startY);
      this.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
          {
              rx:radius * scaleX,
              ry:radius * scaleY,
              xAxisRotation:0,
              largeArcFlag:largeArcFlag,
              sweepFlag:sweepFlag,
              endX: this.__matrixTransform(endX, endY).x,
              endY: this.__matrixTransform(endX, endY).y
          }));

      this.__currentPosition = {x: endX, y: endY};
    };


    /**
     * Return a new normalized vector of given vector
     */
     var normalize = function (vector) {
        var len = Math.sqrt(vector[0] * vector[0] + vector[1] * vector[1]);
        return [vector[0] / len, vector[1] / len];
    };

    /**
     * Adds the arcTo to the current path
     *
     * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
     */
     Path2D.prototype.arcTo = function (x1, y1, x2, y2, radius) {
      // Let the point (x0, y0) be the last point in the subpath.
      var x0 = this.__currentPosition && this.__currentPosition.x;
      var y0 = this.__currentPosition && this.__currentPosition.y;

      // First ensure there is a subpath for (x1, y1).
      if (typeof x0 == "undefined" || typeof y0 == "undefined") {
          return;
      }

      // Negative values for radius must cause the implementation to throw an IndexSizeError exception.
      if (radius < 0) {
          throw new Error("IndexSizeError: The radius provided (" + radius + ") is negative.");
      }

      // If the point (x0, y0) is equal to the point (x1, y1),
      // or if the point (x1, y1) is equal to the point (x2, y2),
      // or if the radius radius is zero,
      // then the method must add the point (x1, y1) to the subpath,
      // and connect that point to the previous point (x0, y0) by a straight line.
      if (((x0 === x1) && (y0 === y1))
          || ((x1 === x2) && (y1 === y2))
          || (radius === 0)) {
          this.lineTo(x1, y1);
          return;
      }

      // Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line,
      // then the method must add the point (x1, y1) to the subpath,
      // and connect that point to the previous point (x0, y0) by a straight line.
      var unit_vec_p1_p0 = normalize([x0 - x1, y0 - y1]);
      var unit_vec_p1_p2 = normalize([x2 - x1, y2 - y1]);
      if (unit_vec_p1_p0[0] * unit_vec_p1_p2[1] === unit_vec_p1_p0[1] * unit_vec_p1_p2[0]) {
          this.lineTo(x1, y1);
          return;
      }

      // Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius,
      // and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1),
      // and that has a different point tangent to the half-infinite line that ends at the point (x1, y1), and crosses the point (x2, y2).
      // The points at which this circle touches these two lines are called the start and end tangent points respectively.

      // note that both vectors are unit vectors, so the length is 1
      var cos = (unit_vec_p1_p0[0] * unit_vec_p1_p2[0] + unit_vec_p1_p0[1] * unit_vec_p1_p2[1]);
      var theta = Math.acos(Math.abs(cos));

      // Calculate origin
      var unit_vec_p1_origin = normalize([
          unit_vec_p1_p0[0] + unit_vec_p1_p2[0],
          unit_vec_p1_p0[1] + unit_vec_p1_p2[1]
      ]);
      var len_p1_origin = radius / Math.sin(theta / 2);
      var x = x1 + len_p1_origin * unit_vec_p1_origin[0];
      var y = y1 + len_p1_origin * unit_vec_p1_origin[1];

      // Calculate start angle and end angle
      // rotate 90deg clockwise (note that y axis points to its down)
      var unit_vec_origin_start_tangent = [
          -unit_vec_p1_p0[1],
          unit_vec_p1_p0[0]
      ];
      // rotate 90deg counter clockwise (note that y axis points to its down)
      var unit_vec_origin_end_tangent = [
          unit_vec_p1_p2[1],
          -unit_vec_p1_p2[0]
      ];
      var getAngle = function (vector) {
          // get angle (clockwise) between vector and (1, 0)
          var x = vector[0];
          var y = vector[1];
          if (y >= 0) { // note that y axis points to its down
              return Math.acos(x);
          } else {
              return -Math.acos(x);
          }
      };
      var startAngle = getAngle(unit_vec_origin_start_tangent);
      var endAngle = getAngle(unit_vec_origin_end_tangent);

      // Connect the point (x0, y0) to the start tangent point by a straight line
      this.lineTo(x + unit_vec_origin_start_tangent[0] * radius,
                  y + unit_vec_origin_start_tangent[1] * radius);

      // Connect the start tangent point to the end tangent point by arc
      // and adding the end tangent point to the subpath.
      this.arc(x, y, radius, startAngle, endAngle);
  };


  /**
   *  Ellipse command!
   */
   Path2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise) {
      if (startAngle === endAngle) {
          return;
      }

      var transformedCenter = this.__matrixTransform(x, y);
      x = transformedCenter.x;
      y = transformedCenter.y;
      var scale = this.ctx.__getTransformScale();
      radiusX = radiusX * scale.x;
      radiusY = radiusY * scale.y;
      rotation = rotation + this.ctx.__getTransformRotation()

      startAngle = startAngle % (2*Math.PI);
      endAngle = endAngle % (2*Math.PI);
      if(startAngle === endAngle) {
          endAngle = ((endAngle + (2*Math.PI)) - 0.001 * (counterClockwise ? -1 : 1)) % (2*Math.PI);
      }
      var endX = x + Math.cos(-rotation) * radiusX * Math.cos(endAngle)
                   + Math.sin(-rotation) * radiusY * Math.sin(endAngle),
          endY = y - Math.sin(-rotation) * radiusX * Math.cos(endAngle)
                   + Math.cos(-rotation) * radiusY * Math.sin(endAngle),
          startX = x + Math.cos(-rotation) * radiusX * Math.cos(startAngle)
                     + Math.sin(-rotation) * radiusY * Math.sin(startAngle),
          startY = y - Math.sin(-rotation) * radiusX * Math.cos(startAngle)
                     + Math.cos(-rotation) * radiusY * Math.sin(startAngle),
          sweepFlag = counterClockwise ? 0 : 1,
          largeArcFlag = 0,
          diff = endAngle - startAngle;

      if(diff < 0) {
          diff += 2*Math.PI;
      }

      if(counterClockwise) {
          largeArcFlag = diff > Math.PI ? 0 : 1;
      } else {
          largeArcFlag = diff > Math.PI ? 1 : 0;
      }

      // Transform is already applied, so temporarily remove since lineTo
      // will apply it again.
      var currentTransform = this.ctx.__transformMatrix;
      this.ctx.resetTransform();
      this.lineTo(startX, startY);
      this.ctx.__transformMatrix = currentTransform;

      this.addPath(format("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",
          {
              rx:radiusX, 
              ry:radiusY, 
              xAxisRotation:rotation*(180/Math.PI), 
              largeArcFlag:largeArcFlag, 
              sweepFlag:sweepFlag, 
              endX:endX,
              endY:endY
          }));

      this.__currentPosition = {x: endX, y: endY};
  };

  return Path2D;
}());