Separate zoom and pan from settings
This commit is contained in:
1ilit
parent
610e2fa5c5
commit
f3eb6d7c04
@ -10,6 +10,7 @@ import {
|
||||
TableContext,
|
||||
UndoRedoContext,
|
||||
SelectContext,
|
||||
TransformContext,
|
||||
} from "../pages/Editor";
|
||||
import Note from "./Note";
|
||||
import { Toast } from "@douyinfe/semi-ui";
|
||||
@ -19,8 +20,9 @@ export default function Canvas() {
|
||||
useContext(TableContext);
|
||||
const { areas, updateArea } = useContext(AreaContext);
|
||||
const { notes, updateNote } = useContext(NoteContext);
|
||||
const { settings, setSettings } = useContext(SettingsContext);
|
||||
const { settings } = useContext(SettingsContext);
|
||||
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
||||
const { transform, setTransform } = useContext(TransformContext);
|
||||
const { selectedElement, setSelectedElement } = useContext(SelectContext);
|
||||
const [dragging, setDragging] = useState({
|
||||
element: ObjectType.NONE,
|
||||
@ -69,8 +71,8 @@ export default function Canvas() {
|
||||
if (type === ObjectType.TABLE) {
|
||||
const table = tables.find((t) => t.id === id);
|
||||
setOffset({
|
||||
x: clientX / settings.zoom - table.x,
|
||||
y: clientY / settings.zoom - table.y,
|
||||
x: clientX / transform.zoom - table.x,
|
||||
y: clientY / transform.zoom - table.y,
|
||||
});
|
||||
setDragging({
|
||||
element: ObjectType.TABLE,
|
||||
@ -81,8 +83,8 @@ export default function Canvas() {
|
||||
} else if (type === ObjectType.AREA) {
|
||||
const area = areas.find((t) => t.id === id);
|
||||
setOffset({
|
||||
x: clientX / settings.zoom - area.x,
|
||||
y: clientY / settings.zoom - area.y,
|
||||
x: clientX / transform.zoom - area.x,
|
||||
y: clientY / transform.zoom - area.y,
|
||||
});
|
||||
setDragging({
|
||||
element: ObjectType.AREA,
|
||||
@ -93,8 +95,8 @@ export default function Canvas() {
|
||||
} else if (type === ObjectType.NOTE) {
|
||||
const note = notes.find((t) => t.id === id);
|
||||
setOffset({
|
||||
x: clientX / settings.zoom - note.x,
|
||||
y: clientY / settings.zoom - note.y,
|
||||
x: clientX / transform.zoom - note.x,
|
||||
y: clientY / transform.zoom - note.y,
|
||||
});
|
||||
setDragging({
|
||||
element: ObjectType.NOTE,
|
||||
@ -119,8 +121,8 @@ export default function Canvas() {
|
||||
|
||||
setLine({
|
||||
...line,
|
||||
endX: (e.clientX - offsetX - settings.pan?.x) / settings.zoom,
|
||||
endY: (e.clientY - offsetY - settings.pan?.y) / settings.zoom,
|
||||
endX: (e.clientX - offsetX - transform.pan?.x) / transform.zoom,
|
||||
endY: (e.clientY - offsetY - transform.pan?.y) / transform.zoom,
|
||||
});
|
||||
} else if (
|
||||
panning.state &&
|
||||
@ -132,26 +134,26 @@ export default function Canvas() {
|
||||
}
|
||||
const dx = e.clientX - panOffset.x;
|
||||
const dy = e.clientY - panOffset.y;
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
pan: { x: prev.pan?.x + dx, y: prev.pan?.y + dy },
|
||||
}));
|
||||
setPanOffset({ x: e.clientX, y: e.clientY });
|
||||
} else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
|
||||
const dx = e.clientX / settings.zoom - offset.x;
|
||||
const dy = e.clientY / settings.zoom - offset.y;
|
||||
const dx = e.clientX / transform.zoom - offset.x;
|
||||
const dy = e.clientY / transform.zoom - offset.y;
|
||||
updateTable(dragging.id, { x: dx, y: dy }, true);
|
||||
} else if (
|
||||
dragging.element === ObjectType.AREA &&
|
||||
dragging.id >= 0 &&
|
||||
areaResize.id === -1
|
||||
) {
|
||||
const dx = e.clientX / settings.zoom - offset.x;
|
||||
const dy = e.clientY / settings.zoom - offset.y;
|
||||
const dx = e.clientX / transform.zoom - offset.x;
|
||||
const dy = e.clientY / transform.zoom - offset.y;
|
||||
updateArea(dragging.id, { x: dx, y: dy });
|
||||
} else if (dragging.element === ObjectType.NOTE && dragging.id >= 0) {
|
||||
const dx = e.clientX / settings.zoom - offset.x;
|
||||
const dy = e.clientY / settings.zoom - offset.y;
|
||||
const dx = e.clientX / transform.zoom - offset.x;
|
||||
const dy = e.clientY / transform.zoom - offset.y;
|
||||
updateNote(dragging.id, { x: dx, y: dy });
|
||||
} else if (areaResize.id !== -1) {
|
||||
if (areaResize.dir === "none") return;
|
||||
@ -160,8 +162,8 @@ export default function Canvas() {
|
||||
let newY = initCoords.y;
|
||||
let newWidth = initCoords.width;
|
||||
let newHeight = initCoords.height;
|
||||
const mouseX = e.clientX / settings.zoom;
|
||||
const mouseY = e.clientY / settings.zoom;
|
||||
const mouseX = e.clientX / transform.zoom;
|
||||
const mouseY = e.clientY / transform.zoom;
|
||||
setPanning({ state: false, x: 0, y: 0 });
|
||||
if (areaResize.dir === "br") {
|
||||
newWidth = initCoords.width + (mouseX - initCoords.mouseX);
|
||||
@ -191,7 +193,7 @@ export default function Canvas() {
|
||||
};
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
setPanning({ state: true, ...settings.pan });
|
||||
setPanning({ state: true, ...transform.pan });
|
||||
setPanOffset({ x: e.clientX, y: e.clientY });
|
||||
setCursor("grabbing");
|
||||
};
|
||||
@ -228,7 +230,7 @@ export default function Canvas() {
|
||||
};
|
||||
|
||||
const didPan = () =>
|
||||
!(settings.pan?.x === panning.x && settings.pan?.y === panning.y);
|
||||
!(transform.pan?.x === panning.x && transform.pan?.y === panning.y);
|
||||
|
||||
const getMoveInfo = () => {
|
||||
switch (dragging.element) {
|
||||
@ -280,8 +282,8 @@ export default function Canvas() {
|
||||
{
|
||||
action: Action.PAN,
|
||||
undo: { x: panning.x, y: panning.y },
|
||||
redo: settings.pan,
|
||||
message: `Move diagram to (${settings.pan?.x}, ${settings.pan?.y})`,
|
||||
redo: transform.pan,
|
||||
message: `Move diagram to (${transform.pan?.x}, ${transform.pan?.y})`,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
@ -359,7 +361,7 @@ export default function Canvas() {
|
||||
|
||||
const handleMouseWheel = (e) => {
|
||||
e.preventDefault();
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
|
||||
}));
|
||||
@ -422,7 +424,7 @@ export default function Canvas() {
|
||||
)}
|
||||
<g
|
||||
style={{
|
||||
transform: `translate(${settings.pan?.x}px, ${settings.pan?.y}px) scale(${settings.zoom})`,
|
||||
transform: `translate(${transform.pan?.x}px, ${transform.pan?.y}px) scale(${transform.zoom})`,
|
||||
transformOrigin: "top left",
|
||||
}}
|
||||
id="diagram"
|
||||
@ -437,7 +439,7 @@ export default function Canvas() {
|
||||
setResize={setAreaResize}
|
||||
initCoords={initCoords}
|
||||
setInitCoords={setInitCoords}
|
||||
zoom={settings.zoom}
|
||||
zoom={transform.zoom}
|
||||
></Area>
|
||||
))}
|
||||
{relationships.map((e, i) => (
|
||||
|
||||
@ -51,6 +51,7 @@ import {
|
||||
import {
|
||||
AreaContext,
|
||||
NoteContext,
|
||||
TransformContext,
|
||||
SelectContext,
|
||||
SettingsContext,
|
||||
StateContext,
|
||||
@ -146,6 +147,7 @@ export default function ControlPanel({
|
||||
useContext(UndoRedoContext);
|
||||
const { selectedElement, setSelectedElement } = useContext(SelectContext);
|
||||
const { tab, setTab } = useContext(TabContext);
|
||||
const { transform, setTransform } = useContext(TransformContext);
|
||||
|
||||
const invertLayout = (component) =>
|
||||
setLayout((prev) => ({ ...prev, [component]: !prev[component] }));
|
||||
@ -334,7 +336,7 @@ export default function ControlPanel({
|
||||
}
|
||||
setRedoStack((prev) => [...prev, a]);
|
||||
} else if (a.action === Action.PAN) {
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
pan: a.undo,
|
||||
}));
|
||||
@ -515,7 +517,7 @@ export default function ControlPanel({
|
||||
}
|
||||
setUndoStack((prev) => [...prev, a]);
|
||||
} else if (a.action === Action.PAN) {
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
pan: a.redo,
|
||||
}));
|
||||
@ -527,9 +529,9 @@ export default function ControlPanel({
|
||||
const viewGrid = () =>
|
||||
setSettings((prev) => ({ ...prev, showGrid: !prev.showGrid }));
|
||||
const zoomIn = () =>
|
||||
setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }));
|
||||
setTransform((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }));
|
||||
const zoomOut = () =>
|
||||
setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }));
|
||||
setTransform((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }));
|
||||
const viewStrictMode = () => {
|
||||
setSettings((prev) => ({ ...prev, strictMode: !prev.strictMode }));
|
||||
Toast.success(`Stict mode is ${settings.strictMode ? "on" : "off"}.`);
|
||||
@ -557,7 +559,7 @@ export default function ControlPanel({
|
||||
});
|
||||
};
|
||||
const resetView = () =>
|
||||
setSettings((prev) => ({ ...prev, zoom: 1, pan: { x: 0, y: 0 } }));
|
||||
setTransform((prev) => ({ ...prev, zoom: 1, pan: { x: 0, y: 0 } }));
|
||||
const fitWindow = () => {
|
||||
const diagram = document.getElementById("diagram").getBoundingClientRect();
|
||||
const canvas = document.getElementById("canvas").getBoundingClientRect();
|
||||
@ -572,7 +574,7 @@ export default function ControlPanel({
|
||||
const translateX = canvas.left;
|
||||
const translateY = canvas.top;
|
||||
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
zoom: scale - 0.01,
|
||||
pan: { x: translateX, y: translateY },
|
||||
@ -756,6 +758,10 @@ export default function ControlPanel({
|
||||
setRelationships(diagram.references);
|
||||
setAreas(diagram.areas);
|
||||
setNotes(diagram.notes);
|
||||
setTransform({
|
||||
pan: diagram.pan,
|
||||
zoom: diagram.zoom,
|
||||
});
|
||||
setUndoStack([]);
|
||||
setRedoStack([]);
|
||||
window.name = `d ${diagram.id}`;
|
||||
@ -1609,7 +1615,7 @@ export default function ControlPanel({
|
||||
}
|
||||
case MODAL.IMPORT:
|
||||
if (error.type !== STATUS.ERROR) {
|
||||
setSettings((prev) => ({ ...prev, pan: { x: 0, y: 0 } }));
|
||||
setTransform((prev) => ({ ...prev, pan: { x: 0, y: 0 } }));
|
||||
overwriteDiagram();
|
||||
setData(null);
|
||||
setVisible(MODAL.NONE);
|
||||
@ -2125,7 +2131,7 @@ export default function ControlPanel({
|
||||
<Dropdown.Item
|
||||
key={i}
|
||||
onClick={() => {
|
||||
setSettings((prev) => ({ ...prev, zoom: e }));
|
||||
setTransform((prev) => ({ ...prev, zoom: e }));
|
||||
}}
|
||||
>
|
||||
{Math.floor(e * 100)}%
|
||||
@ -2139,7 +2145,7 @@ export default function ControlPanel({
|
||||
placeholder="Zoom"
|
||||
suffix={<div className="p-1">%</div>}
|
||||
onChange={(v) =>
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
zoom: parseFloat(v) * 0.01,
|
||||
}))
|
||||
@ -2151,7 +2157,9 @@ export default function ControlPanel({
|
||||
trigger="click"
|
||||
>
|
||||
<div className="py-1 px-2 hover-2 rounded flex items-center justify-center">
|
||||
<div className="w-[40px]">{Math.floor(settings.zoom * 100)}%</div>
|
||||
<div className="w-[40px]">
|
||||
{Math.floor(transform.zoom * 100)}%
|
||||
</div>
|
||||
<div>
|
||||
<IconCaretdown />
|
||||
</div>
|
||||
@ -2161,7 +2169,7 @@ export default function ControlPanel({
|
||||
<button
|
||||
className="py-1 px-2 hover-2 rounded text-lg"
|
||||
onClick={() =>
|
||||
setSettings((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
|
||||
setTransform((prev) => ({ ...prev, zoom: prev.zoom * 1.2 }))
|
||||
}
|
||||
>
|
||||
<i className="fa-solid fa-magnifying-glass-plus"></i>
|
||||
@ -2171,7 +2179,7 @@ export default function ControlPanel({
|
||||
<button
|
||||
className="py-1 px-2 hover-2 rounded text-lg"
|
||||
onClick={() =>
|
||||
setSettings((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
|
||||
setTransform((prev) => ({ ...prev, zoom: prev.zoom / 1.2 }))
|
||||
}
|
||||
>
|
||||
<i className="fa-solid fa-magnifying-glass-minus"></i>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { createContext, useState } from "react";
|
||||
|
||||
export const LayoutContext = createContext();
|
||||
export const LayoutContext = createContext(null);
|
||||
|
||||
export default function LayoutContextProvider({ children }) {
|
||||
const [layout, setLayout] = useState({
|
||||
|
||||
@ -28,6 +28,7 @@ export const TaskContext = createContext();
|
||||
export const MessageContext = createContext();
|
||||
export const BotMessageContext = createContext();
|
||||
export const TypeContext = createContext();
|
||||
export const TransformContext = createContext();
|
||||
|
||||
export default function Editor() {
|
||||
return (
|
||||
@ -54,14 +55,16 @@ function WorkSpace() {
|
||||
const [settings, setSettings] = useState({
|
||||
strictMode: false,
|
||||
showFieldSummary: true,
|
||||
zoom: 1,
|
||||
pan: { x: 0, y: 0 },
|
||||
showGrid: true,
|
||||
mode: "light",
|
||||
autosave: true,
|
||||
panning: true,
|
||||
showCardinality: true,
|
||||
});
|
||||
const [transform, setTransform] = useState({
|
||||
zoom: 1,
|
||||
pan: { x: 0, y: 0 },
|
||||
});
|
||||
const [tasks, setTasks] = useState([]);
|
||||
const [undoStack, setUndoStack] = useState([]);
|
||||
const [redoStack, setRedoStack] = useState([]);
|
||||
@ -485,7 +488,7 @@ function WorkSpace() {
|
||||
types?.length,
|
||||
relationships?.length,
|
||||
tasks?.length,
|
||||
settings.zoom,
|
||||
transform.zoom,
|
||||
title,
|
||||
]);
|
||||
|
||||
@ -509,8 +512,8 @@ function WorkSpace() {
|
||||
notes: notes,
|
||||
areas: areas,
|
||||
todos: tasks,
|
||||
pan: settings.pan,
|
||||
zoom: settings.zoom,
|
||||
pan: transform.pan,
|
||||
zoom: transform.zoom,
|
||||
})
|
||||
.then((id) => {
|
||||
setId(id);
|
||||
@ -529,8 +532,8 @@ function WorkSpace() {
|
||||
notes: notes,
|
||||
areas: areas,
|
||||
todos: tasks,
|
||||
pan: settings.pan,
|
||||
zoom: settings.zoom,
|
||||
pan: transform.pan,
|
||||
zoom: transform.zoom,
|
||||
})
|
||||
.then(() => {
|
||||
setState(State.SAVED);
|
||||
@ -547,8 +550,8 @@ function WorkSpace() {
|
||||
notes: notes,
|
||||
subjectAreas: areas,
|
||||
todos: tasks,
|
||||
pan: settings.pan,
|
||||
zoom: settings.zoom,
|
||||
pan: transform.pan,
|
||||
zoom: transform.zoom,
|
||||
})
|
||||
.then(() => {
|
||||
setState(State.SAVED);
|
||||
@ -569,8 +572,8 @@ function WorkSpace() {
|
||||
id,
|
||||
state,
|
||||
tasks,
|
||||
settings.zoom,
|
||||
settings.pan,
|
||||
transform.zoom,
|
||||
transform.pan,
|
||||
]
|
||||
);
|
||||
useEffect(() => {
|
||||
@ -597,7 +600,7 @@ function WorkSpace() {
|
||||
setAreas(d.areas);
|
||||
setTypes(d.types);
|
||||
setTasks(d.todos);
|
||||
setSettings((prev) => ({ ...prev, pan: d.pan, zoom: d.zoom }));
|
||||
setTransform({ pan: d.pan, zoom: d.zoom });
|
||||
window.name = `d ${d.id}`;
|
||||
} else {
|
||||
window.name = "";
|
||||
@ -621,11 +624,10 @@ function WorkSpace() {
|
||||
setAreas(diagram.areas);
|
||||
setNotes(diagram.notes);
|
||||
setTasks(diagram.todos);
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
setTransform({
|
||||
pan: diagram.pan,
|
||||
zoom: diagram.zoom,
|
||||
}));
|
||||
});
|
||||
setUndoStack([]);
|
||||
setRedoStack([]);
|
||||
window.name = `d ${diagram.id}`;
|
||||
@ -651,11 +653,10 @@ function WorkSpace() {
|
||||
setAreas(diagram.subjectAreas);
|
||||
setTasks(diagram.tasks);
|
||||
setNotes(diagram.notes);
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
pan: { x: 0, y: 0 },
|
||||
setTransform({
|
||||
zoom: 1,
|
||||
}));
|
||||
pan: { x: 0, y: 0 },
|
||||
});
|
||||
setUndoStack([]);
|
||||
setRedoStack([]);
|
||||
}
|
||||
@ -708,6 +709,7 @@ function WorkSpace() {
|
||||
|
||||
return (
|
||||
<StateContext.Provider value={{ state, setState }}>
|
||||
<TransformContext.Provider value={{ transform, setTransform }}>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
tables,
|
||||
@ -781,7 +783,7 @@ function WorkSpace() {
|
||||
<button
|
||||
className="px-3 py-2"
|
||||
onClick={() =>
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
zoom: prev.zoom / 1.2,
|
||||
}))
|
||||
@ -789,15 +791,21 @@ function WorkSpace() {
|
||||
>
|
||||
<i className="bi bi-dash-lg"></i>
|
||||
</button>
|
||||
<Divider align="center" layout="vertical" />
|
||||
<Divider
|
||||
align="center"
|
||||
layout="vertical"
|
||||
/>
|
||||
<div className="px-3 py-2">
|
||||
{parseInt(settings.zoom * 100)}%
|
||||
{parseInt(transform.zoom * 100)}%
|
||||
</div>
|
||||
<Divider align="center" layout="vertical" />
|
||||
<Divider
|
||||
align="center"
|
||||
layout="vertical"
|
||||
/>
|
||||
<button
|
||||
className="px-3 py-2"
|
||||
onClick={() =>
|
||||
setSettings((prev) => ({
|
||||
setTransform((prev) => ({
|
||||
...prev,
|
||||
zoom: prev.zoom * 1.2,
|
||||
}))
|
||||
@ -836,6 +844,7 @@ function WorkSpace() {
|
||||
</NoteContext.Provider>
|
||||
</AreaContext.Provider>
|
||||
</TableContext.Provider>
|
||||
</TransformContext.Provider>
|
||||
</StateContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user