install paper.js and typings file in angular 2

Question

I want to use paper.js in one of my components in Angular 2 but cannot seem to get it to work. The paper-full.js file runs when the component is loaded but it never recognizes the canvas.

There is a typings file made by Clark-Stevenson (paper.d.ts) for paper.js and I think this might be part of the issue but when I try to install it following Ben Nadel's general instructions (see link) I get the following:

C:\Users\levi\Documents\Programming\AngularDesigner2>./node_modules/.bin/typingsinstall --global --save file:./paper.d.ts

'.' is not recognized as an internal or external command, operable program or batch file.

https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm

https://github.com/clark-stevenson/paper.d.ts I am new to paper.js, typescript and angular 2.

tsconfig.json

  {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "files": [
    "paper.d.ts"

  ]
}

App.component.ts

import { Component } from '@angular/core';
import '../../node_modules/paper/dist/docs/assets/js/paper.js';


@Component({
  selector: 'my-app',
  templateUrl: 'app/canvas.html'
})
export class AppComponent  { 
}

canvas.html

<h1>Canvas</h1>
<canvas id="canvas"></canvas>

The paper.d.ts file is found under src: src/paper.d.ts

Fireproofing

Answer 1

I recommend simply installing both libraries with npm so:

npm install --save paper
npm install --save @types/paper            ( or --save-dev if you prefer )

then you can use the .angular-cli.json to include the library in your packaging by listing it in the "scripts" tag.

In the .angular-cli.json add the line importing paper-full.min.js to your scripts:

{
    ....
    "apps": [
         ....
        "scripts": [
           "../node_modules/paper/dist/paper-full.min.js"
        ]
    ]
}

Once you're done with that, you can use the paper library in your components. I suggest you make a simple component wrapper.

Something like paper-canvas.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { PaperScope, Project, Path, Point } from 'paper';

@Component({
    moduleId: module.id,
    selector: 'paper-canvas',
    template: '<canvas #canvasElement width="595" height="842"></canvas>',
})

export class PaperCanvasComponent implements OnInit {
    @ViewChild('canvasElement') canvasElement: ElementRef;
    scope: PaperScope;
    project: Project;

    constructor() { }

    ngOnInit() {
        this.scope = new PaperScope();
        this.project = new Project(this.canvasElement.nativeElement);
    }
}

from this point you will have full control over all paper.js features like directly drawing, creating objects/symbols, defining mouse interaction, creating tools ... etc. http://paperjs.org/features/

Add items to the project.activeLayer if you want to keep it simple.

const currentPath = new Path();
// ... add some points, set some properties
this.project.activeLayer.addChild(currentPath);

Hope this works; and helps :-)

Bercy

Hi Iwohlhart, Could you help me with this case: Can I import paperjs by script tag & use @types/paper for coding? Moreover, when I imported as your suggestion I saw in debug mode, It always displayed dist/paper-full.js instead of dist/paper-full.min.js to Path() object. Is Angular CLI compress paperjs code or it mapped? – Sheatfish

Answer 2

@types/paper is deprecated. Paper provides its own type definitions, no need to install this anymore.

Spectre

Answer 3

That's greate answer from lwohlhart bro!
However, if your project can't run normally. Try re-configuring in your angular.json file ( I currently use Angular 8). The path now is "node_modules/paper/dist/paper-full.min.js"
hopefully that's useful!

Morgun