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

17
src/components/canvas.jsx
View File

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

8
src/components/control_panel.jsx
View File

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