antd-color-editor
Version:
An open-source color editor for designing color system
260 lines (258 loc) • 12.8 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_genScalesByConfig = require("../genScalesByConfig");
var import__ = require("../index");
var import_styles = require("../styles");
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)("antd-color-tabkey", {
defaultValue: import__.TabKey.colors
});
const [panelTabKey, setPanelTabKey] = (0, import_ahooks.useLocalStorageState)("antd-color-panelkey", {
defaultValue: "edit" /* edit */
});
const [colorList, setColorList] = (0, import_react.useState)(import_genScalesByConfig.cacheEditorConfig.colorList);
const [stepFliter, setStepFliter] = (0, import_react.useState)(import_genScalesByConfig.cacheEditorConfig.stepFliter);
(0, import_react.useEffect)(() => {
if (forceConfig)
(0, import_genScalesByConfig.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_genScalesByConfig.editConfig, { store: editStore });
const hue = (0, import_leva.useControls)(import_genScalesByConfig.hueConfig, { store: hueStore });
const lightUp = (0, import_leva.useControls)(import_genScalesByConfig.colorConfig.lightUp, { store: lightUpStore });
const lightDown = (0, import_leva.useControls)(import_genScalesByConfig.colorConfig.lightDown, { store: lightDownStore });
const darkUp = (0, import_leva.useControls)(import_genScalesByConfig.colorConfig.darkUp, { store: darkUpStore });
const darkDown = (0, import_leva.useControls)(import_genScalesByConfig.colorConfig.darkDown, { store: darkDownStore });
const lightUpAdvance = (0, import_leva.useControls)(import_genScalesByConfig.advanceConfig.lightUp, { store: lightUpAdvanceStore });
const lightDownAdvance = (0, import_leva.useControls)(import_genScalesByConfig.advanceConfig.lightDown, {
store: lightDownAdvanceStore
});
const darkUpAdvance = (0, import_leva.useControls)(import_genScalesByConfig.advanceConfig.darkUp, { store: darkUpAdvanceStore });
const darkDownAdvance = (0, import_leva.useControls)(import_genScalesByConfig.advanceConfig.darkDown, {
store: darkDownAdvanceStore
});
const neutral = (0, import_leva.useControls)(import_genScalesByConfig.neutralConfig, { store: neutralStore });
const neutralAdvance = (0, import_leva.useControls)(import_genScalesByConfig.neutralAdvanceConfig, { store: neutralAdvanceStore });
const pattern = (0, import_leva.useControls)(import_genScalesByConfig.patternConfig, { store: patternStore });
const step = (0, import_leva.useControls)(import_genScalesByConfig.stepConfig, { store: stepStore });
const display = (0, import_leva.useControls)(import_genScalesByConfig.displayConfig, { store: displayStore });
const three = (0, import_leva.useControls)(import_genScalesByConfig.threeConfig, { store: threeStore });
const token = (0, import_leva.useControls)(import_genScalesByConfig.tokenConfig, { store: tokenStore });
const generateConfig = (0, import_genScalesByConfig.defineGenerateConfig)({
darkDown,
darkDownAdvance,
darkUp,
darkUpAdvance,
edit,
hue,
lightDown,
lightDownAdvance,
lightUp,
lightUpAdvance,
neutral,
neutralAdvance,
step
});
const editorConfig = {
colorList,
generate: generateConfig,
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: "梯度筛选",
hidden: !pattern.isFliterStep,
panel: /* @__PURE__ */ React.createElement(
import__.StepFliter,
{
color: colorList[0],
config: generateConfig,
defaultFliter: stepFliter,
onChange: setStepFliter
}
)
},
{
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, index) => {
const { scales, color, darkColor } = (0, import_genScalesByConfig.genScales)(c, editorConfig);
return {
color,
darkColor,
dom: /* @__PURE__ */ React.createElement(
import__.ScalePreview,
{
color: { ...c, color, darkColor },
config: editorConfig,
displayConfig: display,
key: index,
scales
}
),
name: c.title,
scales
};
});
(0, import_react.useEffect)(() => {
if (onChange)
onChange(colorListScale.map((c) => ({ name: c.name, scales: c.scales })));
}, [editorConfig]);
const items = (0, import_react.useMemo)(
() => [
{
children: /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: editPanelGroup }),
key: "edit" /* edit */,
label: "调色"
},
{
children: /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: patternPanelGroup }),
key: "pattern" /* pattern */,
label: "色板"
},
{
children: /* @__PURE__ */ React.createElement(import__.AccessPanel, { data: colorListScale }),
key: "access" /* access */,
label: "可读性"
},
{
children: /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: displayPanelGroup }),
key: "display" /* display */,
label: "视图"
},
{
children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import__.PanelGroup, { panels: exportPanelGroup }), /* @__PURE__ */ React.createElement(import__.ExportPanel, { config: editorConfig })),
key: "export" /* export */,
label: "存储"
}
],
[editPanelGroup, patternPanelGroup, colorListScale, displayPanelGroup, exportPanelGroup]
);
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, items, onChange: setPanelTabKey })));
}
);
var ColorStudio_default = ColorStudio;