Increased canvase size by + 50px in each direction, changed styling

omnedia · Aug 26, 2024 · 53250fd · 53250fd
1 parent 2059f7e
commit 53250fd
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@omnedia/ngx-flickering-grid",
   "description": "A simple component library to create a container with an animated grid pattern background.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0"

diff --git a/src/lib/ngx-flickering-grid.component.scss b/src/lib/ngx-flickering-grid.component.scss
@@ -8,10 +8,9 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
+    overflow: hidden;
 
     canvas {
-      width: 100%;
-      height: 100%;
       pointer-events: none;
       z-index: 0;
       position: absolute;

diff --git a/src/lib/ngx-flickering-grid.component.ts b/src/lib/ngx-flickering-grid.component.ts
@@ -130,8 +130,8 @@ export class NgxFlickeringGridComponent implements AfterViewInit, OnDestroy {
   }
 
   setCanvasSize(): void {
-    this.canvas.nativeElement.width = this.background.nativeElement.getBoundingClientRect().width;
-    this.canvas.nativeElement.height = this.background.nativeElement.getBoundingClientRect().height;
+    this.canvas.nativeElement.width = this.background.nativeElement.getBoundingClientRect().width + 50;
+    this.canvas.nativeElement.height = this.background.nativeElement.getBoundingClientRect().height + 50;
 
     this.setupCanvas();