feat(print): basic print tool (#35)

.angular-cli.json

@@ -42,7 +42,8 @@
         "style/main.styl"
       ],
       "scripts": [
-        "../../node_modules/openlayers/dist/ol.js"
+        "../../node_modules/openlayers/dist/ol.js",
+        "../../node_modules/jspdf/dist/jspdf.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

package.json

@@ -44,8 +44,10 @@
     "@angular/material": "^2.0.0-beta.3",
     "@angular/platform-browser": "^4.0.0",
     "@ngx-translate/core": "^6.0.1",
+    "@types/jspdf": "^1.1.31",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
+    "jspdf": "^1.3.3",
     "md2": "0.0.18",
     "openlayers": "^4.0.1",
     "rxjs": "^5.1.0",

src/demo-app/app/app.component.html

@@ -126,4 +126,12 @@
         <igo-toolbox [animate]="true"></igo-toolbox>
     </md-card-content>
   </md-card>
+
+  <md-card>
+    <md-card-subtitle>Print module</md-card-subtitle>
+    <md-card-title>print.component</md-card-title>
+    <md-card-content>
+      <igo-print [map]="map"></igo-print>
+    </md-card-content>
+  </md-card>
 </md-sidenav-container>

src/demo-app/contexts/_default.json

@@ -18,7 +18,8 @@
     "searchResults",
     "mapDetails",
     "timeAnalysis",
-    "contextManager"
+    "contextManager",
+    "print"
   ],
   "tools": [
     {
@@ -32,6 +33,9 @@
     },
     {
       "name": "contextManager"
+    },
+    {
+      "name": "print"
     }
   ]
 }

src/lib/module.ts

@@ -21,12 +21,12 @@ import { IgoFilterModule } from './filter/index';
 import { IgoLayerModule } from './layer/index';
 import { IgoMapModule } from './map/index';
 import { IgoOverlayModule } from './overlay/index';
+import { IgoPrintModule } from './print/index';
 import { IgoQueryModule } from './query/index';
 import { IgoSearchModule } from './search/index';
 import { IgoSharedModule } from './shared/index';
 import { IgoToolModule } from './tool/index';
 
-
 const IGO_MODULES = [
   IgoLanguageModule,
   IgoContextModule,
@@ -35,6 +35,7 @@ const IGO_MODULES = [
   IgoLayerModule,
   IgoMapModule,
   IgoOverlayModule,
+  IgoPrintModule,
   IgoQueryModule,
   IgoSearchModule,
   IgoSharedModule,
@@ -46,16 +47,7 @@ const IGO_MODULES = [
     MaterialModule.forRoot(),
 
     IgoCoreModule.forRoot(),
-    IgoLanguageModule.forRoot(),
-    IgoContextModule.forRoot(),
-    IgoFeatureModule.forRoot(),
-    IgoFilterModule.forRoot(),
-    IgoLayerModule.forRoot(),
-    IgoMapModule.forRoot(),
-    IgoOverlayModule.forRoot(),
-    IgoQueryModule.forRoot(),
-    IgoSearchModule.forRoot(),
-    IgoToolModule.forRoot()
+    ...IGO_MODULES.map(m => m.forRoot())
   ],
   exports: IGO_MODULES
 })

src/lib/print/index.ts

@@ -0,0 +1 @@
+export * from './module';

src/lib/print/module.ts

@@ -0,0 +1,38 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { IgoSharedModule } from '../shared';
+
+import { PrintComponent, PrintBindingDirective } from './print';
+import { PrintFormComponent } from './print-form';
+import { PrintService } from './shared';
+
+
+@NgModule({
+  imports: [
+    IgoSharedModule
+  ],
+  exports: [
+    PrintComponent,
+    PrintBindingDirective,
+    PrintFormComponent
+  ],
+  declarations: [
+    PrintComponent,
+    PrintBindingDirective,
+    PrintFormComponent
+  ]
+})
+export class IgoPrintModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: IgoPrintModule,
+      providers: [
+        PrintService
+      ]
+    };
+  }
+}
+
+export * from './shared';
+export * from './print';
+export * from './print-form';

src/lib/print/print-form/index.ts

@@ -0,0 +1 @@
+export * from './print-form.component';

src/lib/print/print-form/print-form.component.html

@@ -0,0 +1,41 @@
+<form [formGroup]="form">
+
+  <div class="igo-input-container">
+    <md-select
+      formControlName="format"
+      placeholder="{{'igo.format' | translate}}">
+      <md-option *ngFor="let format of formats | keyvalue " [value]="format.key">
+        {{format.value}}
+      </md-option>
+    </md-select>
+  </div>
+
+  <div class="igo-input-container">
+    <md-select
+      formControlName="resolution"
+      placeholder="{{'igo.resolution' | translate}}">
+      <md-option *ngFor="let resolution of resolutions | keyvalue " [value]="resolution.key">
+        {{resolution.value + ' PPI'}}
+      </md-option>
+    </md-select>
+  </div>
+
+  <div class="igo-input-container">
+    <md-radio-group formControlName="orientation" class="horizontal">
+      <md-radio-button *ngFor="let orientation of orientations | keyvalue " [value]="orientation.key">
+        {{('igo.' + orientation.value) | translate}}  
+      </md-radio-button>
+    </md-radio-group>
+  </div>
+
+  <div class="igo-form-button-group">
+    <button
+      md-raised-button
+      type="button"
+      [disabled]="!form.valid"
+      (click)="handleFormSubmit(form.value, form.valid)">
+      {{'igo.print' | translate}}
+    </button>
+  </div>
+
+</form>

src/lib/print/print-form/print-form.component.spec.ts

@@ -0,0 +1,32 @@
+import { async, TestBed } from '@angular/core/testing';
+// import { ComponentFixture } from '@angular/core/testing';
+
+import { IgoSharedModule } from '../../shared';
+
+import { PrintFormComponent } from './print-form.component';
+
+describe('PrintFormComponent', () => {
+  // let component: PrintFormComponent;
+  // let fixture: ComponentFixture<PrintFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule,
+      ],
+      declarations: [ PrintFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  /*
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrintFormComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  */
+});

src/lib/print/print-form/print-form.component.styl

@@ -0,0 +1 @@
+@require '../../../style/var.styl';

src/lib/print/print-form/print-form.component.ts

@@ -0,0 +1,79 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+
+import { PrintOptions, PrintFormat, PrintOrientation,
+         PrintResolution } from '../shared';
+
+@Component({
+  selector: 'igo-print-form',
+  templateUrl: './print-form.component.html',
+  styleUrls: ['./print-form.component.styl']
+})
+export class PrintFormComponent {
+
+  public form: FormGroup;
+  public submitted: boolean;
+
+  public formats = PrintFormat;
+  public orientations = PrintOrientation;
+  public resolutions = PrintResolution;
+
+  @Input()
+  get format(): PrintFormat { return this.formatField.value; }
+  set format(value: PrintFormat) {
+    this.formatField.setValue(value || PrintFormat.A4, {
+      onlySelf: true
+    });
+  }
+
+  @Input()
+  get orientation(): PrintOrientation { return this.orientationField.value; }
+  set orientation(value: PrintOrientation) {
+    this.orientationField.setValue(value || PrintOrientation.landscape, {
+      onlySelf: true
+    });
+  }
+
+  @Input()
+  get resolution(): PrintResolution { return this.resolutionField.value; }
+  set resolution(value: PrintResolution) {
+    this.resolutionField.setValue(value || PrintResolution['72'], {
+      onlySelf: true
+    });
+  }
+
+  get formatField () {
+    return (<FormControl>this.form.controls['format']);
+  }
+
+  get orientationField () {
+    return (<FormControl>this.form.controls['orientation']);
+  }
+
+  get resolutionField () {
+    return (<FormControl>this.form.controls['resolution']);
+  }
+
+  @Output() submit: EventEmitter<PrintOptions> = new EventEmitter();
+
+  constructor(private formBuilder: FormBuilder) {
+    this.form = this.formBuilder.group({
+      format: ['', [
+        Validators.required
+      ]],
+      resolution: ['', [
+        Validators.required
+      ]],
+      orientation: ['', [
+        Validators.required
+      ]]
+    });
+  }
+
+  handleFormSubmit(data: PrintOptions, isValid: boolean) {
+    this.submitted = true;
+    if (isValid) {
+      this.submit.emit(data);
+    }
+  }
+}

src/lib/print/print/index.ts

@@ -0,0 +1,2 @@
+export * from './print.component';
+export * from './print-binding.directive';

src/lib/print/print/print-binding.directive.spec.ts

@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+
+describe('PrintBindingDirective', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [],
+      providers: []
+    });
+  });
+
+  it('should create an instance', () => {
+    expect(true).toBeTruthy();
+  });
+});

src/lib/print/print/print-binding.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, Self, OnInit } from '@angular/core';
+
+import { MapService } from '../../map';
+import { PrintComponent } from './print.component';
+
+
+@Directive({
+  selector: '[igoPrintBinding]'
+})
+export class PrintBindingDirective implements OnInit {
+
+  private component: PrintComponent;
+
+  constructor(@Self() component: PrintComponent,
+              private mapService: MapService) {
+    this.component = component;
+  }
+
+  ngOnInit() {
+    this.component.map = this.mapService.getMap();
+  }
+
+}

src/lib/print/print/print.component.html

@@ -0,0 +1,6 @@
+<igo-print-form
+  [format]="format"
+  [orientation]="orientation"
+  [resolution]="resolution"
+  (submit)="handleFormSubmit($event)">    
+</igo-print-form>

src/lib/print/print/print.component.spec.ts

@@ -0,0 +1,40 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgoTestModule } from '../../../test/module';
+import { IgoSharedModule } from '../../shared';
+
+import { PrintService } from '../shared';
+import { PrintFormComponent } from '../print-form';
+import { PrintComponent } from './print.component';
+
+
+describe('PrintComponent', () => {
+  let component: PrintComponent;
+  let fixture: ComponentFixture<PrintComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoTestModule,
+        IgoSharedModule,
+      ],
+      declarations: [
+        PrintComponent,
+        PrintFormComponent
+      ],
+      providers: [
+        PrintService
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrintComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/print/print/print.component.styl

@@ -0,0 +1 @@
+@require '../../../style/var.styl';