@wemap/providers 3.1.3 → 3.1.5

package/src/providers/position/relative/ArCoreProvider.js

@@ -9,7 +9,6 @@ import Provider from '../../Provider';
 import EventType from '../../../events/EventType';
 import MissingArCoreError from '../../../errors/MissingArCoreError';
 import MissingNativeInterfaceError from '../../../errors/MissingNativeInterfaceError';
-import Availability from '../../../events/Availability';
 import ProviderState from '../../ProviderState';
 
 
@@ -164,14 +163,14 @@ class ArCoreProvider extends Provider {
             const nativeProvider = this.nativeProvider;
 
             if (!nativeProvider.checkAvailability()) {
-                return Availability.no(new MissingArCoreError());
+                return Promise.reject(new MissingArCoreError());
             }
 
         } catch (e) {
-            return Availability.no(e);
+            return Promise.reject(e);
         }
 
-        return Availability.yes();
+        return Promise.resolve();
     }
 
     enableBarcodeScanner() {

package/src/providers/position/relative/GeoRelativePositionFromArCoreProvider.js

@@ -70,7 +70,8 @@ class GeoRelativePositionFromArCoreProvider extends Provider {
             north,
             up,
             relativePosition.time,
-            0
+            0,
+            absoluteAttitude.heading
         );
 
         this.notify(this.createEvent(

package/src/providers/position/relative/GeoRelativePositionProvider.js

@@ -1,5 +1,6 @@
+import { PromiseUtils } from '@wemap/utils';
+
 import MetaProvider from '../../MetaProvider';
-import Availability from '../../../events/Availability';
 import EventType from '../../../events/EventType';
 import {
     Pdr, GeoRelativePositionFromArCore
@@ -25,10 +26,10 @@ class GeoRelativePositionProvider extends MetaProvider {
      * @override
      */
     get _availability() {
-        return Availability.union(
+        return PromiseUtils.any([
             Pdr.availability,
             GeoRelativePositionFromArCore.availability
-        );
+        ]);
     }
 
 
@@ -37,29 +38,31 @@ class GeoRelativePositionProvider extends MetaProvider {
      */
     start() {
 
-        if (GeoRelativePositionFromArCore.availability.isSupported) {
-            this.geoRelativeProvider = GeoRelativePositionFromArCore;
-        } else {
-            this.geoRelativeProvider = Pdr;
-        }
-
-        this.providerId = this.geoRelativeProvider.addEventListener(
-            events => {
-                const event = events.find(_event => _event.dataType === EventType.GeoRelativePosition);
-                if (event) {
-                    this.notify(event.clone());
-                }
-            },
-            error => this.notifyError(error),
-            this.name
-        );
+        GeoRelativePositionFromArCore.availability
+            .then(() => (this.geoRelativeProvider = GeoRelativePositionFromArCore))
+            .catch(() => (this.geoRelativeProvider = Pdr))
+            .finally(() => {
+                this.providerId = this.geoRelativeProvider.addEventListener(
+                    events => {
+                        const event = events.find(_event => _event.dataType === EventType.GeoRelativePosition);
+                        if (event) {
+                            this.notify(event.clone());
+                        }
+                    },
+                    error => this.notifyError(error),
+                    this.name
+                );
+            });
     }
 
     /**
      * @override
      */
     stop() {
-        this.geoRelativeProvider.removeEventListener(this.providerId);
+        if (this.geoRelativeProvider) {
+            this.geoRelativeProvider.removeEventListener(this.providerId);
+            this.geoRelativeProvider = null;
+        }
     }
 }
 

package/src/providers/position/relative/PdrProvider.js

@@ -2,7 +2,6 @@ import { GeoRelativePosition } from '@wemap/geo';
 import { deg2rad } from '@wemap/maths';
 
 import Provider from '../../Provider';
-import Availability from '../../../events/Availability';
 import EventType from '../../../events/EventType';
 import {
     StepDetection, AbsoluteAttitude
@@ -32,10 +31,10 @@ class PdrProvider extends Provider {
      * @override
      */
     get _availability() {
-        return Availability.merge(
+        return Promise.all([
             StepDetection.availability,
             AbsoluteAttitude.availability
-        );
+        ]);
     }
 
 
@@ -116,7 +115,8 @@ class PdrProvider extends Provider {
             stepSize * Math.cos(deviceDirection),
             0,
             timestamp,
-            accuracy
+            accuracy,
+            deviceDirection
         );
 
         this.notify(this.createEvent(

package/src/providers/steps/StepDetectionProvider.js

@@ -1,7 +1,6 @@
 import { Constants as GeoConstants } from '@wemap/geo';
 import { Quaternion } from '@wemap/maths';
 
-import Availability from '../../events/Availability';
 import EventType from '../../events/EventType';
 import Provider from '../Provider';
 import StepDetectionMinMaxPeaks2 from './StepDetectionMinMaxPeaks2';
@@ -20,11 +19,11 @@ class StepDetectionProvider extends Provider {
      * @override
      */
     get _availability() {
-        return Availability.merge(
+        return Promise.all([
             Accelerometer.availability,
             Gyroscope.availability,
             RelativeAttitudeFromInertial.availability
-        );
+        ]);
     }
 
     /**

package/src/smoothers/PositionSmoother.js

@@ -18,7 +18,6 @@ class PositionSmoother {
     constructor(callback, frequency = this.constructor.DEFAULT_FREQUENCY) {
         this.callback = callback;
         this.positionsQueue = [];
-        this.timeoutPositions = null;
         this.frequency = frequency;
     }
 
@@ -63,7 +62,10 @@ class PositionSmoother {
                 smoothedPosition.time = refTimestamp + (i - 1) / this.frequency;
                 smoothedPosition.level = newPositionLevel;
                 smoothedPosition.bearing = newPosition.bearing;
-                smoothedPosition.accuracy += Math.max((newPosition.accuracy - smoothedPosition.accuracy) * i / nSamples, 0);
+                smoothedPosition.accuracy = Math.max(
+                    smoothedPosition.accuracy + (newPosition.accuracy - smoothedPosition.accuracy) * i / nSamples,
+                    0
+                );
                 this.positionsQueue.push(smoothedPosition);
                 i++;
             }
@@ -87,6 +89,12 @@ class PositionSmoother {
             delete this.timeoutNotify;
         }
     }
+
+    clear() {
+        clearTimeout(this.timeoutNotify);
+        delete this.timeoutNotify;
+        this.positionsQueue = [];
+    }
 }
 
 export default PositionSmoother;

package/webpack/webpack.common.js

@@ -3,16 +3,16 @@ module.exports = {
         rules: [
             {
                 test: /\.jsx?$/,
-                include: [
-                    /src/,
-                    /wemap-(.*)/
-                ],
-                exclude: /(\/mapbox-gl\/|.test.js|.spec.js|.mock.js)/,
+                exclude: /(node_modules|.test.js|.spec.js|.mock.js)/,
                 use: { loader: 'babel-loader' }
             },
             {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)$/i,
+                use: ['file-loader']
             }
         ]
     },

package/webpack/webpack.dev.js

@@ -8,7 +8,7 @@ const distFolder = path.join(__dirname, '../', config.distFolder);
 
 module.exports = merge(common, {
     mode: 'development',
-    entry: { 'providers-components': './debug/components/index.js' },
+    entry: { 'providers-components': './debug/index.js' },
     output: {
         publicPath: '/js/',
         filename: '[name].js',
@@ -21,5 +21,11 @@ module.exports = merge(common, {
         hot: true,
         host: '0.0.0.0',
         port: 9000
+    },
+    resolve: {
+        alias: {
+            'mapbox-gl': '@thibaudm/mapbox-gl-js-indoor/dist/mapbox-gl.js',
+            'mapbox-gl-css': '@thibaudm/mapbox-gl-js-indoor/dist/mapbox-gl.css'
+        }
     }
 });

package/debug/components/Common.css

@@ -1,27 +0,0 @@
-html,
-body {
-    margin: 0;
-    font-size: 12px;
-    height: 100%;
-}
-
-@media screen and (min-width: 400px) {
-    body {
-        font-size: 14px;
-    }
-}
-
-#app {
-    height: 100%
-}
-
-p {
-    margin-top: 0;
-}
-
-.title {
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 10px;
-    margin-bottom: 5px;
-}

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;