Merge pull request #2783 from zooniverse/point-tool-resize

Allow resizing of the point drawing tool
zooniverse · Jul 15, 2016 · 588fd70 · 588fd70
2 parents 8674d90 + b68cbb2
commit 588fd70
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/app/classifier/drawing-tools/point.cjsx b/app/classifier/drawing-tools/point.cjsx
@@ -5,8 +5,12 @@ Draggable = require '../../lib/draggable'
 DeleteButton = require './delete-button'
 isInBounds = require '../../lib/is-in-bounds'
 
-RADIUS = 10
-SELECTED_RADIUS = 20
+RADIUS = 
+  large: 10
+  small: 2
+SELECTED_RADIUS = 
+  large: 20
+  small: 10
 CROSSHAIR_SPACE = 0.2
 CROSSHAIR_WIDTH = 1
 DELETE_BUTTON_ANGLE = 45
@@ -34,23 +38,29 @@ module.exports = React.createClass
 
     initRelease: ->
       _inProgress: false
+
+    options: ['size']
 
+  getDefaultProps: ->
+    size: 'large'
+
   getDeleteButtonPosition: ->
     theta = (DELETE_BUTTON_ANGLE) * (Math.PI / 180)
-    x: (SELECTED_RADIUS / @props.scale.horizontal) * Math.cos theta
-    y: -1 * (SELECTED_RADIUS / @props.scale.vertical) * Math.sin theta
+    x: (SELECTED_RADIUS.large / @props.scale.horizontal) * Math.cos theta
+    y: -1 * (SELECTED_RADIUS.large / @props.scale.vertical) * Math.sin theta
 
   render: ->
+    size = @props.size
     averageScale = (@props.scale.horizontal + @props.scale.vertical) / 2
 
     crosshairSpace = CROSSHAIR_SPACE / averageScale
     crosshairWidth = CROSSHAIR_WIDTH / averageScale
-    selectedRadius = SELECTED_RADIUS / averageScale
+    selectedRadius = SELECTED_RADIUS[size] / averageScale
 
     radius = if @props.selected
-      SELECTED_RADIUS / averageScale
+      SELECTED_RADIUS[size] / averageScale
     else
-      RADIUS / averageScale
+      RADIUS[size] / averageScale
 
     <DrawingToolRoot tool={this} transform="translate(#{@props.mark.x}, #{@props.mark.y})">
       <line x1="0" y1={-1 * crosshairSpace * selectedRadius} x2="0" y2={-1 * selectedRadius} strokeWidth={crosshairWidth} />

diff --git a/app/classifier/tasks/drawing/markings-renderer.cjsx b/app/classifier/tasks/drawing/markings-renderer.cjsx
@@ -68,6 +68,7 @@ module.exports = React.createClass
                 mark: mark
                 details: toolDescription.details
                 color: toolDescription.color
+                size: toolDescription.size
 
               toolMethods =
                 onChange: @handleChange.bind this, i

diff --git a/app/classifier/tasks/generic-editor.cjsx b/app/classifier/tasks/generic-editor.cjsx
@@ -114,6 +114,7 @@ module.exports = React.createClass
                       </div>
 
                   when 'drawing'
+                    options = drawingTools[choice.type].options ? []
                     [<div key="type" className="workflow-choice-setting">
                       <AutoSave resource={@props.workflow}>
                         Type{' '}
@@ -169,6 +170,24 @@ module.exports = React.createClass
                          />
                       </AutoSave>
                     </div>
+
+                    if 'size' in options
+                      <div key="size" className="workflow-choice-setting">
+                        <AutoSave resource={@props.workflow}>
+                          <label>Size{' '}
+                            <select 
+                            name="#{@props.taskPrefix}.#{choicesKey}.#{index}.size" 
+                            value={choice.size}
+                            onChange={handleChange}
+                            >
+                              <option value="large">Large</option>
+                              <option value="small">Small</option>
+                            </select>
+                          </label>
+                        </AutoSave>
+                      </div>
+                    else
+                      null
 
                     <div key="details" className="workflow-choice-setting">
                       <button type="button" onClick={@editToolDetails.bind this, @props.task, index}>Sub-tasks ({choice.details?.length ? 0})</button>{' '}