[FEAT] Make note width as a customizable setting

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)) {

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();

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),
       },

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 <SetTableWidth />;
+      case MODAL.NOTE_WIDTH:
+        return <SetNotesWidth />;
       case MODAL.LANGUAGE:
         return <Language />;
       case MODAL.SHARE:

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 (
+    <InputNumber
+      className="w-full"
+      value={settings.noteWidth}
+      readonly={layout.readOnly}
+      onChange={(c) => {
+        if (c < 180) return;
+        setSettings((prev) => ({ ...prev, noteWidth: c }));
+      }}
+    />
+  );
+}

src/components/Thumbnail.jsx

@@ -1,7 +1,7 @@
 import {
   tableFieldHeight,
   tableHeaderHeight,
-  noteWidth,
+  defaultNoteWidth as noteWidth,
   noteRadius,
   noteFold,
   gridSize,

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);

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 = {

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:

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("notes_width");
     case MODAL.LANGUAGE:
       return i18n.t("language");
     case MODAL.SHARE: