README.md

KonvaJS Stage & Background Layer Adjustment

Current

Desired

konva-opeanseadragon.js

var Overlay = function(viewer) {
    var self = this;

    var onImageViewChanged = function(e) {
    	// console.log(e);
    };
    this._viewer = viewer;
    this.imagingHelper = viewer.activateImagingHelper({
    	onImageViewChanged: onImageViewChanged
    });

    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._canvasdiv.style.background = 'purple';
    this._canvasdiv.style['z-index'] = '1000';
    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._backgroundLayer = new Konva.Layer();
	// this._backgroundLayer.add(new Konva.Rect({
	// 	width: this._konvaStage.width(),
	// 	height: this._konvaStage.height(),
	// 	fill: 'blue'
	// }));
	// this._backgroundLayer.moveToTop().draw();
	// this._konvaStage.add(this._backgroundLayer);
    // 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
	var konva = this._konvaStage;
    this._konvaStage.on('dragstart', function (options) {
    	console.log('1 dragstart options.target',options.target, 'store.hasKeysClicked',store.hasKeysClicked());
    	store.mouseEvents['dragstart'] = options;
      	board.disableOriginalMouseEvent(options);
    });
    this._konvaStage.on('dragmove', function (options) {
    	console.log('1 dragmove options.target');
      	board.disableOriginalMouseEvent(options);
    });
    this._konvaStage.on('dragend', function (options) {
    	console.log('1 dragend');
      	board.disableOriginalMouseEvent(options);
    });
    this._konvaStage.on('mousedown', function (options) {
    	console.log('1 mousedown options.target',options.target, 'store.hasKeysClicked',store.hasKeysClicked());
    	store.mouseEvents['mousedown'] = options;
      	board.disableOriginalMouseEvent(options);
    });

    this._konvaStage.on('mouseup', function (options) {
    	// console.log('mouseup options.target',options.target);
    	store.mouseEvents['mousedown'] = false;
        if (options.target  && store.hasKeysClicked()) {
            options.target.preventDefaultAction = true;
            options.target.preventDefault();
            options.evt.stopPropagation();
            return false;
        }
    });

    this._konvaStage.on('mousemove', function (options) {
    	// console.log('mouseup options.target',options.target);
        if (options.target  && store.hasKeysClicked()) {
            options.target.preventDefaultAction = true;
            options.target.preventDefault();
            options.evt.stopPropagation();
            return false;
        }
    });

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

    });

    this._viewer.addHandler('open', function() {
        self.resize();
        self.resizecanvas();
        // self.fitStageIntoParentContainer();
    });
	// this._viewer.addHandler('canvas-drag', function(target, info){
	// mouseMove();
	// });

	// this._viewer.addHandler('canvas-press', function(target, info) {
	// mouseDown();
	// });

	// this._viewer.addHandler('canvas-release', function(target, info) {
	// mouseUp();
	// });



};

// ----------
Overlay.prototype = {
    // ----------
    konvaBackgroundLayer: function() {
        return this._backgroundLayer;
    },
    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);

       var viewport = this._viewer.viewport;
    var imgBounds = new OpenSeadragon.Rect(0, 0, viewer.source.width, viewer.source.height);
    var topLeft = viewport.imageToViewerElementCoordinates(imgBounds.getTopLeft());
    var bottomRight = viewport.imageToViewerElementCoordinates(imgBounds.getBottomRight());

    // We only want the visible portion so we have to 'clip' the sizes to the area of the canvas
    topLeft.x = Math.max(0, topLeft.x);
    topLeft.y = Math.max(0, topLeft.y);
    var containerSize = viewport.getContainerSize();
    bottomRight.x = Math.min(containerSize.x - 1, bottomRight.x);
    bottomRight.y = Math.min(containerSize.y - 1, bottomRight.y);
    var width = bottomRight.x - topLeft.x;
    var height = bottomRight.y - topLeft.y;
	// console.log('wresize',width,'h',height);


       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 w = this.imagingHelper.imgWidth * this.imagingHelper.getZoomFactor();
       // // var h = this.imagingHelper.imgHeight * this.imagingHelper.getZoomFactor();
       // this._konvaStage.setWidth(this._viewer.container.clientWidth);
       // this._konvaStage.setHeight(this._viewer.container.clientHeight);

       // this._konvaStage.setWidth(width + topLeft.x);
       // this._konvaStage.setHeight(height + topLeft.y);
       this._konvaStage.setWidth(width);
       this._konvaStage.setHeight(height);


       var zoom = this._viewer.viewport._containerInnerSize.x * viewportZoom / this._scale;

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

       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,canvasOffset.x, topLeft.x);
       // console.log("CANVAS RESIZEY", y,pageScroll.y);
       this._konvaStage.x(x - canvasOffset.x); //x + pageScroll.x);
       // this._konvaStage.x(x - canvasOffset.x); //x + pageScroll.x);
       this._konvaStage.y(y - canvasOffset.y); //y + pageScroll.y);
       this._konvaStage.draw();
       // console.log('this._konvaStage.width() / this.imagingHelper.getZoomFactor()', this._konvaStage.width() / this.imagingHelper.getZoomFactor(), x- canvasOffset.x, topLeft.x);
       if (this._backgroundLayer) {
	       this._backgroundLayer.destroy();
	   }
	    var width = bottomRight.x - topLeft.x;
    var height = bottomRight.y - topLeft.y;
        this._backgroundLayer = new Konva.Layer();
		this._backgroundLayer.add(new Konva.Rect({
			x: 0,//topLeft.x,
			y: 0,//topLeft.y,
			// width: this.imagingHelper.imgWidth * this.imagingHelper.getZoomFactor(), //
			width: width,
			// height: this.imagingHelper.imgHeight * this.imagingHelper.getZoomFactor(),
			height: height,
			fill: '#077ceaad'
			// fill: "blue"
		}));
		this._backgroundLayer.draw();
		this._konvaStage.add(this._backgroundLayer);
		this._backgroundLayer.moveToBottom();

	    this._canvasdiv.style['margin-left'] = topLeft.x;
    	this._canvasdiv.style['margin-top'] = topLeft.y;
   }

};

konva-partial.js

//konva container
var canvasOffset=this._canvasdiv.getBoundingClientRect();

//size
this._konvaStage.setWidth(width + topLeft.x);
this._konvaStage.setHeight(height + topLeft.y);

//starting point 
this._konvaStage.x(x - canvasOffset.x); 
this._konvaStage.y(y - canvasOffset.y); 

//background layer
backgroundLayer.add(new Konva.Rect({
  x: topLeft.x,
  y: topLeft.y, 
  width: width, 
  height: height,
  fill: '#077ceaad' 
}));

possible-solution.js

this._konvaStage.setWidth(width);
this._konvaStage.setHeight(height);

this._konvaStage.x(x - topLeft.x - canvasOffset.x);
this._konvaStage.y(y - topLeft.y - canvasOffset.y);

this._backgroundLayer.add(new Konva.Rect({
  x: 0,
  y: 0, 
  width: width, 
  height: height,
  fill: '#077ceaad'
}));

$('.konvajs-content')[0].style['margin-left'] = topLeft.x;
$('.konvajs-content')[0].style['margin-top'] = topLeft.y;