render: map composing (working)

src/components/panels/EditorPanel.jsx

@@ -9,7 +9,7 @@ import { EditorDialog } from '$components/panels/EditorDialog';
 import { LogoPreview } from '$components/logo/LogoPreview';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { setMode, startEditing, stopEditing, setLogo } from '$redux/user/actions';
+import { setMode, startEditing, stopEditing, setLogo, showRenderer } from '$redux/user/actions';
 import type { UserType } from '$constants/types';
 import { editor } from '$modules/Editor';
 import { getTilePlacement } from '$utils/renderer';
@@ -31,6 +31,7 @@ type Props = {
   startEditing: Function,
   stopEditing: Function,
   setLogo: Function,
+  showRenderer: Function,
 }
 
 class Component extends React.PureComponent<Props, void> {
@@ -108,8 +109,8 @@ class Component extends React.PureComponent<Props, void> {
 
             <button
               className={classnames('disabled', { active: mode === MODES.SHOTTER })}
-              // onClick={this.startShotterMode}
-              onClick={getTilePlacement}
+              onClick={this.props.showRenderer}
+              // onClick={getTilePlacement}
             >
               <Icon icon="icon-shot-3" />
             </button>
@@ -220,6 +221,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   setLogo,
   startEditing,
   stopEditing,
+  showRenderer,
 }, dispatch);
 
 export const EditorPanel = connect(

src/components/renderer/Renderer.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { getTilePlacement } from '$utils/renderer';
+
+export class Renderer extends React.Component {
+  componentDidMount() {
+    if (this.canvas) this.init();
+  }
+
+  init() {
+    const ctx = this.canvas.getContext('2d');
+    const geometry = getTilePlacement();
+
+    this.fetchImages(ctx, geometry)
+      .then(images => this.composeImages({ geometry, images, ctx }));
+
+    // myimage = new Image();
+    // myimage.onload = function() {
+    //   ctx.drawImage(myimage, x, y);
+    // }
+    // myimage.src = 'http://myserver/nextimage.cgi';
+  }
+
+  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: this.getImageSource({ x, y, zoom }) });
+      }
+    }
+
+    return Promise.all(images.map(({ x, y, source }) => (
+      this.imageFetcher(source).then(image => ({ x, y, image }))
+    )));
+  };
+
+  imageFetcher = source => new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(img);
+
+    img.src = source;
+  });
+
+  getImageSource = ({ x, y, zoom }) => (`http://b.basemaps.cartocdn.com/light_all/${zoom}/${x}/${y}.png`);
+
+  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) + (window.innerHeight - shiftY - size);
+
+      return ctx.drawImage(image, posX, posY, 256, 256);
+    });
+  };
+
+  render() {
+    return (
+      <div className="renderer-shade" onClick={this.props.onClick}>
+        <canvas width={window.innerWidth} height={window.innerWidth} ref={el => { this.canvas = el; }} />
+      </div>
+    );
+  }
+}
+