diff --git a/src/components/Cursor.jsx b/src/components/Cursor.jsx new file mode 100644 index 0000000..d3312fb --- /dev/null +++ b/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 { + 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 ( +
{ this.cursor = el; }}> + { mode === MODES.ROUTER && } + { mode === MODES.POLY && } +
+ ); + } +}; diff --git a/src/constants/providers.js b/src/constants/providers.js index 4df3c6f..4ff9790 100644 --- a/src/constants/providers.js +++ b/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: { diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 6d744bb..6583714 100644 --- a/src/containers/App.jsx +++ b/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) => ( + + { props.renderer_active && } ); 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)); diff --git a/src/styles/main.less b/src/styles/main.less index 37b4127..14326a0 100644 --- a/src/styles/main.less +++ b/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; + } +}