Iterate all objects on a canvas in Fabric JS in TypeScript (@types)

Question

I'm new to FabricJS and Typescript trying to implement a snap to object like behavior on a Fabric JS canvas object in Typescript/Angular 4. I'm modeling my code on the JavaScript solution provided here:

https://stackoverflow.com/a/22649022/3207478

I'm running to errors with the line:

this.canvas.getObjects().forEach(function (targ) { ...

The error I get from the browser whenever an object is moved is:

ERROR TypeError: Cannot read property 'getObjects' of undefined
at klass.<anonymous> (navigation.component.ts:72)
at klass.fire (fabric.js:239)
at klass._fire (fabric.js:10974)
at klass._performTransformAction (fabric.js:10963)
at klass._transformObject (fabric.js:10927)
at klass.__onMouseMove (fabric.js:10900)
at klass._onMouseMove (fabric.js:10520)
at ZoneDelegate.invokeTask (zone.js:367)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.invokeTask (zone.js:366)
at Zone.runTask (zone.js:166)
at HTMLDocument.ZoneTask.invoke (zone.js:420)

Not sure what the best way to walk through all objects on a fabrics/@types canvas is in TypeScript. The WebStorm IDE suggests getObjects as the most useful method but perhaps there is something else I'm not seeing.

  ngOnInit() {
    // this.red = new fabric.Rect( {top: 100, left: 0, width: 80, height: 50, fill: 'red'});
    // this.blue = new fabric.Rect( {top: 100, left: 0, width: 80, height: 50, fill: 'blue'});
    // this.green = new fabric.Rect( {top: 100, left: 0, width: 80, height: 50, fill: 'green'});

    this.canvas = new fabric.Canvas('canvas', { selection: true });
    fabric.Object.prototype.transparentCorners = false;

    this.canvas.on('object:moving', function (e) {
      this.obj = e.target;
      this.obj.setCoords(); // Sets corner position coordinates based on current angle, width and height
      this.canvas.getObjects().forEach(function (targ) {
        this.activeObject = this.canvas.getActiveObject();

        if (targ === this.activeObject) { return; }

        if (Math.abs(this.activeObject.oCoords.tr.x - targ.oCoords.tl.x) < this.edgedetection) {
          this.activeObject.left = targ.left - this.activeObject.getWidth();
        }
        if (Math.abs(this.activeObject.oCoords.tl.x - targ.oCoords.tr.x) < this.edgedetection) {
          this.activeObject.left = targ.left + targ.getWidth();
        }
        if (Math.abs(this.activeObject.oCoords.br.y - targ.oCoords.tr.y) < this.edgedetection) {
          this.activeObject.top = targ.top - this.activeObject.getHeight();
        }
        if (Math.abs(targ.oCoords.br.y - this.activeObject.oCoords.tr.y) < this.edgedetection) {
          this.activeObject.top = targ.top + targ.getHeight();
        }
        if (this.activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(this.activeObject)) {
          targ.strokeWidth = 10;
          targ.stroke = 'red';
        } else {
          targ.strokeWidth = 0;
          targ.stroke = false;
        }
        if (!this.activeObject.intersectsWithObject(targ)) {
          this.activeObject.strokeWidth = 0;
          this.activeObject.stroke = false;
        }
      });
    });

  }

Answer 1

Your context (this) gets lost when you use the function() {} syntax. Use arrow functions which will preserve your context:

this.canvas.on('object:moving', (e) => {

     // ....
})