feat: add field annotations support, "Show All Fields" option, and fix DBML import parsing issues

src/components/EditorCanvas/Canvas.jsx

@@ -139,6 +139,7 @@ export default function Canvas() {
           table,
           settings.tableWidth,
           settings.showComments,
+          settings.showMaxFields,
         ),
       };
       if (shouldAddElement(tableRect, element)) {

src/components/EditorCanvas/Table.jsx

@@ -53,6 +53,7 @@ export default function Table({
     tableData,
     settings.tableWidth,
     settings.showComments,
+    settings.showMaxFields,
   );
 
   const isSelected = useMemo(() => {
@@ -279,7 +280,9 @@ export default function Table({
             )}
           </div>
 
-          {tableData.fields.map((e, i) => {
+          {tableData.fields
+            .slice(0, settings.showMaxFields === 0 ? tableData.fields.length : settings.showMaxFields)
+            .map((e, i) => {
             return settings.showFieldSummary ? (
               <Popover
                 key={i}
@@ -382,7 +385,7 @@ export default function Table({
           index === tableData.fields.length - 1
             ? ""
             : "border-b border-gray-400"
-        } group h-[36px] px-2 py-1 flex justify-between items-center gap-1 w-full overflow-hidden`}
+        } group h-9 px-2 flex justify-between items-center gap-1 w-full overflow-hidden`}
         onPointerEnter={(e) => {
           if (!e.isPrimary) return;
 
@@ -410,10 +413,10 @@ export default function Table({
         <div
           className={`${
             hoveredField === index ? "text-zinc-400" : ""
-          } flex items-center gap-2 overflow-hidden`}
+          } flex items-center gap-2 overflow-hidden w-full min-w-0`}
         >
           <button
-            className="shrink-0 w-[10px] h-[10px] bg-[#2f68adcc] rounded-full"
+            className="shrink-0 w-2.5 h-2.5 bg-[#2f68adcc] rounded-full"
             onPointerDown={(e) => {
               if (!e.isPrimary) return;
 
@@ -449,11 +452,16 @@ export default function Table({
               }));
             }}
           />
-          <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+          <span className="min-w-0 overflow-hidden whitespace-nowrap text-ellipsis">
             {fieldData.name}
+            {settings.showComments && fieldData.comment ? (
+              <span className="text-[10px] text-zinc-500 ms-2 overflow-hidden whitespace-nowrap text-ellipsis">
+                {fieldData.comment}
+              </span>
+            ) : null}
           </span>
         </div>
-        <div className="text-zinc-400">
+        <div className="text-zinc-400 shrink-0">
           {hoveredField === index ? (
             <Button
               theme="solid"

src/components/EditorHeader/ControlPanel.jsx

@@ -527,7 +527,7 @@ export default function ControlPanel({ title, setTitle, lastSaved }) {
       minMaxXY.maxY = Math.max(
         minMaxXY.maxY,
         table.y +
-          getTableHeight(table, settings.tableWidth, settings.showComments),
+          getTableHeight(table, settings.tableWidth, settings.showComments, settings.showMaxFields),
       );
     });
 
@@ -1435,6 +1435,18 @@ export default function ControlPanel({ title, setTitle, lastSaved }) {
             showDebugCoordinates: !prev.showDebugCoordinates,
           })),
       },
+      limit_fields: {
+        state: settings.showMaxFields === 0 ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () =>
+          setSettings((prev) => ({
+            ...prev,
+            showMaxFields: prev.showMaxFields === 0 ? 10 : 0,
+          })),
+      },
       theme: {
         children: [
           {

src/context/SettingsContext.jsx

@@ -14,6 +14,7 @@ const defaultSettings = {
   tableWidth: tableWidth,
   showDebugCoordinates: false,
   showComments: true,
+  showMaxFields: 0, // 0 means show all fields
 };
 
 export const SettingsContext = createContext(defaultSettings);

src/i18n/locales/en.js

@@ -6,6 +6,7 @@ const english = {
 
 const en = {
   translation: {
+    limit_fields: "Show all fields",
     report_bug: "Report a bug",
     import: "Import",
     inherits: "Inherits",

src/i18n/locales/zh.js

@@ -6,6 +6,8 @@ const chinese = {
 
 const zh = {
   translation: {
+    show_comments: "显示注释",
+    limit_fields: "显示所有字段",
     report_bug: "报告问题",
     import_from: "导入",
     import: "导入",

src/utils/importFrom/dbml.js

@@ -27,7 +27,8 @@ export function fromDBML(src) {
 
         field.id = nanoid();
         field.name = column.name;
-        field.type = column.type.type_name.toUpperCase();
+        field.type = extractTypeName(column.type.type_name).toUpperCase();
+        field.size = column.type.args ?? "";
         field.default = column.dbdefault?.value ?? "";
         field.check = "";
         field.primary = !!column.pk;
@@ -125,3 +126,11 @@ export function fromDBML(src) {
 
   return diagram;
 }
+
+function extractTypeName(type) {
+  const match = type.match(/^(\w+)(?:\([^)]*\))?/);
+  if (match && match[1]) {
+    return match[1];
+  }
+  return type;
+}

src/utils/utils.js

@@ -82,9 +82,10 @@ export function getCommentHeight(comment, containerWidth, showComments = true) {
   return height + paddingBottom;
 }
 
-export function getTableHeight(table, width, showComments = true) {
+export function getTableHeight(table, width, showComments = true, showMaxFields = 0) {
+  const displayFieldsCount = showMaxFields === 0 ? table.fields.length : Math.min(table.fields.length, showMaxFields);
   return (
-    table.fields.length * tableFieldHeight +
+    displayFieldsCount * tableFieldHeight +
     tableHeaderHeight +
     tableColorStripHeight +
     getCommentHeight(table.comment, width, showComments)