selectable-grid

Install

npm install --save selectable-grid

Usage example

import SelectableGrid from 'selectable-grid'

const init = () => {
  const img = document.querySelector('img')

  if (!img) {
    return
  }

  img.addEventListener('load', () => {
    new SelectableGrid({
      container: img,
      cellCount: 15,
    })
  })
}

init()

Properties

| Property | Required | Type | Description | |----------|----------|------|-------------| | container | true | HTMLImageElement | HTMLVideoElement | img or video node | | cellCount | true | number | count of the cell in the grid | | mouseMove | false | function(area: {x: number, y: number, w: number, h: number}, selectArea: {x: number, y: number, w: number, h: number}, e: MouseEvent){} | handler of mouse move on the grid | | mouseDown | false | (point: {x: number, y:number}, e: MouseEvent) => void | handler of mouse down on the grid | | mouseUp | false | (area: {x: number, y: number, w: number, h: number}, selectArea: {x: number, y: number, w: number, h: number}, e: MouseEvent) => void | handler of mouse up on the grid | | cellsStyles | false | {fillStyle: string} | color like as color for canvas | | gridStyles | false | {strokeStyle: string} | color like as color for canvas | | areaStyles | false | {strokeStyle: string, fillStyle: string} | color like as color for canvas | | isArea | false | boolean | show area on the grid | | keepArea | false | boolean | show area on the grid | | isCells | false | boolean | render cells on the grid | | isGrid | false | boolean | render grid on the grid | | canvasClassName | false | string | class name of the canvas |

Another packages

@selectable-grid/react

@selectable-grid/vue