├── .gitignore ├── Source ├── MainComponent.h ├── MainComponent.cpp ├── MyListComponent.cpp ├── ReorderFunctions.h ├── DraggableListBox.h ├── DraggableListBox.cpp ├── MyListComponent.h └── Main.cpp ├── LICENSE ├── README.md └── ListBoxReorder.jucer /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Builds/ 3 | JuceLibraryCode/ 4 | -------------------------------------------------------------------------------- /Source/MainComponent.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "JuceHeader.h" 3 | #include "MyListComponent.h" 4 | 5 | class MainContentComponent : public Component 6 | { 7 | public: 8 | MainContentComponent(); 9 | virtual ~MainContentComponent() = default; 10 | 11 | void paint (Graphics&) override; 12 | void resized() override; 13 | 14 | private: 15 | TextButton addBtn; 16 | 17 | MyListBoxItemData itemData; 18 | MyListBoxModel listBoxModel; 19 | DraggableListBox listBox; 20 | 21 | JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent) 22 | }; 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Shane Dunne 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Source/MainComponent.cpp: -------------------------------------------------------------------------------- 1 | #include "MainComponent.h" 2 | 3 | MainContentComponent::MainContentComponent() 4 | : listBoxModel(listBox, itemData) 5 | { 6 | itemData.modelData.add(new String("Item 1")); 7 | itemData.modelData.add(new String("Item 2")); 8 | itemData.modelData.add(new String("Item 3")); 9 | 10 | addBtn.setButtonText("Add Item..."); 11 | addBtn.onClick = [this]() 12 | { 13 | itemData.modelData.add(new String("Item " + String(1 + itemData.getNumItems()))); 14 | listBox.updateContent(); 15 | }; 16 | addAndMakeVisible(addBtn); 17 | 18 | listBox.setModel(&listBoxModel); 19 | listBox.setRowHeight(40); 20 | addAndMakeVisible(listBox); 21 | setSize (600, 400); 22 | } 23 | 24 | void MainContentComponent::paint (Graphics& g) 25 | { 26 | g.fillAll(getLookAndFeel().findColour(ResizableWindow::backgroundColourId)); 27 | } 28 | 29 | void MainContentComponent::resized() 30 | { 31 | auto area = getLocalBounds().reduced(20); 32 | auto row = area.removeFromTop(24); 33 | addBtn.setBounds(row.removeFromRight(100)); 34 | 35 | area.removeFromTop(6); 36 | listBox.setBounds(area); 37 | } 38 | -------------------------------------------------------------------------------- /Source/MyListComponent.cpp: -------------------------------------------------------------------------------- 1 | #include "MyListComponent.h" 2 | 3 | MyListComponent::MyListComponent(DraggableListBox& lb, MyListBoxItemData& data, int rn) 4 | : DraggableListBoxItem(lb, data, rn) 5 | { 6 | actionBtn.setButtonText("Action"); 7 | actionBtn.onClick = [this]() 8 | { 9 | ((MyListBoxItemData&)modelData).doItemAction(rowNum); 10 | }; 11 | addAndMakeVisible(actionBtn); 12 | 13 | deleteBtn.setButtonText("Delete"); 14 | deleteBtn.onClick = [this]() 15 | { 16 | modelData.deleteItem(rowNum); 17 | listBox.updateContent(); 18 | }; 19 | addAndMakeVisible(deleteBtn); 20 | } 21 | 22 | MyListComponent::~MyListComponent() 23 | { 24 | 25 | } 26 | 27 | void MyListComponent::paint (Graphics& g) 28 | { 29 | modelData.paintContents(rowNum, g, dataArea); 30 | DraggableListBoxItem::paint(g); 31 | } 32 | 33 | void MyListComponent::resized() 34 | { 35 | dataArea = getLocalBounds(); 36 | actionBtn.setBounds(dataArea.removeFromLeft(70).withSizeKeepingCentre(56, 24)); 37 | deleteBtn.setBounds(dataArea.removeFromRight(70).withSizeKeepingCentre(56, 24)); 38 | } 39 | 40 | 41 | Component* MyListBoxModel::refreshComponentForRow(int rowNumber, 42 | bool /*isRowSelected*/, 43 | Component *existingComponentToUpdate) 44 | { 45 | std::unique_ptr item(dynamic_cast(existingComponentToUpdate)); 46 | if (isPositiveAndBelow(rowNumber, modelData.getNumItems())) 47 | { 48 | item = std::make_unique(listBox, (MyListBoxItemData&)modelData, rowNumber); 49 | } 50 | return item.release(); 51 | } 52 | -------------------------------------------------------------------------------- /Source/ReorderFunctions.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "JuceHeader.h" 3 | 4 | template 5 | void MoveItemBefore(C& container, size_t currentIndex, size_t indexOfItemToPlaceBefore) 6 | { 7 | if (currentIndex == indexOfItemToPlaceBefore) return; 8 | 9 | jassert(isPositiveAndBelow((int)currentIndex, (int)container.size())); 10 | jassert(isPositiveAndBelow((int)indexOfItemToPlaceBefore, (int)container.size())); 11 | 12 | if (currentIndex < indexOfItemToPlaceBefore) 13 | { 14 | std::rotate(container.begin() + currentIndex, 15 | container.begin() + currentIndex + 1, 16 | container.begin() + indexOfItemToPlaceBefore); 17 | } 18 | else 19 | { 20 | std::rotate(container.begin() + indexOfItemToPlaceBefore, 21 | container.begin() + currentIndex, 22 | container.begin() + currentIndex + 1); 23 | } 24 | } 25 | 26 | template 27 | void MoveItemAfter(C& container, size_t currentIndex, size_t indexOfItemToPlaceAfter) 28 | { 29 | if (currentIndex == indexOfItemToPlaceAfter) return; 30 | 31 | jassert(isPositiveAndBelow((int)currentIndex, (int)container.size())); 32 | jassert(isPositiveAndBelow((int)indexOfItemToPlaceAfter, (int)container.size())); 33 | 34 | if (currentIndex < indexOfItemToPlaceAfter) 35 | { 36 | std::rotate(container.begin() + currentIndex, 37 | container.begin() + currentIndex + 1, 38 | container.begin() + indexOfItemToPlaceAfter + 1); 39 | } 40 | else 41 | { 42 | std::rotate(container.begin() + indexOfItemToPlaceAfter + 1, 43 | container.begin() + currentIndex, 44 | container.begin() + currentIndex + 1); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # juce-draggableListBox 2 | In July 2018, Charles Schiermeyer (aka *matkatmusic*) submitted a [query to the JUCE Forum](https://forum.juce.com/t/listbox-drag-to-reorder-solved/28477), asking for help implementing drag-to-reorder functionality in the JUCE *ListBox* class. Shortly afterward, the forum post was marked "Solved", and Charles was kind enough to provide a [full example implementation hosted on BitBucket](https://bitbucket.org/MatkatMusic/listboxreorder/). 3 | 4 | This is a revised version of Charles's code, in which I have separated the app-specific code from the more generic code, expanded support for a custom list-element Component class, and added support for list-management operations such as deleting items and adding new ones. (See the commit history for the refactoring steps involved.) 5 | 6 | To implement a JUCE list-box with drag-to-reorder capability: 7 | 1. Include *DraggableListBox.h* and *DraggableListBox.cpp* in your JUCE project. 8 | 2. Define your own app-specific class for your actual list data, which inherits from *DraggableListBoxItemData*, ensuring that you override the following member functions: 9 | - *getNumItems()* should return the number of list elements. 10 | - *paintContents()* is a callback to render one specific list item. 11 | - *moveBefore()* and *moveAfter()* are calbacks which re-order the list, moving the dragged item either before or after the item it was dropped onto. 12 | 3. Define a custom list-item Component which inherits from *DraggableListBoxItem*. This may contain any sub-components you need, e.g., the example version includes a "Delete" button to trigger deletion of a list item, and an "Action" button to trigger some action on a single item. (The corresponding *doItemAction()* function is implemented in the app-specific item data class.) 13 | 4. Define a custom *model* class which inherits from *DraggableListBoxModel*, which overrides *refreshComponentForRow()* to ensure that your new custom list-item Component class is used. 14 | 5. Declare your list-box widget using class *DraggableListBox*, plus two companion objects: 15 | - one object of the app-specific data class you defined at step 2. 16 | - one object of the customized model class you defined at step 4. 17 | 6. Initialize your model object with references to your *DraggableListBox* and your app-specific data object. 18 | 7. Set your *DraggableListBox*'s model to be your model object (by calling the former's *setModel()* member). 19 | 20 | In this example, all custom list-related classes are defined in *MyListComponent.h/.cpp*, and the surrounding GUI is defined in *MainContentComponent.h/.cpp*. (*Main.cpp* is a Projucer-generated file and is completely generic.) 21 | 22 | **Note** I have used a *juce::OwnedArray* as my app-specific data container. If you prefer to use a *std::vector* (or any of several other container classes in the C++ STL), you can use the function templates found in *ReorderFunctions.h* (from Charles's original code, but not used in mine) to implement the *moveBefore()/moveAfter()* operations. 23 | -------------------------------------------------------------------------------- /Source/DraggableListBox.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "JuceHeader.h" 3 | 4 | // Your item-data container must inherit from this, and override at least the first 5 | // four member functions. 6 | struct DraggableListBoxItemData 7 | { 8 | virtual ~DraggableListBoxItemData() = 0; 9 | 10 | virtual int getNumItems() = 0; 11 | virtual void paintContents(int, Graphics&, Rectangle) = 0; 12 | 13 | virtual void moveBefore(int indexOfItemToMove, int indexOfItemToPlaceBefore) = 0; 14 | virtual void moveAfter(int indexOfItemToMove, int indexOfItemToPlaceAfter) = 0; 15 | 16 | // If you need a dynamic list, override these functions as well. 17 | virtual void deleteItem(int /*indexOfItemToDelete*/) {}; 18 | virtual void addItemAtEnd() {}; 19 | }; 20 | 21 | // DraggableListBox is basically just a ListBox, that inherits from DragAndDropContainer. 22 | // Declare your list box using this type. 23 | class DraggableListBox : public ListBox, public DragAndDropContainer 24 | { 25 | }; 26 | 27 | // Everything below this point should be generic. 28 | class DraggableListBoxItem : public Component, public DragAndDropTarget 29 | { 30 | public: 31 | DraggableListBoxItem(DraggableListBox& lb, DraggableListBoxItemData& data, int rn) 32 | : rowNum(rn), modelData(data), listBox(lb) {} 33 | 34 | // Component 35 | void paint(Graphics& g) override; 36 | void mouseEnter(const MouseEvent&) override; 37 | void mouseExit(const MouseEvent&) override; 38 | void mouseDrag(const MouseEvent&) override; 39 | 40 | // DragAndDropTarget 41 | bool isInterestedInDragSource(const SourceDetails&) override { return true; } 42 | void itemDragEnter(const SourceDetails&) override; 43 | void itemDragMove(const SourceDetails&) override; 44 | void itemDragExit(const SourceDetails&) override; 45 | void itemDropped(const SourceDetails&) override; 46 | bool shouldDrawDragImageWhenOver() override { return true; } 47 | 48 | // DraggableListBoxItem 49 | protected: 50 | void updateInsertLines(const SourceDetails &dragSourceDetails); 51 | void hideInsertLines(); 52 | 53 | int rowNum; 54 | DraggableListBoxItemData& modelData; 55 | DraggableListBox& listBox; 56 | 57 | MouseCursor savedCursor; 58 | bool insertAfter = false; 59 | bool insertBefore = false; 60 | }; 61 | 62 | class DraggableListBoxModel : public ListBoxModel 63 | { 64 | public: 65 | DraggableListBoxModel(DraggableListBox& lb, DraggableListBoxItemData& md) 66 | : listBox(lb), modelData(md) {} 67 | 68 | int getNumRows() override { return modelData.getNumItems(); } 69 | void paintListBoxItem(int, Graphics &, int, int, bool) override {} 70 | 71 | Component* refreshComponentForRow(int, bool, Component*) override; 72 | 73 | protected: 74 | // Draggable model has a reference to its owner ListBox, so it can tell it to update after DnD. 75 | DraggableListBox &listBox; 76 | 77 | // It also has a reference to the model data, which it uses to get the current items count, 78 | // and which it passes to the DraggableListBoxItem objects it creates/updates. 79 | DraggableListBoxItemData& modelData; 80 | }; 81 | -------------------------------------------------------------------------------- /Source/DraggableListBox.cpp: -------------------------------------------------------------------------------- 1 | #include "DraggableListBox.h" 2 | 3 | DraggableListBoxItemData::~DraggableListBoxItemData() {}; 4 | 5 | void DraggableListBoxItem::paint(Graphics& g) 6 | { 7 | modelData.paintContents(rowNum, g, getLocalBounds()); 8 | 9 | if (insertAfter) 10 | { 11 | g.setColour(Colours::red); 12 | g.fillRect(0, getHeight() - 3, getWidth(), 3); 13 | } 14 | else if (insertBefore) 15 | { 16 | g.setColour(Colours::red); 17 | g.fillRect(0, 0, getWidth(), 3); 18 | } 19 | } 20 | 21 | void DraggableListBoxItem::mouseEnter(const MouseEvent&) 22 | { 23 | savedCursor = getMouseCursor(); 24 | setMouseCursor(MouseCursor::DraggingHandCursor); 25 | } 26 | 27 | void DraggableListBoxItem::mouseExit(const MouseEvent&) 28 | { 29 | setMouseCursor(savedCursor); 30 | } 31 | 32 | void DraggableListBoxItem::mouseDrag(const MouseEvent&) 33 | { 34 | if (DragAndDropContainer* container = DragAndDropContainer::findParentDragContainerFor(this)) 35 | { 36 | container->startDragging("DraggableListBoxItem", this); 37 | } 38 | } 39 | 40 | void DraggableListBoxItem::updateInsertLines(const SourceDetails &dragSourceDetails) 41 | { 42 | if (dragSourceDetails.localPosition.y < getHeight() / 2) 43 | { 44 | insertBefore = true; 45 | insertAfter = false; 46 | } 47 | else 48 | { 49 | insertAfter = true; 50 | insertBefore = false; 51 | } 52 | repaint(); 53 | } 54 | 55 | void DraggableListBoxItem::hideInsertLines() 56 | { 57 | insertBefore = false; 58 | insertAfter = false; 59 | } 60 | 61 | void DraggableListBoxItem::itemDragEnter(const SourceDetails& dragSourceDetails) 62 | { 63 | updateInsertLines(dragSourceDetails); 64 | } 65 | 66 | void DraggableListBoxItem::itemDragMove(const SourceDetails& dragSourceDetails) 67 | { 68 | updateInsertLines(dragSourceDetails); 69 | } 70 | 71 | void DraggableListBoxItem::itemDragExit(const SourceDetails& /*dragSourceDetails*/) 72 | { 73 | hideInsertLines(); 74 | } 75 | 76 | void DraggableListBoxItem::itemDropped(const juce::DragAndDropTarget::SourceDetails &dragSourceDetails) 77 | { 78 | if (DraggableListBoxItem* item = dynamic_cast(dragSourceDetails.sourceComponent.get())) 79 | { 80 | if (dragSourceDetails.localPosition.y < getHeight() / 2) 81 | modelData.moveBefore(item->rowNum, rowNum); 82 | else 83 | modelData.moveAfter(item->rowNum, rowNum); 84 | listBox.updateContent(); 85 | } 86 | hideInsertLines(); 87 | } 88 | 89 | Component* DraggableListBoxModel::refreshComponentForRow(int rowNumber, 90 | bool /*isRowSelected*/, 91 | Component *existingComponentToUpdate) 92 | { 93 | std::unique_ptr item(dynamic_cast(existingComponentToUpdate)); 94 | if (isPositiveAndBelow(rowNumber, modelData.getNumItems())) 95 | { 96 | item = std::make_unique(listBox, modelData, rowNumber); 97 | } 98 | return item.release(); 99 | } 100 | -------------------------------------------------------------------------------- /Source/MyListComponent.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | #include "DraggableListBox.h" 3 | 4 | // Application-specific data container 5 | struct MyListBoxItemData : public DraggableListBoxItemData 6 | { 7 | OwnedArray modelData; 8 | 9 | int getNumItems() override 10 | { 11 | return int(modelData.size()); 12 | } 13 | 14 | void deleteItem(int indexOfItemToDelete) override 15 | { 16 | modelData.remove(indexOfItemToDelete); 17 | } 18 | 19 | void addItemAtEnd() override 20 | { 21 | modelData.add(new String("Yahoo")); 22 | } 23 | 24 | void paintContents(int rowNum, Graphics& g, Rectangle bounds) override 25 | { 26 | g.fillAll(Colours::lightgrey); 27 | g.setColour(Colours::black); 28 | g.drawRect(bounds); 29 | g.drawText(*modelData[rowNum], bounds, Justification::centred); 30 | } 31 | 32 | void moveBefore(int indexOfItemToMove, int indexOfItemToPlaceBefore) override 33 | { 34 | DBG("Move item " + String(indexOfItemToMove) + " before item " + String(indexOfItemToPlaceBefore)); 35 | if (indexOfItemToMove <= indexOfItemToPlaceBefore) 36 | modelData.move(indexOfItemToMove, indexOfItemToPlaceBefore - 1); 37 | else 38 | modelData.move(indexOfItemToMove, indexOfItemToPlaceBefore); 39 | printItemsInOrder(); 40 | } 41 | 42 | void moveAfter(int indexOfItemToMove, int indexOfItemToPlaceAfter) override 43 | { 44 | DBG("Move item " + String(indexOfItemToMove) + " after item " + String(indexOfItemToPlaceAfter)); 45 | if (indexOfItemToMove <= indexOfItemToPlaceAfter) 46 | modelData.move(indexOfItemToMove, indexOfItemToPlaceAfter); 47 | else 48 | modelData.move(indexOfItemToMove, indexOfItemToPlaceAfter + 1); 49 | printItemsInOrder(); 50 | } 51 | 52 | // Not required, just something I'm adding for confirmation of correct order after DnD. 53 | // This is an example of an operation on the entire list. 54 | void printItemsInOrder() 55 | { 56 | String msg = "\nitems: "; 57 | for (auto item : modelData) msg << *item << " "; 58 | DBG(msg); 59 | } 60 | 61 | // This is an example of an operation on a single list item. 62 | void doItemAction(int itemIndex) 63 | { 64 | DBG(*modelData[itemIndex]); 65 | } 66 | }; 67 | 68 | // Custom list-item Component (which includes item-delete button) 69 | class MyListComponent : public DraggableListBoxItem 70 | { 71 | public: 72 | MyListComponent(DraggableListBox& lb, MyListBoxItemData& data, int rn); 73 | ~MyListComponent(); 74 | 75 | void paint(Graphics&) override; 76 | void resized() override; 77 | 78 | protected: 79 | Rectangle dataArea; 80 | TextButton actionBtn, deleteBtn; 81 | 82 | private: 83 | JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(MyListComponent) 84 | }; 85 | 86 | // Customized DraggableListBoxModel overrides refreshComponentForRow() to ensure that every 87 | // list-item Component is a MyListComponent. 88 | class MyListBoxModel : public DraggableListBoxModel 89 | { 90 | public: 91 | MyListBoxModel(DraggableListBox& lb, DraggableListBoxItemData& md) 92 | : DraggableListBoxModel(lb, md) {} 93 | 94 | Component* refreshComponentForRow(int, bool, Component*) override; 95 | }; 96 | -------------------------------------------------------------------------------- /Source/Main.cpp: -------------------------------------------------------------------------------- 1 | #include "JuceHeader.h" 2 | #include "MainComponent.h" 3 | 4 | class ListBoxReorderApplication : public JUCEApplication 5 | { 6 | public: 7 | //============================================================================== 8 | ListBoxReorderApplication() {} 9 | 10 | const String getApplicationName() override { return ProjectInfo::projectName; } 11 | const String getApplicationVersion() override { return ProjectInfo::versionString; } 12 | bool moreThanOneInstanceAllowed() override { return true; } 13 | 14 | //============================================================================== 15 | void initialise (const String& /*commandLine*/) override 16 | { 17 | // This method is where you should put your application's initialisation code.. 18 | 19 | mainWindow = std::make_unique(getApplicationName()); 20 | } 21 | 22 | void shutdown() override 23 | { 24 | // Add your application's shutdown code here.. 25 | 26 | mainWindow = nullptr; // (deletes our window) 27 | } 28 | 29 | //============================================================================== 30 | void systemRequestedQuit() override 31 | { 32 | // This is called when the app is being asked to quit: you can ignore this 33 | // request and let the app carry on running, or call quit() to allow the app to close. 34 | quit(); 35 | } 36 | 37 | void anotherInstanceStarted (const String& /*commandLine*/) override 38 | { 39 | // When another instance of the app is launched while this one is running, 40 | // this method is invoked, and the commandLine parameter tells you what 41 | // the other instance's command-line arguments were. 42 | } 43 | 44 | //============================================================================== 45 | /* 46 | This class implements the desktop window that contains an instance of 47 | our MainContentComponent class. 48 | */ 49 | class MainWindow : public DocumentWindow 50 | { 51 | public: 52 | MainWindow (String name) : DocumentWindow (name, 53 | Colours::lightgrey, 54 | DocumentWindow::allButtons) 55 | { 56 | setUsingNativeTitleBar (true); 57 | setContentOwned (new MainContentComponent(), true); 58 | 59 | centreWithSize (getWidth(), getHeight()); 60 | setVisible (true); 61 | } 62 | 63 | void closeButtonPressed() override 64 | { 65 | // This is called when the user tries to close this window. Here, we'll just 66 | // ask the app to quit when this happens, but you can change this to do 67 | // whatever you need. 68 | JUCEApplication::getInstance()->systemRequestedQuit(); 69 | } 70 | 71 | /* Note: Be careful if you override any DocumentWindow methods - the base 72 | class uses a lot of them, so by overriding you might break its functionality. 73 | It's best to do all your work in your content component instead, but if 74 | you really have to override any DocumentWindow methods, make sure your 75 | subclass also calls the superclass's method. 76 | */ 77 | 78 | private: 79 | JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainWindow) 80 | }; 81 | 82 | private: 83 | std::unique_ptr mainWindow; 84 | }; 85 | 86 | //============================================================================== 87 | // This macro generates the main() routine that launches the app. 88 | START_JUCE_APPLICATION (ListBoxReorderApplication) 89 | -------------------------------------------------------------------------------- /ListBoxReorder.jucer: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | --------------------------------------------------------------------------------