cursor: cursor helper

src/components/Cursor.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+import { MODES } from '$constants/modes';
+
+type Props = {
+  mode: String,
+}
+
+export class Cursor extends React.PureComponent<Props, void> {
+  componentDidMount() {
+    window.addEventListener('mousemove', this.moveCursor);
+  }
+
+  moveCursor = e => {
+    if (!e.clientX || !e.clientY) return;
+
+    const { clientX, clientY } = e;
+
+    this.cursor.style.transform = `translate3d(${clientX}px, ${clientY}px, 0)`;
+  };
+
+  render() {
+    const { mode } = this.props;
+
+    return (
+      <div className="cursor-tooltip" ref={el => { this.cursor = el; }}>
+        { mode === MODES.ROUTER && <Icon icon="icon-router" />}
+        { mode === MODES.POLY && <Icon icon="icon-poly" />}
+      </div>
+    );
+  }
+};

src/constants/providers.js

@@ -2,7 +2,7 @@
 const TILEMAPS = {
   WATERCOLOR: {
     name: 'Watercolor',
-    url: 'http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
+    url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
     range: [1, 2, 3, 4],
   },
   DGIS: {
@@ -12,27 +12,27 @@ const TILEMAPS = {
   },
   DEFAULT: {
     name: 'OpenStreetMap',
-    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
     range: ['a', 'b', 'c'],
   },
   DARQ: {
     name: 'Darq',
-    url: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
+    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
     range: [1, 2, 3, 4],
   },
   BLANK: {
     name: 'Blanque',
-    url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+    url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
     range: [1, 2, 3, 4],
   },
   HOT: {
     name: 'Hot',
-    url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
+    url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
     range: ['a', 'b', 'c'],
   },
   SAT: {
     name: 'Google Sattelite',
-    url: 'http://mt{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
+    url: 'https://mt{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
     range: [0, 1, 2, 3],
   },
   YMAP: {

src/containers/App.jsx

@@ -11,10 +11,12 @@ import { bindActionCreators } from 'redux';
 import { hot } from 'react-hot-loader';
 import { Renderer } from '$components/renderer/Renderer';
 import { hideRenderer } from '$redux/user/actions';
+import { Cursor } from '$components/Cursor';
 
 type Props = {
   renderer_active: Boolean,
   hideRenderer: Function,
+  mode: String,
 }
 
 const Component = (props: Props) => (
@@ -23,13 +25,16 @@ const Component = (props: Props) => (
     <UserLocation />
     <UserPanel />
     <EditorPanel />
+    <Cursor mode={props.mode} />
+
     { props.renderer_active && <Renderer onClick={props.hideRenderer} /> }
   </div>
 );
 
 
 const mapStateToProps = ({ user }) => ({
-  renderer_active: user.renderer.renderer_active
+  renderer_active: user.renderer.renderer_active,
+  mode: user.mode,
 });
 const mapDispatchToProps = dispatch => bindActionCreators({ hideRenderer }, dispatch);
 export const App = connect(mapStateToProps, mapDispatchToProps)(hot(module)(Component));

src/styles/main.less

@@ -51,3 +51,20 @@ body {
 .danger {
   color: @color_danger;
 }
+
+.cursor-tooltip {
+  position: fixed;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  z-index: 10;
+  pointer-events: none;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    stroke-width: 4;
+    fill: @blue_secondary;
+  }
+}