Skip to content

Commit

Permalink
working on coordinate systems
Browse files Browse the repository at this point in the history
  • Loading branch information
@rsinghal
rsinghal committed Aug 17, 2016
1 parent 472c51b commit c5922c7
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 18 deletions.
9 changes: 6 additions & 3 deletions js/src/annotations/osd-region-draw-tool.js
View file
Expand Up @@ -18,7 +18,7 @@
$.OsdRegionDrawTool.prototype = {

init: function() {
this.svgOverlay = this.osdViewer.svgOverlay(this.osdViewer.id, this.windowId, this.state, this.eventEmitter);
this.svgOverlay = this.osdViewer.svgOverlay(this.osdViewer.id, this.windowId, this.state, this.eventEmitter, this.manifestor);
this.svgOverlay.show();
this.svgOverlay.disable();
},
Expand Down Expand Up @@ -96,6 +96,7 @@
viewport: windowElement,
getAnnoFromRegion: _this.getAnnoFromRegion.bind(this)
});
console.log(this.svgOverlay.paperScope.view.zoom);
this.svgOverlay.paperScope.view.draw();
},

Expand All @@ -107,8 +108,10 @@
'width': parseInt(shapeArray[2]),
'height': parseInt(shapeArray[3])
};

return this.svgOverlay.createRectangle(shape, annotation);
var canvas = this.manifestor.getState().canvasObjects[this.canvasId],
coords = canvas.canvasToWorldCoordinates(shape),
rect = new OpenSeadragon.Rect(coords.x, coords.y, coords.width, coords.height);
return this.svgOverlay.createRectangle(rect, annotation);
},

showTooltipsFromMousePosition: function(event, location, absoluteLocation) {
Expand Down
37 changes: 27 additions & 10 deletions js/src/annotations/osd-svg-overlay.js
View file
Expand Up @@ -8,11 +8,11 @@
return this.svgOverlayTools;
};

OpenSeadragon.Viewer.prototype.svgOverlay = function(osdViewerId, windowId, state, eventEmitter) {
return new $.Overlay(this, osdViewerId, windowId, state, eventEmitter);
OpenSeadragon.Viewer.prototype.svgOverlay = function(osdViewerId, windowId, state, eventEmitter, manifestor) {
return new $.Overlay(this, osdViewerId, windowId, state, eventEmitter, manifestor);
};

$.Overlay = function(viewer, osdViewerId, windowId, state, eventEmitter) {
$.Overlay = function(viewer, osdViewerId, windowId, state, eventEmitter, manifestor) {
var drawingToolsSettings = state.getStateProperty('drawingToolsSettings');
this.drawingToolsSettings = drawingToolsSettings;
var availableAnnotationDrawingTools = state.getStateProperty('availableAnnotationDrawingTools');
Expand All @@ -22,6 +22,7 @@
inEditMode: false,
osdViewerId: osdViewerId,
windowId: windowId,
manifestor: manifestor,
commentPanel: null,
mode: '', // Possible modes: 'create', 'translate', 'deform','rotate', 'edit' and '' as default.
draftPaths: [],
Expand Down Expand Up @@ -57,10 +58,11 @@
console.log(this.viewer);
this.canvas = document.createElement('canvas');
// workaround to remove focus from editor
jQuery(this.canvas).attr('tabindex', '0').mousedown(function(){ jQuery(this).focus();});
jQuery(this.canvas).attr({'tabindex': '0'}).mousedown(function(){ jQuery(this).focus();});
this.canvas.id = 'draw_canvas_' + this.windowId;
// Drawing of overlay border during development.
// this.canvas.style.border = '1px solid yellow';
console.log(this.viewer.canvas);
this.viewer.canvas.appendChild(this.canvas);

var _this = this;
Expand Down Expand Up @@ -329,6 +331,7 @@
this.paperScope = new paper.PaperScope();
this.paperScope.setup('draw_canvas_' + _this.windowId);
this.paperScope.activate();
this.paperScope.view.zoom = this.getViewerScale();
this.paperScope.project.options.handleSize = _this.state.getStateProperty('shapeHandleSize');
jQuery(_this.canvas).attr('keepalive', 'true');
this.annotationUtils = new $.AnnotationUtils();
Expand Down Expand Up @@ -367,6 +370,13 @@
this.listenForActions();
},

getViewerScale: function() {
var zoom = this.viewer.viewport.getZoom(true);
var width = this.viewer.container.clientWidth;

return width * zoom;
},

handleDeleteShapeEvent: function (event, shape) {
var _this = this;
new $.DialogBuilder(this.slotWindowElement).confirm(i18n.t('deleteShape'), function (result) {
Expand Down Expand Up @@ -620,20 +630,27 @@
resize: function() {
var viewportBounds = this.viewer.viewport.getBounds(true);
/* in viewport coordinates */
this.canvas.width = this.viewer.viewport.containerSize.x;
this.canvas.height = this.viewer.viewport.containerSize.y;
var width = this.viewer.container.clientWidth * 2;
var height = this.viewer.container.clientHeight * 2;
this.canvas.width = width;
this.canvas.height = height;
var transform = 'translate(0px,0px)';
this.canvas.style.WebkitTransform = transform;
this.canvas.style.msTransform = transform;
this.canvas.style.transform = transform;
this.canvas.style.marginLeft = '0px';
this.canvas.style.marginTop = '0px';
this.canvas.style.width = width;
this.canvas.style.height = height;
if (this.paperScope && this.paperScope.view) {
this.paperScope.view.viewSize = new this.paperScope.Size(this.canvas.width, this.canvas.height);
this.paperScope.view.zoom = this.viewer.viewport.viewportToImageZoom(this.viewer.viewport.getZoom(true));
this.paperScope.view.center = new this.paperScope.Size(
this.viewer.viewport.contentSize.x * viewportBounds.x + this.paperScope.view.bounds.width / 2,
this.viewer.viewport.contentSize.x * viewportBounds.y + this.paperScope.view.bounds.height / 2);
this.paperScope.view.zoom = this.getViewerScale();
// this.paperScope.view.center = new this.paperScope.Size(
// // this.viewer.viewport.contentSize.x * viewportBounds.x + this.paperScope.view.bounds.width / 2,
// // this.viewer.viewport.contentSize.x * viewportBounds.y + this.paperScope.view.bounds.height / 2);
// this.viewer.viewport.containerSize.x * viewportBounds.x + this.paperScope.view.bounds.width / 2,
// this.viewer.viewport.containerSize.x * viewportBounds.y + this.paperScope.view.bounds.height / 2);
this.paperScope.view.center = new this.paperScope.Point(this.viewer.viewport.getCenter());
this.paperScope.view.update(true);
var allItems = this.paperScope.project.getItems({
name: /_/
Expand Down
3 changes: 3 additions & 0 deletions js/src/widgets/annotationsLayer.js
View file
Expand Up @@ -5,6 +5,7 @@
jQuery.extend(true, this, {
annotationsList: null,
viewer: null,
manifestor: null,
drawTool: null,
selected: null,
hovered: null,
Expand Down Expand Up @@ -85,6 +86,8 @@
var _this = this;
this.drawTool = new $.OsdRegionDrawTool({
osdViewer: _this.viewer,
manifestor: _this.manifestor,
canvasId: _this.canvasId,
parent: _this,
list: _this.annotationsList, // must be passed by reference.
visible: false,
Expand Down
15 changes: 10 additions & 5 deletions js/src/widgets/imagePanel.js
View file
Expand Up @@ -126,7 +126,10 @@
});

_this.eventEmitter.subscribe('fitBounds.' + _this.windowId, function(event, bounds) {
var rect = _this.osd.viewport.imageToViewportRectangle(Number(bounds.x), Number(bounds.y), Number(bounds.width), Number(bounds.height));
var canvas =_this.viewer.getState().canvasObjects[_this.canvasID],
coords = canvas.canvasToWorldCoordinates(bounds),
rect = new OpenSeadragon.Rect(coords.x, coords.y, coords.width, coords.height);
console.log(rect);
_this.osd.viewport.fitBoundsWithConstraints(rect, false);
});

Expand Down Expand Up @@ -525,7 +528,6 @@
selectedCanvas: this.canvasID
});

_this.viewer.selectViewingMode(this.viewingMode);
_this.osd = _this.viewer.osd;
// if (_this.state.getStateProperty('autoHideControls')) {
// var timeoutID = null,
Expand Down Expand Up @@ -565,7 +567,10 @@
// _this.eventEmitter.publish('updateTooltips.' + _this.windowId, [point, point]);
// }, 30));

// _this.osd.addHandler('open', function(){
setTimeout(function() {
_this.addAnnotationsLayer(_this.elemAnno);
}, 1000);

// _this.eventEmitter.publish('osdOpen.'+_this.windowId);
// if (_this.osdOptions.osdBounds) {
// var rect = new OpenSeadragon.Rect(_this.osdOptions.osdBounds.x, _this.osdOptions.osdBounds.y, _this.osdOptions.osdBounds.width, _this.osdOptions.osdBounds.height);
Expand All @@ -575,8 +580,6 @@
// _this.setBounds();
// }

_this.addAnnotationsLayer(_this.elemAnno);

// //get the state before resetting it so we can get back to that state
// var originalState = _this.hud.annoState.current;
// var selected = _this.element.find('.mirador-osd-edit-mode.selected');
Expand Down Expand Up @@ -622,6 +625,8 @@
state: _this.state,
annotationsList: _this.state.getWindowAnnotationsList(_this.windowId) || [],
viewer: _this.osd,
manifestor: _this.viewer,
canvasId: _this.canvasID,
windowId: _this.windowId,
element: element,
eventEmitter: _this.eventEmitter
Expand Down

0 comments on commit c5922c7

Please sign in to comment.