update annotation metrics

docs/METRICS.md

@@ -380,9 +380,14 @@ The hashed page ID (`{hash}`) is a simple SHA1(path), with no additional randomn
 1. [x] Save Edited shot: `web/save/annotation-toolbar`
 2. [x] Cancel Annotations: `web/cancel/annotation-toolbar`
 3. [x] Select pen from annotation toolbar: `web/pen-select/annotation-toolbar`
-4. [x] Deselect pen from annotation toolbar: `web/pen-deselect/annotation-toolbar`
 5. [x] Select highlighter from annotation toolbar: `web/highlighter-select/annotation-toolbar`
-6. [x] Deselect highlighter from annotation toolbar: `web/highlighter-deselect/annotation-toolbar`
+6. [x] Select crop tool from annotation toolbar: `web/crop-select/annotation-toolbar`
+7. [x] Confirm crop after selection: `web/confirm-crop/crop-toolbar`
+8. [x] Cancel crop after selection: `web/cancel-crop/crop-toolbar`
+9. [x] Click on clear tool: `web/clear-select/annotation-toolbar`
+8. [x] Open color picker: `web/color-picker-select/annotation-toolbar`
+9. [x] Select a color from the color board: `web/color-change/annotation-color-board`
+
 
 #### General Google Analytics information
 

server/src/pages/shot/editor.js

@@ -181,11 +181,14 @@ exports.Editor = class Editor extends React.Component {
         <button className={`button transparent cancel-crop`} id="cancel-crop" onClick={this.onClickCancelCrop.bind(this)} title="Cancel selection">Cancel</button>
       </Localized>
     </div></div>;
+    sendEvent("crop-select", "annotation-toolbar");
   }
 
   onClickConfirmCrop() {
     if (!selectedPos.width || !selectedPos.height) {
-      this.onClickCancelCrop();
+      this.removeCropBox();
+      this.cropToolBar = null;
+      this.setState({tool: 'pen'});
       return;
     }
     let x1 = Math.max(selectedPos.left, 0);
@@ -199,8 +202,6 @@ exports.Editor = class Editor extends React.Component {
     croppedImage.height = cropHeight
     let croppedContext = croppedImage.getContext("2d");
     croppedContext.drawImage(this.imageCanvas, x1, y1, croppedImage.width, croppedImage.height, 0, 0, croppedImage.width, croppedImage.height);
-    croppedContext.globalCompositeOperation = 'multiply';
-    croppedContext.drawImage(this.highlighter, x1, y1, croppedImage.width, croppedImage.height, 0, 0, croppedImage.width, croppedImage.height);
     let img = new Image();
     let imageContext = this.imageCanvas.getContext('2d');
     img.crossOrigin = 'Anonymous';
@@ -213,13 +214,17 @@ exports.Editor = class Editor extends React.Component {
     img.src = croppedImage.toDataURL("image/png");
     this.canvasWidth = cropWidth;
     this.canvasHeight = cropHeight;
-    this.onClickCancelCrop();
+    this.removeCropBox();
+    this.cropToolBar = null;
+    this.setState({tool: 'pen'});
+    sendEvent("confirm-crop", "crop-toolbar");
   }
 
   onClickCancelCrop() {
     this.removeCropBox();
     this.cropToolBar = null;
     this.setState({tool: 'pen'});
+    sendEvent("cancel-crop", "crop-toolbar");
   }
 
   mouseup(e) {
@@ -660,10 +665,12 @@ class ColorPicker extends React.Component {
     let color = e.target.style.backgroundColor;
     this.setState({color, pickerActive: false});
     this.props.setColor(color);
+    sendEvent("color-change", "annotation-color-board");
   }
 
   onClickColorPicker() {
     let pickerActive = !this.state.pickerActive;
     this.setState({pickerActive});
+    sendEvent("color-picker-select", "annotation-toolbar");
   }
 }