@octostar/map-component 0.1.17 → 0.1.20

package/dist/index.cjs

@@ -131,6 +131,7 @@ function DrawingToolbar({
   onGoTo,
   onDropPoint,
   showGoToButton = false,
+  onFitToFeatures,
   isSelectionToolActive = true,
   onSelectionToolActiveChange,
   showClearFilter = false,
@@ -627,28 +628,45 @@ function DrawingToolbar({
           ),
           /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { className: "!my-0.5 !min-w-0" })
         ] }),
-        onGoTo && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            antd.Tooltip,
-            {
-              title: "Go To",
-              placement: "right",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                antd.Button,
-                {
-                  type: "text",
-                  onClick: () => setGoToDialogOpen(true),
-                  disabled,
-                  className: "relative transition-all duration-150 flex items-center justify-center !w-9 !h-9 !min-w-0 !p-0",
-                  "aria-label": "Go To",
-                  "data-testid": "button-goto-address",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Navigation, { className: "w-5 h-5" })
-                }
-              )
-            }
-          ),
-          !enableMeasurement && /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { className: "!my-0.5 !min-w-0" })
-        ] }),
+        onGoTo && /* @__PURE__ */ jsxRuntime.jsx(
+          antd.Tooltip,
+          {
+            title: "Go To",
+            placement: "right",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              antd.Button,
+              {
+                type: "text",
+                onClick: () => setGoToDialogOpen(true),
+                disabled,
+                className: "relative transition-all duration-150 flex items-center justify-center !w-9 !h-9 !min-w-0 !p-0",
+                "aria-label": "Go To",
+                "data-testid": "button-goto-address",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Navigation, { className: "w-5 h-5" })
+              }
+            )
+          }
+        ),
+        onFitToFeatures && /* @__PURE__ */ jsxRuntime.jsx(
+          antd.Tooltip,
+          {
+            title: "Fit to Data",
+            placement: "right",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              antd.Button,
+              {
+                type: "text",
+                onClick: onFitToFeatures,
+                disabled,
+                className: "relative transition-all duration-150 flex items-center justify-center !w-9 !h-9 !min-w-0 !p-0",
+                "aria-label": "Fit to Data",
+                "data-testid": "button-fit-to-data",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Scan, { className: "w-5 h-5" })
+              }
+            )
+          }
+        ),
+        (onGoTo || onFitToFeatures) && !enableMeasurement && /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { className: "!my-0.5 !min-w-0" }),
         !selectionOnly && /* @__PURE__ */ jsxRuntime.jsx(
           antd.Tooltip,
           {
@@ -8250,22 +8268,25 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
           } catch (err) {
           }
         });
-        const finalIds = e.shiftKey ? Array.from(/* @__PURE__ */ new Set([...selectedFeatureIdsRef.current, ...selectedIds])) : selectedIds;
-        applySelectionState(finalIds, { focusProperties: true });
         const isFilterAction = filterActiveRef.current || !showFilterTool;
-        if (onSelectionComplete && isFilterAction) {
-          onSelectionComplete(selectionPolygon.geometry);
+        if (isFilterAction) {
+          if (onSelectionComplete) {
+            onSelectionComplete(selectionPolygon.geometry);
+          }
+          if (persistSelection) {
+            setPersistedSelectionPolygon([
+              [minLng, maxLat],
+              [maxLng, maxLat],
+              [maxLng, minLat],
+              [minLng, minLat],
+              [minLng, maxLat]
+            ]);
+          }
+        } else {
+          const finalIds = e.shiftKey ? Array.from(/* @__PURE__ */ new Set([...selectedFeatureIdsRef.current, ...selectedIds])) : selectedIds;
+          applySelectionState(finalIds, { focusProperties: true });
         }
         setIsSelectionToolActive(false);
-        if (persistSelection && isFilterAction) {
-          setPersistedSelectionPolygon([
-            [minLng, maxLat],
-            [maxLng, maxLat],
-            [maxLng, minLat],
-            [minLng, minLat],
-            [minLng, maxLat]
-          ]);
-        }
         startPoint = null;
         setSelectionPoints([]);
       } else if (selectionMode === "circle" && isDrawingSelection.current && startPoint) {
@@ -8300,16 +8321,19 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
             } catch (err) {
             }
           });
-          const finalIds = e.shiftKey ? Array.from(/* @__PURE__ */ new Set([...selectedFeatureIdsRef.current, ...selectedIds])) : selectedIds;
-          applySelectionState(finalIds, { focusProperties: true });
           const isFilterAction = filterActiveRef.current || !showFilterTool;
-          if (onSelectionComplete && isFilterAction) {
-            onSelectionComplete(selectionPolygon.geometry);
+          if (isFilterAction) {
+            if (onSelectionComplete) {
+              onSelectionComplete(selectionPolygon.geometry);
+            }
+            if (persistSelection) {
+              setPersistedSelectionPolygon(selectionPolygon.geometry.coordinates[0]);
+            }
+          } else {
+            const finalIds = e.shiftKey ? Array.from(/* @__PURE__ */ new Set([...selectedFeatureIdsRef.current, ...selectedIds])) : selectedIds;
+            applySelectionState(finalIds, { focusProperties: true });
           }
           setIsSelectionToolActive(false);
-          if (persistSelection && isFilterAction) {
-            setPersistedSelectionPolygon(selectionPolygon.geometry.coordinates[0]);
-          }
         }
         startPoint = null;
         setSelectionPoints([]);
@@ -8355,16 +8379,19 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
           } catch (err) {
           }
         });
-        const finalIds = e.shiftKey ? Array.from(/* @__PURE__ */ new Set([...selectedFeatureIdsRef.current, ...selectedIds])) : selectedIds;
-        applySelectionState(finalIds, { focusProperties: true });
         const isFilterAction = filterActiveRef.current || !showFilterTool;
-        if (onSelectionComplete && isFilterAction) {
-          onSelectionComplete(selectionPolygon.geometry);
+        if (isFilterAction) {
+          if (onSelectionComplete) {
+            onSelectionComplete(selectionPolygon.geometry);
+          }
+          if (persistSelection) {
+            setPersistedSelectionPolygon(closedPoints);
+          }
+        } else {
+          const finalIds = e.shiftKey ? Array.from(/* @__PURE__ */ new Set([...selectedFeatureIdsRef.current, ...selectedIds])) : selectedIds;
+          applySelectionState(finalIds, { focusProperties: true });
         }
         setIsSelectionToolActive(false);
-        if (persistSelection && isFilterAction) {
-          setPersistedSelectionPolygon(closedPoints);
-        }
         setSelectionPoints([]);
         setSelectionHoverPoint(null);
       }
@@ -9239,18 +9266,24 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
     }
   }, [onWorkspaceSave, toast]);
   const handleFitToFeatures = react.useCallback(() => {
-    if (!map.current || !draw.current) return;
+    if (!map.current) return;
     const allFeatures = [];
-    layers.forEach((layer) => {
-      if (layer.visible) {
-        layer.featureIds.forEach((id) => {
-          const f = draw.current.get(id);
-          if (f) allFeatures.push(f);
-        });
-      } else {
-        const hidden = hiddenFeatures.current.get(layer.id) || [];
-        allFeatures.push(...hidden);
-      }
+    if (draw.current) {
+      layers.forEach((layer) => {
+        if (layer.visible) {
+          layer.featureIds.forEach((id) => {
+            const f = draw.current.get(id);
+            if (f) allFeatures.push(f);
+          });
+        } else {
+          const hidden = hiddenFeatures.current.get(layer.id) || [];
+          allFeatures.push(...hidden);
+        }
+      });
+    }
+    readOnlyFeatures.current.forEach((features, lid) => {
+      const layer = layersRef.current.find((l) => l.id === lid);
+      if (!layer || layer.visible) allFeatures.push(...features);
     });
     if (allFeatures.length === 0) {
       toast({
@@ -9266,7 +9299,8 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
     const bbox = turf__namespace.bbox(fc);
     map.current.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], {
       padding: 80,
-      maxZoom: 16
+      maxZoom: 16,
+      duration: 1e3
     });
   }, [layers, toast]);
   const handleFileChange = react.useCallback((e) => {
@@ -10118,7 +10152,7 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
         onGoTo: (coords, zoom) => {
           if (map.current) {
             const currentZoom = map.current.getZoom();
-            map.current.flyTo({ center: coords, zoom: zoom ?? Math.max(currentZoom, 14), duration: 2e3 });
+            map.current.flyTo({ center: coords, zoom: zoom ?? Math.max(currentZoom, 20), duration: 2e3 });
           }
         },
         showClearFilter,
@@ -10127,6 +10161,7 @@ const MapEditorCanvas = react.forwardRef(function MapEditorCanvas2({
           filterActiveRef.current = active;
         },
         showGoToButton,
+        onFitToFeatures: handleFitToFeatures,
         onDropPoint,
         geocodingUrl,
         geocoderProvider,