blue-chestnut-solar-expert 0.0.68 → 0.0.69

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

@@ -0,0 +1,824 @@
+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;
+    showObstacleTutorial = false;
+    obstacleTutorialShown = false;
+    firstPolygonClosed = false;
+    zoom = 1;
+    loadingState = "empty";
+    rgbTiff = null;
+    currentTool = roofTool;
+    buildingInsights = null;
+    pixelInMeters = 0.2;
+    interaction = {
+        isDrawing: false,
+        isDragging: false,
+        lastTouchTime: 0,
+    };
+    currentPolygon = null;
+    solarSystem = {};
+    showToast = false;
+    toastMessage = "";
+    toastType = "success";
+    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.getBuildingImages();
+                this.getBuildingInsights();
+                // Reset tutorial states for new location
+                this.resetTutorials();
+                // Show tutorial when coordinates are first set
+                this.showTutorial = true;
+            }
+        };
+        this.longitudeChangeListener = () => {
+            if (state.latitude && state.longitude) {
+                this.loadingState = "loading";
+                this.getBuildingImages();
+                this.getBuildingInsights();
+                // Reset tutorial states for new location
+                this.resetTutorials();
+                // 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.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;
+        let managerConfig = {};
+        if (state.isMobile) {
+            managerConfig = {
+                ...managerConfig,
+                closeDistance: 20,
+            };
+        }
+        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(false);
+                // Show additional tools tutorial after mark edge tutorial is completed
+                if (!this.additionalToolsTutorialShown) {
+                    this.showAdditionalToolsTutorial = true;
+                    this.additionalToolsTutorialShown = true;
+                }
+            },
+        }, managerConfig);
+        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;
+            // Show obstacle tutorial first instead of mark edge tutorial
+            this.showObstacleTutorial = true;
+        }
+        // Show mark edge tutorial when an obstacle polygon is closed (if obstacle tutorial was shown)
+        if (polygon.closed &&
+            polygon.type === "obstruction" &&
+            this.obstacleTutorialShown &&
+            !this.showMarkEdgeTutorial &&
+            !this.showObstacleTutorial) {
+            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(false);
+                }
+                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(false);
+        }
+    }
+    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) {
+            return;
+        }
+        if (this.buildingInsights) {
+            const sameLocation = this.buildingInsights.center.latitude === state.latitude &&
+                this.buildingInsights.center.longitude === state.longitude;
+            if (sameLocation) {
+                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.resetTutorials();
+        }
+        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);
+        }
+    }
+    async getBuildingImages() {
+        if (!state.latitude || !state.longitude) {
+            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) {
+                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);
+                }
+                // this.loadingState = "loaded";
+            }
+            else {
+                this.loadingState = "error";
+            }
+        }
+        catch (error) {
+            console.error("Failed to get building images:", error);
+            this.loadingState = "error";
+        }
+    }
+    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);
+            this.loadingState = "loaded";
+        }
+        catch (error) {
+            console.error("Failed to render RGB image:", error);
+        }
+    }
+    undo() {
+        if (this.canvasManager?.canUndo()) {
+            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;
+            }
+            // Show toast message
+            const t = getLanguageStrings(state.settings.language);
+            this.showToastMessage(t.mapDraw.toast.undoSuccess, "success");
+            // if (!this.currentPolygon?.closed) {
+            //     this.handleToolSelect(roofTool);
+            // }
+        }
+    }
+    calculateSolarPanels(showToast = false) {
+        if (this.currentPolygon) {
+            this.calculateSolarPanelsForPolygon(this.currentPolygon, false);
+            // Show toast message only when explicitly requested
+            if (showToast) {
+                const t = getLanguageStrings(state.settings.language);
+                this.showToastMessage(t.mapDraw.toast.calculateSolarPanelsSuccess, "success");
+            }
+        }
+    }
+    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);
+            // Show toast message
+            const t = getLanguageStrings(state.settings.language);
+            this.showToastMessage(t.mapDraw.toast.markAsFlatRoofSuccess, "info");
+            // Auto-select the mark roof edge tool
+            this.handleToolSelect(markRoofEdgeTool);
+        }
+    }
+    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(false);
+            return;
+        }
+    }
+    handleAzimuthChange(event) {
+        const target = event.target;
+        const displayAzimuth = parseFloat(target.value);
+        const azimuth = (displayAzimuth + 270) % 360;
+        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(false);
+            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;
+        this.handleToolSelect(markRoofEdgeTool);
+    };
+    handleAdditionalToolsTutorialClose = () => {
+        this.showAdditionalToolsTutorial = false;
+        this.additionalToolsTutorialShown = true;
+    };
+    handleObstacleTutorialClose = () => {
+        this.showObstacleTutorial = false;
+        this.obstacleTutorialShown = true;
+        this.handleToolSelect(obstructionTool);
+    };
+    handleObstacleTutorialSkip = () => {
+        this.showObstacleTutorial = false;
+        this.obstacleTutorialShown = true;
+        this.showMarkEdgeTutorial = true;
+    };
+    showToastMessage(message, type = "success") {
+        this.toastMessage = message;
+        this.toastType = type;
+        this.showToast = true;
+        // Hide toast after 3 seconds
+        setTimeout(() => {
+            this.showToast = false;
+        }, 3000);
+    }
+    resetTutorials() {
+        this.showTutorial = false;
+        this.showMarkEdgeTutorial = false;
+        this.showAdditionalToolsTutorial = false;
+        this.showObstacleTutorial = false;
+        this.additionalToolsTutorialShown = false;
+        this.obstacleTutorialShown = false;
+        this.firstPolygonClosed = false;
+    }
+    render() {
+        const t = getLanguageStrings(state.settings.language);
+        return (h("div", { key: 'bb9de30bfdc8c301648b4e555ee91dd10790cfe1', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showTutorial && (h("tutorial-component", { key: '55fb0534409ded5116ef5d0848ef4e18429125dc', onClose: this.handleTutorialClose, title: t.mapDraw.tutorial.title, description: t.mapDraw.tutorial.description, videoSource: getAssetPath("./assets/tutorial1.mp4") })), this.showMarkEdgeTutorial && (h("tutorial-component", { key: '106bb6504bd30cc9fbaa45ea81bce7bc8e35ad89', 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: '60e9697dc04c89ce174265021ec2f725fc894887', onClose: this
+                .handleAdditionalToolsTutorialClose, title: t.mapDraw.tutorial.additionalTools.title, description: t.mapDraw.tutorial.additionalTools
+                .description, videoSource: getAssetPath("./assets/tutorial3.mp4") })), this.showObstacleTutorial && (h("tutorial-component", { key: 'b8ee4d273be4405f0e75433f3c3bfaf8fd38f6ea', onClose: this.handleObstacleTutorialClose, onSkip: this.handleObstacleTutorialSkip, showSkipButton: true, title: t.mapDraw.tutorial.obstacle.title, description: t.mapDraw.tutorial.obstacle.description, videoSource: getAssetPath("./assets/tutorial4.mp4") })), (state.latitude && state.longitude &&
+            this.loadingState === "loading") && (h("div", { key: '1d9795783a5a4001e8942214f9291ff17e5c9e81', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '4fe8c9ed7e0f951047ade565c7c7d7c284880af7', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-secondary" }))), (state.latitude && state.longitude &&
+            this.loadingState === "error") && (h("div", { key: 'b573fea2e40fe903464df2f9c87418e10645bdbe', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '8ca895577317ed846e88a74f460bacac13ba1102', class: "text-red-500 text-center text-lg font-semibold" }, t.mapDraw.imageLoadError))), h("div", { key: '5727a6899c7ef16fd65b328f879f382200cd0099', class: "flex items-start justify-center w-full bg-primary rounded-4xl" }, h("div", { key: '8d0cb90847e01380e795426f4eb0d82ee4472fc3', class: "relative flex items-center justify-center w-full rounded-4xl bg-secondary", style: {
+                aspectRatio: this.rgbTiff
+                    ? `${this.rgbTiff.width}/${this.rgbTiff.height}`
+                    : "",
+            } }, h("canvas", { key: 'e5dace6eed7f881f26c453ec4a37786940618cea', 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: '1e4bbef400cd1d95cd0c2bbfbe5c75de77687744', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
+                cursor: this.currentTool.cursor,
+            } }))), this.rgbTiff && (h("div", { key: '19e7119b1f12ea5a4380a6b1b1bd5aa70ce9be77', class: "w-full" }, h("div", { key: '3e192ed5048aaeeb3a251ef11b30eda3a5b78668', class: "w-full pb-4" }, h("tool-box", { key: '5d3ee6c1e561b836dfe3566fb95573f669d6e692', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() })), h("div", { key: 'e7a98bcf23ea1653547d7b3eeabd3f784ac7114e', class: "w-full" }, h("polygon-information", { key: 'ca3092abaea53001bf5d008e9e9128e91e07cf01', 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(true), markAsFlatRoof: () => this.markAsFlatRoof(), currentTool: this.currentTool.name })), h("div", { key: '004d65f46355bb244a1e7ddfa6c6df28ad3f31ad', class: "w-full" }, h("solar-system-form", { key: 'b9c095e76b308a5ab5de11de436eef7401516318', systemConfigs: this.solarSystem, polygons: this.canvasManager?.getPolygons(), roofCanvas: this.canvasElement, polygonCanvas: this.polygonCanvas, pixelInMeters: this.pixelInMeters })))), this.showSettings && (h("settings-modal", { key: 'adfa4fe395cb1a3a275cb1012b05ee7dce24ec45', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave })), this.showToast && (h("toast-notification", { key: '5413c46de3d34e9910d011f49e9e39f778f40a69', message: this.toastMessage, type: this.toastType, duration: 3000 }))));
+    }
+    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": {},
+            "showObstacleTutorial": {},
+            "obstacleTutorialShown": {},
+            "firstPolygonClosed": {},
+            "zoom": {},
+            "loadingState": {},
+            "rgbTiff": {},
+            "currentTool": {},
+            "buildingInsights": {},
+            "pixelInMeters": {},
+            "interaction": {},
+            "currentPolygon": {},
+            "solarSystem": {},
+            "showToast": {},
+            "toastMessage": {},
+            "toastType": {}
+        };
+    }
+    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