@adamjarling/openseadragon-fabricjs-overlay v0.3.2

@adamjarling/OpenSeadragonFabricjsOverlay

This package is a forked version of https://github.com/altert/OpenseadragonFabricjsOverlay

Please visit the original repository for details.

Differences in forked version

This forked version does a few things differently.

• Syncs Fabric JS object zoom levels to OpenSeadragon's image zoom level, instead of the viewport zoom level. Basically this better supports browser resizing, both horizontally and vertically.
• This package provides JS module exports for initFabricJSOverlay and fabric, so you can @import into your compiled JS app.

Usage

npm install @adamjarling/openseadragon-fabricjs-overlay

To import the fabric module into your JavaScript app:

import { fabric } from '@adamjarling/openseadragon-fabricjs-overlay';
...

// Create a FabricJS object
const newShape = new fabric.Rect({
    ...shapeOptions,
    ...fillProps,
    width: pointer.x - origX,
    height: pointer.y - origY,
});

For example if you're syncing OpenSeadragon and FabricJS in a React app for example, you could do something like this:

import React from 'react';
import { useOpenSeadragon, OpenSeadragon } from 'use-open-seadragon';
import {
  fabric,
  initFabricJSOverlay,
} from '@adamjarling/openseadragon-fabricjs-overlay';

...

export default function MyFabricViewer() {
    // Customize Fabric selection handles
    fabric.Object.prototype.set({
        borderColor: '#22a2f8',
        borderScaleFactor: 2, // selection stroke width
        cornerColor: 'white',
        cornerSize: 10,
        transparentCorners: false,
    });

    // Add Fabric support to OSD
    initFabricJSOverlay(OpenSeadragon, fabric);

    // Initialize our OpenSeadragon instance
    const [ref, { viewer }] = useOpenSeadragon(tile, osdOptions);

    React.useEffect(() => {
        if (!viewer) return;
        viewer.fabricjsOverlay({ scale: 1 })
    }, [viewer]);

    return (
        <div ref={ref} />
    );
}

For more info, check out how this project uses the module:

https://github.com/adamjarling/loc-speculative-annotations