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

Abstract TransformContext

Browse Source
This commit is contained in:
1ilit 2024-03-10 19:24:19 +02:00
parent dd4ec59e56
commit 23bc6278a2
5 changed files with 150 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Canvas.jsx
View File

@ -9,11 +9,11 @@ import {
TableContext, TableContext,
UndoRedoContext, UndoRedoContext,
SelectContext, SelectContext,
TransformContext,
} from "../pages/Editor"; } from "../pages/Editor";
import Note from "./Note"; import Note from "./Note";
import { Toast } from "@douyinfe/semi-ui"; import { Toast } from "@douyinfe/semi-ui";
import useSettings from "../hooks/useSettings"; import useSettings from "../hooks/useSettings";
import useTransform from "../hooks/useTransform";
export default function Canvas() { export default function Canvas() {
const { tables, updateTable, relationships, addRelationship } = const { tables, updateTable, relationships, addRelationship } =
@ -22,7 +22,7 @@ export default function Canvas() {
const { notes, updateNote } = useContext(NoteContext); const { notes, updateNote } = useContext(NoteContext);
const { settings } = useSettings(); const { settings } = useSettings();
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext); const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
const { transform, setTransform } = useContext(TransformContext); const { transform, setTransform } = useTransform();
const { selectedElement, setSelectedElement } = useContext(SelectContext); const { selectedElement, setSelectedElement } = useContext(SelectContext);
const [dragging, setDragging] = useState({ const [dragging, setDragging] = useState({
element: ObjectType.NONE, element: ObjectType.NONE,

4
src/components/ControlPanel.jsx
View File

@ -51,7 +51,6 @@ import {
import { import {
AreaContext, AreaContext,
NoteContext, NoteContext,
TransformContext,
SelectContext, SelectContext,
StateContext, StateContext,
TabContext, TabContext,
@ -73,6 +72,7 @@ import Todo from "./Todo";
import { Thumbnail } from "./Thumbnail"; import { Thumbnail } from "./Thumbnail";
import useLayout from "../hooks/useLayout"; import useLayout from "../hooks/useLayout";
import useSettings from "../hooks/useSettings"; import useSettings from "../hooks/useSettings";
import useTransform from "../hooks/useTransform";
export default function ControlPanel({ export default function ControlPanel({
diagramId, diagramId,
@ -147,7 +147,7 @@ export default function ControlPanel({
useContext(UndoRedoContext); useContext(UndoRedoContext);
const { selectedElement, setSelectedElement } = useContext(SelectContext); const { selectedElement, setSelectedElement } = useContext(SelectContext);
const { tab, setTab } = useContext(TabContext); const { tab, setTab } = useContext(TabContext);
const { transform, setTransform } = useContext(TransformContext); const { transform, setTransform } = useTransform();
const invertLayout = (component) => const invertLayout = (component) =>
setLayout((prev) => ({ ...prev, [component]: !prev[component] })); setLayout((prev) => ({ ...prev, [component]: !prev[component] }));

16
src/context/TransformContext.jsx Normal file
View File

@ -0,0 +1,16 @@
import { createContext, useState } from "react";
export const TransformContext = createContext(null);
export default function TransformContextProvider({ children }) {
const [transform, setTransform] = useState({
zoom: 1,
pan: { x: 0, y: 0 },
});
return (
<TransformContext.Provider value={{ transform, setTransform }}>
{children}
</TransformContext.Provider>
);
}

6
src/hooks/useTransform.js Normal file
View File

@ -0,0 +1,6 @@
import { useContext } from "react";
import { TransformContext } from "../context/TransformContext";
export default function useTransform() {
return useContext(TransformContext);
}

251
src/pages/Editor.jsx
View File

@ -16,6 +16,8 @@ import { exitFullscreen } from "../utils";
import useLayout from "../hooks/useLayout"; import useLayout from "../hooks/useLayout";
import LayoutContextProvider from "../context/LayoutContext"; import LayoutContextProvider from "../context/LayoutContext";
import useSettings from "../hooks/useSettings"; import useSettings from "../hooks/useSettings";
import TransformContextProvider from "../context/TransformContext";
import useTransform from "../hooks/useTransform";
export const StateContext = createContext(); export const StateContext = createContext();
export const TableContext = createContext(); export const TableContext = createContext();
@ -28,12 +30,14 @@ export const TaskContext = createContext();
export const MessageContext = createContext(); export const MessageContext = createContext();
export const BotMessageContext = createContext(); export const BotMessageContext = createContext();
export const TypeContext = createContext(); export const TypeContext = createContext();
export const TransformContext = createContext(); // export const TransformContext = createContext();
export default function Editor() { export default function Editor() {
return ( return (
<LayoutContextProvider> <LayoutContextProvider>
<WorkSpace /> <TransformContextProvider>
<WorkSpace />
</TransformContextProvider>
</LayoutContextProvider> </LayoutContextProvider>
); );
} }
@ -53,10 +57,7 @@ function WorkSpace() {
const [tab, setTab] = useState(Tab.tables); const [tab, setTab] = useState(Tab.tables);
const { layout, setLayout } = useLayout(); const { layout, setLayout } = useLayout();
const { settings, setSettings } = useSettings(); const { settings, setSettings } = useSettings();
const [transform, setTransform] = useState({ const { transform, setTransform } = useTransform();
zoom: 1,
pan: { x: 0, y: 0 },
});
const [tasks, setTasks] = useState([]); const [tasks, setTasks] = useState([]);
const [undoStack, setUndoStack] = useState([]); const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]); const [redoStack, setRedoStack] = useState([]);
@ -682,138 +683,134 @@ function WorkSpace() {
break; break;
} }
} }
}, [setSettings]); }, [setSettings, setTransform]);
return ( return (
<StateContext.Provider value={{ state, setState }}> <StateContext.Provider value={{ state, setState }}>
<TransformContext.Provider value={{ transform, setTransform }}> <TableContext.Provider
<TableContext.Provider value={{
value={{ tables,
tables, setTables,
setTables, addTable,
addTable, updateTable,
updateTable, updateField,
updateField, deleteTable,
deleteTable, relationships,
relationships, setRelationships,
setRelationships, addRelationship,
addRelationship, deleteRelationship,
deleteRelationship, }}
}} >
<AreaContext.Provider
value={{ areas, setAreas, updateArea, addArea, deleteArea }}
> >
<AreaContext.Provider <NoteContext.Provider
value={{ areas, setAreas, updateArea, addArea, deleteArea }} value={{ notes, setNotes, updateNote, addNote, deleteNote }}
> >
<NoteContext.Provider <TabContext.Provider value={{ tab, setTab }}>
value={{ notes, setNotes, updateNote, addNote, deleteNote }} <UndoRedoContext.Provider
> value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
<TabContext.Provider value={{ tab, setTab }}> >
<UndoRedoContext.Provider <SelectContext.Provider
value={{ undoStack, redoStack, setUndoStack, setRedoStack }} value={{ selectedElement, setSelectedElement }}
> >
<SelectContext.Provider <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
value={{ selectedElement, setSelectedElement }} <TypeContext.Provider
> value={{
<TaskContext.Provider types,
value={{ tasks, setTasks, updateTask }} setTypes,
addType,
updateType,
deleteType,
}}
> >
<TypeContext.Provider <div className="h-[100vh] flex flex-col overflow-hidden theme">
value={{ <ControlPanel
types, diagramId={id}
setTypes, setDiagramId={setId}
addType, title={title}
updateType, setTitle={setTitle}
deleteType, lastSaved={lastSaved}
}} setLastSaved={setLastSaved}
> />
<div className="h-[100vh] flex flex-col overflow-hidden theme"> <div
<ControlPanel className="flex h-full overflow-y-auto"
diagramId={id} onMouseUp={() => setResize(false)}
setDiagramId={setId} onMouseMove={dragHandler}
title={title} >
setTitle={setTitle} {layout.sidebar && (
lastSaved={lastSaved} <SidePanel
setLastSaved={setLastSaved} resize={resize}
/> setResize={setResize}
<div width={width}
className="flex h-full overflow-y-auto" />
onMouseUp={() => setResize(false)} )}
onMouseMove={dragHandler} <div className="relative w-full h-full overflow-hidden">
> <Canvas state={state} setState={setState} />
{layout.sidebar && ( {!(
<SidePanel layout.sidebar ||
resize={resize} layout.toolbar ||
setResize={setResize} layout.header
width={width} ) && (
/> <div className="fixed right-5 bottom-4 flex gap-2">
)} <div className="popover-theme flex rounded-lg items-center">
<div className="relative w-full h-full overflow-hidden"> <button
<Canvas state={state} setState={setState} /> className="px-3 py-2"
{!( onClick={() =>
layout.sidebar || setTransform((prev) => ({
layout.toolbar || ...prev,
layout.header zoom: prev.zoom / 1.2,
) && ( }))
<div className="fixed right-5 bottom-4 flex gap-2"> }
<div className="popover-theme flex rounded-lg items-center"> >
<button <i className="bi bi-dash-lg"></i>
className="px-3 py-2" </button>
onClick={() => <Divider align="center" layout="vertical" />
setTransform((prev) => ({ <div className="px-3 py-2">
...prev, {parseInt(transform.zoom * 100)}%
zoom: prev.zoom / 1.2,
}))
}
>
<i className="bi bi-dash-lg"></i>
</button>
<Divider align="center" layout="vertical" />
<div className="px-3 py-2">
{parseInt(transform.zoom * 100)}%
</div>
<Divider align="center" layout="vertical" />
<button
className="px-3 py-2"
onClick={() =>
setTransform((prev) => ({
...prev,
zoom: prev.zoom * 1.2,
}))
}
>
<i className="bi bi-plus-lg"></i>
</button>
</div> </div>
<Tooltip content="Exit"> <Divider align="center" layout="vertical" />
<button <button
className="px-3 py-2 rounded-lg popover-theme" className="px-3 py-2"
onClick={() => { onClick={() =>
setLayout((prev) => ({ setTransform((prev) => ({
...prev, ...prev,
sidebar: true, zoom: prev.zoom * 1.2,
toolbar: true, }))
header: true, }
})); >
exitFullscreen(); <i className="bi bi-plus-lg"></i>
}} </button>
>
<i className="bi bi-fullscreen-exit"></i>
</button>
</Tooltip>
</div> </div>
)} <Tooltip content="Exit">
</div> <button
className="px-3 py-2 rounded-lg popover-theme"
onClick={() => {
setLayout((prev) => ({
...prev,
sidebar: true,
toolbar: true,
header: true,
}));
exitFullscreen();
}}
>
<i className="bi bi-fullscreen-exit"></i>
</button>
</Tooltip>
</div>
)}
</div> </div>
</div> </div>
</TypeContext.Provider> </div>
</TaskContext.Provider> </TypeContext.Provider>
</SelectContext.Provider> </TaskContext.Provider>
</UndoRedoContext.Provider> </SelectContext.Provider>
</TabContext.Provider> </UndoRedoContext.Provider>
</NoteContext.Provider> </TabContext.Provider>
</AreaContext.Provider> </NoteContext.Provider>
</TableContext.Provider> </AreaContext.Provider>
</TransformContext.Provider> </TableContext.Provider>
</StateContext.Provider> </StateContext.Provider>
); );
} }