@octostar/map-component 0.1.17 → 0.1.20

package/dist/index.mjs

@@ -6,7 +6,7 @@ import * as turf from "@turf/turf";
 import proj4 from "proj4";
 import * as THREE from "three";
 import { saveAs } from "file-saver";
-import { MousePointer2, Square, Hexagon, Circle, MoreVertical, ChevronDown, Filter, X, Ruler, Move, Navigation, Pencil, Database, Search, MapPin, Minus, Pentagon, Type, MoveRight, Undo2, Redo2, Trash2, Loader2, Home, Building2, Store, Factory, Warehouse, Church, Hospital, School, GraduationCap, Library, Landmark, Castle, Car, Bus, Train, Plane, Ship, Bike, Fuel, Utensils, Coffee, Beer, Wine, Pizza, IceCream, Trees, Mountain, Waves, Sun, Cloud, Umbrella, Flower2, Leaf, Heart, Star, Flag, AlertTriangle, Info, HelpCircle, CheckCircle, XCircle, PlusCircle, MinusCircle, Zap, Flame, Camera, Music, Film, Gamepad2, Trophy, Medal, Tent, Compass, Briefcase, Wrench, Hammer, Scissors, Paintbrush, Palette, ShoppingCart, Gift, Package, CreditCard, Wallet, Phone, Mail, Globe, Wifi, Radio, Tv, User, Users, Baby, Dog, Cat, Bird, Apple, Carrot, Egg, Anchor, Lock, Key, Shield, Eye, Clock, Calendar, Bookmark, Tag, Triangle, Octagon, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Map as Map$1, Satellite, MoreHorizontal, Upload, Download, FolderOpen, Focus, Box, Layers, ChevronRight, EyeOff, Smile, Plus, Save, Blend, SkipBack, Pause, Play, TestTube, GripVertical, FileJson, Check, AlertCircle } from "lucide-react";
+import { MousePointer2, Square, Hexagon, Circle, MoreVertical, ChevronDown, Filter, X, Ruler, Move, Navigation, Scan, Pencil, Database, Search, MapPin, Minus, Pentagon, Type, MoveRight, Undo2, Redo2, Trash2, Loader2, Home, Building2, Store, Factory, Warehouse, Church, Hospital, School, GraduationCap, Library, Landmark, Castle, Car, Bus, Train, Plane, Ship, Bike, Fuel, Utensils, Coffee, Beer, Wine, Pizza, IceCream, Trees, Mountain, Waves, Sun, Cloud, Umbrella, Flower2, Leaf, Heart, Star, Flag, AlertTriangle, Info, HelpCircle, CheckCircle, XCircle, PlusCircle, MinusCircle, Zap, Flame, Camera, Music, Film, Gamepad2, Trophy, Medal, Tent, Compass, Briefcase, Wrench, Hammer, Scissors, Paintbrush, Palette, ShoppingCart, Gift, Package, CreditCard, Wallet, Phone, Mail, Globe, Wifi, Radio, Tv, User, Users, Baby, Dog, Cat, Bird, Apple, Carrot, Egg, Anchor, Lock, Key, Shield, Eye, Clock, Calendar, Bookmark, Tag, Triangle, Octagon, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Map as Map$1, Satellite, MoreHorizontal, Upload, Download, FolderOpen, Focus, Box, Layers, ChevronRight, EyeOff, Smile, Plus, Save, Blend, SkipBack, Pause, Play, TestTube, GripVertical, FileJson, Check, AlertCircle } from "lucide-react";
 import { App, message, Tooltip, Dropdown, Button, Divider, Modal, Tabs, Input, Popover, Switch, Slider, Tag as Tag$1, Select, Collapse, ColorPicker, Card, Table, DatePicker } from "antd";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -110,6 +110,7 @@ function DrawingToolbar({
   onGoTo,
   onDropPoint,
   showGoToButton = false,
+  onFitToFeatures,
   isSelectionToolActive = true,
   onSelectionToolActiveChange,
   showClearFilter = false,
@@ -606,28 +607,45 @@ function DrawingToolbar({
           ),
           /* @__PURE__ */ jsx(Divider, { className: "!my-0.5 !min-w-0" })
         ] }),
-        onGoTo && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: "Go To",
-              placement: "right",
-              children: /* @__PURE__ */ jsx(
-                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__ */ jsx(Navigation, { className: "w-5 h-5" })
-                }
-              )
-            }
-          ),
-          !enableMeasurement && /* @__PURE__ */ jsx(Divider, { className: "!my-0.5 !min-w-0" })
-        ] }),
+        onGoTo && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: "Go To",
+            placement: "right",
+            children: /* @__PURE__ */ jsx(
+              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__ */ jsx(Navigation, { className: "w-5 h-5" })
+              }
+            )
+          }
+        ),
+        onFitToFeatures && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: "Fit to Data",
+            placement: "right",
+            children: /* @__PURE__ */ jsx(
+              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__ */ jsx(Scan, { className: "w-5 h-5" })
+              }
+            )
+          }
+        ),
+        (onGoTo || onFitToFeatures) && !enableMeasurement && /* @__PURE__ */ jsx(Divider, { className: "!my-0.5 !min-w-0" }),
         !selectionOnly && /* @__PURE__ */ jsx(
           Tooltip,
           {
@@ -8229,22 +8247,25 @@ const MapEditorCanvas = 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) {
@@ -8279,16 +8300,19 @@ const MapEditorCanvas = 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([]);
@@ -8334,16 +8358,19 @@ const MapEditorCanvas = 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);
       }
@@ -9218,18 +9245,24 @@ const MapEditorCanvas = forwardRef(function MapEditorCanvas2({
     }
   }, [onWorkspaceSave, toast]);
   const handleFitToFeatures = 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({
@@ -9245,7 +9278,8 @@ const MapEditorCanvas = forwardRef(function MapEditorCanvas2({
     const bbox = turf.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 = useCallback((e) => {
@@ -10097,7 +10131,7 @@ const MapEditorCanvas = 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,
@@ -10106,6 +10140,7 @@ const MapEditorCanvas = forwardRef(function MapEditorCanvas2({
           filterActiveRef.current = active;
         },
         showGoToButton,
+        onFitToFeatures: handleFitToFeatures,
         onDropPoint,
         geocodingUrl,
         geocoderProvider,