kitchen-color-studio
Version:
an open-source color editor for designing color system
407 lines (402 loc) • 16.4 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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); }
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 _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 _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { CollapseTitle } from '@ant-design/pro-editor';
import { useLocalStorageState } from 'ahooks';
import { Tabs } from 'antd';
import { buttonGroup, useControls, useCreateStore } from 'leva';
import { memo, useEffect, useState } from 'react';
import { AccessPanel, ColorsList, ExportPanel, Footer, JsonView, LevaPanel, NavBar, PanelGroup, ScalePreview, StepFliter, TabKey, ThreeView, TokenView } from "./..";
import { CanvasView, ColorView, EditorView, PanelView } from "../styles";
import { advanceConfig, cacheEditorConfig, colorConfig, colorTypes, defineGenerateConfig, editConfig, genDisplapConfig, genScales, hueConfig, neutralAdvanceConfig, neutralConfig, patternConfig, setForceConfig, stepConfig, threeConfig, tokenConfig } from "./config";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var TabPane = Tabs.TabPane;
var Collapse = CollapseTitle;
var PanelTabKey = /*#__PURE__*/function (PanelTabKey) {
PanelTabKey["access"] = "access";
PanelTabKey["display"] = "display";
PanelTabKey["edit"] = "edit";
PanelTabKey["export"] = "export";
PanelTabKey["pattern"] = "pattern";
return PanelTabKey;
}(PanelTabKey || {});
var ColorStudio = /*#__PURE__*/memo(function (_ref) {
var logo = _ref.logo,
logoHref = _ref.logoHref,
title = _ref.title,
_ref$showFooter = _ref.showFooter,
showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
forceConfig = _ref.forceConfig,
onChange = _ref.onChange;
var _useLocalStorageState = useLocalStorageState('kietchen-color-tabkey', {
defaultValue: TabKey.colors
}),
_useLocalStorageState2 = _slicedToArray(_useLocalStorageState, 2),
tabKey = _useLocalStorageState2[0],
setTabKey = _useLocalStorageState2[1];
var _useLocalStorageState3 = useLocalStorageState('kietchen-color-panelkey', {
defaultValue: PanelTabKey.edit
}),
_useLocalStorageState4 = _slicedToArray(_useLocalStorageState3, 2),
panelTabKey = _useLocalStorageState4[0],
setPanelTabKey = _useLocalStorageState4[1];
var _useState = useState(cacheEditorConfig.colorList),
_useState2 = _slicedToArray(_useState, 2),
colorList = _useState2[0],
setColorList = _useState2[1];
var _useState3 = useState(cacheEditorConfig.stepFliter),
_useState4 = _slicedToArray(_useState3, 2),
stepFliter = _useState4[0],
setStepFliter = _useState4[1];
useEffect(function () {
if (forceConfig) setForceConfig(forceConfig);
}, []);
/******************************************************
************************* Store **********************
******************************************************/
// 调色
var editStore = useCreateStore();
var hueStore = useCreateStore();
// 调色-L&D
var lightUpStore = useCreateStore();
var lightDownStore = useCreateStore();
var darkUpStore = useCreateStore();
var darkDownStore = useCreateStore();
// 调色-L&D Advance
var lightUpAdvanceStore = useCreateStore();
var lightDownAdvanceStore = useCreateStore();
var darkUpAdvanceStore = useCreateStore();
var darkDownAdvanceStore = useCreateStore();
// 调色-Neutral
var neutralStore = useCreateStore();
var neutralAdvanceStore = useCreateStore();
// 色板
var patternStore = useCreateStore();
var stepStore = useCreateStore();
// 视图
var displayStore = useCreateStore();
var threeStore = useCreateStore();
var tokenStore = useCreateStore();
/******************************************************
************************* Controls *******************
******************************************************/
// 调色
var edit = useControls(editConfig, {
store: editStore
});
var hue = useControls(hueConfig, {
store: hueStore
});
// 调色-L&D
var lightUp = useControls(colorConfig.lightUp, {
store: lightUpStore
});
var lightDown = useControls(colorConfig.lightDown, {
store: lightDownStore
});
var darkUp = useControls(colorConfig.darkUp, {
store: darkUpStore
});
var darkDown = useControls(colorConfig.darkDown, {
store: darkDownStore
});
// 调色-L&D Advance
var lightUpAdvance = useControls(advanceConfig.lightUp, {
store: lightUpAdvanceStore
});
var lightDownAdvance = useControls(advanceConfig.lightDown, {
store: lightDownAdvanceStore
});
// 调色-Neutral
var darkUpAdvance = useControls(advanceConfig.darkUp, {
store: darkUpAdvanceStore
});
var darkDownAdvance = useControls(advanceConfig.darkDown, {
store: darkDownAdvanceStore
});
// 调色-Neutral
var neutral = useControls(neutralConfig, {
store: neutralStore
});
var neutralAdvance = useControls(neutralAdvanceConfig, {
store: neutralAdvanceStore
});
// 色板
var pattern = useControls(patternConfig, {
store: patternStore
});
var step = useControls(stepConfig, {
store: stepStore
});
// 视图
var displayColorTypeSwitch = {};
var _useControls = useControls(function () {
return genDisplapConfig(buttonGroup(displayColorTypeSwitch));
}, {
store: displayStore
}),
_useControls2 = _slicedToArray(_useControls, 2),
display = _useControls2[0],
setDisplayConfig = _useControls2[1];
colorTypes.forEach(function (ct) {
displayColorTypeSwitch[ct] = function () {
return setDisplayConfig({
colorType: ct
});
};
});
var three = useControls(threeConfig, {
store: threeStore
});
var token = useControls(tokenConfig, {
store: tokenStore
});
/******************************************************
************************* Configs ********************
******************************************************/
var generateConfig = defineGenerateConfig({
edit: edit,
step: step,
hue: hue,
neutral: neutral,
neutralAdvance: neutralAdvance,
lightUp: lightUp,
lightUpAdvance: lightUpAdvance,
lightDown: lightDown,
lightDownAdvance: lightDownAdvance,
darkUp: darkUp,
darkUpAdvance: darkUpAdvance,
darkDown: darkDown,
darkDownAdvance: darkDownAdvance
});
var editorConfig = {
generate: generateConfig,
colorList: colorList,
stepFliter: stepFliter,
system: {
edit: edit,
pattern: pattern
}
};
/******************************************************
********************** PanelGroup ********************
******************************************************/
var editPanelGroup = [{
header: '调色配置',
panel: /*#__PURE__*/_jsx(LevaPanel, {
store: editStore
})
}, {
header: edit.isolateEdit ? 'LIGHT 上梯度' : '上梯度',
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: lightUpStore
}), /*#__PURE__*/_jsx(Collapse, {
title: "\u9AD8\u7EA7\u914D\u7F6E",
children: /*#__PURE__*/_jsx(LevaPanel, {
store: lightUpAdvanceStore
})
})]
})
}, {
header: edit.isolateEdit ? 'LIGHT 下梯度' : '下梯度',
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: lightDownStore
}), /*#__PURE__*/_jsx(Collapse, {
title: "\u9AD8\u7EA7\u914D\u7F6E",
children: /*#__PURE__*/_jsx(LevaPanel, {
store: lightDownAdvanceStore
})
})]
})
}, {
header: 'DARK 上梯度',
hidden: !edit.isolateEdit,
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: darkUpStore
}), /*#__PURE__*/_jsx(Collapse, {
title: "\u9AD8\u7EA7\u914D\u7F6E",
children: /*#__PURE__*/_jsx(LevaPanel, {
store: darkUpAdvanceStore
})
})]
})
}, {
header: 'DARK 下梯度',
hidden: !edit.isolateEdit,
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: darkDownStore
}), /*#__PURE__*/_jsx(Collapse, {
title: "\u9AD8\u7EA7\u914D\u7F6E",
children: /*#__PURE__*/_jsx(LevaPanel, {
store: darkDownAdvanceStore
})
})]
})
}, {
header: '色相旋转补偿',
panel: /*#__PURE__*/_jsx(LevaPanel, {
store: hueStore
})
}, {
header: 'Neutal 中性色',
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: neutralStore
}), /*#__PURE__*/_jsx(Collapse, {
title: "\u9AD8\u7EA7\u914D\u7F6E",
children: /*#__PURE__*/_jsx(LevaPanel, {
store: neutralAdvanceStore
})
})]
})
}];
var patternPanelGroup = [{
header: '色板配置',
panel: /*#__PURE__*/_jsx(LevaPanel, {
store: patternStore
})
}, {
header: '梯度阶梯',
panel: /*#__PURE__*/_jsx(LevaPanel, {
store: stepStore
})
}, {
header: '梯度筛选',
panel: /*#__PURE__*/_jsx(StepFliter, {
color: colorList[0],
config: generateConfig,
defaultFliter: stepFliter,
onChange: setStepFliter
}),
hidden: !pattern.isFliterStep
}, {
header: '色板列表',
panel: /*#__PURE__*/_jsx(ColorsList, {
colorList: colorList,
isolateDark: pattern.isolateDark,
setColorList: setColorList
})
}];
var displayPanelGroup = [{
header: '展示配置',
panel: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(LevaPanel, {
store: displayStore
}), /*#__PURE__*/_jsx(Collapse, {
defaultExpand: true,
title: "\u6A21\u578B\u89C6\u56FE",
children: /*#__PURE__*/_jsx(LevaPanel, {
store: threeStore
})
})]
})
}];
var exportPanelGroup = [{
header: '变量配置',
panel: /*#__PURE__*/_jsx(LevaPanel, {
store: tokenStore
})
}];
var colorListScale = colorList.map(function (c) {
var _genScales = genScales(c, editorConfig),
scales = _genScales.scales,
color = _genScales.color,
darkColor = _genScales.darkColor;
return {
name: c.title,
scales: scales,
color: color,
darkColor: darkColor,
dom: /*#__PURE__*/_jsx(ScalePreview, {
color: _objectSpread(_objectSpread({}, c), {}, {
color: color,
darkColor: darkColor
}),
config: editorConfig,
displayConfig: display,
scales: scales
})
};
});
useEffect(function () {
// @ts-ignore
if (onChange) onChange(colorListScale.map(function (c) {
return {
name: c.name,
scales: c.scales
};
}));
}, [editorConfig]);
return /*#__PURE__*/_jsxs(EditorView, {
children: [/*#__PURE__*/_jsxs(CanvasView, {
children: [/*#__PURE__*/_jsx(NavBar, {
logo: logo,
logoHref: logoHref,
setTabKey: setTabKey,
tabKey: tabKey || TabKey.colors,
title: title
}), tabKey === TabKey.colors && /*#__PURE__*/_jsxs(ColorView, {
children: [colorListScale.map(function (color) {
return color.dom;
}), showFooter && /*#__PURE__*/_jsx(Footer, {})]
}), tabKey === TabKey.three && /*#__PURE__*/_jsx(ThreeView, {
config: _objectSpread(_objectSpread({}, three), display),
data: colorListScale
}), tabKey === TabKey.token && /*#__PURE__*/_jsx(TokenView, {
config: token,
data: colorListScale
}), tabKey === TabKey.config && /*#__PURE__*/_jsx(JsonView, {
data: editorConfig
})]
}), /*#__PURE__*/_jsx(PanelView, {
children: /*#__PURE__*/_jsxs(Tabs, {
defaultActiveKey: panelTabKey,
onChange: setPanelTabKey,
children: [/*#__PURE__*/_jsx(TabPane, {
tab: "\u8C03\u8272",
children: /*#__PURE__*/_jsx(PanelGroup, {
panels: editPanelGroup
})
}, PanelTabKey.edit), /*#__PURE__*/_jsx(TabPane, {
tab: "\u8272\u677F",
children: /*#__PURE__*/_jsx(PanelGroup, {
panels: patternPanelGroup
})
}, PanelTabKey.pattern), /*#__PURE__*/_jsx(TabPane, {
tab: "\u53EF\u8BFB\u6027",
children: /*#__PURE__*/_jsx(AccessPanel, {
data: colorListScale
})
}, PanelTabKey.access), /*#__PURE__*/_jsx(TabPane, {
tab: "\u89C6\u56FE",
children: /*#__PURE__*/_jsx(PanelGroup, {
panels: displayPanelGroup
})
}, PanelTabKey.display), /*#__PURE__*/_jsxs(TabPane, {
tab: "\u5B58\u50A8",
children: [/*#__PURE__*/_jsx(PanelGroup, {
panels: exportPanelGroup
}), /*#__PURE__*/_jsx(ExportPanel, {
config: editorConfig
})]
}, PanelTabKey.export)]
})
})]
});
});
export default ColorStudio;