Specs

equal({number(), number()}, {number(), number()}, number(), [atom()], []) :: [
  Scenic.Primitives.Group.t()
]

An equal grid is much like a pixel grid but instead of determined sizes, it takes a number representing the equal number of portions to be created. Like a simple grid, equal take a starting and max point but also take a number representing the equally sized grid portions from left to right. Note the returned grid will be a list of primitive specs so you will need to use add_specs_to_graph/2.

Grid.equal({0, 0}, {700, 600}, 4, [:left, :left_center, :right_center, :right], [draw: true])

A percentage grid is one where the grid portions are percentages o the overall grid area. Like a simple grid, percentages take a starting and max point but also take a list of percentages representing the grid portions from left to right. Note the returned grid will be a list of primitive specs so you will need to use add_specs_to_graph/2.

Grid.percentage({0, 0}, {700, 600}, [25, 50, 25], [:left, :center, :right], [draw: true])

Specs

pixel({number(), number()}, {number(), number()}, [number()], [atom()], []) :: [
  Scenic.Primitives.Group.t()
]

A pixel grid is identical to a percentatge grid with the difference being that instead of a list of numbers representing percentages, that list represents pixels. Like a simple grid, pixel take a starting and max point but also take a list of numbers representing the grid portions in pixel from left to right. Note the returned grid will be a list of primitive specs so you will need to use add_specs_to_graph/2.

Grid.pixel({0, 0}, {700, 600}, [50, 150, 25], [:left_nav, :content, :side_bar], [draw: true])

A simple grid is the most basic type. It creates a grid with a top, bottom, left, right, center. All that is needed is the starting and max points. The resulting grid will contain rects and groups per portion of grid with center being the exception. Center is simple a point which can be referrenced. Note grids are primitives specs so to add them to the graph you will need to use add_specs_to_graph/2.

• :starting_xy - The {x,y} the grid should start at.
• :max_xy - The maximum {x,y} the grid should fit into. This can be the full viewport of a subset of the viewport like another grid you are adding to.
• :grid_ids - List of atoms representing the ids to be added. These ids will be applied in a clockwise way. Note: it is important to use unique ids unless the intention is to have similar components to be modified, deleted together. If this does not sound like what you want, be sure to use unique ids.
• :opts - A list of additional options
  • :draw - Boolean to determine if the grid should be drawn or not. Useful for making sure objects are falling where expected.
  • :grid_ids - The ids used for each segment of the grid in order to recall the segment later in order to assign a list of objects to it for layouts. Symantically named ids is recommneded.

def init(_, opts) do
  grid = Graph.build()
  |> add_specs_to_graph(Grid.simple({0, 0}, {700, 600}, [:top, :right, :bottom, :left, :center]))
  {:ok, opts, push: graph}
end