andoncloud-map-widget 1.0.0 → 1.0.2

package/dist/index.js

@@ -4324,7 +4324,7 @@ function hasMultilineItems(maybeArray) {
   return maybeArray != null && maybeArray.some(isMultiline);
 }
 
-var LIBRARY_VERSION = '1.0.0';
+var LIBRARY_VERSION = '1.0.2';
 
 var SettingsFormContent = function SettingsFormContent(_ref) {
   var _data$floorPlans;
@@ -19992,6 +19992,89 @@ L.Path.addInitHook(function () {
 
 L.Path.Drag;
 
+var getImageSize_1 = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageSize = void 0;
+const getImageSize = (url, options = {}) => {
+    return new Promise((resolve, reject) => {
+        if (typeof window === 'undefined') {
+            return reject('Window is not defined');
+        }
+        if (!url) {
+            return reject('Url is not defined');
+        }
+        let timer = null;
+        const img = new Image();
+        img.addEventListener('load', () => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        });
+        img.addEventListener('error', (event) => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            reject(`${event.type}: ${event.message}`);
+        });
+        img.src = url;
+        if (options.timeout) {
+            timer = setTimeout(() => reject('Timeout'), options.timeout);
+        }
+    });
+};
+exports.getImageSize = getImageSize;
+});
+
+var useImageSize_1 = createCommonjsModule(function (module, exports) {
+var __awaiter = (commonjsGlobal && commonjsGlobal.__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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageSize = void 0;
+
+
+const useImageSize = (url, options) => {
+    const [dimensions, setDimensions] = (0, React__default["default"].useState)(null);
+    const [loading, setLoading] = (0, React__default["default"].useState)(false);
+    const [error, setError] = (0, React__default["default"].useState)(null);
+    (0, React__default["default"].useEffect)(() => {
+        const fetch = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            setDimensions(null);
+            try {
+                const { width, height } = yield (0, getImageSize_1.getImageSize)(url, options);
+                setDimensions({ width, height });
+            }
+            catch (error) {
+                setError(error.toString());
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        fetch();
+    }, [url, options]);
+    return [dimensions, { loading, error }];
+};
+exports.useImageSize = useImageSize;
+});
+
+var lib = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageSize = exports.getImageSize = void 0;
+
+Object.defineProperty(exports, "getImageSize", { enumerable: true, get: function () { return getImageSize_1.getImageSize; } });
+
+Object.defineProperty(exports, "useImageSize", { enumerable: true, get: function () { return useImageSize_1.useImageSize; } });
+});
+
 function useAttribution(map, attribution) {
     const attributionRef = React.useRef(attribution);
     React.useEffect(function updateAttribution() {
@@ -22146,7 +22229,7 @@ function v4(options, buf, offset) {
 
 var cloneLayer = require('leaflet-clonelayer');
 var Map$1 = function Map(_ref) {
-  var _activeLayer$feature, _data$workplaces2, _data$floorPlans, _data$floorPlans$find;
+  var _activeLayer$feature, _data$workplaces2;
   var data = _ref.data,
     settings = _ref.settings,
     updateSettings = _ref.updateSettings,
@@ -22156,12 +22239,18 @@ var Map$1 = function Map(_ref) {
   var _useSize = useSize$1(containerRef),
     width = _useSize[0],
     height = _useSize[1];
-  var _useState = React.useState(null),
-    featureGroup = _useState[0],
-    setFeatureGroup = _useState[1];
+  var _useState = React.useState(),
+    imageUrl = _useState[0],
+    setImageUrl = _useState[1];
   var _useState2 = React.useState(null),
-    activeLayer = _useState2[0],
-    setActiveLayer = _useState2[1];
+    imageDimensions = _useState2[0],
+    setImageDimensions = _useState2[1];
+  var _useState3 = React.useState(null),
+    featureGroup = _useState3[0],
+    setFeatureGroup = _useState3[1];
+  var _useState4 = React.useState(null),
+    activeLayer = _useState4[0],
+    setActiveLayer = _useState4[1];
   // use refs to provide current values to callbacks
   var updateFeatureRef = React.useRef();
   var onDrawCreatedRef = React.useRef();
@@ -22406,6 +22495,18 @@ var Map$1 = function Map(_ref) {
       }
     });
   }, [activeLayer, featureGroup]);
+  React.useEffect(function () {
+    var _data$floorPlans, _data$floorPlans$find;
+    var imageUrl = (_data$floorPlans = data.floorPlans) == null ? void 0 : (_data$floorPlans$find = _data$floorPlans.find(function (floorPlan) {
+      return floorPlan.id === (settings == null ? void 0 : settings.floorPlanId);
+    })) == null ? void 0 : _data$floorPlans$find.imageUrl;
+    if (imageUrl) {
+      setImageUrl(imageUrl);
+      lib.getImageSize(imageUrl).then(function (dimensions) {
+        return setImageDimensions(dimensions);
+      })["catch"](function () {});
+    }
+  }, [data == null ? void 0 : data.floorPlans, settings == null ? void 0 : settings.floorPlanId]);
   React.useEffect(function () {
     var getCurrentStatusChange = function getCurrentStatusChange(workplaceId) {
       return ((data == null ? void 0 : data.statusChanges) || []).filter(function (statusChange) {
@@ -22485,7 +22586,7 @@ var Map$1 = function Map(_ref) {
     if (!featureGroup) {
       var geoJSON = new leafletSrc.GeoJSON({
         type: 'FeatureCollection',
-        features: settings == null ? void 0 : settings.features
+        features: (settings == null ? void 0 : settings.features) || []
       }, {
         onEachFeature: function onEachFeature(_, layer) {
           bindEvents(layer);
@@ -22562,15 +22663,15 @@ var Map$1 = function Map(_ref) {
     }, workplace.name);
   })), React__default["default"].createElement(MapContainer, {
     ref: mapRef,
-    bounds: [[0, 0], [width, height]],
+    bounds: [[height, 0], [0, width]],
     center: (settings == null ? void 0 : settings.center) || [width / 2, height / 2],
     zoom: (settings == null ? void 0 : settings.zoom) || 1,
-    zoomControl: false
-  }, (settings == null ? void 0 : settings.floorPlanId) && React__default["default"].createElement(ImageOverlay, {
-    url: ((_data$floorPlans = data.floorPlans) == null ? void 0 : (_data$floorPlans$find = _data$floorPlans.find(function (floorPlan) {
-      return floorPlan.id === settings.floorPlanId;
-    })) == null ? void 0 : _data$floorPlans$find.imageUrl) || '',
-    bounds: [[0, 0], [width, height]]
+    zoomControl: false,
+    doubleClickZoom: false,
+    touchZoom: false
+  }, imageUrl && imageDimensions && React__default["default"].createElement(ImageOverlay, {
+    url: imageUrl,
+    bounds: [[height, 0], [0, height * (imageDimensions.height / imageDimensions.width)]]
   }), React__default["default"].createElement(FeatureGroup, {
     ref: function ref(featureGroup) {
       if (featureGroup) onFeatureGroupReady(featureGroup);