@zurigo/maps 1.0.0 → 1.0.1

package/dist/components/google-maps.js

@@ -0,0 +1,1763 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const google_maps_1 = require("../lib/google-maps");
+const config_1 = require("../lib/google-maps/config");
+const solar_panel_calculator_1 = require("../lib/solar-panel-calculator");
+// Drawing constraints
+const MIN_ZOOM_FOR_DRAWING = 18; // Minimum zoom level to allow drawing
+const MAX_AREA_LIMIT = 10000; // Maximum area in m² for drawn shapes
+const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center, zoom, onMapLoad, className = "w-full h-full", animateToLocation = true, showMeasurements = false, clearTrigger, existingPolygons, readOnly = false, }) => {
+    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 rotationHandleRef = (0, react_1.useRef)(null);
+    const rotationListenerRef = (0, react_1.useRef)(null);
+    const currentShapeRef = (0, react_1.useRef)(null);
+    const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
+    const [previousCenter, setPreviousCenter] = (0, react_1.useState)(center);
+    const [selectedPolygon, setSelectedPolygon] = (0, react_1.useState)(null);
+    const [selectedRectangle, setSelectedRectangle] = (0, react_1.useState)(null);
+    const [undoStack, setUndoStack] = (0, react_1.useState)([]);
+    const [redoStack, setRedoStack] = (0, react_1.useState)([]);
+    const [isRotating, setIsRotating] = (0, react_1.useState)(false);
+    // Suppress unused variable warning - redoStack is for future undo/redo implementation
+    void redoStack;
+    const mapOptions = (0, config_1.getMapOptions)(Object.assign({ center,
+        zoom, mapTypeId: "satellite", mapTypeControl: false }, (readOnly && {
+        disableDefaultUI: true, // 모든 기본 UI 숨기기
+        zoomControl: false, // 줌 컨트롤 숨기기
+        scaleControl: false, // 스케일 컨트롤 숨기기
+        streetViewControl: false, // 스트리트뷰 컨트롤 숨기기
+        rotateControl: false, // 회전 컨트롤 숨기기
+        fullscreenControl: false, // 전체화면 컨트롤 숨기기
+        gestureHandling: "none", // 제스처 비활성화
+    })));
+    const { map, isLoaded, error } = (0, google_maps_1.useGoogleMap)(mapRef, Object.assign(Object.assign({}, mapOptions), { onMapLoad: (mapInstance) => {
+            // readOnly 모드가 아닐 때만 Drawing Manager 초기화
+            if (!readOnly) {
+                initializeDrawingManager(mapInstance);
+                // Add map click listener to deselect shapes
+                mapInstance.addListener("click", (event) => {
+                    // Only deselect if not clicking on shapes or rotation handle
+                    if (!isRotating) {
+                        // Add a small delay to allow shape click events to fire first
+                        setTimeout(() => {
+                            deselectPolygon();
+                            deselectRectangle();
+                        }, 10);
+                    }
+                });
+            }
+            onMapLoad === null || onMapLoad === void 0 ? void 0 : onMapLoad(mapInstance);
+        } }));
+    // Handle smooth map animation when center changes
+    (0, react_1.useEffect)(() => {
+        if (!map || !isLoaded || !center)
+            return;
+        // Check if center actually changed
+        if (previousCenter &&
+            Math.abs(previousCenter.lat - center.lat) < 0.0001 &&
+            Math.abs(previousCenter.lng - center.lng) < 0.0001) {
+            return;
+        }
+        if (animateToLocation && previousCenter) {
+            setIsAnimating(true);
+            // Determine appropriate zoom level based on location type
+            const targetZoom = zoom || getOptimalZoomLevel(center);
+            // Smooth pan and zoom animation
+            map.panTo(center);
+            if (map.getZoom() !== targetZoom) {
+                map.setZoom(targetZoom);
+            }
+            // Add a delay to show animation completion
+            setTimeout(() => {
+                setIsAnimating(false);
+            }, 1000);
+        }
+        else {
+            // Immediate update without animation
+            map.setCenter(center);
+            if (zoom) {
+                map.setZoom(zoom);
+            }
+        }
+        setPreviousCenter(center);
+    }, [map, isLoaded, center, zoom, animateToLocation, previousCenter]);
+    // Display existing polygons when map is loaded
+    (0, react_1.useEffect)(() => {
+        if (map && isLoaded && existingPolygons && existingPolygons.length > 0) {
+            existingPolygons.forEach((polygonData, index) => {
+                if (!polygonData.geometry || polygonData.geometry.length < 3) {
+                    return;
+                }
+                // 폴리곤 중심점으로 지도 이동 (첫 번째 폴리곤만)
+                if (index === 0 && polygonData.centroid) {
+                    map.setCenter(polygonData.centroid);
+                    map.setZoom(18);
+                }
+                // Create polygon from saved geometry
+                const polygon = new google.maps.Polygon({
+                    paths: polygonData.geometry,
+                    fillColor: "#10b981",
+                    fillOpacity: 0.4,
+                    strokeWeight: 3,
+                    strokeColor: "#059669",
+                    clickable: false,
+                    editable: false,
+                    draggable: false,
+                    map: map,
+                    zIndex: 1000,
+                });
+                // Store polygon reference
+                polygonsRef.current.push(polygon);
+                // Add capacity label if capacity data exists
+                if (polygonData.capacity && polygonData.centroid) {
+                    addExistingPolygonCapacityLabel(polygonData.centroid, polygonData.capacity, map, polygonData.geometry);
+                }
+                // Add panel layout visualization for existing polygon
+                const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
+                addPanelLayoutVisualizationWithLayoutInfo(polygon, layoutInfo, map);
+            });
+        }
+    }, [map, isLoaded, existingPolygons]);
+    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))
+            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: true,
+            },
+            rectangleOptions: {
+                fillColor: "#3b82f6",
+                fillOpacity: 0.3,
+                strokeWeight: 3,
+                strokeColor: "#1e40af",
+                zIndex: 1,
+                clickable: true,
+                draggable: true,
+                editable: true,
+            },
+        });
+        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,
+                });
+            }
+            else {
+                // Enable drawing controls
+                drawingManager.setOptions({
+                    drawingControl: true,
+                });
+            }
+        };
+        // Initial check
+        updateDrawingControls();
+        // Listen for zoom changes
+        mapInstance.addListener("zoom_changed", updateDrawingControls);
+        drawingManager.addListener("polygoncomplete", (polygon) => {
+            drawingManager.setDrawingMode(null);
+            // 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();
+                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);
+            // Check maximum area limit
+            if (layoutInfo.area > MAX_AREA_LIMIT) {
+                // Remove the polygon that exceeds the limit
+                polygon.setMap(null);
+                polygonsRef.current.pop(); // Remove from reference array
+                // Show error message
+                alert(`도형이 너무 큽니다. 최대 허용 면적은 ${MAX_AREA_LIMIT.toLocaleString()}m²입니다.\n현재 면적: ${layoutInfo.area.toFixed(1)}m²`);
+                return; // Exit early without processing
+            }
+            // 계산 결과를 각 함수에 전달
+            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
+            setTimeout(() => selectPolygonWithMap(polygon, mapInstance), 200);
+        });
+        drawingManager.addListener("rectanglecomplete", (rectangle) => {
+            drawingManager.setDrawingMode(null);
+            // 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);
+            });
+            // Add drag listeners to hide/show rotation handle
+            rectangle.addListener("dragstart", () => {
+                removeRotationHandle();
+            });
+            rectangle.addListener("dragend", () => {
+                if (selectedRectangle === rectangle) {
+                    setTimeout(() => {
+                        addRotationHandle(rectangle, mapInstance);
+                    }, 50);
+                }
+                // 기존 레이블들 제거하고 새로 그리기
+                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);
+                    }
+                }
+            });
+            // 한 번만 계산하여 모든 작업 수행
+            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);
+                // Check maximum area limit
+                if (layoutInfo.area > MAX_AREA_LIMIT) {
+                    // Remove the rectangle that exceeds the limit
+                    rectangle.setMap(null);
+                    rectanglesRef.current.pop(); // Remove from reference array
+                    // Show error message
+                    alert(`도형이 너무 큽니다. 최대 허용 면적은 ${MAX_AREA_LIMIT.toLocaleString()}m²입니다.\n현재 면적: ${layoutInfo.area.toFixed(1)}m²`);
+                    return; // Exit early without processing
+                }
+                // 계산 결과를 각 함수에 전달
+                addRectangleCapacityLabelWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, mapInstance);
+                addRectanglePanelLayoutVisualizationWithLayoutInfo(rectangle, layoutInfo, mapInstance);
+                if (showMeasurements) {
+                    addRectangleMeasurementsWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, mapInstance);
+                }
+            }
+            // 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],
+                });
+                onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygonFromRect);
+                // Auto-select the newly created rectangle
+                setTimeout(() => selectRectangleWithMap(rectangle, mapInstance), 200);
+            }
+        });
+    };
+    // Helper function to determine optimal zoom level
+    const getOptimalZoomLevel = (_location) => {
+        // Default zoom levels for different location types
+        // Building/precise address: 18-20
+        // Street level: 16-17
+        // District level: 14-15
+        // City level: 12-13
+        return 16; // Good default for solar site analysis
+    };
+    // Add capacity label for existing polygon
+    const addExistingPolygonCapacityLabel = (centroid, capacity, mapInstance, geometry) => {
+        var _a;
+        // Calculate label position above polygon if geometry is available
+        let labelPosition;
+        if (geometry && geometry.length >= 3) {
+            // Calculate bounds from geometry
+            const bounds = new google.maps.LatLngBounds();
+            geometry.forEach((point) => {
+                bounds.extend(new google.maps.LatLng(point.lat, point.lng));
+            });
+            const ne = bounds.getNorthEast();
+            const center = bounds.getCenter();
+            const sw = bounds.getSouthWest();
+            // Position label above the polygon with fixed offset
+            const latOffset = 0.00007; // 적당한 고정 오프셋
+            labelPosition = new google.maps.LatLng(ne.lat() + latOffset, center.lng());
+        }
+        else {
+            // Fallback: position label above centroid with a fixed offset
+            const latOffset = 0.00007; // 적당한 고정 오프셋
+            labelPosition = new google.maps.LatLng(centroid.lat + latOffset, centroid.lng);
+        }
+        // Try to calculate layout info if geometry is provided
+        let layoutInfo = null;
+        if (geometry && geometry.length >= 3) {
+            try {
+                const polygon = new google.maps.Polygon({
+                    paths: geometry.map((point) => new google.maps.LatLng(point.lat, point.lng)),
+                });
+                layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
+            }
+            catch (error) {
+                console.warn("Failed to calculate layout info for existing polygon:", error);
+            }
+        }
+        // Create label element
+        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;">
+          ${formatCapacity(capacity)} kW
+        </div>
+        ${layoutInfo
+            ? `
+        <div style="font-size: 11px; color: #6b7280; text-align: center; margin-top: 2px;">
+          ${layoutInfo.columns}×${layoutInfo.rows} (${layoutInfo.orientation})
+        </div>`
+            : ""}
+      </div>
+    `;
+        // Check if we can use AdvancedMarkerElement
+        const mapWithId = mapInstance;
+        const hasMapId = (mapWithId === null || mapWithId === void 0 ? void 0 : mapWithId.getMapId) && mapWithId.getMapId();
+        let capacityMarker;
+        if (hasMapId && ((_a = google.maps.marker) === null || _a === void 0 ? void 0 : _a.AdvancedMarkerElement)) {
+            capacityMarker = new google.maps.marker.AdvancedMarkerElement({
+                position: labelPosition,
+                map: mapInstance,
+                content: labelElement,
+                zIndex: 15000,
+            });
+        }
+        else {
+            // Fallback: use a simple marker with custom icon
+            const marker = new google.maps.Marker({
+                position: labelPosition,
+                map: mapInstance,
+                icon: {
+                    url: "data:image/svg+xml;charset=UTF-8," +
+                        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">
+                ${formatCapacity(capacity)} kW
+              </text>
+              ${layoutInfo
+                            ? `<text x="60" y="32" text-anchor="middle" font-family="Arial" font-size="10" fill="#6b7280">
+                ${layoutInfo.totalPanels}개 패널
+              </text>`
+                            : ""}
+            </svg>
+          `),
+                    scaledSize: new google.maps.Size(layoutInfo ? 120 : 80, layoutInfo ? 40 : 30),
+                    anchor: new google.maps.Point(layoutInfo ? 60 : 40, layoutInfo ? 20 : 15),
+                },
+                zIndex: 15000,
+            });
+            capacityMarker = marker;
+        }
+        capacityLabelsRef.current.push(capacityMarker);
+    };
+    // Polygon selection and editing functions
+    const selectPolygonWithMap = (polygon, mapInstance) => {
+        selectPolygon(polygon);
+        // Add rotation handle with map instance
+        setTimeout(() => {
+            addRotationHandle(polygon, mapInstance);
+        }, 100);
+    };
+    const selectPolygon = (polygon) => {
+        // Deselect previous polygon
+        if (selectedPolygon) {
+            selectedPolygon.setOptions({
+                strokeColor: "#059669",
+                strokeWeight: 2,
+                fillOpacity: 0.3,
+            });
+        }
+        // Deselect rectangle if selected
+        if (selectedRectangle) {
+            selectedRectangle.setOptions({
+                strokeColor: "#1e40af",
+                strokeWeight: 3,
+                fillOpacity: 0.3,
+            });
+            setSelectedRectangle(null);
+        }
+        // Select new polygon
+        setSelectedPolygon(polygon);
+        polygon.setOptions({
+            strokeColor: "#dc2626",
+            strokeWeight: 3,
+            fillOpacity: 0.5,
+        });
+    };
+    const deselectPolygon = () => {
+        if (selectedPolygon) {
+            selectedPolygon.setOptions({
+                strokeColor: "#059669",
+                strokeWeight: 2,
+                fillOpacity: 0.3,
+            });
+            setSelectedPolygon(null);
+        }
+        removeRotationHandle();
+    };
+    const savePolygonState = (polygon) => {
+        const path = polygon.getPath();
+        const coordinates = [];
+        for (let i = 0; i < path.getLength(); i++) {
+            const point = path.getAt(i);
+            coordinates.push({ lat: point.lat(), lng: point.lng() });
+        }
+        setUndoStack((prev) => [
+            ...prev.slice(-9),
+            {
+                // Keep last 10 states
+                type: "polygon_edit",
+                polygonId: polygonsRef.current.indexOf(polygon),
+                coordinates,
+                timestamp: Date.now(),
+            },
+        ]);
+        setRedoStack([]); // Clear redo stack when new action is performed
+    };
+    const deleteSelectedPolygon = () => {
+        if (selectedPolygon) {
+            const index = polygonsRef.current.indexOf(selectedPolygon);
+            if (index > -1) {
+                selectedPolygon.setMap(null);
+                polygonsRef.current.splice(index, 1);
+                setSelectedPolygon(null);
+                removeRotationHandle(); // Remove rotation handle when deleting
+                // Clear panels and redraw remaining shapes
+                clearCapacityLabels();
+                clearPanelLayoutOverlays();
+                if (showMeasurements) {
+                    clearMeasurements();
+                }
+                if (map) {
+                    refreshAllLabelsAndVisualizationsWithCalculation(map);
+                }
+                // Call delete callback
+                onPolygonDelete === null || onPolygonDelete === void 0 ? void 0 : onPolygonDelete(selectedPolygon);
+            }
+        }
+    };
+    const duplicateSelectedPolygon = () => {
+        if (selectedPolygon && map) {
+            const path = selectedPolygon.getPath();
+            const coordinates = [];
+            // Copy coordinates with slight offset
+            for (let i = 0; i < path.getLength(); i++) {
+                const point = path.getAt(i);
+                coordinates.push({
+                    lat: point.lat() + 0.0001, // Small offset
+                    lng: point.lng() + 0.0001,
+                });
+            }
+            const newPolygon = new google.maps.Polygon({
+                paths: coordinates,
+                fillColor: "#10b981",
+                fillOpacity: 0.3,
+                strokeWeight: 2,
+                strokeColor: "#059669",
+                clickable: true,
+                editable: true,
+                draggable: true,
+                map: map,
+            });
+            polygonsRef.current.push(newPolygon);
+            newPolygon.addListener("click", () => {
+                selectPolygon(newPolygon);
+            });
+            // Add drag listeners
+            newPolygon.addListener("dragstart", () => {
+                removeRotationHandle();
+            });
+            newPolygon.addListener("dragend", () => {
+                if (selectedPolygon === newPolygon && map) {
+                    setTimeout(() => {
+                        addRotationHandle(newPolygon, map);
+                    }, 50);
+                }
+                // 기존 레이블들 제거하고 새로 그리기
+                clearCapacityLabels();
+                clearPanelLayoutOverlays();
+                refreshAllLabelsAndVisualizationsWithCalculation(map);
+            });
+            const newPath = newPolygon.getPath();
+            let newEditingTimer = null;
+            const handleNewPathChange = () => {
+                savePolygonState(newPolygon);
+                onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(newPolygon);
+                if (selectedPolygon === newPolygon) {
+                    if (newEditingTimer) {
+                        clearTimeout(newEditingTimer);
+                    }
+                    removeRotationHandle();
+                    newEditingTimer = setTimeout(() => {
+                        if (selectedPolygon === newPolygon && map) {
+                            addRotationHandle(newPolygon, map);
+                        }
+                    }, 100);
+                }
+            };
+            newPath.addListener("set_at", handleNewPathChange);
+            newPath.addListener("insert_at", handleNewPathChange);
+            newPath.addListener("remove_at", handleNewPathChange);
+            // Add panel layout visualization for new polygon - 계산 결과 재사용
+            clearPanelLayoutOverlays();
+            refreshAllLabelsAndVisualizationsWithCalculation(map);
+            onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(newPolygon);
+        }
+    };
+    // Rectangle selection and editing functions
+    const selectRectangleWithMap = (rectangle, mapInstance) => {
+        selectRectangle(rectangle);
+        // Add rotation handle with map instance
+        setTimeout(() => {
+            addRotationHandle(rectangle, mapInstance);
+        }, 100);
+    };
+    const selectRectangle = (rectangle) => {
+        // Deselect previous polygon
+        if (selectedPolygon) {
+            selectedPolygon.setOptions({
+                strokeColor: "#059669",
+                strokeWeight: 2,
+                fillOpacity: 0.3,
+            });
+            setSelectedPolygon(null);
+        }
+        // Deselect previous rectangle
+        if (selectedRectangle) {
+            selectedRectangle.setOptions({
+                strokeColor: "#1e40af",
+                strokeWeight: 3,
+                fillOpacity: 0.3,
+            });
+        }
+        // Select new rectangle
+        setSelectedRectangle(rectangle);
+        rectangle.setOptions({
+            strokeColor: "#dc2626",
+            strokeWeight: 4,
+            fillOpacity: 0.5,
+        });
+    };
+    const deselectRectangle = () => {
+        if (selectedRectangle) {
+            selectedRectangle.setOptions({
+                strokeColor: "#1e40af",
+                strokeWeight: 3,
+                fillOpacity: 0.3,
+            });
+            setSelectedRectangle(null);
+        }
+        removeRotationHandle();
+    };
+    const saveRectangleState = (rectangle) => {
+        const bounds = rectangle.getBounds();
+        if (bounds) {
+            const ne = bounds.getNorthEast();
+            const sw = bounds.getSouthWest();
+            setUndoStack((prev) => [
+                ...prev.slice(-9),
+                {
+                    // Keep last 10 states
+                    type: "rectangle_edit",
+                    rectangleId: rectanglesRef.current.indexOf(rectangle),
+                    bounds: {
+                        north: ne.lat(),
+                        east: ne.lng(),
+                        south: sw.lat(),
+                        west: sw.lng(),
+                    },
+                    timestamp: Date.now(),
+                },
+            ]);
+        }
+    };
+    const deleteSelectedRectangle = () => {
+        if (selectedRectangle) {
+            const index = rectanglesRef.current.indexOf(selectedRectangle);
+            if (index > -1) {
+                // Convert rectangle to polygon for callback before deleting
+                const bounds = selectedRectangle.getBounds();
+                let polygonForCallback = null;
+                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());
+                    polygonForCallback = new google.maps.Polygon({
+                        paths: [sw, nw, ne, se],
+                    });
+                }
+                selectedRectangle.setMap(null);
+                rectanglesRef.current.splice(index, 1);
+                setSelectedRectangle(null);
+                removeRotationHandle(); // Remove rotation handle when deleting
+                // Clear panels and redraw remaining shapes
+                clearCapacityLabels();
+                clearPanelLayoutOverlays();
+                if (showMeasurements) {
+                    clearMeasurements();
+                }
+                if (map) {
+                    refreshAllLabelsAndVisualizationsWithCalculation(map);
+                }
+                // Call delete callback
+                if (polygonForCallback) {
+                    onPolygonDelete === null || onPolygonDelete === void 0 ? void 0 : onPolygonDelete(polygonForCallback);
+                }
+            }
+        }
+    };
+    const duplicateSelectedRectangle = () => {
+        if (selectedRectangle && map) {
+            const bounds = selectedRectangle.getBounds();
+            if (bounds) {
+                const ne = bounds.getNorthEast();
+                const sw = bounds.getSouthWest();
+                // Create new bounds with slight offset
+                const newBounds = new google.maps.LatLngBounds(new google.maps.LatLng(sw.lat() + 0.0001, sw.lng() + 0.0001), new google.maps.LatLng(ne.lat() + 0.0001, ne.lng() + 0.0001));
+                const newRectangle = new google.maps.Rectangle({
+                    bounds: newBounds,
+                    fillColor: "#3b82f6",
+                    fillOpacity: 0.3,
+                    strokeWeight: 3,
+                    strokeColor: "#1e40af",
+                    clickable: true,
+                    editable: true,
+                    draggable: true,
+                    map: map,
+                });
+                rectanglesRef.current.push(newRectangle);
+                newRectangle.addListener("click", () => {
+                    selectRectangle(newRectangle);
+                });
+                newRectangle.addListener("bounds_changed", () => {
+                    saveRectangleState(newRectangle);
+                    // Convert to polygon for callback
+                    const rectBounds = newRectangle.getBounds();
+                    if (rectBounds) {
+                        const rectNe = rectBounds.getNorthEast();
+                        const rectSw = rectBounds.getSouthWest();
+                        const nw = new google.maps.LatLng(rectNe.lat(), rectSw.lng());
+                        const se = new google.maps.LatLng(rectSw.lat(), rectNe.lng());
+                        const polygonFromRect = new google.maps.Polygon({
+                            paths: [rectSw, nw, rectNe, se],
+                        });
+                        onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(polygonFromRect);
+                    }
+                    // Update capacity label and measurements when shape changes
+                    const newRectTargetMap = newRectangle.getMap();
+                    if (newRectTargetMap) {
+                        clearCapacityLabels();
+                        clearPanelLayoutOverlays();
+                        if (showMeasurements) {
+                            clearMeasurements();
+                        }
+                        refreshAllLabelsAndVisualizationsWithCalculation(newRectTargetMap);
+                    }
+                });
+                // Convert to polygon for callback
+                const rectNe = newBounds.getNorthEast();
+                const rectSw = newBounds.getSouthWest();
+                const nw = new google.maps.LatLng(rectNe.lat(), rectSw.lng());
+                const se = new google.maps.LatLng(rectSw.lat(), rectNe.lng());
+                const polygonFromRect = new google.maps.Polygon({
+                    paths: [rectSw, nw, rectNe, se],
+                });
+                onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygonFromRect);
+            }
+        }
+    };
+    // Rotation functionality
+    const addRotationHandle = (shape, mapInstance) => {
+        var _a;
+        // Use provided map instance or fallback to hook map
+        const targetMap = mapInstance || map;
+        if (!targetMap) {
+            return;
+        }
+        removeRotationHandle(); // Remove existing handle
+        // Update current shape reference
+        currentShapeRef.current = shape;
+        const center = getShapeCenter(shape);
+        if (!center) {
+            return;
+        }
+        // Calculate top center position outside the shape
+        const shapeBounds = getShapeBounds(shape);
+        if (!shapeBounds)
+            return;
+        // Position handle at top center, outside the shape bounds
+        const handlePosition = new google.maps.LatLng(shapeBounds.south - 0.0002, // Position above the shape
+        (shapeBounds.east + shapeBounds.west) / 2 // Center horizontally
+        );
+        let rotationHandle;
+        // Check if map has a valid Map ID for AdvancedMarkerElement
+        const mapWithId = targetMap;
+        const hasMapId = (mapWithId === null || mapWithId === void 0 ? void 0 : mapWithId.getMapId) && mapWithId.getMapId();
+        if (hasMapId && ((_a = google.maps.marker) === null || _a === void 0 ? void 0 : _a.AdvancedMarkerElement)) {
+            // Use AdvancedMarkerElement if Map ID is available
+            const rotationIconElement = document.createElement("div");
+            rotationIconElement.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="cursor: pointer;">
+          <circle cx="12" cy="12" r="10" fill="#ff0000" stroke="#000000" stroke-width="2"/>
+          <text x="12" y="16" text-anchor="middle" fill="white" font-size="12">↻</text>
+        </svg>
+      `;
+            rotationIconElement.title = "Click and drag around to rotate";
+            rotationHandle = new google.maps.marker.AdvancedMarkerElement({
+                position: handlePosition,
+                map: targetMap,
+                content: rotationIconElement,
+                zIndex: 10000,
+            });
+        }
+        else {
+            // Fallback to regular Marker
+            rotationHandle = new google.maps.Marker({
+                position: handlePosition,
+                map: targetMap,
+                icon: {
+                    url: "data:image/svg+xml;charset=UTF-8," +
+                        encodeURIComponent(`
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <circle cx="12" cy="12" r="10" fill="#ff0000" stroke="#000000" stroke-width="2"/>
+              <text x="12" y="16" text-anchor="middle" fill="white" font-size="12">↻</text>
+            </svg>
+          `),
+                    scaledSize: new google.maps.Size(24, 24),
+                    anchor: new google.maps.Point(12, 12),
+                },
+                title: "Click and drag around to rotate",
+                draggable: false,
+                zIndex: 10000,
+            });
+        }
+        rotationHandleRef.current = rotationHandle;
+        // Add rotation listeners using map mouse events
+        let isDragging = false;
+        let startAngle = 0;
+        let mapMouseMoveListener = null;
+        let mapMouseUpListener = null;
+        // Add appropriate event listener based on marker type
+        let handleClick;
+        if (rotationHandle instanceof google.maps.marker.AdvancedMarkerElement) {
+            // AdvancedMarkerElement event - use a simpler click handler
+            handleClick = rotationHandle.addListener("click", () => {
+                isDragging = true;
+                setIsRotating(true);
+                console.log("Rotation started - not clearing all panels");
+                // Use center position as initial reference for AdvancedMarkerElement
+                startAngle = 0; // Start from center
+                startRotationListeners();
+            });
+        }
+        else {
+            // Regular Marker event
+            handleClick = rotationHandle.addListener("mousedown", (event) => {
+                if (!event.latLng)
+                    return;
+                isDragging = true;
+                setIsRotating(true);
+                console.log("Rotation started - not clearing all panels");
+                // Calculate initial angle from center to click position
+                startAngle = calculateAngle(center, event.latLng);
+                startRotationListeners();
+            });
+        }
+        const startRotationListeners = () => {
+            // Add map listeners for mouse move and up
+            mapMouseMoveListener = targetMap.addListener("mousemove", (moveEvent) => {
+                if (!isDragging || !moveEvent.latLng)
+                    return;
+                // Use current shape reference (which may have been updated)
+                const currentShape = currentShapeRef.current;
+                if (!currentShape)
+                    return;
+                // Recalculate center in case shape changed
+                const currentCenter = getShapeCenter(currentShape);
+                if (!currentCenter)
+                    return;
+                const currentAngle = calculateAngle(currentCenter, moveEvent.latLng);
+                const angleDiff = currentAngle - startAngle;
+                // Rotate the current shape
+                rotateShape(currentShape, currentCenter, angleDiff, targetMap);
+                // Update start angle for next move event
+                startAngle = currentAngle;
+            });
+            mapMouseUpListener = targetMap.addListener("mouseup", () => {
+                isDragging = false;
+                setIsRotating(false);
+                // Clean up listeners
+                if (mapMouseMoveListener) {
+                    google.maps.event.removeListener(mapMouseMoveListener);
+                    mapMouseMoveListener = null;
+                }
+                if (mapMouseUpListener) {
+                    google.maps.event.removeListener(mapMouseUpListener);
+                    mapMouseUpListener = null;
+                }
+                console.log("Rotation completed - redrawing all panels");
+                console.log("Selected polygon:", selectedPolygon);
+                console.log("Selected rectangle:", selectedRectangle);
+                console.log("Current shape ref:", currentShapeRef.current);
+                // Trigger edit callback for the rotated shape
+                const currentShape = currentShapeRef.current;
+                if (currentShape && currentShape instanceof google.maps.Polygon) {
+                    onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(currentShape);
+                }
+                else if (selectedPolygon) {
+                    onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(selectedPolygon);
+                }
+                else if (selectedRectangle) {
+                    const bounds = selectedRectangle.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);
+                    }
+                }
+                // Clear all panels and redraw all shapes
+                clearCapacityLabels();
+                clearPanelLayoutOverlays();
+                if (showMeasurements) {
+                    clearMeasurements();
+                }
+                // Redraw all shapes using the refresh function
+                console.log("Refreshing all labels and visualizations after rotation");
+                refreshAllLabelsAndVisualizationsWithCalculation(targetMap);
+            });
+        };
+        // Store listener reference for cleanup
+        rotationListenerRef.current = handleClick;
+    };
+    const removeRotationHandle = () => {
+        if (rotationHandleRef.current) {
+            if (rotationHandleRef.current instanceof
+                google.maps.marker.AdvancedMarkerElement) {
+                rotationHandleRef.current.map = null; // Remove AdvancedMarkerElement from map
+            }
+            else {
+                rotationHandleRef.current.setMap(null); // Remove regular Marker from map
+            }
+            rotationHandleRef.current = null;
+        }
+        if (rotationListenerRef.current) {
+            google.maps.event.removeListener(rotationListenerRef.current);
+            rotationListenerRef.current = null;
+        }
+        currentShapeRef.current = null;
+        setIsRotating(false);
+    };
+    const getShapeCenter = (shape) => {
+        if (shape instanceof google.maps.Polygon) {
+            const path = shape.getPath();
+            let centroidLat = 0;
+            let centroidLng = 0;
+            const pathLength = path.getLength();
+            for (let i = 0; i < pathLength; i++) {
+                const point = path.getAt(i);
+                centroidLat += point.lat();
+                centroidLng += point.lng();
+            }
+            const center = new google.maps.LatLng(centroidLat / pathLength, centroidLng / pathLength);
+            return center;
+        }
+        else if (shape instanceof google.maps.Rectangle) {
+            const bounds = shape.getBounds();
+            if (bounds) {
+                const center = bounds.getCenter();
+                return center;
+            }
+            else {
+                return null;
+            }
+        }
+        return null;
+    };
+    const getShapeBounds = (shape) => {
+        if (shape instanceof google.maps.Polygon) {
+            const path = shape.getPath();
+            if (path.getLength() === 0)
+                return null;
+            let north = -90, south = 90, east = -180, west = 180;
+            for (let i = 0; i < path.getLength(); i++) {
+                const point = path.getAt(i);
+                const lat = point.lat();
+                const lng = point.lng();
+                north = Math.max(north, lat);
+                south = Math.min(south, lat);
+                east = Math.max(east, lng);
+                west = Math.min(west, lng);
+            }
+            return { north, south, east, west };
+        }
+        else if (shape instanceof google.maps.Rectangle) {
+            const bounds = shape.getBounds();
+            if (bounds) {
+                const ne = bounds.getNorthEast();
+                const sw = bounds.getSouthWest();
+                return {
+                    north: ne.lat(),
+                    south: sw.lat(),
+                    east: ne.lng(),
+                    west: sw.lng(),
+                };
+            }
+        }
+        return null;
+    };
+    const calculateAngle = (center, point) => {
+        const dx = point.lng() - center.lng();
+        const dy = point.lat() - center.lat();
+        return Math.atan2(dy, dx);
+    };
+    const rotateShape = (shape, center, angle, mapInstance) => {
+        if (shape instanceof google.maps.Polygon) {
+            rotatePolygon(shape, center, angle);
+        }
+        else if (shape instanceof google.maps.Rectangle) {
+            rotateRectangle(shape, center, angle, mapInstance);
+        }
+    };
+    const rotatePolygon = (polygon, center, angle) => {
+        const path = polygon.getPath();
+        const newPath = [];
+        for (let i = 0; i < path.getLength(); i++) {
+            const point = path.getAt(i);
+            const rotatedPoint = rotatePoint(point, center, angle);
+            newPath.push(rotatedPoint);
+        }
+        polygon.setPath(newPath);
+    };
+    const rotateRectangle = (rectangle, center, angle, mapInstance) => {
+        // Rectangle rotation is tricky because Google Maps Rectangle can only be axis-aligned
+        // We'll convert it to a polygon for rotation, then replace the rectangle
+        const bounds = rectangle.getBounds();
+        const targetMap = mapInstance || map;
+        if (!bounds) {
+            return;
+        }
+        if (!targetMap) {
+            return;
+        }
+        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());
+        // Rotate all corners
+        const rotatedSw = rotatePoint(sw, center, angle);
+        const rotatedNw = rotatePoint(nw, center, angle);
+        const rotatedNe = rotatePoint(ne, center, angle);
+        const rotatedSe = rotatePoint(se, center, angle);
+        // Remove the old rectangle
+        const rectIndex = rectanglesRef.current.indexOf(rectangle);
+        if (rectIndex > -1) {
+            rectangle.setMap(null);
+            rectanglesRef.current.splice(rectIndex, 1);
+        }
+        // Create a new polygon with the rotated corners
+        const rotatedPolygon = new google.maps.Polygon({
+            paths: [rotatedSw, rotatedNw, rotatedNe, rotatedSe],
+            fillColor: "#3b82f6",
+            fillOpacity: 0.3,
+            strokeWeight: 3,
+            strokeColor: "#1e40af",
+            clickable: true,
+            editable: true,
+            draggable: true,
+            map: targetMap,
+        });
+        // Add to polygons array and set up listeners
+        polygonsRef.current.push(rotatedPolygon);
+        rotatedPolygon.addListener("click", (event) => {
+            event.stop();
+            selectPolygonWithMap(rotatedPolygon, targetMap);
+        });
+        // Add drag listeners
+        rotatedPolygon.addListener("dragstart", () => {
+            removeRotationHandle();
+        });
+        rotatedPolygon.addListener("dragend", () => {
+            if (selectedPolygon === rotatedPolygon) {
+                setTimeout(() => {
+                    addRotationHandle(rotatedPolygon, targetMap);
+                }, 50);
+            }
+            // 기존 레이블들 제거하고 새로 그리기
+            clearCapacityLabels();
+            clearPanelLayoutOverlays();
+            refreshAllLabelsAndVisualizationsWithCalculation(targetMap);
+        });
+        // Add path change listeners
+        const path = rotatedPolygon.getPath();
+        let rotatedEditingTimer = null;
+        const handleRotatedPathChange = () => {
+            savePolygonState(rotatedPolygon);
+            onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(rotatedPolygon);
+            // Update capacity label and measurements when converted polygon changes
+            const rotatedTargetMap = rotatedPolygon.getMap();
+            if (rotatedTargetMap) {
+                clearCapacityLabels();
+                clearPanelLayoutOverlays();
+                if (showMeasurements) {
+                    clearMeasurements();
+                }
+                refreshAllLabelsAndVisualizationsWithCalculation(rotatedTargetMap);
+            }
+            if (selectedPolygon === rotatedPolygon) {
+                if (rotatedEditingTimer) {
+                    clearTimeout(rotatedEditingTimer);
+                }
+                removeRotationHandle();
+                rotatedEditingTimer = setTimeout(() => {
+                    if (selectedPolygon === rotatedPolygon) {
+                        addRotationHandle(rotatedPolygon, targetMap);
+                    }
+                }, 100);
+            }
+        };
+        path.addListener("set_at", handleRotatedPathChange);
+        path.addListener("insert_at", handleRotatedPathChange);
+        path.addListener("remove_at", handleRotatedPathChange);
+        // Update selection to the new polygon
+        setSelectedRectangle(null);
+        setSelectedPolygon(rotatedPolygon);
+        rotatedPolygon.setOptions({
+            strokeColor: "#dc2626",
+            strokeWeight: 3,
+            fillOpacity: 0.5,
+        });
+        // Update current shape reference immediately
+        currentShapeRef.current = rotatedPolygon;
+        // Don't clear or draw panels during rotation - wait for rotation to complete
+        console.log("Rectangle converted to polygon during rotation - not touching any panels");
+        // Trigger callback
+        onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(rotatedPolygon);
+    };
+    const rotatePoint = (point, center, angle) => {
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const dx = point.lng() - center.lng();
+        const dy = point.lat() - center.lat();
+        const rotatedX = dx * cos - dy * sin;
+        const rotatedY = dx * sin + dy * cos;
+        return new google.maps.LatLng(center.lat() + rotatedY, center.lng() + rotatedX);
+    };
+    // Keyboard shortcuts
+    (0, react_1.useEffect)(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Delete") {
+                if (selectedPolygon) {
+                    deleteSelectedPolygon();
+                }
+                else if (selectedRectangle) {
+                    deleteSelectedRectangle();
+                }
+            }
+            if (event.key === "Escape") {
+                deselectPolygon();
+                deselectRectangle();
+                removeRotationHandle();
+            }
+            if (event.ctrlKey || event.metaKey) {
+                if (event.key === "d") {
+                    event.preventDefault();
+                    if (selectedPolygon) {
+                        duplicateSelectedPolygon();
+                    }
+                    else if (selectedRectangle) {
+                        duplicateSelectedRectangle();
+                    }
+                }
+                if (event.key === "z" && undoStack.length > 0) {
+                    event.preventDefault();
+                    // Implement undo functionality
+                }
+            }
+        };
+        if (map) {
+            document.addEventListener("keydown", handleKeyDown);
+            return () => document.removeEventListener("keydown", handleKeyDown);
+        }
+    }, [map, selectedPolygon, selectedRectangle, undoStack]);
+    const clearMeasurements = () => {
+        measurementLabelsRef.current.forEach((label) => label.close());
+        measurementLabelsRef.current = [];
+    };
+    const formatCapacity = (capacity) => {
+        return capacity.toLocaleString("en-US", {
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        });
+    };
+    // layoutInfo를 파라미터로 받는 새로운 함수들
+    const addPolygonCapacityLabelWithLayoutInfo = (polygon, layoutInfo, capacity, mapInstance) => {
+        var _a;
+        const path = polygon.getPath();
+        // Calculate polygon bounds for label placement above the polygon
+        const bounds = new google.maps.LatLngBounds();
+        for (let i = 0; i < path.getLength(); i++) {
+            bounds.extend(path.getAt(i));
+        }
+        const ne = bounds.getNorthEast();
+        const sw = bounds.getSouthWest();
+        const center = bounds.getCenter();
+        // Position label above the polygon with fixed offset
+        const latOffset = 0.00007; // 적당한 고정 오프셋
+        const labelPosition = new google.maps.LatLng(ne.lat() + latOffset, // Position above the top edge
+        center.lng() // Centered horizontally
+        );
+        // Create label element with layout information
+        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;">
+          ${formatCapacity(capacity)} kW
+        </div>
+        <div style="font-size: 11px; color: #6b7280; text-align: center; margin-top: 2px;">
+          ${layoutInfo.totalPanels}개 패널
+        </div>
+      </div>
+    `;
+        // Check if we can use AdvancedMarkerElement
+        const mapWithId = mapInstance;
+        const hasMapId = (mapWithId === null || mapWithId === void 0 ? void 0 : mapWithId.getMapId) && mapWithId.getMapId();
+        let capacityMarker;
+        if (hasMapId && ((_a = google.maps.marker) === null || _a === void 0 ? void 0 : _a.AdvancedMarkerElement)) {
+            capacityMarker = new google.maps.marker.AdvancedMarkerElement({
+                position: labelPosition,
+                map: mapInstance,
+                content: labelElement,
+                zIndex: 15000, // Higher than rotation handle (10000)
+            });
+        }
+        else {
+            // Fallback: use a simple marker with custom icon
+            const marker = new google.maps.Marker({
+                position: labelPosition,
+                map: mapInstance,
+                icon: {
+                    url: "data:image/svg+xml;charset=UTF-8," +
+                        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">
+                ${formatCapacity(capacity)} kW
+              </text>
+              <text x="60" y="32" text-anchor="middle" font-family="Arial" font-size="10" fill="#6b7280">
+                ${layoutInfo.columns}×${layoutInfo.rows} (${layoutInfo.orientation})
+              </text>
+            </svg>
+          `),
+                    scaledSize: new google.maps.Size(120, 40),
+                    anchor: new google.maps.Point(60, 20),
+                },
+                zIndex: 15000, // Higher than rotation handle (10000)
+            });
+            capacityMarker = marker;
+        }
+        capacityLabelsRef.current.push(capacityMarker);
+    };
+    const addRectangleCapacityLabelWithLayoutInfo = (rectangle, layoutInfo, capacity, mapInstance) => {
+        var _a;
+        const bounds = rectangle.getBounds();
+        if (!bounds)
+            return;
+        const ne = bounds.getNorthEast();
+        const sw = bounds.getSouthWest();
+        // Position label above the rectangle with fixed offset
+        const center = bounds.getCenter();
+        const latOffset = 0.00007; // 약 80-90m 정도의 고정 오프셋
+        const labelPosition = new google.maps.LatLng(ne.lat() + latOffset, center.lng());
+        // Create label element with layout information
+        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: #2563eb; text-align: center;">
+          ${formatCapacity(capacity)} kW
+        </div>
+        <div style="font-size: 11px; color: #6b7280; text-align: center; margin-top: 2px;">
+          ${layoutInfo.totalPanels}개 패널 (${layoutInfo.columns}×${layoutInfo.rows})
+        </div>
+      </div>
+    `;
+        // Check if we can use AdvancedMarkerElement
+        const mapWithId = mapInstance;
+        const hasMapId = (mapWithId === null || mapWithId === void 0 ? void 0 : mapWithId.getMapId) && mapWithId.getMapId();
+        let capacityMarker;
+        if (hasMapId && ((_a = google.maps.marker) === null || _a === void 0 ? void 0 : _a.AdvancedMarkerElement)) {
+            capacityMarker = new google.maps.marker.AdvancedMarkerElement({
+                position: labelPosition,
+                map: mapInstance,
+                content: labelElement,
+                zIndex: 15000, // Higher than rotation handle (10000)
+            });
+        }
+        else {
+            // Fallback: use a simple marker with custom icon
+            const marker = new google.maps.Marker({
+                position: labelPosition,
+                map: mapInstance,
+                icon: {
+                    url: "data:image/svg+xml;charset=UTF-8," +
+                        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="#2563eb">
+                ${formatCapacity(capacity)} kW
+              </text>
+              <text x="60" y="32" text-anchor="middle" font-family="Arial" font-size="10" fill="#6b7280">
+                ${layoutInfo.columns}×${layoutInfo.rows} (${layoutInfo.orientation})
+              </text>
+            </svg>
+          `),
+                    scaledSize: new google.maps.Size(120, 40),
+                    anchor: new google.maps.Point(60, 20),
+                },
+                zIndex: 15000, // Higher than rotation handle (10000)
+            });
+            capacityMarker = marker;
+        }
+        capacityLabelsRef.current.push(capacityMarker);
+    };
+    // layoutInfo를 파라미터로 받는 측정 정보 함수들
+    const addPolygonMeasurementsWithLayoutInfo = (polygon, layoutInfo, capacity, mapInstance) => {
+        const path = polygon.getPath();
+        // Calculate centroid for label placement
+        let centroidLat = 0;
+        let centroidLng = 0;
+        const pathLength = path.getLength();
+        for (let i = 0; i < pathLength; i++) {
+            const point = path.getAt(i);
+            centroidLat += point.lat();
+            centroidLng += point.lng();
+        }
+        centroidLat /= pathLength;
+        centroidLng /= pathLength;
+        const infoWindow = new google.maps.InfoWindow({
+            position: { lat: centroidLat, lng: centroidLng },
+            content: `
+        <div class="text-xs bg-white p-2 rounded shadow-lg border">
+          <div class="font-semibold text-gray-800">Area: ${layoutInfo.area.toFixed(1)} m²</div>
+          <div class="text-gray-600">Layout: ${layoutInfo.columns}×${layoutInfo.rows} (${layoutInfo.orientation})</div>
+          <div class="text-gray-600">Panels: ${layoutInfo.totalPanels} units</div>
+          <div class="text-gray-600">Capacity: ${layoutInfo.capacity.toFixed(1)} kW</div>
+        </div>
+      `,
+            disableAutoPan: true,
+        });
+        infoWindow.open(mapInstance);
+        measurementLabelsRef.current.push(infoWindow);
+    };
+    const addRectangleMeasurementsWithLayoutInfo = (rectangle, layoutInfo, capacity, mapInstance) => {
+        const bounds = rectangle.getBounds();
+        if (!bounds)
+            return;
+        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());
+        // Calculate center for label placement
+        const center = bounds.getCenter();
+        const infoWindow = new google.maps.InfoWindow({
+            position: center,
+            content: `
+        <div class="text-xs bg-white p-2 rounded shadow-lg border">
+          <div class="font-semibold text-gray-800">Area: ${layoutInfo.area.toFixed(1)} m²</div>
+          <div class="text-gray-600">Layout: ${layoutInfo.columns}×${layoutInfo.rows} (${layoutInfo.orientation})</div>
+          <div class="text-gray-600">Panels: ${layoutInfo.totalPanels} units</div>
+          <div class="text-gray-600">Capacity: ${layoutInfo.capacity.toFixed(1)} kW</div>
+        </div>
+      `,
+            disableAutoPan: true,
+        });
+        infoWindow.open(mapInstance);
+        measurementLabelsRef.current.push(infoWindow);
+    };
+    // layoutInfo를 파라미터로 받는 패널 시각화 함수들
+    const addPanelLayoutVisualizationWithLayoutInfo = (polygon, layoutInfo, mapInstance) => {
+        if (layoutInfo.totalPanels === 0) {
+            return;
+        }
+        try {
+            // 새로운 그리드 기반 패널 위치 정보 사용
+            if (layoutInfo.validPanelPositions &&
+                layoutInfo.validPanelPositions.length > 0) {
+                const { rotationAngle, edges, validPanelPositions } = layoutInfo;
+                console.log("Polygon-aware panel layout:");
+                console.log(`Total valid panels: ${validPanelPositions.length}`);
+                console.log(`Rotation angle: ${(rotationAngle * 180) / Math.PI}°`);
+                // 디버깅용 - 변 길이 출력
+                if (edges && edges.length > 0) {
+                    console.log("Edge lengths (meters):");
+                    edges.forEach((edge, index) => {
+                        console.log(`  Edge ${index}: ${edge.distance.toFixed(2)}m`);
+                    });
+                }
+                // 패널 크기 계산 (미터 단위)
+                const panelWidthM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.WIDTH_MM / 1000;
+                const panelHeightM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.HEIGHT_MM / 1000;
+                // 배치 방향에 따른 실제 패널 크기
+                let actualPanelWidth, actualPanelHeight;
+                if (layoutInfo.orientation === "landscape") {
+                    actualPanelWidth = panelWidthM;
+                    actualPanelHeight = panelHeightM;
+                }
+                else {
+                    actualPanelWidth = panelHeightM;
+                    actualPanelHeight = panelWidthM;
+                }
+                // 각 유효한 패널 위치에 패널 그리기
+                validPanelPositions.forEach((position) => {
+                    // 패널 중심 좌표는 이미 계산되어 있음
+                    const panelCenterLat = position.lat;
+                    const panelCenterLng = position.lng;
+                    // 패널의 네 모서리 계산 (회전 고려)
+                    const halfWidth = actualPanelWidth / 2;
+                    const halfHeight = actualPanelHeight / 2;
+                    const panelCorners = [
+                        { x: -halfWidth, y: -halfHeight },
+                        { x: halfWidth, y: -halfHeight },
+                        { x: halfWidth, y: halfHeight },
+                        { x: -halfWidth, y: halfHeight },
+                    ];
+                    const cos = Math.cos(rotationAngle);
+                    const sin = Math.sin(rotationAngle);
+                    const rotatedPanelCorners = panelCorners.map((corner) => {
+                        const rotX = corner.x * cos - corner.y * sin;
+                        const rotY = corner.x * sin + corner.y * cos;
+                        return {
+                            lat: panelCenterLat + rotY / 111320,
+                            lng: panelCenterLng +
+                                rotX / (111320 * Math.cos((panelCenterLat * Math.PI) / 180)),
+                        };
+                    });
+                    // 패널을 polygon으로 표시
+                    const panelPolygon = new google.maps.Polygon({
+                        paths: rotatedPanelCorners,
+                        map: mapInstance,
+                        fillColor: "#fbbf24", // 황금색
+                        fillOpacity: 0.4,
+                        strokeColor: "#f59e0b",
+                        strokeWeight: 1,
+                        strokeOpacity: 0.8,
+                        clickable: false,
+                        zIndex: 2000,
+                    });
+                    panelLayoutOverlaysRef.current.push(panelPolygon);
+                });
+                console.log(`Drew ${validPanelPositions.length} panels inside polygon at ${((rotationAngle * 180) /
+                    Math.PI).toFixed(1)}° rotation (${layoutInfo.orientation} orientation)`);
+            }
+            else {
+                // 기존 fallback 방식 사용
+                return addPanelLayoutVisualizationWithLayoutInfoFallback(polygon, layoutInfo, mapInstance);
+            }
+        }
+        catch (error) {
+            console.warn("Failed to add panel layout visualization:", error);
+        }
+    };
+    // Fallback function for non-rectangular polygons
+    const addPanelLayoutVisualizationWithLayoutInfoFallback = (polygon, layoutInfo, mapInstance) => {
+        if (layoutInfo.totalPanels === 0) {
+            return;
+        }
+        try {
+            // 폴리곤의 바운딩 박스 계산
+            const path = polygon.getPath();
+            const bounds = new google.maps.LatLngBounds();
+            for (let i = 0; i < path.getLength(); i++) {
+                bounds.extend(path.getAt(i));
+            }
+            const ne = bounds.getNorthEast();
+            const sw = bounds.getSouthWest();
+            const nw = new google.maps.LatLng(ne.lat(), sw.lng());
+            // 바운딩 박스의 실제 거리 계산
+            const widthM = google.maps.geometry.spherical.computeDistanceBetween(nw, ne);
+            const heightM = google.maps.geometry.spherical.computeDistanceBetween(sw, nw);
+            // 패널 크기 계산 (미터 단위)
+            const panelWidthM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.WIDTH_MM / 1000;
+            const panelHeightM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.HEIGHT_MM / 1000;
+            // 배치 방향에 따른 실제 패널 크기
+            let actualPanelWidth, actualPanelHeight;
+            if (layoutInfo.orientation === "landscape") {
+                actualPanelWidth = panelWidthM;
+                actualPanelHeight = panelHeightM;
+            }
+            else {
+                actualPanelWidth = panelHeightM;
+                actualPanelHeight = panelWidthM;
+            }
+            // 패널 간격 계산
+            const spacingWidth = widthM / layoutInfo.columns;
+            const spacingHeight = heightM / layoutInfo.rows;
+            // 각 패널의 위치를 계산하여 시각화
+            for (let row = 0; row < layoutInfo.rows; row++) {
+                for (let col = 0; col < layoutInfo.columns; col++) {
+                    // 패널의 중심점 계산 (위도/경도)
+                    const panelCenterLat = sw.lat() + (heightM - (row + 0.5) * spacingHeight) / 111320;
+                    const panelCenterLng = sw.lng() +
+                        ((col + 0.5) * spacingWidth) /
+                            (111320 * Math.cos((panelCenterLat * Math.PI) / 180));
+                    // 패널의 바운딩 박스 계산
+                    const halfPanelHeight = actualPanelHeight / 2 / 111320;
+                    const halfPanelWidth = actualPanelWidth /
+                        2 /
+                        (111320 * Math.cos((panelCenterLat * Math.PI) / 180));
+                    const panelBounds = new google.maps.LatLngBounds(new google.maps.LatLng(panelCenterLat - halfPanelHeight, panelCenterLng - halfPanelWidth), new google.maps.LatLng(panelCenterLat + halfPanelHeight, panelCenterLng + halfPanelWidth));
+                    // 패널을 작은 직사각형으로 표시
+                    const panelRect = new google.maps.Rectangle({
+                        bounds: panelBounds,
+                        map: mapInstance,
+                        fillColor: "#fbbf24",
+                        fillOpacity: 0.6,
+                        strokeColor: "#f59e0b",
+                        strokeWeight: 1,
+                        strokeOpacity: 0.8,
+                        clickable: false,
+                        zIndex: 2000,
+                    });
+                    panelLayoutOverlaysRef.current.push(panelRect);
+                }
+            }
+        }
+        catch (error) {
+            console.warn("Failed to add fallback panel layout visualization:", error);
+        }
+    };
+    const addRectanglePanelLayoutVisualizationWithLayoutInfo = (rectangle, layoutInfo, mapInstance) => {
+        if (layoutInfo.totalPanels === 0) {
+            return;
+        }
+        try {
+            const bounds = rectangle.getBounds();
+            if (!bounds)
+                return;
+            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());
+            // Rectangle의 중심점 가져오기 (회전 각도는 0으로 설정)
+            const center = bounds.getCenter();
+            const rotationAngle = 0;
+            // 바운딩 박스의 실제 거리 계산
+            const widthM = google.maps.geometry.spherical.computeDistanceBetween(nw, ne);
+            const heightM = google.maps.geometry.spherical.computeDistanceBetween(sw, nw);
+            // 패널 크기 계산 (미터 단위)
+            const panelWidthM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.WIDTH_MM / 1000; // mm → m 변환
+            const panelHeightM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.HEIGHT_MM / 1000; // mm → m 변환
+            // 배치 방향에 따른 실제 패널 크기
+            let actualPanelWidth, actualPanelHeight;
+            if (layoutInfo.orientation === "landscape") {
+                actualPanelWidth = panelWidthM;
+                actualPanelHeight = panelHeightM;
+            }
+            else {
+                actualPanelWidth = panelHeightM;
+                actualPanelHeight = panelWidthM;
+            }
+            // 패널 간격 계산
+            const spacingWidth = widthM / layoutInfo.columns;
+            const spacingHeight = heightM / layoutInfo.rows;
+            // 각 패널의 위치를 계산하여 시각화
+            for (let row = 0; row < layoutInfo.rows; row++) {
+                for (let col = 0; col < layoutInfo.columns; col++) {
+                    // 패널의 중심점 계산 (회전 전 상대적 위치)
+                    const relativeX = (col + 0.5) * spacingWidth - widthM / 2;
+                    const relativeY = heightM / 2 - (row + 0.5) * spacingHeight;
+                    // 회전 변환 적용
+                    const cos = Math.cos(rotationAngle);
+                    const sin = Math.sin(rotationAngle);
+                    const rotatedX = relativeX * cos - relativeY * sin;
+                    const rotatedY = relativeX * sin + relativeY * cos;
+                    // 실제 지도 좌표로 변환
+                    const panelCenterLat = center.lat() + rotatedY / 111320;
+                    const panelCenterLng = center.lng() +
+                        rotatedX / (111320 * Math.cos((center.lat() * Math.PI) / 180));
+                    // 패널의 네 모서리 계산 (회전 고려)
+                    const halfWidth = actualPanelWidth / 2;
+                    const halfHeight = actualPanelHeight / 2;
+                    const corners = [
+                        { x: -halfWidth, y: -halfHeight },
+                        { x: halfWidth, y: -halfHeight },
+                        { x: halfWidth, y: halfHeight },
+                        { x: -halfWidth, y: halfHeight },
+                    ];
+                    const rotatedCorners = corners.map((corner) => {
+                        const rotX = corner.x * cos - corner.y * sin;
+                        const rotY = corner.x * sin + corner.y * cos;
+                        return {
+                            lat: panelCenterLat + rotY / 111320,
+                            lng: panelCenterLng +
+                                rotX / (111320 * Math.cos((panelCenterLat * Math.PI) / 180)),
+                        };
+                    });
+                    // 회전된 패널을 polygon으로 표시
+                    const panelPolygon = new google.maps.Polygon({
+                        paths: rotatedCorners,
+                        map: mapInstance,
+                        fillColor: "#fbbf24", // 황금색
+                        fillOpacity: 0.6,
+                        strokeColor: "#f59e0b",
+                        strokeWeight: 1,
+                        strokeOpacity: 0.8,
+                        clickable: false,
+                        zIndex: 2000,
+                    });
+                    // Rectangle 타입 배열에 추가하기 위해 캐스팅 (실제로는 Polygon이지만)
+                    panelLayoutOverlaysRef.current.push(panelPolygon);
+                }
+            }
+        }
+        catch (error) {
+            console.warn("Failed to add rectangle panel layout visualization:", error);
+        }
+    };
+    const clearCapacityLabels = () => {
+        capacityLabelsRef.current.forEach((label) => {
+            if (label instanceof google.maps.marker.AdvancedMarkerElement) {
+                label.map = null;
+            }
+            else {
+                label.setMap(null);
+            }
+        });
+        capacityLabelsRef.current = [];
+    };
+    const refreshAllLabelsAndVisualizationsWithCalculation = (mapInstance) => {
+        // Polygons 처리
+        polygonsRef.current.forEach((polygon) => {
+            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);
+            }
+        });
+        // Rectangles 처리
+        rectanglesRef.current.forEach((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 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);
+                }
+            }
+        });
+    };
+    // 패널 레이아웃 오버레이 제거
+    const clearPanelLayoutOverlays = () => {
+        panelLayoutOverlaysRef.current.forEach((overlay) => {
+            // Rectangle과 Polygon 모두 처리 가능하도록
+            if (overlay && typeof overlay.setMap === "function") {
+                overlay.setMap(null);
+            }
+        });
+        panelLayoutOverlaysRef.current = [];
+    };
+    const clearSpacingWarnings = () => {
+        spacingWarningOverlaysRef.current.forEach((circle) => circle.setMap(null));
+        spacingWarningOverlaysRef.current = [];
+    };
+    const clearAllShapes = () => {
+        // Clear all polygons from map
+        polygonsRef.current.forEach((polygon) => {
+            polygon.setMap(null);
+        });
+        polygonsRef.current.length = 0;
+        // Clear all rectangles from map
+        rectanglesRef.current.forEach((rectangle) => {
+            rectangle.setMap(null);
+        });
+        rectanglesRef.current.length = 0;
+        // Clear measurements, capacity labels and warnings
+        clearMeasurements();
+        clearCapacityLabels();
+        clearSpacingWarnings();
+        clearPanelLayoutOverlays();
+        // Remove rotation handle and reset selection
+        removeRotationHandle();
+        setSelectedPolygon(null);
+        setSelectedRectangle(null);
+    };
+    // Clear trigger effect
+    (0, react_1.useEffect)(() => {
+        if (clearTrigger && clearTrigger > 0) {
+            clearAllShapes();
+        }
+    }, [clearTrigger]);
+    // Measurements effect
+    (0, react_1.useEffect)(() => {
+        if (!showMeasurements) {
+            clearMeasurements();
+        }
+        else {
+            // Add measurements to existing shapes when measurements are enabled
+            if (map) {
+                polygonsRef.current.forEach((polygon) => {
+                    const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(polygon);
+                    addPolygonMeasurementsWithLayoutInfo(polygon, layoutInfo, layoutInfo.capacity, map);
+                });
+                rectanglesRef.current.forEach((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 rectPolygon = new google.maps.Polygon({
+                            paths: [sw, nw, ne, se],
+                        });
+                        const layoutInfo = (0, solar_panel_calculator_1.calculatePanelLayoutFromPolygon)(rectPolygon);
+                        addRectangleMeasurementsWithLayoutInfo(rectangle, layoutInfo, layoutInfo.capacity, map);
+                    }
+                });
+            }
+        }
+    }, [showMeasurements, map]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (drawingManagerRef.current) {
+                drawingManagerRef.current.setMap(null);
+            }
+            // Clean up polygons
+            polygonsRef.current.forEach((polygon) => {
+                polygon.setMap(null);
+            });
+            polygonsRef.current.length = 0;
+            // Clean up rectangles
+            rectanglesRef.current.forEach((rectangle) => {
+                rectangle.setMap(null);
+            });
+            rectanglesRef.current.length = 0;
+            // Clean up other overlays
+            clearSpacingWarnings();
+            clearMeasurements();
+            clearCapacityLabels();
+            clearPanelLayoutOverlays();
+            removeRotationHandle();
+        };
+    }, []);
+    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.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..." })] }))] }));
+};
+exports.default = GoogleMaps;
+//# sourceMappingURL=google-maps.js.map