antd-color-editor
Version:
An open-source color editor for designing color system
189 lines (188 loc) • 9.55 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
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, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import BezierEasing from 'bezier-easing';
import { merge } from 'lodash-es';
import { hctToHex, hexToHct } from "./colorUtils";
export var defaultConfig = {
dark: {
down: {
cEasing: [0, 0, 1, 1],
cTarget: 5,
hEasing: [0, 0, 1, 1],
hRotate: -10,
tEasing: [0, 0, 1, 1],
tTarget: 98
},
up: {
cEasing: [0, 0, 1, 1],
cTarget: 50,
hEasing: [0, 0, 1, 1],
hRotate: 20,
tEasing: [0, 0, 1, 1],
tTarget: 10
}
},
hue: {
multiply: -0.5,
segment: [100, 200]
},
light: {
down: {
cEasing: [0, 0, 1, 1],
cTarget: 50,
hEasing: [0, 0, 1, 1],
hRotate: 20,
tEasing: [0, 0, 1, 1],
tTarget: 10
},
up: {
cEasing: [0, 0, 1, 1],
cTarget: 5,
hEasing: [0, 0, 1, 1],
hRotate: -10,
tEasing: [0, 0, 1, 1],
tTarget: 98
}
},
neutral: {
cEasingDown: [0, 0, 1, 1],
cEasingUp: [0, 0, 1, 1],
cStart: 15,
cTarget: 10,
standard: '#888'
},
step: {
down: 5,
up: 5
}
};
var GenerateScale = /*#__PURE__*/function () {
function GenerateScale(config) {
_classCallCheck(this, GenerateScale);
_defineProperty(this, "config", defaultConfig);
this.config = merge(this.config, config);
}
_createClass(GenerateScale, [{
key: "gen",
value: function gen(color) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
neutral: false,
theme: 'light'
};
if (opts.neutral) return this.genNeutral(color, opts);
var hctColor = hexToHct(color);
var hctUpList = this.genList(hctColor, 'up', opts.theme === 'dark').reverse();
var hctDownList = this.genList(hctColor, 'down', opts.theme === 'dark');
var hctList = [].concat(_toConsumableArray(hctUpList), [hctColor], _toConsumableArray(hctDownList));
return hctList.map(function (item) {
return hctToHex(item);
});
}
}, {
key: "genNeutral",
value: function genNeutral(color, opts) {
var hctColor = hexToHct(color);
hctColor = [hctColor[0], this.config.neutral.cStart, hexToHct(this.config.neutral.standard)[2]];
if (this.config.neutral.cStart === 1) {
hctColor = hexToHct(this.config.neutral.standard);
this.config.neutral.cStart = 2;
this.config.neutral.cTarget = 2;
}
var hctUpList = this.genList(hctColor, 'up', opts.theme === 'dark', true).reverse();
var hctDownList = this.genList(hctColor, 'down', opts.theme === 'dark', true);
var hctList = [].concat(_toConsumableArray(hctUpList), [hctColor], _toConsumableArray(hctDownList));
return hctList.map(function (item) {
return hctToHex(item);
});
}
}, {
key: "genList",
value: function genList(hctColor) {
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'up';
var dark = arguments.length > 2 ? arguments[2] : undefined;
var neutral = arguments.length > 3 ? arguments[3] : undefined;
var up = dark ? this.config.dark.up : this.config.light.up;
var down = dark ? this.config.dark.down : this.config.light.down;
var step = direction === 'up' ? this.config.step.up : this.config.step.down;
var stepList = [];
var _ref = direction === 'up' ? up : down,
hRotate = _ref.hRotate,
tTarget = _ref.tTarget,
hEasing = _ref.hEasing,
tEasing = _ref.tEasing;
var _ref2 = direction === 'up' ? up : down,
cTarget = _ref2.cTarget,
cEasing = _ref2.cEasing;
if (neutral) {
cTarget = this.config.neutral.cTarget;
cEasing = direction === 'up' ? this.config.neutral.cEasingUp : this.config.neutral.cEasingDown;
}
// @ts-ignore
var hBE = BezierEasing.apply(void 0, _toConsumableArray(hEasing));
// @ts-ignore
var cBE = BezierEasing.apply(void 0, _toConsumableArray(cEasing));
// @ts-ignore
var tBE = BezierEasing.apply(void 0, _toConsumableArray(tEasing));
var _hctColor = _slicedToArray(hctColor, 3),
h = _hctColor[0],
c = _hctColor[1],
t = _hctColor[2];
for (var i = 1; i <= step; i++) {
var percent = i / step;
var newH = this.hueRotate(h, hRotate * hBE(percent));
var newC = c + (cTarget - c) * cBE(percent);
var newT = t + (tTarget - t) * tBE(percent);
stepList.push([newH, newC, newT]);
}
return stepList;
}
}, {
key: "hueRotate",
value: function hueRotate(h, hRotate) {
var hue = h + this.calcHueRotate(h, hRotate);
if (hue > 360) hue = hue - 360;
if (hue < 0) hue = hue + 360;
return hue;
}
}, {
key: "genCalcHueVaule",
value: function genCalcHueVaule(Xa, Xb, max, multiply) {
var toRad = Math.PI / 180;
var a = 360 / (Xb - Xa);
var b = -1 * a * toRad * (3 * Xa + Xb) / 4;
var min = max * multiply;
var y = (max + min) / 2;
var scale = (max - min) / 2;
return function (v) {
var rad = v * toRad;
return scale * Math.sin(a * rad + b) + y;
};
}
}, {
key: "calcHueRotate",
value: function calcHueRotate(h, hRotate) {
var _this$config$hue = this.config.hue,
segment = _this$config$hue.segment,
multiply = _this$config$hue.multiply;
var calcHueVaule = this.genCalcHueVaule(segment[0], segment[1], hRotate, multiply);
return calcHueVaule(h);
}
}]);
return GenerateScale;
}();
export default GenerateScale;