Upgraded to latest client-core + Annotorious versions, synced with AP…

…I changes
annotorious · Mar 18, 2021 · f9ed8c9 · f9ed8c9
1 parent edaa910
commit f9ed8c9
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.10.4",
-    "@recogito/annotorious": "^2.2.1",
-    "@recogito/recogito-client-core": "^1.0.0",
+    "@recogito/annotorious": "^2.2.5",
+    "@recogito/recogito-client-core": "^1.0.2",
     "axios": "^0.21.1",
     "openseadragon": "^2.4.2",
     "preact": "^10.4.1",

diff --git a/public/index.html b/public/index.html
@@ -93,8 +93,6 @@
 
         anno.on('createSelection', function(selection) {
           console.log('selection', selection);
-          const { snippet } = anno.getSelectedImageSnippet();
-          // document.body.appendChild(snippet);
         });
 
         anno.on('selectAnnotation', function(annotation) {
@@ -106,11 +104,11 @@
         });
 
         anno.on('mouseEnterAnnotation', function(annotation) {
-          console.log('mouseEnter', annotation);
+          // console.log('mouseEnter', annotation);
         });
 
         anno.on('mouseLeaveAnnotation', function(annotation) {
-          console.log('mouseLeave', annotation);
+          // console.log('mouseLeave', annotation);
         });
 
         anno.loadAnnotations('annotations.w3c.json');

diff --git a/src/OSDAnnotationLayer.js b/src/OSDAnnotationLayer.js
@@ -1,6 +1,10 @@
 import EventEmitter from 'tiny-emitter';
 import OpenSeadragon from 'openseadragon';
-import { SVG_NAMESPACE, DrawingTools, drawShape, shapeArea, format, parseRectFragment } from '@recogito/annotorious/src';
+import { SVG_NAMESPACE } from '@recogito/annotorious/src/util/SVG';
+import DrawingTools from '@recogito/annotorious/src/tools/ToolsRegistry';
+import { drawShape, shapeArea } from '@recogito/annotorious/src/selectors';
+import { format } from '@recogito/annotorious/src/util/Formatting';
+import { parseRectFragment } from '@recogito/annotorious/src/selectors/RectFragment';
 import { getSnippet } from './util/ImageSnippet';
 
 export default class OSDAnnotationLayer extends EventEmitter {
@@ -32,7 +36,8 @@ export default class OSDAnnotationLayer extends EventEmitter {
       const { x, y } = this.viewer.world.getItemAt(0).source.dimensions;
 
       props.env.image = {
-        src: this.viewer.world.getItemAt(0).source['@id'],
+        src: this.viewer.world.getItemAt(0).source['@id'] || 
+          new URL(this.viewer.world.getItemAt(0).source.url, document.baseURI).href,
         naturalWidth: x,
         naturalHeight: y
       };
@@ -50,21 +55,34 @@ export default class OSDAnnotationLayer extends EventEmitter {
 
   /** Initializes the OSD MouseTracker used for drawing **/
   _initDrawingMouseTracker = () => {
+
+    // Shorthand
+    const toSVG = osdEvt => {
+      const { layerX, layerY } = osdEvt.originalEvent;
+      return this.tools.current.toSVG(layerX, layerY );
+    }
+
     this.mouseTracker = new OpenSeadragon.MouseTracker({
       element: this.svg,
 
       pressHandler:  evt => {
         if (!this.tools.current.isDrawing)
-          this.tools.current.startDrawing(evt.originalEvent);
+          this.tools.current.start(evt.originalEvent);
       },
 
       moveHandler: evt => {
-        if (this.tools.current.isDrawing)
-          this.tools.current.onMouseMove(evt.originalEvent);
+        if (this.tools.current.isDrawing) {
+          const { x , y } = toSVG(evt);
+          this.tools.current.onMouseMove(x, y, evt.originalEvent);
+        }
       },
 
-      releaseHandler: evt =>
-        this.tools.current.onMouseUp(evt.originalEvent)
+      releaseHandler: evt => {
+        if (this.tools.current.isDrawing) {
+          const { x , y } = toSVG(evt);
+          this.tools.current.onMouseUp(x, y, evt.originalEvent);
+        }
+      }
     }).setTracking(false);
 
     this.tools.on('complete', shape => { 
@@ -310,39 +328,33 @@ export default class OSDAnnotationLayer extends EventEmitter {
     const readOnly = this.readOnly || annotation.readOnly;
 
     if (!(readOnly || this.headless)) {
-      const toolForShape = this.tools.forShape(shape);
+      // Replace the shape with an editable version
+      shape.parentNode.removeChild(shape);  
+
+      const toolForAnnotation = this.tools.forAnnotation(annotation);
+      this.selectedShape = toolForAnnotation.createEditableShape(annotation);
+      this.selectedShape.scaleHandles(1 / this.currentScale());
+
+      this.selectedShape.element.annotation = annotation;        
+
+      // Disable normal OSD nav
+      const editableShapeMouseTracker = new OpenSeadragon.MouseTracker({
+        element: this.svg
+      }).setTracking(true);
+
+      // En-/disable OSD nav based on hover status
+      this.selectedShape.element.addEventListener('mouseenter', evt =>
+        editableShapeMouseTracker.setTracking(true));
+
+      this.selectedShape.element.addEventListener('mouseleave', evt =>
+        editableShapeMouseTracker.setTracking(false));
 
-      if (toolForShape?.supportsModify) {
-        // Replace the shape with an editable version
-        shape.parentNode.removeChild(shape);  
-
-        this.selectedShape = toolForShape.createEditableShape(annotation);
-        this.selectedShape.scaleHandles(1 / this.currentScale());
-
-        this.selectedShape.element.annotation = annotation;        
-
-        // Disable normal OSD nav
-        const editableShapeMouseTracker = new OpenSeadragon.MouseTracker({
-          element: this.svg
-        }).setTracking(true);
-
-        // En-/disable OSD nav based on hover status
-        this.selectedShape.element.addEventListener('mouseenter', evt =>
-          editableShapeMouseTracker.setTracking(true));
-
-        this.selectedShape.element.addEventListener('mouseleave', evt =>
-          editableShapeMouseTracker.setTracking(false));
-
-        this.selectedShape.mouseTracker = editableShapeMouseTracker;
-
-        this.selectedShape.on('update', fragment =>
-          this.emit('updateTarget', this.selectedShape.element, fragment));
-
-        this.emit('select', { annotation, element: this.selectedShape.element, skipEvent });
-      } else {
-        this.selectedShape = shape;
-        this.emit('select', { annotation, element: shape, skipEvent });     
-      }
+      this.selectedShape.mouseTracker = editableShapeMouseTracker;
+
+      this.selectedShape.on('update', fragment =>
+        this.emit('updateTarget', this.selectedShape.element, fragment));
+
+      this.emit('select', { annotation, element: this.selectedShape.element, skipEvent });
     } else {
       this.selectedShape = shape;
       this.emit('select', { annotation, element: shape, skipEvent });   

diff --git a/src/util/ImageSnippet.js b/src/util/ImageSnippet.js
@@ -1,4 +1,4 @@
-import { hasClass } from '@recogito/annotorious/src';
+import { hasClass } from '@recogito/annotorious/src/util/SVG';
 
 export const getSnippet = (viewer, element) => {
   // Annotation shape could be the element itself or a