Update: Annotation Documentation after React Refactor (#356)

docs/add-annotation-type.md

@@ -4,8 +4,7 @@ See [Image Point Annotations](https://github.com/box/box-annotations/tree/master
 ### Abstract Classes
 - Annotator: This class is the communicator between the file itself and the [controller](https://github.com/box/box-annotations/blob/master/src/controllers/AnnotationModeController.js).
 - Annotation Controller: This class is the communicator between the [Annotator](https://github.com/box/box-annotations/blob/master/src/Annotator.js) and the [Annotation threads](https://github.com/box/box-annotations/blob/master/src/AnnotationThread.js). Each controller maintains an object of pages which contains an [R-tree](https://github.com/mourner/rbush)
-- Annotation Thread: This class maintains a 'thread' of annotations associated by a unique thread ID, ie a group of annotations at the same location
-- Annotation Dialog: This class maintains the dialog UI corresponding with an [annotation thread](https://github.com/box/box-annotations/blob/master/src/AnnotationThread.js), displaying the metadata of annotations and buttons to create/update/delete
+- Annotation Thread: This class maintains an annotation associated by a unique thread ID, ie a drawing/higlight/group of comments at a particular location. Each annotation thread has an AnnotationPopover component and associated UI. 
 
 ** {**VIEWER**} refers to a viewer in [Box Content Preview](https://github.com/box/box-content-preview#viewers)
 
@@ -16,20 +15,15 @@ See [Image Point Annotations](https://github.com/box/box-annotations/tree/master
         * **enter()** - Enables the specified annotation mode
         * **exit()** - Disables the specified annotation mode
 
-* {**VIEWER**}/{**TYPE**}Dialog.js i.e. doc/DocPointDialog.js (extends [AnnotationDialog](https://github.com/box/box-annotations/blob/master/src/AnnotationDialog.js)):
-    * Abstract methods that should be implemented by subclasses:
-        * **position()** - positions the dialog relative to the associated annotation thread
-
 * {**VIEWER**}/{**TYPE**}Thread.js i.e. doc/DocPointThread.js (extends [AnnotationThread](https://github.com/box/box-annotations/blob/master/src/AnnotationThread.js)):
     * Abstract methods that should be implemented by subclasses:
         * **show()** - positions and shows the UI indicator for thread (blue icon for point annotations, highlight itself for highlights, etc)
-        * **createDialog()** - creates and caches the appropriate dialog
+        * **position()** - positions the AnnotationPopover component relative to the associated annotation thread
 
 ### The following files need to be modified:
 * {**VIEWER**}/{**VIEWER**}Annotator.js i.e. doc/DocAnnotator.js (extends [Annotator](https://github.com/box/box-annotations/blob/master/src/Annotator.js)):
     * Methods that should be modified
         * **getLocationFromEvent()** - Returns an annotation location on an image from the DOM event or null if no correct annotation location can be inferred from the event. For point annotations, we return the (x, y) coordinates for the point with the top left corner of the image as the origin. See [DocAnnotator.getLocationFromEvent()](https://github.com/box/box-annotations/blob/master/src/doc/DocAnnotator.js#L145) to see how to support multiple annotation types with this method
-        * **createAnnotationThread()** - Creates the proper type of AnnotationThread based on the type of the newly created annotation, and returns
 
 
 To test the new annotation type in the specified viewer, add the annotation type to the appropriate viewer option when instantiating BoxAnnotations. See [Enabling/Disabling Annotations and Annotation Types](docs/enablingdisabling-annotations-and-annotation-types.md) for more details.

docs/annotator.md

@@ -15,10 +15,21 @@ Additional Methods
 
 `annotator.getLocationFromEvent(/* Event */ event, /* String */ annotationType)` determines the annotation location object from a DOM event.
 
-`annotator.createAnnotationThread(/* Annotation[] */ annotations, /* Object */ location, /* String */ [annotation type])` creates the proper type of annotation thread, adds it to the in-memory map, and returns it.
+`annotator.getAnnotatedEl(/* HTMLElement */ containerEl)` determines the DOM element to be annotated on.
 
 `annotator.getAnnotatedEl(/* HTMLElement */ containerEl)` determines the annotated element in the viewer.
 
+`annotator.hideAnnotations(/* Event */ event)` conditionally hides all saved annotations on the file based on an optional mouse event.
+
+`annotator.getCurrentAnnotationMode()` determines which annotation mode is currently active.
+
+`annotator.render()` renders all annotations on the file.
+
+`annotator.renderPage(/* Number */ pageNum)` renders all annotations for the specified page.
+
+`annotator.scrollToAnnotation(/* String */ threadID)` scrolls the annotation with the specified threadID into view.
+
+
 Events
 ------
 Events can be bound to the annotator object with `addListener` and removed with `removeListener`. Event listeners should be bound before `showAnnotations()` is called, otherwise events can be missed.

docs/controller.md

@@ -1,7 +1,7 @@
 Controllers
 -------
 
-This class is the communicator between the [Annotator](https://github.com/box/box-annotations/blob/master/src/Annotator.js) and the [Annotation threads](https://github.com/box/box-annotations/blob/master/src/AnnotationThread.js). Each controller maintains an object of pages which contains a [red/black tree](https://github.com/mourner/rbush) unless otherwise specified.
+This class is the communicator between the [Annotator](https://github.com/box/box-annotations/blob/master/src/Annotator.js) and the [Annotation threads](https://github.com/box/box-annotations/blob/master/src/AnnotationThread.js). Each controller maintains an object of pages which contains a [red/black tree](https://github.com/mourner/rbush).
 
 Additional Methods
 ------------------
@@ -11,6 +11,8 @@ Additional Methods
 
 `controller.showButton()` shows the annotate button for the specified annotation mode.
 
+`controller.hideButton()` hides the annotate button for the specified annotation mode.
+
 `controller.toggleMode()` toggles annotation modes on and off. When an annotation mode is on, annotation threads will be created at that location.
 
 `controller.exit()` disables the annotation mode.
@@ -19,9 +21,11 @@ Additional Methods
 
 `controller.isEnabled()` returns whether or not the current annotation mode is enabled.
 
-`controller.registerThread()` register a thread with the controller so that the controller can keep track of relevant threads.
+`controller.instantiateThread()` instantiates the appropriate annotation thread for the current viewer.
+
+`controller.registerThread(/* Annotation */ annotation)` register a thread with the controller so that the controller can keep track of relevant threads.
 
-`controller.unregisterThread()` unregister a previously registered thread.
+`controller.unregisterThread(/* AnnotationThread */ thread)` unregister a previously registered thread.
 
 Events
 ------
@@ -39,5 +43,6 @@ All annotation mode conrollers fire the following events. The event data will co
 | togglemode | An annotation mode is toggled on/off. ||
 | annotationmodeenter | An annotation mode was entered.  ||
 | annotationmodeexit | An annotation mode was exited. ||
+| annotationmodecontrollererror | An error occurred. ||
 
 See [Annotator Events](annotator.md#example-event-usage) for example event usage.

docs/thread.md

@@ -7,7 +7,7 @@ The following methods are available for the annotation threads.
 
 | Method Name | Explanation | Method Parameters |
 | --- | --- | --- |
-| createDialog | Creates the dialog for the thread |  ||
+| position | Positions the AnnotationPopover |  ||
 | show | Shows the annotation indicator |  ||
 | hide | Hides the annotation indicator |  ||
 | reset | Resets thread state to 'inactive' |  ||
@@ -37,6 +37,8 @@ All annotation threads fire the following events. The event data will contain:
 | annotationsaved | An annotation thread was added and saved to an existing annotation thread on the server  ||
 | annotationdeleted | An annotation thread was deleted from an existing thread on the server. The entire annotation thread is not deleted. ||
 | annotationcanceled | An annotation thread was cancelled from posting on either a new or existing thread. ||
+| annotationshow | Shows an annotation thread ||
+| annotationhide | Hides an annotation thread ||
 | annotationdeleteerror | An error occurs while deleting an annotation on either a new or existing thread. ||
 | annotationcreateerror | An error occurs while posting an annotation on either a new or existing thread. ||
 

src/constants.js

@@ -161,6 +161,7 @@ export const THREAD_EVENT = {
 };
 
 export const CONTROLLER_EVENT = {
+    error: 'annotationmodecontrollererror',
     load: 'annotationload',
     toggleMode: 'togglemode',
     enter: 'annotationmodeenter',

third-party/components/ApprovalCommentForm/ApprovalCommentForm.scss

@@ -9,6 +9,10 @@
             width: 100%;
         }
 
+        textarea::placeholder {
+            color: $threes;
+        }
+
         .label {
             display: none;
         }