Angular2 + FabricJS + HammerJS setup

Question

I am trying to get angular2 project running in conjunction with hammerjs and fabricjs with no luck so far.

my app.component.ts

    import { Component, OnInit } from '@angular/core';

declare var fabric: any;
let canvas: any;

    @Component({
      selector: 'ca-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
    canvas = new fabric.Canvas('drawing_layer');
    const backImage = new Image();

    backImage.src = 'http://lorempixel.com/600/600/sports/';
    backImage.onload = () => {
      canvas.setBackgroundImage(backImage.src, canvas.renderAll.bind(canvas), {
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0,
      });

    };
  }
    }

canvas.on({
  'mouse:down': (ev) => {
    const pointer: any = canvas.getPointer(ev.e);
    const circle: any = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 5,
      strokeWidth: 5,
      stroke: 'red',
      selectable: false,
      originX: 'center', originY: 'center',
    });

    canvas.add(circle);
  },
  'object:selected': (ev) => {
    console.info('object selected');
  },
  'selection:cleared': (ev) => {
console.info('selection cleared');
  },
});

let hammertime = new Hammer(document.getElementById("canvas-wrapper"));
hammertime.get("pinch").set({ enable: true });
hammertime.get("pan").set({ direction: Hammer.DIRECTION_ALL, threshold: 100 });
hammertime.on("pan", (ev) => {
    let fDeltaX: number;
    let fDeltaY: number;

    if (ev.pointerType === "mouse") {
        fDeltaX = ev.deltaX / 100;
        fDeltaY = ev.deltaY / 100;
    } else {
        fDeltaX = ev.deltaX / 10;
        fDeltaY = ev.deltaY / 10;
    }

    if (pageState.panning) {
        canvas.relativePan(new fabric.Point(Math.round(fDeltaX), Math.round(fDeltaY)));
    }
});
hammertime.on("pinch", (ev) => {
    canvas.setZoom(canvas.getZoom() * (ev.scale / 100));
});

my app.component.html

<div id="canvas-wrapper">
  <canvas id="drawing_layer"></canvas>
</div>

app.component.css

.upper-canvas {
  width: 100% !important;
  height: 100% !important;
}

Currently it is throwing exceptions at "canvas.on", haven't been able to see any examples online currently showing how to use angular2 with fabricjs and/or hammerjs effectively.

Answer 1

You should put the canvas.on(){...} inside your onInit function. i.e on component init you "register" your callback for when the canvas get clicked or any other event you want to monitor.