Add deleteIfOutOfBounds to markings renderer (#6889)

* Add deleteIfOutOfBounds to markings renderer Store a list of current marking tools in the markings renderer. Check deleteIfOutOfBounds for each tool on every update and delete any tools that are outside the subject. The subject bounds are calculated from the SVG image, for image subjects, or from the SVG scaled size rectangle otherwise. * More robust checking in MarkingInitializer Marks can now vanish mid-drag, so we need to check their existence before using them. * Rewrite deleteIfOutOfBounds as JS * Track the array index for new marks
zooniverse · Oct 25, 2023 · 8fade55 · 8fade55
1 parent c5405ba
commit 8fade55
Show file tree

Hide file tree

Showing 20 changed files with 81 additions and 43 deletions.
diff --git a/app/classifier/annotation-renderer/svg.jsx b/app/classifier/annotation-renderer/svg.jsx
@@ -11,12 +11,14 @@ export default class SVGRenderer extends React.Component {
     super(props);
     this.getScreenCurrentTransformationMatrix = this.getScreenCurrentTransformationMatrix.bind(this);
     this.getEventOffset = this.getEventOffset.bind(this);
+    this.getSizeRect = this.getSizeRect.bind(this);
     this.normalizeDifference = this.normalizeDifference.bind(this);
     this.eventCoordsToSVGCoords = this.eventCoordsToSVGCoords.bind(this);
   }
 
   getSizeRect() {
-    const clientRect = this.sizeRect && this.sizeRect.getBoundingClientRect();
+    const subjectNode = this.subjectImage || this.sizeRect;
+    const clientRect = subjectNode?.getBoundingClientRect();
 
     if (clientRect) {
       const { width, height } = clientRect;
@@ -98,6 +100,7 @@ export default class SVGRenderer extends React.Component {
       annotation: this.props.annotation,
       containerRect: this.getSizeRect(),
       frame: this.props.frame,
+      getContainerRect: this.getSizeRect,
       getEventOffset: this.getEventOffset,
       getScreenCurrentTransformationMatrix: this.getScreenCurrentTransformationMatrix,
       naturalWidth: this.props.naturalWidth,
@@ -181,6 +184,7 @@ export default class SVGRenderer extends React.Component {
               {type === 'image' && this.props.naturalWidth && (
                 <Draggable onDrag={this.props.panEnabled ? this.props.panByDrag : () => {}}>
                   <SVGImage
+                    ref={(node) => { this.subjectImage = node; }}
                     className={this.props.panEnabled ? 'pan-active' : ''}
                     src={src}
                     width={this.props.naturalWidth}

diff --git a/app/classifier/drawing-tools/circle.cjsx b/app/classifier/drawing-tools/circle.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 MINIMUM_RADIUS = 5

diff --git a/app/classifier/drawing-tools/column-rectangle.cjsx b/app/classifier/drawing-tools/column-rectangle.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 DEFAULT_WIDTH = 25

diff --git a/app/classifier/drawing-tools/delete-if-out-of-bounds.coffee b/app/classifier/drawing-tools/delete-if-out-of-bounds.coffee
diff --git a/app/classifier/drawing-tools/delete-if-out-of-bounds.js b/app/classifier/drawing-tools/delete-if-out-of-bounds.js
@@ -0,0 +1,26 @@
+import ReactDOM from 'react-dom'
+
+import isInBounds from '../../lib/is-in-bounds'
+
+export default function deleteIfOutOfBounds(tool) {
+  let containerBounds = null;
+  try {
+    containerBounds = tool?.props.getContainerRect();
+  } catch (e) {
+    containerBounds = tool?.props.containerRect;
+  }
+
+  try {
+    const domNode = ReactDOM.findDOMNode(tool);
+    let {left, top, width, height} = domNode.getBoundingClientRect();
+    left += pageXOffset;
+    top += pageYOffset;
+    const outOfBounds = !isInBounds({left, top, width, height}, containerBounds);
+    if (outOfBounds) {
+      tool?.props.onDestroy()
+    }
+  } catch (error) {
+    // uncomment this for debugging
+    //console.error(error)
+  }
+}
diff --git a/app/classifier/drawing-tools/ellipse.cjsx b/app/classifier/drawing-tools/ellipse.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 DEFAULT_SQUASH = 1 / 2

diff --git a/app/classifier/drawing-tools/freehand-line.cjsx b/app/classifier/drawing-tools/freehand-line.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 {svgPathProperties} = require 'svg-path-properties'
 {createPathFromCoords, filterDupeCoords, roundCoords} = require './freehand-helpers'

diff --git a/app/classifier/drawing-tools/freehand-segment-line.cjsx b/app/classifier/drawing-tools/freehand-segment-line.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 {createPathFromCoords, filterDupeCoords, roundCoords} = require './freehand-helpers'
 

diff --git a/app/classifier/drawing-tools/full-height-line.cjsx b/app/classifier/drawing-tools/full-height-line.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 GRAB_STROKE_WIDTH = 20

diff --git a/app/classifier/drawing-tools/full-width-line.cjsx b/app/classifier/drawing-tools/full-width-line.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 GRAB_STROKE_WIDTH = 20

diff --git a/app/classifier/drawing-tools/grid.cjsx b/app/classifier/drawing-tools/grid.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 module.exports = createReactClass

diff --git a/app/classifier/drawing-tools/line.cjsx b/app/classifier/drawing-tools/line.cjsx
@@ -2,7 +2,7 @@ React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 DragHandle = require './drag-handle'
 

diff --git a/app/classifier/drawing-tools/point.cjsx b/app/classifier/drawing-tools/point.cjsx
@@ -1,7 +1,7 @@
 React = require 'react'
 createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 Draggable = require('../../lib/draggable').default
 DeleteButton = require './delete-button'
 isInBounds = require '../../lib/is-in-bounds'

diff --git a/app/classifier/drawing-tools/poly-curve.cjsx b/app/classifier/drawing-tools/poly-curve.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 FINISHER_RADIUS = 8

diff --git a/app/classifier/drawing-tools/polygon.cjsx b/app/classifier/drawing-tools/polygon.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 FINISHER_RADIUS = 8

diff --git a/app/classifier/drawing-tools/rectangle.cjsx b/app/classifier/drawing-tools/rectangle.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 MINIMUM_SIZE = 5

diff --git a/app/classifier/drawing-tools/triangle.cjsx b/app/classifier/drawing-tools/triangle.cjsx
@@ -3,7 +3,7 @@ createReactClass = require 'create-react-class'
 DrawingToolRoot = require('./root').default;
 DragHandle = require './drag-handle'
 Draggable = require('../../lib/draggable').default
-deleteIfOutOfBounds = require './delete-if-out-of-bounds'
+deleteIfOutOfBounds = require('./delete-if-out-of-bounds').default
 DeleteButton = require './delete-button'
 
 MINIMUM_RADIUS = 5

diff --git a/app/classifier/tasks/drawing/marking-initializer.cjsx b/app/classifier/tasks/drawing/marking-initializer.cjsx
@@ -10,6 +10,8 @@ module.exports = createReactClass
   contextTypes:
     geordi: PropTypes.object
 
+  activeMarkIndex: -1
+
   getDefaultProps: ->
     annotation: null
     annotations: []
@@ -66,14 +68,15 @@ module.exports = createReactClass
       for key, value of initValues
         mark[key] = value
 
+    this.activeMarkIndex = @props.annotation.value.length - 1
     @onChange()
 
   handleInitDrag: (e) ->
     taskDescription = @props.workflow.tasks[@props.annotation.task]
-    mark = @props.annotation.value[@props.annotation.value.length - 1]
-    MarkComponent = drawingTools[taskDescription.tools[mark.tool].type]
+    mark = @props.annotation.value[this.activeMarkIndex]
+    MarkComponent = mark && drawingTools[taskDescription.tools[mark.tool].type]
 
-    if MarkComponent.initMove?
+    if mark and MarkComponent.initMove?
       mouseCoords = @props.getEventOffset e
       initMoveValues = MarkComponent.initMove mouseCoords, mark, e
       for key, value of initMoveValues
@@ -84,19 +87,18 @@ module.exports = createReactClass
   handleInitRelease: (e) ->
     pref = @props.preferences?.preferences ? {}
     taskDescription = @props.workflow.tasks[@props.annotation.task]
-    mark = @props.annotation.value[@props.annotation.value.length - 1]
-    MarkComponent = drawingTools[taskDescription.tools[mark.tool].type]
+    mark = @props.annotation.value[this.activeMarkIndex]
+    MarkComponent = mark && drawingTools[taskDescription.tools[mark?.tool].type]
 
-    toolName = taskDescription.tools[mark.tool].type
-    @context.geordi?.logEvent type: "draw-#{toolName}"
+    toolName = mark && taskDescription.tools[mark.tool].type
 
-    if MarkComponent.initRelease?
+    if mark and MarkComponent.initRelease?
       mouseCoords = @props.getEventOffset e
       initReleaseValues = MarkComponent.initRelease mouseCoords, mark, e
       for key, value of initReleaseValues
         mark[key] = value
 
-    if MarkComponent.saveState? and pref.activeTemplate
+    if mark and MarkComponent.saveState? and pref.activeTemplate
       multipleMarks = MarkComponent.saveState mark, pref[pref.activeTemplate], pref.activeTemplate
       for multiple in multipleMarks
         @props.annotation.value.push multiple
@@ -106,8 +108,9 @@ module.exports = createReactClass
 
     @onChange()
 
-    if MarkComponent.initValid?
+    if mark and MarkComponent.initValid?
       unless MarkComponent.initValid mark, @props
+        this.activeMarkIndex = -1
         @destroyMark @props.annotation, mark
 
   destroyMark: (annotation, mark) ->

diff --git a/app/classifier/tasks/drawing/markings-renderer.cjsx b/app/classifier/tasks/drawing/markings-renderer.cjsx
@@ -1,11 +1,14 @@
 React = require 'react'
 createReactClass = require 'create-react-class'
 drawingTools = require '../../drawing-tools'
+deleteIfOutOfBounds = require('../../drawing-tools/delete-if-out-of-bounds').default
 strategies = require('../../../features/feedback/shared/strategies').default
 
 module.exports = createReactClass
   displayName: 'MarkingsRenderer'
 
+  tools: []
+
   getDefaultProps: ->
     annotations: []
     annotation: null
@@ -35,9 +38,14 @@ module.exports = createReactClass
     @setState oldSetOfMarks: newSetOfMarks
     # console.log 'Marks are now', newSetOfMarks
 
+  componentDidUpdate: () ->
+    for tool in this.tools
+      deleteIfOutOfBounds(tool)
+
   render: ->
     skippedMarks = 0
     drawingInProgress = false
+    this.tools = []
     <g>
       {for annotation in @props.annotations
         annotation._key ?= Math.random()
@@ -83,6 +91,7 @@ module.exports = createReactClass
                   vertical: 0.001
               toolEnv =
                 containerRect: @props.containerRect
+                getContainerRect: @props.getContainerRect
                 scale: scale
                 disabled: isPriorAnnotation || drawingInProgress
                 selected: mark is @state.selection and not isPriorAnnotation
@@ -114,7 +123,13 @@ module.exports = createReactClass
                 getScreenCurrentTransformationMatrix: @props.getScreenCurrentTransformationMatrix
 
               ToolComponent = drawingTools[toolDescription.type]
-              <ToolComponent key={mark._key} {...toolProps} {...toolEnv} {...toolMethods} />}
+              <ToolComponent
+                ref={(tool) => this.tools.push(tool) if tool}
+                key={mark._key}
+                {...toolProps}
+                {...toolEnv}
+                {...toolMethods}
+              />}
           </g>}
     </g>
 
@@ -136,8 +151,9 @@ module.exports = createReactClass
     if mark is @state.selection
       @setState selection: null
     markIndex = annotation.value.indexOf mark
-    annotation.value.splice markIndex, 1
-    @props.onChange annotation
+    if markIndex > -1
+      annotation.value.splice markIndex, 1
+      @props.onChange annotation
     if mark.templateID
       index = []
       for cell in annotation.value

diff --git a/app/components/svg-image.jsx b/app/components/svg-image.jsx
@@ -56,6 +56,10 @@ class SVGImage extends React.Component {
     return {};
   }
 
+  getBoundingClientRect() {
+    return this.refs.image?.getBoundingClientRect();
+  }
+
   render() {
     const imageProps = Object.assign({}, this.props);
     delete imageProps.modification;