ng2-konva - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/index.js

@@ -130,2 +130,4 @@ import { Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList } from '@angular/core';
         'mouseover',
+        'mouseout',
+        'mousemove',
         'tap',
@@ -132,0 +134,0 @@ 'dbltap',

dist/ng2-konva.umd.js

@@ -132,2 +132,4 @@ (function (global, factory) {
         'mouseover',
+        'mouseout',
+        'mousemove',
         'tap',
@@ -134,0 +136,0 @@ 'dbltap',

package.json

 {
   "name": "ng2-konva",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Angular binding to canvas element via Konva framework",
@@ -73,3 +73,3 @@ "keywords": [
     "markdown-loader": "^2.0.1",
-    "ng2-konva": "^1.0.2",
+    "ng2-konva": "^1.0.4",
     "ngx-bootstrap": "^2.0.0-beta.8",
@@ -76,0 +76,0 @@ "node-sass": "^4.5.2",

playground/app/components/examples/event-example.component.ts

@@ -1,4 +0,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-import { CoreShape } from 'n2-konva';
+import { KonvaComponent } from 'ng2-konva';
 
@@ -10,5 +10,10 @@ @Component({
   <section>
-      <ko-stage [config]="configStage">
+      <ko-stage #layer [config]="configStage">
           <ko-layer #layer>
-              <ko-regular-polygon [config]="configItem" (click)="handleClick($event)"></ko-regular-polygon>
+              <ko-regular-polygon
+                [config]="configItem"
+                (mouseout)="handleMouseOut($event)"
+                (mousemove)="handleMouseMove($event)"
+              ></ko-regular-polygon>
+              <ko-text #text [config]="configText"></ko-text>
           </ko-layer>
@@ -20,4 +25,6 @@ </ko-stage>
 })
-export class EventExampleComponent implements OnInit {
-  @ViewChild('layer') layer: CoreShape;
+export class EventExampleComponent {
+  @ViewChild('stage') stage: KonvaComponent;
+  @ViewChild('layer') layer: KonvaComponent;
+  @ViewChild('text') text: KonvaComponent;
 
@@ -37,10 +44,28 @@ public configStage = Observable.of({
   });
+  public configText = Observable.of({
+    x: 10,
+    y: 10,
+    fontFamily: 'Calibri',
+    fontSize: 24,
+    text: '',
+    fill: 'black'
+  });
 
-  public handleClick(event: any) {
-    console.log('Hello Circle', event);
+  public writeMessage(message: string) {
+    this.text.getStage().setText(message);
+    this.layer.getStage().draw();
   }
 
-  ngOnInit() {
-    console.log(this.layer.getStage());
+  public handleMouseOut() {
+    console.log('handleMouseOut')
+    this.writeMessage('Mouseout triangle');
   }
+
+  public handleMouseMove() {
+    console.log('handleMouseMove')
+    const mousePos = this.stage.getStage().getPointerPosition();
+    const x = mousePos.x - 190;
+    const y = mousePos.y - 40;
+    this.writeMessage('x: ' + x + ', y: ' + y);
+  }
 }

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

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

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

Improved metrics

Total package byte prevSize

915365

increased by0.59%

Lines of code

9216

increased by0.62%

Worsened metrics

Number of low supply chain risk alerts

6

increased by20%

No dependency changes