dattn / dnd-grid

A vuejs grid with draggable and resizable boxes
307 stars 48 forks source link

allow box to specify his own defaultsize on creation #37

Open hariseldon78 opened 6 years ago

hariseldon78 commented 6 years ago

i have different kinds of boxes, and i would like for them to be able to specify their own defaultsize, based on their content, at the time of addition. I know I can use the layout property, but i prefer to use the automatic positioning coded into the container. Is there any plan about doing this or should i just make it myself?

devleaks commented 6 years ago

I read in the code that you're going through registerBox procedure. Wouldn't it be possible at that time to build the layout according to width and height supplied by the box? The layout should not be supplied at dnd-container, but rather built from Boxes. The algorithm does a fine job at positioning the boxes, but we still have to supply the in the layout, which is redundant. I tested layout be providing width and height only (x and y always 0) and the algorythm does a fine job. So rather than providing the width and height at container level, build a default layout from width and height placed individually on boxes; the layout could be built in registerBox.

dattn commented 6 years ago

The idea of the grid container is that the layout is controlled by the layout json. The boxes itself should not know where they are placed, or how many cells they got assigned (size).

For the moment all boxes which are not defined in the layout will be added automatically at a free place with size 1x1. Where should i get the preferred size from ?

devleaks commented 6 years ago

The idea is the following: Rather than specifying layout at container/parent level like this:

<container layout="[{
  id: "b1",
  pinned: false,
  hidden: false,
  position: {
    x: 0,
    y:0,
    w: 3,
    h: 1
  }
  }, {
    id: "b2",
    ...
  }]">
  <box id="b1"></box>
  <box id="b2"></box>
</container>

you speficy size and optionnaly position and pinned and visibility at "children/box" level. the layout alrorithm takes care of laying out boxes that are not pinned. (Your current algorithm does a decent job at that as it is now.)

<container maxcols=12>
  <box id="b1" w=3 h=1></box>
  <box id="b2" w=2 h=2 x=10 y=0 pinned=true></box>
</container>

It is very much like libraries like Packery do.

In the above case, you have to create the box and place its positioning in another structure (the parent). In the case below, you place all that information in the box only and the parent takes care of it.

What do you think? It is a different, alternate approach.