Merge pull request #5 from DynamicEnvironmentSystems/ina/color-coding-hotpots

Support for hotspot color coding.

Author: Angelina1984

.gitignore

@@ -3,3 +3,4 @@ coverage/
 sandbox/shared
 web/shared
 web-dist
+npm-debug.log

shared/initColorPicker.js

@@ -1,5 +1,6 @@
 // Color picker component
 const COLORS = [
+  {hex: 'darkgoldenrod', name: 'Delete Color'},
   {hex: '#000000', name: 'Black'},
   {hex: '#EF4437', name: 'Red'},
   {hex: '#E71F63', name: 'Pink'},

shared/toolbar.css

@@ -128,6 +128,6 @@ body {
   margin-left: -2px;
   margin-right: -2px;
 }
-.text-color, .pen-color {
+.text-color, .pen-color, .hotspot-color {
   display: inline-block;
 }

web/index.html

@@ -93,6 +93,8 @@
     <button class="circle" type="button" title="fillCircle" data-tooltype="fillcircle">◉</button>
     <button class="circle" type="button" title="emptyCircle" data-tooltype="emptycircle">⦿</button>
     <button class="arrow" type="arrow" title="Arrow" data-tooltype="arrow">➤</button>
+    <div class="hotspot-color"></div>
+    
     <button class="highlight" type="button" title="Highlight" data-tooltype="highlight">&nbsp;</button>
     <button class="strikeout" type="button" title="Strikeout" data-tooltype="strikeout">&nbsp;</button>
 

web/index.js

@@ -47,6 +47,70 @@ function render() {
 }
 render();
 
+// Hotspot color stuff
+(function () {
+  let hotspotColor = localStorage.getItem(`${RENDER_OPTIONS.documentId}/hotspot/color`) || 'darkgoldenrod';
+  let currentTarget = undefined;
+  
+  function handleAnnotationClick(target) {
+    let type = target.getAttribute('data-pdf-annotate-type');
+    if (['fillcircle', 'arrow'].indexOf(type) === -1) {
+      return; // nothing to do
+    }
+    currentTarget = target;
+    hotspotColor = currentTarget.getAttribute('stroke');
+
+    UI.setArrow(10, hotspotColor);
+    UI.setCircle(10, hotspotColor);
+
+    let a = document.querySelector('.hotspot-color .color');
+    if (a) {
+      a.setAttribute('data-color', hotspotColor);
+      a.style.background = hotspotColor;
+    }
+  }
+
+  function handleAnnotationBlur(target) {
+    if (currentTarget === target) {
+      currentTarget = undefined;
+    }
+  }
+
+  initColorPicker(document.querySelector('.hotspot-color'), hotspotColor, function (value) {
+    if (value === hotspotColor) {
+      return; // nothing to do     
+    }
+    localStorage.setItem(`${RENDER_OPTIONS.documentId}/hotspot/color`, value);
+    hotspotColor = value;
+
+    UI.setArrow(10, hotspotColor);
+    UI.setCircle(10, hotspotColor);
+
+    if (!currentTarget) {
+      return; // nothing to do
+    }
+
+    let type = currentTarget.getAttribute('data-pdf-annotate-type');
+    let annotationId = currentTarget.getAttribute('data-pdf-annotate-id');
+    if (['fillcircle', 'arrow'].indexOf(type) === -1) {
+      return; // nothing to do
+    }
+
+    // update target
+    currentTarget.setAttribute('stroke', hotspotColor);
+    currentTarget.setAttribute('fill', hotspotColor);
+
+    // update annotation
+    PDFJSAnnotate.getStoreAdapter().getAnnotation(documentId, annotationId).then((annotation) => {
+      annotation.color = hotspotColor;
+      PDFJSAnnotate.getStoreAdapter().editAnnotation(documentId, annotationId, annotation);
+    });
+  });
+
+  UI.addEventListener('annotation:click', handleAnnotationClick);
+  UI.addEventListener('annotation:blur', handleAnnotationBlur);
+})();
+
 // Text stuff
 (function () {
   let textSize;
@@ -368,7 +432,7 @@ render();
   UI.addEventListener('annotation:click', handleAnnotationClick);
   UI.addEventListener('annotation:blur', handleAnnotationBlur);
 
-  UI.setArrow(10, '#0000FF');
-  UI.setCircle(10, '#0000FF')
+  UI.setArrow(10, 'darkgoldenrod');
+  UI.setCircle(10, 'darkgoldenrod')
 
 })(window, document);