Angular2 how to use paperjs events?

Question

How do you use paperjs events in angular2? I am having trouble integrating it. I tried below inside my component class but it doesn't seem to work.

this.currentAoi = this.paper.Path.Rectangle({
    point: [100,100],
    size: [100,100],
    fillColor: 'green',
});

this.currentAoi.onMouseDrag = function(event) {
    console.log(this.position);
    console.log(event.delta);
}

Answer 1

Looking at the code you provide, I would say that you are not instantiating your Rectangle.
You have to do (notice the new keyword):

this.currentAoi = new this.paper.Path.Rectangle({
    point: [100,100],
    size: [100,100],
    fillColor: 'green',
});

Here is a complete working example.

import { Component, ElementRef, ViewChild } from '@angular/core';
import {paper} from 'paper';

@Component({
  selector: 'my-app',
  template: '<canvas #canvas></canvas>',
  styles: [ `
    canvas {
      width: 100vw;
      height: 100vh;
    }
  ` ]
})
export class AppComponent  {
  // get a reference to canvas element
  @ViewChild('canvas') canvas:ElementRef;

  ngAfterViewInit() {
    // setup paper
    paper.setup(this.canvas.nativeElement);

    // draw a circle
    var circle = new paper.Path.Circle({
      center: paper.view.center,
      radius: 50,
      fillColor: 'orange'
    });

    // on mouse drag
    circle.onMouseDrag = function(event) {
      // move the circle
      this.position = event.point;
    }

    // display instructions
    new paper.PointText({
      content: 'Drag me',
      point: paper.view.center.subtract(0,80),
      justification: 'center'
    });
  }
}