drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 18:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'github-page' into extention-main

Browse Source
This commit is contained in:
Jessie Chen 2024-10-12 02:06:41 +08:00 committed by GitHub
commit 7a264894bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 172 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -25,4 +25,5 @@ dist-ssr
.env
/dist
/docs
/docs

2
package.json
View File

@ -3,7 +3,7 @@
"private": true,
"version": "0.0.0",
"type": "module",
"homepage": "index.html#",
"homepage": "https://stella0320.github.io/drawdb-extention/#",
"scripts": {
"dev": "vite",
"build": "vite build",

105
src/components/EditorCanvas/Canvas.jsx
View File

@ -21,7 +21,7 @@ import {
useNotes,
useLayout,
} from "../../hooks";
import { useTranslation } from "react-i18next";
import { useTranslation, withSSR } from "react-i18next";
import { useEventListener } from "usehooks-ts";
import { areFieldsCompatible } from "../../utils/utils";
@ -80,17 +80,18 @@ export default function Canvas() {
pointerX: 0,
pointerY: 0,
});
const [noteResize, setNoteResize] = useState({ id: -1, dir: "none" });
/**
* @param {PointerEvent} e
* @param {*} id
* @param {ObjectType[keyof ObjectType]} type
*/
const handlePointerDownOnElement = (e, id, type) => {
if (selectedElement.open && !layout.sidebar) return;
if (!e.isPrimary) return;
if (type === ObjectType.TABLE) {
const table = tables.find((t) => t.id === id);
setGrabOffset({
@ -141,20 +142,21 @@ export default function Canvas() {
*/
const handlePointerMove = (e) => {
if (selectedElement.open && !layout.sidebar) return;
if (!e.isPrimary) return;
if (linking) {
setLinkingLine({
...linkingLine,
endX: pointer.spaces.diagram.x,
endY: pointer.spaces.diagram.y,
});
} else if (
panning.isPanning &&
dragging.element === ObjectType.NONE &&
areaResize.id === -1
areaResize.id === -1 && noteResize.id === -1
) {
// 滑鼠抓住桌布
if (!settings.panning) {
return;
}
@ -174,21 +176,73 @@ export default function Canvas() {
x: pointer.spaces.diagram.x + grabOffset.x,
y: pointer.spaces.diagram.y + grabOffset.y,
});
} else if (
dragging.element === ObjectType.AREA &&
dragging.id >= 0 &&
areaResize.id === -1
) {
// 滑鼠抓住Area物件
updateArea(dragging.id, {
x: pointer.spaces.diagram.x + grabOffset.x,
y: pointer.spaces.diagram.y + grabOffset.y,
});
} else if (dragging.element === ObjectType.NOTE && dragging.id >= 0) {
} else if (
dragging.element === ObjectType.NOTE &&
dragging.id >= 0 &&
noteResize.id === -1
) {
// 滑鼠抓住Note物件
updateNote(dragging.id, {
x: pointer.spaces.diagram.x + grabOffset.x,
y: pointer.spaces.diagram.y + grabOffset.y,
});
} else if (noteResize.id !== -1) {
// 滑鼠調整Note物件大小
if (noteResize.dir === "none") return;
let newDims = { ...initCoords };
delete newDims.pointerX;
delete newDims.pointerY;
setPanning((old) => ({ ...old, isPanning: false }));
switch (noteResize.dir) {
case "br":
newDims.width = pointer.spaces.diagram.x - initCoords.x;
newDims.height = pointer.spaces.diagram.y - initCoords.y;
break;
case "tl":
newDims.x = pointer.spaces.diagram.x;
newDims.y = pointer.spaces.diagram.y;
newDims.width =
initCoords.x + initCoords.width - pointer.spaces.diagram.x;
newDims.height =
initCoords.y + initCoords.height - pointer.spaces.diagram.y;
break;
case "tr":
newDims.y = pointer.spaces.diagram.y;
newDims.width = pointer.spaces.diagram.x - initCoords.x;
newDims.height =
initCoords.y + initCoords.height - pointer.spaces.diagram.y;
break;
case "bl":
newDims.x = pointer.spaces.diagram.x;
newDims.width =
initCoords.x + initCoords.width - pointer.spaces.diagram.x;
newDims.height = pointer.spaces.diagram.y - initCoords.y;
break;
}
// Note寬度最大500px，最想寬度50px
if (newDims.width > 500) {
newDims.width = 500;
} else if (newDims.width < 50) {
newDims.width = 50;
}
updateNote(noteResize.id, {... newDims });
} else if (areaResize.id !== -1) {
// 滑鼠調整Area物件大小
if (areaResize.dir === "none") return;
let newDims = { ...initCoords };
delete newDims.pointerX;
@ -221,7 +275,8 @@ export default function Canvas() {
newDims.height = pointer.spaces.diagram.y - initCoords.y;
break;
}
updateArea(areaResize.id, { ...newDims });
}
};
@ -283,6 +338,15 @@ export default function Canvas() {
);
};
const didNoteResize = (id) => {
return !(
notes[id].x === initCoords.x &&
notes[id].y === initCoords.y &&
notes[id].width === initCoords.width &&
notes[id].height === initCoords.height
);
};
const didPan = () =>
!(transform.pan.x === panning.x && transform.pan.y === panning.y);
@ -387,8 +451,31 @@ export default function Canvas() {
},
]);
setRedoStack([]);
} else if (noteResize.id !== -1 && didNoteResize(noteResize.id)) {
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.NOTE,
aid: noteResize.id,
undo: {
...notes[noteResize.id],
x: initCoords.x,
y: initCoords.y,
width: initCoords.width,
height: initCoords.height,
},
redo: notes[noteResize.id],
message: t("edit_note", {
areaName: notes[noteResize.id].name,
extra: "[resize]",
}),
},
]);
setRedoStack([]);
}
setAreaResize({ id: -1, dir: "none" });
setNoteResize({ id: -1, dir: "none" });
setInitCoords({
x: 0,
y: 0,
@ -581,6 +668,8 @@ export default function Canvas() {
onPointerDown={(e) =>
handlePointerDownOnElement(e, n.id, ObjectType.NOTE)
}
setResize={setNoteResize}
setInitCoords={setInitCoords}
/>
))}
</svg>

78
src/components/EditorCanvas/Note.jsx
View File

@ -13,27 +13,44 @@ import {
IconCheckboxTick,
} from "@douyinfe/semi-icons";
import {
useCanvas,
useLayout,
useUndoRedo,
useSelect,
useNotes,
useSaveState,
useSettings,
} from "../../hooks";
import { useTranslation } from "react-i18next";
export default function Note({ data, onPointerDown }) {
const w = 180;
export default function Note({data, onPointerDown, setResize, setInitCoords}) {
const r = 3;
const fold = 24;
const [editField, setEditField] = useState({});
const [hovered, setHovered] = useState(false);
const { settings } = useSettings();
const { layout } = useLayout();
const { t } = useTranslation();
const { setSaveState } = useSaveState();
const { updateNote, deleteNote } = useNotes();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { selectedElement, setSelectedElement } = useSelect();
const {
pointer: {
spaces: { diagram: pointer },
},
} = useCanvas();
const handleResize = (e, dir) => {
setResize({ id: data.id, dir: dir });
setInitCoords({
x: data.x,
y: data.y,
width: data.width,
height: data.height,
pointerX: pointer.x,
pointerY: pointer.y,
});
};
const handleChange = (e) => {
const textarea = document.getElementById(`note_${data.id}`);
textarea.style.height = "0";
@ -92,15 +109,16 @@ export default function Note({ data, onPointerDown }) {
}}
>
<path
d={`M${data.x + fold} ${data.y} L${data.x + w - r} ${
d={`M${data.x + fold} ${data.y} L${data.x + data.width - r} ${
data.y
} A${r} ${r} 0 0 1 ${data.x + w} ${data.y + r} L${data.x + w} ${
} A${r} ${r} 0 0 1 ${data.x + data.width} ${data.y + r} L${data.x + data.width} ${
data.y + data.height - r
} A${r} ${r} 0 0 1 ${data.x + w - r} ${data.y + data.height} L${
} A${r} ${r} 0 0 1 ${data.x + data.width - r} ${data.y + data.height} L${
data.x + r
} ${data.y + data.height} A${r} ${r} 0 0 1 ${data.x} ${
data.y + data.height - r
} L${data.x} ${data.y + fold}`}
// Hi
fill={data.color}
stroke={
hovered
@ -136,8 +154,8 @@ export default function Note({ data, onPointerDown }) {
<foreignObject
x={data.x}
y={data.y}
width={w}
height={data.height}
width={data.width > 0 ? data.width : 0}
height={data.height > 0 ? data.height : 0}
onPointerDown={onPointerDown}
>
<div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
@ -307,6 +325,50 @@ export default function Note({ data, onPointerDown }) {
/>
</div>
</foreignObject>
{hovered && (
<>
<circle
cx={data.x + 1}
cy={data.y + 1}
r={6}
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={2}
cursor="nwse-resize"
onPointerDown={(e) => e.isPrimary && handleResize(e, "tl")}
/>
<circle
cx={data.x + data.width -1}
cy={data.y + 1}
r={6}
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={2}
cursor="nesw-resize"
onPointerDown={(e) => e.isPrimary && handleResize(e, "tr")}
/>
<circle
cx={data.x + 1}
cy={data.y + data.height -1}
r={6}
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={2}
cursor="nesw-resize"
onPointerDown={(e) => e.isPrimary && handleResize(e, "bl")}
/>
<circle
cx={data.x + data.width -1}
cy={data.y + data.height -1}
r={6}
fill={settings.mode === "light" ? "white" : "rgb(28, 31, 35)"}
stroke="#5891db"
strokeWidth={2}
cursor="nwse-resize"
onPointerDown={(e) => e.isPrimary && handleResize(e, "br")}
/>
</>
)}
</g>
);
}

2
src/context/NotesContext.jsx
View File

@ -22,6 +22,7 @@ export default function NotesContextProvider({ children }) {
});
} else {
const height = 88;
const width = 180;
setNotes((prev) => [
...prev,
{
@ -32,6 +33,7 @@ export default function NotesContextProvider({ children }) {
content: "",
color: defaultNoteTheme,
height,
width
},
]);
}

11
src/manifest
View File

@ -1,11 +0,0 @@
{
"manifest_version": 3,
"name": "Drawdb.io Extension",
"version": "1.0",
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
},
"action": {
"default_popup": "index.html"
}
}