From 4f0205e650e27e5da0ecc7cc47b1a2ffc8c6bf80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Mart=C3=ADnez?= Date: Wed, 17 Oct 2018 12:22:12 +0200 Subject: [PATCH] GuiListView review!!! WIP yet... --- examples/controls_review/controls_review.c | 19 ++-- src/raygui.h | 113 ++++++++++----------- 2 files changed, 62 insertions(+), 70 deletions(-) diff --git a/examples/controls_review/controls_review.c b/examples/controls_review/controls_review.c index 84283da..b66cf39 100644 --- a/examples/controls_review/controls_review.c +++ b/examples/controls_review/controls_review.c @@ -38,7 +38,7 @@ int main() const char *DropdownBox000TextList[3] = { "ONE", "TWO", "THREE" }; int Spinner001Value = 0; int ValueBox002Value = 0; - char TextBox003Text[64] = "SAMPLE TEXTç"; + char TextBox003Text[64] = "SAMPLE TEXT"; int ListView004Active = 1; const char *ListView004TextList[6] = { "Charmander", "Bulbasaur", "Squirtel", "Pikachu", "Eevee", "Pidgey" }; char TextBox006Text[141] = "SAMPLE TEXT"; @@ -47,14 +47,14 @@ int main() bool valueBoxEditMode = false; bool textBoxEditMode = false; bool multiTextBoxEditMode = false; -<<<<<<< HEAD + bool listViewEditMode = false; -======= + bool dropDown000EditMode = false; bool dropDown001EditMode = false; //TODO: Substituir DrawText por DrawTextEx y MeasureText por MeasureTextEx ->>>>>>> 296bc577f5898d4a9f01c1eab190ac92384687f1 + //---------------------------------------------------------------------------------- SetTargetFPS(60); @@ -81,19 +81,12 @@ int main() //if (GuiSpinner((Rectangle){ 25, 75, 125, 30 }, &Spinner001Value, 0, 100, 25, spinnerEditMode)) spinnerEditMode = !spinnerEditMode; 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; - -<<<<<<< HEAD - if (GuiListView((Rectangle){ 175, 25, 125, 115 }, ListView004TextList, 6, &ListView004Active, listViewEditMode)) listViewEditMode = !listViewEditMode; + + if (GuiListView((Rectangle){ 175, 25, 120, 135 }, ListView004TextList, 6, &ListView004Active, listViewEditMode)) listViewEditMode = !listViewEditMode; if (GuiButton((Rectangle){ 25, 225, 125, 30 }, "SAMPLE TEXT")) Button005(); if (GuiTextBoxMulti((Rectangle){ 325, 25, 225, 175 }, TextBox006Text, 141, multiTextBoxEditMode)) multiTextBoxEditMode = !multiTextBoxEditMode; -======= - ListView004Active = GuiListView((Rectangle){ 175, 25, 125, 115 }, ListView004TextList, 6, ListView004Active); - if (GuiButton((Rectangle){ 25, 225, 125, 30 }, "SAMPLE TEXT")) Button005(); - - if (GuiTextBoxMulti((Rectangle){ 325, 25, 225, 175 }, TextBox006Text, 141, multiTextBoxEditMode)) multiTextBoxEditMode = !multiTextBoxEditMode;; ->>>>>>> 296bc577f5898d4a9f01c1eab190ac92384687f1 //GuiScrollPanel((Rectangle){ 325, 225, 225, 125 }, "SAMPLE TEXT"); if (GuiDropdownBox((Rectangle){ 25, 75, 125, 30 }, DropdownBox000TextList, 3, &DropdownBox001Active, dropDown001EditMode)) dropDown001EditMode = !dropDown001EditMode; diff --git a/src/raygui.h b/src/raygui.h index 4cadc80..87bd27e 100644 --- a/src/raygui.h +++ b/src/raygui.h @@ -2833,10 +2833,14 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int * GuiControlState state = guiState; - static int startIndex = 0; - int endIndex = count; + static int startIndex = 0; + int visibleElements = bounds.height/(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]); + int endIndex = startIndex + visibleElements; bool pressed = false; int auxActive = *active; + float barHeight = bounds.height; + float minBarHeight = 10; + // Update control //-------------------------------------------------------------------- @@ -2851,40 +2855,42 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int * // Change active with keys if (IsKeyPressed(KEY_UP)) { - if (auxActive > 0) auxActive--; + if (auxActive > 0) + { + auxActive--; + if (auxActive < startIndex) startIndex--; + } } else if(IsKeyPressed(KEY_DOWN)) { - if (auxActive < count - 1) auxActive++; - } - - // REVISAR ------------------------------------------------------------------------------------ - /*for(int i = 0; i < count; i++) - { - int textWidth = MeasureText(text[i], style[DEFAULT_TEXT_SIZE]); - - if (bounds.width - style[LISTVIEW_BAR_WIDTH] - 2*style[LISTVIEW_ELEMENTS_PADDING] - LISTVIEW_LINE_THICK < textWidth) + if (auxActive < count - 1) { - bounds.width = textWidth + style[LISTVIEW_BAR_WIDTH] + 2*style[LISTVIEW_ELEMENTS_PADDING] + LISTVIEW_LINE_THICK; - } - }*/ - } - endIndex = bounds.height/(style[LISTVIEW_ELEMENTS_HEIGHT] + style[LISTVIEW_ELEMENTS_PADDING]); + auxActive++; + if (auxActive >= endIndex) startIndex++; + } + } - if (endIndex < count) - { - startIndex -= GetMouseWheelMove(); - if (startIndex < 0) startIndex = 0; - - endIndex += startIndex; + - if (startIndex > (count - (endIndex - startIndex))) + int wheel = GetMouseWheelMove(); + + if (wheel < 0 && endIndex < count) { - startIndex = count - (endIndex - startIndex); + startIndex -= wheel; + } + else if(wheel > 0 && startIndex > 0) + { + startIndex -= wheel; + if (startIndex < 0) startIndex = 0; + else if (startIndex > (count - (endIndex - startIndex))) + { + startIndex = count - (endIndex - startIndex); + } } - } - - 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; @@ -2901,79 +2907,72 @@ RAYGUIDEF bool GuiListView(Rectangle bounds, const char **text, int count, int * if (!CheckCollisionPointRec(mousePoint, bounds) && IsMouseButtonPressed(0)) pressed = true; } } + + // 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. + float percentVisible = (endIndex - startIndex)*100/count; + barHeight *= percentVisible/100; + if (barHeight < minBarHeight) barHeight = minBarHeight; + else if(barHeight > bounds.height) barHeight = bounds.height; + // Posición Y a la que dibujamos la barra. + float barPosY = bounds.y + startIndex*((bounds.height - barHeight)/(count - (endIndex - startIndex))); //-------------------------------------------------------------------- // Draw control //-------------------------------------------------------------------- if (editMode) { -<<<<<<< HEAD for (int i = startIndex; i < endIndex; i++) { if (i == auxActive) { - 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) == 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 { - 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) 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; } -======= - if (i == active) - { - 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) active = -1; - } - else - { - 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) active = i; ->>>>>>> 296bc577f5898d4a9f01c1eab190ac92384687f1 } } 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) auxActive = i; + 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; } - 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)); - // Revisar esto... - int barHeight = bounds.height / (count - (endIndex - startIndex)); // 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); - } + // 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) { case NORMAL: case LOCKED: { - if (barHeight >= bounds.height) DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[LISTVIEW_BASE_COLOR_DISABLED]), guiAlpha)); - else DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_NORMAL]), guiAlpha)); - + 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)); } break; case FOCUSED: { - if (barHeight >= bounds.height) DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[LISTVIEW_BASE_COLOR_DISABLED]), guiAlpha)); - else DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_FOCUSED]), guiAlpha)); + 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)); } break; case PRESSED: { - if (barHeight >= bounds.height) DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[LISTVIEW_BASE_COLOR_DISABLED]), guiAlpha)); - else DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[SLIDERBAR_BASE_COLOR_PRESSED]), guiAlpha)); + 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)); } break; case DISABLED: { - DrawRectangle(bounds.x, startIndex*style[LISTVIEW_ELEMENTS_HEIGHT] + bounds.y, style[LISTVIEW_BAR_WIDTH], barHeight, Fade(GetColor(style[LISTVIEW_BASE_COLOR_DISABLED]), guiAlpha)); + 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)); } break; default: break;