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] 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.$; } }