blue-chestnut-solar-expert 0.0.69 → 0.0.71

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

@@ -1,824 +0,0 @@
-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