ng2-konva - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

lib/components/core-shape.component.d.ts

@@ -1,34 +0,64 @@
-import { EventEmitter, ElementRef, AfterContentInit, QueryList, OnDestroy, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { KonvaComponent } from '../ko.interface';
-export declare class CoreShapeComponent implements KonvaComponent, AfterContentInit, OnDestroy, OnInit {
-    private elementRef;
+import { EventEmitter, QueryList, OnDestroy, OnInit, AfterContentChecked } from '@angular/core';
+import { KonvaComponent } from '../interfaces/ko-component.interface';
+import { ShapeConfigTypes } from '../utils/configTypes';
+import { ShapeTypes } from '../utils/shapeTypes';
+import { Group } from 'konva/lib/Group';
+import { Layer } from 'konva/lib/Layer';
+import { Shape } from 'konva/lib/Shape';
+import { Sprite } from 'konva/lib/shapes/Sprite';
+import { Arc } from 'konva/lib/shapes/Arc';
+import { Arrow } from 'konva/lib/shapes/Arrow';
+import { Circle } from 'konva/lib/shapes/Circle';
+import { Ellipse } from 'konva/lib/shapes/Ellipse';
+import { Image } from 'konva/lib/shapes/Image';
+import { Label, Tag } from 'konva/lib/shapes/Label';
+import { Line } from 'konva/lib/shapes/Line';
+import { Path } from 'konva/lib/shapes/Path';
+import { Rect } from 'konva/lib/shapes/Rect';
+import { RegularPolygon } from 'konva/lib/shapes/RegularPolygon';
+import { Ring } from 'konva/lib/shapes/Ring';
+import { Star } from 'konva/lib/shapes/Star';
+import { Text } from 'konva/lib/shapes/Text';
+import { TextPath } from 'konva/lib/shapes/TextPath';
+import { Transformer } from 'konva/lib/shapes/Transformer';
+import { Wedge } from 'konva/lib/shapes/Wedge';
+import { FastLayer } from 'konva/lib/FastLayer';
+import { NgKonvaEventObject } from '../interfaces/ngKonvaEventObject';
+import * as i0 from "@angular/core";
+export declare class CoreShapeComponent implements KonvaComponent, AfterContentChecked, OnDestroy, OnInit {
     shapes: QueryList<CoreShapeComponent>;
-    config: Observable<any>;
-    click: EventEmitter<any>;
-    dblclick: EventEmitter<any>;
-    mouseover: EventEmitter<any>;
-    mouseout: EventEmitter<any>;
-    mousemove: EventEmitter<any>;
-    tap: EventEmitter<any>;
-    dbltap: EventEmitter<any>;
-    touchstart: EventEmitter<any>;
-    scaleXChange: EventEmitter<any>;
-    fillChange: EventEmitter<any>;
-    dragstart: EventEmitter<any>;
-    dragmove: EventEmitter<any>;
-    dragend: EventEmitter<any>;
-    nameNode: string;
-    added: boolean;
+    set config(config: ShapeConfigTypes);
+    get config(): ShapeConfigTypes;
+    mouseover: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mousemove: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseout: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseenter: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseleave: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mousedown: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseup: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    wheel: EventEmitter<NgKonvaEventObject<WheelEvent>>;
+    contextmenu: EventEmitter<NgKonvaEventObject<PointerEvent>>;
+    click: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    dblclick: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    touchstart: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    touchmove: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    touchend: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    tap: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    dbltap: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    dragstart: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    dragmove: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    dragend: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    nameNode: keyof typeof ShapeTypes | 'Shape' | 'Sprite';
     private cacheProps;
     private _stage;
-    private _config;
-    getStage(): any;
-    getConfig(): any;
-    constructor(elementRef: ElementRef);
+    protected _config: ShapeConfigTypes;
+    getStage(): Shape | Arc | Arrow | Circle | Ellipse | Image | Label | Tag | Line | Path | Rect | RegularPolygon | Ring | Sprite | Star | Text | TextPath | Transformer | Wedge | Group | Layer | FastLayer;
+    getConfig(): ShapeConfigTypes;
     ngOnInit(): void;
-    private initKonva();
-    private uploadKonva(config);
-    ngAfterContentInit(): void;
+    private initKonva;
+    protected uploadKonva(config: ShapeConfigTypes): void;
+    ngAfterContentChecked(): void;
     ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoreShapeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoreShapeComponent, "ko-shape, ko-layer, ko-circle, ko-fastlayer, ko-group, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", never, { "config": { "alias": "config"; "required": false; }; }, { "mouseover": "mouseover"; "mousemove": "mousemove"; "mouseout": "mouseout"; "mouseenter": "mouseenter"; "mouseleave": "mouseleave"; "mousedown": "mousedown"; "mouseup": "mouseup"; "wheel": "wheel"; "contextmenu": "contextmenu"; "click": "click"; "dblclick": "dblclick"; "touchstart": "touchstart"; "touchmove": "touchmove"; "touchend": "touchend"; "tap": "tap"; "dbltap": "dbltap"; "dragstart": "dragstart"; "dragmove": "dragmove"; "dragend": "dragend"; }, ["shapes"], ["*"], true, never>;
 }

lib/components/stage.component.d.ts

@@ -1,32 +0,41 @@
-import { EventEmitter, AfterContentInit, ElementRef, QueryList, OnInit, OnDestroy } from '@angular/core';
+import { EventEmitter, AfterContentInit, QueryList, OnDestroy } from '@angular/core';
 import { CoreShapeComponent as CoreShape } from './core-shape.component';
-import { Observable } from 'rxjs';
-import { KonvaComponent } from '../ko.interface';
-export declare class StageComponent implements KonvaComponent, AfterContentInit, OnInit, OnDestroy {
-    private elementRef;
+import { KonvaComponent } from '../interfaces/ko-component.interface';
+import { Stage } from 'konva/lib/Stage';
+import { ContainerConfig } from 'konva/lib/Container';
+import { NgKonvaEventObject } from '../interfaces/ngKonvaEventObject';
+import * as i0 from "@angular/core";
+export declare class StageComponent implements KonvaComponent, AfterContentInit, OnDestroy {
+    private nodeContainer;
     shapes: QueryList<CoreShape>;
-    config: Observable<any>;
-    click: EventEmitter<any>;
-    dblclick: EventEmitter<any>;
-    mouseover: EventEmitter<any>;
-    mouseout: EventEmitter<any>;
-    mousemove: EventEmitter<any>;
-    tap: EventEmitter<any>;
-    dbltap: EventEmitter<any>;
-    touchstart: EventEmitter<any>;
-    scaleXChange: EventEmitter<any>;
-    fillChange: EventEmitter<any>;
-    dragstart: EventEmitter<any>;
-    dragmove: EventEmitter<any>;
-    dragend: EventEmitter<any>;
+    set config(config: ContainerConfig);
+    mouseover: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mousemove: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseout: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseenter: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseleave: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mousedown: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    mouseup: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    wheel: EventEmitter<NgKonvaEventObject<WheelEvent>>;
+    contextmenu: EventEmitter<NgKonvaEventObject<PointerEvent>>;
+    click: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    dblclick: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    touchstart: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    touchmove: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    touchend: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    tap: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    dbltap: EventEmitter<NgKonvaEventObject<TouchEvent>>;
+    dragstart: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    dragmove: EventEmitter<NgKonvaEventObject<MouseEvent>>;
+    dragend: EventEmitter<NgKonvaEventObject<MouseEvent>>;
     private _stage;
     private _config;
     private cacheProps;
-    getStage(): any;
-    getConfig(): any;
-    constructor(elementRef: ElementRef);
-    private uploadKonva(config);
-    ngOnInit(): void;
+    getStage(): Stage;
+    getConfig(): ContainerConfig;
+    private uploadKonva;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StageComponent, "ko-stage", never, { "config": { "alias": "config"; "required": false; }; }, { "mouseover": "mouseover"; "mousemove": "mousemove"; "mouseout": "mouseout"; "mouseenter": "mouseenter"; "mouseleave": "mouseleave"; "mousedown": "mousedown"; "mouseup": "mouseup"; "wheel": "wheel"; "contextmenu": "contextmenu"; "click": "click"; "dblclick": "dblclick"; "touchstart": "touchstart"; "touchmove": "touchmove"; "touchend": "touchend"; "tap": "tap"; "dbltap": "dbltap"; "dragstart": "dragstart"; "dragmove": "dragmove"; "dragend": "dragend"; }, ["shapes"], ["*"], true, never>;
 }

lib/utils/applyNodeProps.d.ts

@@ -1,1 +0,3 @@
-export default function applyNodeProps(component: any, props?: {}, oldProps?: {}): void;
+import { KonvaComponent } from '../interfaces/ko-component.interface';
+import { PropsType } from './types';
+export default function applyNodeProps(component: KonvaComponent, props?: PropsType, oldProps?: PropsType): void;

lib/utils/index.d.ts

 import updatePicture from './updatePicture';
 import applyNodeProps from './applyNodeProps';
-export declare function getName(componentTag: any): any;
-export declare function createListener(instance: any): {};
+import { KonvaComponent } from '../interfaces/ko-component.interface';
+import { ListenerRecord } from './types';
+export declare function getName(componentTag: string): string;
+export declare function createListener(instance: KonvaComponent): ListenerRecord;
 export { updatePicture, applyNodeProps };

lib/utils/updatePicture.d.ts

@@ -1,1 +0,3 @@
-export default function updatePicture(node: any): void;
+import Konva from 'konva';
+import Node = Konva.Node;
+export default function updatePicture(node: Node): void;

package.json

 {
   "name": "ng2-konva",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Angular binding to canvas element via Konva framework",
@@ -12,6 +12,2 @@ "keywords": [
   ],
-  "main": "bundles/ng2-konva.umd.js",
-  "jsnext:main": "konva.module.js",
-  "module": "fesm5/ng2-konva.js",
-  "types": "konva.module.d.ts",
   "repository": {
@@ -30,76 +26,23 @@ "type": "git",
   "peerDependencies": {
-    "@angular/core": ">=6.0.0"
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "konva": "^9.1.0"
   },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.8",
-    "@angular/animations": "^6.0.6",
-    "@angular/cli": "6.0.8",
-    "@angular/common": "^6.0.6",
-    "@angular/compiler": "^6.0.6",
-    "@angular/compiler-cli": "^6.0.6",
-    "@angular/core": "^6.0.6",
-    "@angular/forms": "^6.0.6",
-    "@angular/http": "^6.0.6",
-    "@angular/language-service": "^6.0.6",
-    "@angular/platform-browser": "^6.0.6",
-    "@angular/platform-browser-dynamic": "^6.0.6",
-    "@angular/router": "^6.0.6",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.4.0",
-    "concurrently": "^3.6.0",
-    "core-js": "^2.5.7",
-    "html-loader": "^0.5.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "konva": "^2.1.6",
-    "lite-server": "^2.3.0",
-    "markdown-loader": "^3.0.0",
-    "ng-packagr": "^3.0.3",
-    "ng2-konva": "^2.0.6",
-    "node-sass": "^4.7.2",
-    "node-sass-tilde-importer": "^1.0.0",
-    "protractor": "~5.1.2",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.6.2",
-    "rollup": "^0.61.2",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rxjs": "^6.2.1",
-    "rxjs-compat": "^6.2.1",
-    "systemjs": "0.21.4",
-    "ts-helpers": "^1.1.2",
-    "ts-loader": "^4.4.1",
-    "ts-node": "~7.0.0",
-    "tslib": "^1.9.3",
-    "tslint": "~5.10.0",
-    "typescript": "^2.7.2",
-    "uglifyjs": "^2.4.10",
-    "uglifyjs-webpack-plugin": "^1.2.6",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.12.0",
-    "webpack-cli": "^3.0.8",
-    "zone.js": "^0.8.26"
+  "dependencies": {
+    "tslib": "^2.3.0"
   },
-  "engines": {
-    "node": ">=6.0.0"
-  },
-  "es2015": "fesm2015/ng2-konva.js",
-  "esm5": "esm5/ng2-konva.js",
-  "esm2015": "esm2015/ng2-konva.js",
-  "fesm5": "fesm5/ng2-konva.js",
-  "fesm2015": "fesm2015/ng2-konva.js",
-  "typings": "ng2-konva.d.ts",
-  "metadata": "ng2-konva.metadata.json",
   "sideEffects": false,
-  "dependencies": {
-    "tslib": "^1.9.0"
+  "module": "fesm2022/ng2-konva.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ng2-konva.mjs",
+      "esm": "./esm2022/ng2-konva.mjs",
+      "default": "./fesm2022/ng2-konva.mjs"
+    }
   }
-}
+}

README.md

@@ -1,103 +0,24 @@
-# ng2-konva
-<span class="badge-npmdownloads">
-  <a href="https://www.npmjs.com/package/ng2-konva">
-    <img src="https://img.shields.io/npm/v/ng2-konva.svg" alt="Version">
-  </a>
-  <a href="https://www.npmjs.com/package/ng2-konva">
-    <img src="https://img.shields.io/npm/l/ng2-konva.svg" alt="License">
-  </a>
-  </span>
+# Ng2Konva
 
-![Ng2Konva Logo](https://raw.githubusercontent.com/rafaesc/ng2-konva/master/n2-konva.png)
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
 
-**ng2-konva** is a JavaScript library for drawing complex canvas graphics using Angular.
+## Code scaffolding
 
-It provides declarative and reactive bindings to the [Konva Framework](http://konvajs.github.io/).
+Run `ng generate component component-name --project ng2-konva` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng2-konva`.
+> Note: Don't forget to add `--project ng2-konva` or else it will be added to the default project in your `angular.json` file. 
 
-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.
+## Build
 
-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.
+Run `ng build ng2-konva` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-To get more info about `Konva` you can read [Konva Overview](http://konvajs.github.io/docs/overview.html).
+## Publishing
 
-## Documentation
+After building your library with `ng build ng2-konva`, go to the dist folder `cd dist/ng2-konva` and run `npm publish`.
 
-[http://rafaelescala.com/ng2-konva/](http://rafaelescala.com/ng2-konva/)
+## Running unit tests
 
-## Installation
+Run `ng test ng2-konva` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-To install this library, run:
+## Further help
 
-```bash
-$ npm install konva ng2-konva --save
-```
-
-and then from your Angular `AppModule`:
-
-```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';
-
-@Component({
-  selector: 'app',
-  template: `
-    <ko-stage [config]="configStage">
-      <ko-layer>
-        <ko-circle [config]="configCircle" (click)="handleClick($event)"></ko-circle>
-      </ko-layer>
-    </ko-stage>`
-})
-class AppComponent implements OnInit {
-  public configStage: Observable<any> = of({
-    width: 200,
-    height: 200
-  });
-  public configCircle: Observable<any> = of({
-    x: 100,
-    y: 100,
-    radius: 70,
-    fill: 'red',
-    stroke: 'black',
-    strokeWidth: 4
-  });
-
-  public handleClick(component) {
-    console.log('Hello Circle', component);
-  }
-}
-```
-
-## Related repositories
-
-* [react-konva](https://github.com/lavrton/react-konva) - React + Konva
-* [vue-konva](http://rafaelescala.com/vue-konva-doc/) - Vue + Konva
-
-
-## License
-
-MIT © [Rafael Escala](mailto:[e-mail])
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

0

decreased by-100%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

134394

decreased by-62.57%

Dependency count

4

increased by100%

Number of package files

28

decreased by-28.21%

Lines of code

1177

decreased by-55.87%

Number of lines in readme file

25

decreased by-75.96%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@angular/common@16.2.12(transitive)

• + Added@angular/core@16.2.12(transitive)

• + Addedkonva@9.3.11(transitive)

• + Addedzone.js@0.13.3(transitive)

• - Removed@angular/core@18.0.2(transitive)

• - Removedtslib@1.14.1(transitive)

• - Removedzone.js@0.14.7(transitive)

• Updatedtslib@^2.3.0