Improve annotation editing experience

Author: emeeks

package-lock.json

@@ -158,7 +158,7 @@
     "polygon-offset": "0.3.1",
     "promise": "8.0.1",
     "prop-types": "15.6.0",
-    "react-annotation": "2.0.0",
+    "react-annotation": "2.1.5",
     "roughjs-es5": "0.1.0",
     "semiotic-mark": "0.3.1",
     "svg-path-bounding-box": "1.0.4"

package.json

@@ -6,6 +6,9 @@ type Props = {
   noteData: {
     eventListeners: Object,
     events: Object,
+    onDragEnd?: Function,
+    onDragStart?: Function,
+    onDrag?: Function,
     type: *,
     screenCoordinates: Array<Array<number>>,
     // What is this type supposed to be? It gets used only in a boolean context
@@ -20,15 +23,37 @@ type Props = {
   }
 }
 
+const interactivityFns = ["onDragEnd", "onDragStart", "onDrag"]
+
 class SemioticAnnotation extends React.Component<Props, null> {
   render() {
-    const { noteData } = this.props
-    const { screenCoordinates } = noteData
+    const { noteData: baseNoteData } = this.props
+    const { screenCoordinates } = baseNoteData
+
+    const noteData = { ...baseNoteData }
+
+    interactivityFns.forEach(d => {
+      if (baseNoteData[d]) {
+        delete noteData[d]
+        const originalFn = baseNoteData[d]
+        noteData[d] = updatedSettingsFromRA => {
+          originalFn({
+            originalSettings: baseNoteData,
+            updatedSettings: updatedSettingsFromRA,
+            noteIndex: baseNoteData.i
+          })
+        }
+      }
+    })
 
     const Label =
       typeof noteData.type === "function" ? noteData.type : AnnotationLabel
 
     const eventListeners = noteData.eventListeners || noteData.events || {}
+    const finalStyle = {}
+    if (noteData.events || noteData.eventListeners || noteData.editMode) {
+      finalStyle.pointerEvents = "all"
+    }
 
     if (noteData.coordinates && screenCoordinates) {
       //Multisubject annotation
@@ -42,15 +67,9 @@ class SemioticAnnotation extends React.Component<Props, null> {
           nx: setNX,
           ny: setNY
         })
-
         return <Label key={`multi-annotation-${i}`} {...subjectNote} />
       })
 
-      const finalStyle = {}
-      if (noteData.events || noteData.eventListeners) {
-        finalStyle.pointerEvents = "all"
-      }
-
       return (
         <g {...eventListeners} style={finalStyle}>
           {notes}
@@ -60,8 +79,8 @@ class SemioticAnnotation extends React.Component<Props, null> {
 
     const finalAnnotation = <Label events={eventListeners} {...noteData} />
 
-    if (noteData.events) {
-      return <g style={{ pointerEvents: "all" }}>{finalAnnotation}</g>
+    if (finalStyle.pointerEvents) {
+      return <g style={finalStyle}>{finalAnnotation}</g>
     }
 
     return finalAnnotation

src/components/Annotation.js

@@ -214,8 +214,8 @@ class InteractionLayer extends React.Component<Props, State> {
             [xScale.invert(size[0]), yScale.invert(size[1])]
           ]
         : actualBrush === "xBrush"
-          ? [xScale.invert(0), xScale.invert(size[0])]
-          : [yScale.invert(0), yScale.invert(size[1])]
+        ? [xScale.invert(0), xScale.invert(size[0])]
+        : [yScale.invert(0), yScale.invert(size[1])]
     } = interaction
 
     if (extent.indexOf && extent.indexOf(undefined) !== -1) {
@@ -351,7 +351,8 @@ class InteractionLayer extends React.Component<Props, State> {
       this.props.overlay !== nextProps.overlay ||
       nextProps.points !== this.props.points ||
       this.props.xScale !== nextProps.xScale ||
-      this.props.yScale !== nextProps.yScale
+      this.props.yScale !== nextProps.yScale ||
+      this.props.hoverAnnotation !== nextProps.hoverAnnotation
     ) {
       this.setState({ overlayRegions: this.calculateOverlay(nextProps) })
     }
@@ -370,15 +371,16 @@ class InteractionLayer extends React.Component<Props, State> {
       overlay,
       interactionOverflow = { top: 0, bottom: 0, left: 0, right: 0 },
       customClickBehavior,
-      customDoubleClickBehavior
+      customDoubleClickBehavior,
+      hoverAnnotation
     } = props
 
     const pointerStyle =
       customClickBehavior || customDoubleClickBehavior
         ? { cursor: "pointer" }
         : {}
 
-    if (points && props.hoverAnnotation && !overlay) {
+    if (points && hoverAnnotation && !overlay) {
       const voronoiDataset = []
       const voronoiUniqueHash = {}
 

src/components/InteractionLayer.js

@@ -26,7 +26,8 @@ export const circleEnclosure = ({ d, i, circle }) => {
       subject: {
         radius: circle.r,
         radiusPadding
-      }
+      },
+      i
     }
   )
 

src/components/annotationRules/baseRules.js

@@ -213,7 +213,8 @@ export const basicReactAnnotation = ({ screenCoordinates, d, i }) => {
     d,
     {
       type: d.type,
-      screenCoordinates
+      screenCoordinates,
+      i
     }
   )
 
@@ -240,7 +241,8 @@ export const svgXAnnotation = ({ screenCoordinates, d, i, adjustedSize }) => {
         x: screenCoordinates[0],
         y1: 0,
         y2: adjustedSize[1]
-      }
+      },
+      i
     }
   )
   return <Annotation key={d.key || `annotation-${i}`} noteData={noteData} />
@@ -271,7 +273,8 @@ export const svgYAnnotation = ({
         y: screenCoordinates[1],
         x1: 0,
         x2: adjustedSize[0] + adjustedPosition[0]
-      }
+      },
+      i
     }
   )
   return <Annotation key={d.key || `annotation-${i}`} noteData={noteData} />
@@ -311,7 +314,8 @@ export const svgBoundsAnnotation = ({
       subject: {
         width: Math.abs(x1Position - x0Position),
         height: Math.abs(y0Position - y1Position)
-      }
+      },
+      i
     }
   )
   return <Annotation key={d.key || `annotation-${i}`} noteData={noteData} />
@@ -436,12 +440,12 @@ export const svgRectEncloseAnnotation = ({ d, i, screenCoordinates }) => {
   return rectangleEnclosure({ bboxNodes, d, i })
 }
 
-export const svgEncloseAnnotation = ({ screenCoordinates, d }) => {
+export const svgEncloseAnnotation = ({ screenCoordinates, d, i }) => {
   const circle = packEnclose(
     screenCoordinates.map(p => ({ x: p[0], y: p[1], r: 2 }))
   )
 
-  return circleEnclosure({ d, circle })
+  return circleEnclosure({ d, circle, i })
 }
 
 export const svgHullEncloseAnnotation = ({ screenCoordinates, d, i }) => {

src/components/annotationRules/xyframeRules.js

@@ -11,13 +11,21 @@ components.push({
 })
 
 export default class AppleStockChart extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      editMode: true,
+      overridePosition: {}
+    }
+  }
   render() {
     const buttons = []
 
     const examples = []
     examples.push({
       name: "Basic",
-      demo: AppleStockChartRaw,
+      demo: AppleStockChartRaw(this.state.editMode),
       source: `
 import { XYFrame, DividedLine } from "../../components"
 import { data } from '../sampledata/apple_stock'
@@ -91,6 +99,92 @@ const customTooltip = d => <div className="tooltip-content">
       `
     })
 
+    examples.push({
+      name: "Editable Annotations",
+      demo: (
+        <div>
+          <p>
+            react-annotation already has built in functionality for adjusting
+            the annotations it creates. You can activate the note editing
+            control points by setting `editMode: true` on any of your
+            annotations. With that in place, you can also set the drag,
+            dragStart or dragEnd properties of the annotation to pass the new
+            annotation position data to whatever you're using to manage state.
+            In this simple example, I just override the dx/dy based on the new
+            values but you could pass this back to a central annotation store or
+            other method of saving changes.
+          </p>
+          <button
+            style={{ color: "black" }}
+            onClick={() => this.setState({ editMode: !this.state.editMode })}
+          >
+            {this.state.editMode ? "Turn off editMode" : "Turn on editMode"}
+          </button>
+          {AppleStockChartRaw(
+            this.state.editMode,
+            this.state.overridePosition,
+            d => {
+              this.setState({
+                overridePosition: {
+                  ...this.state.overridePosition,
+                  [d.noteIndex]: {
+                    dx: d.updatedSettings.dx,
+                    dy: d.updatedSettings.dy
+                  }
+                }
+              })
+            }
+          )}
+        </div>
+      ),
+      source: `
+constructor(props) {
+  super(props)
+
+  this.state = {
+    editMode: true,
+    overridePosition: {}
+  }
+}
+
+render() {
+  const annotations = [{
+    type: "x",
+    date: "7/9/1997",
+    note: { label: "Steve Jobs Returns", align: "middle" },
+    color: "rgb(0, 162, 206)",
+    dy: -10,
+    dx: 0,
+    connector: { end: "none" },
+    editMode,
+    onDragEnd: annotationInfo => {
+      annotationInfo => {
+        this.setState({
+          overridePosition: {
+            ...this.state.overridePosition,
+            [annotationInfo.noteIndex]: {
+              dx: annotationInfo.updatedSettings.dx,
+              dy: annotationInfo.updatedSettings.dy
+            }
+          }
+        })
+      }
+
+    }  
+  }]
+
+  annotations.forEach((d, i) => {
+    if (this.state.overridePosition[i]) {
+      d.dx = overridePosition[i].dx
+      d.dy = overridePosition[i].dy
+    }
+  })
+
+  return <XYFrame
+  {...as above example}
+/>
+}`
+    })
     return (
       <DocumentComponent
         name="Stock Chart with Annotations and Divided Line"
@@ -108,13 +202,18 @@ const customTooltip = d => <div className="tooltip-content">
             rel="noopener noreferrer"
           >
             Susie Lu's Apple stock chart
-          </a>.
+          </a>
+          .
         </p>
         <p>
           It also uses a custom x scale using xScaleType to pass a scale built
           with D3's scaleTime, as well as tooltip processing rules using
           tooltipContent.
         </p>
+        <p>
+          (If you want to see how to allow your users to edit annotations, check
+          out the second example below)
+        </p>
       </DocumentComponent>
     )
   }