diff --git a/examples/uhk.key-design.mod-layer.svg b/examples/uhk.key-design.mod-layer.svg
new file mode 100644
index 00000000..2a5ebdf2
--- /dev/null
+++ b/examples/uhk.key-design.mod-layer.svg
@@ -0,0 +1,1047 @@
+
+
diff --git a/examples/uhk.key-design.mod-layer.with_alignments.svg b/examples/uhk.key-design.mod-layer.with_alignments.svg
new file mode 100644
index 00000000..17b064ad
--- /dev/null
+++ b/examples/uhk.key-design.mod-layer.with_alignments.svg
@@ -0,0 +1,1079 @@
+
+
diff --git a/package.json b/package.json
index 148ea295..c92972a9 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/keyboard-button-group.component.ts b/src/components/keyboard-button-group.component.ts
deleted file mode 100644
index 4032d61b..00000000
--- a/src/components/keyboard-button-group.component.ts
+++ /dev/null
@@ -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:
- `
-
-
- `,
- styles:
- [`
- :host {
- display: flex;
- }
-
- keyboard-button {
- border: 2px solid transparent;
- }
- `],
- directives: [KeyboardButtonComponent]
-})
-export class KeyboardButtonGroupComponent implements OnInit {
- @Input() keyboardButtons: KeyboardButton[];
- constructor() { }
-
- ngOnInit() { }
-
-}
diff --git a/src/components/keyboard-button.component.ts b/src/components/keyboard-button.component.ts
deleted file mode 100644
index 6609fb4e..00000000
--- a/src/components/keyboard-button.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, OnInit, Input } from 'angular2/core';
-
-@Component({
- selector: 'keyboard-button',
- template:
- `
-
- `,
- 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() { }
-
-}
diff --git a/src/components/keyboard-key.component.ts b/src/components/keyboard-key.component.ts
new file mode 100644
index 00000000..a2e6aad2
--- /dev/null
+++ b/src/components/keyboard-key.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, Input } from 'angular2/core';
+
+@Component({
+ selector: 'g[uhk-keyboard-key]',
+ template:
+ `
+
+ `
+})
+export class KeyboardKeyComponent implements OnInit {
+ @Input() id: string;
+ @Input() rx: string;
+ @Input() ry: string;
+ @Input() height: string;
+ @Input() width: string;
+
+ constructor() { }
+
+ ngOnInit() { }
+
+}
diff --git a/src/components/keyboard-button.model.ts b/src/components/keyboard-key.model.ts
similarity index 69%
rename from src/components/keyboard-button.model.ts
rename to src/components/keyboard-key.model.ts
index 651e2108..74321cd2 100644
--- a/src/components/keyboard-button.model.ts
+++ b/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;
}
diff --git a/src/components/keyboard.component.ts b/src/components/keyboard.component.ts
index 89db4f21..6b802c13 100644
--- a/src/components/keyboard.component.ts
+++ b/src/components/keyboard.component.ts
@@ -7,36 +7,43 @@ import {Module, ModuleComponent} from './module';
selector: 'keyboard',
template:
`
-
-
+
`,
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();
- }
-
- private loadKeyboardModules(): void {
- let svg: any = this.dps.getBaseLayer();
- this.modules = svg.g[0].g.map(obj => new Module(obj, svg.g[0].$.fill));
+ this.svg = this.dps.getBaseLayer();
+ this.viewBox = this.svg.$.viewBox;
+ this.transform = this.svg.g[0].$.transform;
+ this.fill = this.svg.g[0].$.fill;
+ this.modules = this.svg.g[0].g.map(obj => new Module(obj));
}
}
diff --git a/src/components/module.component.ts b/src/components/module.component.ts
index a70c7384..d22409ef 100644
--- a/src/components/module.component.ts
+++ b/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 {KeyboardButtonGroupComponent} from './keyboard-button-group.component';
+import {KeyboardKey} from './keyboard-key.model';
+import {KeyboardKeyComponent} from './keyboard-key.component';
@Component({
- selector: 'module',
+ selector: 'g[uhk-module]',
template:
`
-
+
+
`,
- styles:
- [`
- :host {
- display: flex;
- height: 100%;
- width: 100%;
- flex-direction: column;
- }
- `]
+ directives: [KeyboardKeyComponent]
})
export class ModuleComponent implements OnInit {
- @Input() case: any;
- @Input() keyboardButtons: KeyboardButton[];
- @Input() fill: string;
+ @Input() coverages: any[];
+ @Input() keyboardKeys: KeyboardKey[];
- constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef) {
- this.keyboardButtons = [];
+ constructor() {
+ 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;
}
}
diff --git a/src/components/module.model.ts b/src/components/module.model.ts
index e7d52df0..bcff62cb 100644
--- a/src/components/module.model.ts
+++ b/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 keyboardButtons: KeyboardButton[];
+ private coverages: any[];
+ private keyboardKeys: KeyboardKey[];
+ private attributes: any;
- constructor(obj: { rect: any[], path: any[] }, fill?: string) {
- this.keyboardButtons = obj.rect.map(rect => rect.$);
- this.keyboardButtons.forEach(keyboardButton => keyboardButton.fill = fill ? fill : 'black');
- this.case = obj.path[0].$;
+ constructor(obj: { rect: any[], path: any[], $: Object }) {
+ this.keyboardKeys = obj.rect.map(rect => rect.$);
+ this.coverages = obj.path;
+ this.attributes = obj.$;
}
}