Use mouse eventhanlders inside service, ViewChild directiveRef

[fabio984]

I'm trying to move mouse event handlers to a service and I can't make it work.

I'm trying to replicate "draw rectangle with mouse" following this tutorial/app:

https://codingsans.com/blog/fabricjs-tutorial#Rectangle_Ellipse

the example project from his website is here:
https://gitlab.com/Barna001/fabric.js-free-hand-drawing

the difference from tutorial to my project is that I'm using ngx-fabric-wrapper and he's not.
He calls fabric with:
public canvas: fabric.Canvas;
both in services and canvas-component.

And I call the canvas with the ngx-canvas-wrapper:
@ViewChild(FabricDirective) directiveRef?: FabricDirective;

I can't call it inside service, so I can't use event handlers and other services...

my template is:

`<div class="canvas-wrapper" #canvasWrapper>
<canvas class="fabric" [fabric]="config">

`

and .ts ( You'll see the mouseDown and MouseMove comented because is what I'm trying to pass to the service!)

`import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, Input, AfterContentInit, NgZone } from '@angular/core';
import { fabric } from 'fabric';
import { FabricComponent, FabricDirective, FabricConfigInterface } from 'ngx-fabric-wrapper';
import { EventHandlerService } from 'src/app/workflows/services/event-handler.service';
import { faSearchLocation, faArrowsAlt, faInfo, faSquare } from '@fortawesome/free-solid-svg-icons';
import { Rect } from 'fabric/fabric-impl';
import {
Pointer,
CustomFabricRect,
DrawingThickness,
DrawingColours,
CustomFabricObject,
FabricObjectType
} from 'src/app/workflows/models/resources/workflows/canvas-models';
import { FabricShapeService } from 'src/app/workflows/services/fabric-shape.service';
import { Subscription } from 'rxjs';

@component({
selector: 'canvas-brick-config',
templateUrl: './canvas-brick-config.component.html',
styleUrls: ['./canvas-brick-config.component.scss']
})
export class CanvasBrickConfigComponent implements OnInit, AfterContentInit, AfterViewInit {

image = new Image();
@Input() imageWidth: number;
@Input() imageHeight: number;
@Input() imageFromBrick: string;
@Input() canvasIndex: number;
private _isMouseDown = false;
private _initPositionOfElement: Pointer;
directiveRefSubscription: Subscription;
extendedRect: fabric.Rect;
public type = 'directive';

public config: FabricConfigInterface = {
    renderOnAddRemove: true
};

private _elementUnderDrawing: CustomFabricRect;

selectedThickness: DrawingThickness = DrawingThickness.THIN;
_selectedColour: DrawingColours = DrawingColours.BLACK;

private previousTop: number;
private previousLeft: number;
private previousScaleX: number;
private previousScaleY: number;

@ViewChild(FabricDirective) directiveRef?: FabricDirective;
@ViewChild('canvasWrapper') canvasWrapper: ElementRef;

constructor(private eventHandler: EventHandlerService, private ngZone: NgZone, private fabricShapeService: FabricShapeService) {
}

ngOnInit() {
    this.image.src = this.imageFromBrick;     
}

ngAfterViewInit() {
    this.addEventListeners();
    this.addImage();
}

public addImage(): void {
    fabric.Image.fromURL(this.image.src, (image) => {
        
   
        
        image.set({
            width: this.image.width,
            height: this.image.height,
            originX: 'left',
            originY: 'top',
        });

        this.directiveRef.setWidth(this.image.width);
        this.directiveRef.setHeight(this.image.height);
        this.directiveRef.fabric().setBackgroundImage(image);
    });
}
   
private addEventListeners() {
    this.directiveRef.fabric().on('mouse:down', e => this.ngZone.run(() => this.onCanvasMouseDown(e)));
    this.directiveRef.fabric().on('mouse:move', e => this.ngZone.run(() => this.onCanvasMouseMove(e)));
    this.directiveRef.fabric().on('mouse:up', () => this.ngZone.run(() => this.onCanvasMouseUp()));
}

private onCanvasMouseDown(event: { e: Event }) {
    this.eventHandler.mouseDown(event.e);
    // private onCanvasMouseDown(e: Event ) {
    // this._isMouseDown = true;
    // const pointer = this.directiveRef.fabric().getPointer(e);
    // this._initPositionOfElement = { x: pointer.x, y: pointer.y };
    // if (!this.isOverObject) {
        
    //     this._elementUnderDrawing = this.fabricShapeService.createRectangle(
    //         this.directiveRef.fabric(),
    //         this.selectedThickness,
    //         this._selectedColour,
    //         pointer,
    //     );
    // }
}
    
private onCanvasMouseMove(event: { e: Event }) {
    this.eventHandler.mouseMove(event.e);
    // if (!this._isMouseDown) {
    //     return;
    // }
    
    // const pointer = this.directiveRef.fabric().getPointer(e);
    
    // if (!this.isOverObject) {
    //     this.fabricShapeService.formRectangle(
    //         this._elementUnderDrawing as CustomFabricRect,
    //         this._initPositionOfElement,
    //         pointer,
    //     );
    // }
    // this.directiveRef.fabric().selection = false;
    // this.directiveRef.fabric().renderAll();
}
        
private onCanvasMouseUp() {
   this.eventHandler.mouseUp();
}`

and the service:

`import { fabric } from 'fabric';
import { Injectable } from '@angular/core';
import { FabricDirective } from 'ngx-fabric-wrapper';
import { Pointer, CustomFabricRect, DrawingThickness, DrawingColours } from '../models/resources/workflows/canvas-models';
import { FabricShapeService } from './fabric-shape.service';

@Injectable()
export class EventHandlerService {

private _isMouseDown = false;
private _initPositionOfElement: Pointer;
private _elementUnderDrawing: CustomFabricRect;
isOverObject = false;
selectedThickness: DrawingThickness = DrawingThickness.THIN;
_selectedColour: DrawingColours = DrawingColours.BLACK;

constructor(private fabricShapeService: FabricShapeService) {
}

mouseDown(e: Event) {
    console.log('mouseDown at Service');
    this._isMouseDown = true;
    const pointer = this.directiveRef.fabric().getPointer(e);
    this._initPositionOfElement = { x: pointer.x, y: pointer.y };       
    
    if (!this.isOverObject) {
        
        this._elementUnderDrawing = this.fabricShapeService.createRectangle(
            this.directiveRef.fabric(),
            this.selectedThickness,
            this._selectedColour,
            pointer,
        );
    }

}

mouseMove(e: Event) {
    // console.log('mouseMove at service');
    if (!this._isMouseDown) {
        return;
    }
    
    const pointer = this.directiveRef.fabric().getPointer(e);
    console.log(pointer);
    
    if (!this.isOverObject) {
        this.fabricShapeService.formRectangle(
            this._elementUnderDrawing as CustomFabricRect,
            this._initPositionOfElement,
            pointer,
        );
    }
    this.directiveRef.fabric().selection = false;
    this.directiveRef.fabric().renderAll();
}

mouseUp() {
    console.log('mouseUp at Service');
    this._isMouseDown = false;
    this.directiveRef.fabric().renderAll();
}

}`

How can I make the mouse event hanlders work inside the service? In other words: how can I handle the existing canvas on the "service"?