proximiio-js-library 1.9.26 → 1.9.28

package/README.md

@@ -147,6 +147,9 @@ const map = new Proximiio.Map({
       opacity: number; // optional, default: 1, default polygon opacity
       minZoom: number; // optional, default: 17, default polygon minimum zoom visibility
       maxZoom: number; // optional, default: 24, default polygon maximum zoom visibility
+      labelFontSize: (string | number | string[])[] | number; // optional, define polygon label font size, default is interpolate expression based on zoom level
+      symbolPlacement: 'point' | 'line' | 'line-center'; // optional, label placement relative to its geometry, default: 'line-center'
+      autoLabelLines: boolean; // optional, default: true, if no label-line is defined in the feature metadata, if enabled it's automatically generated based on the longest polygon border
    }
    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.d.ts

@@ -1,4 +1,5 @@
 import FillExtrusionLayer from './layers/fill_extrusion_layer';
+import LineLayer from './layers/line_layer';
 import SymbolLayer from './layers/symbol_layer';
 export declare class PolygonsLayer extends FillExtrusionLayer {
     constructor(data: any);
@@ -9,3 +10,6 @@ export declare class PolygonIconsLayer extends SymbolLayer {
 export declare class PolygonTitlesLayer extends SymbolLayer {
     constructor(data: any);
 }
+export declare class PolygonTitlesLineLayer extends LineLayer {
+    constructor(data: any);
+}

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

@@ -15,8 +15,9 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PolygonTitlesLayer = exports.PolygonIconsLayer = exports.PolygonsLayer = void 0;
+exports.PolygonTitlesLineLayer = exports.PolygonTitlesLayer = exports.PolygonIconsLayer = exports.PolygonsLayer = void 0;
 var fill_extrusion_layer_1 = require("./layers/fill_extrusion_layer");
+var line_layer_1 = require("./layers/line_layer");
 var symbol_layer_1 = require("./layers/symbol_layer");
 var PolygonsLayer = /** @class */ (function (_super) {
     __extends(PolygonsLayer, _super);
@@ -121,7 +122,7 @@ var PolygonTitlesLayer = /** @class */ (function (_super) {
             ['==', ['to-number', ['get', 'level']], 0],
         ];
         _this.layout = new symbol_layer_1.LayoutProperties({
-            'symbol-placement': 'line-center',
+            'symbol-placement': data.symbolPlacement,
             'text-anchor': 'top',
             'text-ignore-placement': true,
             'text-allow-overlap': true,
@@ -146,3 +147,30 @@ var PolygonTitlesLayer = /** @class */ (function (_super) {
     return PolygonTitlesLayer;
 }(symbol_layer_1.default));
 exports.PolygonTitlesLayer = PolygonTitlesLayer;
+var PolygonTitlesLineLayer = /** @class */ (function (_super) {
+    __extends(PolygonTitlesLineLayer, _super);
+    function PolygonTitlesLineLayer(data) {
+        var _this = _super.call(this, data) || this;
+        _this.id = 'shop-labels-line';
+        _this.type = 'line';
+        _this.minzoom = data.minZoom;
+        _this.maxzoom = data.maxZoom;
+        _this.source = 'main';
+        _this.filter = [
+            'all',
+            ['==', ['get', 'type', ['get', '_dynamic']], 'shop-label'],
+            ['==', ['to-number', ['get', 'level']], 0],
+        ];
+        _this.layout = new line_layer_1.LayoutProperties({
+            'line-join': 'round',
+            'line-cap': 'round',
+        });
+        _this.paint = new line_layer_1.PaintProperties({
+            'line-color': '#000',
+            'line-width': 3,
+        });
+        return _this;
+    }
+    return PolygonTitlesLineLayer;
+}(line_layer_1.default));
+exports.PolygonTitlesLineLayer = PolygonTitlesLineLayer;

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

@@ -23,4 +23,12 @@ export declare const translations: {
         DOWN: string;
         TO_FLOOR: string;
     };
+    it: {
+        ELEVATOR: string;
+        ESCALATOR: string;
+        SCALE: string;
+        UP: string;
+        DOWN: string;
+        TO_FLOOR: string;
+    };
 };

package/lib/components/map/i18n.js

@@ -26,4 +26,12 @@ exports.translations = {
         DOWN: 'down',
         TO_FLOOR: 'to floor',
     },
+    it: {
+        ELEVATOR: 'Ascensore',
+        ESCALATOR: 'Scala mobile',
+        SCALE: 'Scale',
+        UP: 'su',
+        DOWN: 'giù',
+        TO_FLOOR: 'al piano',
+    },
 };

package/lib/components/map/layers/line_layer.d.ts

@@ -1,24 +1,24 @@
 import BaseLayer, { Serializable } from './base_layer';
 export declare class PaintProperties extends Serializable {
     lineColor: string;
-    lineOpacity: number;
-    lineTranslate: [number, number];
-    lineTranslateAnchor: 'map' | 'viewport';
+    lineOpacity?: number;
+    lineTranslate?: [number, number];
+    lineTranslateAnchor?: 'map' | 'viewport';
     lineWidth: number;
-    lineGapWidth: number;
-    lineOffset: number;
-    lineBlur: number;
+    lineGapWidth?: number;
+    lineOffset?: number;
+    lineBlur?: number;
     lineDasharray?: [number, number];
     linePattern?: string;
     lineGradient?: string;
     constructor(data: any);
 }
 export declare class LayoutProperties extends Serializable {
-    visibility: 'visible' | 'none';
+    visibility?: 'visible' | 'none';
     lineCap: 'butt' | 'round' | 'square';
     lineJoin: 'bevel' | 'round' | 'miter';
-    lineMiterLimit: number;
-    lineRoundLimit: number;
+    lineMiterLimit?: number;
+    lineRoundLimit?: number;
     constructor(data: any);
 }
 export default class LineLayer extends BaseLayer {

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

@@ -57,7 +57,9 @@ interface Options {
         removeOriginalPolygonsLayer?: boolean;
         minZoom?: number;
         maxZoom?: number;
-        labelFontSize?: (string | number | string[])[];
+        labelFontSize?: (string | number | string[])[] | number;
+        symbolPlacement?: 'point' | 'line' | 'line-center';
+        autoLabelLines?: boolean;
     };
     zoomLevel?: number;
     considerVisibilityParam?: boolean;
@@ -206,6 +208,7 @@ export declare class Map {
     private restartAnimation;
     private cancelAnimation;
     private getClosestFeature;
+    private getFloorName;
     /**
      *  @memberof Map
      *  @name getMapboxInstance

package/lib/components/map/main.js

@@ -168,6 +168,8 @@ var Map = /** @class */ (function () {
                     22,
                     42,
                 ],
+                symbolPlacement: 'line-center',
+                autoLabelLines: true,
             },
             considerVisibilityParam: true,
             fitBoundsPadding: 250,
@@ -275,7 +277,7 @@ var Map = /** @class */ (function () {
                             urlParams = new URLSearchParams(window.location.search);
                             placeParam = urlParams.get(this.defaultOptions.urlParams.defaultPlace);
                         }
-                        return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons, this.defaultOptions.amenityIdProperty, this.defaultOptions.hiddenAmenities)];
+                        return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons, this.defaultOptions.polygonsOptions.autoLabelLines, this.defaultOptions.amenityIdProperty, this.defaultOptions.hiddenAmenities)];
                     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'; });
@@ -486,7 +488,7 @@ var Map = /** @class */ (function () {
                     case 0:
                         if (!this.map) return [3 /*break*/, 2];
                         console.log('data should be refetched');
-                        return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons, this.defaultOptions.amenityIdProperty, this.defaultOptions.hiddenAmenities)];
+                        return [4 /*yield*/, repository_1.default.getPackage(this.defaultOptions.initPolygons, this.defaultOptions.polygonsOptions.autoLabelLines, this.defaultOptions.amenityIdProperty, this.defaultOptions.hiddenAmenities)];
                     case 1:
                         features = (_a.sent()).features;
                         levelChangers = features.features.filter(function (f) {
@@ -695,7 +697,7 @@ var Map = /** @class */ (function () {
                     icon: direction === 'UP' ? 'floorchange-up-image' : 'floorchange-down-image',
                     iconOffset: direction === 'UP' ? [4, -90] : [4, 90],
                     popupImage: 'popup',
-                    description: i18n_1.translations[_this.defaultOptions.language][levelChangerType] + " \n " + i18n_1.translations[_this.defaultOptions.language][direction] + " " + i18n_1.translations[_this.defaultOptions.language]['TO_FLOOR'] + " " + (destinationFloor.name ? destinationFloor.name : levelChanger.destinationLevel),
+                    description: i18n_1.translations[_this.defaultOptions.language][levelChangerType] + " \n " + i18n_1.translations[_this.defaultOptions.language][direction] + " " + i18n_1.translations[_this.defaultOptions.language]['TO_FLOOR'] + " " + (destinationFloor.name ? _this.getFloorName(destinationFloor) : levelChanger.destinationLevel),
                     level: levelChanger.level,
                     destinationLevel: levelChanger.destinationLevel,
                     levelChangerId: levelChangerFeature.properties.id,
@@ -2133,6 +2135,14 @@ var Map = /** @class */ (function () {
             return false;
         }
     };
+    Map.prototype.getFloorName = function (floor) {
+        if (floor.metadata && floor.metadata['title_' + this.defaultOptions.language]) {
+            return floor.metadata['title_' + this.defaultOptions.language];
+        }
+        else {
+            return floor.name;
+        }
+    };
     /**
      *  @memberof Map
      *  @name getMapboxInstance

package/lib/controllers/geo.d.ts

@@ -1,13 +1,13 @@
 import Feature, { FeatureCollection } from '../models/feature';
 import { FeatureCollection as FCModel, Feature as FModel } from '@turf/helpers';
-export declare const getFeatures: (initPolygons?: boolean, hiddenAmenities?: string[]) => Promise<FeatureCollection>;
+export declare const getFeatures: (initPolygons?: boolean, autoLabelLines?: boolean, hiddenAmenities?: string[]) => Promise<FeatureCollection>;
 export declare const getAmenities: (amenityIdProperty?: string) => Promise<any>;
 export declare const getPois: () => Promise<Feature[]>;
 export declare const addFeatures: (featureCollection: FCModel) => Promise<void>;
 export declare const updateFeature: (featureData: FModel, featureId: string) => Promise<void>;
 export declare const deleteFeatures: (featureCollection: FCModel) => Promise<void>;
 declare const _default: {
-    getFeatures: (initPolygons?: boolean, hiddenAmenities?: string[]) => Promise<FeatureCollection>;
+    getFeatures: (initPolygons?: boolean, autoLabelLines?: boolean, hiddenAmenities?: string[]) => Promise<FeatureCollection>;
     addFeatures: (featureCollection: FCModel<import("@turf/helpers").Geometry | import("@turf/helpers").GeometryCollection, {
         [name: string]: any;
     }>) => Promise<void>;

package/lib/controllers/geo.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -47,7 +58,7 @@ var feature_1 = require("../models/feature");
 var amenity_1 = require("../models/amenity");
 var main_1 = require("../components/map/main");
 var turf_1 = require("@turf/turf");
-var getFeatures = function (initPolygons, hiddenAmenities) { return __awaiter(void 0, void 0, void 0, function () {
+var getFeatures = function (initPolygons, autoLabelLines, hiddenAmenities) { return __awaiter(void 0, void 0, void 0, function () {
     var url, res, featuresToAdd_1, shopPolygons_1, labelLineFeatures_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -99,7 +110,7 @@ var getFeatures = function (initPolygons, hiddenAmenities) { return __awaiter(vo
                                 connectedPolygon_1.properties._dynamic.type = 'shop-custom';
                                 connectedPolygon_1.properties._dynamic.poi_id = feature.properties.id;
                                 connectedPolygon_1.properties._dynamic.amenity = feature.properties.amenity;
-                                // id have to be changed to numetic type so feature state will work
+                                // id have to be changed to numeric type so feature state will work
                                 connectedPolygon_1.id = JSON.stringify(key);
                                 // check if feature is inside a polygon
                                 labelLineFeatures_1.forEach(function (line) {
@@ -111,7 +122,7 @@ var getFeatures = function (initPolygons, hiddenAmenities) { return __awaiter(vo
                                     }
                                 });
                                 if (connectedLabelLine_1) {
-                                    // id have to be changed to numetic type so feature state will work
+                                    // id have to be changed to numeric type so feature state will work
                                     connectedLabelLine_1.id = JSON.stringify(key + 9999);
                                     feature.properties._dynamic.label_id = connectedLabelLine_1.id;
                                     connectedPolygon_1.properties._dynamic.label_id = connectedLabelLine_1.id;
@@ -126,27 +137,75 @@ var getFeatures = function (initPolygons, hiddenAmenities) { return __awaiter(vo
                                     connectedLabelLine_1.properties.title = feature.properties.title;
                                     connectedLabelLine_1.properties.title_i18n = feature.properties.title_i18n;
                                 }
-                                var labelLine = connectedPolygon_1.properties['label-line']
-                                    ? JSON.parse(JSON.stringify(connectedPolygon_1.properties['label-line']))
-                                    : connectedPolygon_1.properties.metadata && connectedPolygon_1.properties.metadata['label-line']
-                                        ? JSON.parse(JSON.stringify(connectedPolygon_1.properties.metadata['label-line']))
-                                        : feature.properties.metadata && feature.properties.metadata['label-line']
-                                            ? JSON.parse(JSON.stringify(feature.properties.metadata['label-line']))
-                                            : undefined;
-                                if (labelLine && labelLine !== undefined && labelLine.length > 0) {
-                                    var parsedLabelLine = typeof labelLine === 'string' ? JSON.parse(labelLine) : labelLine;
-                                    if (parsedLabelLine[0] instanceof Array && parsedLabelLine[1] instanceof Array) {
-                                        var labelLineFeature = JSON.parse(JSON.stringify(feature));
-                                        labelLineFeature.geometry = {
-                                            coordinates: parsedLabelLine,
-                                            type: 'LineString',
-                                        };
-                                        labelLineFeature.properties.id = JSON.stringify(key + 9999);
-                                        labelLineFeature.id = JSON.stringify(key + 9999);
-                                        labelLineFeature.properties.type = 'shop-label';
-                                        labelLineFeature.properties._dynamic.type = 'shop-label';
-                                        connectedPolygon_1.properties._dynamic.label_id = labelLineFeature.properties.id;
-                                        featuresToAdd_1.push(labelLineFeature);
+                                if (!connectedLabelLine_1) {
+                                    var labelLine = connectedPolygon_1.properties['label-line']
+                                        ? JSON.parse(JSON.stringify(connectedPolygon_1.properties['label-line']))
+                                        : connectedPolygon_1.properties.metadata && connectedPolygon_1.properties.metadata['label-line']
+                                            ? JSON.parse(JSON.stringify(connectedPolygon_1.properties.metadata['label-line']))
+                                            : feature.properties.metadata && feature.properties.metadata['label-line']
+                                                ? JSON.parse(JSON.stringify(feature.properties.metadata['label-line']))
+                                                : undefined;
+                                    if (labelLine && labelLine !== undefined && labelLine.length > 0) {
+                                        var parsedLabelLine = typeof labelLine === 'string' ? JSON.parse(labelLine) : labelLine;
+                                        if (parsedLabelLine[0] instanceof Array && parsedLabelLine[1] instanceof Array) {
+                                            var labelLineFeature = JSON.parse(JSON.stringify(feature));
+                                            labelLineFeature.geometry = {
+                                                coordinates: parsedLabelLine,
+                                                type: 'LineString',
+                                            };
+                                            labelLineFeature.properties.id = JSON.stringify(key + 9999);
+                                            labelLineFeature.id = JSON.stringify(key + 9999);
+                                            labelLineFeature.properties.type = 'shop-label';
+                                            labelLineFeature.properties._dynamic.type = 'shop-label';
+                                            connectedPolygon_1.properties._dynamic.label_id = labelLineFeature.properties.id;
+                                            featuresToAdd_1.push(labelLineFeature);
+                                        }
+                                    }
+                                    else if (autoLabelLines) {
+                                        var longestBorder = void 0;
+                                        var labelBorder = void 0;
+                                        // loop through segments and find the longest border
+                                        for (var i = 0; i < connectedPolygon_1.geometry.coordinates[0][0].length; i++) {
+                                            var currentCoords = connectedPolygon_1.geometry.coordinates[0][0][i];
+                                            var nextCoords = connectedPolygon_1.geometry.coordinates[0][0][i + 1];
+                                            if (nextCoords) {
+                                                var border = turf_1.lineString([currentCoords, nextCoords], __assign({}, feature.properties));
+                                                // measure border length
+                                                var borderLength = turf_1.length(border);
+                                                border.properties._dynamic = __assign(__assign({}, border.properties._dynamic), { length: borderLength });
+                                                // if there is not longest border define it
+                                                if (!longestBorder) {
+                                                    longestBorder = border;
+                                                }
+                                                else {
+                                                    // if current segment border is longer, rewrite it
+                                                    if (borderLength > longestBorder.properties._dynamic.length) {
+                                                        longestBorder = border;
+                                                    }
+                                                }
+                                            }
+                                        }
+                                        // measure length from longest border to polygon center
+                                        var distanceToCenter = turf_1.pointToLineDistance(turf_1.centroid(connectedPolygon_1), longestBorder);
+                                        // offset border to polygon center and make it longer to get intersections with the polygon
+                                        labelBorder = turf_1.lineOffset(longestBorder, distanceToCenter);
+                                        labelBorder = turf_1.transformScale(labelBorder, 10);
+                                        var intersection = turf_1.lineIntersect(connectedPolygon_1, labelBorder);
+                                        // if there are more than 1 intersections, get the line betweeen them
+                                        if (intersection.features.length > 1) {
+                                            var intersectedLine = turf_1.lineString([
+                                                intersection.features[0].geometry.coordinates,
+                                                intersection.features[intersection.features.length - 1].geometry.coordinates,
+                                            ]);
+                                            // use the interstections line as the label line
+                                            labelBorder.geometry = intersectedLine.geometry;
+                                        }
+                                        labelBorder.properties.id = JSON.stringify(key + 9999);
+                                        labelBorder.id = JSON.stringify(key + 9999);
+                                        labelBorder.properties.type = 'shop-label';
+                                        labelBorder.properties._dynamic.type = 'shop-label';
+                                        connectedPolygon_1.properties._dynamic.label_id = labelBorder.properties.id;
+                                        featuresToAdd_1.push(labelBorder);
                                     }
                                 }
                             }

package/lib/controllers/repository.d.ts

@@ -3,7 +3,7 @@ import { FloorModel } from '../models/floor';
 import StyleModel from '../models/style';
 import { FeatureCollection } from '../models/feature';
 import { AmenityModel } from '../models/amenity';
-export declare const getPackage: (initPolygons?: boolean, amenityIdProperty?: string, hiddenAmenities?: string[]) => Promise<{
+export declare const getPackage: (initPolygons?: boolean, autoLabelLines?: boolean, amenityIdProperty?: string, hiddenAmenities?: string[]) => Promise<{
     places: PlaceModel[];
     floors: FloorModel[];
     style: StyleModel;
@@ -12,7 +12,7 @@ export declare const getPackage: (initPolygons?: boolean, amenityIdProperty?: st
     amenities: AmenityModel[];
 }>;
 declare const _default: {
-    getPackage: (initPolygons?: boolean, amenityIdProperty?: string, hiddenAmenities?: string[]) => Promise<{
+    getPackage: (initPolygons?: boolean, autoLabelLines?: boolean, amenityIdProperty?: string, hiddenAmenities?: string[]) => Promise<{
         places: PlaceModel[];
         floors: FloorModel[];
         style: StyleModel;

package/lib/controllers/repository.js

@@ -41,7 +41,7 @@ var places_1 = require("./places");
 var floors_1 = require("./floors");
 var style_1 = require("./style");
 var geo_1 = require("./geo");
-var getPackage = function (initPolygons, amenityIdProperty, hiddenAmenities) { return __awaiter(void 0, void 0, void 0, function () {
+var getPackage = function (initPolygons, autoLabelLines, amenityIdProperty, hiddenAmenities) { return __awaiter(void 0, void 0, void 0, function () {
     var result, promises;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -52,7 +52,7 @@ var getPackage = function (initPolygons, amenityIdProperty, hiddenAmenities) { r
                     floors_1.getFloors().then(function (floors) { return (result.floors = floors.data); }),
                     style_1.getStyle().then(function (style) { return (result.style = style); }),
                     style_1.getStyles().then(function (styles) { return (result.styles = styles); }),
-                    geo_1.getFeatures(initPolygons, hiddenAmenities).then(function (features) { return (result.features = features); }),
+                    geo_1.getFeatures(initPolygons, autoLabelLines, hiddenAmenities).then(function (features) { return (result.features = features); }),
                     geo_1.getAmenities(amenityIdProperty).then(function (amenities) { return (result.amenities = amenities); }),
                 ];
                 return [4 /*yield*/, Promise.all(promises)];

package/lib/models/floor.d.ts

@@ -25,6 +25,7 @@ export declare class FloorModel extends BaseModel {
     editor?: FloorEditorModel;
     geopoint?: [number, number];
     remoteId?: string;
+    metadata?: object;
     constructor(data: any);
     get hasFloorplan(): boolean;
 }