kitchen-color-studio
Version:
an open-source color editor for designing color system
233 lines (231 loc) • 12.5 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ColorStudio/index.tsx
var ColorStudio_exports = {};
__export(ColorStudio_exports, {
default: () => ColorStudio_default
});
module.exports = __toCommonJS(ColorStudio_exports);
var import_pro_editor = require("@ant-design/pro-editor");
var import_ahooks = require("ahooks");
var import_antd = require("antd");
var import_leva = require("leva");
var import_react = require("react");
var import__ = require("../index");
var import_styles = require("../styles");
var import_config = require("./config");
var { TabPane } = import_antd.Tabs;
var Collapse = import_pro_editor.CollapseTitle;
var ColorStudio = (0, import_react.memo)(
({ logo, logoHref, title, showFooter = true, forceConfig, onChange }) => {
const [tabKey, setTabKey] = (0, import_ahooks.useLocalStorageState)("kietchen-color-tabkey", {
defaultValue: import__.TabKey.colors
});
const [panelTabKey, setPanelTabKey] = (0, import_ahooks.useLocalStorageState)("kietchen-color-panelkey", {
defaultValue: "edit" /* edit */
});
const [colorList, setColorList] = (0, import_react.useState)(import_config.cacheEditorConfig.colorList);
const [stepFliter, setStepFliter] = (0, import_react.useState)(import_config.cacheEditorConfig.stepFliter);
(0, import_react.useEffect)(() => {
if (forceConfig)
(0, import_config.setForceConfig)(forceConfig);
}, []);
const editStore = (0, import_leva.useCreateStore)();
const hueStore = (0, import_leva.useCreateStore)();
const lightUpStore = (0, import_leva.useCreateStore)();
const lightDownStore = (0, import_leva.useCreateStore)();
const darkUpStore = (0, import_leva.useCreateStore)();
const darkDownStore = (0, import_leva.useCreateStore)();
const lightUpAdvanceStore = (0, import_leva.useCreateStore)();
const lightDownAdvanceStore = (0, import_leva.useCreateStore)();
const darkUpAdvanceStore = (0, import_leva.useCreateStore)();
const darkDownAdvanceStore = (0, import_leva.useCreateStore)();
const neutralStore = (0, import_leva.useCreateStore)();
const neutralAdvanceStore = (0, import_leva.useCreateStore)();
const patternStore = (0, import_leva.useCreateStore)();
const stepStore = (0, import_leva.useCreateStore)();
const displayStore = (0, import_leva.useCreateStore)();
const threeStore = (0, import_leva.useCreateStore)();
const tokenStore = (0, import_leva.useCreateStore)();
const edit = (0, import_leva.useControls)(import_config.editConfig, { store: editStore });
const hue = (0, import_leva.useControls)(import_config.hueConfig, { store: hueStore });
const lightUp = (0, import_leva.useControls)(import_config.colorConfig.lightUp, { store: lightUpStore });
const lightDown = (0, import_leva.useControls)(import_config.colorConfig.lightDown, { store: lightDownStore });
const darkUp = (0, import_leva.useControls)(import_config.colorConfig.darkUp, { store: darkUpStore });
const darkDown = (0, import_leva.useControls)(import_config.colorConfig.darkDown, { store: darkDownStore });
const lightUpAdvance = (0, import_leva.useControls)(import_config.advanceConfig.lightUp, { store: lightUpAdvanceStore });
const lightDownAdvance = (0, import_leva.useControls)(import_config.advanceConfig.lightDown, {
store: lightDownAdvanceStore
});
const darkUpAdvance = (0, import_leva.useControls)(import_config.advanceConfig.darkUp, { store: darkUpAdvanceStore });
const darkDownAdvance = (0, import_leva.useControls)(import_config.advanceConfig.darkDown, {
store: darkDownAdvanceStore
});
const neutral = (0, import_leva.useControls)(import_config.neutralConfig, { store: neutralStore });
const neutralAdvance = (0, import_leva.useControls)(import_config.neutralAdvanceConfig, { store: neutralAdvanceStore });
const pattern = (0, import_leva.useControls)(import_config.patternConfig, { store: patternStore });
const step = (0, import_leva.useControls)(import_config.stepConfig, { store: stepStore });
const displayColorTypeSwitch = {};
const [display, setDisplayConfig] = (0, import_leva.useControls)(
() => (0, import_config.genDisplapConfig)((0, import_leva.buttonGroup)(displayColorTypeSwitch)),
{
store: displayStore
}
);
import_config.colorTypes.forEach((ct) => {
displayColorTypeSwitch[ct] = () => setDisplayConfig({ colorType: ct });
});
const three = (0, import_leva.useControls)(import_config.threeConfig, { store: threeStore });
const token = (0, import_leva.useControls)(import_config.tokenConfig, { store: tokenStore });
const generateConfig = (0, import_config.defineGenerateConfig)({
edit,
step,
hue,
neutral,
neutralAdvance,
lightUp,
lightUpAdvance,
lightDown,
lightDownAdvance,
darkUp,
darkUpAdvance,
darkDown,
darkDownAdvance
});
const editorConfig = {
generate: generateConfig,
colorList,
stepFliter,
system: {
edit,
pattern
}
};
const editPanelGroup = [
{
header: "调色配置",
panel: /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: editStore })
},
{
header: edit.isolateEdit ? "LIGHT 上梯度" : "上梯度",
panel: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: lightUpStore }), /* @__PURE__ */ React.createElement(Collapse, { title: "高级配置" }, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: lightUpAdvanceStore })))
},
{
header: edit.isolateEdit ? "LIGHT 下梯度" : "下梯度",
panel: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: lightDownStore }), /* @__PURE__ */ React.createElement(Collapse, { title: "高级配置" }, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: lightDownAdvanceStore })))
},
{
header: "DARK 上梯度",
hidden: !edit.isolateEdit,
panel: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: darkUpStore }), /* @__PURE__ */ React.createElement(Collapse, { title: "高级配置" }, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: darkUpAdvanceStore })))
},
{
header: "DARK 下梯度",
hidden: !edit.isolateEdit,
panel: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: darkDownStore }), /* @__PURE__ */ React.createElement(Collapse, { title: "高级配置" }, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: darkDownAdvanceStore })))
},
{
header: "色相旋转补偿",
panel: /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: hueStore })
},
{
header: "Neutal 中性色",
panel: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: neutralStore }), /* @__PURE__ */ React.createElement(Collapse, { title: "高级配置" }, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: neutralAdvanceStore })))
}
];
const patternPanelGroup = [
{
header: "色板配置",
panel: /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: patternStore })
},
{
header: "梯度阶梯",
panel: /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: stepStore })
},
{
header: "梯度筛选",
panel: /* @__PURE__ */ React.createElement(
import__.StepFliter,
{
color: colorList[0],
config: generateConfig,
defaultFliter: stepFliter,
onChange: setStepFliter
}
),
hidden: !pattern.isFliterStep
},
{
header: "色板列表",
panel: /* @__PURE__ */ React.createElement(
import__.ColorsList,
{
colorList,
isolateDark: pattern.isolateDark,
setColorList
}
)
}
];
const displayPanelGroup = [
{
header: "展示配置",
panel: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: displayStore }), /* @__PURE__ */ React.createElement(Collapse, { defaultExpand: true, title: "模型视图" }, /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: threeStore })))
}
];
const exportPanelGroup = [
{
header: "变量配置",
panel: /* @__PURE__ */ React.createElement(import__.LevaPanel, { store: tokenStore })
}
];
const colorListScale = colorList.map((c) => {
const { scales, color, darkColor } = (0, import_config.genScales)(c, editorConfig);
return {
name: c.title,
scales,
color,
darkColor,
dom: /* @__PURE__ */ React.createElement(
import__.ScalePreview,
{
color: { ...c, color, darkColor },
config: editorConfig,
displayConfig: display,
scales
}
)
};
});
(0, import_react.useEffect)(() => {
if (onChange)
onChange(colorListScale.map((c) => ({ name: c.name, scales: c.scales })));
}, [editorConfig]);
return /* @__PURE__ */ React.createElement(import_styles.EditorView, null, /* @__PURE__ */ React.createElement(import_styles.CanvasView, null, /* @__PURE__ */ React.createElement(
import__.NavBar,
{
logo,
logoHref,
setTabKey,
tabKey: tabKey || import__.TabKey.colors,
title
}
), tabKey === import__.TabKey.colors && /* @__PURE__ */ React.createElement(import_styles.ColorView, null, colorListScale.map((color) => color.dom), showFooter && /* @__PURE__ */ React.createElement(import__.Footer, null)), tabKey === import__.TabKey.three && /* @__PURE__ */ React.createElement(import__.ThreeView, { config: { ...three, ...display }, data: colorListScale }), tabKey === import__.TabKey.token && /* @__PURE__ */ React.createElement(import__.TokenView, { config: token, data: colorListScale }), tabKey === import__.TabKey.config && /* @__PURE__ */ React.createElement(import__.JsonView, { data: editorConfig })), /* @__PURE__ */ React.createElement(import_styles.PanelView, null, /* @__PURE__ */ React.createElement(import_antd.Tabs, { defaultActiveKey: panelTabKey, onChange: setPanelTabKey }, /* @__PURE__ */ React.createElement(TabPane, { key: "edit" /* edit */, tab: "调色" }, /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: editPanelGroup })), /* @__PURE__ */ React.createElement(TabPane, { key: "pattern" /* pattern */, tab: "色板" }, /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: patternPanelGroup })), /* @__PURE__ */ React.createElement(TabPane, { key: "access" /* access */, tab: "可读性" }, /* @__PURE__ */ React.createElement(import__.AccessPanel, { data: colorListScale })), /* @__PURE__ */ React.createElement(TabPane, { key: "display" /* display */, tab: "视图" }, /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: displayPanelGroup })), /* @__PURE__ */ React.createElement(TabPane, { key: "export" /* export */, tab: "存储" }, /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: exportPanelGroup }), /* @__PURE__ */ React.createElement(import__.ExportPanel, { config: editorConfig })))));
}
);
var ColorStudio_default = ColorStudio;