clicking-grid v1.0.4

Clicking Grid

First Version Of A Simple, Interesting And Native But Powerful Grid Library For Angular.

This grid is designed to place an image in it, and to be able to highlight different points of the image at the same time by just pressing the button click on one of the cells.

Set Up

The only thing you need is to place the url and the component will do the rest for you.

<clicking-Grid [imageURL]="url">
</clicking-Grid>

By making data binding to a variable that has the value of the url, the component places automatic values for each of the configurations.

You can change the number of rows and columns easily with the variables cellsInXAxis and cellsInYAxis.

<clicking-Grid
	[imageURL]="url"
	[cellsInXAxis]="10"
	[cellsInYAxis]="15">
</clicking-Grid>

By default the values are 5, but you can change them and they are independent, so don't be afraid to play with them.

In the same way you can change the canvas size. But keep in mind that this includes the size of the borders, but don't worry, you can also customize them.

<clicking-Grid
	[canvasSize]="500"
	[borderSize]="25">
</clicking-Grid>

In addition you can also change the rgba color with which the squares will be painted on the canvas.

<clicking-Grid
	[imageURL]="url"
	[rgbaColor]="rgba">
</clicking-Grid>

With the capitalLetter property you can decide between uppercase or lowercase to display on the grid.

<clicking-Grid
	[imageURL]="url"
	[uppercase]="false">
</clicking-Grid>

Finally with the properties numbersInXAxis and numbersInYAxis you can choose whether to display numbers or letters in each of the axes.

<clicking-Grid
	[imageURL]="url"
	[numbersInXAxis]="false"
	[numbersInYAxis]="true">
</clicking-Grid>

CONSUME DATA

There are two easy ways to consume the grid data, one is by EventEmitter which is emitted every time the grid is updated by a click.

<clicking-Grid
    [imageURL]="url
    [borderSize]="15"
    [rgbaColor]="rgba"    
    (getDataCellList)="receiveMessage($event)"> </clicking-Grid>

With this method you need to create a function that receives the event

receiveMessage($event:  any) {
    console.log($event);
}

On the other hand, you can subscribe to the service and in the same way you will receive the data with each update per click.

constructor( private gridLibService:GridLibService) { }

ngOnInit() {
    this.gridLibService.data.subscribe(m  =>  console.log(m));
}

Either way you will get an array of objects with the following structure.

export  interface  ICell {
    x:  number;
    y:  number;
    isActive:  boolean;
}

ADDITIONAL

None of the properties exclude other properties (or they should be), so you can make as many combinations as you want.

<clicking-Grid
	[imageURL]="url"
	[cellsInXAxis]="10"
	[cellsInYAxis]="10"
	[canvasSize]="800"
	[borderSize]="15"
	[rgbaColor]="rgba"
	[uppercase]="true"
	[numbersInXAxis]="true"
	[numbersInYAxis]="false">
</clicking-Grid>

Who Made This?

Just another IT engineer

Send Me A Email: oreoslawiet@gmail.com

Follow me here!!! https://github.com/JossJoestar

Trans Rights Are Human Rights