Muuri: Custom Item slots and fillGaps=false not working

[dev-zetta]

It seems that slots property is being completely ignored. You cannot drag and drop items at certain slots, it will always fill gaps.

Here is example:
slots: [0, 0, 39, 0, 77, 0, 117, 0, 155, 0, 219, 0, 257, 0, 297, 0, 335, 0, 375, 0]
If I have 6 items, I can't move items at slot 7, 8, 9, 10. It will just append at the end (last filled slot).

I'm using custom layout function that returns layout object with slots property specifies above.

Am I doing something wrong or there is a bug?

[niklasramo]

@dev-zetta I'm not fully understanding the issue, could you please provide a reduced test case? If you're using a custom layout function how can you set fillGaps to false? That should be impossible, because you either provide a function or a configuration object.

[dev-zetta]

@niklasramo Hello there. You're your right, it's impossible to set both, custom layout func and layout object. However, I have a custom layout function with static slots defined, e.g.:

    let fn = (items, ...args) => {
      let layout = {
        slots: [10, 0, 20, 0, 30, 0, 40, 0, 50, 0],
        width: 60,
        height: 10,
        setWidth: true,
        setHeight: true
      }
      return layout
    }

In this example are 5 static slots. Now I want to move a item to slot n. 5, but Muuri automatically moves the item to slot n. 1, when I drag and drop the item to slot 5. It's like the fillCaps options is always enabled, even I set layout func and not the object.

[niklasramo]

Can you provide a live demo where I can test this, e.g in codepen?

[dev-zetta]

Here you go:
https://codepen.io/anon/pen/rQBzqe

There are 3 items and 5 slots... as you can see, I cannot move any item to slot 4 or 5, it always 'do fillGaps'.

[niklasramo]

Ahh, yes. This is no bug, intentional behaviour I'm afraid. Muuri's .layout() assumes that there's a single slot (x and y coords) for each item so adding those empty extra slots won't have any effect whatsoever. Additionally, Muuri currently allows dropping items only on top of other items (perf and ux reasons). So if you drop item on an empty space it will just animate back to it's original position.

However, you _can_ override the drag sort behaviour fully by providing a function to dragSortPredicate.

[dev-zetta]

Aha. That is unfortunate. Would it be hard to implement this dragSortPredicate function, that allows to move the item to any 'slot'? Could you please show me some example, or add it to that codepen example?

(I'm using Muuri for my game engine.... I have a game inventory and 'hot slots' in the game, and I need to allow the players to move items freely to any of those hot slots.)

[niklasramo]

Let's just say that it is not trivial to do. Although this kind of functionality is possible to build with Muuri I want to emphasize that Muuri was not built with this kind of functionality in mind.

You could also try hacking it together by creating a grid for each slot and moving items between the grids. Not the most performant or pretty way to do it, but should work.

[jwillmer]

I#m also looking for this feature. I would like to use it in order to create a grid like Azure has. The user should be able to freely arrange and resize the items on the board. Any plans to support this or any known alternative grid for this you could recommend?

[niklasramo]

@jwillmer Hmmm..allowing user to _freely_ arrange and resize items on the board would be a much simpler implementation than Muuri is, assuming that the items can overlap each other? If I were to do something like that I'd probably just roll my own custom implementation.

[dev-zetta]

I#m also looking for this feature. I would like to use it in order to create a grid like Azure has. The user should be able to freely arrange and resize the items on the board. Any plans to support this or any known alternative grid for this you could recommend?

I had to replace Muuri with Draggable.js, because it supports slots, ie. dropzones. Give it a try, if you need that feature.

[felipeinfantino]

I#m also looking for this feature. I would like to use it in order to create a grid like Azure has. The user should be able to freely arrange and resize the items on the board. Any plans to support this or any known alternative grid for this you could recommend?

Im looking also for that feature. I want the user to freely arrange and resize items on the board, I don't want the items to overlap and I also want to take advantages of the other cool features of Muuri.

@jwillmer what did you do ? Did you implement a dragSortPredicate ? Or did you replace Muuri with Draggable.js ? In case that you implemented a dragSortPredicate, could you please share the code?

@niklasramo it would be very very nice if you could provide a dragSortPredicate for us, I think there are a lot of people who want this and that is the only thing I need in order to stay with Muuri and not replace it with another shitty library. Or at least some hints on how to do it or pseudo-code or something like that. I would appreciate it a lot and be very very thankful.

[jwillmer]

I ended up implementing my own grid but unfortunately I can't share it at the moment. Maybe in the future!

[niklasramo]

Yeah, can't really blame people for wanting a grid library to allow defining a grid :laughing: Muuri's approach is a bit different though, it's more of a layout engine that handles positioning items inside a container and tries to do that as performantly as possible. That being said, you can build a proper grid engine around Muuri and it should not be too hard to do.

Since this issue rises up quite often I'll keep it in mind when adding new features to muuri, possibly build an add-on that implements better grid handling.

[felipeinfantino]

@jwillmer Did you implement your own grid on top of muuri, or just in pure Javascript and html or which library or technology did you use ? If you can't share your code maybe you can guide me on how to do that, please. I'm new to the javascript world, so the issues that may be easy are for me a little harder.

@niklasramo thank you for the advise. I have a couple of Months left to decide if i'm going to stick with muuri or not, i would love to stay with muuri, but i will need in the future this feature (or the add-on). My boss want the first stable release in 6 months, so it would be very nice if you could tell me if that is going to come in the future, because then I could say to my boss that this feature is gonna come in a couple of months after release or maybe next year.

[niklasramo]

@felipeinfantino Sorry, but I can' make any promises about that one :/

[jwillmer]

@felipeinfantino If you are new to JS then this will be a big task. I was using Stencil to build a web component with the features I was looking for.

[Techn1x]

I would also appreciate a way to (optionally) define a grid or something so that I can drag items wherever I want on the page (assuming the performance hit is not insane). When showing normies our new Muuri implementation, only allowing items to be dragged over other items in order to change the layout isn't immediately intuitive to them

[Techn1x]

I was thinking one way to kind of achieve that could be creating lots of invisible items in the grid, but I think that would potentially cause weird gaps throughout the layout due to Muuri thinking they are also items that are treated the same as real items

Changed the dragSortPredicate to swap and added 2 invisible items... it kind of works but I've only been using Muuri for a day so I don't really know about the implications of doing it this way, and how it might affect a grid with items that are shaped differently
https://codepen.io/anon/pen/YBQNWV

[niklasramo]

@Techn1x that's a clever solution 👍 It does work nicely if all your items are same size. It's a bit of a separate issue from the grid functionality, but dropping items on empty slots is something I'd _really_ like to get fixed some day, but it's a really difficult to solve actually.

[Techn1x]

@niklasramo thanks! I've been using that for a while now and it works ok. Not all of my items are the same size, but it mostly works. The only real problem with that approach for me now is that if I have a grid with a bunch of invisible items at the end, then I go to add a brand new item, it will appear right at the end after all the invisible items (instead of just after the last visible item)

If there was a way to mark the invisible items as low priority or something, so that when a new item is added it appears after all the visible items but before the group of invisible items, that should fix it, but I'm not sure the best way to do it

[icenold]

i had to replace muuri with gridstack because of this

[niklasramo]

Closing this for now there's no real bug here, just an issue with the _way_ Muuri works.