andoncloud-map-widget 1.0.4 → 1.0.6

package/dist/index.css

@@ -1,6 +1,20 @@
 @import '~leaflet/dist/leaflet.css';
 @import '~leaflet-draw/dist/leaflet.draw.css';
 
+@keyframes pulse {
+	0% {
+    stroke: #155ed1;
+	}
+
+	70% {
+    stroke: transparent;
+	}
+
+	100% {
+    stroke: #155ed1;
+	}
+}
+
 .leaflet-container {
   height: 100%;
 }
@@ -66,8 +80,15 @@
   padding: 0.5em 1em;
   font-weight: 600;
   color: white;
-  border-radius: 1em;
-  background: #333333;
+  box-shadow: none;
+  text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
+  border: none;
+  background: transparent;
+}
+
+.leaflet-path-draggable {
+  stroke-dasharray: 10;
+  animation: pulse 2s infinite;
 }
 
 .leaflet-contextmenu {

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.css","leaflet.contextmenu.css"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,6CAA6C;;AAE7C;EACE,YAAY;AACd;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,4BAA4B;EAC5B,cAAc;EACd,sCAAsC;EACtC,sBAAsB;AACxB;;AAEA;EACE,cAAc;EACd,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;EACE,aAAa;EACb,UAAU;EACV,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,oBAAoB;EACpB,yBAAyB;AAC3B;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,SAAS;EACT,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,6BAA6B;AAC/B;;AAEA;EACE,gBAAgB;EAChB,6BAA6B;AAC/B;;AAEA;EACE,kBAAkB;EAClB,gBAAgB;EAChB,YAAY;EACZ,kBAAkB;EAClB,mBAAmB;AACrB;;ACtEA;IACI,aAAa;IACb,qCAAqC;IAErC,kBAAkB;IAClB,cAAc;IACd,sBAAsB;IACtB,eAAe;IACf,yBAAyB;IACzB,sBAAsB;IACtB,iBAAiB;AACrB;;AAEA;IACI,cAAc;IACd,WAAW;IACX,eAAe;IACf,iBAAiB;IACjB,qBAAqB;IACrB,eAAe;IACf,iCAAiC;IACjC,oCAAoC;IACpC,eAAe;IACf,aAAa;AACjB;;AAEA;IACI,YAAY;AAChB;;AAEA;IACI,yBAAyB;IACzB,6BAA6B;IAC7B,gCAAgC;AACpC;;AAEA;IACI,yBAAyB;IACzB,iCAAiC;IACjC,oCAAoC;AACxC;;AAEA;IACI,mBAAmB;IACnB,WAAW;IACX,YAAY;IACZ,WAAW;IACX,SAAS;AACb;;AAEA;IACI,6BAA6B;IAC7B,aAAa;AACjB","file":"index.css","sourcesContent":["@import '~leaflet/dist/leaflet.css';\n@import '~leaflet-draw/dist/leaflet.draw.css';\n\n.leaflet-container {\n  height: 100%;\n}\n\n.leaflet-touch .leaflet-bar {\n  border: none;\n}\n\n.leaflet-bar a {\n  line-height: 27px !important;\n  color: #333333;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  background-color: #ccc;\n}\n\n.leaflet-bar a:hover {\n  color: #333333;\n  background-color: #ccc;\n  filter: opacity(0.9);\n}\n\n.leaflet-top {\n  display: flex;\n  width: 50%;\n  height: 50px;\n  background: #333333;\n}\n\n.leaflet-right {\n  display: inline-flex;\n  justify-content: flex-end;\n}\n\n.leaflet-control-attribution.leaflet-control {\n  display: none;\n}\n\n.leaflet-draw {\n  height: 100vh;\n  background: #333333;\n}\n\n.leaflet-draw.leaflet-control {\n  margin: 0;\n  margin-top: 50px;\n  padding: 10px;\n}\n\n.leaflet-control-zoom {\n  display: inline-flex;\n}\n\n.leaflet-control-zoom-in {\n  border-radius: 2px !important;\n}\n\n.leaflet-control-zoom-out {\n  margin-left: 2px;\n  border-radius: 2px !important;\n}\n\n.leaflet-tooltip {\n  padding: 0.5em 1em;\n  font-weight: 600;\n  color: white;\n  border-radius: 1em;\n  background: #333333;\n}\n",".leaflet-contextmenu {\n    display: none;\n    box-shadow: 0 1px 7px rgba(0,0,0,0.4);\n    -webkit-border-radius: 4px;\n    border-radius: 4px;\n    padding: 4px 0;\n    background-color: #fff;\n    cursor: default;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item {\n    display: block;\n    color: #222;\n    font-size: 12px;\n    line-height: 20px;\n    text-decoration: none;\n    padding: 0 12px;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n    cursor: default;\n    outline: none;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {\n    opacity: 0.5;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item.over {\n    background-color: #f4f4f4;\n    border-top: 1px solid #f0f0f0;\n    border-bottom: 1px solid #f0f0f0;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {\n    background-color: inherit;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n}\n\n.leaflet-contextmenu-icon {\n    margin: 2px 8px 0 0;\n    width: 16px;\n    height: 16px;\n    float: left;\n    border: 0;\n}\n\n.leaflet-contextmenu-separator {\n    border-bottom: 1px solid #ccc;\n    margin: 5px 0;\n}\n"]}
+{"version":3,"sources":["index.css","leaflet.contextmenu.css"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,6CAA6C;;AAE7C;CACC;IACG,eAAe;CAClB;;CAEA;IACG,mBAAmB;CACtB;;CAEA;IACG,eAAe;CAClB;AACD;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,YAAY;AACd;;AAEA;EACE,4BAA4B;EAC5B,cAAc;EACd,sCAAsC;EACtC,sBAAsB;AACxB;;AAEA;EACE,cAAc;EACd,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;EACE,aAAa;EACb,UAAU;EACV,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,oBAAoB;EACpB,yBAAyB;AAC3B;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,aAAa;EACb,mBAAmB;AACrB;;AAEA;EACE,SAAS;EACT,gBAAgB;EAChB,aAAa;AACf;;AAEA;EACE,oBAAoB;AACtB;;AAEA;EACE,6BAA6B;AAC/B;;AAEA;EACE,gBAAgB;EAChB,6BAA6B;AAC/B;;AAEA;EACE,kBAAkB;EAClB,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,yCAAyC;EACzC,YAAY;EACZ,uBAAuB;AACzB;;AAEA;EACE,oBAAoB;EACpB,4BAA4B;AAC9B;;AC3FA;IACI,aAAa;IACb,qCAAqC;IAErC,kBAAkB;IAClB,cAAc;IACd,sBAAsB;IACtB,eAAe;IACf,yBAAyB;IACzB,sBAAsB;IACtB,iBAAiB;AACrB;;AAEA;IACI,cAAc;IACd,WAAW;IACX,eAAe;IACf,iBAAiB;IACjB,qBAAqB;IACrB,eAAe;IACf,iCAAiC;IACjC,oCAAoC;IACpC,eAAe;IACf,aAAa;AACjB;;AAEA;IACI,YAAY;AAChB;;AAEA;IACI,yBAAyB;IACzB,6BAA6B;IAC7B,gCAAgC;AACpC;;AAEA;IACI,yBAAyB;IACzB,iCAAiC;IACjC,oCAAoC;AACxC;;AAEA;IACI,mBAAmB;IACnB,WAAW;IACX,YAAY;IACZ,WAAW;IACX,SAAS;AACb;;AAEA;IACI,6BAA6B;IAC7B,aAAa;AACjB","file":"index.css","sourcesContent":["@import '~leaflet/dist/leaflet.css';\n@import '~leaflet-draw/dist/leaflet.draw.css';\n\n@keyframes pulse {\n\t0% {\n    stroke: #155ed1;\n\t}\n\n\t70% {\n    stroke: transparent;\n\t}\n\n\t100% {\n    stroke: #155ed1;\n\t}\n}\n\n.leaflet-container {\n  height: 100%;\n}\n\n.leaflet-touch .leaflet-bar {\n  border: none;\n}\n\n.leaflet-bar a {\n  line-height: 27px !important;\n  color: #333333;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  background-color: #ccc;\n}\n\n.leaflet-bar a:hover {\n  color: #333333;\n  background-color: #ccc;\n  filter: opacity(0.9);\n}\n\n.leaflet-top {\n  display: flex;\n  width: 50%;\n  height: 50px;\n  background: #333333;\n}\n\n.leaflet-right {\n  display: inline-flex;\n  justify-content: flex-end;\n}\n\n.leaflet-control-attribution.leaflet-control {\n  display: none;\n}\n\n.leaflet-draw {\n  height: 100vh;\n  background: #333333;\n}\n\n.leaflet-draw.leaflet-control {\n  margin: 0;\n  margin-top: 50px;\n  padding: 10px;\n}\n\n.leaflet-control-zoom {\n  display: inline-flex;\n}\n\n.leaflet-control-zoom-in {\n  border-radius: 2px !important;\n}\n\n.leaflet-control-zoom-out {\n  margin-left: 2px;\n  border-radius: 2px !important;\n}\n\n.leaflet-tooltip {\n  padding: 0.5em 1em;\n  font-weight: 600;\n  color: white;\n  box-shadow: none;\n  text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);\n  border: none;\n  background: transparent;\n}\n\n.leaflet-path-draggable {\n  stroke-dasharray: 10;\n  animation: pulse 2s infinite;\n}\n",".leaflet-contextmenu {\n    display: none;\n    box-shadow: 0 1px 7px rgba(0,0,0,0.4);\n    -webkit-border-radius: 4px;\n    border-radius: 4px;\n    padding: 4px 0;\n    background-color: #fff;\n    cursor: default;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item {\n    display: block;\n    color: #222;\n    font-size: 12px;\n    line-height: 20px;\n    text-decoration: none;\n    padding: 0 12px;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n    cursor: default;\n    outline: none;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {\n    opacity: 0.5;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item.over {\n    background-color: #f4f4f4;\n    border-top: 1px solid #f0f0f0;\n    border-bottom: 1px solid #f0f0f0;\n}\n\n.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {\n    background-color: inherit;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n}\n\n.leaflet-contextmenu-icon {\n    margin: 2px 8px 0 0;\n    width: 16px;\n    height: 16px;\n    float: left;\n    border: 0;\n}\n\n.leaflet-contextmenu-separator {\n    border-bottom: 1px solid #ccc;\n    margin: 5px 0;\n}\n"]}

package/dist/index.js

@@ -614,11 +614,7 @@ function Trans(_ref) {
       defaultNSFromContext = _ref2.defaultNS;
 
   var i18n = i18nFromProps || i18nFromContext || getI18n();
-
-  var t = tFromProps || i18n.t.bind(i18n) || function (k) {
-    return k;
-  };
-
+  var t = tFromProps || i18n && i18n.t.bind(i18n);
   return Trans$1(_objectSpread$9({
     children: children,
     count: count,
@@ -629,7 +625,7 @@ function Trans(_ref) {
     values: values,
     defaults: defaults,
     components: components,
-    ns: ns || t.ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS,
+    ns: ns || t && t.ns || defaultNSFromContext || i18n && i18n.options && i18n.options.defaultNS,
     i18n: i18n,
     t: tFromProps,
     shouldUnescape: shouldUnescape
@@ -2298,6 +2294,7 @@ var Interpolator = function () {
       while (match = this.nestingRegexp.exec(str)) {
         var formatters = [];
         clonedOptions = _objectSpread$3({}, options);
+        clonedOptions = clonedOptions.replace && typeof clonedOptions.replace !== 'string' ? clonedOptions.replace : clonedOptions;
         clonedOptions.applyPostProcessor = false;
         delete clonedOptions.defaultValue;
         var doReduce = false;
@@ -3154,7 +3151,14 @@ var I18n = function (_EventEmitter) {
         options.ns = options.ns || fixedT.ns;
         options.keyPrefix = options.keyPrefix || keyPrefix || fixedT.keyPrefix;
         var keySeparator = _this5.options.keySeparator || '.';
-        var resultKey = options.keyPrefix ? "".concat(options.keyPrefix).concat(keySeparator).concat(key) : key;
+        var resultKey;
+        if (options.keyPrefix && Array.isArray(key)) {
+          resultKey = key.map(function (k) {
+            return "".concat(options.keyPrefix).concat(keySeparator).concat(k);
+          });
+        } else {
+          resultKey = options.keyPrefix ? "".concat(options.keyPrefix).concat(keySeparator).concat(key) : key;
+        }
         return _this5.t(resultKey, options);
       };
       if (typeof lng === 'string') {
@@ -4324,7 +4328,7 @@ function hasMultilineItems(maybeArray) {
   return maybeArray != null && maybeArray.some(isMultiline);
 }
 
-var LIBRARY_VERSION = '1.0.4';
+var LIBRARY_VERSION = '1.0.6';
 
 var SettingsFormContent = function SettingsFormContent(_ref) {
   var _data$floorPlans;
@@ -22251,6 +22255,9 @@ var Map$1 = function Map(_ref) {
   var _useState4 = React.useState(null),
     activeLayer = _useState4[0],
     setActiveLayer = _useState4[1];
+  var _useState5 = React.useState(false),
+    viewChanged = _useState5[0],
+    setViewChanged = _useState5[1];
   // use refs to provide current values to callbacks
   var updateFeatureRef = React.useRef();
   var onDrawCreatedRef = React.useRef();
@@ -22260,6 +22267,15 @@ var Map$1 = function Map(_ref) {
   var editModeRef = React.useRef(!!editMode);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  if (mapRef.current) {
+    var map = mapRef.current;
+    map.on('zoomend', function () {
+      setViewChanged(true);
+    });
+    map.on('moveend', function () {
+      setViewChanged(true);
+    });
+  }
   var createFeature = React.useCallback(function (feature) {
     try {
       var _temp2 = function () {
@@ -22405,7 +22421,10 @@ var Map$1 = function Map(_ref) {
   }, [data == null ? void 0 : data.workplaces]);
   var setControlsDisplay = React.useCallback(function (value) {
     if (featureGroup) {
-      document.getElementsByClassName('leaflet-control-container')[0].style['display'] = value ? 'block' : 'none';
+      var containers = document.getElementsByClassName('leaflet-control-container');
+      Array.from(containers).forEach(function (container) {
+        container.style['display'] = value ? 'block' : 'none';
+      });
     }
   }, [featureGroup]);
   var onDrawCreated = React.useCallback(function (layer) {
@@ -22481,15 +22500,9 @@ var Map$1 = function Map(_ref) {
     featureGroup == null ? void 0 : featureGroup.eachLayer(function (layer) {
       var tooltip = layer.getTooltip();
       if (layer === activeLayer) {
-        layer.setStyle({
-          color: '#155ed1'
-        });
         // @ts-ignore no typings
         layer.dragging.enable();
       } else {
-        layer.setStyle({
-          color: layer.options.fillColor
-        });
         // @ts-ignore no typings
         layer.dragging.disable();
         if (tooltip) {
@@ -22621,14 +22634,15 @@ var Map$1 = function Map(_ref) {
   };
   var saveMapView = function saveMapView() {
     try {
-      var map = mapRef.current;
+      var _map = mapRef.current;
       var _temp16 = function () {
-        if (map && updateSettings) {
+        if (_map && updateSettings) {
           return Promise.resolve(updateSettings({
-            zoom: map.getZoom(),
-            center: map.getCenter()
+            zoom: _map.getZoom(),
+            center: _map.getCenter()
           })).then(function () {
             setActiveLayer(null);
+            setViewChanged(false);
           });
         }
       }();
@@ -22667,15 +22681,19 @@ var Map$1 = function Map(_ref) {
     }, workplace.name);
   })), React__default["default"].createElement(MapContainer, {
     ref: mapRef,
-    bounds: [[height, 0], [0, width]],
     center: (settings == null ? void 0 : settings.center) || [width / 2, height / 2],
+    minZoom: 1,
+    maxZoom: 5,
     zoom: (settings == null ? void 0 : settings.zoom) || 1,
+    zoomSnap: 0.1,
+    zoomDelta: 0.1,
+    wheelPxPerZoomLevel: 600,
     zoomControl: false,
     doubleClickZoom: false,
     touchZoom: false
-  }, imageUrl && imageDimensions && React__default["default"].createElement(ImageOverlay, {
+  }, mapRef.current && imageUrl && imageDimensions && React__default["default"].createElement(ImageOverlay, {
     url: imageUrl,
-    bounds: [[height, 0], [0, height * (imageDimensions.height / imageDimensions.width)]]
+    bounds: new leafletSrc.LatLngBounds(mapRef.current.unproject([0, imageDimensions.height], 2), mapRef.current.unproject([imageDimensions.width, 0], 2))
   }), React__default["default"].createElement(FeatureGroup, {
     ref: function ref(featureGroup) {
       if (featureGroup) onFeatureGroupReady(featureGroup);
@@ -22741,7 +22759,8 @@ var Map$1 = function Map(_ref) {
     color: "primary",
     onClick: function onClick() {
       return saveMapView();
-    }
+    },
+    disabled: !viewChanged
   }, React__default["default"].createElement(Trans, {
     t: t
   }, "Freeze")))));
@@ -22832,7 +22851,8 @@ var Widget = function Widget(_ref) {
     data: widgetData,
     WidgetView: WidgetView,
     SettingsFormContent: SettingsFormContent,
-    version: LIBRARY_VERSION
+    version: LIBRARY_VERSION,
+    "data-testid": "map-widget"
   }, widgetProps));
 };