jxxcarlson/elm-cell-grid/8.0.0

NOTE: the latest version is 8.0.1

CellGrid.Render

Render a cell grid as html using SVG

SVG is slower for large cell grids, but is more interactive. User clicks on cells in the grid can be captured and used for interaction.

{ width : Int
, height : Int
}
-> CellStyle a
-> CellGrid a
-> Html Msg

Render a cell grid into an html element of the given width and height.

asSvg : CellStyle a -> CellGrid a -> Svg Msg

Render a cell grid as an svg <g> element, useful for integration with other svg.

type alias Msg =
{ cell : Position
, coordinates :
{ x : Float
, y : Float
}
}

Capture clicks on the rendered cell grid. Gives the position in the cell grid, and the local (x, y) coordinates of the cell

type alias CellStyle a =
{ cellWidth : Float
, cellHeight : Float
, toColor : a -> Color
, gridLineWidth : Float
, gridLineColor : Color
}

Customize how a cell is rendered. Color is as defined in the package avh4/elm-color, e.g. Color.rgb 1 0 0 is bright red.

cellStyle : CellStyle Bool
cellStyle =
    { toColor =
        \b ->
            if b then
                Color.green


            else
                Color.red
    , cellWidth = 10
    , cellHeight = 10
    , gridLineWidth = 1
    , gridLineColor = Color.black
    }