svg buttons (initial)

removed styled-components
gradient paths

src/modules/Editor.js

@@ -3,6 +3,7 @@ import { Poly } from '$modules/Poly';
 import { MODES } from '$constants/modes';
 import { Stickers } from '$modules/Stickers';
 import { Router } from '$modules/Router';
+import { Shotter } from '$modules/Shotter';
 
 export class Editor {
   constructor({
@@ -14,9 +15,10 @@ export class Editor {
 
     const { lockMapClicks, routerMoveStart, map: { map } } = this;
 
-    this.poly = new Poly({ map, routerMoveStart });
+    this.poly = new Poly({ map, routerMoveStart, lockMapClicks });
     this.stickers = new Stickers({ map, lockMapClicks });
     this.router = new Router({ map, lockMapClicks });
+    this.shotter = new Shotter({ map });
 
     this.setMode = setMode;
     this.mode = mode;
@@ -28,6 +30,9 @@ export class Editor {
       },
       [MODES.ROUTER]: {
         start: this.routerSetStart,
+      },
+      [MODES.SHOTTER]: {
+        start: this.shotter.makeShot,
       }
     };
 

src/modules/Map.js

@@ -1,4 +1,4 @@
-import L from 'leaflet';
+import { map, tileLayer } from 'leaflet';
 import { providers } from '$constants/providers';
 
 import 'leaflet/dist/leaflet.css';
@@ -6,9 +6,9 @@ import 'leaflet-editable';
 
 export class Map {
   constructor({ container }) {
-    this.map = L.map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
+    this.map = map(container, { editable: true }).setView([55.0153275, 82.9071235], 13);
 
-    this.tileLayer = L.tileLayer(providers.default, {
+    this.tileLayer = tileLayer(providers.default, {
       attribution: 'Независимое Велосообщество',
       maxNativeZoom: 18,
       maxZoom: 18,

src/modules/Poly.js

@@ -1,19 +1,21 @@
-import L from "leaflet";
+import { polyline } from "leaflet";
 
-const polyStyle = { color: '#ff3333', weight: '5' };
+const polyStyle = { color: 'url(#activePathGradient)', weight: '5' };
 
 export class Poly {
-  constructor({ map, routerMoveStart }) {
-    this.poly = L.polyline([], polyStyle);
+  constructor({ map, routerMoveStart, lockMapClicks }) {
+    this.poly = polyline([], polyStyle);
     this.latlngs = [];
     this.poly.addTo(map);
     this.map = map;
 
     this.routerMoveStart = routerMoveStart;
+    this.lockMapClicks = lockMapClicks;
     this.bindEvents();
   }
 
   updateMarks = () => {
+    console.log('upd');
     const coords = this.poly.toGeoJSON().geometry.coordinates;
     this.latlngs = (coords && coords.length && coords.map(([lng, lat]) => ({ lng, lat }))) || [];
 
@@ -28,6 +30,8 @@ export class Poly {
     this.map.editTools.addEventListener('editable:vertex:deleted', this.updateMarks);
     this.map.editTools.addEventListener('editable:vertex:new', this.updateMarks);
 
+    this.map.editTools.addEventListener('editable:vertex:dragstart', this.lockMap);
+
     // После удаления точки - продолжить рисование
     this.map.editTools.addEventListener('editable:vertex:deleted', this.continueForward);
     //
@@ -70,4 +74,8 @@ export class Poly {
     if (!this.poly.editor) return;
     this.poly.editor.continueForward();
   };
+
+  lockMap = () => {
+    this.lockMapClicks(true);
+  }
 }

src/modules/Router.js

@@ -1,11 +1,11 @@
 import L from 'leaflet';
-import 'leaflet-routing-machine';
+import Routing from 'leaflet-routing-machine/src/index';
 import { CONFIG } from '$config';
 import { DomMarker } from '$utils/DomMarker';
 
 export class Router {
   constructor({ map, lockMapClicks }) {
-    const routeLine = r => L.Routing.line(r, {
+    const routeLine = r => Routing.line(r, {
       styles: [
         { color: 'white', opacity: 0.8, weight: 6 },
         { color: '#4597d0', opacity: 1, weight: 4, dashArray: '15,10' }
@@ -13,7 +13,7 @@ export class Router {
       addWaypoints: true,
     }).on('linetouched', this.lockPropagations);
 
-    this.router = L.Routing.control({
+    this.router = Routing.control({
       serviceUrl: CONFIG.OSRM_URL,
       profile: 'bike',
       fitSelectedRoutes: false,
@@ -22,7 +22,7 @@ export class Router {
         styles: [{ color: '#4597d0', opacity: 1, weight: 3 }]
       },
       show: false,
-      plan: L.Routing.plan([], {
+      plan: Routing.plan([], {
         createMarker: (i, wp) => L.marker(wp.latLng, {
           draggable: true,
           icon: this.createWaypointMarker(),
@@ -38,9 +38,7 @@ export class Router {
     this.waypoints = [];
     this.lockMapClicks = lockMapClicks;
 
-    console.log('router', this.router);
     // this.router._line.on('mousedown', console.log);
-    console.log('map', map);
   }
   //
   pushWaypointOnClick = ({ latlng: { lat, lng } }) => {
@@ -83,9 +81,7 @@ export class Router {
   };
   //
   unlockPropagations = e => {
-    console.log('unlock');
     if (e && e.preventPropagations) {
-      console.log('stop');
       e.preventDefault();
       e.preventPropagations();
     }

src/modules/Shotter.js

@@ -0,0 +1,66 @@
+import axios from 'axios';
+
+export class Shotter {
+  constructor({ map }) {
+    this.tiles = [];
+    this.tilesLoaded = 0;
+    this.map = map;
+  }
+
+  latLngToTile = latlng => {
+    const z = this.map.getZoom();
+    const x = parseInt(Math.floor(((latlng.lng + 180) / 360) * (1 << z)), 10);
+    const y = parseInt(Math.floor((1 - (Math.log(Math.tan((latlng.lat * Math.PI) / 180)
+      + 1 / Math.cos((latlng.lat * Math.PI) / 180)) / Math.PI)) / 2 * (1 << z)), 10);
+    return { x, y, z };
+  };
+
+  tileToLatLng = point => {
+    const z = this.map.getZoom();
+    const lng = (((point.x / (2 ** z)) * 360) - 180);
+
+    const n = Math.PI - ((2 * Math.PI * point.y) / (2 ** z));
+    const lat = (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
+
+    return { lat, lng };
+  };
+
+  getTilePlacement() {
+    const { innerHeight, innerWidth } = window;
+    const { _southWest, _northEast } = this.map.getBounds();
+
+    const sw = this.latLngToTile(_southWest);
+    const ne = this.latLngToTile(_northEast);
+
+    const zsw = this.tileToLatLng(sw);
+    const zne = this.tileToLatLng(ne);
+
+    const rsw = this.map.latLngToContainerPoint(zsw);
+    const msw = this.map.latLngToContainerPoint(_southWest);
+
+    return {
+      min_x: sw.x,
+      min_y: ne.y,
+      max_x: ne.x,
+      max_y: sw.y,
+      sh_x: (rsw.x - msw.x),
+      sh_y: ((innerHeight + rsw.y) - msw.y),
+      size: 256,
+      width: innerWidth,
+      height: innerHeight,
+      zoom: this.map.getZoom(),
+      provider: 'dgis',
+    };
+  }
+
+  makeShot = () => {
+    // console.log('shot', this.getTilePlacement());
+    const placement = this.getTilePlacement();
+
+    axios.get('http://alpha-map.vault48.org/engine/composerOrchid.php', {
+      params: { placement, mode: 'test' }
+    })
+      .then(console.log)
+      .catch(console.warn);
+  }
+}

src/modules/Sticker.js

@@ -1,4 +1,4 @@
-import L from 'leaflet';
+import { marker } from 'leaflet';
 import 'leaflet-editable';
 
 import { DomMarker } from '$utils/DomMarker';
@@ -28,12 +28,12 @@ export class Sticker {
     this.element.appendChild(this.stickerImage);
     this.element.appendChild(this.stickerDelete);
 
-    const marker = new DomMarker({
+    const mark = new DomMarker({
       element: this.element,
       className: 'sticker-container',
     });
 
-    this.sticker = L.marker(latlng, { icon: marker });
+    this.sticker = marker(latlng, { icon: mark });
 
     this.setAngle(this.angle);
 

src/modules/Stickers.js

@@ -1,10 +1,10 @@
-import L from 'leaflet';
+import { layerGroup } from 'leaflet';
 import { Sticker } from '$modules/Sticker';
 
 export class Stickers {
   constructor({ map, lockMapClicks }) {
     this.map = map;
-    this.layer = L.layerGroup();
+    this.layer = layerGroup();
 
     this.lockMapClicks = lockMapClicks;
     this.stickers = [];