I recently attempted to integrate paper.js with TypeScript.
My goal was to add event handlers to the constructor of my PenTool class (in order to use dependency injection and define all paper events during the creation of the tool).
Here is a snippet of the code I have:
export class PenTool implements BaseTool {
name: string;
toolType: Tools;
tool: any;
drawingContext: any;
path: any;
constructor(private paperService: PaperService) {
this.name = "Pen";
this.toolType = Tools.Pen;
this.drawingContext = this.paperService.getDrawingContext();
this.tool = new this.drawingContext.Tool();
this.tool.onMouseDown = function (event) {
//!!!!!!!!!!!!!!!!!!!
//I want to use my class property here (this.name) or
//(this.drawingContext) etc, but I can't!
this.path = new (paperService.getDrawingContext()).Path();
//this.path = new this.drawingContext.Path();
this.path.add(event.point, event.point);
this.path.strokeColor = 'black';
}
this.tool.onMouseDrag = function (event) {
console.log('pen -> mouse drag!');
if (event.modifiers.shift) {
this.path.lastSegment.point = event.point;
} else {
this.path.add(event.point);
}
}
}
}
The paperService provides access to the paper variable and creates a new paperScope, among other things. The issue I'm facing is that I can't access class properties within the event functions.
What am I doing wrong? Thank you in advance.