From 175463a0f692ff6d13ed5db39cf52c5672b1666a Mon Sep 17 00:00:00 2001
From: Peter <jetic@gmx.net>
Date: Wed, 26 Jul 2017 10:57:17 -0400
Subject: [PATCH] different colors for different tiled images in debug mode.

If there are multiple tiled images as overlay, it might be important to
see how they are loaded. Different colors in the debug mode for the
different tiledImages visualize that. DebugGridColors have to be given
as a sting array with a color for each tiledImage. However, shorter
arrays will be recycled without error. Also, single strings are treated
as single entry arrays, for backwards compatibility.
---
 src/drawer.js        | 13 +++++++------
 src/openseadragon.js |  6 +++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index eed97719..5cbaac4b 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -1,4 +1,4 @@
-/*
+/*
  * OpenSeadragon - Drawer
  *
  * Copyright (C) 2009 CodePlex Foundation
@@ -69,7 +69,7 @@ $.Drawer = function( options ) {
 
     this.viewer = options.viewer;
     this.viewport = options.viewport;
-    this.debugGridColor = options.debugGridColor || $.DEFAULT_SETTINGS.debugGridColor;
+    this.debugGridColor = typeof options.debugGridColor === 'string' ? [options.debugGridColor] : options.debugGridColor || $.DEFAULT_SETTINGS.debugGridColor;
     if (options.opacity) {
         $.console.error( "[Drawer] options.opacity is no longer accepted; set the opacity on the TiledImage instead" );
     }
@@ -490,12 +490,13 @@ $.Drawer.prototype = {
             return;
         }
 
+        var indexOfImage = this.viewer.world.getIndexOfItem(tiledImage) % this.debugGridColor.length;
         var context = this.context;
         context.save();
         context.lineWidth = 2 * $.pixelDensityRatio;
         context.font = 'small-caps bold ' + (13 * $.pixelDensityRatio) + 'px arial';
-        context.strokeStyle = this.debugGridColor;
-        context.fillStyle = this.debugGridColor;
+        context.strokeStyle = this.debugGridColor[indexOfImage];
+        context.fillStyle = this.debugGridColor[indexOfImage];
 
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation({degrees: this.viewport.degrees});
@@ -581,8 +582,8 @@ $.Drawer.prototype = {
             var context = this.context;
             context.save();
             context.lineWidth = 2 * $.pixelDensityRatio;
-            context.strokeStyle = this.debugGridColor;
-            context.fillStyle = this.debugGridColor;
+            context.strokeStyle = this.debugGridColor[0];
+            context.fillStyle = this.debugGridColor[0];
 
             context.strokeRect(
                 rect.x * $.pixelDensityRatio,
diff --git a/src/openseadragon.js b/src/openseadragon.js
index ade8761d..16e7f268 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -1,4 +1,4 @@
-/*
+/*
  * OpenSeadragon
  *
  * Copyright (C) 2009 CodePlex Foundation
@@ -159,7 +159,7 @@
   * @property {Boolean} [debugMode=false]
   *     TODO: provide an in-screen panel providing event detail feedback.
   *
-  * @property {String} [debugGridColor='#437AB2']
+  * @property {String} [debugGridColor=['#437AB2']]
   *
   * @property {Number} [blendTime=0]
   *     Specifies the duration of animation as higher or lower level tiles are
@@ -1207,7 +1207,7 @@ function OpenSeadragon( options ){
 
             //DEVELOPER SETTINGS
             debugMode:              false,
-            debugGridColor:         '#437AB2'
+            debugGridColor:         ['#437AB2']
         },