ThumbnailBuilder

Changes

index.html 1(+1 -0)

js/editCanvas.js 23(+22 -1)

Details

index.html 1(+1 -0)

diff --git a/index.html b/index.html
index 7489e1c..9aaa23d 100644
--- a/index.html
+++ b/index.html
@@ -74,6 +74,7 @@
             <option value="Feature Service">Feature Service</option>
             <option value="Feature Layer">Feature Layer</option>
             <option value="Feature Layer (Hosted)">Feature Layer (Hosted)</option>
+            <option value="Feature Layer (Hosted, View)">Feature Layer (Hosted, View)</option>
             <option value="Group">Group</option>
             <option value="Hub Site">Hub Site</option>
             <option value="Map Image Layer">Map Image Layer</option>

js/editCanvas.js 23(+22 -1)

diff --git a/js/editCanvas.js b/js/editCanvas.js
index a2e40c9..3bab494 100644
--- a/js/editCanvas.js
+++ b/js/editCanvas.js
@@ -77,7 +77,28 @@ var categoryComponent = {
     ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
     ctx.font = (this.properties.text().length > 18) ? '37px sans-serif' : '48px sans-serif'
     ctx.textAlign = "center"
-    ctx.fillText(this.properties.text(), 0, 0)
+
+    function wrapText(context, text, x, y, maxWidth, lineHeight) {
+      var words = text.split(' ')
+      var line = ''
+
+      for (var n = 0; n < words.length; n++) {
+        var testLine = line + words[n] + ' '
+        var metrics = context.measureText(testLine)
+        var testWidth = metrics.width
+        if (testWidth > maxWidth && n > 0) {
+          context.fillText(line, x, -22)
+          line = words[n] + ' '
+          y += lineHeight
+        } else {
+          line = testLine
+        }
+      }
+      context.fillText(line, x, y)
+    }
+
+    // ctx.fillText(this.properties.text(), 0, 0)
+    wrapText(ctx, this.properties.text(), 5, 0, 375, 35)
     ctx.restore()
   }
 }