Newly added items are added randomly

[xhlife]

Newly added items are added randomly

[alexlyul]

Here is the algorithm I'm using, it perfectly finds the first available hole in the grid, from left to right & from top to the bottom

getAvailableGridPos(width: number): { x: number, y: number } {
           if (!this.allCardsListVisible.length) return { x: 0, y: 0 };
           const LAST_COL_IDX = 3;
           let maxX = -Infinity;
           let maxY = -Infinity;
           let longest = -Infinity;

           for (const card of this.allCardsListVisible) {
               const distance = Math.sqrt(card.x ** 2 + card.y ** 2);
               if (longest <= distance) {
                   maxX = card.x + card.w;
                   maxY = card.y + card.h;
                   longest = distance;
               }
           }

           let res;
           if (maxX <= LAST_COL_IDX && (maxX + width) <= (LAST_COL_IDX + 1)) {
               res =  { x: maxX, y: maxY };
           } else {
               res = { x: 0, y: maxY };
           }

           return res;
       }

[xhlife]

change a way to compute x and y, then get what you want.

for example, puts it at the bottom of the first column

const H = 10
let maxY = 0
  for (let i = 0; i < layout.length; i++) {
    if (layout[i].y > maxY) {
      maxY = layout[i].y
    }
  }

....
x: 0,
y: maxY + H,
....

If you have a better idea, share it with me

[akbasferhat]

x ve y'yi hesaplama kullanımları, sonra elde elde edin.

örnekleme, ilk sütunun içine koyar

const H = 10
let maxY = 0
  for (let i = 0; i < layout.length; i++) {
    if (layout[i].y > maxY) {
      maxY = layout[i].y
    }
  }

....
x: 0,
y: maxY + H,
....

Daha iyi bir fikrin varsa, benimle paylaş

I did it like this and all the added ones are added to the bottom, this is enough for me for now.

const addItem = function () {
  layout.value.push({
    x: 0,
    y: 12, // puts it at the bottom
    w: 12,
    h: 10,
    i: index,
    uid: uniqueId,
  });
  // Increment the counter to ensure key is always unique.
  index++;
}
`

[akbasferhat]

But now I am facing another critical error. I am pulling the layout data from the json server and moved:false appears in the items, but there is no such thing in my json file.

And when I add a new item, there is a bug, can you help?

Here is gif : https://drive.google.com/file/d/1FnBKNrvKlFUuLpspy_A7TU6nhB0D4cv4/view?usp=sharing

        {"x":4,"y":0,"w": 4, "h": 10,"i":1, "uid":"12345"},
        {"x":8,"y":0,"w": 4, "h": 10,"i":2, "uid":"123"},
        {"x":0,"y":0,"w": 4, "h": 10,"i":3, "uid":"1234"},
        {"x":4,"y":4,"w": 4, "h": 10,"i":4, "uid":"12345"},
        {"x":8,"y":8,"w": 4, "h": 10,"i":5, "uid":"1234"}`

[xhlife]

But now I am facing another critical error. I am pulling the layout data from the json server and moved:false appears in the items, but there is no such thing in my json file.

And when I add a new item, there is a bug, can you help?

Here is gif : https://drive.google.com/file/d/1FnBKNrvKlFUuLpspy_A7TU6nhB0D4cv4/view?usp=sharing

        {"x":4,"y":0,"w": 4, "h": 10,"i":1, "uid":"12345"},
        {"x":8,"y":0,"w": 4, "h": 10,"i":2, "uid":"123"},
        {"x":0,"y":0,"w": 4, "h": 10,"i":3, "uid":"1234"},
        {"x":4,"y":4,"w": 4, "h": 10,"i":4, "uid":"12345"},
        {"x":8,"y":8,"w": 4, "h": 10,"i":5, "uid":"1234"}`

You can delete the moved attribute to make no difference.

Change the file in the src directory, then build for yourself.

// src/helpers/utils.ts
export function compact(layout: Layout, verticalCompact: boolean, minPositions?: any): Layout {

    // Clear moved flag, if it exists.
    l.moved = false
    delete l.moved  //delete the moved attribute
  }
...
}