proximiio-js-library 1.9.3 → 1.9.6

package/README.md

@@ -140,6 +140,11 @@ const map = new Proximiio.Map({
       defaultLabelColor: string; // optional, default: '#6945ed', default color of the polygon labels
       hoverLabelColor: string; // optional, default: '#fff', hover color of the polygon labels
       selectedLabelColor: string; // optional, default: '#fff', selected color of the polygon labels
+      defaultPolygonHeight: number; // optional, default: 3, default polygon height in meters
+      hoverPolygonHeight: number; // optional, default: 3, hover polygon height in meters
+      selectedPolygonHeight: number; // optional, default: 3, selected polygon height in meters
+      base: number; // optional, default: 0, default polygon base in meters
+      opacity: number; // optional, default: 1, default polygon opacity
    }
    considerVisibilityParam: false, // optional, default: true, if enabled all pois with visibility property defined as 'hidden' will not be visible as default, will be possible to toggle them with toggleHiddenPois() method
    fitBoundsPadding: 200, // optional, default 250, number | PaddingOptions, the amount of padding in pixels to add to the given bounds for found route, https://docs.mapbox.com/mapbox-gl-js/api/properties/#paddingoptions

package/lib/components/map/custom-layers.js

@@ -29,7 +29,18 @@ var PolygonsLayer = /** @class */ (function (_super) {
         _this.source = 'main';
         _this.filter = ['all', ['==', ['get', 'type'], 'shop-custom'], ['==', ['to-number', ['get', 'level']], 0]];
         _this.paint = new fill_extrusion_layer_1.PaintProperties({
-            'fill-extrusion-height': 3,
+            'fill-extrusion-height': [
+                'case',
+                ['boolean', ['feature-state', 'selected'], false],
+                data.selectedPolygonHeight,
+                ['boolean', ['feature-state', 'hover'], false],
+                data.hoverPolygonHeight,
+                ['boolean', ['feature-state', 'active'], false],
+                data.hoverPolygonHeight,
+                data.defaultPolygonHeight,
+            ],
+            'fill-extrusion-base': data.base,
+            'fill-extrusion-opacity': data.opacity,
             'fill-extrusion-color': [
                 'case',
                 ['boolean', ['feature-state', 'selected'], false],

package/lib/components/map/main.d.ts

@@ -48,6 +48,11 @@ interface Options {
         defaultLabelColor?: string;
         hoverLabelColor?: string;
         selectedLabelColor?: string;
+        defaultPolygonHeight?: number;
+        hoverPolygonHeight?: number;
+        selectedPolygonHeight?: number;
+        base?: number;
+        opacity?: number;
     };
     zoomLevel?: number;
     considerVisibilityParam?: boolean;
@@ -109,6 +114,7 @@ export declare class Map {
     private filteredFeatures;
     private hiddenFeatures;
     private filteredAmenities;
+    private amenityFilters;
     private hiddenAmenities;
     private amenityCategories;
     private hoveredPolygon;

package/lib/components/map/main.js

@@ -134,6 +134,11 @@ var Map = /** @class */ (function () {
                 defaultLabelColor: '#6945ed',
                 hoverLabelColor: '#fff',
                 selectedLabelColor: '#fff',
+                defaultPolygonHeight: 3,
+                hoverPolygonHeight: 3,
+                selectedPolygonHeight: 3,
+                base: 0,
+                opacity: 1,
             },
             considerVisibilityParam: true,
             fitBoundsPadding: 250,
@@ -155,6 +160,7 @@ var Map = /** @class */ (function () {
         this.filteredFeatures = [];
         this.hiddenFeatures = [];
         this.filteredAmenities = [];
+        this.amenityFilters = [];
         this.hiddenAmenities = [];
         this.amenityCategories = {};
         // Used to increment the value of the point measurement against the route.
@@ -217,7 +223,7 @@ var Map = /** @class */ (function () {
     Map.prototype.fetch = function () {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function () {
-            var placeParam, urlParams, _d, places, style, styles, features, amenities, user, defaultPlace, place, center;
+            var placeParam, urlParams, _d, places, style, styles, features, amenities, levelChangers, user, defaultPlace, place, center;
             var _this = this;
             return __generator(this, function (_e) {
                 switch (_e.label) {
@@ -230,6 +236,7 @@ var Map = /** @class */ (function () {
                         return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons)];
                     case 1:
                         _d = _e.sent(), places = _d.places, style = _d.style, styles = _d.styles, features = _d.features, amenities = _d.amenities;
+                        levelChangers = features.features.filter(function (f) { return f.properties.type === 'elevator' || f.properties.type === 'escalator' || f.properties.type === 'staircase'; });
                         return [4 /*yield*/, auth_1.default.getCurrentUser()];
                     case 2:
                         user = _e.sent();
@@ -260,7 +267,7 @@ var Map = /** @class */ (function () {
                         this.imageSourceManager.enabled = this.defaultOptions.showRasterFloorplans;
                         this.imageSourceManager.belowLayer = style.usesPrefixes() ? 'proximiio-floors' : 'floors';
                         this.imageSourceManager.initialize();
-                        this.state = __assign(__assign({}, this.state), { initializing: false, place: place, places: places, style: style, styles: styles, amenities: amenities, features: features, allFeatures: new feature_1.FeatureCollection(features), latitude: center[1], longitude: center[0], zoom: this.defaultOptions.zoomLevel ? this.defaultOptions.zoomLevel : (_c = this.defaultOptions.mapboxOptions) === null || _c === void 0 ? void 0 : _c.zoom, noPlaces: places.length === 0, user: user });
+                        this.state = __assign(__assign({}, this.state), { initializing: false, place: place, places: places, style: style, styles: styles, amenities: amenities, features: features, allFeatures: new feature_1.FeatureCollection(features), levelChangers: new feature_1.FeatureCollection({ features: levelChangers }), latitude: center[1], longitude: center[0], zoom: this.defaultOptions.zoomLevel ? this.defaultOptions.zoomLevel : (_c = this.defaultOptions.mapboxOptions) === null || _c === void 0 ? void 0 : _c.zoom, noPlaces: places.length === 0, user: user });
                         style.on(this.onStyleChange);
                         this.map = new mapboxgl.Map(__assign(__assign({}, this.defaultOptions.mapboxOptions), { container: this.defaultOptions.selector ? this.defaultOptions.selector : 'map' }));
                         this.map.setStyle(this.state.style);
@@ -449,6 +456,7 @@ var Map = /** @class */ (function () {
         }
     };
     Map.prototype.initDirectionIcon = function () {
+        var _this = this;
         if (this.map) {
             this.state.style.addSource('direction-icon-source', {
                 type: 'geojson',
@@ -476,6 +484,17 @@ var Map = /** @class */ (function () {
                 },
                 filter: ['all', ['==', ['to-number', ['get', 'level']], this.state.floor.level]],
             });
+            this.map.on('click', 'proximiio-levelchangers', function (ev) {
+                if (_this.routingSource.points) {
+                    var directionIcon = _this.state.style
+                        .getSource('direction-icon-source')
+                        .data.features.find(function (f) { return f.properties.level === _this.state.floor.level; });
+                    var way = directionIcon ? (directionIcon.properties.icon === 'floorchange-up-image' ? 'up' : 'down') : null;
+                    if (way && ev.features[0].properties.id === directionIcon.properties.levelChangerId) {
+                        _this.setFloorByWay(way);
+                    }
+                }
+            });
         }
     };
     Map.prototype.initAnimatedRoute = function () {
@@ -556,6 +575,9 @@ var Map = /** @class */ (function () {
                 // @ts-ignore
                 var polygonPoi = this.state.allFeatures.features.find(function (i) { return i.properties.id === e.features[0].properties.poi_id; });
                 var poi = this.state.allFeatures.features.find(function (i) { return i.properties.id === e.features[0].properties.id; });
+                if (polygonPoi) {
+                    this.handlePolygonSelection(polygonPoi);
+                }
                 this.onPolygonClickListener.next(polygonPoi ? polygonPoi : poi);
             }
             else {
@@ -584,7 +606,7 @@ var Map = /** @class */ (function () {
             }
         }
         if (connectedPolygonId) {
-            this.selectedPolygon = this.state.allFeatures.features.find(function (i) { return i.properties.id === connectedPolygonId; });
+            this.selectedPolygon = this.state.allFeatures.features.find(function (i) { return i.properties.id === connectedPolygonId && i.properties.type === 'shop-custom'; });
             if (this.selectedPolygon) {
                 this.map.setFeatureState({
                     source: 'main',
@@ -940,17 +962,18 @@ var Map = /** @class */ (function () {
             for (var key in this.amenityCategories) {
                 _loop_3(key);
             }
-            this.filteredAmenities = this.amenityIds.filter(function (el) { return !amenities_1.includes(el); });
+            this.amenityFilters = this.amenityIds.filter(function (el) { return !amenities_1.includes(el); });
         }
         else {
             if (inverted && this.hiddenAmenities.findIndex(function (i) { return i === amenityId; }) === -1) {
                 this.hiddenAmenities.push(amenityId);
                 this.filteredAmenities = this.filteredAmenities.filter(function (i) { return i !== amenityId; });
             }
-            else if (!inverted && this.filteredAmenities.findIndex(function (i) { return i === amenityId; }) === -1) {
-                this.filteredAmenities.push(amenityId);
+            else if (!inverted && this.amenityFilters.findIndex(function (i) { return i === amenityId; }) === -1) {
+                this.amenityFilters.push(amenityId);
             }
         }
+        this.filteredAmenities = this.amenityFilters;
         this.filterOutFeatures();
         if (!inverted)
             this.setActivePolygons(amenityId);
@@ -963,7 +986,7 @@ var Map = /** @class */ (function () {
             this.amenityCategories[category].active &&
             this.amenityCategories[category].activeId === amenityId) {
             var amenities = this.amenityCategories[category].amenities.filter(function (i) { return i !== amenityId; });
-            this.filteredAmenities = this.filteredAmenities.concat(amenities);
+            this.amenityFilters = this.amenityFilters.concat(amenities);
             this.amenityCategories[category].active = false;
         }
         else if (!category) {
@@ -973,22 +996,23 @@ var Map = /** @class */ (function () {
                     this.filteredAmenities.push(amenityId);
             }
             else {
-                this.filteredAmenities = this.filteredAmenities.filter(function (i) { return i !== amenityId; });
+                this.amenityFilters = this.amenityFilters.filter(function (i) { return i !== amenityId; });
             }
         }
-        this.filteredAmenities = this.filteredAmenities.length > 0 ? this.filteredAmenities : this.amenityIds;
+        this.filteredAmenities = this.amenityFilters.length > 0 ? this.amenityFilters : this.amenityIds;
         this.hiddenAmenities = this.hiddenAmenities.length > 0 ? this.hiddenAmenities : [];
         this.filterOutFeatures();
         this.setActivePolygons(null);
     };
     Map.prototype.onResetAmenityFilters = function () {
-        this.filteredAmenities = this.amenityIds;
+        this.amenityFilters = [];
         this.hiddenAmenities = [];
         for (var key in this.amenityCategories) {
             if (this.amenityCategories.hasOwnProperty(key)) {
                 this.amenityCategories[key].active = false;
             }
         }
+        this.filteredAmenities = this.amenityIds;
         this.filterOutFeatures();
         this.setActivePolygons(null);
     };
@@ -1073,7 +1097,7 @@ var Map = /** @class */ (function () {
                 : [];
             if (activeFeatures.length > 0) {
                 var _loop_4 = function (f) {
-                    var polygon = this_4.state.allFeatures.features.find(function (i) { return i.properties.id === f.properties.metadata.polygon_id; });
+                    var polygon = this_4.state.allFeatures.features.find(function (i) { return i.properties.id === f.properties.metadata.polygon_id && i.properties.type === 'shop-custom'; });
                     if (polygon) {
                         this_4.map.setFeatureState({
                             source: 'main',
@@ -1091,7 +1115,7 @@ var Map = /** @class */ (function () {
             }
             if (amenityFeatures.length > 0) {
                 var _loop_5 = function (f) {
-                    var polygon = this_5.state.allFeatures.features.find(function (i) { return i.properties.id === f.properties.metadata.polygon_id; });
+                    var polygon = this_5.state.allFeatures.features.find(function (i) { return i.properties.id === f.properties.metadata.polygon_id && i.properties.type === 'shop-custom'; });
                     if (polygon) {
                         this_5.map.setFeatureState({
                             source: 'main',
@@ -1610,10 +1634,15 @@ var Map = /** @class */ (function () {
             .filter(function (i) { return i.isLevelChanger; })
             .map(function (i, index, array) {
             var feature = _this.state.allFeatures.features.find(function (f) { return f.id === i.id; });
+            var targetPoint = turf.point(feature.geometry.coordinates);
+            var placeLevelChangers = new feature_1.FeatureCollection({
+                features: _this.state.levelChangers.features.filter(function (f) { return f.properties.place_id === _this.state.place.id; }),
+            });
+            var nearestLevelChanger = turf.nearestPoint(targetPoint, placeLevelChangers);
             var nextLevelChanger = array[index + 1] ? array[index + 1] : array[index - 1];
             return new feature_1.default({
                 type: 'Feature',
-                geometry: feature.geometry,
+                geometry: nearestLevelChanger.geometry,
                 properties: {
                     usecase: 'floor-change-symbol',
                     icon: nextLevelChanger.properties.level > i.properties.level
@@ -1621,6 +1650,7 @@ var Map = /** @class */ (function () {
                         : 'floorchange-down-image',
                     iconOffset: nextLevelChanger.properties.level > i.properties.level ? [4, -90] : [4, 90],
                     level: i.properties.level,
+                    levelChangerId: nearestLevelChanger.properties.id,
                 },
             });
         });

package/lib/controllers/geo.js

@@ -62,22 +62,24 @@ var getFeatures = function (initPolygons) { return __awaiter(void 0, void 0, voi
                             feature.properties.type = 'poi-custom';
                             var polygon = res.data.features.find(function (f) { return f.properties.id === feature.properties.metadata.polygon_id; });
                             if (polygon) {
-                                polygon.properties.type = 'shop-custom';
-                                polygon.properties.poi_id = feature.properties.id;
-                                polygon.properties.amenity = feature.properties.amenity;
-                                polygon.id = JSON.stringify(key);
-                                if (polygon.properties['label-line'] &&
-                                    polygon.properties['label-line'][0] instanceof Array &&
-                                    polygon.properties['label-line'][1] instanceof Array) {
+                                var polygonFeature = JSON.parse(JSON.stringify(polygon));
+                                polygonFeature.properties.type = 'shop-custom';
+                                polygonFeature.properties.poi_id = feature.properties.id;
+                                polygonFeature.properties.amenity = feature.properties.amenity;
+                                polygonFeature.id = JSON.stringify(key);
+                                featuresToAdd_1.push(polygonFeature);
+                                if (polygonFeature.properties['label-line'] &&
+                                    polygonFeature.properties['label-line'][0] instanceof Array &&
+                                    polygonFeature.properties['label-line'][1] instanceof Array) {
                                     var labelLineFeature = JSON.parse(JSON.stringify(feature));
                                     labelLineFeature.geometry = {
-                                        coordinates: polygon.properties['label-line'],
+                                        coordinates: polygonFeature.properties['label-line'],
                                         type: 'LineString',
                                     };
                                     labelLineFeature.properties.id = JSON.stringify(key + 9999);
                                     labelLineFeature.id = JSON.stringify(key + 9999);
                                     labelLineFeature.properties.type = 'shop-label';
-                                    polygon.properties.label_id = labelLineFeature.properties.id;
+                                    polygonFeature.properties.label_id = labelLineFeature.properties.id;
                                     featuresToAdd_1.push(labelLineFeature);
                                 }
                             }

package/lib/models/style.d.ts

@@ -36,6 +36,7 @@ export default class StyleModel {
     addSource(sourceId: string, source: any): void;
     getSources(): BaseSource[];
     setSource(id: string, data: BaseSource): void;
+    getSource(sourceId: string): BaseSource;
     setLevel(level: number): void;
     get polygonEditing(): any;
     toggleCluster(): void;

package/lib/models/style.js

@@ -268,6 +268,9 @@ var StyleModel = /** @class */ (function () {
     StyleModel.prototype.setSource = function (id, data) {
         this.sources[id] = data.source;
     };
+    StyleModel.prototype.getSource = function (sourceId) {
+        return this.sources[sourceId];
+    };
     StyleModel.prototype.setLevel = function (level) {
         __spreadArray(__spreadArray([], this.getLayers('main')), this.getLayers('route')).forEach(function (layer) {
             if (!layer.filter) {