Fixes print layout bugs

src/app/app-routing.module.spec.ts

@@ -72,7 +72,6 @@ describe('Router: App', () => {
   });
 
   it('navigate to "" redirects you to /', async () => {
-    console.log('mockEnvironment', mockEnvironment);
     const success = await fixture.ngZone.run(() => router.navigate(['']));
     expect(success).toBeTruthy();
     expect(location.path()).toBe('/');

src/app/config/defaults.ts

@@ -12,7 +12,7 @@ export const labelLayouts = {
     name: '32mm Round Label - 2up',
     type: 'round_32mm_2up',
     numCols: 2,
-    columnGap: 1.3,
+    columnGap: 3.4,
   }),
 };
 

src/app/models/appDefaults.interface.ts

@@ -45,6 +45,8 @@ export class AppDefaults {
         } else {
           this[k] = defaultOptions[k];
         }
+      } else if (k === 'labelLayout') {
+        this[k] = new LabelLayout(options[k]);
       } else {
         this[k] = options[k] || defaultOptions[k];
       }

src/app/models/labelLayout.interface.ts

@@ -44,7 +44,6 @@ export class LabelLayout {
     return {
       bottomTextMargin: this._toUnits(this.bottomTextMargin),
       columnGap: this._toUnits(this.columnGap),
-      columnGapWidth: this._toUnits(this.columnGapWidth),
       fontSize: this._toUnits(this.fontSize),
       labelSize: this._toUnits(this.labelSize),
       labelSizeWithMargins: this._toUnits(this.labelSizeWithMargins),
@@ -58,16 +57,12 @@ export class LabelLayout {
     };
   }
 
-  get columnGapWidth(): number {
-    return this.columnGap;
-  }
-
   get labelSizeWithMargins(): number {
     return (this.labelSize + (this.marginSize * 2));
   }
 
   get pageWidth(): number {
-    return (this.labelSizeWithMargins * this.numCols) + (this.columnGap * this.numCols - 1);
+    return (this.labelSizeWithMargins * this.numCols);
   }
 
   get pageHeight(): number {

src/app/print-layout/print-layout.component.html

@@ -1,8 +1,8 @@
 <div
-  id="print"
+  class="print-layout"
   [style]="{width: pageWidth, height: pageHeight}"
   [gdRows]="pagesToGridFractions"
-  gdGap="1.5mm"
+  [gdGap]="marginWidth"
   gdAlignColumns="center"
   gdAlignRows="center"
 >
@@ -11,7 +11,7 @@
     [gdColumns]="colsToGridFractions"
     gdAlignColumns="center"
     gdAlignRows="center"
-    gdGap="3mm"
+    [gdGap]="columnGap"
   >
     <app-label-layout
       *ngFor="let col of columns"

src/app/print-layout/print-layout.component.scss

@@ -1,17 +1,4 @@
-#print {
+.print-layout {
   display: grid !important;
   background-color: transparent;
-  width: 64mm;
-  height: 32mm;
-  padding-top: 2mm;
-  padding-bottom: 2mm;
-
-  .page {
-    padding-top: 2mm;
-    padding-bottom: 2mm;
-  }
-
-  .column {
-    padding: 1mm;
-  }
 }

src/app/print-layout/print-layout.component.ts

@@ -1,5 +1,6 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Input} from '@angular/core';
 import {AppDefaults} from '../models/appDefaults.interface';
+import {LabelLayout} from '../models/labelLayout.interface';
 import {SettingsService} from '../services/settings.service';
 
 @Component({
@@ -7,19 +8,17 @@ import {SettingsService} from '../services/settings.service';
   templateUrl: './print-layout.component.html',
   styleUrls: ['./print-layout.component.scss']
 })
-export class PrintLayoutComponent implements OnInit {
+export class PrintLayoutComponent implements AfterViewInit {
   @Input() dateCreated: Date;
   @Input() barCode: string;
   @Input() initials: string;
   settings: AppDefaults;
-  dimensions: {[key: string]: string};
+  layout: LabelLayout;
 
   constructor(private settingsService: SettingsService) {
     this.settings = this.settingsService.getSettings();
-    this.dimensions = this.settings.labelLayout.dimensions;
-  }
-
-  ngOnInit(): void {
+    this.layout = new LabelLayout(this.settings.labelLayout);
+    this.layout.numCopies = this.settings.numCopies;
   }
 
   get pagesToGridFractions(): string {
@@ -31,19 +30,30 @@ export class PrintLayoutComponent implements OnInit {
   }
 
   get pageHeight(): string {
-    return this.dimensions && this.dimensions.pageHeight;
+    return this.layout.dimensions.pageHeight;
   }
 
   get pageWidth(): string {
-    return this.dimensions && this.dimensions.pageWidth;
+    return this.layout.dimensions.pageWidth;
+  }
+
+  get marginWidth(): string {
+    return this.layout.dimensions.marginWidth;
+  }
+
+  get columnGap(): string {
+    return this.layout.dimensions.columnGap;
   }
 
   get pages() {
-    return Array(this.settings.numCopies).fill('');
+    return Array(this.layout.numCopies).fill('');
   }
 
   get columns() {
-    return Array(this.settings.labelLayout.numCols).fill('');
+    return Array(this.layout.numCols).fill('');
+  }
+
+  ngAfterViewInit(): void {
   }
 
 }

src/app/print/print.component.scss

@@ -7,18 +7,16 @@
 
 @media print {
   @page {
-    size: 64mm 32mm;
     margin: 0 !important;
     padding: 0 !important;
   }
 
   ::ng-deep html,
   ::ng-deep body {
-    width: 64mm;
-    height: 32mm;
     margin: 0 !important;
     padding: 0 !important;
-    background-color: transparent;
+    background-color: red;
+    overflow: hidden;
   }
 
   ::ng-deep .no-print,
@@ -27,7 +25,8 @@
   ::ng-deep app-footer {
     display: none;
   }
-  #media-print { display: flex !important; }
+
+  #media-print { display: block !important; }
   #media-screen { display: none !important; }
 }
 

src/app/print/print.component.ts

@@ -3,6 +3,7 @@ import {MatButton} from '@angular/material/button';
 import {ActivatedRoute} from '@angular/router';
 import {createQrCodeValue} from '../_util/qrCode';
 import {AppDefaults} from '../models/appDefaults.interface';
+import {LabelLayout} from '../models/labelLayout.interface';
 import {Sample} from '../models/sample.interface';
 import {ApiService} from '../services/api.service';
 import {SettingsService} from '../services/settings.service';
@@ -36,6 +37,28 @@ export class PrintComponent implements AfterViewInit {
   ngAfterViewInit() {
     this.saveAndPrintButton.focus();
     this.changeDetector.detectChanges();
+    const layout = new LabelLayout(this.settings.labelLayout);
+    layout.numCopies = this.settings.numCopies;
+
+    // Inject the print CSS, with dynamic layout settings, into the DOM.
+    const printCss = `
+      @media print {
+        @page {
+          size: ${layout.dimensions.pageWidth} ${layout.dimensions.pageHeight};
+        }
+
+        html,
+        body {
+          width: ${layout.dimensions.pageWidth} !important;
+          height: ${layout.dimensions.pageHeight} !important;
+        }
+      }
+    `;
+    const headEl = document.getElementsByTagName('head')[0];
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute('type', 'text/css');
+    styleEl.appendChild(document.createTextNode(printCss));
+    headEl.appendChild(styleEl);
   }
 
   saveAndPrint() {

src/app/services/settings.service.ts

@@ -4,7 +4,6 @@ import serializeJs from 'serialize-javascript';
 import {defaultOptions} from '../config/defaults';
 import {AppDefaults, AppDefaultsOptions} from '../models/appDefaults.interface';
 
-
 @Injectable({
   providedIn: 'root'
 })
@@ -37,7 +36,6 @@ export class SettingsService {
     const settings: AppDefaults = createClone({circles: true})(this.defaults);
 
     Object.keys(newSettings).forEach(k => {
-      console.log(`${k}:`, newSettings[k]);
       settings[k] = newSettings[k];
     });
 

src/app/settings/settings.component.html

@@ -26,7 +26,6 @@
         <mat-select
           #labelLayoutSelect="matSelect"
           [formControl]="labelLayoutFormControl"
-          [value]="settings.labelLayout.type"
         >
           <mat-option *ngFor="let layout of labelLayouts" [value]="layout.type">{{layout.name}}</mat-option>
         </mat-select>
@@ -39,7 +38,6 @@
           matInput
           type="number"
           [formControl]="numCopiesFormControl"
-          [value]="settings.numCopies.toString()"
         >
         <mat-error *ngIf="numCopiesFormControl.hasError('required')">This field is required.</mat-error>
         <mat-error *ngIf="numCopiesFormControl.hasError('pattern')">Please enter only 2-5 letters.</mat-error>