@wemap/providers 3.1.2 → 3.1.4

package/debug/components/MapComponent.jsx

@@ -1,366 +0,0 @@
-import React from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import PropTypes from 'prop-types';
-
-import {
-    Attitude, UserPosition, Constants
-} from '@wemap/geo';
-import { Network } from '@wemap/graph';
-
-mapboxgl.accessToken
-    = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-
-const COMPASS_STYLE = {
-    width: '15px',
-    height: '15px',
-    'border-radius': '50%',
-    'z-index': '10000001',
-    position: 'absolute',
-    top: '-14px',
-    left: '-14px',
-    border: '7px solid',
-    'border-color': 'transparent',
-    'border-top-color': '#008DF1',
-    opacity: 0.5
-};
-
-const POSITION_STYLE = {
-    width: '15px',
-    height: '15px',
-    top: '-7px',
-    left: '-7px',
-    position: 'absolute',
-    'border-radius': '50%',
-    background: '#008DF1'
-};
-
-class MapComponent extends React.Component {
-    static propTypes = {
-        network: PropTypes.instanceOf(Network),
-        positionRenderFrequency: PropTypes.number,
-        centerCameraFrequency: PropTypes.number,
-        maxZoom: PropTypes.number
-    };
-
-    static defaultProps = {
-        maxZoom: 22,
-        positionRenderFrequency: 60,
-        centerCameraFrequency: 1
-    };
-
-    userAccuracySource = {
-        'type': 'geojson',
-        'data': {
-            'type': 'FeatureCollection',
-            'features': []
-        }
-    };
-
-    followUser = true;
-    positionDirty = false;
-    positionForCameraDirty = false;
-
-    componentDidMount() {
-        this.map = new mapboxgl.Map({
-            container: this.mapContainer,
-            style: 'mapbox://styles/mapbox/streets-v9',
-            maxZoom: this.props.maxZoom
-        });
-
-        this.createFollowingUser();
-        this.map.on('load', () => {
-            this.createUserAccuracyLayer();
-        });
-        this.renderNetwork();
-
-        this.positionRenderLoopId = setInterval(this.positionRenderLoop, 1e3 / this.props.positionRenderFrequency);
-        this.centerCameraRenderLoopId = setInterval(this.centerCameraRenderLoop, 1e3 / this.props.centerCameraFrequency);
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.positionRenderLoopId);
-        clearInterval(this.centerCameraRenderLoopId);
-        this.map.remove();
-    }
-
-    createMarker(options) {
-        var elem, marker;
-
-        elem = document.createElement('div');
-        elem.style.marginLeft = '-' + options.iconAnchor[0] + 'px';
-        elem.style.marginTop = '-' + options.iconAnchor[1] + 'px';
-        elem.style.width = 0;
-        elem.style.height = 0;
-        elem.appendChild(options.dom);
-
-        marker = new mapboxgl.Marker(elem);
-        marker.setLngLat([options.longitude, options.latitude]);
-        return marker;
-    }
-
-    createPositionMarker(position) {
-        const coreIcon = document.createElement('div');
-        this.applyStyleToDomElement(coreIcon, POSITION_STYLE);
-
-        this.positionIcon = document.createElement('div');
-        this.positionIcon.appendChild(coreIcon);
-
-        return this.createMarker({
-            dom: this.positionIcon,
-            iconAnchor: [0, 0],
-            latitude: position[1],
-            longitude: position[0]
-        });
-    }
-
-    createCompassElement() {
-        if (!this.positionIcon) {
-            throw new Error('createPositionMarker() should be called before');
-        }
-        this.compassIcon = document.createElement('div');
-        this.applyStyleToDomElement(this.compassIcon, COMPASS_STYLE);
-        this.positionIcon.appendChild(this.compassIcon);
-    }
-
-    applyStyleToDomElement(domElement, style) {
-        for (const key in style) {
-            if (style.hasOwnProperty(key)) {
-                domElement.style[key] = style[key];
-            }
-        }
-    }
-
-    /**
-     * @param {UserPosition} position
-     */
-    updatePosition(position) {
-        if (this.position !== position) {
-            this.positionDirty = true;
-            this.positionForCameraDirty = true;
-        }
-        this.position = position;
-    }
-
-    positionRenderLoop = () => {
-
-        if (!this.positionDirty) {
-            return;
-        }
-
-        if (this.position === null) {
-            if (this.mapMarker) {
-                this.mapMarker.remove();
-                this.mapMarker = null;
-            }
-            this.map.setLayoutProperty('user-accuracy', 'visibility', 'none');
-            this.positionIcon = null;
-            this.compassIcon = null;
-            return;
-        }
-
-        const lngLat = [this.position.lng, this.position.lat];
-
-        if (!this.mapMarker) {
-            this.mapMarker = this.createPositionMarker(lngLat).addTo(this.map);
-        } else {
-            this.mapMarker.setLngLat(lngLat);
-        }
-
-        if (this.position.accuracy) {
-            this.userAccuracySource.data.features = [{
-                'type': 'Feature',
-                'geometry': {
-                    'type': 'Polygon',
-                    'coordinates': [this.constructor.createGeoJSONCircle(lngLat, this.position.accuracy / 1e3)]
-                }
-            }];
-            this.map.setLayoutProperty('user-accuracy', 'visibility', 'visible');
-        } else {
-            this.userAccuracySource.data.features = [];
-        }
-
-        const userAccuracySource = this.map.getSource('user-accuracy');
-        if (userAccuracySource) {
-            userAccuracySource.setData(this.userAccuracySource.data);
-        }
-    }
-
-    centerCameraRenderLoop = () => {
-
-        if (!this.positionForCameraDirty || !this.followUser || !this.position) {
-            return;
-        }
-
-        this.positionForCameraDirty = false;
-
-        const center = [this.position.lng, this.position.lat];
-        let zoom = this.props.maxZoom;
-        if (this.position.accuracy) {
-            zoom = Math.min(Math.round(Math.log2(
-                Constants.R_MAJOR * Math.cos(this.position.lat / 180 * Math.PI)
-                / this.position.accuracy
-                / 256
-                * Math.min(this.mapContainer.offsetWidth, this.mapContainer.offsetHeight)
-            )), this.props.maxZoom);
-        }
-
-        this.map.easeTo({
-            center,
-            zoom
-        });
-    }
-
-    updateAttitude(attitude) {
-        if (!this.positionIcon) {
-            return;
-        }
-
-        if (!(attitude instanceof Attitude)) {
-            if (this.compassIcon) {
-                this.positionIcon.removeChild(this.compassIcon);
-            }
-            return;
-        }
-
-        if (!this.compassIcon) {
-            this.createCompassElement();
-        }
-
-        this.positionIcon.style.transform
-            = 'rotate(' + attitude.headingDegrees + 'deg)';
-    }
-
-    renderNetwork() {
-        if (!this.map) {
-            return;
-        }
-
-        const network = this.props.network;
-
-        if (network === this.previousNetwork) {
-            return;
-        }
-        this.previousNetwork = network;
-
-        if (!network) {
-            if (this.networkLayer) {
-                this.map.removeLayer(this.networkLayer);
-                this.networkLayer = null;
-            }
-            return;
-        }
-
-        const layer = {
-            id: 'network',
-            type: 'line',
-            source: {
-                type: 'geojson',
-                data: {
-                    type: 'Feature',
-                    properties: {},
-                    geometry: {
-                        type: 'MultiLineString',
-                        coordinates: []
-                    }
-                }
-            },
-            paint: {
-                'line-color': '#0000FF',
-                'line-width': 3
-            }
-        };
-
-        for (let i = 0; i < network.edges.length; i++) {
-            layer.source.data.geometry.coordinates.push([
-                [network.edges[i].node1.coords.lng, network.edges[i].node1.coords.lat],
-                [network.edges[i].node2.coords.lng, network.edges[i].node2.coords.lat]
-            ]);
-        }
-
-        this.networkLayer = this.map.addLayer(layer);
-    }
-
-    createUserAccuracyLayer() {
-        this.map.addSource('user-accuracy', this.userAccuracySource);
-        this.map.addLayer({
-            'id': 'user-accuracy',
-            'type': 'fill',
-            'source': 'user-accuracy',
-            'layout': {},
-            'paint': {
-                'fill-color': 'blue',
-                'fill-opacity': 0.1
-            }
-        });
-    }
-
-    // https://stackoverflow.com/a/39006388/2239938
-    static createGeoJSONCircle(center, radiusInKm, points) {
-        if (!points) {
-            points = 64;
-        }
-
-        var coords = {
-            latitude: center[1],
-            longitude: center[0]
-        };
-
-        var km = radiusInKm;
-
-        var ret = [];
-        var distanceX = km / (111.320 * Math.cos(coords.latitude * Math.PI / 180));
-        var distanceY = km / 110.574;
-
-        var theta, x, y;
-        for (let i = 0; i < points; i++) {
-            theta = (i / points) * (2 * Math.PI);
-            x = distanceX * Math.cos(theta);
-            y = distanceY * Math.sin(theta);
-
-            ret.push([coords.longitude + x, coords.latitude + y]);
-        }
-        ret.push(ret[0]);
-        return ret;
-    }
-
-    createFollowingUser() {
-
-        const topRightContainer = document.getElementsByClassName('mapboxgl-ctrl-top-right')[0];
-
-        const container = document.createElement('div');
-        container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
-        topRightContainer.appendChild(container);
-
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.title = 'Find my location';
-        button.className = 'mapboxgl-ctrl-geolocate';
-        container.appendChild(button);
-
-        const span = document.createElement('span');
-        span.className = 'mapboxgl-ctrl-icon';
-        button.appendChild(span);
-
-        button.onclick = () => {
-            this.followUser = true;
-            this.positionForCameraDirty = true;
-            this.centerCameraRenderLoop();
-        };
-
-        this.map.on('dragstart', () => (this.followUser = false));
-    }
-
-    render() {
-        this.renderNetwork();
-        return (
-            <div ref={map => (this.mapContainer = map)}
-                style={{
-                    width: '100%',
-                    height: '100%'
-                }} />
-        );
-    }
-}
-
-export default MapComponent;

package/debug/components/PoseComponent.jsx

@@ -1,169 +0,0 @@
-import React from 'react';
-
-import {
-    PositionSmoother, ProvidersInterface, EventType
-} from '../..';
-
-import Utils from './Utils';
-import MapComponent from './MapComponent';
-import NavigationConfig from './NavigationConfig';
-
-import './Common.css';
-import StartStopComponent from './StartStopComponent';
-
-
-class PoseComponent extends React.Component {
-
-    started = false;
-
-    constructor(props, context) {
-        super(props, context);
-        this.state = {
-            position: null,
-            attitude: null
-        };
-
-        this.smoother = new PositionSmoother(position => {
-            if (this.map && this.started) {
-                this.map.updatePosition(position);
-            }
-        });
-
-        ProvidersInterface.logger = true;
-    }
-
-    componentWillUnmount() {
-        this.onStop();
-    }
-
-    onStart = () => {
-        this.started = true;
-        this.onAttitudeEvent(ProvidersInterface.getLastKnown(EventType.AbsoluteAttitude));
-        this.attitudeProviderId = ProvidersInterface.addEventListener(
-            EventType.AbsoluteAttitude,
-            this.onAttitudeEvent,
-            this.onAttitudeError
-        );
-
-        this.onPositionEvent(ProvidersInterface.getLastKnown(EventType.AbsolutePosition));
-        this.positionProviderId = ProvidersInterface.addEventListener(
-            EventType.AbsolutePosition,
-            this.onPositionEvent,
-            this.onPositionError
-        );
-    }
-
-    onStop = () => {
-        this.started = false;
-        ProvidersInterface.removeEventListener(this.attitudeProviderId);
-        ProvidersInterface.removeEventListener(this.positionProviderId);
-        this.map.updatePosition(null);
-        this.map.updateAttitude(null);
-    }
-
-    onPositionEvent = position => {
-        if (!position) {
-            return;
-        }
-        this.setState({ position });
-        this.smoother.feed(position);
-    };
-
-    onPositionError = error => {
-        this.setState({ position: error });
-    };
-
-    onAttitudeEvent = attitude => {
-        if (!attitude) {
-            return;
-        }
-        this.setState({ attitude });
-        if (this.map && this.started) {
-            this.map.updateAttitude(attitude);
-        }
-    };
-
-    onAttitudeError = error => {
-        this.setState({ attitude: error });
-    };
-
-    handleHeadingButton() {
-        ProvidersInterface.feed(EventType.AbsoluteHeading, NavigationConfig.INITIAL_HEADING);
-    }
-
-    handlePosButton() {
-        ProvidersInterface.feed(EventType.AbsolutePosition, NavigationConfig.INITIAL_POSITION);
-    }
-
-    handleItinerary() {
-        const itinerary = NavigationConfig.ITINERARY;
-        ProvidersInterface.feed(EventType.Network, itinerary);
-        this.setState({ itinerary });
-    }
-
-
-    render() {
-
-        const errored = this.state.attitude instanceof Error
-            && this.state.position instanceof Error;
-
-        return (
-            <div style={{
-                display: 'flex',
-                flexFlow: 'column',
-                height: 'calc(100% - 16px)',
-                padding: '8px'
-            }}>
-
-                <StartStopComponent
-                    onStart={this.onStart}
-                    onStop={this.onStop}
-                    errored={errored}
-                />
-
-                <div style={{ marginTop: '10px' }}>
-                    <input type="button"
-                        onClick={() => this.handlePosButton()}
-                        value="Send Wemap position" />
-                    <input type="button"
-                        style={{ marginLeft: '10px' }}
-                        onClick={() => this.handleHeadingButton()}
-                        value="Send heading" />
-                    <input type="button"
-                        value="Add itinerary"
-                        style={{ marginLeft: '10px' }}
-                        onClick={() => this.handleItinerary()} />
-                </div>
-
-                <div style={{
-                    display: 'flex',
-                    flexFlow: 'row'
-                }}>
-                    <div style={{ width: '50%' }}>
-                        <div className="title">Position</div>
-                        {Utils.renderPositionEvent(this.state.position)}
-                    </div>
-                    <div style={{ width: '50%' }}>
-                        <div className="title">Attitude</div>
-                        {Utils.renderAttitudeEvent(this.state.attitude)}
-                    </div>
-                </div>
-
-                <div className="title">Map</div>
-                <div style={{
-                    flexGrow: 1,
-                    height: '0px',
-                    minHeight: '300px'
-                }}>
-                    <MapComponent
-                        ref={map => (this.map = map)}
-                        network={this.state.itinerary}
-                    />
-                </div>
-            </div >
-
-        );
-    }
-}
-
-export default PoseComponent;

package/debug/components/index.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import AbsoluteAttitudeComponent from './AbsoluteAttitudeComponent';
-import AbsolutePositionComponent from './AbsolutePositionComponent';
-import GnssWifiComponent from './GnssWifiComponent';
-import ImuComponent from './ImuComponent';
-import InclinationComponent from './InclinationComponent';
-import PoseComponent from './PoseComponent';
-import RelativeAttitudeComponent from './RelativeAttitudeComponent';
-import StepDetectionComponent from './StepDetectionComponent';
-
-const createReactElement = (component, container) => ReactDOM.render(
-    React.createElement(component, {}, null),
-    container
-);
-
-export {
-    AbsoluteAttitudeComponent,
-    AbsolutePositionComponent,
-    ImuComponent,
-    InclinationComponent,
-    GnssWifiComponent,
-    PoseComponent,
-    RelativeAttitudeComponent,
-    StepDetectionComponent,
-    createReactElement
-};