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

boo

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:06 +03:00
parent 21d01b1fe2
commit f04ed5df9a
3 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/area_overview.jsx
View File

@ -19,12 +19,18 @@ import {
IconCheckboxTick, IconCheckboxTick,
IconDeleteStroked, IconDeleteStroked,
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
import { defaultTableTheme, tableThemes } from "../data/data"; import {
import { AreaContext } from "../pages/editor"; defaultTableTheme,
tableThemes,
Action,
ObjectType,
} from "../data/data";
import { AreaContext, UndoRedoContext } from "../pages/editor";
export default function AreaOverview(props) { export default function AreaOverview(props) {
const { areas, setAreas, addArea, deleteArea } = useContext(AreaContext); const { areas, setAreas, addArea, deleteArea } = useContext(AreaContext);
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const [editField, setEditField] = useState({});
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const [filteredResult, setFilteredResult] = useState( const [filteredResult, setFilteredResult] = useState(
areas.map((t) => { areas.map((t) => {
@ -113,8 +119,23 @@ export default function AreaOverview(props) {
<Input <Input
value={a.name} value={a.name}
placeholder="Name" placeholder="Name"
onChange={(value, e) => updateArea(a.id, { name: value })} onChange={(value) => updateArea(a.id, { name: value })}
field="name" 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 },
},
]);
setRedoStack([]);
setEditField({});
}}
/> />
</Col> </Col>
<Col span={3}> <Col span={3}>
@ -143,7 +164,21 @@ export default function AreaOverview(props) {
key={c} key={c}
style={{ backgroundColor: c }} style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1" className="p-3 rounded-full mx-1"
onClick={() => updateArea(i, { color: c })} onClick={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: i,
undo: { color: a.color },
redo: { color: c },
},
]);
setRedoStack([]);
setEditField({});
updateArea(i, { color: c });
}}
> >
{a.color === c ? ( {a.color === c ? (
<IconCheckboxTick <IconCheckboxTick
@ -163,7 +198,21 @@ export default function AreaOverview(props) {
key={c} key={c}
style={{ backgroundColor: c }} style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1" className="p-3 rounded-full mx-1"
onClick={() => updateArea(i, { color: c })} onClick={() => {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.AREA,
aid: i,
undo: { color: a.color },
redo: { color: c },
},
]);
setRedoStack([]);
setEditField({});
updateArea(i, { color: c });
}}
> >
<IconCheckboxTick <IconCheckboxTick
style={{ style={{

17
src/components/canvas.jsx
View File

@ -265,16 +265,15 @@ export default function Canvas(props) {
{ {
action: Action.EDIT, action: Action.EDIT,
element: ObjectType.AREA, element: ObjectType.AREA,
data: { aid: areaResize.id,
undo: { undo: {
...areas[areaResize.id], ...areas[areaResize.id],
x: initCoords.x, x: initCoords.x,
y: initCoords.y, y: initCoords.y,
width: initCoords.width, width: initCoords.width,
height: initCoords.height, height: initCoords.height,
},
redo: areas[areaResize.id],
}, },
redo: areas[areaResize.id],
}, },
]); ]);
setRedoStack([]); setRedoStack([]);

8
src/components/control_panel.jsx
View File

@ -163,8 +163,8 @@ export default function ControlPanel(props) {
if (a.element === ObjectType.AREA) { if (a.element === ObjectType.AREA) {
setAreas((prev) => setAreas((prev) =>
prev.map((n) => { prev.map((n) => {
if (n.id === a.data.undo.id) { if (n.id === a.aid) {
return a.data.undo; return { ...n, ...a.undo };
} }
return n; return n;
}) })
@ -312,8 +312,8 @@ export default function ControlPanel(props) {
if (a.element === ObjectType.AREA) { if (a.element === ObjectType.AREA) {
setAreas((prev) => setAreas((prev) =>
prev.map((n) => { prev.map((n) => {
if (n.id === a.data.redo.id) { if (n.id === a.aid) {
return a.data.redo; return { ...n, ...a.redo };
} }
return n; return n;
}) })