docs: add triangle example & add renderer into

Author: irustm

Diff for: README.md

@@ -105,9 +105,13 @@ component.html
 </canvas>
 ```
 
-Graph example:
+How to work renderer:
 
-<img src ="https://github.com/irustm/angular-canvas/blob/master/assets/graph-example2.png?raw=true">
+<img src ="https://github.com/irustm/angular-canvas/blob/master/assets/renderer.png?raw=true">
+
+Demo example:
+
+<img src ="https://github.com/irustm/angular-canvas/blob/master/assets/graph-example3.png?raw=true">
 
 Game example:
 

Diff for: assets/graph-example3.png

@@ -3,7 +3,7 @@ import { CanvasComponent } from 'angular-canvas';
 
 @CanvasComponent
 @Component({
-  selector: 'app-graph-canvas-example',
+  selector: 'app-graph-canvas',
   templateUrl: './graph-canvas.component.html',
   styleUrls: ['./graph-canvas.component.scss'],
 })

Diff for: assets/renderer.png

@@ -0,0 +1,12 @@
+<div class="canvas-container">
+  <canvas>
+    <triangle
+      [x]="mouseX"
+      [y]="mouseY"
+      (hovered)="hover(true)"
+      (unhovered)="hover(false)"
+    ></triangle>
+  </canvas>
+</div>
+
+<div *ngIf="isHovered" class="hovered-text">Hover: true</div>

Diff for: src/app/demos/graph-canvas/graph-canvas.component.html renamed to src/app/demos/components/graph-canvas/graph-canvas.component.html

@@ -0,0 +1,14 @@
+.canvas-container {
+  width: 250px;
+  height: 190px;
+  margin: 0 auto;
+  position: relative;
+}
+
+canvas {
+  width: 100%;
+  left: 0;
+}
+.hovered-text {
+  text-align: center;
+}

Diff for: src/app/demos/graph-canvas/graph-canvas.component.scss renamed to src/app/demos/components/graph-canvas/graph-canvas.component.scss

@@ -0,0 +1,25 @@
+import { Component, HostListener } from '@angular/core';
+import { CanvasComponent } from 'angular-canvas';
+
+@CanvasComponent
+@Component({
+  selector: 'app-triangle',
+  templateUrl: './triangle.component.html',
+  styleUrls: ['./triangle.component.scss'],
+})
+export class TriangleComponent {
+  public mouseX = 0;
+  public mouseY = 0;
+
+  public isHovered = false;
+
+  @HostListener('mousemove', ['$event'])
+  private onMouseMove(event: MouseEvent) {
+    this.mouseX = event.offsetX;
+    this.mouseY = event.offsetY;
+  }
+
+  public hover(value: boolean) {
+    this.isHovered = value;
+  }
+}

Diff for: src/app/demos/graph-canvas/graph-canvas.component.ts renamed to src/app/demos/components/graph-canvas/graph-canvas.component.ts

@@ -0,0 +1,7 @@
+<h4 class="title">Graph example</h4>
+<div class="description">Press Scroll < | > or zoom (Ctrl) graph</div>
+<app-graph-canvas></app-graph-canvas>
+
+<h4 class="title">Hover Output example</h4>
+<div class="description">Hover to triangle</div>
+<app-triangle></app-triangle>

Diff for: src/app/demos/components/triangle/triangle.component.html

@@ -12,7 +12,7 @@ h4.title {
   text-align: center;
 }
 
-app-graph-canvas-example {
+app-graph-canvas, app-triangle {
   position: relative;
   display: block;
   width: 100%;

Diff for: src/app/demos/components/triangle/triangle.component.scss

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-demo-container',
+  templateUrl: './container.component.html',
+  styleUrls: ['./container.component.scss'],
+})
+export class ContainerComponent {}

Diff for: src/app/demos/components/triangle/triangle.component.ts

@@ -3,21 +3,36 @@ import { CommonModule } from '@angular/common';
 import { CanvasDomModule } from 'angular-canvas';
 import { RouterModule } from '@angular/router';
 
-import { GraphCanvasComponent } from './graph-canvas/graph-canvas.component';
-import { GraphContainerComponent } from './graph-container/graph-container.component';
+import { GraphCanvasComponent } from './components/graph-canvas/graph-canvas.component';
 
-import { NgText, NgRect, NgLine, NgGraph, NgGrid } from './elements';
+import {
+  NgText,
+  NgRect,
+  NgLine,
+  NgGraph,
+  NgGrid,
+  TriangleElement,
+} from './elements';
+import { TriangleComponent } from './components/triangle/triangle.component';
+import { ContainerComponent } from './container/container.component';
 
 // @ts-ignore
 @NgModule({
-  declarations: [GraphCanvasComponent, GraphContainerComponent],
+  declarations: [GraphCanvasComponent, ContainerComponent, TriangleComponent],
   imports: [
     CommonModule,
-    CanvasDomModule.forRoot([NgText, NgRect, NgLine, NgGraph, NgGrid]),
+    CanvasDomModule.forRoot([
+      NgText,
+      NgRect,
+      NgLine,
+      NgGraph,
+      NgGrid,
+      TriangleElement,
+    ]),
     RouterModule.forChild([
       {
         path: '',
-        component: GraphContainerComponent,
+        component: ContainerComponent,
       },
     ]),
   ],

Diff for: src/app/demos/container/container.component.html

@@ -1,4 +1,3 @@
-import { RendererStyleFlags2 } from '@angular/core';
 import { NgCanvas, NgCanvasElement, CanvasElement } from 'angular-canvas';
 
 const STEP = 20;
@@ -20,20 +19,10 @@ export class NgGrid implements NgCanvasElement {
   // Attributes
   public strokeStyle = 'gray';
 
-  appendChild(newChild: any): void {}
-
-  insertBefore(newChild: any, refChild: any): void {}
-
-  removeAttribute(name: string, namespace?: string | null): void {}
-
   removeChild(oldChild: any): void {
     this.parent.removeChild(oldChild);
   }
 
-  removeClass(name: string): void {}
-
-  removeStyle(style: string, flags?: RendererStyleFlags2): void {}
-
   setNgAttribute(name: string, value: string, namespace?: string | null): void {
     this[name] = value;
     this.parent && this.parent.drawAll();
@@ -44,10 +33,6 @@ export class NgGrid implements NgCanvasElement {
     this.parent.drawAll();
   }
 
-  setStyle(style: string, value: any, flags?: RendererStyleFlags2): void {}
-
-  setValue(): void {}
-
   draw(context: CanvasRenderingContext2D): void {
     const viewWidth = this.parent.element.width;
     const viewHeight = this.parent.element.height;
@@ -80,6 +65,4 @@ export class NgGrid implements NgCanvasElement {
     context.strokeStyle = this.strokeStyle;
     context.stroke();
   }
-
-  addClass(name): void {}
 }

Diff for: src/app/demos/graph-container/graph-container.component.scss renamed to src/app/demos/container/container.component.scss

@@ -1,5 +1,6 @@
-export {NgText} from './text';
-export {NgRect} from './rect';
-export {NgLine} from './line';
-export {NgGraph} from './graph';
-export {NgGrid} from './grid';
+export { NgText } from './text.element';
+export { NgRect } from './rect.element';
+export { NgLine } from './line.element';
+export { NgGraph } from './graph.element';
+export { NgGrid } from './grid.element';
+export { TriangleElement } from './triangle.element';

Diff for: src/app/demos/container/container.component.ts

@@ -1,8 +1,7 @@
-import {RendererStyleFlags2} from '@angular/core';
-import {NgCanvas, NgCanvasElement, CanvasElement} from 'angular-canvas';
+import { NgCanvas, NgCanvasElement, CanvasElement } from 'angular-canvas';
 
 @CanvasElement({
-  selector: 'line'
+  selector: 'line',
 })
 export class NgLine implements NgCanvasElement {
   public parent: NgCanvas;
@@ -16,28 +15,10 @@ export class NgLine implements NgCanvasElement {
   // Attributes
   public strokeStyle = 'black';
 
-  appendChild(newChild: any): void {
-  }
-
-  addClass(name): void {
-  }
-
-  insertBefore(newChild: any, refChild: any): void {
-  }
-
-  removeAttribute(name: string, namespace?: string | null): void {
-  }
-
   removeChild(oldChild: any): void {
     this.parent.removeChild(oldChild);
   }
 
-  removeClass(name: string): void {
-  }
-
-  removeStyle(style: string, flags?: RendererStyleFlags2): void {
-  }
-
   setNgAttribute(name: string, value: string, namespace?: string | null): void {
     this[name] = value;
     this.parent && this.parent.drawAll();
@@ -48,12 +29,6 @@ export class NgLine implements NgCanvasElement {
     this.parent.drawAll();
   }
 
-  setStyle(style: string, value: any, flags?: RendererStyleFlags2): void {
-  }
-
-  setValue(): void {
-  }
-
   draw(context: CanvasRenderingContext2D): void {
     context.strokeStyle = this.strokeStyle;
     context.beginPath();

Diff for: src/app/demos/demos.module.ts

@@ -13,21 +13,10 @@ export class NgRect implements NgCanvasElement {
   public h: number;
   public fillStyle = 'black';
 
-  appendChild(newChild: any): void {}
-  addClass(name): void {}
-
-  insertBefore(newChild: any, refChild: any): void {}
-
-  removeAttribute(name: string, namespace?: string | null): void {}
-
   removeChild(oldChild: any): void {
     this.parent.removeChild(oldChild);
   }
 
-  removeClass(name: string): void {}
-
-  removeStyle(style: string, flags?: RendererStyleFlags2): void {}
-
   setNgAttribute(name: string, value: string, namespace?: string | null): void {
     this[name] = value;
     this.parent && this.parent.drawAll();
@@ -38,10 +27,6 @@ export class NgRect implements NgCanvasElement {
     this.parent.drawAll();
   }
 
-  setStyle(style: string, value: any, flags?: RendererStyleFlags2): void {}
-
-  setValue(): void {}
-
   draw(context: CanvasRenderingContext2D): void {
     context.fillRect(this.x, this.y, this.w, this.h);
   }

Diff for: src/app/demos/elements/graph.ts renamed to src/app/demos/elements/graph.element.ts

@@ -1,9 +1,7 @@
-import {NgCanvasElement} from '../../../../projects/angular-canvas-lib/src/lib/components/ng-canvas-element';
-import {RendererStyleFlags2} from '@angular/core';
-import {NgCanvas, CanvasElement} from 'angular-canvas';
+import { NgCanvas, CanvasElement, NgCanvasElement } from 'angular-canvas';
 
 @CanvasElement({
-  selector: 'text'
+  selector: 'text',
 })
 export class NgText implements NgCanvasElement {
   public parent: NgCanvas;
@@ -14,26 +12,10 @@ export class NgText implements NgCanvasElement {
 
   constructor() {}
 
-  appendChild(newChild: any): void {
-  }
-  addClass(name): void {
-  }
-  insertBefore(newChild: any, refChild: any): void {
-  }
-
-  removeAttribute(name: string, namespace?: string | null): void {
-  }
-
   removeChild(oldChild: any): void {
     this.parent.removeChild(oldChild);
   }
 
-  removeClass(name: string): void {
-  }
-
-  removeStyle(style: string, flags?: RendererStyleFlags2): void {
-  }
-
   setNgAttribute(name: string, value: string, namespace?: string | null): void {
     this[name] = value;
   }
@@ -42,12 +24,6 @@ export class NgText implements NgCanvasElement {
     this[name] = value;
   }
 
-  setStyle(style: string, value: any, flags?: RendererStyleFlags2): void {
-  }
-
-  setValue(value: any): void {
-  }
-
   draw(context: CanvasRenderingContext2D): void {
     if (this.text && this.x && this.y) {
       context.fillStyle = this.fillStyle;