zeplin-extension-style-kit/values/gradient/radialGradient.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"));

var _percent = _interopRequireDefault(require("../percent"));

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 RadialGradient = /*#__PURE__*/function () {
  // eslint-disable-next-line max-params
  function RadialGradient(colorStops, from, to, width, height) {
    _classCallCheck(this, RadialGradient);

    this.center = from;
    /*
     * 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; // The length of the gradient line between `from` (center) and `to` points

    var gradientDistance = Math.hypot(x1 - x2, y1 - y2);
    var farthestDistance = 0;
    var corners = [{
      x: 0,
      y: 0
    }, {
      x: width,
      y: 0
    }, {
      x: width,
      y: height
    }, {
      x: 0,
      y: height
    }];
    corners.forEach(function (corner) {
      var distance = Math.hypot(x1 - corner.x, y1 - corner.y);

      if (distance > farthestDistance) {
        farthestDistance = distance;
      }
    });
    var distanceRatio = gradientDistance / farthestDistance;
    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 * distanceRatio;
      return new _linearColorStop.default({
        color,
        position
      });
    });
  }

  _createClass(RadialGradient, [{
    key: "valueOf",
    value: function valueOf() {
      var center = this.center,
          colorStops = this.colorStops;
      return "radialGradient::cx:".concat(center.x, ":cy:").concat(center.y, ":").concat(colorStops.map(function (cs) {
        return cs.valueOf();
      }).join(":"));
    }
  }, {
    key: "equals",
    value: function equals(other) {
      return this.center.x === other.center.x && this.center.y === other.center.y && this.colorStops.length === other.colorStops.length && this.colorStops.every(function (cs, index) {
        return cs.equals(other.colorStops[index]);
      });
    }
  }, {
    key: "toStyleValue",
    value: function toStyleValue(_ref2, variables) {
      var colorFormat = _ref2.colorFormat;
      var center = this.center,
          colorStops = this.colorStops;
      var colorStopStyle = colorStops.map(function (cs) {
        return cs.toStyleValue({
          colorFormat
        }, variables);
      }).join(", ");
      return "radial-gradient(circle at ".concat(new _percent.default(center.x).toStyleValue(), " ").concat(new _percent.default(center.y).toStyleValue(), ", ").concat(colorStopStyle, ")");
    }
  }]);

  return RadialGradient;
}();

var _default = RadialGradient;
exports.default = _default;