towards a more flexible editor

Syncs annotations on change in the editor.
Makes the annotation summary available from both steps of the marking task.
Allows the editor to be updated without remounting.

app/classify/annotation.cjsx

@@ -5,7 +5,7 @@ TextRange = React.createClass
   displayName: 'TextRange'
 
   render: ->
-    annotation = @props.range.annotation
+    annotation = @props.range?.annotation ? ''
     <p className="text-selection">
       {annotation.text} 
     </p>

app/classify/classification-task.cjsx

@@ -60,17 +60,34 @@ module.exports = React.createClass
               when 'choose'
                 <div>
                   <ChooseTask onChooseTask={@create} onBack={@reset} onFinish={@finish} />
-                  <AnnotationsSummary annotations={@state.annotations} deleteTool={@deleteAnnotation} onEdit={@edit} />
                 </div>
               when 'edit'
-                <EditTask annotation={@state.annotations[0]} onChange={@props.onChange} onComplete={@choose}/>
+                <EditTask annotation={@state.annotations[0]} onChange={@onChange} onComplete={@choose}/>
             }
           </div>
         </div>
           {children}
+        <div className="readymade-decision-tree-container">
+          <div className="decision-tree">
+            {switch @state.step
+              when 'choose', 'edit'
+                <div>
+                  <AnnotationsSummary annotations={@state.annotations} deleteTool={@deleteAnnotation} onEdit={@edit} />
+                </div>
+            }
+          </div>
+        </div>
       </div>
     </div>
 
+  onChange: (annotation) ->
+    @props.onChange annotation
+
+    annotations = @state.annotations
+    annotations.shift()
+    annotations.unshift annotation
+    @setState {annotations}
+
   filter: (choice) ->
     switch choice
       when 'yes'
@@ -90,33 +107,20 @@ module.exports = React.createClass
       instructions: tasks[type]
 
   edit: (annotation) ->
-    annotation.issue?.el.classList.remove 'complete'
-    for type, ranges of annotation.subtasks
-      ranges.map (range) -> range.el.classList.remove 'complete'
-    @editAnnotation annotation
-    @setState 
-      step: 'edit'
-      type: annotation.type
-      instructions: tasks[annotation.type]
+
+    if @state.step is 'edit'
+      @completeAnnotation @state.annotations[0], => @editAnnotation annotation
+    else
+      @editAnnotation annotation
     @props.onChange annotation
 
   choose: (annotation) ->
-    annotations = @state.annotations
-    annotations.shift()
-
-    if annotation.empty()
-      annotation.destroy()
-    else
-      annotation.issue?.el.classList.add 'complete'
-      for type, ranges of annotation.subtasks
-        ranges.map (range) -> range.el.classList.add 'complete'
-      annotations.unshift annotation
+    @completeAnnotation annotation
 
     @setState 
       step: 'choose'
       type: null
       instructions: @defaultInstructions
-      annotations: annotations
 
     @props.onChange new AnnotationTool
 
@@ -149,16 +153,39 @@ module.exports = React.createClass
     @props.onChange annotation
 
   editAnnotation: (annotation) ->
+    annotation.issue?.el.classList.remove 'complete'
+    for type, ranges of annotation.subtasks
+      ranges.map (range) -> range.el.classList.remove 'complete'
+
     annotations = @state.annotations
     index = annotations.indexOf annotation
     annotations.splice index, 1
     annotations.unshift annotation
-    @setState {annotations}
-
+    @setState 
+      step: 'edit'
+      type: annotation.type
+      instructions: tasks[annotation.type]
+      annotations: annotations
+
   deleteAnnotation: (annotation) ->
     annotations = @state.annotations
     index = annotations.indexOf annotation
     annotations.splice index, 1
     annotation.destroy()
     @setState {annotations}
+
+  completeAnnotation: (annotation, callback = () -> ) ->
+    annotations = @state.annotations
+    annotations.shift()
+
+    if annotation.empty()
+      annotation.destroy()
+    else
+      annotation.issue?.el.classList.add 'complete'
+      for type, ranges of annotation.subtasks
+        ranges.map (range) -> range.el.classList.add 'complete'
+      annotations.unshift annotation
+
+    @setState {annotations}, callback
+
 

app/classify/tasks/edit.cjsx

@@ -7,11 +7,14 @@ TextSelection = React.createClass
   getDefaultProps: ->
     range: {}
 
-  render: ->
-    <p className="text-selection"><button className="secret-button" aria-label='Delete' onClick={@delete}>X</button> {@props.range.annotation.text}</p>
-
   delete: (e) ->
     @props.onDelete @props.range
+
+  render: ->
+    <p className="text-selection">
+      <button className="secret-button" aria-label='Delete' onClick={@delete}>X</button>
+      {@props.range.annotation.text}
+    </p>
 
 ToolList = React.createClass
   displayName: 'ToolList'
@@ -71,6 +74,10 @@ module.exports = React.createClass
     annotation = @props.annotation
     @setState {annotation}
 
+  componentWillReceiveProps: (newProps) ->
+    annotation = newProps.annotation
+    @setState {annotation}
+
   render: ->
     {tools} = tasks[@props.annotation.type]
     <div className="decision-tree-task">

css/custom.styl

@@ -11,10 +11,9 @@
   background: #43bcfd
 
 .readymade-subject-viewer-container
+  padding: 0 .5em
 
   .readymade-subject-viewer
-    width: 55vw
-    max-width: 700px
     background: #eee
     background: rgba(256,256,230,0.75)
 
@@ -72,8 +71,7 @@
 
 
 .readymade-decision-tree-container
-  padding-left: 0
-  padding-right: .5vw
+  padding: 0
 
 .readymade-marking-surface-container
   display: none