📐 converting polygons to triangles to draw them filled, adapted lib

README.md

@@ -52,6 +52,9 @@ No web browser around? No worries - discover the planet in your console!
   * [x] support for point labels
   * [x] dynamic decluttering of labels
   * [ ] centering text labels
+* [x] filled polygons
+  * [x] convert polygons to triangles
+  * [x] implement fillTriangle into drawille-canvas-blessed-contrib
 * [ ] lat/lng-center + zoom based viewport
   * [ ] bbox awareness
   * [ ] zoom -> scale calculation

package.json

@@ -21,9 +21,10 @@
   "license": "MIT",
   "dependencies": {
     "coffee-script": "^1.10.0",
-    "drawille-canvas-blessed-contrib": "^0.1.3",
+    "drawille-canvas-blessed-contrib": "git+https://github.com/rastapasta/drawille-canvas-blessed-contrib.git",
     "keypress": "^0.2.1",
     "pbf": "^3.0.0",
+    "pnltri": "^2.1.1",
     "rbush": "^2.0.1",
     "sphericalmercator": "^1.0.5",
     "term-mouse": "^0.1.1",

termap.coffee

@@ -1,4 +1,4 @@
-Canvas = require 'drawille-canvas-blessed-contrib'
+Canvas = require '../drawille-canvas-blessed-contrib'
 VectorTile = require('vector-tile').VectorTile
 Protobuf = require 'pbf'
 keypress = require 'keypress'
@@ -7,6 +7,7 @@ zlib = require 'zlib'
 TermMouse = require 'term-mouse'
 mercator = new (require('sphericalmercator'))()
 LabelBuffer = require __dirname+'/src/LabelBuffer'
+triangulator = new (require('pnltri')).Triangulator()
 
 utils =
   deg2rad: (angle) ->
@@ -215,7 +216,7 @@ class Termap
 
           visible = false
           points = for point in points
-            p = [point.x/scale, point.y/scale]
+            p = x: point.x/scale, y: point.y/scale
             if not visible and @_isOnScreen p
               visible = true
             p
@@ -223,19 +224,20 @@ class Termap
 
           wasDrawn = false
           switch feature.type
-            when "polygon", "line"
+            when "line"
-              @canvas.beginPath()
+              @_drawWithLines points
-              @canvas.moveTo points.shift()...
+
-              @canvas.lineTo point... for point in points
+            when "polygon"
-              @canvas.stroke()
+              unless points.length > 3 and @_drawWithTriangles points
+                @_drawWithLines points
               wasDrawn = true
 
             when "point"
               text = feature.properties.house_num or @config.icons[feature.properties.maki] or "◉"
 
               for point in points
-                if labelBuffer.writeIfPossible text, point...
+                if labelBuffer.writeIfPossible text, point.x, point.y
-                  @canvas.fillText text, point...
+                  @canvas.fillText text, point.x, point.y
                   wasDrawn = true
 
           if wasDrawn
@@ -248,11 +250,29 @@ class Termap
 
     @isDrawing = false
 
+  _drawWithTriangles: (points) ->
+    try
+      triangles = triangulator.triangulate_polygon [points]
+    catch
+      return false
+
+    for triangle in triangles
+      @canvas.fillTriangle points[triangle[0]], points[triangle[1]], points[triangle[2]]
+
+    true
+
+  _drawWithLines: (points) ->
+    @canvas.beginPath()
+    first = points.shift()
+    @canvas.moveTo first.x, first.y
+    @canvas.lineTo point.x, point.y for point in points
+    @canvas.stroke()
+
   _isOnScreen: (point) ->
-    point[0]+@view[0]>=4 and
+    point.x+@view[0]>=4 and
-    point[0]+@view[0]<@width-4 and
+    point.x+@view[0]<@width-4 and
-    point[1]+@view[1]>=0 and
+    point.y+@view[1]>=0 and
-    point[1]+@view[1]<@height
+    point.y+@view[1]<@height
 
   _write: (text) ->
     process.stdout.write text