zeplin-extension-style-kit/values/gradient/linearGradient.js

Models and utilities to generate CSS-like style code in Zeplin extensions.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _linearColorStop = _interopRequireDefault(require("./linearColorStop"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var LinearGradient = /*#__PURE__*/function () {
  // eslint-disable-next-line max-params
  function LinearGradient(colorStops, from, to, width, height) {
    _classCallCheck(this, LinearGradient);

    /*
     * Convert the relative `from` and `to` positions on a layer to absolute positions
     * by multiplying them with the width and height of the layer
     */
    var x1 = from.x * width;
    var y1 = from.y * height;
    var x2 = to.x * width;
    var y2 = to.y * height;
    this.angle = (360 - Math.round(Math.atan2(x1 - x2, y1 - y2) * 180 / Math.PI)) % 360;
    var pFirst;
    var pLast;
    var pStart;
    var pEnd; // Find the slope of the gradient line

    var m1 = (y2 - y1) / (x2 - x1);

    if (m1 === 0) {
      // If the slope is 0, gradient line is horizontal
      pFirst = x1;
      pLast = x2;
      pStart = 0;
      pEnd = width;
    } else if (!Number.isFinite(m1)) {
      // If the slope is ±Infinity, gradient line is vertical
      pFirst = y1;
      pLast = y2;
      pStart = 0;
      pEnd = height;
    } else {
      pFirst = x1;
      pLast = x2; // Find c1 such that y = m1 * x + c1, by applying one of the positions

      var c1 = y1 - m1 * x1; // The slope of a perpendicular line

      var m2 = -1 / m1; // Starting and ending points

      var x0;
      var y0;
      var xe;
      var ye;

      if (m1 > 0) {
        /*
         * If the slope is positive, starting point is top-left corner (0, 0)
         * and ending point is bottom-right corner (w, h)
         */
        x0 = 0;
        y0 = 0;
        xe = width;
        ye = height;
      } else {
        /*
         * If the slope is negative, starting point is bottom-left corner (0, h)
         * and ending point is top-right corner (w, 0)
         */
        x0 = 0;
        y0 = height;
        xe = width;
        ye = 0;
      }
      /*
       * `c2` equation constant of the line crossing from starting point
       * and perpendicular to the gradient line
       */


      var c2 = y0 - m2 * x0;
      /*
       * `x` position of the intersection point of gradient line
       * and the perpendecular line crossing from starting point
       */

      pStart = (c2 - c1) / (m1 - m2);
      /*
       * `c3` equation constant of the line crossing from ending point
       * and perpendicular to the gradient line
       */

      var c3 = ye - m2 * xe;
      /*
       * `x` position of the intersection point of gradient line
       * and the perpendecular line crossing from ending point
       */

      pEnd = (c3 - c1) / (m1 - m2);
    }

    this.colorStops = colorStops.map(function (_ref) {
      var color = _ref.color,
          p = _ref.position;
      // Convert the position coming from design tool to position on the actual gradient line
      var position = (p * (pLast - pFirst) + pFirst - pStart) / (pEnd - pStart);
      return new _linearColorStop.default({
        color,
        position
      });
    });
  }

  _createClass(LinearGradient, [{
    key: "valueOf",
    value: function valueOf() {
      var angle = this.angle,
          colorStops = this.colorStops;
      return "linearGradient::a:".concat(angle, ":").concat(colorStops.map(function (cs) {
        return cs.valueOf();
      }).join(":"));
    }
  }, {
    key: "equals",
    value: function equals(other) {
      return this.angle === other.angle && this.colorStops.length === other.colorStops.length && this.colorStops.every(function (cs, index) {
        return cs.equals(other.colorStops[index]);
      });
    }
  }, {
    key: "toCSSAngle",
    value: function toCSSAngle(angle) {
      switch (angle) {
        case 0:
          return "to top";

        case 90:
          return "to right";

        case 180:
          return "to bottom";

        case 270:
          return "to left";

        default:
          return "".concat(angle, "deg");
      }
    }
  }, {
    key: "toStyleValue",
    value: function toStyleValue(_ref2, variables) {
      var colorFormat = _ref2.colorFormat;
      var angle = this.angle,
          colorStops = this.colorStops;
      var colorStopStyle = colorStops.map(function (cs) {
        return cs.toStyleValue({
          colorFormat
        }, variables);
      }).join(", ");
      return "linear-gradient(".concat(this.toCSSAngle(angle), ", ").concat(colorStopStyle, ")");
    }
  }]);

  return LinearGradient;
}();

var _default = LinearGradient;
exports.default = _default;