feat: Maximum comment width

packages/erd-editor-schema/src/v3/parser/settings.ts

@@ -65,10 +65,12 @@ const createSettings = (): Settings => ({
     ColumnType.columnDefault,
     ColumnType.columnComment,
   ],
+  maxWidthComment: -1,
 });
 
 const sizeInRange = createInRange(CANVAS_SIZE_MIN, CANVAS_SIZE_MAX);
 const zoomInRange = createInRange(CANVAS_ZOOM_MIN, CANVAS_ZOOM_MAX);
+const maxWidthCommentInRange = createInRange(60, 200);
 
 export function createAndMergeSettings(json?: DeepPartial<Settings>): Settings {
   const settings = createSettings();
@@ -87,6 +89,9 @@ export function createAndMergeSettings(json?: DeepPartial<Settings>): Settings {
   if (isNumber(json.zoomLevel)) {
     settings.zoomLevel = zoomInRange(json.zoomLevel);
   }
+  if (isNumber(json.maxWidthComment) && json.maxWidthComment !== -1) {
+    settings.maxWidthComment = maxWidthCommentInRange(json.maxWidthComment);
+  }
 
   assignNumber('scrollTop');
   assignNumber('scrollLeft');

packages/erd-editor-schema/src/v3/schema/settings.ts

@@ -17,6 +17,7 @@ export type Settings = {
   relationshipDataTypeSync: boolean;
   relationshipOptimization: boolean;
   columnOrder: number[];
+  maxWidthComment: number;
 };
 
 export const CanvasType = {

packages/erd-editor/src/components/erd/canvas/table/column/Column.ts

@@ -194,6 +194,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
                     }}
                   >
                     <${EditInput}
+                      title=${column.comment}
                       placeholder="comment"
                       width=${widthComment}
                       value=${column.comment}

packages/erd-editor/src/components/primitives/edit-input/EditInput.styles.ts

@@ -34,3 +34,8 @@ export const cursor = css`
 export const userSelect = css`
   user-select: none;
 `;
+
+export const ellipsis = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

packages/erd-editor/src/components/primitives/edit-input/EditInput.ts

@@ -118,7 +118,9 @@ const EditInput: FC<EditInputProps> = (props, ctx) => {
             ...${restAttrs({ title: props.title })}
             ?data-focus-border-bottom=${isFocus}
           >
-            ${props.value.trim() ? props.value : props.placeholder}
+            <span class=${styles.ellipsis}>
+              ${props.value.trim() ? props.value : props.placeholder}
+            </span>
           </div>
         `;
   };

packages/erd-editor/src/components/primitives/text-input/TextInput.ts

@@ -8,6 +8,7 @@ export type TextInputProps = {
   title?: string;
   placeholder?: string;
   readonly?: boolean;
+  disabled?: boolean;
   width?: number;
   value: string;
   numberOnly?: boolean;
@@ -29,6 +30,7 @@ const TextInput: FC<TextInputProps> = (props, ctx) => {
       type="text"
       spellcheck="false"
       ?readonly=${props.readonly}
+      ?disabled=${props.disabled}
       .value=${props.value ?? ''}
       @input=${props.numberOnly ? onNumberOnly : null}
       @input=${props.onInput}

packages/erd-editor/src/components/settings/Settings.ts

@@ -15,14 +15,17 @@ import Menu from '@/components/primitives/context-menu/menu/Menu';
 import Icon from '@/components/primitives/icon/Icon';
 import Separator from '@/components/primitives/separator/Separator';
 import Switch from '@/components/primitives/switch/Switch';
+import TextInput from '@/components/primitives/text-input/TextInput';
 import Toast from '@/components/primitives/toast/Toast';
 import SettingsLnb, {
   Lnb,
 } from '@/components/settings/settings-lnb/SettingsLnb';
 import Shortcuts from '@/components/settings/shortcuts/Shortcuts';
+import { COLUMN_MIN_WIDTH } from '@/constants/layout';
 import { ColumnTypeToName } from '@/constants/schema';
 import {
   changeColumnOrderAction,
+  changeMaxWidthCommentAction,
   changeRelationshipDataTypeSyncAction,
 } from '@/engine/modules/settings/atom.actions';
 import { fontSize6 } from '@/styles/typography.styles';
@@ -32,6 +35,11 @@ import { relationshipSort } from '@/utils/draw-relationship/sort';
 import { openToastAction } from '@/utils/emitter';
 import { FlipAnimation } from '@/utils/flipAnimation';
 import { fromShadowDraggable } from '@/utils/rx-operators/fromShadowDraggable';
+import {
+  maxWidthCommentInRange,
+  toMaxWidthCommentFormat,
+  toNumString,
+} from '@/utils/validation';
 
 import * as styles from './Settings.styles';
 
@@ -105,9 +113,29 @@ const Settings: FC<SettingsProps> = (props, ctx) => {
     state.lnb = value;
   };
 
+  const handleSwitchMaxWidthComment = (checked: boolean) => {
+    const { store } = app.value;
+    store.dispatch(
+      changeMaxWidthCommentAction({ value: checked ? COLUMN_MIN_WIDTH : -1 })
+    );
+  };
+
+  const handleChangeMaxWidthComment = (event: Event) => {
+    const el = event.target as HTMLInputElement | null;
+    if (!el) return;
+
+    const maxWidthComment = maxWidthCommentInRange(
+      Number(toNumString(el.value))
+    );
+    const { store } = app.value;
+    el.value = toMaxWidthCommentFormat(maxWidthComment);
+    store.dispatch(changeMaxWidthCommentAction({ value: maxWidthComment }));
+  };
+
   return () => {
     const { store } = app.value;
     const { settings } = store.state;
+    const maxWidthCommentDisabled = settings.maxWidthComment === -1;
 
     return html`
       <div class=${styles.root} ${ref(root)}>
@@ -129,6 +157,26 @@ const Settings: FC<SettingsProps> = (props, ctx) => {
                         .onChange=${handleChangeRelationshipDataTypeSync}
                       />
                     </div>
+                    <div class=${styles.row}>
+                      <div>Maximum comment width</div>
+                      <div class=${styles.vertical(16)}></div>
+                      <${Switch}
+                        value=${!maxWidthCommentDisabled}
+                        .onChange=${handleSwitchMaxWidthComment}
+                      />
+                      <div class=${styles.vertical(8)}></div>
+                      <${TextInput}
+                        title="Maximum comment width"
+                        placeholder="Maximum comment width"
+                        width=${45}
+                        value=${maxWidthCommentDisabled
+                          ? toMaxWidthCommentFormat(COLUMN_MIN_WIDTH)
+                          : toMaxWidthCommentFormat(settings.maxWidthComment)}
+                        disabled=${maxWidthCommentDisabled}
+                        numberOnly=${true}
+                        .onChange=${handleChangeMaxWidthComment}
+                      />
+                    </div>
                     <div class=${styles.row}>
                       <div>Recalculation table width</div>
                       <div class=${styles.vertical(16)}></div>

packages/erd-editor/src/engine/actions.ts

@@ -132,6 +132,7 @@ export const ChangeActionTypes: ReadonlyArray<ActionType> = [
   'settings.changeRelationshipDataTypeSync',
   'settings.changeRelationshipOptimization',
   'settings.changeColumnOrder',
+  'settings.changeMaxWidthComment',
   // editor
   'editor.loadJson',
   'editor.clear',

packages/erd-editor/src/engine/modules/relationship/hooks.ts

@@ -5,7 +5,10 @@ import { ColumnOption, StartRelationshipType } from '@/constants/schema';
 import type { CO, Hook } from '@/engine/hooks';
 import { moveMemoAction } from '@/engine/modules/memo/atom.actions';
 import { addRelationshipAction } from '@/engine/modules/relationship/atom.actions';
-import { changeShowAction } from '@/engine/modules/settings/atom.actions';
+import {
+  changeMaxWidthCommentAction,
+  changeShowAction,
+} from '@/engine/modules/settings/atom.actions';
 import {
   changeTableCommentAction,
   changeTableNameAction,
@@ -121,6 +124,7 @@ export const hooks: Hook[] = [
   [
     [
       changeShowAction,
+      changeMaxWidthCommentAction,
       addRelationshipAction,
       moveMemoAction,
       moveTableAction,

packages/erd-editor/src/engine/modules/settings/actions.ts

@@ -21,6 +21,7 @@ export const ActionType = {
   changeRelationshipDataTypeSync: 'settings.changeRelationshipDataTypeSync',
   changeRelationshipOptimization: 'settings.changeRelationshipOptimization',
   changeColumnOrder: 'settings.changeColumnOrder',
+  changeMaxWidthComment: 'settings.changeMaxWidthComment',
 } as const;
 export type ActionType = ValuesType<typeof ActionType>;
 
@@ -78,6 +79,9 @@ export type ActionMap = {
     value: number;
     target: number;
   };
+  [ActionType.changeMaxWidthComment]: {
+    value: number;
+  };
 };
 
 export type ReducerType<T extends keyof ActionMap> = Reducer<

packages/erd-editor/src/engine/modules/settings/atom.actions.ts

@@ -9,6 +9,7 @@ import {
   hasDatabase,
   hasLanguage,
   hasNameCase,
+  maxWidthCommentInRange,
   zoomLevelInRange,
 } from '@/utils/validation';
 
@@ -225,6 +226,17 @@ const changeColumnOrder: ReducerType<typeof ActionType.changeColumnOrder> = (
   settings.columnOrder.splice(targetIndex, 0, value);
 };
 
+export const changeMaxWidthCommentAction = createAction<
+  ActionMap[typeof ActionType.changeMaxWidthComment]
+>(ActionType.changeMaxWidthComment);
+
+const changeMaxWidthComment: ReducerType<
+  typeof ActionType.changeMaxWidthComment
+> = ({ settings }, { payload: { value } }) => {
+  settings.maxWidthComment =
+    value === -1 ? value : maxWidthCommentInRange(value);
+};
+
 export const settingsReducers = {
   [ActionType.changeDatabaseName]: changeDatabaseName,
   [ActionType.resize]: resize,
@@ -242,6 +254,7 @@ export const settingsReducers = {
   [ActionType.changeRelationshipDataTypeSync]: changeRelationshipDataTypeSync,
   [ActionType.changeRelationshipOptimization]: changeRelationshipOptimization,
   [ActionType.changeColumnOrder]: changeColumnOrder,
+  [ActionType.changeMaxWidthComment]: changeMaxWidthComment,
 };
 
 export const actions = {
@@ -261,4 +274,5 @@ export const actions = {
   changeRelationshipDataTypeSyncAction,
   changeRelationshipOptimizationAction,
   changeColumnOrderAction,
+  changeMaxWidthCommentAction,
 };

packages/erd-editor/src/engine/rx-store.ts

@@ -19,7 +19,6 @@ import {
   actionsFilter,
   groupByStreamActions,
   ignoreTagFilter,
-  notEmptyActions,
 } from '@/engine/rx-operators';
 import { createStore, Store } from '@/engine/store';
 import { createHooks } from '@/engine/store.hooks';
@@ -50,7 +49,7 @@ export function createRxStore(context: EngineContext): RxStore {
   );
   const change$ = new Observable<Array<AnyAction>>(subscriber =>
     store.subscribe(actions => subscriber.next(actions))
-  ).pipe(actionsFilter(ChangeActionTypes), notEmptyActions, debounceTime(200));
+  ).pipe(actionsFilter(ChangeActionTypes), debounceTime(200));
 
   const dispatchSync = (...compositionActions: CompositionActions) => {
     dispatch$.next(

packages/erd-editor/src/styles/reset.styles.ts

@@ -57,6 +57,12 @@ textarea::placeholder {
   opacity: 1;
 }
 
+input:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }

packages/erd-editor/src/utils/calcTable.ts

@@ -21,11 +21,17 @@ import { textInRange } from '@/utils/validation';
 
 export function calcTableWidths(
   table: Table,
-  { settings: { show }, collections }: RootState
+  { settings: { show, maxWidthComment }, collections }: RootState
 ): ColumnWidth {
   let width = table.ui.widthName + INPUT_MARGIN_RIGHT;
   if (bHas(show, Show.tableComment)) {
-    width += table.ui.widthComment + INPUT_MARGIN_RIGHT;
+    const widthComment =
+      maxWidthComment === -1
+        ? table.ui.widthComment
+        : maxWidthComment < table.ui.widthComment
+        ? maxWidthComment
+        : table.ui.widthComment;
+    width += widthComment + INPUT_MARGIN_RIGHT;
   }
 
   const defaultWidthColumns = calcDefaultWidthColumns(show);
@@ -37,7 +43,7 @@ export function calcTableWidths(
     .collection('tableColumnEntities')
     .selectByIds(table.columnIds);
 
-  const maxWidthColumn = calcMaxWidthColumn(columns, show);
+  const maxWidthColumn = calcMaxWidthColumn(columns, show, maxWidthComment);
   if (width < maxWidthColumn.width) {
     width = maxWidthColumn.width;
   }
@@ -101,7 +107,11 @@ export type ColumnWidth = {
   unique: number;
 };
 
-function calcMaxWidthColumn(columns: Column[], show: number): ColumnWidth {
+function calcMaxWidthColumn(
+  columns: Column[],
+  show: number,
+  maxWidthComment: number
+): ColumnWidth {
   const columnWidth: ColumnWidth = {
     width: 0,
     name: 0,
@@ -122,7 +132,13 @@ function calcMaxWidthColumn(columns: Column[], show: number): ColumnWidth {
       bHas(show, Show.columnComment) &&
       columnWidth.comment < column.ui.widthComment
     ) {
-      columnWidth.comment = column.ui.widthComment;
+      const widthComment =
+        maxWidthComment === -1
+          ? column.ui.widthComment
+          : maxWidthComment < column.ui.widthComment
+          ? maxWidthComment
+          : column.ui.widthComment;
+      columnWidth.comment = widthComment;
     }
 
     if (

packages/erd-editor/src/utils/validation.ts

@@ -24,6 +24,8 @@ const canvasInRange = createInRange(CANVAS_SIZE_MIN, CANVAS_SIZE_MAX);
 
 const zoomInRange = createInRange(CANVAS_ZOOM_MIN, CANVAS_ZOOM_MAX);
 
+export const maxWidthCommentInRange = createInRange(COLUMN_MIN_WIDTH, 200);
+
 export function canvasSizeInRange(size: number | string) {
   const value = isString(size) ? Number(toNumString(size)) : size;
   return canvasInRange(value);
@@ -33,6 +35,11 @@ export function zoomLevelInRange(zoom: number) {
   return round(zoomInRange(zoom), 2);
 }
 
+export function toMaxWidthCommentFormat(width: number) {
+  const value = isString(width) ? Number(toNumString(width)) : width;
+  return `${maxWidthCommentInRange(value)}px`;
+}
+
 export function toZoomFormat(zoomLevel: number) {
   return `${(zoomLevel * 100).toFixed()}%`;
 }