tdesign-mobile-vue/cjs/_common/js/color-picker/color.js

tdesign-mobile-vue

/**
 * tdesign v1.7.0
 * (c) 2024 TDesign Group
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _common_js_colorPicker_gradient = require('../../../_chunks/dep-6f00700e.js');
var _common_js_colorPicker_cmyk = require('./cmyk.js');
require('lodash/isString');
require('lodash/isNull');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

var _Color;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var mathRound = Math.round;
var hsv2rgba = function hsv2rgba(states) {
  return _common_js_colorPicker_gradient.tinycolor(states).toRgb();
};
var hsv2hsva = function hsv2hsva(states) {
  return _common_js_colorPicker_gradient.tinycolor(states).toHsv();
};
var hsv2hsla = function hsv2hsla(states) {
  return _common_js_colorPicker_gradient.tinycolor(states).toHsl();
};
var gradientColors2string = function gradientColors2string(object) {
  var points = object.points,
    degree = object.degree;
  var colorsStop = points.sort(function (pA, pB) {
    return pA.left - pB.left;
  }).map(function (p) {
    return "".concat(p.color, " ").concat(Math.round(p.left * 100) / 100, "%");
  });
  return "linear-gradient(".concat(degree, "deg,").concat(colorsStop.join(","), ")");
};
var getColorWithoutAlpha = function getColorWithoutAlpha(color) {
  return _common_js_colorPicker_gradient.tinycolor(color).setAlpha(1).toHexString();
};
var genId = function genId() {
  return (1 + Math.random() * 4294967295).toString(16);
};
var genGradientPoint = function genGradientPoint(left, color) {
  return {
    id: genId(),
    left: left,
    color: color
  };
};
var Color = /*#__PURE__*/function () {
  function Color(input) {
    _classCallCheck__default["default"](this, Color);
    _defineProperty__default["default"](this, "states", {
      s: 100,
      v: 100,
      h: 100,
      a: 1
    });
    _defineProperty__default["default"](this, "originColor", void 0);
    _defineProperty__default["default"](this, "isGradient", void 0);
    _defineProperty__default["default"](this, "gradientStates", {
      colors: [],
      degree: 0,
      selectedId: null,
      css: ""
    });
    this.update(input);
  }
  return _createClass__default["default"](Color, [{
    key: "update",
    value: function update(input) {
      if (input === this.originColor) {
        return;
      }
      var gradientColors = _common_js_colorPicker_gradient.parseGradientString(input);
      if (this.isGradient && !gradientColors) {
        var colorHsv = _common_js_colorPicker_gradient.tinycolor(input).toHsv();
        this.states = colorHsv;
        this.updateCurrentGradientColor();
        return;
      }
      this.originColor = input;
      this.isGradient = false;
      var colorInput = input;
      if (gradientColors) {
        var _points$, _this$gradientSelecte;
        this.isGradient = true;
        var object = gradientColors;
        var points = object.points.map(function (c) {
          return genGradientPoint(c.left, c.color);
        });
        this.gradientStates = {
          colors: points,
          degree: object.degree,
          selectedId: ((_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.id) || null
        };
        this.gradientStates.css = this.linearGradient;
        colorInput = (_this$gradientSelecte = this.gradientSelectedPoint) === null || _this$gradientSelecte === void 0 ? void 0 : _this$gradientSelecte.color;
      }
      this.updateStates(colorInput);
    }
  }, {
    key: "saturation",
    get: function get() {
      return this.states.s;
    },
    set: function set(value) {
      this.states.s = Math.max(0, Math.min(100, value));
      this.updateCurrentGradientColor();
    }
  }, {
    key: "value",
    get: function get() {
      return this.states.v;
    },
    set: function set(value) {
      this.states.v = Math.max(0, Math.min(100, value));
      this.updateCurrentGradientColor();
    }
  }, {
    key: "hue",
    get: function get() {
      return this.states.h;
    },
    set: function set(value) {
      this.states.h = Math.max(0, Math.min(360, value));
      this.updateCurrentGradientColor();
    }
  }, {
    key: "alpha",
    get: function get() {
      return this.states.a;
    },
    set: function set(value) {
      this.states.a = Math.max(0, Math.min(1, Math.round(value * 100) / 100));
      this.updateCurrentGradientColor();
    }
  }, {
    key: "rgb",
    get: function get() {
      var _hsv2rgba = hsv2rgba(this.states),
        r = _hsv2rgba.r,
        g = _hsv2rgba.g,
        b = _hsv2rgba.b;
      return "rgb(".concat(mathRound(r), ", ").concat(mathRound(g), ", ").concat(mathRound(b), ")");
    }
  }, {
    key: "rgba",
    get: function get() {
      var _hsv2rgba2 = hsv2rgba(this.states),
        r = _hsv2rgba2.r,
        g = _hsv2rgba2.g,
        b = _hsv2rgba2.b,
        a = _hsv2rgba2.a;
      return "rgba(".concat(mathRound(r), ", ").concat(mathRound(g), ", ").concat(mathRound(b), ", ").concat(a, ")");
    }
  }, {
    key: "hsv",
    get: function get() {
      var _this$getHsva = this.getHsva(),
        h = _this$getHsva.h,
        s = _this$getHsva.s,
        v = _this$getHsva.v;
      return "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)");
    }
  }, {
    key: "hsva",
    get: function get() {
      var _this$getHsva2 = this.getHsva(),
        h = _this$getHsva2.h,
        s = _this$getHsva2.s,
        v = _this$getHsva2.v,
        a = _this$getHsva2.a;
      return "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(a, ")");
    }
  }, {
    key: "hsl",
    get: function get() {
      var _this$getHsla = this.getHsla(),
        h = _this$getHsla.h,
        s = _this$getHsla.s,
        l = _this$getHsla.l;
      return "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
    }
  }, {
    key: "hsla",
    get: function get() {
      var _this$getHsla2 = this.getHsla(),
        h = _this$getHsla2.h,
        s = _this$getHsla2.s,
        l = _this$getHsla2.l,
        a = _this$getHsla2.a;
      return "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")");
    }
  }, {
    key: "hex",
    get: function get() {
      return _common_js_colorPicker_gradient.tinycolor(this.states).toHexString();
    }
  }, {
    key: "hex8",
    get: function get() {
      return _common_js_colorPicker_gradient.tinycolor(this.states).toHex8String();
    }
  }, {
    key: "cmyk",
    get: function get() {
      var _this$getCmyk = this.getCmyk(),
        c = _this$getCmyk.c,
        m = _this$getCmyk.m,
        y = _this$getCmyk.y,
        k = _this$getCmyk.k;
      return "cmyk(".concat(c, ", ").concat(m, ", ").concat(y, ", ").concat(k, ")");
    }
  }, {
    key: "css",
    get: function get() {
      if (this.isGradient) {
        return this.linearGradient;
      }
      return this.rgba;
    }
  }, {
    key: "linearGradient",
    get: function get() {
      var gradientColors = this.gradientColors,
        gradientDegree = this.gradientDegree;
      return gradientColors2string({
        points: gradientColors,
        degree: gradientDegree
      });
    }
  }, {
    key: "gradientColors",
    get: function get() {
      return this.gradientStates.colors;
    },
    set: function set(colors) {
      this.gradientStates.colors = colors;
      this.gradientStates.css = this.linearGradient;
    }
  }, {
    key: "gradientSelectedId",
    get: function get() {
      return this.gradientStates.selectedId;
    },
    set: function set(id) {
      var _this$gradientSelecte2;
      if (id === this.gradientSelectedId) {
        return;
      }
      this.gradientStates.selectedId = id;
      this.updateStates((_this$gradientSelecte2 = this.gradientSelectedPoint) === null || _this$gradientSelecte2 === void 0 ? void 0 : _this$gradientSelecte2.color);
    }
  }, {
    key: "gradientDegree",
    get: function get() {
      return this.gradientStates.degree;
    },
    set: function set(degree) {
      this.gradientStates.degree = Math.max(0, Math.min(360, degree));
      this.gradientStates.css = this.linearGradient;
    }
  }, {
    key: "gradientSelectedPoint",
    get: function get() {
      var gradientColors = this.gradientColors,
        gradientSelectedId = this.gradientSelectedId;
      return gradientColors.find(function (color) {
        return color.id === gradientSelectedId;
      });
    }
  }, {
    key: "getFormatsColorMap",
    value: function getFormatsColorMap() {
      return {
        HEX: this.hex,
        CMYK: this.cmyk,
        RGB: this.rgb,
        RGBA: this.rgba,
        HSL: this.hsl,
        HSLA: this.hsla,
        HSV: this.hsv,
        HSVA: this.hsva,
        CSS: this.css,
        HEX8: this.hex8
      };
    }
  }, {
    key: "updateCurrentGradientColor",
    value: function updateCurrentGradientColor() {
      var isGradient = this.isGradient,
        gradientColors = this.gradientColors,
        gradientSelectedId = this.gradientSelectedId;
      var length = gradientColors.length;
      var current = this.gradientSelectedPoint;
      if (!isGradient || length === 0 || !current) {
        return false;
      }
      var index = gradientColors.findIndex(function (color) {
        return color.id === gradientSelectedId;
      });
      var newColor = _objectSpread(_objectSpread({}, current), {}, {
        color: this.rgba
      });
      gradientColors.splice(index, 1, newColor);
      this.gradientColors = gradientColors.slice();
      return this;
    }
  }, {
    key: "updateStates",
    value: function updateStates(input) {
      var color = _common_js_colorPicker_gradient.tinycolor(_common_js_colorPicker_cmyk.cmykInputToColor(input));
      var hsva = color.toHsv();
      this.states = hsva;
    }
  }, {
    key: "getRgba",
    value: function getRgba() {
      var _hsv2rgba3 = hsv2rgba(this.states),
        r = _hsv2rgba3.r,
        g = _hsv2rgba3.g,
        b = _hsv2rgba3.b,
        a = _hsv2rgba3.a;
      return {
        r: mathRound(r),
        g: mathRound(g),
        b: mathRound(b),
        a: a
      };
    }
  }, {
    key: "getCmyk",
    value: function getCmyk() {
      var _this$getRgba = this.getRgba(),
        r = _this$getRgba.r,
        g = _this$getRgba.g,
        b = _this$getRgba.b;
      var _rgb2cmyk = _common_js_colorPicker_cmyk.rgb2cmyk(r, g, b),
        _rgb2cmyk2 = _slicedToArray__default["default"](_rgb2cmyk, 4),
        c = _rgb2cmyk2[0],
        m = _rgb2cmyk2[1],
        y = _rgb2cmyk2[2],
        k = _rgb2cmyk2[3];
      return {
        c: mathRound(c * 100),
        m: mathRound(m * 100),
        y: mathRound(y * 100),
        k: mathRound(k * 100)
      };
    }
  }, {
    key: "getHsva",
    value: function getHsva() {
      var _hsv2hsva = hsv2hsva(this.states),
        h = _hsv2hsva.h,
        s = _hsv2hsva.s,
        v = _hsv2hsva.v,
        a = _hsv2hsva.a;
      h = mathRound(h);
      s = mathRound(s * 100);
      v = mathRound(v * 100);
      a *= 1;
      return {
        h: h,
        s: s,
        v: v,
        a: a
      };
    }
  }, {
    key: "getHsla",
    value: function getHsla() {
      var _hsv2hsla = hsv2hsla(this.states),
        h = _hsv2hsla.h,
        s = _hsv2hsla.s,
        l = _hsv2hsla.l,
        a = _hsv2hsla.a;
      h = mathRound(h);
      s = mathRound(s * 100);
      l = mathRound(l * 100);
      a *= 1;
      return {
        h: h,
        s: s,
        l: l,
        a: a
      };
    }
  }, {
    key: "equals",
    value: function equals(color) {
      return _common_js_colorPicker_gradient.tinycolor.equals(this.rgba, color);
    }
  }], [{
    key: "isValid",
    value: function isValid(color) {
      if (_common_js_colorPicker_gradient.parseGradientString(color)) {
        return true;
      }
      return _common_js_colorPicker_gradient.tinycolor(color).isValid();
    }
  }, {
    key: "hsva2color",
    value: function hsva2color(h, s, v, a) {
      return _common_js_colorPicker_gradient.tinycolor({
        h: h,
        s: s,
        v: v,
        a: a
      }).toHsvString();
    }
  }, {
    key: "hsla2color",
    value: function hsla2color(h, s, l, a) {
      return _common_js_colorPicker_gradient.tinycolor({
        h: h,
        s: s,
        l: l,
        a: a
      }).toHslString();
    }
  }, {
    key: "rgba2color",
    value: function rgba2color(r, g, b, a) {
      return _common_js_colorPicker_gradient.tinycolor({
        r: r,
        g: g,
        b: b,
        a: a
      }).toHsvString();
    }
  }, {
    key: "hex2color",
    value: function hex2color(hex, a) {
      var color = _common_js_colorPicker_gradient.tinycolor(hex);
      color.setAlpha(a);
      return color.toHexString();
    }
  }, {
    key: "object2color",
    value: function object2color(object, format) {
      if (format === "CMYK") {
        var c = object.c,
          m = object.m,
          y = object.y,
          k = object.k;
        return "cmyk(".concat(c, ", ").concat(m, ", ").concat(y, ", ").concat(k, ")");
      }
      var color = _common_js_colorPicker_gradient.tinycolor(object, {
        format: format
      });
      return color.toRgbString();
    }
  }]);
}();
_Color = Color;
_defineProperty__default["default"](Color, "isGradientColor", function (input) {
  return !!_common_js_colorPicker_gradient.isGradientColor(input);
});
_defineProperty__default["default"](Color, "compare", function (color1, color2) {
  var isGradientColor1 = _Color.isGradientColor(color1);
  var isGradientColor2 = _Color.isGradientColor(color2);
  if (isGradientColor1 && isGradientColor2) {
    var gradientColor1 = gradientColors2string(_common_js_colorPicker_gradient.parseGradientString(color1));
    var gradientColor2 = gradientColors2string(_common_js_colorPicker_gradient.parseGradientString(color2));
    return gradientColor1 === gradientColor2;
  }
  if (!isGradientColor1 && !isGradientColor2) {
    return _common_js_colorPicker_gradient.tinycolor.equals(color1, color2);
  }
  return false;
});
var COLOR_OBJECT_OUTPUT_KEYS = ["alpha", "css", "hex", "hex8", "hsl", "hsla", "hsv", "hsva", "rgb", "rgba", "saturation", "value", "isGradient"];
var getColorObject = function getColorObject(color) {
  if (!color) {
    return null;
  }
  var colorObject = /* @__PURE__ */Object.create(null);
  COLOR_OBJECT_OUTPUT_KEYS.forEach(function (key) {
    return colorObject[key] = color[key];
  });
  if (color.isGradient) {
    colorObject.linearGradient = color.linearGradient;
  }
  return colorObject;
};

exports.Color = Color;
exports["default"] = Color;
exports.genGradientPoint = genGradientPoint;
exports.genId = genId;
exports.getColorObject = getColorObject;
exports.getColorWithoutAlpha = getColorWithoutAlpha;
exports.gradientColors2string = gradientColors2string;
//# sourceMappingURL=color.js.map