render: poly drawing

src/components/Fills.jsx

@@ -9,7 +9,7 @@ export const Fills = () => (
         <stop offset="100%" stopColor="#7137c8" />
       </linearGradient>
 
-      <linearGradient id="activePathGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
+      <linearGradient id="activePathGradient" x1="0%" x2="0%" y1="0%" y2="100%">
         <stop offset="0%" stopColor="#ff7700" />
         <stop offset="100%" stopColor="#ff3344" />
       </linearGradient>

src/components/renderer/Renderer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { getTilePlacement } from '$utils/renderer';
+import { getPolyPlacement, getTilePlacement } from '$utils/renderer';
+import { COLORS, CONFIG } from '$config';
 
 export class Renderer extends React.Component {
   componentDidMount() {
@@ -9,15 +10,15 @@ export class Renderer extends React.Component {
   init() {
     const ctx = this.canvas.getContext('2d');
     const geometry = getTilePlacement();
+    const points = getPolyPlacement();
 
     this.fetchImages(ctx, geometry)
-      .then(images => this.composeImages({ geometry, images, ctx }));
+      .then(images => this.composeImages({ geometry, images, ctx }))
+      .then(() => this.composePoly({ geometry, points, ctx }))
   }
 
   fetchImages = (ctx, geometry) => {
-    const {
-      minX, maxX, minY, maxY, zoom
-    } = geometry;
+    const { minX, maxX, minY, maxY, zoom } = geometry;
 
     const images = [];
     for (let x = minX; x <= maxX; x += 1) {
@@ -43,18 +44,50 @@ export class Renderer extends React.Component {
 
   composeImages = ({ images, geometry, ctx }) => {
     const {
-      minX, minY, maxY, shiftX, shiftY, size
+      minX, minY, shiftX, shiftY, size
     } = geometry;
 
     images.map(({ x, y, image }) => {
-      const verticalShift = (maxY - minY) * size;
-
       const posX = ((x - minX) * size) + shiftX;
-      const posY = ((y - minY) * size) - (verticalShift - shiftY);
+      const posY = ((y - minY) * size) - shiftY;
 
       return ctx.drawImage(image, posX, posY, 256, 256);
     });
 
+    return images;
+  };
+
+  composePoly = ({ points, geometry, ctx }) => {
+    let minX = points[0].x;
+    let maxX = points[0].x;
+    let minY = points[0].y;
+    let maxY = points[0].y;
+
+    ctx.strokeStyle = 'red';
+    ctx.strokeLinecap = 'round';
+    ctx.strokeLinejoin = 'round';
+    ctx.lineWidth = CONFIG.STROKE_WIDTH;
+
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+
+    for (let i = 1; i < points.length; i += 1) {
+      ctx.lineTo(points[i].x, points[i].y);
+
+      // gradient bounds
+      if (points[i].x < minX) minX = points[i].x;
+      if (points[i].x > maxX) maxX = points[i].x;
+      if (points[i].y < minY) minY = points[i].y;
+      if (points[i].y > maxY) maxY = points[i].y;
+    }
+
+    const gradient = ctx.createLinearGradient(minX, minY, minX, maxY);
+    gradient.addColorStop(0, COLORS.PATH_COLOR[0]);
+    gradient.addColorStop(1, COLORS.PATH_COLOR[1]);
+
+    ctx.strokeStyle = gradient;
+    ctx.stroke();
+    ctx.closePath();
   };
 
   render() {

src/config.js

@@ -2,6 +2,11 @@ import { providers } from '$constants/providers';
 
 export const CONFIG = {
   OSRM_URL: 'http://vault48.org:5000/route/v1',
+  STROKE_WIDTH: 5,
+};
+
+export const COLORS = {
+  PATH_COLOR: ['#ff7700', '#ff3344'],
 };
 
 export const PROVIDER = providers.blank;

src/modules/Map.js

@@ -1,4 +1,6 @@
 import { map, tileLayer } from 'leaflet';
+// import { Map as map } from 'leaflet/src/map/Map';
+// import { TileLayer as tileLayer } from 'leaflet/src/layer/tile/TileLayer';
 
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-editable';

src/modules/Poly.js

@@ -2,6 +2,7 @@ import L from 'leaflet';
 import 'leaflet-geometryutil';
 import { simplify } from '$utils/simplify';
 import { findDistance, middleCoord } from '$utils/geom';
+import { CONFIG } from '$config';
 
 const polyStyle = {
   color: 'url(#activePathGradient)',
@@ -49,7 +50,7 @@ export class Poly {
           latlngs[i - 1],
           [mid.lat, mid.lng]
         ],
-        { color: 'none', weight: '5' }
+        { color: 'none', weight: CONFIG.STROKE_WIDTH }
       ).addTo(this.arrows);
 
       slide._path.setAttribute('marker-end', 'url(#long-arrow)');

src/utils/renderer.js

@@ -47,10 +47,17 @@ export const getTilePlacement = () => {
     minY,
     maxY,
     shiftX: tileTransformTranslate.x - msw2.x,
-    shiftY: window.innerHeight + (tileTransformTranslate.y - msw2.y),
+    // shiftY: window.innerHeight + (tileTransformTranslate.y - msw2.y),
+    shiftY: ((maxY - minY) * 256) - (window.innerHeight + (tileTransformTranslate.y - msw2.y)),
     size: 256,
     width,
     height,
     zoom,
   };
 };
+
+export const getPolyPlacement = () => (
+  (!editor.poly.poly || !editor.poly.poly.getLatLngs() || editor.poly.poly.getLatLngs().length <= 0)
+    ? []
+    : editor.poly.poly.getLatLngs().map((latlng) => ({ ...map.latLngToContainerPoint(latlng) }))
+);

webpack.config.js

@@ -114,11 +114,26 @@ module.exports = () => {
     optimization: {
       splitChunks: {
         cacheGroups: {
+          // vendor chunk (uncomment if you want all node_modules to be in vendor.js bundle
+          leaflet: {
+            name: 'leaflet',
+            chunks: 'all',
+            test: /node_modules\/leaflet/,
+            priority: 21,
+          },
+          vendor: {
+            name: 'vendor',
+            chunks: 'all',
+            test: /node_modules/,
+            priority: 20,
+            reuseExistingChunk: true,
+          },
           commons: {
             name: 'commons',
             chunks: 'initial',
             minChunks: 2,
-            minSize: 0
+            minSize: 0,
+            reuseExistingChunk: true,
           }
         }
       },