blue-chestnut-solar-expert 0.0.54 → 0.0.56

package/dist/collection/components/map-draw/map-draw.js

@@ -0,0 +1,797 @@
+import { getAssetPath, h, } from "@stencil/core";
+import { fetchSolarData, getBestFittingRoofSegment, getOptimalSolarPositionFully, } from "harmonia-sim";
+import { getBuildingImages } from "../../utils/solar";
+import { CanvasManager, CanvasUtils, renderRGB, Tool, } from "harmonia-draw";
+import { markRoofEdgeTool, moveTool, obstructionTool, roofTool, } from "../../utils/render/tools";
+import { DEFAULT_SOLAR_EXPERT_CONFIG, DEFAULT_SOLAR_PANEL_TYPE, } from "../../config";
+import { getPixelInMeters } from "../../utils/utils";
+import { BORDER_INSET } from "../../constants";
+import { getLanguageStrings } from "../../utils/lang/general";
+import { onChange, state } from "../../store";
+export class MapDraw {
+    apiKey = "";
+    config = DEFAULT_SOLAR_EXPERT_CONFIG;
+    solarPanel = DEFAULT_SOLAR_PANEL_TYPE;
+    enableSettings = false;
+    showInstructions = true;
+    showSettings = false;
+    showTutorial = false;
+    showMarkEdgeTutorial = false;
+    showAdditionalToolsTutorial = false;
+    additionalToolsTutorialShown = false;
+    firstPolygonClosed = false;
+    zoom = 1;
+    loadingState = "empty";
+    buildingInsightsLoaded = false;
+    buildingImagesLoaded = false;
+    rgbTiff = null;
+    currentTool = roofTool;
+    buildingInsights = null;
+    pixelInMeters = 0.2;
+    interaction = {
+        isDrawing: false,
+        isDragging: false,
+        lastTouchTime: 0,
+    };
+    currentPolygon = null;
+    solarSystem = {};
+    el;
+    canvasElement;
+    polygonCanvas;
+    polygonCtx;
+    canvasManager;
+    preventDefaultTouch;
+    gestureStartHandler;
+    gestureChangeHandler;
+    gestureEndHandler;
+    latitudeChangeListener;
+    longitudeChangeListener;
+    componentDidLoad() {
+        // Set up change listeners for latitude and longitude
+        this.latitudeChangeListener = () => {
+            if (state.latitude && state.longitude) {
+                this.loadingState = "loading";
+                this.buildingInsightsLoaded = false;
+                this.buildingImagesLoaded = false;
+                this.getBuildingImages();
+                this.getBuildingInsights();
+                // Reset tutorial states for new location
+                this.showTutorial = false;
+                this.showMarkEdgeTutorial = false;
+                this.showAdditionalToolsTutorial = false;
+                this.additionalToolsTutorialShown = false;
+                this.firstPolygonClosed = false;
+                // Show tutorial when coordinates are first set
+                this.showTutorial = true;
+            }
+        };
+        this.longitudeChangeListener = () => {
+            if (state.latitude && state.longitude) {
+                this.loadingState = "loading";
+                this.buildingInsightsLoaded = false;
+                this.buildingImagesLoaded = false;
+                this.getBuildingImages();
+                this.getBuildingInsights();
+                // Reset tutorial states for new location
+                this.showTutorial = false;
+                this.showMarkEdgeTutorial = false;
+                this.showAdditionalToolsTutorial = false;
+                this.additionalToolsTutorialShown = false;
+                this.firstPolygonClosed = false;
+                // Show tutorial when coordinates are first set
+                this.showTutorial = true;
+            }
+        };
+        onChange("latitude", this.latitudeChangeListener);
+        onChange("longitude", this.longitudeChangeListener);
+        // Load data if coordinates already exist
+        if (state.latitude && state.longitude) {
+            this.loadingState = "loading";
+            this.buildingInsightsLoaded = false;
+            this.buildingImagesLoaded = false;
+            this.getBuildingInsights();
+            this.getBuildingImages();
+            // Show tutorial if coordinates already exist
+            this.showTutorial = true;
+        }
+        // Wait for the next frame to ensure DOM is ready
+        requestAnimationFrame(() => {
+            this.initializeCanvas();
+            const rect = this.canvasElement.getBoundingClientRect();
+            this.sizeCanvas(rect.width, rect.height);
+        });
+    }
+    initializeCanvas() {
+        if (this.canvasElement && this.polygonCanvas) {
+            // Set initial canvas sizes based on container
+            const rect = this.canvasElement.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                this.canvasElement.width = rect.width;
+                this.canvasElement.height = rect.height;
+                this.polygonCanvas.width = rect.width;
+                this.polygonCanvas.height = rect.height;
+                this.polygonCtx = this.polygonCanvas.getContext("2d");
+            }
+        }
+        // Add resize listener
+        window.addEventListener("resize", this.handleResize);
+    }
+    handleResize = () => {
+        if (this.rgbTiff) {
+            this.drawMap();
+        }
+    };
+    disconnectedCallback() {
+        this.removeEventListeners();
+        window.removeEventListener("resize", this.handleResize);
+        window.removeEventListener("resize", this.handleResize);
+    }
+    setupCanvasManager() {
+        if (!this.rgbTiff)
+            return;
+        if (!this.rgbTiff)
+            return;
+        // if (this.canvasManager) return;
+        this.canvasManager = new CanvasManager({
+            coordinateSystem: {
+                width: this.rgbTiff.width,
+                height: this.rgbTiff.height,
+            },
+            onStateChange: () => {
+                const currentPolygon = this.canvasManager
+                    ?.getCurrentPolygon();
+                // Calculate area and create a copy to trigger Stencil re-render
+                this.currentPolygon = currentPolygon
+                    ? {
+                        ...currentPolygon,
+                        points: [...currentPolygon.points],
+                        area: currentPolygon.area,
+                    }
+                    : null;
+                CanvasUtils.drawState(this.polygonCtx, this.canvasManager.getState(), this.solarPanel, {
+                    showGrid: false,
+                    showPreview: !state.isMobile,
+                });
+            },
+            onPolygonChange: (polygon) => this.handlePolygonsChange(polygon),
+            onLowerRoofEdgeMarked: () => {
+                this.calculateSolarPanels();
+                if (!this.additionalToolsTutorialShown) {
+                    this.showAdditionalToolsTutorial = true;
+                    this.additionalToolsTutorialShown = true;
+                }
+            },
+        });
+        console.log("debug", this.canvasManager?.getDebugString());
+        // Add event listeners after canvas is initialized
+        this.setupEventListeners();
+        // Draw map after canvas manager is set up
+        requestAnimationFrame(() => {
+            this.drawMap();
+        });
+        // Draw map after canvas manager is set up
+        requestAnimationFrame(() => {
+            this.drawMap();
+        });
+    }
+    setupEventListeners() {
+        if (!this.polygonCanvas)
+            return;
+        this.polygonCanvas.addEventListener("mousedown", this.handleMouseDown, {
+            passive: false,
+        });
+        this.polygonCanvas.addEventListener("touchstart", this.handleTouchStart, {
+            passive: false,
+        });
+        this.polygonCanvas.addEventListener("mousemove", this.handleMouseMove, {
+            passive: true,
+        });
+        this.polygonCanvas.addEventListener("mouseleave", this.handleMouseLeave, {
+            passive: true,
+        });
+        // Document-level event listeners for drag operations
+        document.addEventListener("mousemove", this.handleMouseMove, {
+            passive: true,
+        });
+        document.addEventListener("touchmove", this.handleTouchMove, {
+            passive: false,
+        });
+        document.addEventListener("mouseup", this.handleMouseUp, {
+            passive: true,
+        });
+        document.addEventListener("touchend", this.handleTouchEnd, {
+            passive: false,
+        });
+        // Additional touch event prevention
+        this.preventDefaultTouch = (e) => {
+            if (e.touches.length > 1) {
+                e.preventDefault();
+            }
+        };
+        this.gestureStartHandler = (e) => e.preventDefault();
+        this.gestureChangeHandler = (e) => e.preventDefault();
+        this.gestureEndHandler = (e) => e.preventDefault();
+        this.polygonCanvas.addEventListener("touchmove", this.preventDefaultTouch, {
+            passive: false,
+        });
+        this.polygonCanvas.addEventListener("gesturestart", this.gestureStartHandler, {
+            passive: false,
+        });
+        this.polygonCanvas.addEventListener("gesturechange", this.gestureChangeHandler, {
+            passive: false,
+        });
+        this.polygonCanvas.addEventListener("gestureend", this.gestureEndHandler, {
+            passive: false,
+        });
+    }
+    removeEventListeners() {
+        if (!this.polygonCanvas)
+            return;
+        this.polygonCanvas.removeEventListener("mousedown", this.handleMouseDown);
+        this.polygonCanvas.removeEventListener("touchstart", this.handleTouchStart);
+        this.polygonCanvas.removeEventListener("mousemove", this.handleMouseMove);
+        this.polygonCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+        document.removeEventListener("mousemove", this.handleMouseMove);
+        document.removeEventListener("touchmove", this.handleTouchMove);
+        document.removeEventListener("mouseup", this.handleMouseUp);
+        document.removeEventListener("touchend", this.handleTouchEnd);
+        if (this.preventDefaultTouch) {
+            this.polygonCanvas.removeEventListener("touchmove", this.preventDefaultTouch);
+        }
+        if (this.gestureStartHandler) {
+            this.polygonCanvas.removeEventListener("gesturestart", this.gestureStartHandler);
+        }
+        if (this.gestureChangeHandler) {
+            this.polygonCanvas.removeEventListener("gesturechange", this.gestureChangeHandler);
+        }
+        if (this.gestureEndHandler) {
+            this.polygonCanvas.removeEventListener("gestureend", this.gestureEndHandler);
+        }
+    }
+    handlePolygonsChange(polygon) {
+        this.currentPolygon = polygon;
+        // Check if this is the first polygon being closed
+        if (polygon.closed && !this.firstPolygonClosed &&
+            polygon.type === "roof") {
+            this.firstPolygonClosed = true;
+            this.showMarkEdgeTutorial = true;
+        }
+        if (polygon.closed || this.currentTool !== moveTool) {
+            this.handleToolSelect(moveTool);
+            if (polygon.azimuth && polygon.pitch) {
+                if (this.canvasManager?.getPositionedSolarPanels(polygon.id)) {
+                    this.calculateSolarPanels();
+                }
+                return;
+            }
+            const bestMatch = getBestFittingRoofSegment(polygon, this.buildingInsights?.solarPotential.roofSegmentStats ?? [], this.rgbTiff.bounds, this.canvasElement);
+            if (!bestMatch) {
+                const newPolygon = {
+                    ...polygon,
+                    azimuth: 180,
+                    pitch: 35,
+                };
+                this.canvasManager?.updatePolygon(newPolygon);
+                return;
+            }
+            const newPolygon = {
+                ...polygon,
+                azimuth: polygon.azimuth || bestMatch.azimuthDegrees,
+                pitch: polygon.pitch || bestMatch.pitchDegrees,
+            };
+            this.canvasManager?.updatePolygon(newPolygon);
+        }
+        if (polygon.closed &&
+            this.canvasManager?.getPositionedSolarPanels(polygon.id)) {
+            this.calculateSolarPanels();
+        }
+    }
+    handleMouseUp = (event) => {
+        if (!this.canvasManager)
+            return;
+        this.canvasManager.handleMouseUp(event);
+    };
+    handleTouchEnd = (event) => {
+        if (!this.polygonCanvas || !this.canvasManager)
+            return;
+        // Only prevent default if the touch is on the canvas
+        const target = event.target;
+        if (this.isTargetCanvas(target)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.canvasManager.handleTouchEnd(event);
+    };
+    handleTouchMove = (event) => {
+        if (!this.polygonCanvas || !this.canvasManager)
+            return;
+        // Only prevent default if the touch is on the canvas
+        const target = event.target;
+        if (this.isTargetCanvas(target)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const rect = this.polygonCanvas.getBoundingClientRect();
+        this.canvasManager.handleTouchMove(event, rect);
+    };
+    handleMouseMove = (event) => {
+        if (!this.canvasManager)
+            return;
+        const rect = this.polygonCanvas?.getBoundingClientRect();
+        this.canvasManager.handleMouseMove(event, rect);
+    };
+    handleMouseLeave = () => {
+        if (!this.canvasManager)
+            return;
+        this.canvasManager.handleMouseLeave();
+    };
+    handleMouseDown = (event) => {
+        if (!this.canvasManager)
+            return;
+        const rect = this.polygonCanvas?.getBoundingClientRect();
+        this.canvasManager.handleMouseDown(event, rect);
+    };
+    handleTouchStart = (event) => {
+        if (!this.polygonCanvas || !this.canvasManager)
+            return;
+        // Only prevent default if the touch is on the canvas
+        const target = event.target;
+        if (!this.isTargetCanvas(target)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const now = Date.now();
+        // Prevent double tap zoom with a longer timeout
+        if (now - this.interaction.lastTouchTime < 500) {
+            event.preventDefault();
+            return;
+        }
+        this.interaction = {
+            ...this.interaction,
+            lastTouchTime: now,
+        };
+        const rect = this.polygonCanvas.getBoundingClientRect();
+        this.canvasManager.handleTouchStart(event, rect);
+    };
+    isTargetCanvas(target) {
+        if (!this.polygonCanvas || !this.canvasElement)
+            return false;
+        return target === this.polygonCanvas ||
+            target === this.canvasElement ||
+            this.polygonCanvas.contains(target) ||
+            this.canvasElement.contains(target);
+    }
+    sizeCanvas(width, height) {
+        if (this.canvasElement) {
+            this.canvasElement.width = width;
+            this.canvasElement.height = height;
+        }
+        if (this.polygonCanvas) {
+            this.polygonCanvas.width = width;
+            this.polygonCanvas.height = height;
+            this.polygonCtx = this.polygonCanvas.getContext("2d");
+            if (this.canvasManager) {
+                this.canvasManager.updateCanvasSize({
+                    width: width,
+                    height: height,
+                });
+            }
+        }
+    }
+    async getBuildingInsights() {
+        if (!state.latitude || !state.longitude) {
+            this.buildingInsightsLoaded = true;
+            this.checkLoadingComplete();
+            return;
+        }
+        if (this.buildingInsights) {
+            const sameLocation = this.buildingInsights.center.latitude === state.latitude &&
+                this.buildingInsights.center.longitude === state.longitude;
+            if (sameLocation) {
+                this.buildingInsightsLoaded = true;
+                this.checkLoadingComplete();
+                return;
+            }
+            this.solarSystem = {};
+            this.canvasElement?.getContext("2d")?.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+            this.polygonCtx?.clearRect(0, 0, this.polygonCanvas.width, this.polygonCanvas.height);
+            this.rgbTiff = null;
+            this.canvasManager?.clearPolygons();
+            // Reset tutorial states for new location
+            this.showTutorial = false;
+            this.showMarkEdgeTutorial = false;
+            this.showAdditionalToolsTutorial = false;
+            this.additionalToolsTutorialShown = false;
+            this.firstPolygonClosed = false;
+        }
+        try {
+            this.buildingInsights = await fetchSolarData(state.latitude, state.longitude, this.apiKey);
+            if (!this.buildingInsights) {
+                console.error("No building insights found. Please enter them manually.");
+            }
+        }
+        catch (error) {
+            console.error("Failed to get building insights:", error);
+        }
+        finally {
+            this.buildingInsightsLoaded = true;
+            this.checkLoadingComplete();
+        }
+    }
+    checkLoadingComplete() {
+        if (this.buildingInsightsLoaded && this.buildingImagesLoaded) {
+            this.loadingState = "loaded";
+        }
+    }
+    async getBuildingImages() {
+        if (!state.latitude || !state.longitude) {
+            this.buildingImagesLoaded = true;
+            this.checkLoadingComplete();
+            return;
+        }
+        // Check if we already have building insights for the same location
+        if (this.buildingInsights) {
+            const sameLocation = this.buildingInsights.center.latitude === state.latitude &&
+                this.buildingInsights.center.longitude === state.longitude;
+            if (sameLocation) {
+                // If we have the same location, we might already have the images too
+                this.buildingImagesLoaded = true;
+                this.checkLoadingComplete();
+                return;
+            }
+        }
+        try {
+            this.rgbTiff = await getBuildingImages(state.latitude, state.longitude, this.apiKey, state.radiusMeters);
+            if (this.rgbTiff) {
+                this.pixelInMeters = getPixelInMeters(this.rgbTiff);
+                if (this.canvasManager) {
+                    this.canvasManager.setMeterToPixelRatio(this.pixelInMeters);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Failed to get building images:", error);
+        }
+        finally {
+            this.buildingImagesLoaded = true;
+            this.checkLoadingComplete();
+        }
+    }
+    async drawMap() {
+        if (!this.canvasElement || !this.rgbTiff) {
+            return;
+        }
+        // Ensure canvas is properly sized
+        if (!this.canvasElement || !this.rgbTiff) {
+            return;
+        }
+        // Ensure canvas is properly sized
+        this.sizeCanvas(this.rgbTiff.width, this.rgbTiff.height);
+        // Add a small delay to ensure canvas sizing is complete
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Add a small delay to ensure canvas sizing is complete
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        try {
+            renderRGB(this.rgbTiff, undefined, this.canvasElement);
+        }
+        catch (error) {
+            console.error("Failed to render RGB image:", error);
+        }
+        try {
+            renderRGB(this.rgbTiff, undefined, this.canvasElement);
+        }
+        catch (error) {
+            console.error("Failed to render RGB image:", error);
+        }
+    }
+    undo() {
+        if (this.canvasManager?.canUndo()) {
+            console.log("undo");
+            this.canvasManager.undo();
+            // Map harmonia-draw Tool enum back to local Tool
+            const harmoniaTool = this.canvasManager.getState().selectedTool;
+            switch (harmoniaTool) {
+                case Tool.ROOF_POLYGON:
+                    this.currentTool = roofTool;
+                    break;
+                case Tool.OBSTRUCTION_POLYGON:
+                    this.currentTool = obstructionTool;
+                    break;
+                case Tool.MOVE:
+                    this.currentTool = moveTool;
+                    break;
+                case Tool.MARK_ROOF_EDGE:
+                    this.currentTool = markRoofEdgeTool;
+                    break;
+                default:
+                    this.currentTool = moveTool;
+                    break;
+            }
+            // if (!this.currentPolygon?.closed) {
+            //     this.handleToolSelect(roofTool);
+            // }
+        }
+    }
+    calculateSolarPanels() {
+        if (this.currentPolygon) {
+            this.calculateSolarPanelsForPolygon(this.currentPolygon, false);
+        }
+    }
+    markAsFlatRoof() {
+        if (this.currentPolygon) {
+            const newPolygon = {
+                ...this.currentPolygon,
+                pitch: 15,
+                azimuth: 180, // East orientation
+            };
+            this.canvasManager?.updatePolygon(newPolygon);
+            this.currentPolygon = newPolygon;
+            this.calculateSolarPanelsForPolygon(newPolygon, true);
+        }
+    }
+    calculateSolarPanelsForPolygon(polygon, isFlatRoof) {
+        const convertedSolarPanel = {
+            ...this.solarPanel,
+            widthMeters: this.solarPanel.widthMeters / this.pixelInMeters,
+            heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,
+        };
+        const inset = BORDER_INSET / this.pixelInMeters;
+        const solarPanels = getOptimalSolarPositionFully(polygon, this.canvasManager.getObstacles(), convertedSolarPanel, polygon.azimuth, inset, polygon.pitch, state.settings.columnSpacing, state.settings.rowSpacing);
+        this.canvasManager.setPositionedSolarPanel(polygon.id, solarPanels);
+        // Convert PositionedSolarPanel[] to SolarPanelSystemPart format
+        const allPositionedPanels = this.canvasManager
+            .getAllPositionedSolarPanels();
+        this.solarSystem = Object.keys(allPositionedPanels).reduce((acc, polygonId) => {
+            acc[polygonId] = {
+                numberOfPanels: allPositionedPanels[polygonId].length,
+                panelType: this.solarPanel,
+                pitch: polygon.pitch,
+                azimuth: polygon.azimuth,
+                roofArea: polygon.area,
+                isFlatRoof: isFlatRoof,
+                inverterType: "central",
+            };
+            return acc;
+        }, {});
+    }
+    handlePitchChange(event) {
+        const target = event.target;
+        const pitch = parseFloat(target.value);
+        if (this.currentPolygon) {
+            const newPolygon = {
+                ...this.currentPolygon,
+                pitch: pitch,
+            };
+            this.canvasManager?.updatePolygon(newPolygon);
+            this.currentPolygon = newPolygon;
+        }
+        if (this.currentPolygon?.type === "roof" &&
+            this.canvasManager?.getPositionedSolarPanels(this.currentPolygon.id)) {
+            this.calculateSolarPanels();
+            return;
+        }
+    }
+    handleAzimuthChange(event) {
+        const target = event.target;
+        const azimuth = parseFloat(target.value);
+        if (this.currentPolygon) {
+            const newPolygon = {
+                ...this.currentPolygon,
+                azimuth: azimuth,
+            };
+            this.canvasManager?.updatePolygon(newPolygon);
+            this.currentPolygon = newPolygon;
+        }
+        if (this.currentPolygon?.type === "roof" &&
+            this.canvasManager?.getPositionedSolarPanels(this.currentPolygon.id)) {
+            this.calculateSolarPanels();
+            return;
+        }
+    }
+    handleToolSelect(tool) {
+        if (this.currentPolygon && !this.currentPolygon.closed &&
+            this.currentPolygon.points.length > 0) {
+            alert("Please close the polygon before selecting a tool");
+            return;
+        }
+        this.currentTool = tool;
+        // Map legacy tools to harmonia-draw tools
+        if (this.canvasManager) {
+            switch (tool.name) {
+                case "roof":
+                    this.canvasManager.setSelectedTool(Tool.ROOF_POLYGON);
+                    break;
+                case "obstruction":
+                    this.canvasManager.setSelectedTool(Tool.OBSTRUCTION_POLYGON);
+                    break;
+                case "move":
+                    this.canvasManager.setSelectedTool(Tool.MOVE);
+                    break;
+                case "markRoofEdge":
+                    this.canvasManager.setSelectedTool(Tool.MARK_ROOF_EDGE);
+                    break;
+                default:
+                    // For other tools like delete, etc., we handle them manually
+                    break;
+            }
+        }
+    }
+    handleSettingsClose = () => {
+        this.showSettings = false;
+    };
+    handleSettingsSave = (event) => {
+        state.settings = event.detail;
+        state.settingsVersion++;
+    };
+    handleTutorialClose = () => {
+        this.showTutorial = false;
+    };
+    handleMarkEdgeTutorialClose = () => {
+        this.showMarkEdgeTutorial = false;
+    };
+    handleAdditionalToolsTutorialClose = () => {
+        this.showAdditionalToolsTutorial = false;
+    };
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        return (h("div", { key: 'deed6c1f74dbf3902ec65c09a05cae5c32fe437f', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showTutorial && (h("tutorial-component", { key: 'a76125a68dd04b17429ec16d98357ff20333c313', onClose: this.handleTutorialClose, title: t.mapDraw.tutorial.title, description: t.mapDraw.tutorial.description, videoSource: getAssetPath("./assets/tutorial1.mp4") })), this.showMarkEdgeTutorial && (h("tutorial-component", { key: '366f794b4d41f8d4102a9b27da8cda1f74faa713', onClose: this.handleMarkEdgeTutorialClose, title: t.mapDraw.tutorial.markEdge.title, description: t.mapDraw.tutorial.markEdge
+                .description, videoSource: getAssetPath("./assets/tutorial2.mp4") })), this.showAdditionalToolsTutorial && (h("tutorial-component", { key: 'c995cfefb6cedef0adb2702db1074fb158d917f4', onClose: this
+                .handleAdditionalToolsTutorialClose, title: t.mapDraw.tutorial.additionalTools.title, description: t.mapDraw.tutorial.additionalTools
+                .description, videoSource: getAssetPath("./assets/tutorial3.mp4") })), (state.latitude && state.longitude &&
+            this.loadingState === "loading") && (h("div", { key: 'c506d8dd8c598c0ab2e6e358d252d49d527c2eb3', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: 'cfeb62d4b47fe6eebe7c933532b0ee848a490221', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" }))), h("div", { key: 'e501cff31404ec0a6689dd33a8516cfbb44ea7b3', class: "flex items-start justify-center h-full w-full bg-primary rounded-4xl" }, h("div", { key: '0e34861a06dd7bc66eb098fdacfcc9f3f9e52de2', class: "relative h-full flex items-center justify-center w-full rounded-4xl bg-secondary", style: {
+                aspectRatio: this.rgbTiff
+                    ? `${this.rgbTiff.width}/${this.rgbTiff.height}`
+                    : "1/1",
+            } }, h("canvas", { key: '25c2a1e181f62ac8114b5e0dbb75176cf6f1eac7', ref: (el) => this.canvasElement = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", id: "map-draw-canvas", style: {
+                cursor: this.currentTool.cursor,
+            } }), h("canvas", { key: 'aed95e405efa0feb1ca742416ded22d2b59edbf4', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
+                cursor: this.currentTool.cursor,
+            } }))), h("div", { key: 'd60deae8244d9eb37d5c52f690acd5f77ba1f08b', class: "w-full" }, h("tool-box", { key: 'eb88b074bd5dbb8fe1879942001c08bb5c9bb400', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() })), h("div", { key: '4b401da3fd5592f555de4d0371a81f0b1e03e61f', class: "w-full" }, h("polygon-information", { key: '5e9351c5cb88cee4bdc7ae5729741df4a95cf1bf', currentPolygon: this.currentPolygon, numberOfPanels: this.currentPolygon
+                ? this
+                    .solarSystem[this.currentPolygon.id]
+                    ?.numberOfPanels
+                : undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels(), markAsFlatRoof: () => this.markAsFlatRoof(), currentTool: this.currentTool.name })), h("div", { key: '94745e50a078e9b89e10ad70e75d2e63f12314f4', class: "w-full" }, h("solar-system-form", { key: '3f039715b008f5861f404ba547217dc43cf82805', systemConfigs: this.solarSystem, polygons: this.canvasManager?.getPolygons(), roofCanvas: this.canvasElement, polygonCanvas: this.polygonCanvas })), this.showSettings && (h("settings-modal", { key: '93aacedcce3f43792c570579ff7b58d49ab9c822', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave }))));
+    }
+    static get is() { return "map-draw"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apiKey": {
+                "type": "string",
+                "attribute": "api-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "config": {
+                "type": "unknown",
+                "attribute": "config",
+                "mutable": false,
+                "complexType": {
+                    "original": "SolarExpertConfig",
+                    "resolved": "SolarExpertConfig",
+                    "references": {
+                        "SolarExpertConfig": {
+                            "location": "import",
+                            "path": "../../config",
+                            "id": "src/config.ts::SolarExpertConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "DEFAULT_SOLAR_EXPERT_CONFIG"
+            },
+            "solarPanel": {
+                "type": "unknown",
+                "attribute": "solar-panel",
+                "mutable": false,
+                "complexType": {
+                    "original": "SolarPanelType",
+                    "resolved": "SolarPanelType",
+                    "references": {
+                        "SolarPanelType": {
+                            "location": "import",
+                            "path": "harmonia-types",
+                            "id": "../../../harmonia/packages/harmonia-types/dist/index.d.ts::SolarPanelType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "DEFAULT_SOLAR_PANEL_TYPE"
+            },
+            "enableSettings": {
+                "type": "boolean",
+                "attribute": "enable-settings",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showInstructions": {},
+            "showSettings": {},
+            "showTutorial": {},
+            "showMarkEdgeTutorial": {},
+            "showAdditionalToolsTutorial": {},
+            "additionalToolsTutorialShown": {},
+            "firstPolygonClosed": {},
+            "zoom": {},
+            "loadingState": {},
+            "buildingInsightsLoaded": {},
+            "buildingImagesLoaded": {},
+            "rgbTiff": {},
+            "currentTool": {},
+            "buildingInsights": {},
+            "pixelInMeters": {},
+            "interaction": {},
+            "currentPolygon": {},
+            "solarSystem": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "rgbTiff",
+                "methodName": "setupCanvasManager"
+            }, {
+                "propName": "rgbTiff",
+                "methodName": "drawMap"
+            }, {
+                "propName": "canvasElement",
+                "methodName": "drawMap"
+            }];
+    }
+}
+//# sourceMappingURL=map-draw.js.map