diff --git a/src/components/Fills.jsx b/src/components/Fills.jsx
index 80d9189..b9b40a6 100644
--- a/src/components/Fills.jsx
+++ b/src/components/Fills.jsx
@@ -9,7 +9,7 @@ export const Fills = () => (
-
+
diff --git a/src/components/renderer/Renderer.jsx b/src/components/renderer/Renderer.jsx
index 4f66057..d89453c 100644
--- a/src/components/renderer/Renderer.jsx
+++ b/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() {
diff --git a/src/config.js b/src/config.js
index 88e2302..623f636 100644
--- a/src/config.js
+++ b/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;
diff --git a/src/modules/Map.js b/src/modules/Map.js
index 38b5349..617d9f5 100644
--- a/src/modules/Map.js
+++ b/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';
diff --git a/src/modules/Poly.js b/src/modules/Poly.js
index 4bd21db..21ee1bd 100644
--- a/src/modules/Poly.js
+++ b/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)');
diff --git a/src/utils/renderer.js b/src/utils/renderer.js
index dfb62b1..5b2b125 100644
--- a/src/utils/renderer.js
+++ b/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) }))
+);
diff --git a/webpack.config.js b/webpack.config.js
index d236671..9dfe5c3 100644
--- a/webpack.config.js
+++ b/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,
}
}
},