mousedown event not firing - fabric.js with vue

Question

I need to bind fabric js canvas mouse events.

I have shown mousedown event example to canvas using vue in fabric js.

I tried with .native and without .native . None of them is working.

My code is as below.

<template>
  <div class="container">
    <div ref="rootDiv">
      <canvas
        :id="'c'"
        @mousedown.native="mousedown"
      ></canvas>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import { fabric } from "fabric";

@Component
export default class CanvasComponent extends Vue {

  public mounted() {
      const canvas = new fabric.Canvas('c');
  }

  public mousedown(e: any) {
    debugger;
    console.log('mouse down clicked.')
  }

}
</script>

Answer 1

It seems like fabric is changing structure of the canvas. it is surrounding divs and one more canvas is also appended.

So they might be first removing this canvas and later add again, which might not be deep copy. and because of that events are gettting removed. if we bind through their API, then it is working perfectly fine. So following event binding is working.

canvas.on('mouse:down', (e) => this.mouseDown(e));

Structure they are replacing with given canvas is as following.

<div class="canvas-container" style="width: 299px; height: 429.058px; position: relative; user-select: none;">

<canvas id="1" class="lower-canvas" width="299" height="429" style="position: absolute; width: 299px; height: 429.058px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>

<canvas class="upper-canvas " width="299" height="429" style="position: absolute; width: 299px; height: 429.058px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: default;"></canvas>

</div>