ng2-konva - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

.yo-rc.json

@@ -0,0 +0,0 @@ {

bs-config.json

@@ -0,0 +0,0 @@ {

dist/components/stage.component.d.ts

 import { EventEmitter, AfterContentInit, ElementRef, QueryList, OnInit, OnDestroy } from '@angular/core';
-import { ShapeComponent as Shape } from './shape.component';
+import { CoreShapeComponent as CoreShape } from './core-shape.component';
 import { Observable } from 'rxjs/Observable';
 export declare class StageComponent implements AfterContentInit, OnInit, OnDestroy {
     private elementRef;
-    shapes: QueryList<Shape>;
+    shapes: QueryList<CoreShape>;
     config: Observable<any>;
@@ -8,0 +8,0 @@ click: EventEmitter<any>;

dist/index.d.ts

 import 'konva';
 export * from './components/stage.component';
+export * from './components/core-shape.component';
 export declare class KonvaModule {
 }

dist/index.js

@@ -118,3 +118,3 @@ import { Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList } from '@angular/core';
 function getName(componentTag) {
-    return capitalizeFirstLetter(camelize(componentTag.substr(3).replace('-', '')));
+    return capitalizeFirstLetter(camelize(componentTag.substr(3).replace('-', ' ')));
 }
@@ -155,7 +155,7 @@ /**
 };
-var ShapeComponent = (function () {
+var CoreShapeComponent = (function () {
     /**
      * @param {?} elementRef
      */
-    function ShapeComponent(elementRef) {
+    function CoreShapeComponent(elementRef) {
         this.elementRef = elementRef;
@@ -181,3 +181,3 @@ this.shapes = new QueryList();
      */
-    ShapeComponent.prototype.getStage = function () {
+    CoreShapeComponent.prototype.getStage = function () {
         return this._stage;
@@ -188,3 +188,3 @@ };
      */
-    ShapeComponent.prototype.ngOnInit = function () {
+    CoreShapeComponent.prototype.ngOnInit = function () {
         this.initKonva();
@@ -195,3 +195,3 @@ };
      */
-    ShapeComponent.prototype.initKonva = function () {
+    CoreShapeComponent.prototype.initKonva = function () {
         var _this = this;
@@ -223,3 +223,3 @@ var /** @type {?} */ ng = this;
      */
-    ShapeComponent.prototype.uploadKonva = function (config) {
+    CoreShapeComponent.prototype.uploadKonva = function (config) {
         var /** @type {?} */ props = __assign$1({}, config, createListener(this));
@@ -232,3 +232,3 @@ applyNodeProps(this, props, this.cacheProps);
      */
-    ShapeComponent.prototype.ngAfterContentInit = function () {
+    CoreShapeComponent.prototype.ngAfterContentInit = function () {
         var _this = this;
@@ -245,8 +245,8 @@ this.shapes.forEach(function (item) {
      */
-    ShapeComponent.prototype.ngOnDestroy = function () {
+    CoreShapeComponent.prototype.ngOnDestroy = function () {
         this._stage.destroy();
     };
-    return ShapeComponent;
+    return CoreShapeComponent;
 }());
-ShapeComponent.decorators = [
+CoreShapeComponent.decorators = [
     { type: Component, args: [{
@@ -261,7 +261,7 @@ // tslint:disable-next-line:max-line-length
  */
-ShapeComponent.ctorParameters = function () { return [
+CoreShapeComponent.ctorParameters = function () { return [
     { type: ElementRef, },
 ]; };
-ShapeComponent.propDecorators = {
-    'shapes': [{ type: ContentChildren, args: [ShapeComponent,] },],
+CoreShapeComponent.propDecorators = {
+    'shapes': [{ type: ContentChildren, args: [CoreShapeComponent,] },],
     'config': [{ type: Input },],
@@ -375,3 +375,3 @@ 'click': [{ type: Output },],
 StageComponent.propDecorators = {
-    'shapes': [{ type: ContentChildren, args: [ShapeComponent,] },],
+    'shapes': [{ type: ContentChildren, args: [CoreShapeComponent,] },],
     'config': [{ type: Input },],
@@ -403,7 +403,7 @@ 'click': [{ type: Output },],
                     StageComponent,
-                    ShapeComponent,
+                    CoreShapeComponent,
                 ],
                 exports: [
                     StageComponent,
-                    ShapeComponent,
+                    CoreShapeComponent,
                 ]
@@ -417,2 +417,2 @@ },] },
 
-export { KonvaModule, StageComponent };
+export { KonvaModule, StageComponent, CoreShapeComponent };

dist/ng2-konva.d.ts

@@ -5,2 +5,1 @@ /**
 export * from './index';
-export { ShapeComponent as ɵa } from './components/shape.component';

dist/ng2-konva.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"KonvaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"StageComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"StageComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"StageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ko-stage","template":"<div><ng-content></ng-content>{{config}}</div>"}]}],"members":{"shapes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dblclick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouseover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dbltap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"touchstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"scaleXChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"fillChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragmove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"getStage":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"uploadKonva":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"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","template":"<div><ng-content></ng-content></div>"}]}],"members":{"shapes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dblclick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouseover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dbltap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"touchstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"scaleXChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"fillChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragmove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"getStage":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"initKonva":[{"__symbolic":"method"}],"uploadKonva":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"KonvaModule":"./index","StageComponent":"./components/stage.component","ɵa":"./components/shape.component"},"importAs":"ng2-konva"}
+{"__symbolic":"module","version":3,"metadata":{"KonvaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"StageComponent"},{"__symbolic":"reference","name":"CoreShapeComponent"}],"exports":[{"__symbolic":"reference","name":"StageComponent"},{"__symbolic":"reference","name":"CoreShapeComponent"}]}]}],"members":{}},"StageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ko-stage","template":"<div><ng-content></ng-content>{{config}}</div>"}]}],"members":{"shapes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"CoreShapeComponent"}]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dblclick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouseover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dbltap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"touchstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"scaleXChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"fillChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragmove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"getStage":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"uploadKonva":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"CoreShapeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"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","template":"<div><ng-content></ng-content></div>"}]}],"members":{"shapes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","name":"CoreShapeComponent"}]}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"click":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dblclick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"mouseover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dbltap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"touchstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"scaleXChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"fillChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragmove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"getStage":[{"__symbolic":"method"}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"initKonva":[{"__symbolic":"method"}],"uploadKonva":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"KonvaModule":"./index","StageComponent":"./components/stage.component","CoreShapeComponent":"./components/core-shape.component"},"importAs":"ng2-konva"}

dist/ng2-konva.umd.js

@@ -120,3 +120,3 @@ (function (global, factory) {
 function getName(componentTag) {
-    return capitalizeFirstLetter(camelize(componentTag.substr(3).replace('-', '')));
+    return capitalizeFirstLetter(camelize(componentTag.substr(3).replace('-', ' ')));
 }
@@ -157,7 +157,7 @@ /**
 };
-var ShapeComponent = (function () {
+var CoreShapeComponent = (function () {
     /**
      * @param {?} elementRef
      */
-    function ShapeComponent(elementRef) {
+    function CoreShapeComponent(elementRef) {
         this.elementRef = elementRef;
@@ -183,3 +183,3 @@ this.shapes = new core.QueryList();
      */
-    ShapeComponent.prototype.getStage = function () {
+    CoreShapeComponent.prototype.getStage = function () {
         return this._stage;
@@ -190,3 +190,3 @@ };
      */
-    ShapeComponent.prototype.ngOnInit = function () {
+    CoreShapeComponent.prototype.ngOnInit = function () {
         this.initKonva();
@@ -197,3 +197,3 @@ };
      */
-    ShapeComponent.prototype.initKonva = function () {
+    CoreShapeComponent.prototype.initKonva = function () {
         var _this = this;
@@ -225,3 +225,3 @@ var /** @type {?} */ ng = this;
      */
-    ShapeComponent.prototype.uploadKonva = function (config) {
+    CoreShapeComponent.prototype.uploadKonva = function (config) {
         var /** @type {?} */ props = __assign$1({}, config, createListener(this));
@@ -234,3 +234,3 @@ applyNodeProps(this, props, this.cacheProps);
      */
-    ShapeComponent.prototype.ngAfterContentInit = function () {
+    CoreShapeComponent.prototype.ngAfterContentInit = function () {
         var _this = this;
@@ -247,8 +247,8 @@ this.shapes.forEach(function (item) {
      */
-    ShapeComponent.prototype.ngOnDestroy = function () {
+    CoreShapeComponent.prototype.ngOnDestroy = function () {
         this._stage.destroy();
     };
-    return ShapeComponent;
+    return CoreShapeComponent;
 }());
-ShapeComponent.decorators = [
+CoreShapeComponent.decorators = [
     { type: core.Component, args: [{
@@ -263,7 +263,7 @@ // tslint:disable-next-line:max-line-length
  */
-ShapeComponent.ctorParameters = function () { return [
+CoreShapeComponent.ctorParameters = function () { return [
     { type: core.ElementRef, },
 ]; };
-ShapeComponent.propDecorators = {
-    'shapes': [{ type: core.ContentChildren, args: [ShapeComponent,] },],
+CoreShapeComponent.propDecorators = {
+    'shapes': [{ type: core.ContentChildren, args: [CoreShapeComponent,] },],
     'config': [{ type: core.Input },],
@@ -377,3 +377,3 @@ 'click': [{ type: core.Output },],
 StageComponent.propDecorators = {
-    'shapes': [{ type: core.ContentChildren, args: [ShapeComponent,] },],
+    'shapes': [{ type: core.ContentChildren, args: [CoreShapeComponent,] },],
     'config': [{ type: core.Input },],
@@ -405,7 +405,7 @@ 'click': [{ type: core.Output },],
                     StageComponent,
-                    ShapeComponent,
+                    CoreShapeComponent,
                 ],
                 exports: [
                     StageComponent,
-                    ShapeComponent,
+                    CoreShapeComponent,
                 ]
@@ -421,2 +421,3 @@ },] },
 exports.StageComponent = StageComponent;
+exports.CoreShapeComponent = CoreShapeComponent;
 
@@ -423,0 +424,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/package.json

@@ -0,0 +0,0 @@ {

dist/README.MD

 # ng2-konva (WORK IN PROGRESS)
 
+**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.
+
+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.
+
+To get more info about `Konva` you can read [Konva Overview](http://konvajs.github.io/docs/overview.html).
+
 ## Installation
@@ -11,10 +22,2 @@
 
-## Consuming your library
-
-Once you have published your library to npm, you can import your library in any Angular application by running:
-
-```bash
-$ npm install ng2-konva
-```
-
 and then from your Angular `AppModule`:
@@ -28,3 +31,3 @@
 
-// Import your library
+// Import KonvaModule
 import { KonvaModule } from 'ng2-konva';
@@ -46,7 +49,32 @@
 
-Once your library is imported, you can use its components, directives and pipes in your Angular application:
+Once `KonvaModule` is imported, you can use its components in your Angular application:
 
-```xml
-<!-- You can now use your library component in app.component.html -->
-<ko-stage></ko-stage>
+```typescript
+@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.of({
+    width: 200,
+    height: 200
+  });
+  public configCircle = Observable.of({
+    x: 100,
+    y: 100,
+    radius: 70,
+    fill: 'red',
+    stroke: 'black',
+    strokeWidth: 4
+  });
+
+  public handleClick(component) {
+    console.log('Hello Circle', component);
+  }
+}
 ```
@@ -53,0 +81,0 @@

gulpfile.js

@@ -0,0 +0,0 @@ /* eslint-disable */

package.json

 {
   "name": "ng2-konva",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Angular binding to canvas element via Konva framework",
@@ -21,4 +21,6 @@ "keywords": [
     "lite": "lite-server",
-    "playground:build": "tsc -p playground -w",
-    "playground": "concurrently \"npm run build:watch\" \"npm run playground:build\" \"npm run lite\"",
+    "webpack": "webpack",
+    "playground:watch": "tsc -p playground -w",
+    "playground:build": "tsc -p playground",
+    "playground": "concurrently \"npm run build:watch\" \"npm run playground:watch\" \"npm run lite\"",
     "test": "jest",
@@ -49,2 +51,3 @@ "test:watch": "jest --watch",
     "@angular/core": "^4.0.0",
+    "@angular/forms": "4.0.0",
     "@angular/platform-browser": "^4.0.0",
@@ -63,2 +66,3 @@ "@angular/platform-browser-dynamic": "^4.0.0",
     "gulp-rollup": "^2.11.0",
+    "html-loader": "^0.5.1",
     "jest": "^20.0.3",
@@ -68,2 +72,4 @@ "jest-preset-angular": "^2.0.2",
     "lite-server": "^2.3.0",
+    "markdown-loader": "^2.0.1",
+    "ngx-bootstrap": "^2.0.0-beta.8",
     "node-sass": "^4.5.2",
@@ -73,2 +79,3 @@ "node-sass-tilde-importer": "^1.0.0",
     "protractor": "~5.1.0",
+    "raw-loader": "^0.5.1",
     "rollup": "^0.41.6",
@@ -78,5 +85,7 @@ "run-sequence": "^1.2.2",
     "systemjs": "^0.20.12",
+    "ts-loader": "^3.1.1",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
     "typescript": "~2.2.0",
+    "webpack": "^3.8.1",
     "zone.js": "^0.8.4"
@@ -83,0 +92,0 @@ },

playground/systemjs-angular-loader.js

@@ -0,0 +0,0 @@ 'use strict';

playground/systemjs.config.js

@@ -25,3 +25,2 @@ 'use strict';
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
 
@@ -28,0 +27,0 @@ // other libraries

playground/tsconfig.json

@@ -13,3 +13,6 @@ {
     "suppressImplicitAnyIndexErrors": true
-  }
+  },
+  "exclude": [
+    "ng2-konva"
+  ]
 }

README.md

 # ng2-konva (WORK IN PROGRESS)
 
-ng2-konva is a JavaScript library for drawing complex canvas graphics using Angular.
+**ng2-konva** is a JavaScript library for drawing complex canvas graphics using Angular.
 
@@ -22,10 +22,2 @@ It provides declarative and reactive bindings to the [Konva Framework](http://konvajs.github.io/).
 
-## Consuming your library
-
-Once you have published your library to npm, you can import your library in any Angular application by running:
-
-```bash
-$ npm install ng2-konva
-```
-
 and then from your Angular `AppModule`:
@@ -39,3 +31,3 @@
 
-// Import your library
+// Import KonvaModule
 import { KonvaModule } from 'ng2-konva';
@@ -57,3 +49,3 @@
 
-Once your library is imported, you can use its components in your Angular application:
+Once `KonvaModule` is imported, you can use its components in your Angular application:
 
@@ -71,3 +63,3 @@ ```typescript
 class AppComponent implements OnInit {
-  public configStage = new BehaviorSubject({
+  public configStage = Observable.of({
     width: 200,
@@ -74,0 +66,0 @@ height: 200

src/package.json

@@ -0,0 +0,0 @@ {

tools/gulp/inline-resources.js

@@ -0,0 +0,0 @@ /* eslint-disable */

tsconfig.json

@@ -11,2 +11,3 @@ {
     ],
+    "sourceMap": true,
     "skipLibCheck": true,
@@ -13,0 +14,0 @@ "types": []

tslint.json

@@ -0,0 +0,0 @@ {

New alerts

License Policy Violation

License

This 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 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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

909754

increased by231.26%

Number of package files

51

increased by54.55%

Lines of code

9159

increased by481.15%

Worsened metrics

Dev dependency count

40

increased by21.21%

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Number of lines in readme file

96

decreased by-7.69%

Number of low supply chain risk alerts

5

increased by400%

Number of medium supply chain risk alerts

4

increased by100%

No dependency changes