Adds DataMatrix Rectangular layout

src/app/app.module.ts

@@ -36,6 +36,7 @@ import {CacheService} from './services/cache.service';
 import {SettingsService} from './services/settings.service';
 import {SettingsComponent} from './settings/settings.component';
 import { MultipleLabelsComponent } from './multiple-labels/multiple-labels.component';
+import { RectangleDatamatrixRectangularComponent } from './label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component';
 
 /**
  * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@@ -70,6 +71,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     RectangleDatamatrixComponent,
     SampleComponent,
     SettingsComponent,
+    RectangleDatamatrixRectangularComponent,
   ],
   imports: [
     BrowserAnimationsModule,

src/app/barcode-svg/barcode-svg.directive.ts

@@ -31,7 +31,7 @@ export class BarcodeSvgDirective implements OnInit {
       };
 
       if (this.format === 'datamatrixrectangularextension') {
-        opts.version = '8x96';
+        opts.version = '8x64';
       }
 
       if (this.format === 'qrcode') {

src/app/config/defaults.ts

@@ -41,6 +41,13 @@ export const labelLayouts = {
     pageWidth: 50.8 + labelMargin,
     pageHeight: 25.4 + labelMargin,
   }),
+  rectangle_datamatrixrectangular: new LabelLayout({
+    name: '2in x 1in Rectangular Label - DataMatrix Rectangular',
+    barcodeType: 'datamatrixrectangular',
+    id: 'rectangle_datamatrixrectangular',
+    pageWidth: 50.8 + labelMargin,
+    pageHeight: 25.4 + labelMargin,
+  }),
 };
 
 export const defaultOptions: AppDefaultsOptions = {

src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RectangleDatamatrixRectangularComponent } from './rectangle-datamatrix-rectangular.component';
+
+describe('RectangleDatamatrixRectangularComponent', () => {
+  let component: RectangleDatamatrixRectangularComponent;
+  let fixture: ComponentFixture<RectangleDatamatrixRectangularComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RectangleDatamatrixRectangularComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RectangleDatamatrixRectangularComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.svg

@@ -0,0 +1,76 @@
+<svg
+  class="label-layout-format"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  [attr.width]="labelLayout.dimensions.pageWidth"
+  [attr.height]="labelLayout.dimensions.pageHeight"
+  [attr.viewBox]="'0 0 ' + width + ' ' + height"
+>
+  <defs>
+    <g id="dmr_fill_line">
+      <line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#000000" />
+      <line x1="0" y1="1.5" x2="2" y2="1.5" stroke-width="0.3" stroke="#000000" />
+      <text x="7" y="2.25" fill="#000000">MAX FILL</text>
+      <text x="26" y="2.25" fill="#000000">MIN FILL</text>
+      <line x1="31" y1="1.5" x2="33" y2="1.5" stroke-width="0.3" stroke="#000000" />
+      <line x1="33" y1="0" x2="33" y2="3" stroke-width="0.3" stroke="#000000" />
+    </g>
+    <g id="up_arrow">
+      <g transform="translate(2.5, 2)">
+        <g transform="translate(-2.5, -2) scale(0.1)">
+          <path d="M 0,0 H 24 V 24 H 0 Z" style="fill:none"/>
+          <path d="M 20,11 H 7.83 L 13.42,5.41 12,4 4,12 12,20 13.41,18.59 7.83,13 H 20 Z" />
+        </g>
+        <text x="1" y="0">UP</text>
+      </g>
+    </g>
+  </defs>
+
+  <g [attr.transform]="'translate(' + marginHorizontal + ', ' + marginVertical + ')'">
+    <rect
+      class="label-layout-border"
+      fill="#FFFFFF"
+      stroke="#CCCCCC"
+      stroke-width="0.2"
+      [attr.width]="widthMinusMargins"
+      [attr.height]="heightMinusMargins"
+      x="0"
+      y="0"
+      rx="2"
+    />
+    <use xlink:href="#up_arrow" x="2" y="2" />
+    <use xlink:href="#up_arrow" x="2" [attr.y]="heightMinusMargins - 4" />
+    <use
+      xlink:href="#dmr_fill_line"
+      [attr.x]="8"
+      [attr.y]="0"
+    />
+    <use
+      xlink:href="#dmr_fill_line"
+      [attr.x]="8"
+      [attr.y]="heightMinusMargins - 3"
+    />
+    <g transform="translate(3, 9.5)">
+      <g
+        appBarcodeSvg
+        format="datamatrixrectangular"
+        [value]="sample.barcode"
+        [width]="36"
+        [height]="12"
+        transform="scale(0.175)"
+      />
+    </g>
+    <g transform="translate(24, 11.5)">
+      <text x="0" y="0" style="font-size: 2.7px; text-anchor: start; text-align: left;">
+        #{{sample.student_id}}
+      </text>
+      <text x="0" y="2" style="font-size: 2.7px; text-anchor: start; text-align: left;">
+        {{sample.date | date:'yyyy-MM-dd HH:mm'}}
+      </text>
+      <text x="0" y="4" style="font-size: 2.7px; text-anchor: start; text-align: left;">
+        {{sample.location}}  {{sample.initials}}
+      </text>
+    </g>
+  </g>
+</svg>

src/app/label-layout/formats/rectangle-datamatrix-rectangular/rectangle-datamatrix-rectangular.component.ts

@@ -0,0 +1,46 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {AppDefaults} from '../../../models/appDefaults.interface';
+import {LabelLayout} from '../../../models/labelLayout.interface';
+import {Sample} from '../../../models/sample.interface';
+
+@Component({
+  selector: 'app-rectangle-datamatrix-rectangular',
+  templateUrl: './rectangle-datamatrix-rectangular.component.svg',
+  styleUrls: ['./rectangle-datamatrix-rectangular.component.scss']
+})
+export class RectangleDatamatrixRectangularComponent implements OnInit {
+  @Input() sample: Sample;
+  @Input() labelLayout: LabelLayout;
+  marginHorizontal = 3.175 / 2;
+  marginVertical = 3.175 / 2;
+
+  constructor() { }
+
+  get width() {
+    return this.labelLayout.pageWidth;
+  }
+
+  get height() {
+    return this.labelLayout.pageHeight;
+  }
+
+  get heightMinusMargins(): number {
+    return (this.height - (this.marginVertical * 2));
+  }
+
+  get widthMinusMargins(): number {
+    return (this.width - (this.marginHorizontal * 2));
+  }
+
+  get labelCenterHorizontal(): number {
+    return (this.widthMinusMargins / 2);
+  }
+
+  get labelCenterVertical(): number {
+    return (this.heightMinusMargins / 2);
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg

@@ -8,12 +8,13 @@
   [attr.viewBox]="'0 0 ' + width + ' ' + height"
 >
   <defs>
-    <g id="fill_line">
+    <g id="dm_fill_line">
-      <line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#999999" />
+      <line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#000000" />
-      <line x1="0" y1="1.5" x2="5" y2="1.5" stroke-width="0.3" stroke="#999999" />
+      <line x1="0" y1="1.5" x2="2" y2="1.5" stroke-width="0.3" stroke="#000000" />
-      <text x="8" y="2.25" fill="#999999">FILL</text>
+      <text x="7" y="2.25" fill="#000000">MAX FILL</text>
-      <line x1="11" y1="1.5" x2="16" y2="1.5" stroke-width="0.3" stroke="#999999" />
+      <text x="26" y="2.25" fill="#000000">MIN FILL</text>
-      <line x1="16" y1="0" x2="16" y2="3" stroke-width="0.3" stroke="#999999" />
+      <line x1="31" y1="1.5" x2="33" y2="1.5" stroke-width="0.3" stroke="#000000" />
+      <line x1="33" y1="0" x2="33" y2="3" stroke-width="0.3" stroke="#000000" />
     </g>
     <g id="up_arrow">
       <g transform="translate(2.5, 2)">
@@ -41,34 +42,35 @@
     <use xlink:href="#up_arrow" x="2" y="2" />
     <use xlink:href="#up_arrow" x="2" [attr.y]="heightMinusMargins - 4" />
     <use
-      xlink:href="#fill_line"
+      xlink:href="#dm_fill_line"
-      [attr.x]="labelCenterHorizontal - 15"
+      [attr.x]="8"
       [attr.y]="0"
     />
     <use
-      xlink:href="#fill_line"
+      xlink:href="#dm_fill_line"
-      [attr.x]="labelCenterHorizontal - 15"
+      [attr.x]="8"
       [attr.y]="heightMinusMargins - 3"
     />
-    <g transform="translate(5, 7)">
+    <g transform="translate(4, 7.75)">
       <g
         appBarcodeSvg
-        format="datamatrixrectangularextension"
+        format="datamatrix"
         [value]="sample.barcode"
-        [width]="36"
+        [width]="20"
-        [height]="3"
+        [height]="20"
-        transform="scale(0.4)"
+        transform="scale(0.175)"
       />
     </g>
-    <g transform="translate(5, 16)">
+    <g transform="translate(17, 11.75)">
-      <text x="0" y="0" style="text-anchor: start; text-align: left;">
+      <text x="0" y="0" style="font-size: 2.7px; text-anchor: start; text-align: left;">
         #{{sample.student_id}}
       </text>
-      <text x="0" y="2" style="text-anchor: start; text-align: left;">
+      <text x="0" y="2" style="font-size: 2.7px; text-anchor: start; text-align: left;">
         {{sample.date | date:'yyyy-MM-dd HH:mm'}}
       </text>
-      <text x="0" y="4" style="text-anchor: start; text-align: left;">
+      <text x="0" y="4" style="font-size: 2.7px; text-anchor: start; text-align: left;">
-        {{sample.initials}} {{sample.location}}
+        {{sample.location}}
+        {{sample.initials}}
       </text>
     </g>
   </g>

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

@@ -15,3 +15,8 @@
   [sample]="sample"
   [labelLayout]="settings.labelLayout"
 ></app-rectangle-datamatrix>
+<app-rectangle-datamatrix-rectangular
+  *ngIf="isLayout('rectangle_datamatrixrectangular')"
+  [sample]="sample"
+  [labelLayout]="settings.labelLayout"
+></app-rectangle-datamatrix-rectangular>

src/app/multiple-labels/multiple-labels.component.ts

@@ -17,7 +17,7 @@ export class MultipleLabelsComponent implements OnInit, AfterViewInit {
   numLabels = 10;
 
   constructor(private settingsService: SettingsService) {
-    const startingId = 391;
+    const startingId = 1;
     this.settings = this.settingsService.getSettings();
     this.layout = new LabelLayout(this.settings.labelLayout);
     this.layout.numCopies = this.numLabels;

src/app/settings/settings.component.html

@@ -30,7 +30,7 @@
         >
           <mat-select-trigger [ngClass]="'selected-label-layout'">{{selectedLabelLayout.name}}</mat-select-trigger>
           <mat-option
-            *ngFor="let layout of labelLayouts"
+            *ngFor="let layout of allLabelLayouts"
             [value]="layout.id"
             [ngStyle]="{height: 'inherit', width: 'inherit'}"
           >
@@ -60,6 +60,11 @@
                   [sample]="sampleForLayout(layout)"
                   [labelLayout]="layout"
                 ></app-rectangle-datamatrix>
+                <app-rectangle-datamatrix-rectangular
+                  *ngIf="layout.id === 'rectangle_datamatrixrectangular'"
+                  [sample]="sampleForLayout(layout)"
+                  [labelLayout]="layout"
+                ></app-rectangle-datamatrix-rectangular>
               </div>
             </div>
           </mat-option>

src/app/settings/settings.component.ts

@@ -20,7 +20,7 @@ export class SettingsComponent implements AfterViewInit {
   numCopiesFormControl: FormControl;
   labelLayoutFormControl: FormControl;
   locationIdFormControl: FormControl;
-  labelLayouts: LabelLayout[];
+  allLabelLayouts: LabelLayout[];
   fakeSample: Sample;
   fakeBarcodeValue: string;
 
@@ -45,7 +45,7 @@ export class SettingsComponent implements AfterViewInit {
       Validators.pattern(this.settings.locationIdRegExp),
     ]);
 
-    this.labelLayouts = Object.values(labelLayouts);
+    this.allLabelLayouts = Object.values(labelLayouts);
 
     this._loadFakeData();
   }
@@ -57,7 +57,7 @@ export class SettingsComponent implements AfterViewInit {
   get selectedLabelLayout(): LabelLayout {
     const selectedLayoutId = this.labelLayoutFormControl.value;
     if (selectedLayoutId) {
-      return this.labelLayouts.find(layout => layout.id === selectedLayoutId);
+      return this.allLabelLayouts.find(layout => layout.id === selectedLayoutId);
     }
   }