diff --git a/package-lock.json b/package-lock.json index 4f406e0..040b7e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1188,12 +1188,12 @@ } }, "@recogito/annotorious": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/@recogito/annotorious/-/annotorious-2.2.4.tgz", - "integrity": "sha512-qPcd/95wmuxAgB7w/XItpSNg3cCRWwwiY8yUXRu3l7TLhpMnF8r5uTqH5XKU2NmlyzxeIRGIVOq/nUHcBZ3RXw==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@recogito/annotorious/-/annotorious-2.2.5.tgz", + "integrity": "sha512-pfqR9JmApWUBpSxBurrvAujcVtZq+bNhPrOZripaCwNkhwG34ItGwY9qd+BnOaFpNeOgCdHpsKfLQGrv3/A7KA==", "requires": { "@babel/polyfill": "^7.10.4", - "@recogito/recogito-client-core": "1.0.1", + "@recogito/recogito-client-core": "1.0.2", "axios": "^0.21.1", "hammerjs": "^2.0.8", "preact": "^10.4.1", @@ -1201,9 +1201,9 @@ } }, "@recogito/recogito-client-core": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@recogito/recogito-client-core/-/recogito-client-core-1.0.1.tgz", - "integrity": "sha512-tBJx5z2PqrtdGst/eFP1GZvw9d4frSbXI0FgOABjWYLuclPLKhHqKFW9xp+rQCgoMtrqgeRyAxppjWG5IQSW+A==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@recogito/recogito-client-core/-/recogito-client-core-1.0.2.tgz", + "integrity": "sha512-lOQgpdC2CNOhk+1gTkrVcTmwv4P654qJinJt916yiBDU5UakWziLhor5RoBZJNX6EtREXDSUFdrAOpPylwn2Ww==", "requires": { "axios": "^0.21.1", "downshift": "^5.4.6", @@ -9758,9 +9758,9 @@ "dev": true }, "yaml": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz", - "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==" + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" }, "yargs": { "version": "13.3.2", diff --git a/package.json b/package.json index b585d7b..3797eb3 100644 --- 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 index ba8eadc..3b7a4a7 100644 --- 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 index 44fbda9..bdca1dc 100644 --- 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 index 634434e..6f06dfc 100644 --- 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