Merge branch 'master' of https://github.com/UltimateHackingKeyboard/agent-mockup

package.json

@@ -8,7 +8,7 @@
   },
   "license": "GPL-3.0",
   "devDependencies": {
-    "angular2": "2.0.0-beta.13",
+    "angular2": "2.0.0-beta.15",
     "browser-sync": "^2.11.0",
     "es6-shim": "^0.35.0",
     "gulp": "^3.9.0",
@@ -17,14 +17,14 @@
     "gulp-sourcemaps": "^1.6.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
-    "ts-loader": "^0.8.1",
+    "ts-loader": "^0.8.2",
     "tslint": "^3.6.0",
     "typings": "^0.7.12",
-    "webpack": "^1.12.14",
+    "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
     "xml-loader": "^1.1.0",
     "yargs": "^4.2.0",
-    "zone.js": "^0.6.9"
+    "zone.js": "^0.6.11"
   },
   "dependencies": {
     "bootstrap": "^3.3.6",
@@ -33,7 +33,7 @@
     "jquery": "^2.2.2",
     "select2": "^4.0.2",
     "sortablejs": "^1.4.2",
-    "typescript": "^1.8.9"
+    "typescript": "^1.8.10"
   },
   "scripts": {
     "postinstall": "typings install",

src/components/keyboard-button-group.component.ts

@@ -1,34 +0,0 @@
-import { Component, OnInit, Input } from 'angular2/core';
-
-import {KeyboardButtonComponent} from './keyboard-button.component';
-import {KeyboardButton} from './keyboard-button.model';
-
-@Component({
-    selector: 'keyboard-button-group',
-    template:
-    `
-        <keyboard-button *ngFor="#keyboardButton of keyboardButtons"
-                            [id]="keyboardButton.id" [fill]="keyboardButton.fill"
-                            [rx]="keyboardButton.rx" [ry]="keyboardButton.ry"
-                            [height]="keyboardButton.height" [width]="keyboardButton.width">
-        </keyboard-button>
-    `,
-    styles:
-    [`
-        :host {
-            display: flex;
-        }
-
-        keyboard-button {
-            border: 2px solid transparent;
-        }
-    `],
-    directives: [KeyboardButtonComponent]
-})
-export class KeyboardButtonGroupComponent implements OnInit {
-    @Input() keyboardButtons: KeyboardButton[];
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keyboard-button.component.ts

@@ -1,30 +0,0 @@
-import { Component, OnInit, Input } from 'angular2/core';
-
-@Component({
-    selector: 'keyboard-button',
-    template:
-    `
-         <svg xmlns="http://www.w3.org/2000/svg" [attr.width]="width" [attr.height]="height" [attr.fill]="fill">
-             <rect [id]="id" [attr.rx]="rx" [attr.ry]="ry" [attr.height]="height" [attr.width]="width"/>
-         </svg>
-     `,
-    styles:
-    [`
-        :host {
-           display: flex;
-        }
-    `]
-})
-export class KeyboardButtonComponent implements OnInit {
-    @Input() id: string;
-    @Input() rx: string;
-    @Input() ry: string;
-    @Input() height: string;
-    @Input() width: string;
-    @Input() fill: string;
-
-    constructor() { }
-
-    ngOnInit() { }
-
-}

src/components/keyboard-key.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from 'angular2/core';
+
+@Component({
+    selector: 'g[uhk-keyboard-key]',
+    template:
+    `
+        <svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+                            [attr.height]="height"  [attr.width]="width"
+                            [attr.fill]="fill"
+        />
+     `
+})
+export class KeyboardKeyComponent implements OnInit {
+    @Input() id: string;
+    @Input() rx: string;
+    @Input() ry: string;
+    @Input() height: string;
+    @Input() width: string;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/keyboard-key.model.ts

@@ -1,4 +1,4 @@
-export interface KeyboardButton {
+export interface KeyboardKey {
     id: string;
     x: string;
     y: string;
@@ -6,5 +6,4 @@ export interface KeyboardButton {
     ry: string;
     height: string;
     width: string;
-    fill: string;
 }

src/components/keyboard.component.ts

@@ -7,36 +7,43 @@ import {Module, ModuleComponent} from './module';
     selector: 'keyboard',
     template:
     `
-        <module *ngIf="modules.length > 0"
+        <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
-                [case]="modules[0].case"
+            <svg:g [attr.transform]="transform" [attr.fill]="fill">
-                [keyboardButtons]="modules[0].keyboardButtons"
+                <svg:g uhk-module *ngFor="#module of modules"
-                [fill]="modules[0].fill">
+                        [coverages]="module.coverages"
-        </module>
+                        [keyboardKeys]="module.keyboardKeys"
+                        [attr.transform]="module.attributes.transform"
+                />
+            </svg:g>
+        </svg>
     `,
     styles:
     [`
         :host {
             display: flex;
-            height: 100%;
             width: 100%;
+            height: 100%;
         }
     `],
     directives: [ModuleComponent]
 })
 export class KeyboardComponent implements OnInit {
+    private viewBox: string;
     private modules: Module[];
+    private svg: any;
+    private transform: string;
+    private fill: string;
 
     constructor(private dps: DataProviderService) {
         this.modules = [];
     }
 
     ngOnInit() {
-        this.loadKeyboardModules();
+        this.svg = this.dps.getBaseLayer();
-    }
+        this.viewBox = this.svg.$.viewBox;
-
+        this.transform = this.svg.g[0].$.transform;
-    private loadKeyboardModules(): void {
+        this.fill = this.svg.g[0].$.fill;
-        let svg: any = this.dps.getBaseLayer();
+        this.modules = this.svg.g[0].g.map(obj => new Module(obj));
-        this.modules = svg.g[0].g.map(obj => new Module(obj, svg.g[0].$.fill));
     }
 
 }

src/components/module.component.ts

@@ -1,54 +1,32 @@
-import { Component, OnInit, Input, DynamicComponentLoader, ElementRef, ComponentRef } from 'angular2/core';
+import { Component, OnInit, Input} from 'angular2/core';
 
-import {KeyboardButton} from './keyboard-button.model';
+import {KeyboardKey} from './keyboard-key.model';
-import {KeyboardButtonGroupComponent} from './keyboard-button-group.component';
+import {KeyboardKeyComponent} from './keyboard-key.component';
 
 @Component({
-    selector: 'module',
+    selector: 'g[uhk-module]',
     template:
     `
-        <div #row></div>
+        <svg:path *ngFor="#path of coverages" [attr.d]="path.$.d"/>
+        <svg:g uhk-keyboard-key *ngFor="#key of keyboardKeys"
+                [id]="key.id"
+                [rx]="key.rx" [ry]="key.ry"
+                [width]="key.width" [height]="key.height"
+                [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
+        />
     `,
-    styles:
+    directives: [KeyboardKeyComponent]
-    [`
-        :host {
-            display: flex;
-            height: 100%;
-            width: 100%;
-            flex-direction: column;
-        }
-    `]
 })
 export class ModuleComponent implements OnInit {
-    @Input() case: any;
+    @Input() coverages: any[];
-    @Input() keyboardButtons: KeyboardButton[];
+    @Input() keyboardKeys: KeyboardKey[];
-    @Input() fill: string;
 
-    constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) {
+    constructor() {
-        this.keyboardButtons = [];
+        this.keyboardKeys = [];
     }
 
     ngOnInit() {
-        this.getButtonGroups().forEach(buttonGroup => {
-            this.dcl.loadIntoLocation(KeyboardButtonGroupComponent, this.elementRef, 'row')
-                .then((bttnComponentRef: ComponentRef) => {
-                    let group: KeyboardButtonGroupComponent = bttnComponentRef.instance;
-                    group.keyboardButtons = buttonGroup;
-                });
-        });
-    }
 
-    private getButtonGroups(): KeyboardButton[][] {
-        let buttonGroups: KeyboardButton[][] = [];
-        let buttonGroup: KeyboardButton[] = [];
-        this.keyboardButtons.forEach(keyboardButton => {
-            if (buttonGroup.length > 0 && buttonGroup[buttonGroup.length - 1].y !== keyboardButton.y) {
-                buttonGroups.push(buttonGroup);
-                buttonGroup = [];
-            }
-            buttonGroup.push(keyboardButton);
-        });
-        return buttonGroups;
     }
 
 }

src/components/module.model.ts

@@ -1,12 +1,13 @@
-import {KeyboardButton} from './keyboard-button.model';
+import {KeyboardKey} from './keyboard-key.model';
 
 export class Module {
-    private case: any;
+    private coverages: any[];
-    private keyboardButtons: KeyboardButton[];
+    private keyboardKeys: KeyboardKey[];
+    private attributes: any;
 
-    constructor(obj: { rect: any[], path: any[] }, fill?: string) {
+    constructor(obj: { rect: any[], path: any[], $: Object }) {
-        this.keyboardButtons = obj.rect.map(rect => rect.$);
+        this.keyboardKeys = obj.rect.map(rect => rect.$);
-        this.keyboardButtons.forEach(keyboardButton => keyboardButton.fill = fill ? fill : 'black');
+        this.coverages = obj.path;
-        this.case = obj.path[0].$;
+        this.attributes = obj.$;
     }
 }