digilib doesn't work! Please switch on Javascript or notify the server administrator!
-
-
+
+
diff -r be5a63e5b8ee -r 85906c9cd08b webapp/src/main/webapp/jquery/jquery.digilib.annotator.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.annotator.js Thu Jan 22 15:52:56 2015 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.annotator.js Thu Jan 22 16:14:17 2015 +0100
@@ -31,7 +31,7 @@
*/
(function($) {
// version of this plugin
- var version = 'jquery.digilib.annotator.js 1.2.0';
+ var version = 'jquery.digilib.annotator.js 1.3.0';
// affine geometry
var geom = null;
@@ -39,8 +39,8 @@
var digilib = null;
// the functions made available by digilib
var fn = {};
- // the normal zoom area
- var FULL_AREA = null;
+ // annotation shape layer
+ var annotationLayer = null;
var buttons = {
annotations : {
@@ -233,27 +233,7 @@
var pos = data.imgTrafo.invtransform(mpos);
// mark selection shape
var shape = {'type' : 'point', 'units' : 'fraction', 'geometry' : geom.position(pos)};
- annotator.selectedShapes = [shape];
- // create and edit new annotation
- var annotation = annotator.createAnnotation();
- var cleanup = function () {
- annotator.unsubscribe('annotationEditorSubmit', save);
- annotator.unsubscribe('annotationEditorHidden', cancel);
- };
- var save = function () {
- console.log("annotation save.")
- cleanup();
- annotator.setupAnnotation(annotation);
- // Fire annotationCreated events so that plugins can react to them
- annotator.publish('annotationCreated', [annotation]);
- };
- var cancel = function () {
- console.log("annotation cancel.")
- cleanup();
- };
- annotator.subscribe('annotationEditorSubmit', save);
- annotator.subscribe('annotationEditorHidden', cancel);
- annotator.showEditor(annotation, mpos.getAsCss());
+ createAnnotation(data, shape, mpos);
return false;
});
};
@@ -269,117 +249,179 @@
console.log("setAnnotationRegion at=", rect);
// mark selection shape
var shape = {'type' : 'rectangle', 'units' : 'fraction', 'geometry' : rect};
- annotator.selectedShapes = [shape];
// create and edit new annotation
var pos = rect.getPt1();
var mpos = data.imgTrafo.transform(pos);
- var annotation = annotator.createAnnotation();
- var cleanup = function () {
- annotator.unsubscribe('annotationEditorSubmit', save);
- annotator.unsubscribe('annotationEditorHidden', cancel);
- };
- var save = function () {
- console.log("annotation save.")
- cleanup();
- annotator.setupAnnotation(annotation);
- // Fire annotationCreated events so that plugins can react to them
- annotator.publish('annotationCreated', [annotation]);
- };
- var cancel = function () {
- console.log("annotation cancel.")
- cleanup();
- };
- annotator.subscribe('annotationEditorSubmit', save);
- annotator.subscribe('annotationEditorHidden', cancel);
- annotator.showEditor(annotation, mpos.getAsCss());
+ createAnnotation(data, shape, mpos);
});
};
/**
+ * Show editor and save annotation.
+ */
+ var createAnnotation = function (data, shape, screenPos) {
+ var annotator = data.annotator;
+ annotator.selectedShapes = [shape];
+ // create and edit new annotation
+ var annotation = annotator.createAnnotation();
+ var cleanup = function () {
+ annotator.unsubscribe('annotationEditorSubmit', save);
+ annotator.unsubscribe('annotationEditorHidden', cancel);
+ };
+ var save = function () {
+ console.log("annotation save.");
+ cleanup();
+ annotator.setupAnnotation(annotation);
+ // Fire annotationCreated events so that plugins can react to them
+ annotator.publish('annotationCreated', [annotation]);
+ renderAnnotations(data);
+ };
+ var cancel = function () {
+ console.log("annotation cancel.")
+ cleanup();
+ };
+ annotator.subscribe('annotationEditorSubmit', save);
+ annotator.subscribe('annotationEditorHidden', cancel);
+ annotator.showEditor(annotation, screenPos.getAsCss());
+ }
+
+ /**
* Render all annotations on the image
*/
var renderAnnotations = function (data) {
- if (data.annotations == null || data.annotator == null || data.$img == null || data.imgTrafo == null)
+ if (data.annotations == null || data.annotator == null)
return;
var annotations = data.annotations;
var cssPrefix = data.settings.cssPrefix;
var $elem = data.$elem;
// show annotation user state
$elem.find('div#'+cssPrefix+'button-annotationuser').attr('title', 'annotation user: '+data.settings.annotationUser);
- // clear annotations
- $elem.find('div.'+cssPrefix+'annotationmark,div.'+cssPrefix+'annotationregion').remove();
- if (!data.settings.isAnnotationsVisible) return;
- // re-render
- for (var i = 0; i < annotations.length; i++) {
- renderAnnotation(data, annotations[i]);
+ // create vector shapes
+ var shapes = [];
+ for (var i = 0; i < annotations.length; ++i) {
+ shapes.push(createVectorShape(data, annotations[i]));
+ }
+ annotationLayer.shapes = shapes;
+ // render vector layer
+ if (data.$img != null && data.imgTrafo != null) {
+ annotationLayer.renderFn(data, annotationLayer);
}
};
/**
- * Render a single annotation on the image.
+ * Layer render function for vector plugin.
+ */
+ var layerRenderFn = function (data, layer) {
+ // default shape render fn creates SVG elements
+ fn.vectorDefaultRenderFn(data, layer);
+ // attach annotations to shapes
+ var annotations = data.annotations;
+ for (var i = 0; i < annotations.length; ++i) {
+ attachAnnotation(data, annotations[i], layer);
+ }
+ layer.dirty = false;
+ };
+
+ /**
+ * Create a vector shape for an annotation.
*
* @param annot annotation wrapper object
+ * @returns vector shape object
*/
- var renderAnnotation = function (data, annot) {
- if (annot == null || annot.annotation == null || data.$img == null || data.imgTrafo == null)
+ var createVectorShape = function (data, annot) {
+ if (annot == null || annot.annotation == null)
return;
if (!data.settings.isAnnotationsVisible) return;
var cssPrefix = data.settings.cssPrefix;
- var $elem = data.$elem;
- var annotator = data.annotator;
var annotation = annot.annotation;
var idx = '';
if (data.settings.showAnnotationNumbers) {
// show annotation number
idx = annot.idx ? annot.idx : '?';
}
+ var id = fn.createId(annotation.id, cssPrefix+'annot-');
+ if (annotation.id == null) {
+ console.warn("substituting annotation id!");
+ annotation.id = id;
+ }
var shape = null;
var area = null;
var type = null;
+ var vectorShape = null;
if (annotation.shapes != null) {
// annotation shape
shape = annotation.shapes[0];
type = shape.type;
if (type === "point") {
area = geom.position(shape.geometry);
+ vectorShape = {
+ 'id': id,
+ 'geometry': {
+ 'type' : 'Point',
+ 'coordinates' : [[area.x, area.y]]
+ },
+ 'properties' : {
+ 'stroke' : 'yellow',
+ 'cssclass' : cssPrefix+'svg-annotationregion annotator-hl',
+ 'style' : 'pointer-events:all'
+ }
+ };
} else if (type === "rectangle") {
area = geom.rectangle(shape.geometry);
+ // render rectangle
+ var pt1 = area.getPt1();
+ var pt2 = area.getPt2();
+ vectorShape = {
+ 'id': id,
+ 'geometry': {
+ 'type' : 'Rectangle',
+ 'coordinates' : [[pt1.x, pt1.y], [pt2.x, pt2.y]]
+ },
+ 'properties' : {
+ 'stroke' : 'yellow',
+ 'cssclass' : cssPrefix+'svg-annotationregion annotator-hl',
+ 'style' : 'pointer-events:all'
+ }
+ };
} else {
- console.error("Unsupported shape type="+type);
+ console.error("Unsupported shape type: "+type);
return;
}
- } else if (annotation.areas != null) {
- // legacy annotation areas
- shape = annotation.areas[0];
- area = geom.rectangle(shape);
- if (area.isRectangle()) {
- type = 'rectangle';
- } else {
- type = 'point';
- }
} else {
- console.error("Unable to render this annotation!");
+ console.error("Unable to create a shape for this annotation!");
return;
}
- var screenRect = null;
- var $annotation = null;
- if (type === 'rectangle') {
- // render rectangle
- var clippedArea = data.zoomArea.intersect(area);
- if (clippedArea == null) return;
- screenRect = data.imgTrafo.transform(clippedArea);
- $annotation = $('