antd-color-editor/es/genScalesByConfig/index.js

An open-source color editor for designing color system

var _excluded = ["colorList"];
var _neutralAdvanceConfig;
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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
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 _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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(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; }
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 { bezier } from '@leva-ui/plugin-bezier';
import { AngleIcon, AspectRatioIcon, BlendingModeIcon, CodeIcon, ColorWheelIcon, ComponentBooleanIcon, EyeNoneIcon, HobbyKnifeIcon, OpacityIcon, PinBottomIcon, PinTopIcon, ShadowIcon, TokensIcon, TransformIcon, UpdateIcon } from '@radix-ui/react-icons';
import { folder } from 'leva';
import { merge } from 'lodash-es';
import { GenerateScale, Label, colorTypeFormat, getAlphaColor } from "./..";
import { defaultEditorConfig } from "./defaultConfig";
import { jsx as _jsx } from "react/jsx-runtime";
export var getCacheEditorConfig = function getCacheEditorConfig() {
  var localConfig = localStorage.getItem('antd-color-config');
  var cacheConfig = localConfig ? merge(defaultEditorConfig, JSON.parse(localConfig).data) : defaultEditorConfig;
  return cacheConfig;
};
export var setForceConfig = function setForceConfig(forceConfig) {
  var _forceConfig$data;
  if (forceConfig !== null && forceConfig !== void 0 && (_forceConfig$data = forceConfig.data) !== null && _forceConfig$data !== void 0 && _forceConfig$data.generate && forceConfig !== null && forceConfig !== void 0 && forceConfig.time && forceConfig !== null && forceConfig !== void 0 && forceConfig.name) {
    var localConfig = localStorage.getItem('antd-color-config');
    if (localConfig) {
      var _localConfig;
      localConfig = JSON.parse(localConfig);
      if (((_localConfig = localConfig) === null || _localConfig === void 0 ? void 0 : _localConfig.name) === name) return;
    }
    localStorage.setItem('antd-color-config', JSON.stringify(forceConfig));
  }
};
export var cacheEditorConfig = getCacheEditorConfig();

/******************************************************
 ************************ 调色 *************************
 ******************************************************/

var defineColorConfig = function defineColorConfig(defaultColorConfig) {
  return {
    cTarget: {
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(BlendingModeIcon, {}),
        title: "\u8272\u5EA6\u76EE\u6807"
      }),
      max: 120,
      min: 1,
      step: 1,
      value: defaultColorConfig.cTarget
    },
    hRotate: {
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(ColorWheelIcon, {}),
        title: "\u8272\u76F8\u65CB\u8F6C"
      }),
      max: 360,
      min: -360,
      step: 1,
      value: defaultColorConfig.hRotate
    },
    tTarget: {
      label: /*#__PURE__*/_jsx(Label, {
        icon: /*#__PURE__*/_jsx(ShadowIcon, {}),
        title: "\u660E\u5EA6\u76EE\u6807"
      }),
      max: 100,
      min: 1,
      step: 1,
      value: defaultColorConfig.tTarget
    }
  };
};
export var colorConfig = {
  darkDown: defineColorConfig(cacheEditorConfig.generate.dark.down),
  darkUp: defineColorConfig(cacheEditorConfig.generate.dark.up),
  lightDown: defineColorConfig(cacheEditorConfig.generate.light.down),
  lightUp: defineColorConfig(cacheEditorConfig.generate.light.up)
};
var defineAdvanceConfig = function defineAdvanceConfig(defaultColorConfig) {
  var _ref;
  return _ref = {}, _defineProperty(_ref, '明度曲线', folder({
    tEasing: bezier(defaultColorConfig.tEasing)
  }, {
    collapsed: true,
    color: '#8c92a4'
  })), _defineProperty(_ref, '色度曲线', folder({
    cEasing: bezier(defaultColorConfig.cEasing)
  }, {
    collapsed: true,
    color: '#8c92a4'
  })), _defineProperty(_ref, '色相曲线', folder({
    hEasing: bezier(defaultColorConfig.hEasing)
  }, {
    collapsed: true,
    color: '#8c92a4'
  })), _ref;
};
export var advanceConfig = {
  darkDown: defineAdvanceConfig(cacheEditorConfig.generate.dark.down),
  darkUp: defineAdvanceConfig(cacheEditorConfig.generate.dark.up),
  lightDown: defineAdvanceConfig(cacheEditorConfig.generate.light.down),
  lightUp: defineAdvanceConfig(cacheEditorConfig.generate.light.up)
};
export var hueConfig = {
  multiply: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(AngleIcon, {}),
      title: "\u8865\u507F\u4E58\u9636"
    }),
    max: 1,
    min: -1,
    value: cacheEditorConfig.generate.hue.multiply
  },
  segment: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ColorWheelIcon, {}),
      title: "\u8865\u507F\u533A\u95F4"
    }),
    max: 360,
    min: 0,
    step: 1,
    value: cacheEditorConfig.generate.hue.segment
  }
};
export var neutralConfig = {
  cStart: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(BlendingModeIcon, {}),
      title: "\u8272\u5EA6\u6807\u51C6"
    }),
    max: 36,
    min: 1,
    step: 1,
    value: cacheEditorConfig.generate.neutral.cStart
  },
  cTarget: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(BlendingModeIcon, {}),
      title: "\u8272\u5EA6\u76EE\u6807"
    }),
    max: 36,
    min: 1,
    step: 1,
    value: cacheEditorConfig.generate.neutral.cTarget
  },
  standard: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(OpacityIcon, {}),
      title: "\u660E\u5EA6\u6807\u51C6"
    }),
    value: cacheEditorConfig.generate.neutral.standard
  }
};
export var neutralAdvanceConfig = (_neutralAdvanceConfig = {}, _defineProperty(_neutralAdvanceConfig, '上梯度 色度曲线', folder({
  cEasingUp: bezier(cacheEditorConfig.generate.neutral.cEasingUp)
}, {
  collapsed: true,
  color: '#8c92a4'
})), _defineProperty(_neutralAdvanceConfig, '下梯度 色度曲线', folder({
  cEasingDown: bezier(cacheEditorConfig.generate.neutral.cEasingDown)
}, {
  collapsed: true,
  color: '#8c92a4'
})), _neutralAdvanceConfig);

/******************************************************
 ************************ 色板 *************************
 ******************************************************/

export var patternConfig = {
  displayFliterStep: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(EyeNoneIcon, {}),
      title: "\u53EA\u663E\u793A\u7B5B\u9009\u540E\u68AF\u5EA6"
    }),
    render: function render(get) {
      return get('isFliterStep');
    },
    value: cacheEditorConfig.system.pattern.displayFliterStep
  },
  isFliterStep: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(HobbyKnifeIcon, {}),
      title: "\u5F00\u542F\u68AF\u5EA6\u7B5B\u9009"
    }),
    value: cacheEditorConfig.system.pattern.isFliterStep
  },
  isolateDark: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ComponentBooleanIcon, {}),
      title: "\u4EAE\u6697\u4E3B\u8272\u5206\u79BB"
    }),
    value: cacheEditorConfig.system.pattern.isolateDark
  }
};
export var stepConfig = {
  down: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(PinBottomIcon, {}),
      title: "\u5411\u4E0B\u68AF\u5EA6"
    }),
    min: 1,
    step: 1,
    value: cacheEditorConfig.generate.step.down
  },
  up: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(PinTopIcon, {}),
      title: "\u5411\u4E0A\u68AF\u5EA6"
    }),
    min: 1,
    step: 1,
    value: cacheEditorConfig.generate.step.up
  }
};

/******************************************************
 ************************ 视图 *************************
 ******************************************************/

export var editConfig = {
  isolateEdit: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ComponentBooleanIcon, {}),
      title: "\u4EAE\u6697\u8C03\u8282\u5206\u79BB"
    }),
    value: cacheEditorConfig.system.edit.isolateEdit
  }
};
export var colorTypes = ['mix', 'hex', 'hct', 'rgb', 'hsl', 'hsv', 'cts'];
export var displayConfig = {
  colorType: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(TokensIcon, {}),
      title: "\u8272\u5F69\u7A7A\u95F4"
    }),
    options: colorTypes,
    value: 'hct'
  },
  showDetail: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(AspectRatioIcon, {}),
      title: "\u8BE6\u7EC6\u6A21\u5F0F"
    }),
    value: true
  }
};
export var threeConfig = {
  autoRotate: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(UpdateIcon, {}),
      title: "\u81EA\u52A8\u65CB\u8F6C"
    }),
    value: true
  },
  hueZoom: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(EyeNoneIcon, {}),
      title: "\u8272\u76F8\u7F29\u653E"
    }),
    max: 10,
    min: 1,
    step: 1,
    value: 3.6
  },
  showFloor: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(EyeNoneIcon, {}),
      title: "\u663E\u793A\u8F85\u52A9\u7EBF"
    }),
    value: true
  },
  threeZoom: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(TransformIcon, {}),
      title: "\u6A21\u578B\u5C3A\u5BF8"
    }),
    max: 100,
    min: 1,
    step: 1,
    value: 8
  }
};
export var tokenConfig = {
  codeType: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(CodeIcon, {}),
      title: "\u53D8\u91CF\u683C\u5F0F"
    }),
    options: ['css', 'less', 'scss', 'js'],
    value: 'css'
  },
  colorType: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(TokensIcon, {}),
      title: "\u8272\u5F69\u7A7A\u95F4"
    }),
    options: ['mix', 'hex', 'rgb', 'hsl'],
    value: 'mix'
  },
  isolateDarkToken: {
    label: /*#__PURE__*/_jsx(Label, {
      icon: /*#__PURE__*/_jsx(ComponentBooleanIcon, {}),
      title: "\u4EAE\u6697\u53D8\u91CF\u5206\u79BB"
    }),
    value: true
  }
};

/******************************************************
 ******************* Define Config ********************
 ******************************************************/

export var defineGenerateConfig = function defineGenerateConfig(_ref2) {
  var edit = _ref2.edit,
    step = _ref2.step,
    hue = _ref2.hue,
    neutral = _ref2.neutral,
    neutralAdvance = _ref2.neutralAdvance,
    lightUp = _ref2.lightUp,
    lightUpAdvance = _ref2.lightUpAdvance,
    lightDown = _ref2.lightDown,
    lightDownAdvance = _ref2.lightDownAdvance,
    darkUp = _ref2.darkUp,
    darkUpAdvance = _ref2.darkUpAdvance,
    darkDown = _ref2.darkDown,
    darkDownAdvance = _ref2.darkDownAdvance;
  var config = {
    dark: {
      down: edit.isolateEdit ? _objectSpread(_objectSpread({}, darkDown), {}, {
        darkDownAdvance: darkDownAdvance
      }) : _objectSpread(_objectSpread({}, lightUp), lightUpAdvance),
      up: edit.isolateEdit ? _objectSpread(_objectSpread({}, darkUp), darkUpAdvance) : _objectSpread(_objectSpread({}, lightDown), lightDownAdvance)
    },
    hue: hue,
    light: {
      down: _objectSpread(_objectSpread({}, lightDown), lightDownAdvance),
      up: _objectSpread(_objectSpread({}, lightUp), lightUpAdvance)
    },
    neutral: _objectSpread(_objectSpread({}, neutral), neutralAdvance),
    step: step
  };
  return JSON.parse(JSON.stringify(config));
};
export var genScales = function genScales(color, config) {
  var system = config.system,
    stepFliter = config.stepFliter,
    generate = config.generate;
  var pattern = system.pattern;
  var scaleGeneration = new GenerateScale(generate);
  var scales = {
    dark: scaleGeneration.gen(pattern.isolateDark ? color.darkColor : color.color, {
      neutral: color.type === 'neutral',
      theme: 'dark'
    }),
    light: scaleGeneration.gen(color.color, {
      neutral: color.type === 'neutral',
      theme: 'light'
    })
  };
  var rawScales = scales;
  if (pattern.isFliterStep && pattern.displayFliterStep && (stepFliter === null || stepFliter === void 0 ? void 0 : stepFliter.length) > 0) {
    scales = {
      dark: scales.dark.filter(function (_, index) {
        return stepFliter.includes(index);
      }),
      light: scales.light.filter(function (_, index) {
        return stepFliter.includes(index);
      })
    };
  }
  return {
    color: rawScales.light[generate.step.up],
    darkColor: rawScales.dark[generate.step.up],
    scales: scales
  };
};
export var genScalesByConfig = function genScalesByConfig(config) {
  var colorList = config.colorList,
    rest = _objectWithoutProperties(config, _excluded);
  var data = {};
  var _iterator = _createForOfIteratorHelper(colorList),
    _step;
  try {
    for (_iterator.s(); !(_step = _iterator.n()).done;) {
      var color = _step.value;
      var _genScales$scales = genScales(color, rest).scales,
        dark = _genScales$scales.dark,
        light = _genScales$scales.light;
      data[color.id.toLowerCase()] = {
        dark: dark,
        darkA: dark.map(function (c) {
          return colorTypeFormat(getAlphaColor(c, '#000'), 'rgb');
        }),
        light: light,
        lightA: light.map(function (c) {
          return colorTypeFormat(getAlphaColor(c, '#fff'), 'rgb');
        })
      };
    }
  } catch (err) {
    _iterator.e(err);
  } finally {
    _iterator.f();
  }
  return data;
};
export * from "./defaultConfig";