Use the palettes globalAlpha value for SVG annotations

Also, short-circuit annotation drawing if the globalAlpha is 0.

__tests__/src/lib/CanvasAnnotationDisplay.test.js

@@ -10,7 +10,7 @@ function createSubject(args) {
       y: 0,
     },
     palette: {
-      default: { globalAlpha: 0, strokeStyle: 'black' },
+      default: { globalAlpha: 1, strokeStyle: 'black' },
       hovered: { globalAlpha: 1, strokeStyle: 'blue' },
       selected: { globalAlpha: 1, strokeStyle: 'yellow' },
     },

src/lib/CanvasAnnotationDisplay.js

@@ -32,6 +32,17 @@ export default class CanvasAnnotationDisplay {
 
   /** */
   svgContext() {
+    let currentPalette;
+    if (this.hovered) {
+      currentPalette = this.palette.hovered;
+    } else if (this.selected) {
+      currentPalette = this.palette.selected;
+    } else {
+      currentPalette = this.palette.default;
+    }
+
+    if (currentPalette.globalAlpha === 0) return;
+
     [...this.svgPaths].forEach((element) => {
       /**
        *  Note: Path2D is not supported in IE11.
@@ -65,26 +76,25 @@ export default class CanvasAnnotationDisplay {
       // Resize the stroke based off of the zoomRatio (currentZoom / maxZoom)
       this.context.lineWidth /= this.zoomRatio;
 
-      let currentPalette;
-      if (this.hovered) {
-        currentPalette = this.palette.hovered;
-      } else if (this.selected) {
-        currentPalette = this.palette.selected;
-      } else {
-        currentPalette = this.palette.default;
-      }
-
       // Reset the color if it is selected or hovered on
       if (this.selected || this.hovered) {
         this.context.strokeStyle = currentPalette.strokeStyle || currentPalette.fillStyle;
       }
 
+      if (element.attributes['stroke-opacity']) {
+        this.context.globalAlpha = currentPalette.globalAlpha * element.attributes['stroke-opacity'].nodeValue;
+      } else {
+        this.context.globalAlpha = currentPalette.globalAlpha;
+      }
+
       this.context.stroke(p);
 
       // Wait to set the fill, so we can adjust the globalAlpha value if we need to
       if (element.attributes.fill && element.attributes.fill.nodeValue !== 'none') {
         if (element.attributes['fill-opacity']) {
-          this.context.globalAlpha = element.attributes['fill-opacity'].nodeValue;
+          this.context.globalAlpha = currentPalette.globalAlpha * element.attributes['fill-opacity'].nodeValue;
+        } else {
+          this.context.globalAlpha = currentPalette.globalAlpha;
         }
         this.context.fill(p);
       }
@@ -112,6 +122,8 @@ export default class CanvasAnnotationDisplay {
       this.context[key] = currentPalette[key];
     });
 
+    if (currentPalette.globalAlpha === 0) return;
+
     if (currentPalette.fillStyle) {
       this.context.fillRect(...fragment);
     } else {