GuiListView improvements

This commit is contained in:
Sergio Martínez
2018-10-17 18:40:08 +02:00
parent 4f0205e650
commit 60e8122b80
2 changed files with 73 additions and 59 deletions

View File

@ -82,7 +82,7 @@ int main()
if (GuiValueBox((Rectangle){ 25, 125, 125, 30 }, &ValueBox002Value, 0, 100, valueBoxEditMode)) valueBoxEditMode = !valueBoxEditMode; if (GuiValueBox((Rectangle){ 25, 125, 125, 30 }, &ValueBox002Value, 0, 100, valueBoxEditMode)) valueBoxEditMode = !valueBoxEditMode;
if (GuiTextBox((Rectangle){ 25, 175, 125, 30 }, TextBox003Text, 64, textBoxEditMode)) textBoxEditMode = !textBoxEditMode; if (GuiTextBox((Rectangle){ 25, 175, 125, 30 }, TextBox003Text, 64, textBoxEditMode)) textBoxEditMode = !textBoxEditMode;
if (GuiListView((Rectangle){ 175, 25, 120, 135 }, ListView004TextList, 6, &ListView004Active, listViewEditMode)) listViewEditMode = !listViewEditMode; if (GuiListView((Rectangle){ 175, 25, 120, 100 }, ListView004TextList, 6, &ListView004Active, listViewEditMode)) listViewEditMode = !listViewEditMode;
if (GuiButton((Rectangle){ 25, 225, 125, 30 }, "SAMPLE TEXT")) Button005(); if (GuiButton((Rectangle){ 25, 225, 125, 30 }, "SAMPLE TEXT")) Button005();
if (GuiTextBoxMulti((Rectangle){ 325, 25, 225, 175 }, TextBox006Text, 141, multiTextBoxEditMode)) multiTextBoxEditMode = !multiTextBoxEditMode; if (GuiTextBoxMulti((Rectangle){ 325, 25, 225, 175 }, TextBox006Text, 141, multiTextBoxEditMode)) multiTextBoxEditMode = !multiTextBoxEditMode;

View File

@ -2833,13 +2833,28 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int *
GuiControlState state = guiState; GuiControlState state = guiState;
static int startIndex = 0;
int visibleElements = bounds.height/(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]);
int endIndex = startIndex + visibleElements;
bool pressed = false; bool pressed = false;
static int startIndex = 0;
bool useScrollBar = true;
bool pressedKey = false;
int visibleElements = bounds.height/(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]);
int endIndex = startIndex + visibleElements;
int auxActive = *active; int auxActive = *active;
float barHeight = bounds.height; float barHeight = bounds.height;
float minBarHeight = 10; float minBarHeight = 10;
float barPosY = 0;
// All the elements fit inside ListView and dont need scrollbar.
if (visibleElements >= count)
{
useScrollBar = false;
startIndex = 0;
endIndex = count;
}
// Update control // Update control
@ -2850,7 +2865,7 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int *
if (editMode) if (editMode)
{ {
state = FOCUSED; state = FOCUSED;
// Change active with keys // Change active with keys
if (IsKeyPressed(KEY_UP)) if (IsKeyPressed(KEY_UP))
@ -2858,43 +2873,44 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int *
if (auxActive > 0) if (auxActive > 0)
{ {
auxActive--; auxActive--;
if (auxActive < startIndex) startIndex--; if ((useScrollBar) && (auxActive < startIndex)) startIndex--;
} }
pressedKey = true;
} }
else if(IsKeyPressed(KEY_DOWN)) else if(IsKeyPressed(KEY_DOWN))
{ {
if (auxActive < count - 1) if (auxActive < count - 1)
{ {
auxActive++; auxActive++;
if (auxActive >= endIndex) startIndex++; if ((useScrollBar) && (auxActive >= endIndex)) startIndex++;
} }
pressedKey = true;
} }
if (useScrollBar)
int wheel = GetMouseWheelMove();
if (wheel < 0 && endIndex < count)
{ {
startIndex -= wheel; endIndex = startIndex + visibleElements;
} int wheel = GetMouseWheelMove();
else if(wheel > 0 && startIndex > 0)
{ if (wheel < 0 && endIndex < count) startIndex -= wheel;
startIndex -= wheel; else if(wheel > 0 && startIndex > 0) startIndex -= wheel;
if (pressedKey)
{
pressedKey = false;
if ((auxActive < startIndex) || (auxActive >= endIndex)) startIndex = auxActive;
}
if (startIndex < 0) startIndex = 0; if (startIndex < 0) startIndex = 0;
else if (startIndex > (count - (endIndex - startIndex))) else if (startIndex > (count - (endIndex - startIndex)))
{ {
startIndex = count - (endIndex - startIndex); startIndex = count - (endIndex - startIndex);
} }
endIndex = startIndex + visibleElements;
if (endIndex > count) endIndex = count;
} }
endIndex = startIndex + visibleElements; }
if (endIndex > count) endIndex = count;
}
// Comprueba si caben todas las listas en la caja sin necesitar scrollbar.
if (count*style[LISTVIEW_ELEMENTS_HEIGHT] <= bounds.height) startIndex = 0;
// ------------------------------------------------------------------------------------ // ------------------------------------------------------------------------------------
// Note: Changing editMode // Note: Changing editMode
@ -2910,69 +2926,67 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int *
// Calculamos el porcentaje de elementos visibles, y aplicamos el mismo porcentaje al tamaño de la barra original. // Calculamos el porcentaje de elementos visibles, y aplicamos el mismo porcentaje al tamaño de la barra original.
// Hay que tener en cuenta un valor mínimo para que la barra no sea de 1 px nunca y también que no sea mayor que la altura máxima. // Hay que tener en cuenta un valor mínimo para que la barra no sea de 1 px nunca y también que no sea mayor que la altura máxima.
float percentVisible = (endIndex - startIndex)*100/count; if (useScrollBar)
barHeight *= percentVisible/100; {
if (barHeight < minBarHeight) barHeight = minBarHeight; float percentVisible = (endIndex - startIndex)*100/count;
else if(barHeight > bounds.height) barHeight = bounds.height; barHeight *= percentVisible/100;
// Posición Y a la que dibujamos la barra. if (barHeight < minBarHeight) barHeight = minBarHeight;
float barPosY = bounds.y + startIndex*((bounds.height - barHeight)/(count - (endIndex - startIndex))); else if(barHeight > bounds.height) barHeight = bounds.height;
// Posición Y a la que dibujamos la barra.
barPosY = bounds.y + startIndex*((bounds.height - barHeight)/(count - (endIndex - startIndex)));
}
//-------------------------------------------------------------------- //--------------------------------------------------------------------
// Draw control // Draw control
//-------------------------------------------------------------------- //--------------------------------------------------------------------
if (editMode) int posX = bounds.x + style[LISTVIEW_BAR_WIDTH] + style[LISTVIEW_ELEMENTS_PADDING];
int elementWidth = bounds.width - style[LISTVIEW_BAR_WIDTH] - 2*style[LISTVIEW_ELEMENTS_PADDING] - LISTVIEW_LINE_THICK;
if (!useScrollBar)
{ {
for (int i = startIndex; i < endIndex; i++) posX = bounds.x + style[LISTVIEW_ELEMENTS_PADDING];
elementWidth = bounds.width - 2*style[LISTVIEW_ELEMENTS_PADDING] - LISTVIEW_LINE_THICK;
}
// Draw GuiListElements
for (int i = startIndex; i < endIndex; i++)
{
if (i == auxActive && editMode)
{ {
if (i == auxActive) if (GuiListElement((Rectangle){ posX, bounds.y + style[LISTVIEW_ELEMENTS_PADDING] + LISTVIEW_LINE_THICK + (i - startIndex)*(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]), elementWidth, style[LISTVIEW_ELEMENTS_HEIGHT] }, text[i], true, true) == false) auxActive -1;
{ }
if (GuiListElement((Rectangle){ bounds.x + style[LISTVIEW_BAR_WIDTH] + style[LISTVIEW_ELEMENTS_PADDING], bounds.y + style[LISTVIEW_ELEMENTS_PADDING] + LISTVIEW_LINE_THICK + (i - startIndex)*(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]), bounds.width - style[LISTVIEW_BAR_WIDTH] - 2*style[LISTVIEW_ELEMENTS_PADDING] - LISTVIEW_LINE_THICK, style[LISTVIEW_ELEMENTS_HEIGHT] }, text[i], true, true) == false) auxActive -1; else
} {
else if (GuiListElement((Rectangle){ posX, bounds.y + style[LISTVIEW_ELEMENTS_PADDING] + LISTVIEW_LINE_THICK + (i - startIndex)*(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]), elementWidth, style[LISTVIEW_ELEMENTS_HEIGHT] }, text[i], false, true) == true) auxActive = i;
{
if (GuiListElement((Rectangle){ bounds.x + style[LISTVIEW_BAR_WIDTH] + style[LISTVIEW_ELEMENTS_PADDING], bounds.y + style[LISTVIEW_ELEMENTS_PADDING] + LISTVIEW_LINE_THICK + (i - startIndex)*(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]), bounds.width - style[LISTVIEW_BAR_WIDTH] - 2*style[LISTVIEW_ELEMENTS_PADDING] - LISTVIEW_LINE_THICK, style[LISTVIEW_ELEMENTS_HEIGHT] }, text[i], false, true) == true) auxActive = i;
}
} }
} }
else
{
for (int i = startIndex; i < endIndex; i++) if (GuiListElement((Rectangle){ bounds.x + style[LISTVIEW_BAR_WIDTH] + style[LISTVIEW_ELEMENTS_PADDING], bounds.y + style[LISTVIEW_ELEMENTS_PADDING] + LISTVIEW_LINE_THICK + (i - startIndex)*(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]), bounds.width - style[LISTVIEW_BAR_WIDTH] - 2*style[LISTVIEW_ELEMENTS_PADDING] - LISTVIEW_LINE_THICK, style[LISTVIEW_ELEMENTS_HEIGHT] }, text[i], false, true) == true) auxActive = i;
}
// Draw scrollBar background
if (useScrollBar) DrawRectangle(bounds.x, bounds.y, style[LISTVIEW_BAR_WIDTH], bounds.height, Fade(LIGHTGRAY, guiAlpha));
DrawRectangle(bounds.x, bounds.y, style[LISTVIEW_BAR_WIDTH], bounds.height, Fade(LIGHTGRAY, guiAlpha)); // Draw ListView states
// TODO: Review bar logic when bar size should be shorter than LISTVIEW_ELEMENT_HEIGHT
// if (bounds.height < ((count - (endIndex - startIndex))*style[LISTVIEW_ELEMENTS_HEIGHT]))
// {
// float newHeight = (float)(endIndex - startIndex)*(float)(style[LISTVIEW_ELEMENTS_HEIGHT]/2)/(float)(endIndex - startIndex);
// barHeight = (float)bounds.height - (float)((count - (endIndex - startIndex))*newHeight);
// }
switch (state) switch (state)
{ {
case NORMAL: case NORMAL:
case LOCKED: case LOCKED:
{ {
DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BORDER_COLOR_NORMAL]), guiAlpha)); if (useScrollBar) DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BORDER_COLOR_NORMAL]), guiAlpha));
DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_NORMAL]), guiAlpha)); DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_NORMAL]), guiAlpha));
} break; } break;
case FOCUSED: case FOCUSED:
{ {
DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_FOCUSED]), guiAlpha)); if (useScrollBar) DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_FOCUSED]), guiAlpha));
DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_FOCUSED]), guiAlpha)); DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_FOCUSED]), guiAlpha));
} break; } break;
case PRESSED: case PRESSED:
{ {
DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_PRESSED]), guiAlpha)); if (useScrollBar) DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_PRESSED]), guiAlpha));
DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_PRESSED]), guiAlpha)); DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_PRESSED]), guiAlpha));
} break; } break;
case DISABLED: case DISABLED:
{ {
DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[LISTVIEW_BASE_COLOR_DISABLED]), guiAlpha)); if (useScrollBar) DrawRectangle(bounds.x, barPosY, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[LISTVIEW_BASE_COLOR_DISABLED]), guiAlpha));
DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_DISABLED]), guiAlpha)); DrawRectangleLinesEx(bounds, LISTVIEW_LINE_THICK, Fade(GetColor(style[LISTVIEW_BORDER_COLOR_DISABLED]), guiAlpha));
} break; } break;
default: break; default: break;