inline edit table name and fields

[brauliodiez]

When the user clicks on the canvas (table name or fields), allow inline editing:

• Table name: show an input on top and let the user edit.
• Table field name: show an input on top and let the user edit.
• Table field type: show a combo on top and let the user edit.
• Table field NN: show a checkbox.

This needs functional discussion and check layout, maybe it only can be done when the user has certain zoom level, if it's too small we have no room for that.

[brauliodiez]

Some tips:

• Only enable inline editing when zoom has a reasonable value (there are another issue to limit the zoom between 5 factors).

• Study whether to use "Foreign object" to put an input or a combo on top.

• Maybe we can evaluate whether to make the whole field row editable.

Some idea:

// TableCellComponent.tsx
const TableCellComponent: React.FC<TableCellProps> = ({ cell, isEditing, onEdit, onBlur, zoomLevel }) => {
  const inputWidth = 100 / zoomLevel; // Adjust the width based on the zoom level

  return (
    <g>
      {isEditing ? (
        <foreignObject x={/* Calculate position based on zoom and other factors */} y={/* Calculate position based on zoom and other factors */} width={`${inputWidth}%`} height="20">
          <input
            type="text"
            value={cell.value}
            onChange={(e) => onEdit(e.target.value)}
            onBlur={onBlur}
          />
        </foreignObject>
      ) : (
        <text onClick={onEdit}>{cell.value}</text>
      )}
    </g>
  );
};