jxxcarlson / elm-cell-grid / 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.

asHtml : { width : Basics.Int, height : Basics.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 : CellGrid.Position
, coordinates : { x : Basics.Float
, y : Basics.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 : Basics.Float
, cellHeight : Basics.Float
, toColor : a -> Color
, gridLineWidth : Basics.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
    }