AdiAddons / AdiBags

WoW Addon — Adirelle's bag addon.
https://wowace.com/projects/adibags
GNU General Public License v3.0
157 stars 112 forks source link

[Design Plan] Layout Overhaul #675

Closed Cidan closed 9 months ago

Cidan commented 2 years ago

Hello everyone!

One of the next major projects we want to tackle is an overhaul of how the section and item layout engine works. Specifically, we want to address the non-deterministic way in which sections are laid out. Currently, the UX feels random when a player opens a bag: you never really know what order your items are going to be in, or where the sections are going to be. This can lead to a pretty awkward experience, in particular since most human beings prefer consistency in general.

My initial proposal is:

We'd love to hear from the community on what features would be important to you in a completely redone layout engine. A few things to keep in mind:

We'd like to target a beta layout engine by Dragonflight release, so submit your ideas now!

Thanks!

ZINK-ZINK commented 2 years ago

Oh heck yea! This even goes well beyond my "stretch-goals-wish-list".

If I'm understanding correctly, and pardon my terminology but Weakauras are the closet comparison I understand: you want to create a framework housing for Dynamic Groups bag items? Like the entire bag is the "house" that all the user-created Dynamic Groups will settle themselves into?

(I've recently been learning/making a ton Dynamic Group Weakauras, but they really do sound very similar. That is a very good thing if I am correct, cause Dynamic Group WA's are freakin awesome and so easy to build(like auto-sorting LEGO bricks))

edit: I have DragonFlight Alpha if there is anything I can do to help you test the Beta when the time comes.

Perseforis commented 2 years ago

Howdy! Adding another 'heck yeah' to this idea!

I was just in contact separately with the thread author Cidan about my own desires to have more control over the ordering of custom groupings in AdiBags, and I'm super stoked to see that this is already under consideration via a broader UI overhaul.

AdiBags is hugely flexible, and recently I have been writing my own custom plugins to manage item groupings. The prime issue I have had in doing so, is I have been unable to then manage sorting of these groups within the AdiBags UI - my approach is that I want to have a fairly large number of groupings, but to then have good control of how those groupings are represented in the UI.

Currently this is not readily achievable, however the proposed UI enhancements seem they would resolve this, and add futher functionality also.

I realise that item filtering is not a driving consideration in this project, however it is important to consider how item filtering might interact with layout nevertheless.

My thoughts on what will work well:

Terminology

This will just be helpful for discussion/development or at least for others to understand what I mean by the temrs I use.

My understanding of AdiBags behaviour may not be current, being based of this post which is hardly new!

In it Adirelle refers to AdiBags sorting being based of Auction House first and second level groupings, which they refer to as transalting to category and section names. I will use this terminology to refer to first level (category) and second level (section) sorting.

Where this currently breaks down is that by creating custom groups, the sorting match to AH category and section names is broken, leading to a layout which shifts and does not 'reduce cognitive load' as much as we would like (love this term!).

High-Level of 'what will work best' for item grouping

I think the approach of having two tiers to sorting is an excellent one given the number of groupings that are and will likely continue to operate for many users. A single-tier system would become quite difficult to manage - imagine trying to manage default behaviour for scores and potentially hundreds of groupings, instead of focussing instead on perhaps 10 categories and then a highly flexible section-based system within that.

There are other ways to achieve this flexibility, but a good early conceptualisation of how grouping and sorting will work at the high level is a good place to start design - at least I think.

This may be entirely in-line with the suggested column-based sorting described in the issue opening post.

Customisability

I'm pro-customisability where it can be readily accommodated within the code. If a user wants to have 20 sections, or 30 sections to control layout exactly how they want, it would be preferable to accommodate this.

Having two-tiers to sorting will help effectively manage customisability - a concern I have is that my preferred approach to bag management is based on having many groups, which could make management of sorting a chore.

Column Layout

I'm a fan of the idea to have a column-number-based UI - where a user will define max-columns and items-per-row which will combine to manage bag width.

The current behaviour is for UI frame size to be controlled via items-per-row and then max-bag-height, effectively making width the main flexible element in frame size. I favour a move towards what has been suggested here, which is for width to be more fixed, and for height to be the main flexible element.

If item groups (or categories) can be effectively 'allocated' to always be in a particular column, which seems suggested but not explicit, this would also provide for great accessibility of item groups. This may cause issues if column numbers can also be configured - what happens if I've sorted group X to column 4, but then reduce columns to only three? But I'm thinking ahead to potential issues, rather than being high level here :)

Default Behaviour

AH-based sections/categories as the default item grouping behaviour would provide a good default starting point.

This has the advantage of being compatible with the way AdiBags operates, and being readily definable via external means.

This also provides 7 base categories as a first point of control for UI display and many sections within each for further control.

Drag and Drop Sorting

This would be excellent if possible, but I also recognise that drag-and-drop may be significantly harder to implement than an alternate user-defined non-GUI mechanism. I'm all for this, but I really have no idea how much work this involves.

A simpler solution, which is only modestly less desirable to me, is to simply have sorting managed in a similar fashion to the way filters currently work in AdiBags via a 0-100 priority number. With sections and categories then independently sorting, this provides massive flexibility in what may be an easier-to-code solution.

In any case, I suspect that a drag-and-drop system would need to register priortity values in any case, just making this in fact an additional GUI -based element to an underlying system similar to what I've described.

If drag-and-drop is enabled, the suggested 'ghost' sections makes perfect sense, as does the suggestion for an option for empty sections to always be visible.

New v Old layout system

I agree with dropping the old layout system in favour of a new one and do not favour having two options here. Maintaining both would not only simply be more code to manage, but also unnecessarily bloats the addon (not that it's particularly taxing, but good coding is good coding).

At worst, this might result in a project fork - I hope not however!

They're my initial thoughts - thanks for starting this conversation!

Cidan commented 2 years ago

Thanks for the feedback! I wanted to share a small bit of what we have working so far. Note that this is just a prototype that showcases the rough idea of what we're thinking here.

GridDemo

A few things to note:

You can see here we start with three sections in a column. We can then take a section and drag it to the edge where a "pop-up" frame appears to let you know you can make a new column by dropping it in that area. When you do so, a new column appears to the right, with your dragged frame appearing in that column. You'll notice I'm able to drag the frame in-between columns as well. There are constraints in place where you can't have columns on the left exist without cells (the drag will fail). Once a column has no more sections, it's automatically deleted.

The idea here is to give users an intuitive drag and drop system for sorting sections, without having to dive into menus and select sliders. A few things to note:

I'll keep folks updated we progress. For the next technical demo, I'm going to actually implement a live bag with items and begin full integration combined with updated graphics. Stay tuned!

ZINK-ZINK commented 2 years ago

First off, because I want to be sure I am clear about this: That GIF looks amazing and I love the overall concept you are going for, I don't want my notes to wrongly imply that I am unhappy with this update. Now for my thoughts (where I'm probably going to inadvertently tear apart half your ideas)...

My immediate reaction literally: "HOLY SNAPPING BATMAN! How'd they get the snapping to work so smoothly and accurately?!" Snapping in Dominos isn't nearly as smooth and snapping in Weakauras is just a 'vague suggestion' (I'm pretty sure because WAs include Padding in the "snap space") lol. So however you wrote the snapping/positioning Code apparently you did a great job since I thought it was impossible for WoW UI to snap that well. IMO try to make sure your preserve that "tightness of Code" as you move towards Release, but don't sacrifice features to keep it running fast(QoL/'this would be nice if convenient' tier).

COLORS: Please keep these High Contrast colors as a "Theme/Profile" or as a special Debug/Dev Mode option. I have extremely poor vision and I go through a lot of trouble to force my UI to use bright colors like this. For example here is my Health Bar WA that I spent weeks making (and years before that looking for a way to create it) (If external links aren't kosher just edit out the link, I don't know the exact Rules) https://wago.io/3Jr0ESnuc

COLUMNS: Why not just go "Full Excel" and have full blown col/row sliders in the options? That might be a bit overkill/overwhelming, but IMO at the very least let us 'cut the bags in half'. Think the last boss in Tazavesh Streets: you know how he cast those Dividing Walls during the fight? As soon as I saw those hugely long columns I thought: "hmm that big tall bag sure looks like it would feel better if there was a horizontal line in the center dividing it in half, so that it wasn't just one massive box". {EDIT CAUSE I FELT UNCLEAR ON RE-READ: The Grey Box should stay "in one piece", but just have the option to add horizontal Dividing Wall(s) that server to "break up" the super long Red Boxes. IMO it is extremely important Adibags remains a singular, connected "unit" whith no Border-breaks on the final outside border; but once inside the "adibags Borders" I want moderate control to create "cubbies". Like personally I would want 2 horizontal dividers at 33% and 66%, so that I could have a [GEAR] [ITEMS] and [SPECIAL] "cubbies". It would make it far easier for me to locate specific things in my bags.}

["I haven't decided how to determine how wide a column should be (how many items per row, per section) -- this might still be a config option in a menu, we'll see"]

If this isn't a User-Defined Option I will riot (jk jk... unless?). But really, absolutely do not hard lock "Row/Col Wrapping" from the User. That would make me just use the Legacy Adibags forever. But I might be misunderstanding what you meant since it sounds like crazy-talk to me and it makes no sense why you would restrict the User like I am imagining.

If you're just unsure how to implement the Options cleanly, look near the top of the (Display tab) WA window of any Dynamic Grouped WA. Setting the Dynamic Group to Grid and adjusting the Wrap count is exactly what you mean, at least if I am understanding you correctly. Here is one of my WAs that utilizes those options if it helps to have a throw-away WA you can dissemble without messing up your personal UI. (Again mb if any external links are not ok, just edit it out there's just this link and the one in COLORS) https://wago.io/o1i1ayU3-

I think that was everything that immediately came to mind as I was reading the update post. Thanks for the previews! And Thanks again for making Adibags in the first place!

Cidan commented 2 years ago

How'd they get the snapping to work so smoothly and accurately?!"

Pretty simple, really. Wait until you see the animations I'll add. :p

COLORS: ... I have extremely poor vision ...

I'm very sorry to hear that, and all the more reason I really want to get Masque support implemented. While I will not be leaving this debug mode in, I'll work towards getting proper Masque support implemented so that we can ensure accessibility standards are met to help people in your situation enjoy the game the way they should.

COLUMNS: Why not just go "Full Excel" and have full blown col/row sliders in the options?

I intentionally will not do this, because it goes against the "one simple design" philosophy of AdiBags. You'll be able to do full blown rows and columns, just not by dragging sliders or making it feel like a Microsoft product from the 90's.

But really, absolutely do not hard lock "Row/Col Wrapping" from the User.

Don't worry, I'm not. This will be fully configurable, I just want to make sure it's a very smooth and clean experience, that is intuitive and easy to use.

Thanks again for making Adibags in the first place!

AdiBags isn't mine -- I used to be very involved in the addon community during Vanilla to Wrath, and was involved in helping out here or there with AdiBags as well. I've since picked WoW back up now that my life is a bit more in order (had a kid, kid is in school now, job has settled down, etc) that I can devote some free time to this. I don't get to program for my day job at all really as I'm in management/leadership, so this is a nice way for me to unwind believe it or not!

Stay tuned -- I started working on full integration into the bag frame today. It's messy right now, but there should be another update in a few days as I do a total rewrite of the rendering engine.

Thanks for the feedback!

ZINK-ZINK commented 2 years ago

I just added an edit under columns as you were responding, but I haven't read your response yet. I just didn't want the edit to not be noticed.

ZINK-ZINK commented 2 years ago

just not by dragging sliders or making it feel like a Microsoft product from the 90's.

I feel PERSONALLY attacked LMAO. STOP SEEING RIGHT THROUGH ME LIKE THAT! :P

edit: ok I read the response now. Sounds good. I've never used Masque cause I thought it was just for reskinning buttons, but if I understand correctly and basically I'll be able to change Appearance via "Plugins" then that's perfectly fine. I just REALLY like the Debug mode from the GIF, it's just so extremely crystal clear visually. I get really passionate about the subtleties of elegant aesthetics.

ZINK-ZINK commented 2 years ago

I just thought of another feature that would be cool to consider for the update, not sure if this should go here or a new thread. This may just be begging to break the code, but it would be really cool to individually choose whether multiple stacks of the same items take up a single slot or all the real slots, visually.

Like how currently I can choose to have all my stacks of food or potions etc display as a single square in the bags, even though they're really taking up a few bag slots. Even though I always thought the feature was really cool I never actually use it because then I can't find certain items in my bags. But if I could toggle that option on an item by item basis then I would use that feature a ton.

As for how to implement the UX: my thoughts immediately turn to Dominos again. Their left/right click contextual options (when adjusting entire Bar's Settings) seems like it would be a perfectly suitable way to change options for specific items. Like maybe a UI element on the bag window that toggles "Config Mode", or something like ctrl+clicking an item in bags opens a small contextual menu that let's me "change categories" or "toggle show all stacks" etc.

Cidan commented 2 years ago

Time for another update!

GridBagDemo

A few more things to note:

One of the things I noticed after implementing this is the wasted space for all the "single slot" item categories. I'm going to go back and revise what "compact mode" means in this new layout, such that items that can fit cleanly into another incomplete row will optionally do so, and when that section outgrows the row, it will attach it self under whatever it was compacted to. This way the sorting is still deterministically placed by the user, but will (optionally) compress to save on blank space.

More to come!

ZINK-ZINK commented 2 years ago

One of the things I noticed after implementing this is the wasted space for all the "single slot" item categories. I'm going to go back and revise what "compact mode" means in this new layout, such that items that can fit cleanly into another incomplete row will optionally do so, and when that section outgrows the row, it will attach it self under whatever it was compacted to. This way the sorting is still deterministically placed by the user, but will (optionally) compress to save on blank space.

Yea that was another extra feature, like "Combined Stacks" were, that was really cool in concept, but never really worked in practice. I'd been thinking about there was a lot of neat features that felt like they just kinda got dropped or forgotten about. I know it's deliciously ironic that I'm saying this, but once you get the update running well enough IMO iterate on those pre-existing features to iron out the last little kinks that were making them niche before you add much more extra.

I'm thinking that once the update+"single slot" categories+"Combined Stacks" are all polished really nice and working very intuitively that it will so drastically change the "feel" of using adibags that half the suggestions may just belong in the bin. Build a bulletproof foundation first n all that.

An optional simple square outline around each group would look nice IMO. I know it's purely visual, but the new gif felt like watching you carry around a handful of loose change; not abhorrent, but it's like Why don't they just put their loose change in a bag? Probably something masque or a WA could handle later too since if my assumption is right there are boxes there, they're just invisible, right?

All that bag resizing made me nervous about how it's gonna behave in combat. Is none of what you're doing Protected? Seems like with that much going on that combat would cause constant "Blizzard has prevented an action..." Errors if we tried to open our bags to use a DPS Pot or Drums mid combat.

Oh that reminds me: Can improvements be made to Mailing Items or is that on TSM or Blizz to fix? Currently Mailing items just silently fails ~50% the time unless I hit Sort Bags every time. I usually use TSM for Mailing, but I'm pretty sure it happens with the Default Mail UI too. Another very related bug too: Items that Charges and the same name get used and mailed at random. Thermal-Anvils re-produce this bug almost every time. Put like 5 in your bags, use a charge or few on 1 Anvil, then start mailing the unused Anvils one by one, odds are it will mail the semi-used Anvil instead of whichever fresh one you clicked on.

That's the kind of stuff that I've just gotten so used to working around I totally forgot they even existed.

Hopefully I wasn't mean again, I'm just trying to be straightforward. Nothing will ever change how appreciative I am of AdiBags, I've been using it since at least BFA and have no intention to swap.

ZINK-ZINK commented 2 years ago

Oh since this might be relevant to how you keep building the update: the option to have Currencies on the Top or Bottom would be nice, but not a dealbreaker. ATM I only have Gold shown since I never notice anything else if it's at the bottom, but I would start using it if I could have the latest patch's grindable Currency "Pinned to the Top of my Bags".

Just a simple Row right under the search bar, nothing crazy. ATM we can only do a Footer and I'd rather have a Header. I figured if you were gonna add that at all you'd wanna do it while you're still working on the bag resizing.

Cidan commented 2 years ago

@ZINK-ZINK -- if you have suggestions for ideas that aren't related to the new layout engine, please file either bug requests or new feature requests. This thread is only for the discussion of the layout of sections, not item stacks, etc. Please delete your threads and comments that aren't related, and file new issues.

An optional simple square outline around each group would look nice IMO.

We're not done yet with how this will actually look, and have a long way to go here. Let's wait a bit for the visuals to be fully fleshed out and we'll work from there.

FYI to all in this thread, you can try this new sorting in the branch layout-redesign today. I've hidden the new grid layout behind a feature flag in the options:

image

I know there are still a few bugs, i.e. items in the left column can't be clicked. Please don't report bugs, as I'm not ready for that level of testing yet -- however, you're more than welcome to try it out today.

Perseforis commented 1 year ago

OK this is gonna show just how much of a GitNoob I really am!

What's the best way to be testing this as it comes along? Via GitHub, or via installing an alpha/beta via the CurseForge client?

If I was isntalling off here, I'd change from Main Branch to the relevant branch here in GitHub (i.e. the layout redesign branch), then download the zip and just install to my addons folder? I presume also disabling all my other AdiBags stuff would help.

Or...is this doing it wrong? Keen to test and give feedback, just want to be doing so in the most appropriate fashion.

Cidan commented 1 year ago

No worries!

The easiest way would be to do exactly as you stated: download the zip and install it. Take note, that AdiBags is two addons, the config and the main addon. You need to move the AdiBags_Config folder out of the zip file, and make it a top level Addon. For the main addon, it's important you preserve the folder called lib in your current install from Curse. These files aren't checked into the repo, and won't be in the zip file.

Note, the development version is not ready for bug reports or performance reports -- I know some things are broken, and I know there are some performance issues right now (i.e. when opening the bag, FPS drops for a second). All known bugs will be fixed and performance will be brought back up once development is closer to release. However, if you just want to toy around with it, be my guest!

Perseforis commented 1 year ago

Lovely - I think I'll give it a whirl because it's right up there with WeakAuras as my favourite addon and I'm keen to 'see it in action'. I'd be happy also to be part of the bug-testing crew for an alpha/beta down the track.

Cidan commented 1 year ago

Hi everyone, happy Monday!

I'm back with some more progress to showcase. Sorry about the delay -- it's been an absolute crazy few weeks at my day job. Let's jump right in:

BagDragDemo

Let's go over what we're showcasing here:

This is still very much a work in progress, but it is progress. The underlying sorting code is more or less complete, with the exception of one feature: section collapsing. As can be see on the left most column, sections are still not compacting when there's room to compact "upward". Once I'm happy with drop zone markers/section animation, I'll tackle that next.

Also note, all this testing is occurring on the Dragonflight PTR now that it is open -- this code will be ready day 1 for Dragonflight pre-patch and release. Additionally, the default look of the bag will likely change to fit into the new Dragonflight design schema.

That's all for now, more soon!

Cidan commented 1 year ago

Back again with another small update!

DragArtUpdate

After a bunch of trial and error, I've settled on the animation above for dragging and dropping. A small line will appear when you can drop and you simply let go. Next up, section compaction :)

Cidan commented 1 year ago

Quick update -- section collapsing code is in when using compact mode:

collapse

Individual sections will now collapse to whatever your maximum column count is, and will retain that order. This is done instantly when changing the option as shown.

There are only a few items left to do now:

After these last few items are in place, we will release this as a normal release, and keep the BETA designation until after release of DF. Getting close!

Thanks everyone :)

Cidan commented 1 year ago

Sorry for the lack of updates, everyone. Work has completely and totally consumed my free time over the last month. At this point, we're almost fully feature complete, however the new layout may not make it by prepatch in it's final form. However, the current grid is stable, and we will release it as a beta feature before prepatch goes live, regardless of finality.

LiamGBR commented 1 year ago

Agree with above about currency maybe being flexible/maybe moveable as well, which was what I was thinking for stackable currencies when i commented on that suggestion a while back only difference is they want to move from bottom to top where as id like a fully vertical option e.g. quick edit https://i.vgy.me/D97jvc.png

Shockah commented 1 year ago

Oh god, good thing I stumbled upon this, as I was about to venture into the world of making WoW addons (well, that's a bit of a lie, I already did some, but that was quite a while ago) to try to make a similar bag addon an actual thing. I guess I'll wait instead heh

Soromeister commented 1 year ago

Awesome proposal. Can you add to this the option "Don't truncate category labels"? This would effectively show the label of the category. Let's say you have category "Hearthstones" and the label only shows "Hear.." because only one hearthstone is there, but you have set the column size to 4, thus, when enabling "Don't truncate category labels", the whole text "Hearthstones" would show up and resize the category to 4 columns even though it's technically less because you only have 1 item there. This will reduce dynamic movement of categories caused by adding one more item to a truncated category label.

SpareSimian commented 1 year ago

@Soromeister, wouldn't a minimum column count address the label shortening?

KatyPurry commented 1 year ago

Awesome ! I hope your work will give you a break!

Soromeister commented 1 year ago

@SpareSimian, that should also work.

phaeling commented 1 year ago

I would absolutely love all of this. You are doing great work!

Cidan commented 1 year ago

Hey everyone,

Just a quick update on this as I don't want to leave folks hanging. I haven't forgotten about this, however we're taking the time to tackle other much needed upgrades. Some of these upgrades are already in place (masque support, better skin/theme support), however in the process of building this feature, it became clear that some pretty serious reworks of the codebase should take place before we release this.

The current focus is on increasing the stability of the code base, such that broken releases are caught before they go out, and overall improving the ability for features to be developed.

Sit tight, we'll get this feature out ASAP.

Thanks!

MyGamesDevelopmentAcc commented 1 year ago

The only reason I am sometimes checking other addons is due to incorrect ordering of things / being that super problematic. This seem to resolve that completely and it seems are very far with it - any chances you could release what you already have? That looks fantastic.

Cidan commented 1 year ago

@MyGamesDevelopmentAcc I really want to, believe me! I can't right now, as the code is terribly inefficient at the rendering layer. I'm currently working on a set of features that will let me roll out changes to a small subset of users (even if everyone updates) over time, so I can ramp up releases as bugs slowly trickle in, instead of breaking things for everyone.

Cidan commented 1 year ago

Hi everyone,

Small update on this feature.

As I finished up implementing this feature, I hit a ton of major bugs due to the way the rendering engine for the bags is written. The bag was only ever meant to be used one way, and alternative views were never something that was considered as an option. As such, the current rendering system has become a network of spaghetti code that is incredibly buggy and difficult to update without breaking everything.

With that, I'm working on a core re-write of the layout engine that allows for the selection of multiple different views, including the one in this bug. This work is likely going to take me about 2-3 months unfortunately, as my job and personal life are going to tie me up quite a bit over the next few weeks.

You can follow along with my code commits in this branch here, and anyone that is technical is welcome to checkout the code and try it out as I go along (warning: it may break things badly for you!).

Sorry for the delay here, but we'll get there eventually.

Thanks!

KatyPurry commented 10 months ago

Hello Cidan, thank you for the update, is it still relevant? Thanks !

Cidan commented 9 months ago

Hi everyone,

We've decided to halt all development on AdiBags and work on a complete and total rewrite of the addon from the ground up. The AdiBags codebase is very old, a decade and a half old, and it has not aged well through the years. In implementing this change, I kept hitting roadblock after roadblock, and bug after bug, which made it incredibly difficult to get this feature in place.

We've decided to start over completely, with a brand new code base that uses none of the old AdiBags code. The new addon, BetterBags, has launched into alpha and is available for download now, github.com/Cidan/BetterBags :)

Currently, BetterBags is only retail, and does not have anywhere near all the features of AdiBags yet. Over the coming weeks, I'll continue to implement the most important AdiBags features in BetterBags, and after a period of stable release, I'll be pushing an update to AdiBags that deprecates AdiBags, warning them to move to BetterBags, and eventually, I'll disable the addon entirely on load via an update.

Thanks everyone for your feedback here -- we'll see you in a better (haha, get it?) future!