Closes #84

annotorious · Mar 20, 2021 · a452e35 · a452e35
1 parent d1d48fd
commit a452e35
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 40 deletions.
diff --git a/public/index.html b/public/index.html
@@ -47,7 +47,6 @@ <h1>Annotorious: Basic Example</h1>
         Click the annotation to edit. Click and drag the mouse to create a new annotation.
       </p>
       <p>
-        <button id="add-body">Add Body</button>
         <button id="current-tool">RECTANGLE</button>
       </p>
       <img id="hallstatt" src="640px-Hallstatt.jpg">
@@ -69,15 +68,8 @@ <h1>Annotorious: Basic Example</h1>
           displayName: 'rainer'
         });
 
-        // Whenever a new annotation is created by the user, we want to append this body
-        var templateBody = {
-          type: 'TextualBody',
-          value: 'My Tag',
-          purpose: 'tagging'
-        };
-
-        anno.on('createSelection', function(s) {
-          console.log('createSelection');
+        anno.on('selectAnnotation', function(a) {
+          console.log('selected', a);
         });
 
         anno.on('createAnnotation', function(a) {
@@ -96,19 +88,6 @@ <h1>Annotorious: Basic Example</h1>
 
         anno.setDrawingTool('rect');
 
-        var btnAddBody = document.getElementById('add-body');
-        btnAddBody.addEventListener('click', function() {
-          var selected = anno.getSelected();
-
-          selected.body = [{
-            type: 'TextualBody',
-            purpose: 'tagging',
-            value: 'Just a tag'
-          }];
-
-          anno.updateSelected(selected);
-        });
-
         var toolToggle = document.getElementById('current-tool');
         toolToggle.addEventListener('click', function() {
           if (toolToggle.innerHTML == 'RECTANGLE') {

diff --git a/src/AnnotationLayer.js b/src/AnnotationLayer.js
@@ -219,16 +219,18 @@ export default class AnnotationLayer extends EventEmitter {
     annotations.forEach(this.addAnnotation);
   }
 
-  removeAnnotation = annotation => {
-    if (this.selectedShape?.annotation === annotation)
-      this.deselect();
+  removeAnnotation = annotationOrId => {
+    const toRemove = this.findShape(annotationOrId);
 
-    if (this.currentHover?.annotation === annotation)
-      this.currentHover = null;
+    if (toRemove) {
+      if (this.selectedShape?.annotation === toRemove.annotation)
+        this.deselect();
 
-    const shape = this.findShape(annotation);
-    if (shape)
-      shape.parentNode.removeChild(shape);
+      if (this.currentHover?.annotation === toRemove.annotation)
+        this.currentHover = null;
+
+      toRemove.parentNode.removeChild(toRemove);
+    }
   }
 
   /** 

diff --git a/src/ImageAnnotator.jsx b/src/ImageAnnotator.jsx
@@ -212,8 +212,8 @@ export default class ImageAnnotator extends Component  {
   listDrawingTools = () =>
     this.annotationLayer.listDrawingTools();
 
-  removeAnnotation = annotation =>
-    this.annotationLayer.removeAnnotation(annotation.clone());
+  removeAnnotation = annotationOrId =>
+    this.annotationLayer.removeAnnotation(annotationOrId);
 
   saveSelected = opt_callback => {
     const a = this.state.selectedAnnotation;

diff --git a/src/index.js b/src/index.js
@@ -105,6 +105,10 @@ export class Annotorious {
   /*  External API  */
   /******************/
 
+  // Common shorthand for handling annotationOrId args
+  _wrap = annotationOrId =>
+    annotationOrId?.type === 'Annotation' ? new WebAnnotation(annotationOrId) : annotationOrId;
+
   addAnnotation = (annotation, readOnly) =>
     this._app.current.addAnnotation(new WebAnnotation(annotation, { readOnly }));
 
@@ -154,17 +158,14 @@ export class Annotorious {
   on = (event, handler) =>
     this._emitter.on(event, handler);
 
-  removeAnnotation = annotation =>
-    this._app.current.removeAnnotation(new WebAnnotation(annotation));
+  removeAnnotation = annotationOrId =>
+    this._app.current.removeAnnotation(this._wrap(annotationOrId));
 
   saveSelected = () =>
     this._app.current.saveSelected();
 
-  selectAnnotation = annotationOrId => {
-    const arg = (annotationOrId?.type === 'Annotation') ?
-      new WebAnnotation(annotationOrId) : annotationOrId;
-
-    const selected = this._app.current.selectAnnotation(arg);
+  selectAnnotation = annotationOrId => {    
+    const selected = this._app.current.selectAnnotation(this._wrap(annotationOrId));
     return selected?.underlying;
   }