@zurigo/maps 1.0.6 → 1.0.8

package/dist/components/google-maps.js

@@ -9,48 +9,71 @@ const solar_panel_calculator_1 = require("../lib/solar-panel-calculator");
 // Drawing constraints
 const MIN_ZOOM_FOR_DRAWING = 1; // Minimum zoom level to allow drawing (effectively disabled)
 const DEFAULT_MAX_AREA_LIMIT = 20000; // Default maximum area in m² for drawn shapes
+// Color constants
+const COLORS = {
+    // Shape colors
+    SHAPE_DEFAULT: "#f97316", // Bright orange - default state
+    SHAPE_SELECTED: "#dc2626", // Red - selected state
+    SHAPE_DRAWING: "#f97316", // Dark orange - drawing state
+    // Panel visualization colors
+    PANEL_FILL: "#fbbf24", // Golden yellow - panel fill
+    PANEL_STROKE: "#f59e0b", // Orange - panel stroke
+};
 // Shape styles
 const RECTANGLE_STYLES = {
     default: {
-        fillColor: "#1e40af",
+        fillColor: COLORS.SHAPE_DEFAULT,
         fillOpacity: 0.3,
-        strokeColor: "#1e40af",
+        strokeColor: COLORS.SHAPE_DEFAULT,
         strokeWeight: 3,
     },
     selected: {
-        fillColor: "#dc2626",
+        fillColor: COLORS.SHAPE_SELECTED,
         fillOpacity: 0.6,
-        strokeColor: "#dc2626",
+        strokeColor: COLORS.SHAPE_SELECTED,
         strokeWeight: 5,
     },
 };
 const POLYGON_STYLES = {
     default: {
-        fillColor: "#059669",
+        fillColor: COLORS.SHAPE_DEFAULT,
         fillOpacity: 0.3,
-        strokeColor: "#059669",
+        strokeColor: COLORS.SHAPE_DEFAULT,
         strokeWeight: 2,
     },
     selected: {
-        fillColor: "#dc2626",
+        fillColor: COLORS.SHAPE_SELECTED,
         fillOpacity: 0.5,
-        strokeColor: "#dc2626",
+        strokeColor: COLORS.SHAPE_SELECTED,
         strokeWeight: 3,
     },
 };
 const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center, zoom, onMapLoad, className = "w-full h-full", animateToLocation = true, showMeasurements = false, clearTrigger, existingPolygons, readOnly = false, region = "korea", maxAreaLimit = DEFAULT_MAX_AREA_LIMIT, }) => {
+    // Text translations based on region
+    const texts = {
+        drawRectangle: region === "china" ? "Draw Rectangle" : "사각형으로 그리기",
+        drawPolygon: region === "china" ? "Draw Polygon" : "다각형으로 그리기",
+        panels: region === "china" ? "panels" : "개 패널",
+        areaTooLarge: region === "china"
+            ? "Shape is too large. Maximum allowed area is"
+            : "도형이 너무 큽니다. 최대 허용 면적은",
+        currentArea: region === "china" ? "Current area:" : "현재 면적:",
+    };
     const mapRef = (0, react_1.useRef)(null);
-    const drawingManagerRef = (0, react_1.useRef)(null);
     const polygonsRef = (0, react_1.useRef)([]);
     const rectanglesRef = (0, react_1.useRef)([]);
     const measurementLabelsRef = (0, react_1.useRef)([]);
     const spacingWarningOverlaysRef = (0, react_1.useRef)([]);
     const capacityLabelsRef = (0, react_1.useRef)([]);
     const panelLayoutOverlaysRef = (0, react_1.useRef)([]); // 패널 레이아웃 오버레이용
+    const shapePanelMapRef = (0, react_1.useRef)(new WeakMap()); // 각 도형별 패널 추적
+    const shapeCapacityLabelMapRef = (0, react_1.useRef)(new WeakMap()); // 각 도형별 용량 라벨 추적
     const rotationHandleRef = (0, react_1.useRef)(null);
     const selectedRectangleRef = (0, react_1.useRef)(null);
     const selectedPolygonRef = (0, react_1.useRef)(null);
     const rotationListenerRef = (0, react_1.useRef)(null);
+    const startPointMarkerRef = (0, react_1.useRef)(null);
+    const vertexMarkersRef = (0, react_1.useRef)([]);
     const currentShapeRef = (0, react_1.useRef)(null);
     const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
     const [previousCenter, setPreviousCenter] = (0, react_1.useState)(center);
@@ -59,6 +82,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
     const [undoStack, setUndoStack] = (0, react_1.useState)([]);
     const [redoStack, setRedoStack] = (0, react_1.useState)([]);
     const [isRotating, setIsRotating] = (0, react_1.useState)(false);
+    const [activeDrawingMode, setActiveDrawingMode] = (0, react_1.useState)(null);
     // Suppress unused variable warning - redoStack is for future undo/redo implementation
     void redoStack;
     const mapOptions = (0, config_1.getMapOptions)(region, Object.assign({ center,
@@ -74,7 +98,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
     const { map, isLoaded, error } = (0, google_maps_1.useGoogleMap)(mapRef, Object.assign(Object.assign({}, mapOptions), { onMapLoad: (mapInstance) => {
             // readOnly 모드가 아닐 때만 Drawing Manager 초기화
             if (!readOnly) {
-                initializeDrawingManager(mapInstance);
+                initializeDrawing(mapInstance);
                 // Add map click listener to deselect shapes
                 mapInstance.addListener("click", () => {
                     // Add a small delay to allow shape click events to fire first
@@ -136,7 +160,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                 polygonsRef.current.push(polygon);
                 // Add capacity label if capacity data exists
                 if (polygonData.capacity && polygonData.centroid) {
-                    addExistingPolygonCapacityLabel(polygonData.centroid, polygonData.capacity, map, polygonData.geometry);
+                    addExistingPolygonCapacityLabel(polygon, polygonData.centroid, polygonData.capacity, map, polygonData.geometry);
                 }
                 // Add panel layout visualization for existing polygon
                 const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
@@ -151,243 +175,505 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         // Google Maps Geometry API를 사용한 간단한 면적 계산
         return google.maps.geometry.spherical.computeArea(path);
     };
-    const initializeDrawingManager = (mapInstance) => {
-        var _a, _b;
-        if (!((_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.drawing))
+    // Shared draw options for both preview and final shapes (mirrors the old
+    // DrawingManager polygonOptions / rectangleOptions).
+    const getPolygonDrawOptions = () => ({
+        fillColor: COLORS.SHAPE_DRAWING,
+        fillOpacity: 0.3,
+        strokeWeight: 3,
+        strokeColor: COLORS.SHAPE_DEFAULT,
+        strokeOpacity: 1.0,
+        zIndex: 1,
+        clickable: true,
+        draggable: true,
+        editable: false,
+    });
+    const getRectangleDrawOptions = () => ({
+        fillColor: COLORS.SHAPE_DRAWING,
+        fillOpacity: 0.3,
+        strokeWeight: 3,
+        strokeColor: COLORS.SHAPE_DEFAULT,
+        strokeOpacity: 1.0,
+        zIndex: 1,
+        clickable: true,
+        draggable: true,
+        editable: false,
+    });
+    // Post-completion wiring for a finished polygon. Identical behaviour to the
+    // old `polygoncomplete` listener body — only the shape's *creation* changed.
+    const finalizePolygon = (polygon, mapInstance) => {
+        // 먼저 간단한 면적 체크
+        const polygonPath = polygon.getPath();
+        const pathArray = [];
+        for (let i = 0; i < polygonPath.getLength(); i++) {
+            pathArray.push(polygonPath.getAt(i));
+        }
+        const simpleArea = calculateSimpleArea(pathArray);
+        // Check maximum area limit first (before heavy calculations)
+        if (simpleArea > maxAreaLimit) {
+            polygon.setMap(null);
+            alert(`${texts.areaTooLarge} ${maxAreaLimit.toLocaleString()}m².\n${texts.currentArea} ${simpleArea.toFixed(1).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}m²`);
             return;
-        const drawingModes = [
-            google.maps.drawing.OverlayType.POLYGON,
-            google.maps.drawing.OverlayType.RECTANGLE,
-        ];
-        const drawingManager = new google.maps.drawing.DrawingManager({
-            drawingMode: null, // Start with no drawing mode active
-            drawingControl: true, // Always show the drawing controls
-            drawingControlOptions: {
-                position: google.maps.ControlPosition.TOP_CENTER,
-                drawingModes: drawingModes,
-            },
-            polygonOptions: {
-                fillColor: "#10b981",
-                fillOpacity: 0.3,
-                strokeWeight: 3,
-                strokeColor: "#059669",
-                zIndex: 1,
-                clickable: true,
-                draggable: true,
-                editable: false,
-            },
-            rectangleOptions: {
-                fillColor: "#3b82f6",
-                fillOpacity: 0.3,
-                strokeWeight: 3,
-                strokeColor: "#1e40af",
-                zIndex: 1,
-                clickable: true,
-                draggable: true,
-                editable: false,
-            },
+        }
+        // Store polygon reference
+        polygonsRef.current.push(polygon);
+        // Add click listener for selection
+        polygon.addListener("click", (event) => {
+            event.stop();
+            selectPolygonWithMap(polygon, mapInstance);
         });
-        drawingManager.setMap(mapInstance);
-        drawingManagerRef.current = drawingManager;
-        // Add zoom level listener to control drawing availability
-        const updateDrawingControls = () => {
-            const currentZoom = mapInstance.getZoom() || 0;
-            if (currentZoom < MIN_ZOOM_FOR_DRAWING) {
-                // Disable drawing controls and exit any active drawing mode
-                drawingManager.setDrawingMode(null);
-                drawingManager.setOptions({
-                    drawingControl: false,
-                });
+        // Track dragging state to disable path listeners during drag
+        let isDragging = false;
+        polygon.addListener("dragstart", () => {
+            isDragging = true;
+            removeRotationHandle();
+            clearShapePanelOverlays(polygon);
+            clearShapeCapacityLabel(polygon);
+        });
+        polygon.addListener("dragend", () => {
+            isDragging = false;
+            if (selectedPolygon === polygon) {
+                setTimeout(() => {
+                    addRotationHandle(polygon, mapInstance);
+                }, 50);
             }
-            else {
-                // Enable drawing controls
-                drawingManager.setOptions({
-                    drawingControl: true,
-                });
+            clearCapacityLabels();
+            clearPanelLayoutOverlays();
+            refreshAllLabelsAndVisualizationsWithCalculation(mapInstance);
+        });
+        // Add path change listeners for real-time editing
+        const path = polygon.getPath();
+        const handlePathChange = () => {
+            if (isDragging)
+                return;
+            savePolygonState(polygon);
+            onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(polygon);
+            const targetMap = polygon.getMap();
+            if (targetMap) {
+                clearCapacityLabels();
+                clearPanelLayoutOverlays();
+                if (showMeasurements) {
+                    clearMeasurements();
+                }
+                refreshAllLabelsAndVisualizationsWithCalculation(targetMap);
             }
         };
-        // Initial check
-        updateDrawingControls();
-        // Listen for zoom changes
-        mapInstance.addListener("zoom_changed", updateDrawingControls);
-        drawingManager.addListener("polygoncomplete", (polygon) => {
-            drawingManager.setDrawingMode(null);
-            // 먼저 간단한 면적 체크
-            const polygonPath = polygon.getPath();
-            const pathArray = [];
-            for (let i = 0; i < polygonPath.getLength(); i++) {
-                pathArray.push(polygonPath.getAt(i));
-            }
+        path.addListener("set_at", handlePathChange);
+        path.addListener("insert_at", handlePathChange);
+        path.addListener("remove_at", handlePathChange);
+        // 한 번만 계산하여 모든 작업 수행
+        const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
+        addPolygonCapacityLabelWithLayoutInfo(polygon, layoutInfo, layoutInfo.capacity, mapInstance);
+        addPanelLayoutVisualizationWithLayoutInfo(polygon, layoutInfo, mapInstance);
+        if (showMeasurements) {
+            addPolygonMeasurementsWithLayoutInfo(polygon, layoutInfo, layoutInfo.capacity, mapInstance);
+        }
+        onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygon);
+        // Auto-select the newly created polygon immediately
+        selectPolygonWithMap(polygon, mapInstance);
+    };
+    // Post-completion wiring for a finished rectangle. Identical behaviour to the
+    // old `rectanglecomplete` listener body.
+    const finalizeRectangle = (rectangle, mapInstance) => {
+        // 먼저 간단한 면적 체크
+        const rectBounds = rectangle.getBounds();
+        if (rectBounds) {
+            const ne = rectBounds.getNorthEast();
+            const sw = rectBounds.getSouthWest();
+            const nw = new google.maps.LatLng(ne.lat(), sw.lng());
+            const se = new google.maps.LatLng(sw.lat(), ne.lng());
+            const pathArray = [sw, nw, ne, se];
             const simpleArea = calculateSimpleArea(pathArray);
-            // Check maximum area limit first (before heavy calculations)
             if (simpleArea > maxAreaLimit) {
-                // Remove the polygon immediately
-                polygon.setMap(null);
-                // Show error message
-                alert(`도형이 너무 큽니다. 최대 허용 면적은 ${maxAreaLimit.toLocaleString()}m²입니다.\n현재 면적: ${simpleArea
+                rectangle.setMap(null);
+                alert(`${texts.areaTooLarge} ${maxAreaLimit.toLocaleString()}m².\n${texts.currentArea} ${simpleArea
                     .toFixed(1)
                     .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}m²`);
-                return; // Exit early without processing
+                return;
             }
-            // Store polygon reference
-            polygonsRef.current.push(polygon);
-            // Add click listener for selection
-            polygon.addListener("click", (event) => {
-                event.stop(); // Prevent map click event
-                selectPolygonWithMap(polygon, mapInstance);
-            });
-            // Add drag listeners to hide/show rotation handle
-            polygon.addListener("dragstart", () => {
-                removeRotationHandle();
-            });
-            polygon.addListener("dragend", () => {
-                if (selectedPolygon === polygon) {
-                    setTimeout(() => {
-                        addRotationHandle(polygon, mapInstance);
-                    }, 50);
-                }
-                // 기존 레이블들 제거하고 새로 그리기
-                clearCapacityLabels();
-                clearPanelLayoutOverlays();
-                refreshAllLabelsAndVisualizationsWithCalculation(mapInstance);
-            });
-            // Add path change listeners for real-time editing
-            const path = polygon.getPath();
-            const handlePathChange = () => {
-                savePolygonState(polygon);
-                onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(polygon);
-                const targetMap = polygon.getMap();
+        }
+        // Store rectangle reference
+        rectanglesRef.current.push(rectangle);
+        rectangle.addListener("click", (event) => {
+            event.stop();
+            selectRectangleWithMap(rectangle, mapInstance);
+        });
+        rectangle.addListener("dragstart", () => {
+            removeRotationHandle();
+            clearShapePanelOverlays(rectangle);
+            clearShapeCapacityLabel(rectangle);
+        });
+        rectangle.addListener("dragend", () => {
+            if (selectedRectangle === rectangle) {
+                setTimeout(() => {
+                    addRotationHandle(rectangle, mapInstance);
+                }, 50);
+            }
+            clearCapacityLabels();
+            clearPanelLayoutOverlays();
+            refreshAllLabelsAndVisualizationsWithCalculation(mapInstance);
+        });
+        rectangle.addListener("bounds_changed", () => {
+            saveRectangleState(rectangle);
+            const bounds = rectangle.getBounds();
+            if (bounds) {
+                const ne = bounds.getNorthEast();
+                const sw = bounds.getSouthWest();
+                const nw = new google.maps.LatLng(ne.lat(), sw.lng());
+                const se = new google.maps.LatLng(sw.lat(), ne.lng());
+                const polygonFromRect = new google.maps.Polygon({
+                    paths: [sw, nw, ne, se],
+                });
+                onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(polygonFromRect);
+                const targetMap = rectangle.getMap();
                 if (targetMap) {
-                    // 한 번만 계산
-                    const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
-                    // 기존 레이블들 제거하고 새로 그리기
                     clearCapacityLabels();
                     clearPanelLayoutOverlays();
                     if (showMeasurements) {
                         clearMeasurements();
                     }
-                    // 모든 shapes에 대해 다시 그리기
                     refreshAllLabelsAndVisualizationsWithCalculation(targetMap);
                 }
-            };
-            path.addListener("set_at", handlePathChange);
-            path.addListener("insert_at", handlePathChange);
-            path.addListener("remove_at", handlePathChange);
-            // 한 번만 계산하여 모든 작업 수행
-            const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
-            // 계산 결과를 각 함수에 전달
-            addPolygonCapacityLabelWithLayoutInfo(polygon, layoutInfo, layoutInfo.capacity, mapInstance);
-            addPanelLayoutVisualizationWithLayoutInfo(polygon, layoutInfo, mapInstance);
+            }
+        });
+        const bounds = rectangle.getBounds();
+        if (bounds) {
+            const ne = bounds.getNorthEast();
+            const sw = bounds.getSouthWest();
+            const nw = new google.maps.LatLng(ne.lat(), sw.lng());
+            const se = new google.maps.LatLng(sw.lat(), ne.lng());
+            const rectPolygon = new google.maps.Polygon({
+                paths: [sw, nw, ne, se],
+            });
+            const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(rectPolygon);
+            addRectangleCapacityLabelWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, mapInstance);
+            addRectanglePanelLayoutVisualizationWithLayoutInfo(rectangle, layoutInfo, mapInstance);
             if (showMeasurements) {
-                addPolygonMeasurementsWithLayoutInfo(polygon, layoutInfo, layoutInfo.capacity, mapInstance);
+                addRectangleMeasurementsWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, mapInstance);
             }
-            onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygon);
-            // Auto-select the newly created polygon immediately
-            selectPolygonWithMap(polygon, mapInstance);
+            const polygonFromRect = new google.maps.Polygon({
+                paths: [sw, nw, ne, se],
+            });
+            onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygonFromRect);
+            selectRectangleWithMap(rectangle, mapInstance);
+        }
+    };
+    const initializeDrawing = (mapInstance) => {
+        // Drawing mode state (replaces DrawingManager.getDrawingMode/setDrawingMode).
+        let currentMode = null;
+        // In-progress polygon (click-based) state.
+        let tempPath = [];
+        // Open polyline preview (NOT a closed polygon) so the shape only looks
+        // "finished" once the user closes it on the start vertex / double-click.
+        let previewLine = null;
+        // In-progress rectangle (drag-based) state.
+        let rectStart = null;
+        let previewRect = null;
+        // Assigned once the buttons exist; safe to call as a no-op before then.
+        let setMode = () => { };
+        // Create custom drawing control buttons
+        const controlDiv = document.createElement("div");
+        controlDiv.style.margin = "10px";
+        controlDiv.style.display = "flex";
+        controlDiv.style.gap = "8px";
+        // Rectangle button
+        const rectangleButton = document.createElement("button");
+        rectangleButton.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="3" y="3" width="18" height="18" rx="2"/>
+      </svg>
+      <span>${texts.drawRectangle}</span>
+    `;
+        rectangleButton.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: white;
+      border: none;
+      padding: 10px 16px;
+      border-radius: 6px;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: #333;
+      transition: all 0.2s;
+    `;
+        rectangleButton.addEventListener("mouseenter", () => {
+            rectangleButton.style.background = "#f3f4f6";
         });
-        drawingManager.addListener("rectanglecomplete", (rectangle) => {
-            drawingManager.setDrawingMode(null);
-            // 먼저 간단한 면적 체크
-            const rectBounds = rectangle.getBounds();
-            if (rectBounds) {
-                const ne = rectBounds.getNorthEast();
-                const sw = rectBounds.getSouthWest();
-                const nw = new google.maps.LatLng(ne.lat(), sw.lng());
-                const se = new google.maps.LatLng(sw.lat(), ne.lng());
-                const pathArray = [sw, nw, ne, se];
-                const simpleArea = calculateSimpleArea(pathArray);
-                // Check maximum area limit first (before heavy calculations)
-                if (simpleArea > maxAreaLimit) {
-                    // Remove the rectangle immediately
-                    rectangle.setMap(null);
-                    // Show error message
-                    alert(`도형이 너무 큽니다. 최대 허용 면적은 ${maxAreaLimit.toLocaleString()}m²입니다.\n현재 면적: ${simpleArea
-                        .toFixed(1)
-                        .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}m²`);
-                    return; // Exit early without processing
-                }
+        rectangleButton.addEventListener("mouseleave", () => {
+            const isActive = currentMode === "rectangle";
+            rectangleButton.style.background = isActive ? "#3b82f6" : "white";
+            rectangleButton.style.color = isActive ? "white" : "#333";
+        });
+        rectangleButton.addEventListener("click", () => {
+            setMode(currentMode === "rectangle" ? null : "rectangle");
+        });
+        // Polygon button
+        const polygonButton = document.createElement("button");
+        polygonButton.innerHTML = `
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polygon points="12,2 22,8.5 22,15.5 12,22 2,15.5 2,8.5" stroke-linejoin="round"/>
+      </svg>
+      <span>${texts.drawPolygon}</span>
+    `;
+        polygonButton.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: white;
+      border: none;
+      padding: 10px 16px;
+      border-radius: 6px;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      color: #333;
+      transition: all 0.2s;
+    `;
+        polygonButton.addEventListener("mouseenter", () => {
+            polygonButton.style.background = "#f3f4f6";
+        });
+        polygonButton.addEventListener("mouseleave", () => {
+            const isActive = currentMode === "polygon";
+            polygonButton.style.background = isActive ? "#3b82f6" : "white";
+            polygonButton.style.color = isActive ? "white" : "#333";
+        });
+        polygonButton.addEventListener("click", () => {
+            setMode(currentMode === "polygon" ? null : "polygon");
+        });
+        controlDiv.appendChild(rectangleButton);
+        controlDiv.appendChild(polygonButton);
+        // Add custom controls to map
+        mapInstance.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
+        // Add zoom level listener to control drawing availability
+        const updateDrawingControls = () => {
+            const currentZoom = mapInstance.getZoom() || 0;
+            if (currentZoom < MIN_ZOOM_FOR_DRAWING) {
+                // Disable drawing mode and hide custom controls
+                setMode(null);
+                controlDiv.style.display = "none";
             }
-            // Store rectangle reference
-            rectanglesRef.current.push(rectangle);
-            // Add click listener for selection
-            rectangle.addListener("click", (event) => {
-                event.stop(); // Prevent map click event
-                selectRectangleWithMap(rectangle, mapInstance);
+            else {
+                // Show custom controls
+                controlDiv.style.display = "flex";
+            }
+        };
+        // Initial check
+        updateDrawingControls();
+        // Listen for zoom changes
+        mapInstance.addListener("zoom_changed", updateDrawingControls);
+        const removeStartPointMarker = () => {
+            if (startPointMarkerRef.current) {
+                startPointMarkerRef.current.setMap(null);
+                startPointMarkerRef.current = null;
+            }
+        };
+        const addVertexMarker = (position, isStartPoint = false) => {
+            const marker = new google.maps.Marker({
+                position: position,
+                map: mapInstance,
+                icon: {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    fillColor: isStartPoint ? "#10b981" : "#3b82f6", // Green for start, blue for other points
+                    fillOpacity: 1,
+                    strokeColor: "#ffffff",
+                    strokeWeight: 2,
+                    scale: isStartPoint ? 6 : 5, // Start point slightly larger
+                },
+                zIndex: 10000,
+                clickable: false,
             });
-            // Add drag listeners to hide/show rotation handle
-            rectangle.addListener("dragstart", () => {
-                removeRotationHandle();
+            vertexMarkersRef.current.push(marker);
+            return marker;
+        };
+        const clearVertexMarkers = () => {
+            vertexMarkersRef.current.forEach((marker) => marker.setMap(null));
+            vertexMarkersRef.current = [];
+        };
+        // ── Custom click/drag drawing (replaces DrawingManager) ──────────────
+        const updateButtonStyles = () => {
+            const apply = (btn, active) => {
+                btn.style.background = active ? "#3b82f6" : "white";
+                btn.style.color = active ? "white" : "#333";
+            };
+            apply(rectangleButton, currentMode === "rectangle");
+            apply(polygonButton, currentMode === "polygon");
+        };
+        // Discard any in-progress polygon vertices/preview.
+        const cancelPolygonDrawing = () => {
+            tempPath = [];
+            if (previewLine) {
+                previewLine.setMap(null);
+                previewLine = null;
+            }
+            removeStartPointMarker();
+            clearVertexMarkers();
+        };
+        // Discard any in-progress rectangle drag.
+        const cancelRectangleDrawing = () => {
+            rectStart = null;
+            if (previewRect) {
+                previewRect.setMap(null);
+                previewRect = null;
+            }
+        };
+        setMode = (mode) => {
+            if (currentMode === mode)
+                return;
+            // Tear down whatever the previous mode left in progress.
+            if (currentMode === "polygon")
+                cancelPolygonDrawing();
+            if (currentMode === "rectangle")
+                cancelRectangleDrawing();
+            currentMode = mode;
+            setActiveDrawingMode(mode);
+            updateButtonStyles();
+            // Reset map interaction, then apply per-mode tweaks.
+            mapInstance.setOptions({
+                draggable: true,
+                disableDoubleClickZoom: false,
+                draggableCursor: null,
             });
-            rectangle.addListener("dragend", () => {
-                if (selectedRectangle === rectangle) {
-                    setTimeout(() => {
-                        addRotationHandle(rectangle, mapInstance);
-                    }, 50);
+            if (mode === "polygon") {
+                // Keep panning available between clicks, but suppress the dbl-click
+                // zoom (used to finish the polygon) and show a crosshair cursor.
+                mapInstance.setOptions({
+                    disableDoubleClickZoom: true,
+                    draggableCursor: "crosshair",
+                });
+            }
+            else if (mode === "rectangle") {
+                // Disable panning so the drag draws the rectangle instead.
+                mapInstance.setOptions({
+                    draggable: false,
+                    draggableCursor: "crosshair",
+                });
+            }
+        };
+        // ── Polygon: click to add vertices, dbl-click / start-point to close ──
+        const updatePolygonPreview = () => {
+            if (!previewLine) {
+                previewLine = new google.maps.Polyline({
+                    strokeColor: COLORS.SHAPE_DEFAULT,
+                    strokeOpacity: 1.0,
+                    strokeWeight: 3,
+                    clickable: false,
+                    zIndex: 1,
+                    map: mapInstance,
+                });
+            }
+            previewLine.setPath(tempPath);
+        };
+        const completePolygonDrawing = () => {
+            // Drop a trailing duplicate vertex (dbl-click adds the same point twice).
+            const pts = [...tempPath];
+            while (pts.length >= 2) {
+                const a = pts[pts.length - 1];
+                const b = pts[pts.length - 2];
+                if (Math.abs(a.lat() - b.lat()) < 1e-7 &&
+                    Math.abs(a.lng() - b.lng()) < 1e-7) {
+                    pts.pop();
                 }
-                // 기존 레이블들 제거하고 새로 그리기
-                clearCapacityLabels();
-                clearPanelLayoutOverlays();
-                refreshAllLabelsAndVisualizationsWithCalculation(mapInstance);
-            });
-            // Add bounds change listeners for real-time editing
-            rectangle.addListener("bounds_changed", () => {
-                saveRectangleState(rectangle);
-                // Convert rectangle to polygon for callback compatibility
-                const bounds = rectangle.getBounds();
-                if (bounds) {
-                    const ne = bounds.getNorthEast();
-                    const sw = bounds.getSouthWest();
-                    const nw = new google.maps.LatLng(ne.lat(), sw.lng());
-                    const se = new google.maps.LatLng(sw.lat(), ne.lng());
-                    // Create a polygon from rectangle bounds for callback
-                    const polygonFromRect = new google.maps.Polygon({
-                        paths: [sw, nw, ne, se],
-                    });
-                    onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(polygonFromRect);
-                    const targetMap = rectangle.getMap();
-                    if (targetMap) {
-                        // 기존 레이블들 제거하고 새로 그리기
-                        clearCapacityLabels();
-                        clearPanelLayoutOverlays();
-                        if (showMeasurements) {
-                            clearMeasurements();
-                        }
-                        // 모든 shapes에 대해 다시 그리기
-                        refreshAllLabelsAndVisualizationsWithCalculation(targetMap);
-                    }
+                else {
+                    break;
                 }
-            });
-            // 한 번만 계산하여 모든 작업 수행
-            const bounds = rectangle.getBounds();
-            if (bounds) {
-                const ne = bounds.getNorthEast();
-                const sw = bounds.getSouthWest();
-                const nw = new google.maps.LatLng(ne.lat(), sw.lng());
-                const se = new google.maps.LatLng(sw.lat(), ne.lng());
-                const rectPolygon = new google.maps.Polygon({
-                    paths: [sw, nw, ne, se],
-                });
-                const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(rectPolygon);
-                // 계산 결과를 각 함수에 전달
-                addRectangleCapacityLabelWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, mapInstance);
-                addRectanglePanelLayoutVisualizationWithLayoutInfo(rectangle, layoutInfo, mapInstance);
-                if (showMeasurements) {
-                    addRectangleMeasurementsWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, mapInstance);
+            }
+            if (pts.length < 3) {
+                cancelPolygonDrawing();
+                setMode(null);
+                return;
+            }
+            const polygon = new google.maps.Polygon(Object.assign(Object.assign({ paths: pts }, getPolygonDrawOptions()), { map: mapInstance }));
+            cancelPolygonDrawing();
+            setMode(null);
+            finalizePolygon(polygon, mapInstance);
+        };
+        mapInstance.addListener("click", (e) => {
+            if (currentMode !== "polygon" || !e.latLng)
+                return;
+            // Click on (or near) the start vertex closes the loop.
+            if (tempPath.length >= 3) {
+                const start = tempPath[0];
+                if (Math.abs(start.lat() - e.latLng.lat()) < 1e-7 &&
+                    Math.abs(start.lng() - e.latLng.lng()) < 1e-7) {
+                    completePolygonDrawing();
+                    return;
                 }
             }
-            // Convert rectangle to polygon for callback compatibility
-            if (bounds) {
-                const ne = bounds.getNorthEast();
-                const sw = bounds.getSouthWest();
-                const nw = new google.maps.LatLng(ne.lat(), sw.lng());
-                const se = new google.maps.LatLng(sw.lat(), ne.lng());
-                const polygonFromRect = new google.maps.Polygon({
-                    paths: [sw, nw, ne, se],
+            tempPath = [...tempPath, e.latLng];
+            const isFirst = tempPath.length === 1;
+            const marker = addVertexMarker(e.latLng, isFirst);
+            if (isFirst) {
+                // Make the start marker clickable so users can close on it.
+                marker.setOptions({ clickable: true });
+                marker.addListener("click", () => {
+                    if (currentMode === "polygon" && tempPath.length >= 3) {
+                        completePolygonDrawing();
+                    }
                 });
-                onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygonFromRect);
-                // Auto-select the newly created rectangle immediately
-                selectRectangleWithMap(rectangle, mapInstance);
             }
+            updatePolygonPreview();
+        });
+        mapInstance.addListener("dblclick", () => {
+            if (currentMode === "polygon" && tempPath.length >= 3) {
+                completePolygonDrawing();
+            }
+        });
+        // Right-click / Escape cancels in-progress drawing.
+        mapInstance.addListener("rightclick", () => {
+            if (currentMode)
+                setMode(null);
+        });
+        document.addEventListener("keydown", (ev) => {
+            if (ev.key === "Escape" && currentMode)
+                setMode(null);
+        });
+        // ── Rectangle: press-drag-release ────────────────────────────────────
+        const boundsFromCorners = (a, b) => {
+            const bounds = new google.maps.LatLngBounds();
+            bounds.extend(a);
+            bounds.extend(b);
+            return bounds;
+        };
+        mapInstance.addListener("mousedown", (e) => {
+            if (currentMode !== "rectangle" || !e.latLng)
+                return;
+            rectStart = e.latLng;
+            previewRect = new google.maps.Rectangle(Object.assign(Object.assign({}, getRectangleDrawOptions()), { clickable: false, draggable: false, editable: false, map: mapInstance, bounds: boundsFromCorners(rectStart, rectStart) }));
+        });
+        mapInstance.addListener("mousemove", (e) => {
+            if (currentMode !== "rectangle" ||
+                !rectStart ||
+                !previewRect ||
+                !e.latLng)
+                return;
+            previewRect.setBounds(boundsFromCorners(rectStart, e.latLng));
+        });
+        mapInstance.addListener("mouseup", (e) => {
+            var _a;
+            if (currentMode !== "rectangle" || !rectStart)
+                return;
+            const start = rectStart;
+            const end = (_a = e.latLng) !== null && _a !== void 0 ? _a : start;
+            const bounds = boundsFromCorners(start, end);
+            if (previewRect) {
+                previewRect.setMap(null);
+                previewRect = null;
+            }
+            rectStart = null;
+            // Ignore zero-size drags (a plain click without movement).
+            if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
+                setMode(null);
+                return;
+            }
+            const rectangle = new google.maps.Rectangle(Object.assign(Object.assign({}, getRectangleDrawOptions()), { bounds, map: mapInstance }));
+            setMode(null);
+            finalizeRectangle(rectangle, mapInstance);
         });
     };
     // Helper function to determine optimal zoom level
@@ -400,7 +686,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         return 16; // Good default for solar site analysis
     };
     // Add capacity label for existing polygon
-    const addExistingPolygonCapacityLabel = (centroid, capacity, mapInstance, geometry) => {
+    const addExistingPolygonCapacityLabel = (polygon, centroid, capacity, mapInstance, geometry) => {
         var _a;
         // Calculate label position above polygon if geometry is available
         let labelPosition;
@@ -439,7 +725,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         const labelElement = document.createElement("div");
         labelElement.innerHTML = `
       <div style="background: rgba(255,255,255,0.95); padding: 6px 10px; border-radius: 6px; border: 1px solid #e5e7eb; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none;">
-        <div style="font-size: 14px; font-weight: 600; color: #059669; text-align: center;">
+        <div style="font-size: 14px; font-weight: 600; color: #2563eb; text-align: center;">
           ${formatCapacity(capacity)} kW
         </div>
         ${layoutInfo
@@ -472,12 +758,12 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                         encodeURIComponent(`
             <svg xmlns="http://www.w3.org/2000/svg" width="${layoutInfo ? "120" : "80"}" height="${layoutInfo ? "40" : "30"}" viewBox="0 0 ${layoutInfo ? "120" : "80"} ${layoutInfo ? "40" : "30"}">
               <rect x="0" y="0" width="${layoutInfo ? "120" : "80"}" height="${layoutInfo ? "40" : "30"}" fill="rgba(255,255,255,0.95)" stroke="#e5e7eb" stroke-width="1" rx="6"/>
-              <text x="${layoutInfo ? "60" : "40"}" y="${layoutInfo ? "18" : "20"}" text-anchor="middle" font-family="Arial" font-size="14" font-weight="600" fill="#059669">
+              <text x="${layoutInfo ? "60" : "40"}" y="${layoutInfo ? "18" : "20"}" text-anchor="middle" font-family="Arial" font-size="14" font-weight="600" fill="#1e40af">
                 ${formatCapacity(capacity)} kW
               </text>
               ${layoutInfo
                             ? `<text x="60" y="32" text-anchor="middle" font-family="Arial" font-size="10" fill="#6b7280">
-                ${layoutInfo.totalPanels}개 패널
+                ${layoutInfo.totalPanels} ${texts.panels}
               </text>`
                             : ""}
             </svg>
@@ -490,6 +776,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             capacityMarker = marker;
         }
         capacityLabelsRef.current.push(capacityMarker);
+        // Store in WeakMap for shape-specific tracking
+        shapeCapacityLabelMapRef.current.set(polygon, capacityMarker);
     };
     // Polygon selection and editing functions
     // Helper functions for shape styling
@@ -605,10 +893,16 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                 selectPolygon(newPolygon);
             });
             // Add drag listeners
+            let isNewPolygonDragging = false;
             newPolygon.addListener("dragstart", () => {
+                isNewPolygonDragging = true;
                 removeRotationHandle();
+                // Hide panel layout and capacity label for this shape only during drag
+                clearShapePanelOverlays(newPolygon);
+                clearShapeCapacityLabel(newPolygon);
             });
             newPolygon.addListener("dragend", () => {
+                isNewPolygonDragging = false;
                 if (selectedPolygon === newPolygon && map) {
                     setTimeout(() => {
                         addRotationHandle(newPolygon, map);
@@ -622,6 +916,9 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             const newPath = newPolygon.getPath();
             let newEditingTimer = null;
             const handleNewPathChange = () => {
+                // Skip path change handling during drag
+                if (isNewPolygonDragging)
+                    return;
                 savePolygonState(newPolygon);
                 onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(newPolygon);
                 if (selectedPolygon === newPolygon) {
@@ -1064,10 +1361,16 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             selectPolygonWithMap(rotatedPolygon, targetMap);
         });
         // Add drag listeners
+        let isRotatedPolygonDragging = false;
         rotatedPolygon.addListener("dragstart", () => {
+            isRotatedPolygonDragging = true;
             removeRotationHandle();
+            // Hide panel layout and capacity label for this shape only during drag
+            clearShapePanelOverlays(rotatedPolygon);
+            clearShapeCapacityLabel(rotatedPolygon);
         });
         rotatedPolygon.addListener("dragend", () => {
+            isRotatedPolygonDragging = false;
             if (selectedPolygon === rotatedPolygon) {
                 setTimeout(() => {
                     addRotationHandle(rotatedPolygon, targetMap);
@@ -1082,6 +1385,9 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         const path = rotatedPolygon.getPath();
         let rotatedEditingTimer = null;
         const handleRotatedPathChange = () => {
+            // Skip path change handling during drag
+            if (isRotatedPolygonDragging)
+                return;
             savePolygonState(rotatedPolygon);
             onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(rotatedPolygon);
             // Update capacity label and measurements when converted polygon changes
@@ -1122,7 +1428,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         setSelectedRectangle(null);
         setSelectedPolygon(rotatedPolygon);
         rotatedPolygon.setOptions({
-            strokeColor: "#dc2626",
+            strokeColor: COLORS.SHAPE_SELECTED,
             strokeWeight: 3,
             fillOpacity: 0.5,
         });
@@ -1209,11 +1515,11 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         const labelElement = document.createElement("div");
         labelElement.innerHTML = `
       <div style="background: rgba(255,255,255,0.95); padding: 6px 10px; border-radius: 6px; border: 1px solid #e5e7eb; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; pointer-events: none;">
-        <div style="font-size: 14px; font-weight: 600; color: #059669; text-align: center;">
+        <div style="font-size: 14px; font-weight: 600; color: #2563eb; text-align: center;">
           ${formatCapacity(capacity)} kW
         </div>
         <div style="font-size: 11px; color: #6b7280; text-align: center; margin-top: 2px;">
-          ${layoutInfo.totalPanels}개 패널
+          ${layoutInfo.totalPanels} ${texts.panels}
         </div>
       </div>
     `;
@@ -1239,7 +1545,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                         encodeURIComponent(`
             <svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40">
               <rect x="0" y="0" width="120" height="40" fill="rgba(255,255,255,0.95)" stroke="#e5e7eb" stroke-width="1" rx="6"/>
-              <text x="60" y="18" text-anchor="middle" font-family="Arial" font-size="14" font-weight="600" fill="#059669">
+              <text x="60" y="18" text-anchor="middle" font-family="Arial" font-size="14" font-weight="600" fill="#1e40af">
                 ${formatCapacity(capacity)} kW
               </text>
               <text x="60" y="32" text-anchor="middle" font-family="Arial" font-size="10" fill="#6b7280">
@@ -1255,6 +1561,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             capacityMarker = marker;
         }
         capacityLabelsRef.current.push(capacityMarker);
+        // Store in WeakMap for shape-specific tracking
+        shapeCapacityLabelMapRef.current.set(polygon, capacityMarker);
     };
     const addRectangleCapacityLabelWithLayoutInfo = (rectangle, layoutInfo, capacity, mapInstance) => {
         var _a;
@@ -1275,7 +1583,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
           ${formatCapacity(capacity)} kW
         </div>
         <div style="font-size: 11px; color: #6b7280; text-align: center; margin-top: 2px;">
-          ${layoutInfo.totalPanels}개 패널 (${layoutInfo.columns}×${layoutInfo.rows})
+          ${layoutInfo.totalPanels} ${texts.panels} (${layoutInfo.columns}×${layoutInfo.rows})
         </div>
       </div>
     `;
@@ -1317,6 +1625,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             capacityMarker = marker;
         }
         capacityLabelsRef.current.push(capacityMarker);
+        // Store in WeakMap for shape-specific tracking
+        shapeCapacityLabelMapRef.current.set(rectangle, capacityMarker);
     };
     // layoutInfo를 파라미터로 받는 측정 정보 함수들
     const addPolygonMeasurementsWithLayoutInfo = (polygon, layoutInfo, capacity, mapInstance) => {
@@ -1377,6 +1687,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         if (layoutInfo.totalPanels === 0) {
             return;
         }
+        // Track panels for this specific shape
+        const shapePanels = [];
         try {
             // 새로운 그리드 기반 패널 위치 정보 사용
             if (layoutInfo.validPanelPositions &&
@@ -1424,16 +1736,19 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     const panelPolygon = new google.maps.Polygon({
                         paths: rotatedPanelCorners,
                         map: mapInstance,
-                        fillColor: "#fbbf24", // 황금색
+                        fillColor: COLORS.PANEL_FILL,
                         fillOpacity: 0.4,
-                        strokeColor: "#f59e0b",
+                        strokeColor: COLORS.PANEL_STROKE,
                         strokeWeight: 1,
                         strokeOpacity: 0.8,
                         clickable: false,
                         zIndex: 2000,
                     });
                     panelLayoutOverlaysRef.current.push(panelPolygon);
+                    shapePanels.push(panelPolygon);
                 });
+                // Store panels for this shape
+                shapePanelMapRef.current.set(polygon, shapePanels);
             }
             else {
                 // 기존 fallback 방식 사용
@@ -1449,6 +1764,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         if (layoutInfo.totalPanels === 0) {
             return;
         }
+        // Track panels for this specific shape
+        const shapePanels = [];
         try {
             // 폴리곤의 바운딩 박스 계산
             const path = polygon.getPath();
@@ -1496,17 +1813,20 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     const panelRect = new google.maps.Rectangle({
                         bounds: panelBounds,
                         map: mapInstance,
-                        fillColor: "#fbbf24",
+                        fillColor: COLORS.PANEL_FILL,
                         fillOpacity: 0.6,
-                        strokeColor: "#f59e0b",
+                        strokeColor: COLORS.PANEL_STROKE,
                         strokeWeight: 1,
                         strokeOpacity: 0.8,
                         clickable: false,
                         zIndex: 2000,
                     });
                     panelLayoutOverlaysRef.current.push(panelRect);
+                    shapePanels.push(panelRect);
                 }
             }
+            // Store panels for this shape
+            shapePanelMapRef.current.set(polygon, shapePanels);
         }
         catch (error) {
             console.warn("Failed to add fallback panel layout visualization:", error);
@@ -1516,6 +1836,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         if (layoutInfo.totalPanels === 0) {
             return;
         }
+        // Track panels for this specific shape
+        const shapePanels = [];
         try {
             const bounds = rectangle.getBounds();
             if (!bounds)
@@ -1583,9 +1905,9 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     const panelPolygon = new google.maps.Polygon({
                         paths: rotatedCorners,
                         map: mapInstance,
-                        fillColor: "#fbbf24", // 황금색
+                        fillColor: COLORS.PANEL_FILL,
                         fillOpacity: 0.6,
-                        strokeColor: "#f59e0b",
+                        strokeColor: COLORS.PANEL_STROKE,
                         strokeWeight: 1,
                         strokeOpacity: 0.8,
                         clickable: false,
@@ -1593,8 +1915,11 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     });
                     // Rectangle 타입 배열에 추가하기 위해 캐스팅 (실제로는 Polygon이지만)
                     panelLayoutOverlaysRef.current.push(panelPolygon);
+                    shapePanels.push(panelPolygon);
                 }
             }
+            // Store panels for this shape
+            shapePanelMapRef.current.set(rectangle, shapePanels);
         }
         catch (error) {
             console.warn("Failed to add rectangle panel layout visualization:", error);
@@ -1611,6 +1936,21 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         });
         capacityLabelsRef.current = [];
     };
+    // Clear capacity label for a specific shape only
+    const clearShapeCapacityLabel = (shape) => {
+        const label = shapeCapacityLabelMapRef.current.get(shape);
+        if (label) {
+            if (label instanceof google.maps.marker.AdvancedMarkerElement) {
+                label.map = null;
+            }
+            else {
+                label.setMap(null);
+            }
+            shapeCapacityLabelMapRef.current.delete(shape);
+            // Also remove from main array
+            capacityLabelsRef.current = capacityLabelsRef.current.filter((l) => l !== label);
+        }
+    };
     const refreshAllLabelsAndVisualizationsWithCalculation = (mapInstance) => {
         // Polygons 처리
         polygonsRef.current.forEach((polygon) => {
@@ -1653,6 +1993,20 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         });
         panelLayoutOverlaysRef.current = [];
     };
+    // Clear panel overlays for a specific shape only
+    const clearShapePanelOverlays = (shape) => {
+        const shapePanels = shapePanelMapRef.current.get(shape);
+        if (shapePanels) {
+            shapePanels.forEach((panel) => {
+                if (panel && typeof panel.setMap === "function") {
+                    panel.setMap(null);
+                }
+            });
+            shapePanelMapRef.current.delete(shape);
+            // Also remove from main array
+            panelLayoutOverlaysRef.current = panelLayoutOverlaysRef.current.filter((overlay) => !shapePanels.includes(overlay));
+        }
+    };
     const clearSpacingWarnings = () => {
         spacingWarningOverlaysRef.current.forEach((circle) => circle.setMap(null));
         spacingWarningOverlaysRef.current = [];
@@ -1715,9 +2069,6 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
     }, [showMeasurements, map]);
     (0, react_1.useEffect)(() => {
         return () => {
-            if (drawingManagerRef.current) {
-                drawingManagerRef.current.setMap(null);
-            }
             // Clean up polygons
             polygonsRef.current.forEach((polygon) => {
                 polygon.setMap(null);
@@ -1737,9 +2088,9 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         };
     }, []);
     if (error) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: `${className} relative`, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-red-50 border border-red-200 rounded", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-red-600 text-center p-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: "Map loading failed" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm mt-1", children: error.message })] }) }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${className} relative`, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-red-50 border border-red-200", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-red-600 text-center p-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "font-medium", children: "Map loading failed" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm mt-1", children: error.message })] }) }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `${className} relative`, children: [(0, jsx_runtime_1.jsx)("div", { ref: mapRef, className: "w-full h-full rounded-lg" }), !isLoaded && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100 rounded-lg", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-gray-600 flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading map..." })] }) })), isAnimating && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm flex items-center space-x-2 shadow-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-3 w-3 border border-white border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { children: "Navigating to location..." })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${className} relative`, children: [(0, jsx_runtime_1.jsx)("div", { ref: mapRef, className: "w-full h-full" }), !isLoaded && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100 ", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-gray-600 flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600" }), (0, jsx_runtime_1.jsx)("span", { children: "Loading map..." })] }) })), isAnimating && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm flex items-center space-x-2 shadow-lg", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-3 w-3 border border-white border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { children: "Navigating to location..." })] }))] }));
 };
 exports.default = GoogleMaps;
 //# sourceMappingURL=google-maps.js.map