#424: Add inline editing for table name / Delete unnecesary 'Delete' …

src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts

@@ -65,6 +65,11 @@ export interface CanvasSchemaContextVm {
   updateTablePosition: UpdatePositionFn;
   doFieldToggleCollapse: (tableId: string, fieldId: GUID) => void;
   updateFullTable: (table: TableVm) => void;
+  updateTableSingleField: (
+    table: TableVm,
+    fieldName: string,
+    fieldValue: string
+  ) => void;
   addTable: (table: TableVm) => void;
   addRelation: (relation: RelationVm) => void;
   doSelectElement: (id: GUID | null) => void;

src/core/providers/canvas-schema/canvas-schema.business.ts

@@ -86,6 +86,24 @@ export const updateTable = (
     }
   });
 
+export const updateTableField = (
+  table: TableVm,
+  fieldName: string,
+  fieldValue: string,
+  dbSchema: DatabaseSchemaVm
+): DatabaseSchemaVm =>
+  produce(dbSchema, draft => {
+    const tableIndex = draft.tables.findIndex(t => t.id === table.id);
+
+    if (tableIndex !== -1) {
+      if (fieldName === 'tableName') {
+        draft.tables[tableIndex].tableName = fieldValue;
+      }
+
+      //TODO: Implement update for other fields
+    }
+  });
+
 export const addNewTable = (
   table: TableVm,
   databaseSchema: DatabaseSchemaVm

src/core/providers/canvas-schema/canvas-schema.provider.tsx

@@ -19,6 +19,7 @@ import {
   addNewTable,
   updateRelation,
   updateTable,
+  updateTableField,
 } from './canvas-schema.business';
 import { useHistoryManager } from '@/common/undo-redo';
 import { mapSchemaToLatestVersion } from './canvas-schema.mapper';
@@ -58,6 +59,16 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     setSchema(prevSchema => updateTable(table, prevSchema));
   };
 
+  const updateTableSingleField = (
+    table: TableVm,
+    fieldName: string,
+    fieldValue: string
+  ) => {
+    setSchema(prevSchema =>
+      updateTableField(table, fieldName, fieldValue, prevSchema)
+    );
+  };
+
   // TODO: #56 created to track this
   // https://github.com/Lemoncode/mongo-modeler/issues/56
   const addTable = (table: TableVm) => {
@@ -145,6 +156,7 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
         updateTablePosition,
         doFieldToggleCollapse,
         updateFullTable,
+        updateTableSingleField,
         addTable,
         addRelation,
         doSelectElement,

src/core/providers/table-provider/index.ts

@@ -0,0 +1,2 @@
+export * from './table.context';
+export * from './table.provider';

src/core/providers/table-provider/table.context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { TableContextModel } from './table.model';
+
+export const TableContext = createContext<TableContextModel | null>(null);

src/core/providers/table-provider/table.model.tsx

@@ -0,0 +1,4 @@
+export interface TableContextModel {
+  isTitleInEditMode: boolean;
+  setIsTitleInEditMode: (isInEditMode: boolean) => void;
+}

src/core/providers/table-provider/table.provider.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TableContext } from './table.context';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const TableProvider: React.FC<Props> = props => {
+  const { children } = props;
+  const [isTitleInEditMode, setIsTitleInEditMode] =
+    React.useState<boolean>(false);
+
+  return (
+    <TableContext.Provider value={{ isTitleInEditMode, setIsTitleInEditMode }}>
+      {children}
+    </TableContext.Provider>
+  );
+};
+
+export const useTableContext = () => {
+  const context = React.useContext(TableContext);
+  if (context === null) {
+    throw new Error(
+      'useTableContext: Ensure you have wrapped your Table with TableContext.Provider'
+    );
+  }
+
+  return context;
+};

src/pods/canvas/canvas.pod.tsx

@@ -33,7 +33,6 @@ export const CanvasPod: React.FC = () => {
     updateFullRelation,
     doUndo,
     doRedo,
-    deleteSelectedItem,
     loadSchema,
   } = useCanvasSchemaContext();
   const { canvasViewSettings, setScrollPosition, setLoadSample } =
@@ -144,12 +143,6 @@ export const CanvasPod: React.FC = () => {
       if (e.metaKey && e.shiftKey && e.key === 'z') {
         doRedo();
       }
-
-      if (e.key === 'Delete' || e.key === 'Backspace') {
-        if (canvasSchema.selectedElementId) {
-          deleteSelectedItem(canvasSchema.selectedElementId);
-        }
-      }
     };
 
     modalDialog.isOpen

src/pods/canvas/components/table/components/database-table-header.component.tsx

@@ -1,5 +1,5 @@
 import { Edit } from '@/common/components';
-import { TABLE_CONST } from '@/core/providers';
+import { TABLE_CONST, TableVm } from '@/core/providers';
 import { TruncatedText } from './truncated-text.component';
 import {
   PENCIL_ICON_HEIGHT,
@@ -9,23 +9,27 @@ import {
   TITLE_MARGIN_LEFT,
 } from '../database-table.const';
 import classes from '../database-table.module.css';
+import { useTableContext } from '@/core/providers/table-provider';
+import { useEffect } from 'react';
 
 interface Props {
   onEditTable: () => void;
   isSelected: boolean;
+  table: TableVm;
   tableName: string;
   onSelectTable: () => void;
-  isTabletOrMobileDevice: boolean;
+  isEditingTitle?: boolean;
 }
 
 export const DatabaseTableHeader: React.FC<Props> = props => {
-  const {
-    onEditTable,
-    isSelected,
-    tableName,
-    onSelectTable,
-    isTabletOrMobileDevice,
-  } = props;
+  const { isTitleInEditMode, setIsTitleInEditMode } = useTableContext();
+  const { onEditTable, isSelected, tableName, onSelectTable, table } = props;
+
+  useEffect(() => {
+    if (!isSelected) {
+      setIsTitleInEditMode(false);
+    }
+  }, [isSelected, setIsTitleInEditMode]);
 
   const handlePencilIconClick = (
     e: React.MouseEvent<SVGGElement, MouseEvent>
@@ -39,9 +43,8 @@ export const DatabaseTableHeader: React.FC<Props> = props => {
     e.stopPropagation();
   };
 
-  const handleDoubleClick = (e: React.MouseEvent<SVGGElement, MouseEvent>) => {
-    onEditTable();
-    e.stopPropagation();
+  const handleDoubleClick = () => {
+    setIsTitleInEditMode(true);
   };
 
   return (
@@ -65,13 +68,18 @@ export const DatabaseTableHeader: React.FC<Props> = props => {
       />
       <TruncatedText
         text={tableName}
+        table={table}
         x={TITLE_MARGIN_LEFT}
         y={4}
-        width={TABLE_CONST.TABLE_WIDTH - TITLE_MARGIN_LEFT}
+        width={
+          TABLE_CONST.TABLE_WIDTH -
+          (PENCIL_ICON_WIDTH + PENCIL_MARGIN_RIGHT + TITLE_MARGIN_LEFT)
+        }
         height={TABLE_CONST.FONT_SIZE}
         textClass={classes.tableText}
+        isTextInEditMode={isTitleInEditMode}
       />
-      {isSelected && !isTabletOrMobileDevice && (
+      {isSelected && (
         <g
           transform={`translate(${TABLE_CONST.TABLE_WIDTH - (PENCIL_ICON_WIDTH - PENCIL_MARGIN_RIGHT)}, 2)`}
           onClick={handlePencilIconClick}

src/pods/canvas/components/table/components/truncated-text.component.tsx

@@ -1,34 +1,100 @@
-import React from 'react';
-import { GenerateGUID } from '@/core/model';
+import React, { useEffect, useRef, useState } from 'react';
+import { GUID, GenerateGUID } from '@/core/model';
 import classes from '../database-table.module.css';
+import { TABLE_CONST, TableVm, useCanvasSchemaContext } from '@/core/providers';
+import { useTableContext } from '@/core/providers/table-provider';
 
 interface Props {
   text: string;
+  editText?: (tableId: GUID, fieldId: GUID) => void;
+  table?: TableVm;
   x: number;
   y: number;
   width: number;
   height: number;
   textClass?: string;
+  isTextInEditMode?: boolean;
 }
 
 export const TruncatedText: React.FC<Props> = props => {
   const id = React.useMemo(() => GenerateGUID(), []);
-  const { text, x, y, width, height, textClass } = props;
+  const { text, table, x, y, width, height, textClass, isTextInEditMode } =
+    props;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [editableText, setEditableText] = useState(text);
+  const { updateTableSingleField } = useCanvasSchemaContext();
+  const { setIsTitleInEditMode } = useTableContext();
+
+  const handleInputChange = () => {
+    if (inputRef.current) {
+      if (table) {
+        updateTableSingleField(table, 'tableName', inputRef.current.value);
+      }
+      setEditableText(inputRef.current.value);
+    }
+  };
+
+  useEffect(() => {
+    if (isTextInEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isTextInEditMode]);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      if (inputRef.current) {
+        setIsTitleInEditMode(false);
+      }
+    }
+  };
 
   return (
     <>
       <clipPath id={`clip_${id}`}>
         <rect x={x} y={y} width={width} height={height + 10}></rect>
       </clipPath>
-
-      <text
-        x={x}
-        y={y + height}
-        clipPath={`url(#clip_${id})`}
-        className={!textClass ? classes.tableTextRow : textClass}
-      >
-        {text}
-      </text>
+      {isTextInEditMode ? (
+        <foreignObject
+          x={0}
+          y={0}
+          width={width}
+          height={TABLE_CONST.HEADER_HEIGHT}
+          style={{
+            pointerEvents: 'auto',
+            display: 'flex',
+            alignItems: 'flex-start',
+          }}
+        >
+          <input
+            type="text"
+            ref={inputRef}
+            value={editableText}
+            onChange={handleInputChange}
+            className={!textClass ? classes.tableTextRow : textClass}
+            onKeyDown={handleKeyDown}
+            style={{
+              fontSize: '16px',
+              color: 'black',
+              backgroundColor: 'transparent',
+              width: '100%',
+              height: '100%',
+              boxSizing: 'border-box',
+              overflow: 'hidden',
+              border: 'none', // Optional: Remove border for a cleaner appearance
+            }}
+          />
+        </foreignObject>
+      ) : (
+        <text
+          x={x}
+          y={y + height}
+          width={width}
+          clipPath={`url(#clip_${id})`}
+          className={!textClass ? classes.tableTextRow : textClass}
+        >
+          {text}
+        </text>
+      )}
     </>
   );
 };

src/pods/canvas/components/table/database-table.component.tsx

@@ -11,6 +11,7 @@ import {
 } from './components';
 import { renderRows } from './database-table-render-rows.helper';
 import classes from './database-table.module.css';
+import { TableProvider } from '@/core/providers/table-provider';
 
 // TODO: We should add an optional field to indicate FONT_SIZE in case we override the standard class
 // TODO: There's is a solution more elaborated (using JS) to show elipsis ... if text is too long
@@ -33,10 +34,8 @@ export const DatabaseTable: React.FC<Props> = ({
   canvasSize,
   isSelected,
   selectTable,
-  isTabletOrMobileDevice,
 }) => {
   const rowHeight = TABLE_CONST.FONT_SIZE + TABLE_CONST.ROW_PADDING;
-
   const [renderedRows, totalHeight] = React.useMemo((): [
     JSX.Element[],
     number,
@@ -76,22 +75,27 @@ export const DatabaseTable: React.FC<Props> = ({
   };
 
   return (
-    <g
-      transform={`translate(${tableInfo.x}, ${tableInfo.y})`}
-      onMouseDown={onMouseDown}
-      onTouchStart={onTouchStart}
-      className={classes.tableContainer}
-      ref={ref as React.LegacyRef<SVGGElement> | undefined}
-    >
-      <DatabaseTableBorder totalHeight={totalHeight} isSelected={isSelected} />
-      <DatabaseTableHeader
-        onEditTable={handleDoubleClick}
-        onSelectTable={handleSelectTable}
-        isSelected={isSelected}
-        tableName={tableInfo.tableName}
-        isTabletOrMobileDevice={isTabletOrMobileDevice}
-      />
-      <DatabaseTableBody renderedRows={renderedRows} />
-    </g>
+    <TableProvider>
+      <g
+        transform={`translate(${tableInfo.x}, ${tableInfo.y})`}
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+        className={classes.tableContainer}
+        ref={ref as React.LegacyRef<SVGGElement> | undefined}
+      >
+        <DatabaseTableBorder
+          totalHeight={totalHeight}
+          isSelected={isSelected}
+        />
+        <DatabaseTableHeader
+          onEditTable={handleDoubleClick}
+          onSelectTable={handleSelectTable}
+          isSelected={isSelected}
+          table={tableInfo}
+          tableName={tableInfo.tableName}
+        />
+        <DatabaseTableBody renderedRows={renderedRows} />
+      </g>
+    </TableProvider>
   );
 };

src/pods/toolbar/shortcut/shortcut.const.ts

@@ -20,7 +20,7 @@ export const SHORTCUTS: Shortcut = {
   delete: {
     description: 'Delete',
     id: 'delete-button-shortcut',
-    targetKey: ['backspace'],
+    targetKey: ['Backspace'],
     targetKeyLabel: 'Backspace',
   },
   export: {