waygo-maps 1.0.0

package/src/Controls/DirectionsControl.js

@@ -0,0 +1,198 @@
+import Control from "../core/Control";
+import DirectionsView from "../components/DirectionsView/DirectionsView";
+import mapboxgl from 'mapbox-gl';
+
+class DirectionsControl extends Control {
+    constructor(options = {}) {
+        super(options);
+        this.directionsView = null;
+        this.map = null;
+    }
+
+    onAdd(map) {
+        this.map = map;
+
+        this.container = document.createElement('div');
+        this.container.className = 'directions-control-container';
+
+        this.directionsView = new DirectionsView();
+        this.container.appendChild(this.directionsView.getElement());
+
+        this.initializeEventListeners();
+        this.createDirectionsLineLayer();
+        this.hide();
+        return this.container;
+    }
+
+    onRemove() {
+        super.onRemove();
+    }
+
+    initializeEventListeners() {
+        this.map.on('state:default', this._handleDefaultState.bind(this));
+        this.map.on('state:search', this._handleSearchState.bind(this));
+        this.map.on('state:selectedContent', this._handleSelectedContentState.bind(this));
+        this.map.on('state:directions', this._handleDirectionsState.bind(this));
+        // this.map.on('initiate:back', this._handleMapInitiateBack.bind(this));
+
+        this.directionsView.on('initiate:findPath', this._handleIntiateFindPath.bind(this));
+    }
+
+    createDirectionsLineLayer() {
+        // Check if the source already exists to avoid adding it multiple times
+        if (!this.map.map.getSource('directionsLineSource')) {
+            this.map.map.addSource('directionsLineSource', {
+                'type': 'geojson',
+                'data': {
+                    'type': 'Feature',
+                    'properties': {},
+                    'geometry': {
+                        'type': 'LineString',
+                        'coordinates': []
+                    }
+                }
+            });
+        }
+    
+        // Check if the layer already exists to avoid adding it multiple times
+        if (!this.map.map.getLayer('directionsLineLayer')) {
+            this.map.map.addLayer({
+                'id': 'directionsLineLayer',
+                'type': 'line',
+                'source': 'directionsLineSource',
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+                'paint': {
+                    'line-color': '#1e1e1e',
+                    'line-width': 8,
+                    // 'line-blur': 0.9
+                }
+            });
+    
+            this.map.map.moveLayer('directionsLineLayer', 'special-areas');
+        }
+    }    
+
+
+    updateLineData(newCoordinates) {
+        this.map.map.getSource('directionsLineSource').setData({
+            'type': 'Feature',
+            'properties': {},
+            'geometry': {
+                'type': 'LineString',
+                'coordinates': newCoordinates
+            }
+        });
+
+        const bounds = new mapboxgl.LngLatBounds();
+        newCoordinates.forEach(function (coordinate) {
+            bounds.extend(coordinate);
+        });
+
+        this.map.map.fitBounds(bounds, {
+            padding: 200,  // Add padding around the edges of the map
+            padding: {
+                top: 200,
+                bottom: 200,
+                left: 500,
+                right: 150
+            },
+            maxZoom: 15,  // Optional: Limit the maximum zoom level
+            duration: 1000 // Optional: Animation duration in milliseconds
+        });
+    }
+
+    clearLineData() {
+        this.map.map.getSource('directionsLineSource').setData({
+            'type': 'Feature',
+            'properties': {},
+            'geometry': {
+                'type': 'LineString',
+                'coordinates': []
+            }
+        });
+    }
+
+    // _handleMapInitiateBack() {
+
+    // }
+
+    _handleDefaultState() {
+        this.hide();
+        // this._clearViews();
+    }
+
+    _handleSearchState(data) {
+        const { query, results } = data;
+        this.hide();
+        // this._clearViews();
+    }
+
+    _handleSelectedContentState(data) {
+        const { contentPlacementIds, selectedContentPlacement } = data;
+        // this._updateContentViews();
+        this.hide();
+        this.directionsView.updateView(null, null);
+        this.clearLineData();
+    }
+
+    _handleDirectionsState(data) {
+        const { startContentPlacement, endContentPlacement } = data;
+        console.log("handling directions state in directions control", data);
+        this.show();
+        this.clearLineData();
+        this.directionsView.updateView(startContentPlacement, endContentPlacement);
+    }
+
+    _handleIntiateFindPath(data) {
+        const { startContentPlacementId, endContentPlacementId } = data;
+        this.clearLineData();
+        const pathResponse = this.map.findPath(startContentPlacementId, endContentPlacementId);
+
+        console.log("HERE IS PATH RESPONSEEE", pathResponse);
+        const { coordinates, steps } = pathResponse;
+
+        this.updateLineData(coordinates);
+        this.directionsView.setSteps(steps);
+    }
+
+    _handleSelectDirectionsButton(data) {
+        const { placementId } = data;
+        // this.map.setToDirectionsState(null, placementId);
+    }
+
+    // _updateContentViews() {
+    //     this._clearViews();
+    //     this._render();
+    // }
+
+    _render() {
+        console.log('render');
+        // if (this.contentPlacementIds.length === 0 || this.currentContentPlacement === null) return;
+
+        // const contentPlacementView = new ContentDetails();
+        // contentPlacementView.updateView(this.currentContentPlacement);
+        // contentPlacementView.on('selectChildContentPlacement', this._handleSelectChildContentPlacement.bind(this));
+        // contentPlacementView.on('selectDirectionsButton', this._handleSelectDirectionsButton.bind(this));
+
+        // this.container.appendChild(contentPlacementView.getElement());
+    }
+
+    // _clearViews() {
+    //     while (this.container.firstChild) {
+    //         this.container.removeChild(this.container.firstChild);
+    //     }
+    // }
+
+    show() {
+        this.container.classList.add('visible');
+    }
+
+    hide() {
+        this.container.classList.remove('visible');
+    }
+}
+
+export default DirectionsControl;