Comparing version 6.0.0 to 7.0.0
@@ -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>; | ||
} |
@@ -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>; | ||
} |
@@ -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; |
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 }; |
@@ -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; |
{ | ||
"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" | ||
} | ||
} | ||
} | ||
} |
105
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:rafaesc92@gmail.com) | ||
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. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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 riskA 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
0
0
1
134394
4
28
1177
25
2
+ Added@angular/common@16.2.12(transitive)
+ Added@angular/core@16.2.12(transitive)
+ Addedkonva@9.3.15(transitive)
+ Addedzone.js@0.13.3(transitive)
- Removed@angular/core@18.2.5(transitive)
- Removedtslib@1.14.1(transitive)
- Removedzone.js@0.14.10(transitive)
Updatedtslib@^2.3.0