drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-10-21 02:35:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace colorpalette with colorpicker (#392)

Browse Source
This commit is contained in:
1ilit
2025-04-06 03:36:46 +04:00
committed by GitHub
parent 3a8bb3f753
commit 46e91069d5
9 changed files with 2196 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ColorPicker.jsx
View File

@@ -1,42 +0,0 @@
import { Button } from "@douyinfe/semi-ui";
import { IconCheckboxTick } from "@douyinfe/semi-icons";
import { tableThemes } from "../data/constants";
import { useTranslation } from "react-i18next";
export default function ColorPalette({
currentColor,
onClearColor,
onPickColor,
}) {
const { t } = useTranslation();
return (
<div>
<div className="flex justify-between items-center p-2">
<div className="font-medium">{t("theme")}</div>
<Button type="tertiary" size="small" onClick={onClearColor}>
{t("clear")}
</Button>
</div>
<hr />
<div className="py-3 space-y-3">
<div className="flex flex-wrap w-72 gap-y-2">
{tableThemes.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="w-10 h-10 rounded-full mx-1"
onClick={() => onPickColor(c)}
>
<IconCheckboxTick
className="pt-1"
style={{
color: currentColor === c ? "white" : c,
}}
/>
</button>
))}
</div>
</div>
</div>
);
}

76
src/components/EditorCanvas/Area.jsx
View File

@@ -1,13 +1,7 @@
import { useRef, useState } from "react";
import { Button, Popover, Input } from "@douyinfe/semi-ui";
import { Button, Popover, Input, ColorPicker } from "@douyinfe/semi-ui";
import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
import {
Tab,
Action,
ObjectType,
defaultBlue,
State,
} from "../../data/constants";
import { Tab, Action, ObjectType, State } from "../../data/constants";
import {
useCanvas,
useLayout,
@@ -17,7 +11,6 @@ import {
useAreas,
useSaveState,
} from "../../hooks";
import ColorPalette from "../ColorPicker";
import { useTranslation } from "react-i18next";
import { useHover } from "usehooks-ts";
@@ -193,7 +186,6 @@ export default function Area({
function EditPopoverContent({ data }) {
const [editField, setEditField] = useState({});
const { setSaveState } = useSaveState();
const { updateArea, deleteArea } = useAreas();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { t } = useTranslation();
@@ -227,48 +219,28 @@ function EditPopoverContent({ data }) {
setRedoStack([]);
}}
/>
<Popover
content={
<div className="popover-theme">
<ColorPalette
currentColor={data.color}
onPickColor={(c) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: data.id,
undo: { color: data.color },
redo: { color: c },
message: t("edit_area", {
areaName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateArea(data.id, {
color: c,
});
}}
onClearColor={() => {
updateArea(data.id, {
color: defaultBlue,
});
setSaveState(State.SAVING);
}}
/>
</div>
}
position="rightTop"
showArrow
>
<div
className="h-[32px] w-[32px] rounded-sm"
style={{ backgroundColor: data.color }}
/>
</Popover>
<ColorPicker
onChange={({ hex: color }) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: data.id,
undo: { color: data.color },
redo: { color },
message: t("edit_area", {
areaName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateArea(data.id, { color });
}}
usePopover={true}
value={ColorPicker.colorStringToValue(data.color)}
/>
</div>
<div className="flex">
<Button

85
src/components/EditorCanvas/Note.jsx
View File

@@ -1,17 +1,7 @@
import { useState } from "react";
import {
Action,
ObjectType,
Tab,
State,
noteThemes,
} from "../../data/constants";
import { Input, Button, Popover } from "@douyinfe/semi-ui";
import {
IconEdit,
IconDeleteStroked,
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import { Action, ObjectType, Tab, State } from "../../data/constants";
import { Input, Button, Popover, ColorPicker } from "@douyinfe/semi-ui";
import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
import {
useLayout,
useUndoRedo,
@@ -209,58 +199,33 @@ export default function Note({ data, onPointerDown }) {
setRedoStack([]);
}}
/>
<Popover
content={
<div className="popover-theme">
<div className="font-medium mb-1">
{t("theme")}
</div>
<hr />
<div className="py-3">
{noteThemes.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1"
onClick={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: data.id,
undo: { color: data.color },
redo: { color: c },
message: t("edit_note", {
noteTitle: data.title,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateNote(data.id, { color: c });
}}
>
{data.color === c ? (
<IconCheckboxTick
style={{ color: "white" }}
/>
) : (
<IconCheckboxTick style={{ color: c }} />
)}
</button>
))}
</div>
</div>
}
position="rightTop"
showArrow
<ColorPicker
onChange={({ hex: color }) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: data.id,
undo: { color: data.color },
redo: { color },
message: t("edit_note", {
noteTitle: data.title,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateNote(data.id, { color });
}}
usePopover={true}
value={ColorPicker.colorStringToValue(data.color)}
>
<div
className="h-[32px] w-[32px] rounded-sm"
style={{ backgroundColor: data.color }}
/>
</Popover>
</ColorPicker>
</div>
<div className="flex">
<Button

152
src/components/EditorSidePanel/AreasTab/AreaDetails.jsx
View File

@@ -1,106 +1,74 @@
import { useState } from "react";
import { Row, Col, Button, Input, Popover } from "@douyinfe/semi-ui";
import { Button, Input, ColorPicker } from "@douyinfe/semi-ui";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { useAreas, useSaveState, useUndoRedo } from "../../../hooks";
import {
Action,
ObjectType,
State,
defaultBlue,
} from "../../../data/constants";
import ColorPalette from "../../ColorPicker";
import { useAreas, useUndoRedo } from "../../../hooks";
import { Action, ObjectType } from "../../../data/constants";
import { useTranslation } from "react-i18next";
export default function AreaInfo({ data, i }) {
const { t } = useTranslation();
const { setSaveState } = useSaveState();
const { deleteArea, updateArea } = useAreas();
const { setUndoStack, setRedoStack } = useUndoRedo();
const [editField, setEditField] = useState({});
return (
<Row
gutter={6}
type="flex"
justify="start"
align="middle"
id={`scroll_area_${data.id}`}
className="my-3"
>
<Col span={18}>
<Input
value={data.name}
placeholder={t("name")}
onChange={(value) => updateArea(data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.name) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: i,
undo: editField,
redo: { name: e.target.value },
message: t("edit_area", {
areaName: e.target.value,
extra: "[name]",
}),
},
]);
setRedoStack([]);
}}
<div id={`scroll_area_${data.id}`} className="my-3 flex gap-2 items-center">
<Input
value={data.name}
placeholder={t("name")}
onChange={(value) => updateArea(data.id, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.name) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: i,
undo: editField,
redo: { name: e.target.value },
message: t("edit_area", {
areaName: e.target.value,
extra: "[name]",
}),
},
]);
setRedoStack([]);
}}
/>
<ColorPicker
onChange={({ hex: color }) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: i,
undo: { color: data.color },
redo: { color },
message: t("edit_area", {
areaName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateArea(i, { color });
}}
usePopover={true}
value={ColorPicker.colorStringToValue(data.color)}
>
<div
className="h-[32px] w-[32px] rounded-sm shrink-0"
style={{ backgroundColor: data.color }}
/>
</Col>
<Col span={3}>
<Popover
content={
<div className="popover-theme">
<ColorPalette
currentColor={data.color}
onClearColor={() => {
updateArea(i, { color: defaultBlue });
setSaveState(State.SAVING);
}}
onPickColor={(c) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: i,
undo: { color: data.color },
redo: { color: c },
message: t("edit_area", {
areaName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateArea(i, { color: c });
}}
/>
</div>
}
trigger="click"
position="bottomLeft"
showArrow
>
<div
className="h-[32px] w-[32px] rounded-sm"
style={{ backgroundColor: data.color }}
/>
</Popover>
</Col>
<Col span={3}>
<Button
icon={<IconDeleteStroked />}
type="danger"
onClick={() => deleteArea(i, true)}
/>
</Col>
</Row>
</ColorPicker>
<Button
icon={<IconDeleteStroked />}
type="danger"
onClick={() => deleteArea(i, true)}
/>
</div>
);
}

80
src/components/EditorSidePanel/NotesTab/NoteInfo.jsx
View File

@@ -1,7 +1,13 @@
import { useState } from "react";
import { Button, Collapse, TextArea, Popover, Input } from "@douyinfe/semi-ui";
import { IconDeleteStroked, IconCheckboxTick } from "@douyinfe/semi-icons";
import { noteThemes, Action, ObjectType } from "../../../data/constants";
import {
Button,
Collapse,
TextArea,
Input,
ColorPicker,
} from "@douyinfe/semi-ui";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { Action, ObjectType } from "../../../data/constants";
import { useNotes, useUndoRedo } from "../../../hooks";
import { useTranslation } from "react-i18next";
@@ -88,55 +94,33 @@ export default function NoteInfo({ data, nid }) {
rows={3}
/>
<div className="ms-2">
<Popover
content={
<div className="popover-theme">
<div className="font-medium mb-1">{t("theme")}</div>
<hr />
<div className="py-3">
{noteThemes.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="w-10 h-10 p-3 rounded-full mx-1"
onClick={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: nid,
undo: { color: data.color },
redo: { color: c },
message: t("edit_note", {
noteTitle: data.title,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateNote(nid, { color: c });
}}
>
{data.color === c ? (
<IconCheckboxTick style={{ color: "white" }} />
) : (
<IconCheckboxTick style={{ color: c }} />
)}
</button>
))}
</div>
</div>
}
trigger="click"
position="rightTop"
showArrow
<ColorPicker
onChange={({ hex: color }) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
nid: nid,
undo: { color: data.color },
redo: { color },
message: t("edit_note", {
noteTitle: data.title,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateNote(nid, { color });
}}
usePopover={true}
value={ColorPicker.colorStringToValue(data.color)}
>
<div
className="h-[32px] w-[32px] rounded-sm mb-2"
className="h-[32px] w-[32px] rounded-sm shrink-0 mb-2"
style={{ backgroundColor: data.color }}
/>
</Popover>
</ColorPicker>
<Button
icon={<IconDeleteStroked />}
type="danger"

85
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
View File

@@ -5,12 +5,11 @@ import {
TextArea,
Button,
Card,
Popover,
ColorPicker,
} from "@douyinfe/semi-ui";
import { IconDeleteStroked } from "@douyinfe/semi-icons";
import { useDiagram, useUndoRedo } from "../../../hooks";
import { Action, ObjectType, defaultBlue } from "../../../data/constants";
import ColorPalette from "../../ColorPicker";
import { Action, ObjectType } from "../../../data/constants";
import TableField from "./TableField";
import IndexDetails from "./IndexDetails";
import { useTranslation } from "react-i18next";
@@ -223,63 +222,29 @@ export default function TableInfo({ data }) {
</Collapse>
</Card>
<div className="flex justify-between items-center gap-1 mb-2">
<div>
<Popover
content={
<div className="popover-theme">
<ColorPalette
currentColor={data.color}
onClearColor={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "self",
tid: data.id,
undo: { color: data.color },
redo: { color: defaultBlue },
message: t("edit_table", {
tableName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateTable(data.id, { color: defaultBlue });
}}
onPickColor={(c) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "self",
tid: data.id,
undo: { color: data.color },
redo: { color: c },
message: t("edit_table", {
tableName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateTable(data.id, { color: c });
}}
/>
</div>
}
trigger="click"
position="bottomLeft"
showArrow
>
<div
className="h-[32px] w-[32px] rounded-sm"
style={{ backgroundColor: data.color }}
/>
</Popover>
</div>
<ColorPicker
onChange={({ hex: color }) => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "self",
tid: data.id,
undo: { color: data.color },
redo: { color },
message: t("edit_table", {
tableName: data.name,
extra: "[color]",
}),
},
]);
setRedoStack([]);
updateTable(data.id, { color });
}}
usePopover={true}
value={ColorPicker.colorStringToValue(data.color)}
/>
<div className="flex gap-1">
<Button
block

23
src/data/constants.js
View File

@@ -1,26 +1,3 @@
export const tableThemes = [
"#f03c3c",
"#ff4f81",
"#bc49c4",
"#a751e8",
"#7c4af0",
"#6360f7",
"#7d9dff",
"#32c9b0",
"#3cde7d",
"#89e667",
"#ffe159",
"#ff9159",
];
export const noteThemes = [
"#ffdfd9",
"#fcf7ac",
"#cffcb1",
"#c7d2ff",
"#e7c7ff",
];
export const defaultBlue = "#175e7a";
export const defaultNoteTheme = "#fcf7ac";
export const darkBgTheme = "#16161A";