Merge pull request #54 from haifishtime/master

Redo ng2-konva in Angular 16

.editorconfig

@@ -1,4 +1,4 @@
-# Editor configuration, see http://editorconfig.org
+# Editor configuration, see https://editorconfig.org
 root = true
 
 [*]
@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,49 @@
+{
+  "root": true,
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@typescript-eslint/explicit-function-return-type": "error"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {
+        "prettier/prettier": ["error", { "parser": "angular" }]
+      }
+    }
+  ]
+}

.gitignore

@@ -1,44 +1,42 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
+/bazel-out
 
-# dependencies
+# Node
 /node_modules
+npm-debug.log
+yarn-error.log
 
 # IDEs and editors
-/.idea
+.idea/
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*
 
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
 /connect.lock
 /coverage
 /libpeerconnection.log
-npm-debug.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-# System Files
+# System files
 .DS_Store
 Thumbs.db
-
-.doc

README.md

@@ -8,13 +8,13 @@
   </a>
   </span>
 
-![Ng2Konva Logo](https://raw.githubusercontent.com/rafaesc/ng2-konva/master/n2-konva.png)
+![Ng2Konva Logo](n2-konva.png)
 
 **ng2-konva** is a JavaScript library for drawing complex canvas graphics using Angular.
 
 It provides declarative and reactive bindings to the [Konva Framework](http://konvajs.github.io/).
 
-All `ng2-konva` components correspond to `Konva` components of the same name with the prefix 'ko-'. All the parameters available for `Konva` objects can add as `config` in the prop as Observable for corresponding `ng2-konva` components.
+All `ng2-konva` components correspond to `Konva` components of the same name with the prefix 'ko-'. All the parameters available for `Konva` objects can be passed as `config` to the corresponding `ng2-konva` components.
 
 Core shapes are: ko-stage, ko-layer, ko-rect, ko-circle, ko-ellipse, ko-line, ko-image, ko-text, ko-text-path, ko-star, ko-label, SVG Path, ko-regular-polygon.
 Also you can create custom shape.
@@ -30,68 +30,62 @@ To get more info about `Konva` you can read [Konva Overview](http://konvajs.gith
 To install this library, run:
 
 ```bash
-$ npm install konva ng2-konva --save
+$ npm install ng2-konva --save
 ```
 
-and then from your Angular `AppModule`:
+`ng2-konva` components are all standalone. There are two components you will need to import: `CoreShapeComponent` and `StageComponent`
 
 ```typescript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-// Import KonvaModule
-import { KonvaModule } from 'ng2-konva';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    KonvaModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-Once `KonvaModule` is imported, you can use its components in your Angular application:
-
-```typescript
-import { of } from 'rxjs/Observable';
+import { Component } from '@angular/core';
+import { StageConfig } from 'konva/lib/Stage';
+import { CircleConfig } from 'konva/lib/shapes/Circle';
+import {
+  CoreShapeComponent,
+  NgKonvaEventObject,
+  StageComponent,
+} from 'ng2-konva';
 
 @Component({
-  selector: 'app',
+  selector: 'app-circle-example',
   template: `
-    <ko-stage [config]="configStage">
-      <ko-layer>
-        <ko-circle [config]="configCircle" (click)="handleClick($event)"></ko-circle>
-      </ko-layer>
-    </ko-stage>`
+    <br />
+    <section>
+      <ko-stage [config]="configStage">
+        <ko-layer>
+          <ko-circle
+            [config]="configCircle"
+            (click)="handleClick($event)"
+          ></ko-circle>
+        </ko-layer>
+      </ko-stage>
+    </section>
+  `,
+  standalone: true,
+  imports: [StageComponent, CoreShapeComponent],
 })
-class AppComponent implements OnInit {
-  public configStage: Observable<any> = of({
+export class CircleExampleComponent {
+  public configStage: Partial<StageConfig> = {
     width: 200,
-    height: 200
-  });
-  public configCircle: Observable<any> = of({
+    height: 500,
+  };
+  public configCircle: CircleConfig = {
     x: 100,
     y: 100,
     radius: 70,
     fill: 'red',
     stroke: 'black',
-    strokeWidth: 4
-  });
+    strokeWidth: 4,
+  };
 
-  public handleClick(component) {
-    console.log('Hello Circle', component);
+  public handleClick(event: NgKonvaEventObject<MouseEvent>): void {
+    console.log('Hello Circle', event);
   }
 }
 ```
 
+## Demo
+You can find more examples in the demo project located in `projects/demo`.
+
 ## Related repositories
 
 * [react-konva](https://github.com/lavrton/react-konva) - React + Konva