titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use ColorPallete in area popover

Browse Source
This commit is contained in:
1ilit 2024-04-06 09:56:20 +03:00
parent 234d4fc04b
commit 1efd72dfe3
1 changed files with 27 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,12 @@ import { useState } from "react";
import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui"; import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui";
import { import {
IconEdit, IconEdit,
IconCheckboxTick,
IconDeleteStroked, IconDeleteStroked,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
import { import {
Tab, Tab,
Action, Action,
ObjectType, ObjectType,
tableThemes,
defaultBlue, defaultBlue,
State, State,
} from "../../data/constants"; } from "../../data/constants";
@ -22,6 +20,7 @@ import {
useSaveState, useSaveState,
useTransform, useTransform,
} from "../../hooks"; } from "../../hooks";
import ColorPallete from "../ColorPallete";
export default function Area({ data, onMouseDown, setResize, setInitCoords }) { export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
@ -225,92 +224,32 @@ function EditPopoverContent({ data }) {
<Popover <Popover
content={ content={
<div className="popover-theme"> <div className="popover-theme">
<div className="flex justify-between items-center p-2"> <ColorPallete
<div className="font-medium">Theme</div> currentColor={data.color}
<Button onPickColor={(c) => {
type="tertiary" setUndoStack((prev) => [
size="small" ...prev,
onClick={() => { {
updateArea(data.id, { action: Action.EDIT,
color: defaultBlue, element: ObjectType.AREA,
}); aid: data.id,
setSaveState(State.SAVING); undo: { color: data.color },
}} redo: { color: c },
> message: `Edit area color to ${c}`,
Clear },
</Button> ]);
</div> setRedoStack([]);
<hr /> updateArea(data.id, {
<div className="py-3"> color: c,
<div> });
{tableThemes }}
.slice(0, Math.ceil(tableThemes.length / 2)) onClearColor={() => {
.map((c) => ( updateArea(data.id, {
<button color: defaultBlue,
key={c} });
style={{ backgroundColor: c }} setSaveState(State.SAVING);
className="p-3 rounded-full mx-1" }}
onClick={() => { />
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: data.id,
undo: { color: data.color },
redo: { color: c },
message: `Edit area color to ${c}`,
},
]);
setRedoStack([]);
updateArea(data.id, {
color: c,
});
}}
>
{data.color === c ? (
<IconCheckboxTick style={{ color: "white" }} />
) : (
<IconCheckboxTick style={{ color: c }} />
)}
</button>
))}
</div>
<div className="mt-3">
{tableThemes
.slice(Math.ceil(tableThemes.length / 2))
.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1"
onClick={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: data.id,
undo: { color: data.color },
redo: { color: c },
message: `Edit area color to ${c}`,
},
]);
setRedoStack([]);
updateArea(data.id, {
color: c,
});
}}
>
<IconCheckboxTick
style={{
color: data.color === c ? "white" : c,
}}
/>
</button>
))}
</div>
</div>
</div> </div>
} }
position="rightTop" position="rightTop"