Merge pull request #44 from cnr-isti-vclab/annotationsrestore

Annotations restore

dist/examples/annotation-editor/index.html

@@ -143,7 +143,7 @@ <h1 class="headline">OpenLIME - Annotation Editor</h1>
         }
 
         // Create an annotation layer and add it to the canvans
-        const anno = new OpenLIME.Layer(aOptions);
+        const anno = new OpenLIME.LayerAnnotation(aOptions);
         lime.addLayer('anno', anno);
 
         // If editorEnable, create a SVG annotation Editor

src/BoundingBox.js

@@ -139,7 +139,7 @@ class BoundingBox {
      * @returns {number} The center value.
      */
     center() {
-        return [(this.xLow+this.xHigh)/2, (this.yLow+this.yHigh)/2];
+        return { x: (this.xLow+this.xHigh)/2, y: (this.yLow+this.yHigh)/2 };
     }
 
     /**

src/Camera.js

@@ -290,7 +290,7 @@ class Camera {
 		let c = box.center();
 		let z = Math.min(w / bw, h / bh);
 
-		this.setPosition(dt, -c[0], -c[1], z, 0);
+		this.setPosition(dt, -c.x, -c.y, z, 0);
 	}
 
 	/**

src/EditorSvgAnnotation.js

@@ -144,8 +144,11 @@ class EditorSvgAnnotation {
 			updateCallback: null,
 			deleteCallback: null
 		}, options);
-
-		layer.style += Object.entries(this.classes).map((g) => `[data-class=${g[0]}] { stroke:${g[1].style.stroke}; }`).join('\n');
+
+		layer.style += Object.entries(this.classes).map((g) => {
+			console.assert(g[1].hasOwnProperty('stroke'), "Classes needs a stroke property");
+			return `[data-class=${g[0]}] { stroke:${g[1].stroke}; }`;
+		}).join('\n');
 		//at the moment is not really possible to unregister the events registered here.
 		viewer.pointerManager.onEvent(this);
 		document.addEventListener('keyup', (e) => this.keyUp(e), false);
@@ -240,7 +243,7 @@ class EditorSvgAnnotation {
 		edit.classList.remove('hidden');
 		let button = edit.querySelector('.openlime-select-button');
 		button.textContent = this.classes[anno.class].label;
-		button.style.background = this.classes[anno.class].style.stroke;
+		button.style.background = this.classes[anno.class].stroke;
 	}
 
 	/** @ignore */
@@ -279,7 +282,7 @@ class EditorSvgAnnotation {
 						<div class="openlime-select-button"></div>
 						<ul class="openlime-select-menu">
 						${Object.entries(this.classes).map((c) =>
-			`<li data-class="${c[0]}" style="background:${c[1].style.stroke};">${c[1].label}</li>`).join('\n')}
+			`<li data-class="${c[0]}" style="background:${c[1].stroke};">${c[1].label}</li>`).join('\n')}
 						</ul>
 					</div>
 					<label for="idx">Index:</label> <input name="idx" type="text"><br>	
@@ -324,7 +327,7 @@ class EditorSvgAnnotation {
 
 			input.value = e.srcElement.getAttribute('data-class');
 			input.dispatchEvent(new Event('change'));
-			button.style.background = this.classes[input.value].style.stroke;
+			button.style.background = this.classes[input.value].stroke;
 			button.textContent = e.srcElement.textContent;
 
 			select.classList.toggle('active');
@@ -419,7 +422,7 @@ class EditorSvgAnnotation {
 		anno.class = select.value || '';
 
 		let button = edit.querySelector('.openlime-select-button');
-		button.style.background = this.classes[anno.class].style.stroke;
+		button.style.background = this.classes[anno.class].stroke;
 
 		for (let e of this.annotation.elements)
 			e.setAttribute('data-class', anno.class);
@@ -759,11 +762,13 @@ class EditorSvgAnnotation {
 		const p = {x:e.offsetX, y: e.offsetY};
 		const layerT = this.layer.transform;
 		const useGL = false;
-		console.log(layerT);
 		const layerbb = this.layer.boundingBox();
 		const layerSize = {w:layerbb.width(), h:layerbb.height()};
+		//compute also size of an image pixel on screen and store in pixelSize.
 		let pos = CoordinateSystem.fromCanvasHtmlToImage(p, this.viewer.camera, layerT, layerSize, useGL);
-
+		p.x += 1;
+		let pos1 = CoordinateSystem.fromCanvasHtmlToImage(p, this.viewer.camera, layerT, layerSize, useGL);
+		pos.pixelSize = Math.abs(pos1.x - pos.x);
 		return pos;
 	}
 }
@@ -886,7 +891,7 @@ class Line {
 		for (let e of this.annotation.elements) {
 			if (!e.points || e.points.length < 2)
 				continue;
-			if (Line.distance(e.points[0], pos) * pos.z < 5) {
+			if (Line.distance(e.points[0], pos) / pos.pixelSize < 5) {
 				e.points.reverse();
 				this.path = e;
 				this.path.setAttribute('d', Line.svgPath(e.points));
@@ -956,7 +961,7 @@ class Line {
 
 	adjust(pos) {
 		let gap = Line.distanceToLast(this.path.points, pos);
-		if (gap * pos.z < 4) return false;
+		if (gap / pos.pixelSize < 4) return false;
 
 		this.path.points.push(pos);
 
@@ -984,7 +989,7 @@ class Line {
 	static svgPath(points) {
 		//return points.map((p, i) =>  `${(i == 0? "M" : "L")}${p.x} ${p.y}`).join(' '); 
 
-		let tolerance = 1.5 / points[0].z;
+		let tolerance = 1.5 * points[0].pixelSize;
 		let tmp = simplify(points, tolerance);
 
 		let smoothed = smooth(tmp, 90, true);

src/Layer.js

@@ -207,7 +207,8 @@ class Layer {
 
 		// Set signal to acknowledge change of bbox when it is known. Let this signal go up to canvas
 		this.layout.addEvent('updateSize', () => {
-			this.shader.setTileSize(this.layout.getTileSize());
+			if(this.shader)
+				this.shader.setTileSize(this.layout.getTileSize());
 			this.emit('updateSize');
 		});
 	}

src/LayerAnnotation.js

@@ -62,6 +62,7 @@ class LayerAnnotation extends Layer { //FIXME CustomData Object template {name:
 			this.createAnnotationsList();
 
 		this.emit('update');
+		this.status = 'ready';
 		this.emit('ready');
 		this.emit('loaded');
 	}

src/LayerSvgAnnotation.js

@@ -39,13 +39,13 @@ class LayerSvgAnnotation extends LayerAnnotation {
 			svgGroup: null,
 			onClick: null,			//callback function
 			classes: {
-				'': { style: { stroke: '#000' }, label: '' },
+				'': { stroke: '#000', label: '' },
 			},
 			annotationUpdate: null
 		}, options);
 		super(options);
 		for(const [key, value] of Object.entries(this.classes)) {
-			this.style += `[data-class=${key}] { ` + Object.entries(value.style).map( g => `${g[0]}: ${g[1]};`).join('\n') + '}';
+			this.style += `[data-class=${key}] { ` + Object.entries(value).map( g => `${g[0]}: ${g[1]};`).join('\n') + '}';
 		}
 		//this.createOverlaySVGElement();
 		//this.setLayout(this.layout);
@@ -160,7 +160,7 @@ class LayerSvgAnnotation extends LayerAnnotation {
 		if (typeof (this.annotations) == "string") return; //FIXME Is it right? Should we use this.status?
 
 		const bBox = this.boundingBox();
-		this.svgElement.setAttribute('viewBox', `${bBox.xLow} ${bBox.yLow} ${bBox.xHigh - bBox.xLow} ${bBox.yHigh - bBox.yLow}`);
+		//this.svgElement.setAttribute('viewBox', `${bBox.xLow} ${bBox.yLow} ${bBox.xHigh - bBox.xLow} ${bBox.yHigh - bBox.yLow}`);
 
 		//find which annotations needs to be added to the ccanvas, some 
 		//indexing whould be used, for the moment we just iterate all of them.

src/LayoutTiles.js

@@ -291,7 +291,7 @@ class LayoutTiles extends Layout {
 			}
 			let c = box.center();
 			//sort tiles by distance to the center TODO: check it's correct!
-			tmp.sort(function (a, b) { return Math.abs(a.x - c[0]) + Math.abs(a.y - c[1]) - Math.abs(b.x - c[0]) - Math.abs(b.y - c[1]); });
+			tmp.sort(function (a, b) { return Math.abs(a.x - c.x) + Math.abs(a.y - c.y) - Math.abs(b.x - c.x) - Math.abs(b.y - c.y); });
 			needed = needed.concat(tmp);
 		}
 		return needed;

src/UIBasic.js

@@ -173,8 +173,12 @@ class UIBasic {
 			};
 			if(modes.length > 1) layerEntry.list = modes;
 
-			if (layer.annotations) {
+			if (layer.annotations ) {
+				layerEntry.list = [];
+				//setTimeout(() => { 
 				layerEntry.list.push(layer.annotationsEntry());
+					//this.updateMenu();
+				//}, 1000);
 				//TODO: this could be a convenience, creating an editor which can be
 				//customized later using layer.editor.
 				//if(layer.editable) 

src/index.js

@@ -22,7 +22,7 @@ let lime = new Viewer('.openlime', { background: 'black', canvas: { preserveDraw
 //imageTest('google'); // image google deepzoom deepzoom1px zoomify iiif tarzoon itarzoom
 //flipTest();
 //brdfTest();
-rtiTest('rbf');
+//rtiTest('rbf');
 //tomeTest();
 //testUIBasic();
 
@@ -32,7 +32,7 @@ rtiTest('rbf');
 
 //testMedicalAnnotations();
 
-//testAnnotationEditor();
+testAnnotationEditor();
 
 //testNeural();
 
@@ -64,18 +64,21 @@ function dstretchTest() {
 }
 
 function testAnnotationEditor() {
+
+
+	Skin.setUrl('skin/skin.svg');
 	let layer0 = new Layer({ 
 		label: 'Coin 10',
 		layout: 'image', 
 		type:'rti',
-		url: 'assets/rti/hsh/info.json',
+		url: 'assets/rti/eloi/info.json',
 		normals: false
 	});
 	lime.canvas.addLayer('hsh', layer0);
-	
+
 	let layer1 = new LayerSvgAnnotation({ 
 		label: 'Annotations',
-		viewBox: "0 0 256 256",
+		layout: layer0.layout,
 		style:` 
 			.openlime-annotation { pointer-events:all; opacity: 0.7; }
 			.openlime-annotation:hover { cursor:pointer; opacity: 1.0; }
@@ -94,26 +97,29 @@ function testAnnotationEditor() {
 			<p>${annotation.description}</p>
 			
 		`; },
-		annotations: 'assets/medical/PH1101-1.json',
+		annotations: 'assets/medical/test.json',
 		editable: true,
 
 	}); 
 	lime.canvas.addLayer('anno', layer1); //here the overlayelement created and attached to layer1
-	Skin.setUrl('skin/skin.svg');
+
+
+	let editor = new EditorSvgAnnotation(lime, layer1, { lime: lime, 
+		classes: {
+			'': { stroke: '#000', label: '' },
+			'class1': { stroke: "#00FF00", label: "Vert" },
+			'class2': { stroke: '#707', label: '' },
+			'class3': { stroke: '#777', label: '' },
+			'class4': { stroke: '#070', label: '' },
+			'class5': { stroke: '#007', label: '' },
+			'class6': { stroke: '#077', label: '' },
+		}
+	});
 
-	let editor = new EditorSvgAnnotation(lime, layer1, { lime: lime });
-	editor.classes = {
-		'': { color: '#000', label: '' },
-		'class1': { color: '#770', label: '' },
-		'class2': { color: '#707', label: '' },
-		'class3': { color: '#777', label: '' },
-		'class4': { color: '#070', label: '' },
-		'class5': { color: '#007', label: '' },
-		'class6': { color: '#077', label: '' },
-	};
 
 	let ui = new UIBasic(lime);
 	lime.camera.maxFixedZoom = 4;
+
 	ui.actions.help.display = true;
 	ui.actions.help.html = "Help text could be here.";
 	ui.actions.snapshot.display = true;
@@ -123,7 +129,7 @@ function testAnnotationEditor() {
 	editor.deleteCallback = (annotation) => { console.log("Deleted annotation: ", annotation); return true; };
 	editor.updateCallback = (annotation) => { console.log("Updated annotation: ", annotation); return true; };
 
-	editor.multiple = true;
+	editor.multiple = true; 
 
 }
 
@@ -152,7 +158,6 @@ function testMedicalAnnotations() {
 		infoTemplate: (annotation) => { return `
 			<h3>${annotation.class}</h3>
 			<p>${annotation.description}</p>
-			
 		`; },
 		annotations: 'assets/medical/PH1101-1.json',
 		editable: true,