add polyline

client/package-lock.json

@@ -12,6 +12,9 @@
         "@aws-sdk/credential-provider-cognito-identity": "^3.509.0",
         "@aws-sdk/s3-request-presigner": "^3.509.0",
         "@aws-sdk/util-endpoints": "^3.509.0",
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/sortable": "^8.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.3.4",
@@ -19,7 +22,9 @@
         "cesium": "^1.134.1",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
-        "resium": "^1.19.0-beta.1"
+        "react-router-dom": "^6.25.1",
+        "resium": "^1.19.0-beta.1",
+        "shp-write": "^0.3.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -1437,6 +1442,59 @@
         "node": ">=20.19.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
+      "integrity": "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -2636,6 +2694,15 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -4286,6 +4353,15 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/dbf": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/dbf/-/dbf-0.1.4.tgz",
+      "integrity": "sha512-7tQ8w5NB74PL1f0Z/NQ6Y+URjBFhtEsFxzEQSzot2+VpLwWfrNnxFVhzWm6dJyEtFq0WkYWcGEMDf39fy8JFaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jdataview": "~2.5.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -5189,6 +5265,11 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jdataview": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/jdataview/-/jdataview-2.5.0.tgz",
+      "integrity": "sha512-ZJop3D5nyDcWPBPv4NPnhCvx3HgQNsCXMfw8gpNKY16BobgxmVF+kJ08aHuqk6bJQVeL2mkf6nDCcZPMompalw=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5282,6 +5363,21 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jszip": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-2.5.0.tgz",
+      "integrity": "sha512-IRoyf8JSYY3nx+uyh5xPc0qdy8pUDTp2UkHOWYNF/IO/3D8nx7899UlSAjD8rf8wUgOmm0lACWx/GbW3EaxIXQ==",
+      "license": "MIT or GPLv3",
+      "dependencies": {
+        "pako": "~0.2.5"
+      }
+    },
+    "node_modules/jszip/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/kdbush": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
@@ -5938,6 +6034,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6181,6 +6309,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/shp-write": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/shp-write/-/shp-write-0.3.2.tgz",
+      "integrity": "sha512-RNmfm+qzIwgwGMiV21lCxfEAtgP/owAd+sHLr6Qu+aDR1bbrCZ42H89nA9FQWUqfL+WHJy3n8+cTZxJrL/ZKWA==",
+      "deprecated": "This package has moved under the @mapbox organization, and can be found here: https://www.npmjs.com/package/@mapbox/shp-write",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dbf": "0.1.4",
+        "jszip": "2.5.0"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",

client/package.json

@@ -22,7 +22,10 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "resium": "^1.19.0-beta.1",
-    "react-router-dom": "^6.25.1"
+    "react-router-dom": "^6.25.1",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

client/src/components/CesiumViewer.jsx

@@ -6,9 +6,8 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from "react";
-import { Viewer } from "resium";
+import { Viewer, Entity, PolylineGraphics, PolygonGraphics } from "resium";
 import * as Cesium from "cesium";
-import { Entity } from "resium";
 import { Cartesian3, Color, Matrix3, Quaternion, PolygonHierarchy } from "cesium";
 
 // Cesium Ion token is safe to embed in client code (not a secret)
@@ -205,27 +204,41 @@ const CesiumViewer = forwardRef(
     polygons,
     onPointSelectForDrawing,
     selectedGeometry,
+    previewPointId,
   }, ref) => {
     const viewerRef = useRef(null);
     const currentModeRef = useRef("default"); // keep internal mode
     const [measurements, setMeasurements] = useState([]);
+    const measurementIdCounter = useRef(0);
     const tilesetRef = useRef(null);
 
+    // Refs to hold the latest props that change frequently.
+    // This prevents the main `useEffect` from re-running unnecessarily, which would
+    // cause the entire 3D scene to reload when points are added or drawing mode changes.
+    const pointsRef = useRef(points);
+    useEffect(() => { pointsRef.current = points; }, [points]);
+
+    const drawingStateRef = useRef(drawingState);
+    useEffect(() => { drawingStateRef.current = drawingState; }, [drawingState]);
+
+    // Use a ref to hold the latest onPointSelectForDrawing callback to avoid re-running the main effect.
+    const onPointSelectForDrawingRef = useRef(onPointSelectForDrawing);
+    useEffect(() => { onPointSelectForDrawingRef.current = onPointSelectForDrawing; }, [onPointSelectForDrawing]);
+
+
     const addMeausure = (cameraPosition, cartesian) => {
-      setMeasurements((prev) => {
-        const id = prev.length + 1; // compute id based on latest state
-        const newMeasurement = {
-          id,
-          camera: {
-            x: cameraPosition.x,
-            y: cameraPosition.y,
-            z: cameraPosition.z,
-          },
-          point: { x: cartesian.x, y: cartesian.y, z: cartesian.z },
-        };
-        console.log("Adding measure:", newMeasurement);
-        return [...prev, newMeasurement];
-      });
+      measurementIdCounter.current += 1;
+      const newMeasurement = {
+        id: measurementIdCounter.current,
+        camera: {
+          x: cameraPosition.x,
+          y: cameraPosition.y,
+          z: cameraPosition.z,
+        },
+        point: { x: cartesian.x, y: cartesian.y, z: cartesian.z },
+      };
+      console.log("Adding measure:", newMeasurement);
+      setMeasurements((prev) => [...prev, newMeasurement]);
     };
     // Expose a function to parent
     useImperativeHandle(ref, () => ({
@@ -267,6 +280,7 @@ const CesiumViewer = forwardRef(
         }
         currentModeRef.current = "default";
         setMeasurements([]);
+        measurementIdCounter.current = 0;
       },
     }));
 
@@ -459,24 +473,32 @@ const CesiumViewer = forwardRef(
         // Set up mouse event handler
         handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 
+        // Prevent the default double-click behavior which zooms into the point
+        // and can cause a "matrix is not invertible" crash.
         handler.setInputAction((click) => {
-          const currentMode = currentModeRef.current;
-
-          if (currentMode === 'polyline' || currentMode === 'polygon') {
-            // Pick position on the 3D model or globe
-            const position = viewer.scene.pickPosition(click.position);
-            if (Cesium.defined(position)) {
-              const carto = Cesium.Cartographic.fromCartesian(position);
-              const newPoint = {
-                x: position.x,
-                y: position.y,
-                z: position.z,
-                lon: Cesium.Math.toDegrees(carto.longitude),
-                lat: Cesium.Math.toDegrees(carto.latitude),
-                alt: carto.height,
-              };
-              onPointSelectForDrawing(newPoint);
+          // Explicitly set the tracked entity to undefined to fully disable
+          // the default camera flight behavior on double-click, which can
+          // cause the rendering to crash.
+          viewer.trackedEntity = undefined;
+        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+        handler.setInputAction((click) => {
+          const { mode: drawingMode } = drawingStateRef.current;
+
+          if (drawingMode === 'polyline' || drawingMode === 'polygon') {
+            const viewer = viewerRef.current.cesiumElement;
+            
+            // 1. Try to pick an existing point entity
+            const pickedObject = viewer.scene.pick(click.position);
+            if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && typeof pickedObject.id.id === 'string' && pickedObject.id.id.startsWith('point_')) {
+              const pointId = parseInt(pickedObject.id.id.split('_')[1], 10);
+              const point = pointsRef.current.find(p => p.id === pointId);
+              if (point) {
+                onPointSelectForDrawingRef.current(point);
+              }
             }
+
+            // After attempting to pick a point, stop further click processing for this mode.
             return;
           }
 
@@ -519,14 +541,14 @@ const CesiumViewer = forwardRef(
           tilesetRef.current = null;
         }
       };
-    }, [tilesetUrl, offsetHeight, onPointSelectForDrawing]);
+    }, [tilesetUrl, offsetHeight]);
 
     return (
       <Viewer ref={viewerRef} full infoBox={false} selectionIndicator={false}>
         {points.map((pt) => {
           const isSelectedForInspection = selectedPoint === pt.id;
-          const isSelectedForBuilding = false; // buildingPoints.some(bp => bp.id === pt.id);
-          const isPreviewed = false; // previewPointId === pt.id;
+          const isSelectedForGeometry = drawingState.points.some(p => p.id === pt.id);
+          const isPreviewed = previewPointId === pt.id;
 
           let ellipsoidColor = Color.BLUE.withAlpha(0.5);
           let pointColor = Color.WHITE;
@@ -538,7 +560,7 @@ const CesiumViewer = forwardRef(
             pointColor = Color.CYAN;
             pixelSize = 16;
             scale = 0.3;
-          } else if (isSelectedForBuilding) {
+          } else if (isSelectedForGeometry) {
             ellipsoidColor = Color.ORANGE.withAlpha(0.7);
             pointColor = Color.ORANGE;
             pixelSize = 12;
@@ -564,7 +586,7 @@ const CesiumViewer = forwardRef(
                   outlineColor: Color.BLACK,
                   outlineWidth: 2,
                   // Disable depth test when highlighted to ensure visibility
-                  disableDepthTestDistance: isSelectedForBuilding || isPreviewed || isSelectedForInspection ? Number.POSITIVE_INFINITY : 0,
+                  disableDepthTestDistance: isSelectedForGeometry || isPreviewed || isSelectedForInspection ? Number.POSITIVE_INFINITY : 0,
                 }}
               />
             );
@@ -581,12 +603,12 @@ const CesiumViewer = forwardRef(
           const isSelected = selectedGeometry?.type === 'polyline' && selectedGeometry?.id === line.id;
           return (
             <Entity key={line.id} id={line.id}>
-              <polyline
+              <PolylineGraphics
                 positions={line.points.map(p => new Cartesian3(p.x, p.y, p.z))}
                 width={isSelected ? 5 : 3}
                 material={isSelected ? Color.CYAN : Color.YELLOW}
                 clampToGround={false}
-                zIndex={1}
+                disableDepthTestDistance={Number.POSITIVE_INFINITY}
               />
             </Entity>
           );
@@ -595,14 +617,20 @@ const CesiumViewer = forwardRef(
         {/* Render completed polygons */}
         {polygons.map(poly => {
           const isSelected = selectedGeometry?.type === 'polygon' && selectedGeometry?.id === poly.id;
+          const polylinePositions = [...poly.points.map(p => new Cartesian3(p.x, p.y, p.z)), new Cartesian3(poly.points[0].x, poly.points[0].y, poly.points[0].z)];
           return (
             <Entity key={poly.id} id={poly.id}>
-              <polygon
+              {/* The fill, which can be occluded to prevent "floating" */}
+              <PolygonGraphics
                 hierarchy={new PolygonHierarchy(poly.points.map(p => new Cartesian3(p.x, p.y, p.z)))}
                 material={isSelected ? Color.CYAN.withAlpha(0.5) : Color.ORANGE.withAlpha(0.5)}
-                outline={true}
-                outlineColor={isSelected ? Color.CYAN : Color.BLACK}
-                outlineWidth={isSelected ? 3 : 1}
+              />
+              {/* The outline, which is always on top for visibility */}
+              <PolylineGraphics
+                positions={polylinePositions}
+                width={isSelected ? 3 : 1.5}
+                material={isSelected ? Color.CYAN : Color.BLACK}
+                disableDepthTestDistance={Number.POSITIVE_INFINITY}
               />
             </Entity>
           );
@@ -611,22 +639,26 @@ const CesiumViewer = forwardRef(
         {/* Render the geometry being currently drawn */}
         {drawingState.mode === 'polyline' && drawingState.points.length > 0 && (
           <Entity>
-            <polyline
+            <PolylineGraphics
               positions={drawingState.points.map(p => new Cartesian3(p.x, p.y, p.z))}
               width={3}
               material={Color.RED.withAlpha(0.7)}
+              disableDepthTestDistance={Number.POSITIVE_INFINITY}
             />
           </Entity>
         )}
         {drawingState.mode === 'polygon' && drawingState.points.length > 0 && (
           <Entity>
-            <polyline
+            <PolylineGraphics
               positions={[...drawingState.points, drawingState.points[0]].map(p => new Cartesian3(p.x, p.y, p.z))}
               width={3}
               material={Color.RED.withAlpha(0.7)}
+              disableDepthTestDistance={Number.POSITIVE_INFINITY}
             />
             {drawingState.points.length > 2 && (
-              <polygon hierarchy={new PolygonHierarchy(drawingState.points.map(p => new Cartesian3(p.x, p.y, p.z)))} material={Color.RED.withAlpha(0.3)} />
+              <PolygonGraphics
+                hierarchy={new PolygonHierarchy(drawingState.points.map(p => new Cartesian3(p.x, p.y, p.z)))}
+                material={Color.RED.withAlpha(0.3)} />
             )}
           </Entity>
         )}

client/src/components/GeometryCreatorPanel.jsx

@@ -0,0 +1,221 @@
+import React, { useMemo } from 'react';
+import {
+  Card, CardContent, CardActions, Button, Typography, List, ListItem,
+  ListItemText, ListItemSecondaryAction, IconButton, Divider, Box, ListItemButton,
+  ListItemIcon
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+// A new component for the sortable list item, using dnd-kit hooks
+function SortablePointItem({ point, index, onPreviewPoint, onPointSelect }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: String(point.id) });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 100 : 'auto', // Ensure dragging item is on top
+  };
+
+  return (
+    <ListItem
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      onMouseEnter={() => onPreviewPoint(point.id || 0)}
+      onMouseLeave={() => onPreviewPoint(0)}
+      sx={{
+        cursor: 'grab',
+        touchAction: 'none',
+        bgcolor: isDragging ? 'action.hover' : 'transparent',
+      }}
+    >
+      <ListItemIcon sx={{ minWidth: 'auto', pr: 1 }}>
+        <DragIndicatorIcon fontSize="small" />
+      </ListItemIcon>
+      <ListItemText primary={`Point ${point.id}`} secondary={`(${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}, ${point.alt.toFixed(2)})`} />
+      <ListItemSecondaryAction><IconButton edge="end" aria-label="delete" onClick={() => onPointSelect(point)}><DeleteIcon /></IconButton></ListItemSecondaryAction>
+    </ListItem>
+  );
+}
+
+export default function GeometryCreatorPanel({
+  isOpen,
+  drawingState,
+  onCancel,
+  onFinish,
+  onPointSelect, // To remove a point from the list
+  onPreviewPoint,
+  // For the available points list
+  availablePoints,
+  multiSelectPoints,
+  onAvailablePointClick,
+  onAddMultiSelectedPoints,
+  onClearPoints,
+  onReorderPoints,
+}) {
+  if (!isOpen) {
+    return null;
+  }
+
+  const { mode, points: selectedPoints } = drawingState;
+  const title = mode === 'polyline' ? 'Create Polyline' : 'Create Polygon';
+  const finishText = mode === 'polyline' ? 'Finish Polyline' : 'Finish Polygon';
+  const minPoints = mode === 'polyline' ? 2 : 3;
+
+  const availablePointsToShow = useMemo(() => {
+    const selectedIds = new Set(selectedPoints.map(p => p.id));
+    return availablePoints.filter(p => !selectedIds.has(p.id));
+  }, [availablePoints, selectedPoints]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      // Require the mouse to move by a few pixels before activating
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = selectedPoints.findIndex(p => String(p.id) === active.id);
+      const newIndex = selectedPoints.findIndex(p => String(p.id) === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        onReorderPoints(oldIndex, newIndex);
+      }
+    }
+  }
+
+  return (
+    <Card
+      sx={{
+        position: 'absolute',
+        top: 80,
+        right: 20,
+        width: 400,
+        zIndex: 1000,
+        boxShadow: 5,
+        borderRadius: 2,
+      }}
+    >
+      <CardContent>
+        <Typography variant="h6" gutterBottom>{title}</Typography>
+        <Typography variant="body2" color="textSecondary" gutterBottom>
+          Select existing measured points from the 3D view or the list below.
+        </Typography>
+        
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
+          <Typography variant="h6" gutterBottom component="div" sx={{ mb: 0 }}>
+            Selected Points ({selectedPoints.length})
+          </Typography>
+          {selectedPoints.length > 0 && (
+            <Button 
+                onClick={onClearPoints}
+                size="small"
+                color="error"
+            >
+                Clear All
+            </Button>
+          )}
+        </Box>
+
+        {selectedPoints.length === 0 ? (
+            <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>No points selected yet.</Typography>
+        ) : (
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext items={selectedPoints.map(p => String(p.id))} strategy={verticalListSortingStrategy}>
+              <List dense sx={{ maxHeight: 150, overflow: "auto" }}>
+                {selectedPoints.map((point, index) => (
+                  <SortablePointItem
+                    key={point.id}
+                    point={point}
+                    index={index}
+                    onPreviewPoint={onPreviewPoint}
+                    onPointSelect={onPointSelect}
+                  />
+                ))}
+              </List>
+            </SortableContext>
+          </DndContext>
+        )}
+
+        <Divider style={{ margin: '16px 0' }} />
+
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography variant="h6" gutterBottom component="div">
+            Available Measured Points
+          </Typography>
+          <Button 
+              onClick={onAddMultiSelectedPoints}
+              disabled={multiSelectPoints.length === 0}
+              size="small"
+              variant="outlined"
+          >
+              Add Selected ({multiSelectPoints.length})
+          </Button>
+        </Box>
+        <List dense style={{ maxHeight: 200, overflow: 'auto' }}>
+            {availablePointsToShow.map((point) => (
+              <ListItemButton
+                key={point.id}
+                onClick={(event) => onAvailablePointClick(event, point.id)}
+                selected={multiSelectPoints.includes(point.id)}
+                onMouseEnter={() => onPreviewPoint(point.id)}
+                onMouseLeave={() => onPreviewPoint(0)}
+                sx={{
+                  borderRadius: 1,
+                  "&.Mui-selected": {
+                    bgcolor: "primary.light",
+                    color: "primary.contrastText",
+                    "&:hover": { bgcolor: "primary.main" },
+                  },
+                }}
+              >
+                  <ListItemText primary={`Point ${point.id}`} />
+              </ListItemButton>
+            ))}
+            {availablePointsToShow.length === 0 && (
+              <ListItem>
+                <ListItemText primary="No other measured points available." />
+              </ListItem>
+            )}
+        </List>
+
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'flex-end', p: 2 }}>
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button variant="contained" onClick={onFinish} disabled={selectedPoints.length < minPoints} >
+              {finishText}
+          </Button>
+      </CardActions>
+    </Card>
+  );
+}

client/src/components/MeasurePanel.jsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import {
   Card, CardContent, Typography, Button, List, ListItemButton,
   ListItemText, Divider, Stack, FormControl, InputLabel, Select,
-  MenuItem, TextField, Dialog, DialogTitle, DialogContent,
+  MenuItem, Menu, TextField, Dialog, DialogTitle, DialogContent, ToggleButton,
+  ToggleButtonGroup,
   DialogActions, Tabs, Tab, Box
 } from "@mui/material";
 import DownloadIcon from "@mui/icons-material/Download";
@@ -46,6 +47,43 @@ function a11yProps(index) {
   };
 }
 
+function ExportMenu({ onExport, disabled }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSelect = (format) => {
+    onExport(format);
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        startIcon={<DownloadIcon />}
+        onClick={handleClick}
+        disabled={disabled}
+        fullWidth
+      >
+        Export
+      </Button>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        <MenuItem onClick={() => handleSelect('geojson')}>As GeoJSON (.json)</MenuItem>
+        <MenuItem onClick={() => handleSelect('csv')}>As CSV (.csv)</MenuItem>
+        <MenuItem onClick={() => handleSelect('kml')}>As KML (.kml)</MenuItem>
+      </Menu>
+    </>
+  );
+}
+
 export default function MeasurePanel({
   points,
   onSelectPoint,
@@ -109,20 +147,6 @@ export default function MeasurePanel({
     setSelectedIndex(nextIndex);
     if (onSelectPoint) onSelectPoint(points[index]);
   };
-  const handleDeletePoint = () => {
-    if (onDeletePoint) onDeletePoint();
-  };
-  const handleExport = () => {
-    const dataStr =
-      "data:text/json;charset=utf-8," +
-      encodeURIComponent(JSON.stringify(points, null, 2));
-    const downloadAnchorNode = document.createElement("a");
-    downloadAnchorNode.setAttribute("href", dataStr);
-    downloadAnchorNode.setAttribute("download", "measured_points.json");
-    document.body.appendChild(downloadAnchorNode); // required for firefox
-    downloadAnchorNode.click();
-    downloadAnchorNode.remove();
-  };
 
   const openCustomDialog = () => {
     setDraftCustomModel(customModel || DEFAULT_CUSTOM_MODEL);
@@ -292,18 +316,22 @@ export default function MeasurePanel({
             ))}
           </List>
           <Stack spacing={1} sx={{ mt: 1 }}>
-            <FormControl size="small" fullWidth>
-              <InputLabel id="point-appearance-label">Appearance</InputLabel>
-              <Select
-                labelId="point-appearance-label"
-                value={pointAppearance}
-                label="Appearance"
-                onChange={(e) => onPointAppearanceChange(e.target.value)}
-              >
-                <MenuItem value="ellipsoid">Error Ellipsoid</MenuItem>
-                <MenuItem value="point">Simple Point</MenuItem>
-              </Select>
-            </FormControl>
+            <ToggleButtonGroup
+              value={pointAppearance}
+              exclusive
+              fullWidth
+              size="small"
+              onChange={(event, newAppearance) => {
+                // Prevent unselecting all buttons
+                if (newAppearance !== null) {
+                  onPointAppearanceChange(newAppearance);
+                }
+              }}
+              aria-label="point appearance"
+            >
+              <ToggleButton value="ellipsoid" sx={{ flex: 1 }}>Error Ellipsoid</ToggleButton>
+              <ToggleButton value="point" sx={{ flex: 1 }}>Simple Point</ToggleButton>
+            </ToggleButtonGroup>
             <Button
               variant="contained"
               color={measuring ? "error" : "primary"}
@@ -313,21 +341,12 @@ export default function MeasurePanel({
               {measuring ? "End Measure" : "Start Measure"}
             </Button>
             <Stack direction="row" spacing={1}>
-              <Button
-                variant="outlined"
-                color="primary"
-                startIcon={<DownloadIcon />}
-                onClick={() => handleExport()}
-                disabled={points.length === 0}
-                fullWidth
-              >
-                Export
-              </Button>
+              <ExportMenu onExport={(format) => onExportGeometries('point', format)} disabled={points.length === 0} />
               <Button
                 variant="outlined"
                 color="error"
                 startIcon={<DeleteIcon />}
-                onClick={() => handleDeletePoint()}
+                onClick={onDeletePoint}
                 disabled={selectedIndex === null}
                 fullWidth
               >
@@ -362,13 +381,7 @@ export default function MeasurePanel({
               </ListItemButton>
             ))}
           </List>
-          {drawingState.mode === 'polyline' ? (
-            <Stack direction="row" spacing={1} sx={{ mt: 2 }}>
-              <Button variant="contained" onClick={onFinishDrawing} fullWidth>Finish Drawing</Button>
-              <Button variant="outlined" color="error" onClick={onCancelDrawing} fullWidth>Cancel</Button>
-            </Stack>
-          ) : (
-            <Stack spacing={1} sx={{ mt: 2 }}>
+          <Stack spacing={1} sx={{ mt: 2 }}>
               <Button
                 variant="contained"
                 startIcon={<AddIcon />}
@@ -378,15 +391,7 @@ export default function MeasurePanel({
                 Create Polyline
               </Button>
               <Stack direction="row" spacing={1}>
-                <Button
-                  variant="outlined"
-                  startIcon={<DownloadIcon />}
-                  onClick={() => onExportGeometries('polyline')}
-                  disabled={polylines.length === 0}
-                  fullWidth
-                >
-                  Export
-                </Button>
+                <ExportMenu onExport={(format) => onExportGeometries('polyline', format)} disabled={polylines.length === 0} />
                 <Button
                   variant="outlined"
                   color="error"
@@ -399,7 +404,6 @@ export default function MeasurePanel({
                 </Button>
               </Stack>
             </Stack>
-          )}
         </TabPanel>
 
         <TabPanel value={tabIndex} index={2}>
@@ -427,13 +431,7 @@ export default function MeasurePanel({
               </ListItemButton>
             ))}
           </List>
-          {drawingState.mode === 'polygon' ? (
-            <Stack direction="row" spacing={1} sx={{ mt: 2 }}>
-              <Button variant="contained" onClick={onFinishDrawing} fullWidth>Finish Drawing</Button>
-              <Button variant="outlined" color="error" onClick={onCancelDrawing} fullWidth>Cancel</Button>
-            </Stack>
-          ) : (
-            <Stack spacing={1} sx={{ mt: 2 }}>
+          <Stack spacing={1} sx={{ mt: 2 }}>
               <Button
                 variant="contained"
                 startIcon={<AddIcon />}
@@ -443,7 +441,7 @@ export default function MeasurePanel({
                 Create Polygon
               </Button>
               <Stack direction="row" spacing={1}>
-                <Button variant="outlined" startIcon={<DownloadIcon />} onClick={() => onExportGeometries('polygon')} disabled={polygons.length === 0} fullWidth>Export</Button>
+                <ExportMenu onExport={(format) => onExportGeometries('polygon', format)} disabled={polygons.length === 0} />
                 <Button
                   variant="outlined"
                   color="error"
@@ -456,7 +454,6 @@ export default function MeasurePanel({
                 </Button>
               </Stack>
             </Stack>
-          )}
         </TabPanel>
       </CardContent>
 

client/src/pages/Home.jsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import CesiumViewer from "../components/CesiumViewer";
 import MeasurePanel from "../components/MeasurePanel";
+import GeometryCreatorPanel from "../components/GeometryCreatorPanel";
 import { getDefaultBucket, validateAwsConfig, AWS_REGION } from "../utils/awsConfig";
 import { getApiUrl, fetchWithAuth } from "../utils/apiConfig";
 import { recordVisit } from "../utils/visitorTracking";
@@ -8,7 +9,6 @@ import {
   Dialog, DialogTitle, DialogContent, DialogActions, Button,
   TextField, Stack
 } from "@mui/material";
-import * as shp from 'shp-write';
 
 
 // Models configured to use AWS Cognito authentication
@@ -67,6 +67,19 @@ function buildTilesetUrl(model) {
   return s3Key;
 }
 
+function downloadFile(content, fileName, contentType) {
+  const blob = new Blob([content], { type: contentType });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.style.display = 'none';
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(url);
+  a.remove();
+}
+
 export default function Home() {
   // AWS configuration validation
   useEffect(() => {
@@ -106,6 +119,10 @@ export default function Home() {
   const [polygons, setPolygons] = useState([]);
   const [selectedGeometry, setSelectedGeometry] = useState(null); // { type: 'polyline' | 'polygon', id: string | number }
   const geometryIdCounter = useRef(0);
+  
+  // --- State for the Geometry Creator Panel ---
+  const [previewPointId, setPreviewPointId] = useState(0);
+  const [multiSelectPoints, setMultiSelectPoints] = useState([]);
   const models = useMemo(
     () => [
       ...BASE_MODELS,
@@ -174,11 +191,11 @@ export default function Home() {
   const [selectedPoint, setSelectedPoint] = useState(0);
   const [pointAppearance, setPointAppearance] = useState("ellipsoid"); // 'ellipsoid' or 'point'
 
-  const handleAddPoint = (point) => {
+  const handleAddPoint = useCallback((point) => {
     maxPointId.current += 1;
     console.log("New 3D point added:", point);
     setPoints((prev) => [...prev, { ...point, id: maxPointId.current }]);
-  };
+  }, []);
 
   const handleMeasureClick = () => {
     if (!cesiumRef.current) return;
@@ -216,16 +233,17 @@ export default function Home() {
     setDrawingState({ mode, points: [] });
     setSelectedPoint(0); // Deselect any points
     setSelectedGeometry(null); // Deselect any geometry
-    cesiumRef.current?.setMode(mode); // Tell viewer to expect drawing clicks
+    setMultiSelectPoints([]); // Reset multi-select
   };
 
   const handleCancelDrawing = () => {
     setDrawingState({ mode: 'none', points: [] });
-    cesiumRef.current?.setMode('default');
+    setMultiSelectPoints([]);
+    setPreviewPointId(0);
   };
 
   const handleFinishDrawing = () => {
-    const { mode, points } = drawingState;
+    const { mode, points: geometryPoints } = drawingState;
     if (mode === 'none') {
       handleCancelDrawing();
       return;
@@ -235,26 +253,78 @@ export default function Home() {
     const newId = `${mode}-${geometryIdCounter.current}`;
 
     if (mode === 'polyline') {
-      if (points.length < 2) {
+      if (geometryPoints.length < 2) {
         alert("A polyline requires at least 2 points.");
         return;
       }
-      const newPolyline = { id: newId, points };
+      const newPolyline = { id: newId, points: geometryPoints };
       setPolylines(prev => [...prev, newPolyline]);
     } else if (mode === 'polygon') {
-      if (points.length < 3) {
+      if (geometryPoints.length < 3) {
         alert("A polygon requires at least 3 points.");
         return;
       }
-      const newPolygon = { id: newId, points };
+      const newPolygon = { id: newId, points: geometryPoints };
       setPolygons(prev => [...prev, newPolygon]);
     }
 
     handleCancelDrawing();
   };
 
-  const handlePointSelectForDrawing = (point) => {
-    setDrawingState(prev => ({ ...prev, points: [...prev.points, point] }));
+  const handlePointSelectForGeometry = useCallback((point) => {
+    // Since we only select existing points, they will always have an ID.
+    setDrawingState(prev => {
+      const isAlreadyAdded = prev.points.some(p => p.id === point.id);
+      if (isAlreadyAdded) {
+        // Remove the point if it's already in the list
+        return { ...prev, points: prev.points.filter(p => p.id !== point.id) };
+      } else {
+        // Add the point
+        return { ...prev, points: [...prev.points, point] };
+      }
+    });
+  }, []);
+
+  const handleAvailablePointClick = (event, pointId) => {
+    const isCtrlOrMeta = event.ctrlKey || event.metaKey;
+
+    setMultiSelectPoints(prev => {
+        if (isCtrlOrMeta) {
+            if (prev.includes(pointId)) {
+                return prev.filter(id => id !== pointId);
+            } else {
+                return [...prev, pointId];
+            }
+        } else {
+            if (prev.length === 1 && prev[0] === pointId) {
+                return [];
+            } else {
+                return [pointId];
+            }
+        }
+    });
+  };
+
+  const handleAddMultiSelectedPoints = () => {
+      const pointsToAdd = points.filter(p => multiSelectPoints.includes(p.id));
+      setDrawingState(prev => {
+        const newPoints = pointsToAdd.filter(p => !prev.points.some(dp => dp.id === p.id));
+        return { ...prev, points: [...prev.points, ...newPoints] };
+      });
+      setMultiSelectPoints([]); // Clear selection after adding
+  };
+
+  const handleClearGeometryPoints = () => {
+    setDrawingState(prev => ({ ...prev, points: [] }));
+  };
+
+  const handleReorderGeometryPoints = (oldIndex, newIndex) => {
+    setDrawingState(prev => {
+      const items = Array.from(prev.points);
+      const [reorderedItem] = items.splice(oldIndex, 1);
+      items.splice(newIndex, 0, reorderedItem);
+      return { ...prev, points: items };
+    });
   };
 
   const handleSelectGeometry = (type, id) => {
@@ -275,33 +345,79 @@ export default function Home() {
     setSelectedGeometry(null);
   };
 
-  const handleExportGeometries = (type) => {
-    const geometries = type === 'polyline' ? polylines : polygons;
+  const handleExportGeometries = (type, format) => {
+    let geometries;
+    const fileName = `measurements_${type}`;
+
+    if (type === 'point') {
+      geometries = points;
+    } else {
+      geometries = type === 'polyline' ? polylines : polygons;
+    }
+
     if (geometries.length === 0) {
       alert(`No ${type}s to export.`);
       return;
     }
-    
-    const geojson = {
-      type: 'FeatureCollection',
-      features: geometries.map(geom => ({
-        type: 'Feature',
-        geometry: {
-          type: type === 'polyline' ? 'LineString' : 'Polygon',
-          // For polygons, GeoJSON requires the first and last point to be the same.
-          coordinates: type === 'polygon' 
-            ? [[...geom.points.map(p => [p.lon, p.lat, p.alt]), [geom.points[0].lon, geom.points[0].lat, geom.points[0].alt]]]
-            : geom.points.map(p => [p.lon, p.lat, p.alt]),
-        },
-        properties: { id: geom.id }
-      }))
-    };
 
-    try {
-      shp.download(geojson, { folder: `measurements_${type}`, types: { line: type, polygon: type } });
-    } catch (e) {
-      console.error("Error exporting to shapefile:", e);
-      alert("Failed to export shapefile. See console for details.");
+    // --- GeoJSON is the common base for some formats ---
+    const geojson = type === 'point'
+      ? {
+          type: 'FeatureCollection',
+          features: geometries.map(p => ({
+            type: 'Feature',
+            geometry: { type: 'Point', coordinates: [p.lon, p.lat, p.alt] },
+            properties: { id: p.id, accuracy: p.accuracy }
+          }))
+        }
+      : { // polyline or polygon
+          type: 'FeatureCollection',
+          features: geometries.map(geom => ({
+            type: 'Feature',
+            geometry: {
+              type: type === 'polyline' ? 'LineString' : 'Polygon',
+              coordinates: type === 'polygon'
+                ? [[...geom.points.map(p => [p.lon, p.lat, p.alt]), [geom.points[0].lon, geom.points[0].lat, geom.points[0].alt]]]
+                : geom.points.map(p => [p.lon, p.lat, p.alt]),
+            },
+            properties: { id: geom.id }
+          }))
+        };
+
+    // --- Format-specific logic ---
+    if (format === 'geojson') {
+      const dataStr = JSON.stringify(geojson, null, 2);
+      downloadFile(dataStr, `${fileName}.geojson`, 'application/json');
+    } else if (format === 'csv') {
+      let csvContent = '';
+      if (type === 'point') {
+        csvContent = 'id,lon,lat,alt,accuracy\n';
+        geometries.forEach(p => {
+          csvContent += `${p.id},${p.lon},${p.lat},${p.alt},${p.accuracy}\n`;
+        });
+      } else { // polyline or polygon
+        csvContent = 'geometry_id,point_order,lon,lat,alt\n';
+        geometries.forEach(geom => {
+          geom.points.forEach((p, index) => {
+            csvContent += `${geom.id},${index + 1},${p.lon},${p.lat},${p.alt}\n`;
+          });
+        });
+      }
+      downloadFile(csvContent, `${fileName}.csv`, 'text/csv;charset=utf-8;');
+    } else if (format === 'kml') {
+      const placemarks = geometries.map(geom => {
+        const name = type === 'point' ? `Point ${geom.id}` : geom.id;
+        const points = type === 'point' ? [geom] : geom.points;
+        const coords = points.map(p => `${p.lon},${p.lat},${p.alt}`).join(' ');
+        let geometryString;
+        if (type === 'point') geometryString = `<Point><coordinates>${coords}</coordinates></Point>`;
+        else if (type === 'polyline') geometryString = `<LineString><coordinates>${coords}</coordinates></LineString>`;
+        else if (type === 'polygon') geometryString = `<Polygon><outerBoundaryIs><LinearRing><coordinates>${coords} ${points[0].lon},${points[0].lat},${points[0].alt}</coordinates></LinearRing></outerBoundaryIs></Polygon>`;
+        return `<Placemark><name>${name}</name>${geometryString || ''}</Placemark>`;
+      }).join('\n    ');
+
+      const kmlContent = `<?xml version="1.0" encoding="UTF-8"?>\n<kml xmlns="http://www.opengis.net/kml/2.2">\n  <Document>\n    <name>${fileName}</name>\n    ${placemarks}\n  </Document>\n</kml>`;
+      downloadFile(kmlContent, `${fileName}.kml`, 'application/vnd.google-earth.kml+xml');
     }
   };
 
@@ -437,8 +553,9 @@ export default function Home() {
         drawingState={drawingState}
         polylines={polylines}
         polygons={polygons}
-        onPointSelectForDrawing={handlePointSelectForDrawing}
+        onPointSelectForDrawing={handlePointSelectForGeometry}
         selectedGeometry={selectedGeometry}
+        previewPointId={previewPointId}
       />
 
       {/* MUI Overlay */}
@@ -517,6 +634,22 @@ export default function Home() {
         </DialogActions>
       </Dialog>
 
+      <GeometryCreatorPanel
+        isOpen={drawingState.mode !== 'none'}
+        drawingState={drawingState}
+        onCancel={handleCancelDrawing}
+        onFinish={handleFinishDrawing}
+        onPointSelect={handlePointSelectForGeometry}
+        onPreviewPoint={setPreviewPointId}
+        // Props for available points list
+        availablePoints={points}
+        multiSelectPoints={multiSelectPoints}
+        onAvailablePointClick={handleAvailablePointClick}
+        onAddMultiSelectedPoints={handleAddMultiSelectedPoints}
+        onClearPoints={handleClearGeometryPoints}
+        onReorderPoints={handleReorderGeometryPoints}
+      />
+
     </div>
   );
 }