Basic setup and usage in vue3

Hi. First let me express my appreciation for your work on this library. Successfully marrying OSD and fabricjs is something I find very useful. I hope you can advice me on a couple of issues I run into trying to use it. I have attempted to setup (according to your readme) a minimal working example for myself in a vue3 component but with mixed results. 1) There was a problem with imports These two import statements turned out to be not enough. Component failed to compile, complaining about 'fabric' being undefined

import OpenSeadragon from 'openseadragon';
import { initOSDFabricJS } from 'openseadragon-fabric';

First I tried to change the import to this import { fabric, initOSDFabricJS } from 'openseadragon-fabric'; But it didn't work either, Then I simply imported fabricjs itself like this and the component compiled successfully import { fabric } from 'fabric'; Is it the correct way to set up imports or should I do something else? 2) Then there is a problem with expected behavior of fabricjs objects. For a simple test I just copied code from your readme to create a rectangle

const fabricOverlay = this.viewer.fabricOverlay( { fabricCanvasOptions: { selection: true} },   });
const newRect = new fabric.Rect({
        width: 200,
        height: 100,
        top: 1400,
        left: 1200,
        fill: 'red',
        stroke: '#000000',
        strokeWidth: 5,
                selectable: true,
})        
fabricOverlay.fabricCanvas().add(newRect);

The rectangle is drawn correctly, the problem is I can't select it for whatever reason. When I put my cursor over the rectangle it changes target-style as expected, but no matter how many times I click on it the rectangle is not selected, bounding frame with corners does not appear. What am I doing wrong here? Below is the full code of my component if it helps

<template>
  <div>
    <div style="width:100%; height:800px;" id="viewer-image" ref="image"/>
  </div>
</template>
<script>
import OpenSeadragon from "openseadragon";
import { fabric } from 'fabric';
import { initOSDFabricJS} from 'openseadragon-fabric';

export default {
  name: "OSDViewer",
  data() {
    return {
      viewer: null
    };
  },
  mounted() {
    this.initViewer();
  },
  methods: {
    initViewer() {
      console.log("init Viewer");
      initOSDFabricJS();

      var duomo = {
        Image: {
            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
            Url: "//openseadragon.github.io/example-images/duomo/duomo_files/",
            Format: "jpg",
            Overlap: "2",
            TileSize: "256",
            Size: {
            Width:  "13920",
            Height: "10200"
            }
        }
        };

        this.viewer = OpenSeadragon({
        id: "viewer-image",
        prefixUrl: "//openseadragon.github.io/openseadragon/images/",
        tileSources: duomo,
        showNavigator: false
        });

        const fabricOverlay = this.viewer.fabricOverlay({
        fabricCanvasOptions: { selection: true,
        },
        });
        const newRect = new fabric.Rect({
        width: 200,
        height: 100,
        top: 1400,
        left: 1200,
        fill: 'red',
        stroke: '#000000',
        strokeWidth: 5,
        selectable: true,
        })

        fabricOverlay.fabricCanvas().add(newRect);
    }
  }
};

</script>

Hi @ferropasha . Sorry for the delay, I only realized now that you had posted, I didn't see the notification.

Yes, you're correct. This version of the library didn't export any other library, just the functions that manage the FabricJS library. So, to create a fabric object you still need to import the default FabricJS, as you say: import { fabric } from 'fabric';
About the interactions with the FabricJS, by default, the OpenSeaDragon library manages all interactions. So, to interact with the FabricJS canvas you'll need to disable the OSD default interactions using the following line:

//Needs to be set to false to disable default mouse navigation in OSD.
newViewer.setMouseNavEnabled(false);

Nowadays, this is the only way to interact with the FabricJS canvas, when you disable the OSD interactions.

Any other questions, send them here. I will pay more attention to this repo. Thanks for the questions.

brunoocastro / openseadragon-fabric

Basic setup and usage in vue3 #1