@wemap/providers 3.2.2 → 3.2.4

package/debug/details/ItineraryComponent.jsx

@@ -1,264 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { Level } from '@wemap/geo';
-
-import ItineraryStore from '../stores/ItineraryStore.js';
-import MapHandler from '../map/MapHandler.js';
-
-const Mode = {
-    Config: 'config',
-    WaitUserPositionForStart: 'wait-user-position-for-start',
-    SelectStartOnMap: 'select-start-on-map',
-    SelectEndOnMap: 'select-end-on-map',
-    ItineraryCompute: 'itinerary-compute',
-    Itinerary: 'itinerary'
-};
-
-const ItineraryEvents = ItineraryStore.Events;
-
-class ItineraryComponent extends React.PureComponent {
-
-    static propTypes = { mapHandler: PropTypes.instanceOf(MapHandler) };
-
-
-    constructor(props, context) {
-        super(props, context);
-
-        this.itineraryStore = ItineraryStore.instance;
-
-        this.state = {
-            endLevel: '',
-            error: null,
-            mode: this.itineraryStore.itinerary ? Mode.Itinerary : Mode.Config
-        };
-
-    }
-
-    componentDidMount() {
-        this.itineraryStore.on(ItineraryEvents.StartChanged, () => this.forceUpdate());
-        this.itineraryStore.on(ItineraryEvents.EndChanged, () => this.forceUpdate());
-        this.itineraryStore.on(ItineraryEvents.ItineraryChanged, it => this.onItineraryChanged(it));
-        this.itineraryStore.on(ItineraryEvents.ItineraryServerChanged, () => this.forceUpdate());
-        this.itineraryStore.on(ItineraryEvents.UseStairsChanged, () => this.forceUpdate());
-        this.itineraryStore.on(ItineraryEvents.ItineraryNotFound, () => this.setState({ error: ItineraryEvents.ItineraryNotFound }));
-        this.itineraryStore.on(ItineraryEvents.ServerError, () => this.setState({ error: ItineraryEvents.ServerError }));
-
-        if (this.props.mapHandler) {
-            this.initMapHandler();
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevProps.mapHandler !== this.props.mapHandler && this.props.mapHandler !== null) {
-            this.initMapHandler();
-        }
-
-        if (prevState.mode !== this.state.mode) {
-            if (this.state.mode === Mode.SelectStartOnMap || this.state.mode === Mode.SelectEndOnMap) {
-                this.props.mapHandler.needClick();
-            }
-        }
-    }
-
-    initMapHandler() {
-        this.props.mapHandler.onMapClick(coords => this.onMapClick(coords));
-
-        const transformLevel = mapLevel => mapLevel === null ? '' : mapLevel.toString();
-        const map = this.props.mapHandler.mapboxInstance;
-        this.setState({ endLevel: transformLevel(map.indoor.getLevel()) });
-        map.on('indoor.level.changed', () => this.setState({ endLevel: transformLevel(map.indoor.getLevel()) }));
-    }
-
-    onItineraryChanged(itinerary) {
-        if (itinerary) {
-            this.setState({ mode: Mode.Itinerary });
-        } else {
-            this.setState({ mode: Mode.Config });
-        }
-    }
-
-    onMapClick(position) {
-        if (this.state.mode === Mode.SelectStartOnMap) {
-            this.itineraryStore.start = position;
-            this.setState({ mode: Mode.Config });
-        } else if (this.state.mode === Mode.SelectEndOnMap) {
-            if (this.state.endLevel !== '') {
-                position.level = Level.fromString(this.state.endLevel);
-            }
-            this.itineraryStore.end = position;
-            this.setState({ mode: Mode.Config });
-        }
-    }
-
-    onUseUserPositionClick() {
-        this.setState({ mode: Mode.WaitUserPositionForStart });
-        this.itineraryStore.retrieveStartFromUserLocation().then(() => {
-            this.setState({ mode: Mode.Config });
-        });
-    }
-
-    render() {
-
-        const configMode = this.state.mode !== Mode.Itinerary;
-
-        return (
-            <div>
-                <div className="title">Itinerary</div>
-                {configMode ? this.renderConfig() : this.renderItinerary()}
-            </div>
-        );
-    }
-
-    renderItinerary() {
-        return (
-            <button
-                value=''
-                onClick={() => this.itineraryStore.remove()}>
-                Remove itinerary
-            </button>
-        );
-    }
-
-    renderConfig() {
-
-        const handleComputeClick = () => {
-            this.itineraryStore.compute();
-            this.setState({ itineraryNotFound: false });
-        };
-
-        const lockedMode = this.state.mode === Mode.SelectEndOnMap
-            || this.state.mode === Mode.SelectStartOnMap
-            || this.state.mode === Mode.WaitUserPositionForStart
-            || this.state.mode === Mode.ItineraryCompute;
-
-        return (
-            <div>
-                {this.state.error
-                    ? <div style={{
-                        marginBottom: '5px',
-                        color: 'red'
-                    }}>
-                        {this.state.error === ItineraryEvents.ItineraryNotFound
-                            ? 'Itinerary not found'
-                            : 'Server error'
-                        }
-                    </div>
-                    : null}
-                <div>
-                    {this.renderStart(lockedMode)}
-                </div>
-
-                <div style={{ marginTop: '5px' }}>
-                    {this.renderEnd(lockedMode)}
-                </div>
-
-                <div style={{ marginTop: '5px' }}>
-                    <img id='wheelchair-icon'
-                        className={!this.itineraryStore.useStairs ? 'selected' : null}
-                        onClick={() => (this.itineraryStore.useStairs = !this.itineraryStore.useStairs)} />
-                </div>
-
-                <div style={{
-                    marginTop: '10px',
-                    width: '100%',
-                    textAlign: 'center'
-                }}>
-                    <button
-                        disabled={!this.itineraryStore.start || !this.itineraryStore.end || lockedMode}
-                        onClick={handleComputeClick}
-                    >
-                        Compute
-                    </button>
-                </div>
-
-            </div>
-        );
-    }
-
-    renderStart(lockedMode) {
-
-        let buttons;
-
-        if (this.itineraryStore.start) {
-            buttons = (
-                <button
-                    disabled={lockedMode}
-                    style={{ backgroundColor: '#e57373' }}
-                    onClick={() => (this.itineraryStore.start = null)}
-                >
-                    Remove
-                </button>
-            );
-        } else {
-            buttons = (
-                <>
-                    <button
-                        disabled={lockedMode}
-                        onClick={() => this.onUseUserPositionClick()}
-                    >
-                        {
-                            this.state.mode === Mode.WaitUserPositionForStart ? (
-                                <div className="loader"
-                                    style={{ marginRight: '5px' }}></div>
-                            ) : null
-                        }
-                        User position
-                    </button>
-
-                    <button
-                        disabled={lockedMode}
-                        style={{ marginLeft: '5px' }}
-                        onClick={() => this.setState({ mode: Mode.SelectStartOnMap })}
-                    >
-                        Select on map
-                    </button>
-                </>
-            );
-        }
-
-        return (
-            <>
-                Start:
-                <span style={{ marginLeft: '5px' }}>{buttons}</span>
-            </>
-        );
-    }
-
-    renderEnd(lockedMode) {
-
-        let buttons;
-
-        if (this.itineraryStore.end) {
-            buttons = (
-                <button
-                    disabled={lockedMode}
-                    style={{ backgroundColor: '#e57373' }}
-                    onClick={() => (this.itineraryStore.end = null)}
-                >
-                    Remove
-                </button>
-            );
-        } else {
-            buttons = (
-                <button
-                    disabled={lockedMode}
-                    onClick={() => this.setState({ mode: Mode.SelectEndOnMap })}
-                >
-                    Select on map
-                </button>
-            );
-        }
-
-        return (
-            <>
-                <div>
-                    End:
-                    <span style={{ marginLeft: '5px' }}>{buttons}</span>
-                </div>
-            </>
-        );
-    }
-}
-
-export default ItineraryComponent;

package/debug/map/MapComponent.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Map } from 'mapbox-gl';
-import {
-    Indoor, IndoorControl, IndoorMap
-} from 'mapbox-gl-indoor';
-import PropTypes from 'prop-types';
-import noop from 'lodash.noop';
-
-import MapHandler from './MapHandler.js';
-
-import 'mapbox-gl/dist/mapbox-gl.css';
-
-const accessToken
-    = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-
-class MapComponent extends React.Component {
-    static propTypes = {
-        maxZoom: PropTypes.number,
-        onMapLoaded: PropTypes.func,
-        indoorMaps: PropTypes.array
-    };
-
-    static defaultProps = {
-        maxZoom: 22,
-        onMapLoaded: noop
-    };
-
-    componentDidMount() {
-        this.map = new Map({
-            accessToken,
-            container: this.mapContainer,
-            style: 'mapbox://styles/mapbox/streets-v10',
-            maxZoom: this.props.maxZoom
-        });
-        this.map.indoor = new Indoor(this.map);
-
-        this.mapHandler = new MapHandler(this.map);
-
-        const mapLoadedFn = () => this.props.onMapLoaded(this.mapHandler);
-
-        this.map.on('load', () => {
-            if (this.props.indoorMaps && this.props.indoorMaps.length > 0) {
-                this._loadIndoorMaps(this.props.indoorMaps)
-                    .then(mapLoadedFn);
-            } else {
-                mapLoadedFn();
-            }
-        });
-
-        this.map.addControl(new IndoorControl(this.map.indoor));
-
-    }
-
-    componentWillUnmount() {
-        this.map.remove();
-    }
-
-    _loadIndoorMaps(mapsPaths) {
-        const beforeLayerId = 'housenum-label';
-        const layersToHide = ['poi-scalerank4-l15', 'poi-scalerank4-l1', 'poi-scalerank3', 'road-label-small'];
-
-        return Promise.all(
-            mapsPaths.map(mapPath =>
-                fetch(mapPath)
-                    .then(res => res.json())
-                    .then(geojson => this.map.indoor.addMap(IndoorMap.fromGeojson(geojson, {
-                        beforeLayerId,
-                        layersToHide,
-                        showFeaturesWithEmptyLevel: true
-                    }))))
-        );
-    }
-
-    render() {
-        return (
-            <div ref={map => (this.mapContainer = map)}
-                style={{
-                    width: '100%',
-                    height: '100%'
-                }} />
-        );
-    }
-}
-
-export default MapComponent;

package/debug/map/MapHandler.js

@@ -1,44 +0,0 @@
-import { Map } from 'mapbox-gl';
-
-import { Coordinates } from '@wemap/geo';
-
-import ItineraryMapHandler from './helpers/ItineraryMapHandler.js';
-import UserOnMapHandler from './helpers/UserOnMapHandler.js';
-import MapClickHandler from './helpers/MapClickHandler.js';
-
-class MapHandler {
-
-    itineraryMapHandler;
-    userOnMapHandler;
-
-    /**
-     *
-     * @param {Map} map
-     */
-    constructor(map) {
-        this.itineraryMapHandler = new ItineraryMapHandler(map);
-        this.userOnMapHandler = new UserOnMapHandler(map);
-        this.mapClickHandler = new MapClickHandler(map, this.userOnMapHandler);
-        this.map = map;
-    }
-
-    /**
-     * @param {Function} fn
-     */
-    onMapClick(fn) {
-        this.map.on('click', e => {
-            fn(new Coordinates(e.lngLat.lat, e.lngLat.lng));
-            this.map.getCanvas().style.cursor = '';
-        });
-    }
-
-    needClick() {
-        this.map.getCanvas().style.cursor = 'pointer';
-    }
-
-    get mapboxInstance() {
-        return this.map;
-    }
-}
-
-export default MapHandler;

package/debug/map/helpers/ItineraryMapHandler.js

@@ -1,283 +0,0 @@
-import { Map } from 'mapbox-gl';
-
-import { Level } from '@wemap/geo';
-import { MapboxUtils } from '@wemap/map';
-
-import ItineraryStore from '../../stores/ItineraryStore.js';
-
-class ItineraryMapHandler {
-
-    static SOURCE_ID = 'itinerary';
-
-    static ITINERARY_LAYER_ID = 'itinerary';
-    static ITINERARY_START_END_LAYER_ID = 'itinerary-start-end-segments';
-    static START_LAYER_ID = 'itinerary-start';
-    static END_LAYER_ID = 'itinerary-end';
-
-    mapboxSourceData = {
-        type: 'FeatureCollection',
-        features: []
-    };
-
-    /**
-     * @param {Map} map
-     */
-    constructor(map) {
-        if (!map) {
-            throw new TypeError('map cannot be null');
-        }
-
-        map.on('load', () => this.onMapLoaded());
-
-        this.map = map;
-        this.itineraryStore = ItineraryStore.instance;
-
-    }
-
-    onMapLoaded() {
-        this.initializeMapSourceAndLayers();
-
-        this.drawItineraryStart();
-        this.itineraryStore.on(ItineraryStore.Events.StartChanged, () => this.drawItineraryStart());
-
-        this.drawItineraryEnd();
-        this.itineraryStore.on(ItineraryStore.Events.EndChanged, () => this.drawItineraryEnd());
-
-        this.drawItinerary();
-        this.itineraryStore.on(ItineraryStore.Events.ItineraryChanged, () => this.drawItinerary());
-    }
-
-    initializeMapSourceAndLayers() {
-
-        this.map.addSource(ItineraryMapHandler.SOURCE_ID, {
-            type: 'geojson',
-            data: this.mapboxSourceData
-        });
-
-        this.generateLayers(ItineraryMapHandler.SOURCE_ID).forEach(layer => {
-            this.map.indoor._addLayerForFiltering(layer);
-        });
-    }
-
-    drawItinerary() {
-
-        this.mapboxSourceData.features = this.mapboxSourceData.features.filter(feature =>
-            !feature.properties || !feature.properties.itinerary
-        );
-
-        const { itinerary } = this.itineraryStore;
-
-        if (itinerary !== null) {
-
-            /**
-             * Start to Network segment
-             */
-            const startFeature = {
-                type: 'Feature',
-                properties: { 'itinerary': 'start' },
-                geometry: {
-                    type: 'LineString',
-                    coordinates: [
-                        MapboxUtils.coordsToLngLat(itinerary.start),
-                        MapboxUtils.coordsToLngLat(itinerary.nodes[0].coords)
-                    ]
-                }
-            };
-            if (itinerary.start.level !== null) {
-                startFeature.properties.level = itinerary.start.level.toString();
-            }
-
-            /**
-             * Network to End segment
-             */
-            const endFeature = {
-                type: 'Feature',
-                properties: { 'itinerary': 'end' },
-                geometry: {
-                    type: 'LineString',
-                    coordinates: [
-                        MapboxUtils.coordsToLngLat(itinerary.nodes[itinerary.nodes.length - 1].coords),
-                        MapboxUtils.coordsToLngLat(itinerary.end)
-                    ]
-                }
-            };
-            if (itinerary.end.level !== null) {
-                endFeature.properties.level = itinerary.end.level.toString();
-            }
-
-            let previousEdgeLevel = null;
-            let currentFeatureCoordinates;
-            const itineraryFeatures = itinerary.edges.reduce((acc, edge) => {
-
-                if (!currentFeatureCoordinates || !Level.equalsTo(edge.level, previousEdgeLevel)) {
-                    currentFeatureCoordinates = [MapboxUtils.coordsToLngLat(edge.node1.coords)];
-                    const feature = {
-                        type: 'Feature',
-                        properties: { 'itinerary': 'core' },
-                        geometry: {
-                            type: 'LineString',
-                            coordinates: currentFeatureCoordinates
-                        }
-                    };
-                    if (edge.level !== null) {
-                        feature.properties.level = edge.level.toString();
-                    }
-                    acc.push(feature);
-                    previousEdgeLevel = edge.level;
-                }
-
-                currentFeatureCoordinates.push(MapboxUtils.coordsToLngLat(edge.node2.coords));
-
-                return acc;
-
-            }, []);
-
-            this.mapboxSourceData.features.push(
-                ...itineraryFeatures,
-                startFeature,
-                endFeature
-            );
-        }
-
-        this.map.getSource(ItineraryMapHandler.SOURCE_ID).setData(this.mapboxSourceData);
-    }
-
-
-    drawItineraryStart() {
-
-        this.mapboxSourceData.features = this.mapboxSourceData.features.filter(feature =>
-            !feature.properties || feature.properties.start !== 'yes'
-        );
-
-        const coordinates = this.itineraryStore.start;
-
-        if (coordinates !== null) {
-            const feature = {
-                type: 'Feature',
-                properties: { 'start': 'yes' },
-                geometry: {
-                    type: 'Point',
-                    coordinates: MapboxUtils.coordsToLngLat(coordinates)
-                }
-            };
-            if (coordinates.level !== null) {
-                feature.properties.level = coordinates.level.toString();
-            }
-            this.mapboxSourceData.features.push(feature);
-        }
-
-        this.map.getSource(ItineraryMapHandler.SOURCE_ID).setData(this.mapboxSourceData);
-    }
-
-
-    drawItineraryEnd() {
-
-        this.mapboxSourceData.features = this.mapboxSourceData.features.filter(feature =>
-            !feature.properties || feature.properties.end !== 'yes'
-        );
-
-        const coordinates = this.itineraryStore.end;
-
-        if (coordinates !== null) {
-            const feature = {
-                type: 'Feature',
-                properties: { 'end': 'yes' },
-                geometry: {
-                    type: 'Point',
-                    coordinates: MapboxUtils.coordsToLngLat(coordinates)
-                }
-            };
-            if (coordinates.level !== null) {
-                feature.properties.level = coordinates.level.toString();
-            }
-            this.mapboxSourceData.features.push(feature);
-        }
-
-        this.map.getSource(ItineraryMapHandler.SOURCE_ID).setData(this.mapboxSourceData);
-    }
-
-    /**
-     * @returns {Layer[]}
-     */
-    generateLayers(sourceId) {
-        return [
-            {
-                id: ItineraryMapHandler.ITINERARY_LAYER_ID,
-                type: 'line',
-                source: sourceId,
-                filter: [
-                    'filter-==',
-                    'itinerary',
-                    'core'
-                ],
-                paint: {
-                    'line-color': '#039be5',
-                    'line-width': 2
-                },
-                layout: {
-                    'line-join': 'round',
-                    'line-cap': 'round'
-                }
-            },
-            {
-                id: ItineraryMapHandler.ITINERARY_START_END_LAYER_ID,
-                type: 'line',
-                source: sourceId,
-                filter: [
-                    'filter-in-small',
-                    'itinerary', [
-                        'literal',
-                        [
-                            'start',
-                            'end'
-                        ]
-                    ]
-                ],
-                paint: {
-                    'line-color': '#039be5',
-                    'line-dasharray': [
-                        1,
-                        3
-                    ],
-                    'line-width': 2
-                },
-                layout: {
-                    'line-join': 'round',
-                    'line-cap': 'round'
-                }
-            },
-            {
-                id: ItineraryMapHandler.START_LAYER_ID,
-                type: 'symbol',
-                source: sourceId,
-                filter: [
-                    'filter-==',
-                    'start',
-                    'yes'
-                ],
-                layout: {
-                    'icon-allow-overlap': true,
-                    'symbol-placement': 'point',
-                    'icon-image': 'hu-main-2',
-                    'icon-anchor': 'bottom'
-                }
-            }, {
-                id: ItineraryMapHandler.END_LAYER_ID,
-                type: 'symbol',
-                source: sourceId,
-                filter: [
-                    'filter-==',
-                    'end',
-                    'yes'
-                ],
-                layout: {
-                    'icon-allow-overlap': true,
-                    'symbol-placement': 'point',
-                    'icon-image': 'nz-state-2',
-                    'icon-anchor': 'bottom'
-                }
-            }
-        ];
-    }
-}
-export default ItineraryMapHandler;