From c959b84aff67c4706a39e70973c6bd6b849dc697 Mon Sep 17 00:00:00 2001 From: Pranay Pandey Date: Tue, 7 Oct 2025 23:04:20 +0530 Subject: [PATCH 1/2] Add note width customization support --- src/components/EditorCanvas/Canvas.jsx | 4 ++-- src/components/EditorCanvas/Note.jsx | 5 ++++- src/components/EditorHeader/ControlPanel.jsx | 7 ++++++- src/components/EditorHeader/Modal/Modal.jsx | 3 +++ .../EditorHeader/Modal/SetNotesWidth.jsx | 19 +++++++++++++++++++ src/components/Thumbnail.jsx | 2 +- src/context/SettingsContext.jsx | 3 ++- src/data/constants.js | 3 ++- src/i18n/locales/en.js | 1 + src/utils/modalData.js | 2 ++ 10 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 src/components/EditorHeader/Modal/SetNotesWidth.jsx diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx index d96433dee..1a1a154d9 100644 --- a/src/components/EditorCanvas/Canvas.jsx +++ b/src/components/EditorCanvas/Canvas.jsx @@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next"; import { useEventListener } from "usehooks-ts"; import { areFieldsCompatible, getTableHeight } from "../../utils/utils"; import { getRectFromEndpoints, isInsideRect } from "../../utils/rect"; -import { State, noteWidth } from "../../data/constants"; +import { State } from "../../data/constants"; export default function Canvas() { const { t } = useTranslation(); @@ -173,7 +173,7 @@ export default function Canvas() { const noteRect = { x: note.x, y: note.y, - width: noteWidth, + width: settings.noteWidth, height: note.height, }; if (shouldAddElement(noteRect, element)) { diff --git a/src/components/EditorCanvas/Note.jsx b/src/components/EditorCanvas/Note.jsx index 34fc5373d..1b12c7846 100644 --- a/src/components/EditorCanvas/Note.jsx +++ b/src/components/EditorCanvas/Note.jsx @@ -14,15 +14,18 @@ import { useSelect, useNotes, useSaveState, + useSettings, } from "../../hooks"; import { useTranslation } from "react-i18next"; -import { noteWidth, noteRadius, noteFold } from "../../data/constants"; +import { noteRadius, noteFold } from "../../data/constants"; export default function Note({ data, onPointerDown }) { const [editField, setEditField] = useState({}); const [hovered, setHovered] = useState(false); const { layout } = useLayout(); const { t } = useTranslation(); + const { settings } = useSettings(); + const noteWidth = settings.noteWidth; const { setSaveState } = useSaveState(); const { updateNote, deleteNote } = useNotes(); const { setUndoStack, setRedoStack } = useUndoRedo(); diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index 5cea90ed0..dd48ef677 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -42,7 +42,6 @@ import { SIDESHEET, DB, IMPORT_FROM, - noteWidth, pngExportPixelRatio, } from "../../data/constants"; import jsPDF from "jspdf"; @@ -133,6 +132,8 @@ export default function ControlPanel({ const { version, gistId, setGistId } = useContext(IdContext); const navigate = useNavigate(); + const noteWidth = settings.noteWidth; + const invertLayout = (component) => setLayout((prev) => ({ ...prev, [component]: !prev[component] })); @@ -1516,6 +1517,10 @@ export default function ControlPanel({ function: () => setModal(MODAL.TABLE_WIDTH), disabled: layout.readOnly, }, + notes_width: { + function: () => setModal(MODAL.NOTE_WIDTH), + disabled: layout.readOnly, + }, language: { function: () => setModal(MODAL.LANGUAGE), }, diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx index 86b82e081..1f59b3eae 100644 --- a/src/components/EditorHeader/Modal/Modal.jsx +++ b/src/components/EditorHeader/Modal/Modal.jsx @@ -33,6 +33,7 @@ import New from "./New"; import ImportDiagram from "./ImportDiagram"; import ImportSource from "./ImportSource"; import SetTableWidth from "./SetTableWidth"; +import SetNotesWidth from "./SetNotesWidth"; import Language from "./Language"; import Share from "./Share"; import CodeEditor from "../../CodeEditor"; @@ -346,6 +347,8 @@ export default function Modal({ } case MODAL.TABLE_WIDTH: return ; + case MODAL.NOTE_WIDTH: + return ; case MODAL.LANGUAGE: return ; case MODAL.SHARE: diff --git a/src/components/EditorHeader/Modal/SetNotesWidth.jsx b/src/components/EditorHeader/Modal/SetNotesWidth.jsx new file mode 100644 index 000000000..7a74aceba --- /dev/null +++ b/src/components/EditorHeader/Modal/SetNotesWidth.jsx @@ -0,0 +1,19 @@ +import { InputNumber } from "@douyinfe/semi-ui"; +import { useLayout, useSettings } from "../../../hooks"; + +export default function SetNotesWidth() { + const { layout } = useLayout(); + const { settings, setSettings } = useSettings(); + + return ( + { + if (c < 180) return; + setSettings((prev) => ({ ...prev, noteWidth: c })); + }} + /> + ); +} diff --git a/src/components/Thumbnail.jsx b/src/components/Thumbnail.jsx index b95b67624..4ebc5fb77 100644 --- a/src/components/Thumbnail.jsx +++ b/src/components/Thumbnail.jsx @@ -1,7 +1,7 @@ import { tableFieldHeight, tableHeaderHeight, - noteWidth, + defaultNoteWidth as noteWidth, noteRadius, noteFold, gridSize, diff --git a/src/context/SettingsContext.jsx b/src/context/SettingsContext.jsx index 9c50bf855..04acab9c8 100644 --- a/src/context/SettingsContext.jsx +++ b/src/context/SettingsContext.jsx @@ -1,5 +1,5 @@ import { createContext, useEffect, useState } from "react"; -import { tableWidth } from "../data/constants"; +import { tableWidth, defaultNoteWidth } from "../data/constants"; const defaultSettings = { strictMode: false, @@ -13,6 +13,7 @@ const defaultSettings = { showRelationshipLabels: true, tableWidth: tableWidth, showDebugCoordinates: false, + noteWidth: defaultNoteWidth, }; export const SettingsContext = createContext(defaultSettings); diff --git a/src/data/constants.js b/src/data/constants.js index 66eadaba5..a53c9660c 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -1,6 +1,6 @@ export const defaultBlue = "#175e7a"; export const defaultNoteTheme = "#fcf7ac"; -export const noteWidth = 180; +export const defaultNoteWidth = 180; export const noteRadius = 3; export const noteFold = 24; export const darkBgTheme = "#16161A"; @@ -87,6 +87,7 @@ export const MODAL = { TABLE_WIDTH: 9, LANGUAGE: 10, SHARE: 11, + NOTE_WIDTH: 12, }; export const STATUS = { diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index a961c056e..ceab1ead7 100644 --- a/src/i18n/locales/en.js +++ b/src/i18n/locales/en.js @@ -75,6 +75,7 @@ const en = { coordinate_space_screen: "Screen", coordinate_space_diagram: "Diagram", table_width: "Table width", + notes_width: "Notes width", language: "Language", flush_storage: "Flush storage", are_you_sure_flush_storage: diff --git a/src/utils/modalData.js b/src/utils/modalData.js index 65481337a..2d543d823 100644 --- a/src/utils/modalData.js +++ b/src/utils/modalData.js @@ -21,6 +21,8 @@ export const getModalTitle = (modal) => { return i18n.t("create_new_diagram"); case MODAL.TABLE_WIDTH: return i18n.t("table_width"); + case MODAL.NOTE_WIDTH: + return i18n.t("note_width"); case MODAL.LANGUAGE: return i18n.t("language"); case MODAL.SHARE: From 882d914a944b3acf0a7390ce1d1c498906c89b2b Mon Sep 17 00:00:00 2001 From: Pranay Pandey Date: Tue, 7 Oct 2025 23:08:59 +0530 Subject: [PATCH 2/2] Fix heading title for note width modal --- src/utils/modalData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/modalData.js b/src/utils/modalData.js index 2d543d823..aeefcb394 100644 --- a/src/utils/modalData.js +++ b/src/utils/modalData.js @@ -22,7 +22,7 @@ export const getModalTitle = (modal) => { case MODAL.TABLE_WIDTH: return i18n.t("table_width"); case MODAL.NOTE_WIDTH: - return i18n.t("note_width"); + return i18n.t("notes_width"); case MODAL.LANGUAGE: return i18n.t("language"); case MODAL.SHARE: