Skip to content

Commit 00074ad

Browse files
KARM99KARM99
committed
Fix ColorPicker undo stack additions
1 parent b974a7d commit 00074ad

File tree

5 files changed

+181
-125
lines changed

5 files changed

+181
-125
lines changed

‎src/components/EditorCanvas/Area.jsx

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,32 @@ export default function Area({
217217

218218
function EditPopoverContent({ data }) {
219219
const [editField, setEditField] = useState({});
220+
const [pickedColor, setPickedColor] = useState(undefined);
220221
const { updateArea, deleteArea } = useAreas();
221222
const { setUndoStack, setRedoStack } = useUndoRedo();
222223
const { t } = useTranslation();
223224

225+
const handleColorPickerChange = () => {
226+
if (pickedColor !== undefined) {
227+
setUndoStack((prev) => [
228+
...prev,
229+
{
230+
action: Action.EDIT,
231+
element: ObjectType.AREA,
232+
aid: data.id,
233+
undo: { color: data.color },
234+
redo: { color: pickedColor },
235+
message: t("edit_area", {
236+
areaName: data.name,
237+
extra: "[color]",
238+
}),
239+
},
240+
]);
241+
setRedoStack([]);
242+
setPickedColor(undefined);
243+
}
244+
};
245+
224246
return (
225247
<div className="popover-theme">
226248
<div className="font-semibold mb-2 ms-1">{t("edit")}</div>
@@ -250,28 +272,19 @@ function EditPopoverContent({ data }) {
250272
setRedoStack([]);
251273
}}
252274
/>
253-
<ColorPicker
254-
onChange={({ hex: color }) => {
255-
setUndoStack((prev) => [
256-
...prev,
257-
{
258-
action: Action.EDIT,
259-
element: ObjectType.AREA,
260-
aid: data.id,
261-
undo: { color: data.color },
262-
redo: { color },
263-
message: t("edit_area", {
264-
areaName: data.name,
265-
extra: "[color]",
266-
}),
267-
},
268-
]);
269-
setRedoStack([]);
270-
updateArea(data.id, { color });
271-
}}
272-
usePopover={true}
273-
value={ColorPicker.colorStringToValue(data.color)}
274-
/>
275+
<div
276+
onPointerUp={handleColorPickerChange}
277+
onBlur={handleColorPickerChange}
278+
>
279+
<ColorPicker
280+
onChange={({ hex: color }) => {
281+
setPickedColor(color);
282+
updateArea(data.id, { color });
283+
}}
284+
usePopover={true}
285+
value={ColorPicker.colorStringToValue(data.color)}
286+
/>
287+
</div>
275288
</div>
276289
<div className="flex">
277290
<Button

‎src/components/EditorCanvas/Note.jsx

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { noteWidth, noteRadius, noteFold } from "../../data/constants";
2020
export default function Note({ data, onPointerDown }) {
2121
const [editField, setEditField] = useState({});
2222
const [hovered, setHovered] = useState(false);
23+
const [pickedColor, setPickedColor] = useState(undefined);
2324
const { layout } = useLayout();
2425
const { t } = useTranslation();
2526
const { setSaveState } = useSaveState();
@@ -89,6 +90,27 @@ export default function Note({ data, onPointerDown }) {
8990
);
9091
}, [selectedElement, data, bulkSelectedElements]);
9192

93+
const handleColorPickerChange = () => {
94+
if (pickedColor !== undefined) {
95+
setUndoStack((prev) => [
96+
...prev,
97+
{
98+
action: Action.EDIT,
99+
element: ObjectType.NOTE,
100+
nid: data.id,
101+
undo: { color: data.color },
102+
redo: { color: pickedColor },
103+
message: t("edit_note", {
104+
noteTitle: data.title,
105+
extra: "[color]",
106+
}),
107+
},
108+
]);
109+
setRedoStack([]);
110+
setPickedColor(undefined);
111+
}
112+
};
113+
92114
return (
93115
<g
94116
onPointerEnter={(e) => e.isPrimary && setHovered(true)}
@@ -224,33 +246,24 @@ export default function Note({ data, onPointerDown }) {
224246
setRedoStack([]);
225247
}}
226248
/>
227-
<ColorPicker
228-
onChange={({ hex: color }) => {
229-
setUndoStack((prev) => [
230-
...prev,
231-
{
232-
action: Action.EDIT,
233-
element: ObjectType.NOTE,
234-
nid: data.id,
235-
undo: { color: data.color },
236-
redo: { color },
237-
message: t("edit_note", {
238-
noteTitle: data.title,
239-
extra: "[color]",
240-
}),
241-
},
242-
]);
243-
setRedoStack([]);
244-
updateNote(data.id, { color });
245-
}}
246-
usePopover={true}
247-
value={ColorPicker.colorStringToValue(data.color)}
249+
<div
250+
onPointerUp={handleColorPickerChange}
251+
onBlur={handleColorPickerChange}
248252
>
249-
<div
250-
className="h-[32px] w-[32px] rounded-sm"
251-
style={{ backgroundColor: data.color }}
252-
/>
253-
</ColorPicker>
253+
<ColorPicker
254+
onChange={({ hex: color }) => {
255+
setPickedColor(color);
256+
updateNote(data.id, { color });
257+
}}
258+
usePopover={true}
259+
value={ColorPicker.colorStringToValue(data.color)}
260+
>
261+
<div
262+
className="h-[32px] w-[32px] rounded-sm"
263+
style={{ backgroundColor: data.color }}
264+
/>
265+
</ColorPicker>
266+
</div>
254267
</div>
255268
<div className="flex">
256269
<Button

‎src/components/EditorSidePanel/AreasTab/AreaDetails.jsx

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,28 @@ export default function AreaInfo({ data, i }) {
1010
const { deleteArea, updateArea } = useAreas();
1111
const { setUndoStack, setRedoStack } = useUndoRedo();
1212
const [editField, setEditField] = useState({});
13+
const [pickedColor, setPickedColor] = useState(undefined);
14+
15+
const handleColorPickerChange = () => {
16+
if (pickedColor !== undefined) {
17+
setUndoStack((prev) => [
18+
...prev,
19+
{
20+
action: Action.EDIT,
21+
element: ObjectType.AREA,
22+
aid: i,
23+
undo: { color: data.color },
24+
redo: { color: pickedColor },
25+
message: t("edit_area", {
26+
areaName: data.name,
27+
extra: "[color]",
28+
}),
29+
},
30+
]);
31+
setRedoStack([]);
32+
setPickedColor(undefined);
33+
}
34+
};
1335

1436
return (
1537
<div id={`scroll_area_${data.id}`} className="my-3 flex gap-2 items-center">
@@ -37,33 +59,21 @@ export default function AreaInfo({ data, i }) {
3759
setRedoStack([]);
3860
}}
3961
/>
40-
<ColorPicker
41-
onChange={({ hex: color }) => {
42-
setUndoStack((prev) => [
43-
...prev,
44-
{
45-
action: Action.EDIT,
46-
element: ObjectType.AREA,
47-
aid: i,
48-
undo: { color: data.color },
49-
redo: { color },
50-
message: t("edit_area", {
51-
areaName: data.name,
52-
extra: "[color]",
53-
}),
54-
},
55-
]);
56-
setRedoStack([]);
57-
updateArea(i, { color });
58-
}}
59-
usePopover={true}
60-
value={ColorPicker.colorStringToValue(data.color)}
61-
>
62-
<div
63-
className="h-[32px] w-[32px] rounded-sm shrink-0"
64-
style={{ backgroundColor: data.color }}
65-
/>
66-
</ColorPicker>
62+
<div onPointerUp={handleColorPickerChange} onBlur={handleColorPickerChange}>
63+
<ColorPicker
64+
onChange={({ hex: color }) => {
65+
setPickedColor(color);
66+
updateArea(i, { color });
67+
}}
68+
usePopover={true}
69+
value={ColorPicker.colorStringToValue(data.color)}
70+
>
71+
<div
72+
className="h-[32px] w-[32px] rounded-sm shrink-0"
73+
style={{ backgroundColor: data.color }}
74+
/>
75+
</ColorPicker>
76+
</div>
6777
<Button
6878
icon={<IconDeleteStroked />}
6979
type="danger"

‎src/components/EditorSidePanel/NotesTab/NoteInfo.jsx

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,30 @@ export default function NoteInfo({ data, nid }) {
1515
const { updateNote, deleteNote } = useNotes();
1616
const { setUndoStack, setRedoStack } = useUndoRedo();
1717
const [editField, setEditField] = useState({});
18+
const [pickedColor, setPickedColor] = useState(undefined);
1819
const { t } = useTranslation();
1920

21+
const handleColorPickerChange = () => {
22+
if (pickedColor !== undefined) {
23+
setUndoStack((prev) => [
24+
...prev,
25+
{
26+
action: Action.EDIT,
27+
element: ObjectType.NOTE,
28+
nid: nid,
29+
undo: { color: data.color },
30+
redo: { color: pickedColor },
31+
message: t("edit_note", {
32+
noteTitle: data.title,
33+
extra: "[color]",
34+
}),
35+
},
36+
]);
37+
setRedoStack([]);
38+
setPickedColor(undefined);
39+
}
40+
};
41+
2042
return (
2143
<Collapse.Panel
2244
header={
@@ -94,33 +116,21 @@ export default function NoteInfo({ data, nid }) {
94116
rows={3}
95117
/>
96118
<div className="ms-2">
97-
<ColorPicker
98-
onChange={({ hex: color }) => {
99-
setUndoStack((prev) => [
100-
...prev,
101-
{
102-
action: Action.EDIT,
103-
element: ObjectType.NOTE,
104-
nid: nid,
105-
undo: { color: data.color },
106-
redo: { color },
107-
message: t("edit_note", {
108-
noteTitle: data.title,
109-
extra: "[color]",
110-
}),
111-
},
112-
]);
113-
setRedoStack([]);
114-
updateNote(nid, { color });
115-
}}
116-
usePopover={true}
117-
value={ColorPicker.colorStringToValue(data.color)}
118-
>
119-
<div
120-
className="h-[32px] w-[32px] rounded-sm shrink-0 mb-2"
121-
style={{ backgroundColor: data.color }}
122-
/>
123-
</ColorPicker>
119+
<div onPointerUp={handleColorPickerChange} onBlur={handleColorPickerChange}>
120+
<ColorPicker
121+
onChange={({ hex: color }) => {
122+
setPickedColor(color);
123+
updateNote(nid, { color });
124+
}}
125+
usePopover={true}
126+
value={ColorPicker.colorStringToValue(data.color)}
127+
>
128+
<div
129+
className="h-[32px] w-[32px] rounded-sm shrink-0 mb-2"
130+
style={{ backgroundColor: data.color }}
131+
/>
132+
</ColorPicker>
133+
</div>
124134
<Button
125135
icon={<IconDeleteStroked />}
126136
type="danger"

‎src/components/EditorSidePanel/TablesTab/TableInfo.jsx

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,29 @@ export default function TableInfo({ data }) {
2323
const { setUndoStack, setRedoStack } = useUndoRedo();
2424
const { setSaveState } = useSaveState();
2525
const [editField, setEditField] = useState({});
26+
const [pickedColor, setPickedColor] = useState(undefined);
27+
28+
const handleColorPickerChange = () => {
29+
if (pickedColor !== undefined) {
30+
setUndoStack((prev) => [
31+
...prev,
32+
{
33+
action: Action.EDIT,
34+
element: ObjectType.TABLE,
35+
component: "self",
36+
tid: data.id,
37+
undo: { color: data.color },
38+
redo: { color: pickedColor },
39+
message: t("edit_table", {
40+
tableName: data.name,
41+
extra: "[color]",
42+
}),
43+
},
44+
]);
45+
setRedoStack([]);
46+
setPickedColor(undefined);
47+
}
48+
};
2649

2750
return (
2851
<div>
@@ -142,29 +165,16 @@ export default function TableInfo({ data }) {
142165
</Collapse>
143166
</Card>
144167
<div className="flex justify-between items-center gap-1 mb-2">
145-
<ColorPicker
146-
onChange={({ hex: color }) => {
147-
setUndoStack((prev) => [
148-
...prev,
149-
{
150-
action: Action.EDIT,
151-
element: ObjectType.TABLE,
152-
component: "self",
153-
tid: data.id,
154-
undo: { color: data.color },
155-
redo: { color },
156-
message: t("edit_table", {
157-
tableName: data.name,
158-
extra: "[color]",
159-
}),
160-
},
161-
]);
162-
setRedoStack([]);
163-
updateTable(data.id, { color });
164-
}}
165-
usePopover={true}
166-
value={ColorPicker.colorStringToValue(data.color)}
167-
/>
168+
<div onPointerUp={handleColorPickerChange} onBlur={handleColorPickerChange}>
169+
<ColorPicker
170+
onChange={({ hex: color }) => {
171+
setPickedColor(color);
172+
updateTable(data.id, { color });
173+
}}
174+
usePopover={true}
175+
value={ColorPicker.colorStringToValue(data.color)}
176+
/>
177+
</div>
168178
<div className="flex gap-1">
169179
<Button
170180
block

0 commit comments

Comments
 (0)