Skip to content

Commit c755826

Browse files
author
kishansinghifs1
committed
Resolved merge conflict in TableInfo.jsx
2 parents 47742fd + 550cc78 commit c755826

File tree

25 files changed

+504
-376
lines changed

25 files changed

+504
-376
lines changed

‎src/App.jsx

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import BugReport from "./pages/BugReport";
55
import Templates from "./pages/Templates";
66
import LandingPage from "./pages/LandingPage";
77
import SettingsContextProvider from "./context/SettingsContext";
8-
import { useSettings } from "./hooks";
98
import NotFound from "./pages/NotFound";
109

1110
export default function App() {
@@ -15,22 +14,8 @@ export default function App() {
1514
<RestoreScroll />
1615
<Routes>
1716
<Route path="/" element={<LandingPage />} />
18-
<Route
19-
path="/editor"
20-
element={
21-
<ThemedPage>
22-
<Editor />
23-
</ThemedPage>
24-
}
25-
/>
26-
<Route
27-
path="/bug-report"
28-
element={
29-
<ThemedPage>
30-
<BugReport />
31-
</ThemedPage>
32-
}
33-
/>
17+
<Route path="/editor" element={<Editor />} />
18+
<Route path="/bug-report" element={<BugReport />} />
3419
<Route path="/templates" element={<Templates />} />
3520
<Route path="*" element={<NotFound />} />
3621
</Routes>
@@ -39,29 +24,6 @@ export default function App() {
3924
);
4025
}
4126

42-
function ThemedPage({ children }) {
43-
const { setSettings } = useSettings();
44-
45-
useLayoutEffect(() => {
46-
const theme = localStorage.getItem("theme");
47-
if (theme === "dark") {
48-
setSettings((prev) => ({ ...prev, mode: "dark" }));
49-
const body = document.body;
50-
if (body.hasAttribute("theme-mode")) {
51-
body.setAttribute("theme-mode", "dark");
52-
}
53-
} else {
54-
setSettings((prev) => ({ ...prev, mode: "light" }));
55-
const body = document.body;
56-
if (body.hasAttribute("theme-mode")) {
57-
body.setAttribute("theme-mode", "light");
58-
}
59-
}
60-
}, [setSettings]);
61-
62-
return children;
63-
}
64-
6527
function RestoreScroll() {
6628
const location = useLocation();
6729
useLayoutEffect(() => {

‎src/components/EditorCanvas/Area.jsx

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useMemo, useRef, useState } from "react";
2-
import { Button, Popover, Input, ColorPicker } from "@douyinfe/semi-ui";
2+
import { Button, Popover, Input } from "@douyinfe/semi-ui";
3+
import ColorPicker from "../EditorSidePanel/ColorPicker";
34
import {
45
IconEdit,
56
IconDeleteStroked,
@@ -127,6 +128,7 @@ export default function Area({
127128
: "border-slate-400 opacity-100"
128129
}`}
129130
style={{ backgroundColor: `${data.color}66` }}
131+
onDoubleClick={edit}
130132
>
131133
<div className="flex justify-between gap-1 w-full">
132134
<div className="text-color select-none overflow-hidden text-ellipsis">
@@ -220,6 +222,42 @@ function EditPopoverContent({ data }) {
220222
const { updateArea, deleteArea } = useAreas();
221223
const { setUndoStack, setRedoStack } = useUndoRedo();
222224
const { t } = useTranslation();
225+
const initialColorRef = useRef(data.color);
226+
227+
const handleColorPick = (color) => {
228+
setUndoStack((prev) => {
229+
let undoColor = initialColorRef.current;
230+
const lastColorChange = prev.findLast(
231+
(e) =>
232+
e.element === ObjectType.AREA &&
233+
e.aid === data.id &&
234+
e.action === Action.EDIT &&
235+
e.redo.color,
236+
);
237+
if (lastColorChange) {
238+
undoColor = lastColorChange.redo.color;
239+
}
240+
241+
if (color === undoColor) return prev;
242+
243+
const newStack = [
244+
...prev,
245+
{
246+
action: Action.EDIT,
247+
element: ObjectType.AREA,
248+
aid: data.id,
249+
undo: { color: undoColor },
250+
redo: { color: color },
251+
message: t("edit_area", {
252+
areaName: data.name,
253+
extra: "[color]",
254+
}),
255+
},
256+
];
257+
return newStack;
258+
});
259+
setRedoStack([]);
260+
};
223261

224262
return (
225263
<div className="popover-theme">
@@ -251,26 +289,10 @@ function EditPopoverContent({ data }) {
251289
}}
252290
/>
253291
<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-
}}
272292
usePopover={true}
273-
value={ColorPicker.colorStringToValue(data.color)}
293+
value={data.color}
294+
onChange={(color) => updateArea(data.id, { color })}
295+
onColorPick={(color) => handleColorPick(color)}
274296
/>
275297
</div>
276298
<div className="flex">

‎src/components/EditorCanvas/Canvas.jsx

Lines changed: 48 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import {
55
Constraint,
66
darkBgTheme,
77
ObjectType,
8-
tableFieldHeight,
9-
tableHeaderHeight,
108
gridSize,
119
gridCircleRadius,
1210
} from "../../data/constants";
@@ -29,7 +27,7 @@ import {
2927
} from "../../hooks";
3028
import { useTranslation } from "react-i18next";
3129
import { useEventListener } from "usehooks-ts";
32-
import { areFieldsCompatible } from "../../utils/utils";
30+
import { areFieldsCompatible, getTableHeight } from "../../utils/utils";
3331
import { getRectFromEndpoints, isInsideRect } from "../../utils/rect";
3432
import { noteWidth, State } from "../../data/constants";
3533

@@ -117,8 +115,7 @@ export default function Canvas() {
117115
x: table.x,
118116
y: table.y,
119117
width: settings.tableWidth,
120-
height:
121-
table.fields.length * tableFieldHeight + tableHeaderHeight + 7,
118+
height: getTableHeight(table),
122119
},
123120
rect,
124121
)
@@ -230,14 +227,7 @@ export default function Canvas() {
230227
prevCoords = { prevX: note.x, prevY: note.y };
231228
}
232229

233-
if (locked) {
234-
setPanning({
235-
isPanning: true,
236-
panStart: transform.pan,
237-
cursorStart: pointer.spaces.screen,
238-
});
239-
pointer.setStyle("grabbing");
240-
} else {
230+
if (!locked) {
241231
setDragging((prev) => ({
242232
...prev,
243233
id,
@@ -274,6 +264,21 @@ export default function Canvas() {
274264

275265
if (!e.isPrimary) return;
276266

267+
if (panning.isPanning) {
268+
setTransform((prev) => ({
269+
...prev,
270+
pan: {
271+
x:
272+
panning.panStart.x +
273+
(panning.cursorStart.x - pointer.spaces.screen.x) / transform.zoom,
274+
y:
275+
panning.panStart.y +
276+
(panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
277+
},
278+
}));
279+
return;
280+
}
281+
277282
const isDragging =
278283
dragging.element !== ObjectType.NONE && dragging.id !== null;
279284

@@ -300,26 +305,38 @@ export default function Canvas() {
300305
} else if (
301306
dragging.element !== ObjectType.NONE &&
302307
dragging.id !== null &&
303-
bulkSelectedElements.length
308+
bulkSelectedElements.length &&
309+
bulkSelectedElements.some(
310+
(element) =>
311+
element.id === dragging.id && element.type === dragging.element,
312+
)
304313
) {
305314
for (const element of bulkSelectedElements) {
306315
if (element.type === ObjectType.TABLE) {
307-
const { x, y } = tables.find((e) => e.id === element.id);
316+
const table = tables.find((e) => e.id === element.id);
317+
if (table.locked) continue;
318+
const { x, y } = table;
308319
updateTable(element.id, {
309320
x: x + deltaX,
310321
y: y + deltaY,
311322
});
312323
}
313324
if (element.type === ObjectType.AREA) {
325+
const area = areas[element.id];
326+
if (area.locked) continue;
327+
const { x, y } = area;
314328
updateArea(element.id, {
315-
x: areas[element.id].x + deltaX,
316-
y: areas[element.id].y + deltaY,
329+
x: x + deltaX,
330+
y: y + deltaY,
317331
});
318332
}
319333
if (element.type === ObjectType.NOTE) {
334+
const note = notes[element.id];
335+
if (note.locked) continue;
336+
const { x, y } = note;
320337
updateNote(element.id, {
321-
x: notes[element.id].x + deltaX,
322-
y: notes[element.id].y + deltaY,
338+
x: x + deltaX,
339+
y: y + deltaY,
323340
});
324341
}
325342
}
@@ -329,25 +346,6 @@ export default function Canvas() {
329346
prevX: finalX,
330347
prevY: finalY,
331348
}));
332-
} else if (
333-
panning.isPanning &&
334-
dragging.element === ObjectType.NONE &&
335-
areaResize.id === -1
336-
) {
337-
if (!settings.panning) {
338-
return;
339-
}
340-
setTransform((prev) => ({
341-
...prev,
342-
pan: {
343-
x:
344-
panning.panStart.x +
345-
(panning.cursorStart.x - pointer.spaces.screen.x) / transform.zoom,
346-
y:
347-
panning.panStart.y +
348-
(panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
349-
},
350-
}));
351349
} else if (dragging.element === ObjectType.TABLE && dragging.id !== null) {
352350
const table = tables.find((t) => t.id === dragging.id);
353351
if (table.locked) return;
@@ -430,7 +428,10 @@ export default function Canvas() {
430428
)
431429
return;
432430

433-
if (!settings.panning) {
431+
const isMouseLeftButton = e.button === 0;
432+
const isMouseMiddleButton = e.button === 1;
433+
434+
if (isMouseLeftButton) {
434435
setBulkSelectRectPts({
435436
x1: pointer.spaces.diagram.x,
436437
y1: pointer.spaces.diagram.y,
@@ -439,7 +440,7 @@ export default function Canvas() {
439440
show: true,
440441
});
441442
pointer.setStyle("crosshair");
442-
} else {
443+
} else if (isMouseMiddleButton) {
443444
setPanning({
444445
isPanning: true,
445446
panStart: transform.pan,
@@ -488,6 +489,8 @@ export default function Canvas() {
488489

489490
if (!e.isPrimary) return;
490491

492+
let bulkMoved = false;
493+
491494
if (coordsDidUpdate({ id: dragging.id, type: dragging.element })) {
492495
if (bulkSelectedElements.length) {
493496
setUndoStack((prev) => [
@@ -505,12 +508,7 @@ export default function Canvas() {
505508
})),
506509
},
507510
]);
508-
setSelectedElement((prev) => ({
509-
...prev,
510-
element: ObjectType.NONE,
511-
id: -1,
512-
open: false,
513-
}));
511+
bulkMoved = true;
514512
} else {
515513
const element = getElement({
516514
id: dragging.id,
@@ -553,18 +551,13 @@ export default function Canvas() {
553551
y2: pointer.spaces.diagram.y,
554552
show: false,
555553
}));
556-
collectSelectedElements();
554+
if (!bulkMoved) {
555+
collectSelectedElements();
556+
}
557557
}
558558

559559
if (panning.isPanning && didPan()) {
560560
setSaveState(State.SAVING);
561-
setSelectedElement((prev) => ({
562-
...prev,
563-
element: ObjectType.NONE,
564-
id: -1,
565-
open: false,
566-
}));
567-
setBulkSelectedElements([]);
568561
}
569562
setPanning((old) => ({ ...old, isPanning: false }));
570563
pointer.setStyle("default");
@@ -708,15 +701,13 @@ export default function Canvas() {
708701
{ passive: false },
709702
);
710703

711-
const theme = localStorage.getItem("theme");
712-
713704
return (
714705
<div className="grow h-full touch-none" id="canvas">
715706
<div
716707
className="w-full h-full"
717708
style={{
718709
cursor: pointer.style,
719-
backgroundColor: theme === "dark" ? darkBgTheme : "white",
710+
backgroundColor: settings.mode === "dark" ? darkBgTheme : "white",
720711
}}
721712
>
722713
<svg

0 commit comments

Comments
 (0)