SapphireDb logo SapphireDb

Demos - Pixels

\f:(typescript:pixels.component.ts) export class PixelsComponent {\n \tprivate collection: DefaultCollection<Pixel>;\n \tpublic pixels$: Observable<Pixel[]>;\n\n \tconstructor(private db: SapphireDbService) {\n \t\tthis.collection = this.db.collection<Pixel>('pixels');\n \t\t// Load all pixels from collection\n \t\tthis.pixels$ = this.collection.orderBy('x').thenOrderBy('y').values();\n \t}\n\n \tchangeColor(pixel: Pixel, change: number) {\n \t\t// A list with all colors\n \t\tconst allColors = Lists.colors();\n \t\t// Get the current colors index\n \t\tlet colorIndex = allColors.indexOf(pixel.color);\n\n \t\t// Increase/Decrease it by one and make it a valid index for the list of colors\n \t\tcolorIndex = (colorIndex + change) % allColors.length;\n\n \t\tif (colorIndex < 0) {\n \t\t\tcolorIndex = allColors.length - 1;\n \t\t}\n\n \t\t// The update call\n \t\tthis.collection.update([{pixel, \n \t\t\tcolor: allColors[colorIndex]\n \t\t}]);\n\n \t\t// Return false to prevent context menu showing on right click\n \t\treturn false;\n \t}\n } \f:(html:pixels.component.html) <div class="pixels">\n \t<div class="pixel"\n \t\t\t[ngClass]="'bg-' + pixel.color"\n \t\t\t(contextmenu)="changeColor(pixel, -1)"\n \t\t\t(click)="changeColor(pixel, 1)"\n \t\t\t*ngFor="let pixel of pixels$ | async">\n \t\tx: pixel.x , y: pixel.y \n \t</div>\n </div> \f:(less:pixels.component.less) @height: 800px;\n @size: 10;\n\n .pixels {\n \tposition: relative;\n \twidth: 100%;\n \theight: @height;\n\n \t.pixel {\n \t\twidth: 100% / @size;\n \t\theight: 100% / @size;\n \t\tfloat: left;\n \t\tposition: relative;\n \t\tcolor: #ffffff;\n \t\ttext-align: center;\n \t\tline-height: @height / 10 - 2px;\n \t\tuser-select: none;\n\n \t\t&:hover {\n \t\t\tcursor: pointer;\n \t\t}\n\n \t\t&::after {\n \t\t\tposition: absolute;\n \t\t\tleft: 0;\n \t\t\ttop: 0;\n \t\t\tcontent: '';\n \t\t\twidth: 100%;\n \t\t\theight: 100%;\n \t\t\tborder: 1px solid #ffffff;\n \t\t}\n \t}\n } \f:(csharp:Pixel.cs) public class Pixel\n {\n \t[Key]\n \tpublic Guid Id { get; set; }\n\n \t[Updatable]\n \tpublic string Color { get; set; }\n\n \tpublic int X { get; set; }\n\n \tpublic int Y { get; set; }\n }

This website uses Google Analytics. If you want to disable it just unselect the option: