CODEWITHSUNDEEP
angular
Rahi Verma
Rahi Verma

Reputation: 21

how to access a variable from mouse event function in angular8?

I am new to angular. i want to send the coordinates of arrow outside of mouse up event function. I am unable to send this.arrays (corrdinates on click on send button).

 Arrow.prototype.onMouseUp = function(o) {
    var inst = this;
    inst.disable();
    var pointer = inst.canvas.getPointer(o.e);

    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
    var line = new fabric.LineArrow(points, {
      strokeWidth: 2,
      left: pointer.x,
      top: pointer.y,
      fill: "green",
      stroke: "green",

      hasBorders: false,
      hasControls: false,
    });
    inst.arrowEndingX = line.left;
    inst.arrowEndingY = line.top;
    // console.log("Arrow ending Point x2:" + " " + inst.arrowEndingX);
    // console.log("Arrow ending Point y2:" + " " + inst.arrowEndingY);
    // console.log(this.arrorLeft)
    this.arrays = [];
    this.arrays.push(
      "x1:" + inst.arrowLeft,
      "y1:" + inst.arrowTop,
      "x2:" + inst.arrowEndingX,
      "y2:" + inst.arrowEndingY
    );
      this.a = this.arrays;
    // this.arrowPoints = this.arrorLeft
     console.log(this.arrays);
  console.log("array");
  // console.log(this.a);
  };

Upvotes: 0

Views: 471

Answers (1)

Munerz
Munerz

Reputation: 1182

Your question is quite vague but if you want to listen to a mouse event in Angular I'd advise that you rxjs

//create observable that emits click events
const source = fromEvent(document, 'click');
//map to string with given event timestamp
const example = source.pipe(map(event => `Event time: ${event.timeStamp}`));
//output (example): 'Event time: 7276.390000000001'
const subscribe = example.subscribe(val => console.log(val));

Source - https://www.learnrxjs.io/learn-rxjs/operators/creation/fromevent

The above example shows how you can map the event.timeStamp in your situation you'll want the event x and y coords.

Rather than using document in the above example you would naturally bind it to whatever HTML element is triggering the click event, this can be achieved a number of ways, vanilla JS document.get angulars @ViewChild decorator ect.

Once you've sorted the above two out, within the subscribe block you can assign the x & y coords to what ever it is that you are trying to assign them to.

Upvotes: 1

Related Questions