From acb2fb0af24777198a224300091abe192896c079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= Date: Wed, 13 Apr 2016 22:17:20 +0200 Subject: [PATCH 1/5] Use one svg and render all keys of modules on it --- .../keyboard-button-group.component.ts | 34 ------------- src/components/keyboard-button.component.ts | 30 ----------- src/components/keyboard-key.component.ts | 25 ++++++++++ ...-button.model.ts => keyboard-key.model.ts} | 2 +- src/components/keyboard.component.ts | 30 ++++++----- src/components/module.component.ts | 50 ++++++------------- src/components/module.model.ts | 12 +++-- 7 files changed, 65 insertions(+), 118 deletions(-) delete mode 100644 src/components/keyboard-button-group.component.ts delete mode 100644 src/components/keyboard-button.component.ts create mode 100644 src/components/keyboard-key.component.ts rename src/components/{keyboard-button.model.ts => keyboard-key.model.ts} (80%) 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..efc03b2a --- /dev/null +++ b/src/components/keyboard-key.component.ts @@ -0,0 +1,25 @@ +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; + @Input() fill: string; + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/components/keyboard-button.model.ts b/src/components/keyboard-key.model.ts similarity index 80% rename from src/components/keyboard-button.model.ts rename to src/components/keyboard-key.model.ts index 651e2108..c4e45ab0 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; diff --git a/src/components/keyboard.component.ts b/src/components/keyboard.component.ts index 89db4f21..f1210419 100644 --- a/src/components/keyboard.component.ts +++ b/src/components/keyboard.component.ts @@ -7,36 +7,42 @@ 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; 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.modules = this.svg.g[0].g.map(obj => new Module(obj, this.svg.g[0].$.fill)); } } diff --git a/src/components/module.component.ts b/src/components/module.component.ts index a70c7384..ae0e359a 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() keyboardKeys: KeyboardKey[]; @Input() fill: string; - 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..f9d2951a 100644 --- a/src/components/module.model.ts +++ b/src/components/module.model.ts @@ -1,12 +1,14 @@ -import {KeyboardButton} from './keyboard-button.model'; +import {KeyboardKey} from './keyboard-key.model'; export class Module { private case: any; - private keyboardButtons: KeyboardButton[]; + 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'); + constructor(obj: { rect: any[], path: any[], $: Object }, fill?: string) { + this.keyboardKeys = obj.rect.map(rect => rect.$); + this.keyboardKeys.forEach(keyboardKey => keyboardKey.fill = fill ? fill : 'black'); this.case = obj.path[0].$; + this.attributes = obj.$; } } From d5dc8d8d0e3e387fa19b10d4b9bdaa8871a2f8b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= Date: Sat, 16 Apr 2016 14:39:20 +0200 Subject: [PATCH 2/5] Update angular2 (to 2.0.0-beta.15), webpack and their dependencies --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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", From c47188b2b262264049b481ba0f68b320bb3cd09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= Date: Sat, 16 Apr 2016 14:50:13 +0200 Subject: [PATCH 3/5] Add coverages of modules --- src/components/keyboard.component.ts | 2 +- src/components/module.component.ts | 3 ++- src/components/module.model.ts | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/keyboard.component.ts b/src/components/keyboard.component.ts index f1210419..d79c729e 100644 --- a/src/components/keyboard.component.ts +++ b/src/components/keyboard.component.ts @@ -10,7 +10,7 @@ import {Module, ModuleComponent} from './module'; rect.$); this.keyboardKeys.forEach(keyboardKey => keyboardKey.fill = fill ? fill : 'black'); - this.case = obj.path[0].$; + this.coverages = obj.path; this.attributes = obj.$; } } From d9360b2fb73fe6a4d0ba2acc6e6ace7edef94a9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= Date: Sat, 16 Apr 2016 14:57:06 +0200 Subject: [PATCH 4/5] Move the fill of keys to the root --- src/components/keyboard-key.component.ts | 1 - src/components/keyboard-key.model.ts | 1 - src/components/keyboard.component.ts | 7 ++++--- src/components/module.component.ts | 3 +-- src/components/module.model.ts | 3 +-- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/keyboard-key.component.ts b/src/components/keyboard-key.component.ts index efc03b2a..a2e6aad2 100644 --- a/src/components/keyboard-key.component.ts +++ b/src/components/keyboard-key.component.ts @@ -16,7 +16,6 @@ export class KeyboardKeyComponent implements OnInit { @Input() ry: string; @Input() height: string; @Input() width: string; - @Input() fill: string; constructor() { } diff --git a/src/components/keyboard-key.model.ts b/src/components/keyboard-key.model.ts index c4e45ab0..74321cd2 100644 --- a/src/components/keyboard-key.model.ts +++ b/src/components/keyboard-key.model.ts @@ -6,5 +6,4 @@ export interface KeyboardKey { ry: string; height: string; width: string; - fill: string; } diff --git a/src/components/keyboard.component.ts b/src/components/keyboard.component.ts index d79c729e..6b802c13 100644 --- a/src/components/keyboard.component.ts +++ b/src/components/keyboard.component.ts @@ -8,11 +8,10 @@ import {Module, ModuleComponent} from './module'; template: ` - + @@ -33,6 +32,7 @@ export class KeyboardComponent implements OnInit { private modules: Module[]; private svg: any; private transform: string; + private fill: string; constructor(private dps: DataProviderService) { this.modules = []; @@ -42,7 +42,8 @@ export class KeyboardComponent implements OnInit { this.svg = this.dps.getBaseLayer(); this.viewBox = this.svg.$.viewBox; this.transform = this.svg.g[0].$.transform; - this.modules = this.svg.g[0].g.map(obj => new Module(obj, this.svg.g[0].$.fill)); + 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 526c0fc1..d22409ef 100644 --- a/src/components/module.component.ts +++ b/src/components/module.component.ts @@ -9,7 +9,7 @@ import {KeyboardKeyComponent} from './keyboard-key.component'; ` rect.$); - this.keyboardKeys.forEach(keyboardKey => keyboardKey.fill = fill ? fill : 'black'); this.coverages = obj.path; this.attributes = obj.$; } From 387a4e12e881611aa8dfd77b50c4203afe4ba595 Mon Sep 17 00:00:00 2001 From: Arpad Csanyi Date: Sat, 16 Apr 2016 15:41:21 +0200 Subject: [PATCH 5/5] Add mod layer designs with the menu key. #27 --- examples/uhk.key-design.mod-layer.svg | 1047 ++++++++++++++++ ...k.key-design.mod-layer.with_alignments.svg | 1079 +++++++++++++++++ 2 files changed, 2126 insertions(+) create mode 100644 examples/uhk.key-design.mod-layer.svg create mode 100644 examples/uhk.key-design.mod-layer.with_alignments.svg 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 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Shift + + + Fn + + + Alt + + + Super + + + Ctrl + + + Mod + + + + + + + + + + + + + + + + + + + + + + + + Mouse + + + Shift + + + Ctrl + + + Super + + + Alt + + + Fn + + + Mod + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Shift + + + Fn + + + Alt + + + Super + + + Ctrl + + + Mod + + + + + + + + + + + + + + + + + + + + + + + + Mouse + + + Shift + + + Ctrl + + + Super + + + Alt + + + Fn + + + Mod + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +