render: moved functions out of Renderer

render: created reducer data structure

src/utils/renderer.js

@@ -1,4 +1,5 @@
 import { editor } from '$modules/Editor';
+import { COLORS, CONFIG } from '$config';
 
 const { map } = editor.map;
 map.addEventListener('mousedown', ({ latlng }) => console.log('CLICK', latlng));
@@ -61,3 +62,81 @@ export const getPolyPlacement = () => (
     ? []
     : editor.poly.poly.getLatLngs().map((latlng) => ({ ...map.latLngToContainerPoint(latlng) }))
 );
+
+const getImageSource = ({ x, y, zoom }) => (`http://b.basemaps.cartocdn.com/light_all/${zoom}/${x}/${y}.png`);
+
+const imageFetcher = source => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = () => resolve(img);
+  img.onerror = () => reject(img);
+
+  img.src = source;
+});
+
+export const fetchImages = (ctx, geometry) => {
+  const {
+    minX, maxX, minY, maxY, zoom
+  } = geometry;
+
+  const images = [];
+  for (let x = minX; x <= maxX; x += 1) {
+    for (let y = minY; y <= maxY; y += 1) {
+      images.push({ x, y, source: getImageSource({ x, y, zoom }) });
+    }
+  }
+
+  return Promise.all(images.map(({ x, y, source }) => (
+    imageFetcher(source).then(image => ({ x, y, image }))
+  )));
+};
+
+export const composeImages = ({ images, geometry, ctx }) => {
+  const {
+    minX, minY, shiftX, shiftY, size
+  } = geometry;
+
+  images.map(({ x, y, image }) => {
+    const posX = ((x - minX) * size) + shiftX;
+    const posY = ((y - minY) * size) - shiftY;
+
+    return ctx.drawImage(image, posX, posY, 256, 256);
+  });
+
+  return images;
+};
+
+export const composePoly = ({ points, 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.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = CONFIG.STROKE_WIDTH + 0.5;
+
+  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();
+
+  return true;
+};