zeplin-extension-style-kit/values/gradient/gradient.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 _extensionModel = require("@zeplin/extension-model");

var _linearGradient = _interopRequireDefault(require("./linearGradient"));

var _radialGradient = _interopRequireDefault(require("./radialGradient"));

var _conicGradient = _interopRequireDefault(require("./conicGradient"));

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; }

function generateColorGradient(_ref) {
  var r = _ref.r,
      g = _ref.g,
      b = _ref.b,
      a = _ref.a;
  return {
    type: "linear",
    from: {
      x: 0.5,
      y: 0
    },
    to: {
      x: 0.5,
      y: 1
    },
    colorStops: [{
      color: {
        r,
        g,
        b,
        a
      },
      position: 0
    }, {
      color: {
        r,
        g,
        b,
        a
      },
      position: 1
    }]
  };
}

var GRADIENT_TYPE = Object.freeze({
  LINEAR: "linear",
  RADIAL: "radial",
  ANGULAR: "angular"
});
var FRAME_SIZE = 100;

var Gradient = /*#__PURE__*/function () {
  function Gradient(gradientObject, width, height) {
    _classCallCheck(this, Gradient);

    var type = gradientObject.type,
        from = gradientObject.from,
        to = gradientObject.to,
        colorStops = gradientObject.colorStops;
    this.type = type;

    switch (type) {
      case GRADIENT_TYPE.LINEAR:
        this.gradient = new _linearGradient.default(colorStops, from, to, width, height);
        break;

      case GRADIENT_TYPE.RADIAL:
        this.gradient = new _radialGradient.default(colorStops, from, to, width, height);
        break;

      case GRADIENT_TYPE.ANGULAR:
        this.gradient = new _conicGradient.default(colorStops);
        break;

      default: // No-op

    }
  }

  _createClass(Gradient, [{
    key: "valueOf",
    value: function valueOf() {
      var type = this.type,
          gradient = this.gradient;
      return "gradient::t:".concat(type, ":g:").concat(gradient.valueOf());
    }
  }, {
    key: "equals",
    value: function equals(other) {
      return this.type === other.type && this.gradient.equals(other.gradient);
    }
  }, {
    key: "toStyleValue",
    value: function toStyleValue(_ref2, variables) {
      var colorFormat = _ref2.colorFormat;
      var gradient = this.gradient;

      if (gradient) {
        return gradient.toStyleValue({
          colorFormat
        }, variables);
      }

      return "";
    }
  }], [{
    key: "fromRGBA",
    value: function fromRGBA(_ref3) {
      var r = _ref3.r,
          g = _ref3.g,
          b = _ref3.b,
          _ref3$a = _ref3.a,
          a = _ref3$a === void 0 ? 1 : _ref3$a;
      return new Gradient(new _extensionModel.Gradient(generateColorGradient({
        r,
        g,
        b,
        a
      }), FRAME_SIZE, FRAME_SIZE), FRAME_SIZE, FRAME_SIZE);
    }
  }]);

  return Gradient;
}();

var _default = Gradient;
exports.default = _default;