In this gist I will try to connect between OpenSeaDragon and KonvaJS. See history for more details

README.md

Description

In this gist I will try to connect between OpenSeaDragon and KonvaJS. See history for more details

I have copied OpenSeaDragon's FabricJS plugin implementation in order to create the same plugin for KonvaJS.

Up until now I have only created a working Konva Rect:

 var options = {
   scale: 1000
  }
var overlay = this.viewer.fabricjsOverlay(options);

// add fabric rectangle

var rect = new Konva.Rect({
	x: 50,
	y: 50,
	stroke: 'blue',
	fill: 'red',
	strokeWidth: 2,
	width: 200,
	height: 200
});
var layer = new Konva.Layer();
layer.add(rect);
overlay.konvaStage().add(layer);
layer.moveToTop().draw();
overlay.konvaStage().draw();

TODOS

1. See if KonvaJS works with the above implementation i.e check more use cases.
2. Try to use KonvaReact and OSD.
3. ?

v1.js

// OpenSeadragon canvas Overlay plugin 0.0.1 based on svg overlay plugin

(function() {

if (!window.OpenSeadragon) {
    console.error('[openseadragon-canvas-overlay] requires OpenSeadragon');
    return;
}


/**
 * @param {Object} options
 *      Allows configurable properties to be entirely specified by passing
 *      an options object to the constructor.
 * @param {Number} options.scale
 *      Fabric 'virtual' canvas size, for creating objects
 **/
OpenSeadragon.Viewer.prototype.fabricjsOverlay = function(options) {


    this._fabricjsOverlayInfo = new Overlay(this);
    this._fabricjsOverlayInfo._scale = options.scale;

    return this._fabricjsOverlayInfo;
};
// static counter for multiple overlays differentiation
var counter = (function () {
    var i = 1;

    return function () {
        return i++;
    }
})();
// ----------
var Overlay = function(viewer) {
    var self = this;

    this._viewer = viewer;

    this._containerWidth = 0;
    this._containerHeight = 0;

    this._canvasdiv = document.createElement( 'div');
    this._canvasdiv.style.position = 'absolute';
    this._canvasdiv.style.left = 0;
    this._canvasdiv.style.top = 0;
    this._canvasdiv.style.width = '100%';
    this._canvasdiv.style.height = '100%';
    this._viewer.canvas.appendChild(this._canvasdiv);

    // this._canvas = document.createElement('canvas');

    this._id='osd-overlaycanvas-'+counter();
    this._canvasdiv.setAttribute('id', this._id);
    // this._canvas.setAttribute('id', this._id);
    // this._canvasdiv.appendChild(this._canvas);
    this.resize();
    this._konvaStage = new Konva.Stage({
    	container: this._id
    });
    // this._fabricCanvas=new fabric.Canvas(this._canvas);
    // disable fabric selection because default click is tracked by OSD
    // this._fabricCanvas.selection=false;
    // prevent OSD click elements on fabric objects
    this._konvaStage.on('mousedown', function (options) {
        if (options.target) {

            options.e.preventDefaultAction = true;
            options.e.preventDefault();
            options.e.stopPropagation();
        }
    });





    this._viewer.addHandler('update-viewport', function() {
        self.resize();
        self.resizecanvas();

    });

    this._viewer.addHandler('open', function() {
        self.resize();
        self.resizecanvas();
    });


};

// ----------
Overlay.prototype = {
    // ----------
    canvas: function() {
        // return this._canvas;
    },
    konvaStage: function() {
        return this._konvaStage;
    },
    // ----------
    clear: function() {
        this._konvaStage.clearAll();
    },
    // ----------
    resize: function() {
        if (this._containerWidth !== this._viewer.container.clientWidth) {
            this._containerWidth = this._viewer.container.clientWidth;
            this._canvasdiv.setAttribute('width', this._containerWidth);
            // this._canvas.setAttribute('width', this._containerWidth);
        }

        if (this._containerHeight !== this._viewer.container.clientHeight) {
            this._containerHeight = this._viewer.container.clientHeight;
            this._canvasdiv.setAttribute('height', this._containerHeight);
            // this._canvas.setAttribute('height', this._containerHeight);
        }

    },
   resizecanvas: function() {

       var origin = new OpenSeadragon.Point(0, 0);
       var viewportZoom = this._viewer.viewport.getZoom(true);
       this._konvaStage.setWidth(this._containerWidth);
       this._konvaStage.setHeight(this._containerHeight);
       var zoom = this._viewer.viewport._containerInnerSize.x * viewportZoom / this._scale;

       this._konvaStage.scale({ x: zoom, y: zoom });

       var viewportWindowPoint = this._viewer.viewport.viewportToWindowCoordinates(origin);
       var x=Math.round(viewportWindowPoint.x);
       var y=Math.round(viewportWindowPoint.y);
       var canvasOffset=this._canvasdiv.getBoundingClientRect();

       var pageScroll = OpenSeadragon.getPageScroll();

       // this._konvaStage.absolutePan(new fabric.Point(canvasOffset.left - x + pageScroll.x, canvasOffset.top - y + pageScroll.y));
       console.log("CANVAS RESIZEX", x,pageScroll.x);
       console.log("CANVAS RESIZEY", y,pageScroll.y);
       console.log("canvasOffset", canvasOffset);
       this._konvaStage.x(x - canvasOffset.x); //x + pageScroll.x);
       this._konvaStage.y(y - canvasOffset.y); //y + pageScroll.y);
       this._konvaStage.draw();

   }

};

})();