mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-05-24 10:29:11 +00:00
375 lines
13 KiB
JavaScript
375 lines
13 KiB
JavaScript
import { useState } from "react";
|
|
import {
|
|
Action,
|
|
ObjectType,
|
|
Tab,
|
|
State,
|
|
noteThemes,
|
|
} from "../../data/constants";
|
|
import { Input, Button, Popover } from "@douyinfe/semi-ui";
|
|
import {
|
|
IconEdit,
|
|
IconDeleteStroked,
|
|
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, 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";
|
|
textarea.style.height = textarea.scrollHeight + "px";
|
|
const newHeight = textarea.scrollHeight + 42;
|
|
updateNote(data.id, { content: e.target.value, height: newHeight });
|
|
};
|
|
|
|
const handleBlur = (e) => {
|
|
if (e.target.value === editField.content) return;
|
|
const textarea = document.getElementById(`note_${data.id}`);
|
|
textarea.style.height = "0";
|
|
textarea.style.height = textarea.scrollHeight + "px";
|
|
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.NOTE,
|
|
nid: data.id,
|
|
undo: editField,
|
|
redo: { content: e.target.value, height: newHeight },
|
|
message: t("edit_note", {
|
|
noteTitle: e.target.value,
|
|
extra: "[content]",
|
|
}),
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
};
|
|
|
|
const edit = () => {
|
|
setSelectedElement((prev) => ({
|
|
...prev,
|
|
...(layout.sidebar && { currentTab: Tab.NOTES }),
|
|
...(!layout.sidebar && { element: ObjectType.NOTE }),
|
|
id: data.id,
|
|
open: true,
|
|
}));
|
|
|
|
if (layout.sidebar && selectedElement.currentTab === Tab.NOTES) {
|
|
document
|
|
.getElementById(`scroll_note_${data.id}`)
|
|
.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<g
|
|
onPointerEnter={(e) => e.isPrimary && setHovered(true)}
|
|
onPointerLeave={(e) => e.isPrimary && setHovered(false)}
|
|
onPointerDown={(e) => {
|
|
// Required for onPointerLeave to trigger when a touch pointer leaves
|
|
// https://stackoverflow.com/a/70976017/1137077
|
|
e.target.releasePointerCapture(e.pointerId);
|
|
}}
|
|
>
|
|
<path
|
|
d={`M${data.x + fold} ${data.y} L${data.x + data.width - r} ${
|
|
data.y
|
|
} 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 + 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
|
|
? "rgb(59 130 246)"
|
|
: selectedElement.element === ObjectType.NOTE &&
|
|
selectedElement.id === data.id
|
|
? "rgb(59 130 246)"
|
|
: "rgb(168 162 158)"
|
|
}
|
|
strokeDasharray={hovered ? 4 : 0}
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.2"
|
|
/>
|
|
<path
|
|
d={`M${data.x} ${data.y + fold} L${data.x + fold - r} ${
|
|
data.y + fold
|
|
} A${r} ${r} 0 0 0 ${data.x + fold} ${data.y + fold - r} L${
|
|
data.x + fold
|
|
} ${data.y} L${data.x} ${data.y + fold} Z`}
|
|
fill={data.color}
|
|
stroke={
|
|
hovered
|
|
? "rgb(59 130 246)"
|
|
: selectedElement.element === ObjectType.NOTE &&
|
|
selectedElement.id === data.id
|
|
? "rgb(59 130 246)"
|
|
: "rgb(168 162 158)"
|
|
}
|
|
strokeDasharray={hovered ? 4 : 0}
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.2"
|
|
/>
|
|
<foreignObject
|
|
x={data.x}
|
|
y={data.y}
|
|
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">
|
|
<div className="flex justify-between gap-1 w-full">
|
|
<label
|
|
htmlFor={`note_${data.id}`}
|
|
className="ms-5 overflow-hidden text-ellipsis"
|
|
>
|
|
{data.title}
|
|
</label>
|
|
{(hovered ||
|
|
(selectedElement.element === ObjectType.NOTE &&
|
|
selectedElement.id === data.id &&
|
|
selectedElement.open &&
|
|
!layout.sidebar)) && (
|
|
<div>
|
|
<Popover
|
|
visible={
|
|
selectedElement.element === ObjectType.NOTE &&
|
|
selectedElement.id === data.id &&
|
|
selectedElement.open &&
|
|
!layout.sidebar
|
|
}
|
|
onClickOutSide={() => {
|
|
if (selectedElement.editFromToolbar) {
|
|
setSelectedElement((prev) => ({
|
|
...prev,
|
|
editFromToolbar: false,
|
|
}));
|
|
return;
|
|
}
|
|
setSelectedElement((prev) => ({
|
|
...prev,
|
|
open: false,
|
|
}));
|
|
setSaveState(State.SAVING);
|
|
}}
|
|
stopPropagation
|
|
content={
|
|
<div className="popover-theme">
|
|
<div className="font-semibold mb-2 ms-1">{t("edit")}</div>
|
|
<div className="w-[280px] flex items-center mb-2">
|
|
<Input
|
|
value={data.title}
|
|
placeholder={t("title")}
|
|
className="me-2"
|
|
onChange={(value) =>
|
|
updateNote(data.id, { title: value })
|
|
}
|
|
onFocus={(e) =>
|
|
setEditField({ title: e.target.value })
|
|
}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.title) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.NOTE,
|
|
nid: data.id,
|
|
undo: editField,
|
|
redo: { title: e.target.value },
|
|
message: t("edit_note", {
|
|
noteTitle: e.target.value,
|
|
extra: "[title]",
|
|
}),
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
<Popover
|
|
content={
|
|
<div className="popover-theme">
|
|
<div className="font-medium mb-1">
|
|
{t("theme")}
|
|
</div>
|
|
<hr />
|
|
<div className="py-3">
|
|
{noteThemes.map((c) => (
|
|
<button
|
|
key={c}
|
|
style={{ backgroundColor: c }}
|
|
className="p-3 rounded-full mx-1"
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.NOTE,
|
|
nid: data.id,
|
|
undo: { color: data.color },
|
|
redo: { color: c },
|
|
message: t("edit_note", {
|
|
noteTitle: data.title,
|
|
extra: "[color]",
|
|
}),
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateNote(data.id, { color: c });
|
|
}}
|
|
>
|
|
{data.color === c ? (
|
|
<IconCheckboxTick
|
|
style={{ color: "white" }}
|
|
/>
|
|
) : (
|
|
<IconCheckboxTick style={{ color: c }} />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
}
|
|
position="rightTop"
|
|
showArrow
|
|
>
|
|
<div
|
|
className="h-[32px] w-[32px] rounded"
|
|
style={{ backgroundColor: data.color }}
|
|
/>
|
|
</Popover>
|
|
</div>
|
|
<div className="flex">
|
|
<Button
|
|
icon={<IconDeleteStroked />}
|
|
type="danger"
|
|
block
|
|
onClick={() => deleteNote(data.id, true)}
|
|
>
|
|
{t("delete")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
}
|
|
trigger="custom"
|
|
position="rightTop"
|
|
showArrow
|
|
>
|
|
<Button
|
|
icon={<IconEdit />}
|
|
size="small"
|
|
theme="solid"
|
|
style={{
|
|
backgroundColor: "#2F68ADB3",
|
|
}}
|
|
onClick={edit}
|
|
/>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<textarea
|
|
id={`note_${data.id}`}
|
|
value={data.content}
|
|
onChange={handleChange}
|
|
onFocus={(e) =>
|
|
setEditField({
|
|
content: e.target.value,
|
|
height: data.height,
|
|
})
|
|
}
|
|
onBlur={handleBlur}
|
|
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
|
|
style={{ backgroundColor: data.color }}
|
|
/>
|
|
</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>
|
|
);
|
|
}
|