nakarte

commit 78cdd4ad0f89cb3a6ff4847e40eef2cf5b90f7a9
parent 0ffcc8e7050ef82f6563f1a68713a92f7fce6c57
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat, 25 Mar 2017 02:09:27 +0300

[print decorations] draw solid fill rectangles beneath captions

Diffstat:
M
src/lib/leaflet.control.printPages/decoration.grid.js
 | 
39
++++++++++++++++++++++++++++++++++++---
M
src/lib/leaflet.control.printPages/decoration.magnetic-meridians.js
 | 
1
+
M
src/lib/leaflet.control.printPages/decoration.scale.js
 | 
3
++-
M
src/lib/leaflet.control.printPages/decorations.js
 | 
2
+-

4 files changed, 40 insertions(+), 5 deletions(-)
diff --git a/src/lib/leaflet.control.printPages/decoration.grid.js b/src/lib/leaflet.control.printPages/decoration.grid.js
@@ -47,7 +47,7 @@ class Grid extends PrintStaticLayer {
         return `${x} ${unit}`;
     }
 
-    _drawRaster(canvas, printOptions) {
+    _drawGrid(canvas, printOptions) {
         const metersPerDegree = L.Projection.SphericalMercator.R * Math.PI / 180;
         const ctx = canvas.getContext('2d');
         ctx.beginPath();
@@ -105,18 +105,51 @@ class Grid extends PrintStaticLayer {
             }
         }
         ctx.stroke();
-
+    }
+    _drawLabel(canvas, printOptions) {
+        const intervalM = this.getGridInterval(printOptions);
+        const height = printOptions.destPixelSize.y;
+        const ctx = canvas.getContext('2d');
         const caption = 'Grid ' + this.formatDistance(intervalM);
         const fontSize = this.fontSizeMm / 25.4 * printOptions.resolution;
         const padding = this.paddingMm / 25.4 * printOptions.resolution;
         ctx.font = `${fontSize}px ${this.font}`;
         const textWidth = ctx.measureText(caption).width;
         ctx.textBaseline = 'bottom';
-        ctx.fillStyle = '#ffffff';
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
         ctx.fillRect(0, height - fontSize - 2 * padding, textWidth + 2 * padding, fontSize + 2 * padding);
         ctx.fillStyle = '#000000';
         ctx.fillText(caption, padding, height - padding);
     }
+
+    async getTilesInfo(printOptions) {
+        return {
+            iterateTilePromises: (function*() {
+                yield {
+                    tilePromise: Promise.resolve({
+                            draw: (canvas) => this._drawGrid(canvas, printOptions),
+                            isOverlay: true,
+                            overlaySolid: false
+                        }
+                    ),
+                    abortLoading: () => {
+                    }
+                };
+                yield {
+                    tilePromise: Promise.resolve({
+                            draw: (canvas) => this._drawLabel(canvas, printOptions),
+                            isOverlay: true,
+                            overlaySolid: true
+                        }
+                    ),
+                    abortLoading: () => {
+                    }
+                }
+            }).bind(this),
+            count: 2
+        };
+    }
+
 }
 
 export {Grid};
 \ No newline at end of file
diff --git a/src/lib/leaflet.control.printPages/decoration.magnetic-meridians.js b/src/lib/leaflet.control.printPages/decoration.magnetic-meridians.js
@@ -16,6 +16,7 @@ class MagneticMeridians extends PrintStaticLayer {
     lineIntervalMm = 50;
     samplingIntervalMm = 15;
     color = '#99d5ff';
+    overlaySolid = false;
 
     _makeCanvasToLatLngTransformer(printOptions) {
         const projectedBounds = printOptions.pixelBounds;
diff --git a/src/lib/leaflet.control.printPages/decoration.scale.js b/src/lib/leaflet.control.printPages/decoration.scale.js
@@ -44,6 +44,7 @@ class OverlayScale extends PrintStaticLayer {
     fontSizeMm = 3;
     font = 'verdana';
     paddingMm = 1;
+    overlaySolid = true;
 
     _drawRaster(canvas, printOptions) {
         const ctx = canvas.getContext('2d');
@@ -56,7 +57,7 @@ class OverlayScale extends PrintStaticLayer {
         ctx.font = `${fontSize}px ${this.font}`;
         const textWidth = ctx.measureText(caption).width;
         ctx.textBaseline = 'bottom';
-        ctx.fillStyle = '#ffffff';
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
         ctx.fillRect(0, 0, textWidth + 2 * padding, fontSize + 2 * padding);
         ctx.fillStyle = '#000000';
         ctx.fillText(caption, padding, fontSize + padding);
diff --git a/src/lib/leaflet.control.printPages/decorations.js b/src/lib/leaflet.control.printPages/decorations.js
@@ -22,7 +22,7 @@ class PrintStaticLayer {
                     tilePromise: Promise.resolve({
                             draw: (canvas) => this._drawRaster(canvas, printOptions),
                             isOverlay: true,
-                            overlaySolid: false
+                            overlaySolid: this.overlaySolid
                         }
                     ),
                     abortLoading: () => {