blue-chestnut-solar-expert 0.0.18 → 0.0.20

package/dist/cjs/stencil-library.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_15.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[1,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"]}],[1,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"costSavings25Years":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
+  return index.bootstrapLazy([["loading-widget.cjs",[[0,"loading-widget"]]],["solar-calculator.cjs",[[0,"solar-calculator",{"apiKey":[1,"api-key"],"buildingInsights":[32],"isLoaded":[32],"autocomplete":[32],"place":[32]}]]],["eraser-icon_16.cjs",[[0,"solar-expert",{"apiKey":[1,"api-key"],"language":[1],"latitude":[32],"longitude":[32],"isLoaded":[32],"autocomplete":[32],"place":[32],"showMapSelector":[32]}],[0,"map-draw",{"apiKey":[1,"api-key"],"config":[16],"solarPanel":[16,"solar-panel"],"showInstructions":[32],"showSettings":[32],"zoom":[32],"loadingState":[32],"rgbTiff":[32],"draggedPointIndex":[32],"hoveredPointIndex":[32],"hoveredPolygon":[32],"shiftKeyPressed":[32],"altKeyPressed":[32],"mousePoint":[32],"currentTool":[32],"roofPolygons":[32],"roofPolygonsSolarPanels":[32],"obstructionPolygons":[32],"selectedPolygon":[32],"buildingInsights":[32],"pixelInMeters":[32],"isMobile":[32],"highlightedEdge":[32]},[[5,"mousemove","handleMouseMove"],[4,"keydown","handleKeyDown"],[4,"keyup","handleKeyUp"],[5,"mousedown","handleMouseDown"],[5,"mouseup","handleMouseUp"]],{"rgbTiff":["drawMap"],"buildingInsights":["drawMap"],"canvasElement":["drawMap"]}],[1,"map-selector",{"apiKey":[1,"api-key"],"language":[1],"isLoaded":[32],"autocomplete":[32],"map":[32],"marker":[32],"circle":[32],"radius":[32],"latitude":[32],"longitude":[32]}],[0,"tool-box",{"currentTool":[16,"current-tool"],"undoCallback":[16,"undo-callback"],"onToolSelect":[16,"on-tool-select"]}],[0,"polygon-buttons",{"calculateSolarPanels":[16,"calculate-solar-panels"],"selectEdgeTool":[16,"select-edge-tool"],"currentTool":[1,"current-tool"]}],[1,"polygon-information",{"currentPolygon":[8,"current-polygon"],"positionedPanels":[16,"positioned-panels"],"handleAzimuthChange":[16,"handle-azimuth-change"],"handlePitchChange":[16,"handle-pitch-change"],"calculateSolarPanels":[16,"calculate-solar-panels"]}],[0,"settings-modal",{"settings":[16],"tempSettings":[32]}],[0,"solar-system-form",{"systemConfigs":[16,"system-configs"],"roofPolygons":[16,"roof-polygons"],"obstructionPolygons":[16,"obstruction-polygons"],"householdConsumption":[32],"consumptionProfile":[32],"electricityPrice":[32],"compensationRate":[32],"annualPriceIncrease":[32],"autonomy":[32],"costSavings":[32],"numberOfPanels":[32],"panelPeakPower":[32],"name":[32],"email":[32],"nameError":[32],"emailError":[32],"electricCar":[32],"electricCarChargingTime":[32],"heatPump":[32],"battery":[32],"compensation25Years":[32],"savedCosts25Years":[32],"maxPanels":[32]},null,{"systemConfigs":["updateSystemConfigs"]}],[0,"icon-selector",{"name":[1],"inline":[4],"size":[2]}],[0,"eraser-icon",{"inline":[4],"size":[2]}],[0,"house-icon",{"inline":[4],"size":[2]}],[0,"move-icon",{"inline":[4],"size":[2]}],[0,"octagon-minus-icon",{"inline":[4],"size":[2]}],[0,"settings-icon",{"inline":[4],"size":[2]}],[0,"undo-icon",{"inline":[4],"size":[2]}],[0,"search-icon",{"inline":[4],"size":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/icons/octagonMinus.js",
     "components/icons/search.js",
     "components/icons/settings.js",
+    "components/icons/undo.js",
     "components/map-draw/map-draw.js",
     "components/map-draw/map-selector.js",
     "components/map-draw/polygon-buttons.js",

package/dist/collection/components/icons/icon.js

@@ -22,6 +22,9 @@ export class Icon {
         if (this.name === "settings") {
             return h("settings-icon", { inline: this.inline, size: this.size });
         }
+        if (this.name === "undo") {
+            return h("undo-icon", { inline: this.inline, size: this.size });
+        }
         return (h("div", { class: `${this.inline ? "inline-block" : ""}` }, "Icon ", this.name));
     }
     static get is() { return "icon-selector"; }

package/dist/collection/components/icons/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icons/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;IAEb,IAAI,CAAS;IAEb,MAAM,GAAY,KAAK,CAAC;IAExB,IAAI,GAAW,EAAE,CAAC;IAElB,MAAM;QACF,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,mBAAa,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACxB,OAAO,kBAAY,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAChE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACvB,OAAO,iBAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAC/D,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;YAChC,OAAO,0BAAoB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACxE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,mBAAa,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC3B,OAAO,qBAAe,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACnE,CAAC;QACD,OAAO,CACH,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;;YACxC,IAAI,CAAC,IAAI,CACb,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"icon-selector\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class Icon {\r\n    @Prop()\r\n    name: string;\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        if (this.name === \"search\") {\r\n            return <search-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"house\") {\r\n            return <house-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"move\") {\r\n            return <move-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"octagon-minus\") {\r\n            return <octagon-minus-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"eraser\") {\r\n            return <eraser-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"settings\") {\r\n            return <settings-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        return (\r\n            <div class={`${this.inline ? \"inline-block\" : \"\"}`}>\r\n                Icon {this.name}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icons/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,IAAI;IAEb,IAAI,CAAS;IAEb,MAAM,GAAY,KAAK,CAAC;IAExB,IAAI,GAAW,EAAE,CAAC;IAElB,MAAM;QACF,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,mBAAa,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACxB,OAAO,kBAAY,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAChE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACvB,OAAO,iBAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAC/D,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,EAAE,CAAC;YAChC,OAAO,0BAAoB,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACxE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,mBAAa,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACjE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC3B,OAAO,qBAAe,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QACnE,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACvB,OAAO,iBAAW,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;QAC/D,CAAC;QACD,OAAO,CACH,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;;YACxC,IAAI,CAAC,IAAI,CACb,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"icon-selector\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class Icon {\r\n    @Prop()\r\n    name: string;\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        if (this.name === \"search\") {\r\n            return <search-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"house\") {\r\n            return <house-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"move\") {\r\n            return <move-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"octagon-minus\") {\r\n            return <octagon-minus-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"eraser\") {\r\n            return <eraser-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"settings\") {\r\n            return <settings-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        if (this.name === \"undo\") {\r\n            return <undo-icon inline={this.inline} size={this.size} />;\r\n        }\r\n        return (\r\n            <div class={`${this.inline ? \"inline-block\" : \"\"}`}>\r\n                Icon {this.name}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/dist/collection/components/icons/undo.js

@@ -0,0 +1,64 @@
+import { h } from "@stencil/core";
+export class UndoIcon {
+    inline = false;
+    size = 20;
+    render() {
+        return (h("svg", { key: '351fc78e58401fc39d8a38f7724320ea9807d009', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-undo2-icon lucide-undo-2" }, h("path", { key: 'bc1097d7c20f4a2a1524e1d6de19b9827e951535', d: "M9 14 4 9l5-5" }), h("path", { key: '9d149bc6d7c2ea80e79d32bcb69f2927b5906170', d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" })));
+    }
+    static get is() { return "undo-icon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../output.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inline": {
+                "type": "boolean",
+                "attribute": "inline",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "20"
+            }
+        };
+    }
+}
+//# sourceMappingURL=undo.js.map

package/dist/collection/components/icons/undo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"undo.js","sourceRoot":"","sources":["../../../src/components/icons/undo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IAEjB,MAAM,GAAY,KAAK,CAAC;IAExB,IAAI,GAAW,EAAE,CAAC;IAElB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,EACvB,KAAK,EAAC,wCAAwC;YAE9C,6DAAM,CAAC,EAAC,eAAe,GAAG;YAC1B,6DAAM,CAAC,EAAC,0DAA0D,GAAG,CACnE,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: \"undo-icon\",\r\n    styleUrl: \"../../output.css\",\r\n    shadow: false,\r\n})\r\nexport class UndoIcon {\r\n    @Prop()\r\n    inline: boolean = false;\r\n    @Prop()\r\n    size: number = 20;\r\n\r\n    render() {\r\n        return (\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"24\"\r\n                height=\"24\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-undo2-icon lucide-undo-2\"\r\n            >\r\n                <path d=\"M9 14 4 9l5-5\" />\r\n                <path d=\"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11\" />\r\n            </svg>\r\n        );\r\n    }\r\n}\r\n"]}

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

@@ -112,7 +112,7 @@ export class MapDraw {
         // If on mobile, automatically calculate panels using Google API data
         if (state.isMobile && this.buildingInsights) {
             const maxPanels = this.buildingInsights.solarPotential.maxArrayPanelsCount;
-            const approximatedPanels = Math.floor(maxPanels / 3); // Use one third of max panels
+            const approximatedPanels = Math.floor(maxPanels * 3 / 4); // Use two thirds of max panels
             const positionedPanels = Array(approximatedPanels).fill(null)
                 .map((_, __) => ({
                 panel: this.solarPanel,
@@ -176,6 +176,7 @@ export class MapDraw {
         const { x, y } = this.convertToCanvasCoordinates(event);
         this.mousePoint = { x, y };
         const currentPolygon = this.getCurrentPolygon();
+        let redraw = false;
         if (this.currentTool.name === "markRoofEdge") {
             let distances = [];
             for (let i = 0; i < currentPolygon?.points.length; i++) {
@@ -194,6 +195,11 @@ export class MapDraw {
             const closestEdge = distances.sort((a, b) => a.dist - b.dist)[0];
             if (closestEdge && (closestEdge.dist < 10)) {
                 this.highlightedEdge = closestEdge.edge;
+                redraw = true;
+            }
+            else if (this.highlightedEdge) {
+                this.highlightedEdge = null;
+                redraw = true;
             }
         }
         // Check for point hover
@@ -225,7 +231,7 @@ export class MapDraw {
                 JSON.stringify(this.hoveredPolygon)) {
             this.hoveredPointIndex = newHoveredPointIndex;
             this.hoveredPolygon = newHoveredPolygon;
-            this.drawPolygons();
+            redraw = true;
         }
         // Handle dragging
         if (this.draggedPointIndex !== null && currentPolygon &&
@@ -238,9 +244,12 @@ export class MapDraw {
                     (metersInPixels * metersInPixels);
                 currentPolygon.details.area = area;
             }
-            this.drawPolygons();
+            redraw = true;
         }
         if (this.shiftKeyPressed) {
+            redraw = true;
+        }
+        if (redraw) {
             this.drawPolygons();
         }
     }
@@ -350,7 +359,31 @@ export class MapDraw {
             this.altKeyPressed = false;
         }
     }
+    undo() {
+        const currentPolygon = this.getCurrentPolygon();
+        if (!currentPolygon) {
+            return;
+        }
+        if (currentPolygon.closed) {
+            currentPolygon.closed = false;
+            if (currentPolygon.type === "roof") {
+                delete this.roofPolygonsSolarPanels[currentPolygon._id];
+                this.currentTool = roofTool;
+                this.highlightedEdge = null;
+            }
+            else if (currentPolygon.type === "obstruction") {
+                this.currentTool = obstructionTool;
+            }
+        }
+        else {
+            currentPolygon.points.pop();
+        }
+        this.drawPolygons();
+    }
     handleMouseDown(event) {
+        if (this.currentTool.name === "undo") {
+            return;
+        }
         if (state.isMobile)
             return; // Prevent interactions on mobile
         if (!this.polygonCanvas || !this.polygonCtx)
@@ -359,11 +392,15 @@ export class MapDraw {
             return;
         let { x, y } = this.convertToCanvasCoordinates(event);
         if (this.currentTool.name === "markRoofEdge") {
-            const x = this.highlightedEdge?.pointA.x -
-                this.highlightedEdge?.pointB.x;
-            const y = this.highlightedEdge?.pointA.y -
-                this.highlightedEdge?.pointB.y;
+            if (!this.highlightedEdge) {
+                return;
+            }
+            const x = this.highlightedEdge.pointA.x -
+                this.highlightedEdge.pointB.x;
+            const y = this.highlightedEdge.pointA.y -
+                this.highlightedEdge.pointB.y;
             const azimuth = Math.atan2(-x, y) * (180 / Math.PI);
+            this.calculateSolarPanels();
             this.handleAzimuthChange({
                 target: {
                     value: azimuth,
@@ -390,10 +427,10 @@ export class MapDraw {
             this.drawPolygons();
             return;
         }
+        const currentPolygon = this.getCurrentPolygon();
         if (this.currentTool.name === "move") {
             // Check if we're clicking on a point of the selected polygon
             if (this.selectedPolygon) {
-                const currentPolygon = this.getCurrentPolygon();
                 const pointIndex = currentPolygon?.points.findIndex((point) => {
                     const distance = Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2));
                     return distance < 10;
@@ -411,7 +448,8 @@ export class MapDraw {
             this.drawPolygons();
             return;
         }
-        if (!this.selectedPolygon || this.getCurrentPolygon()?.closed) {
+        if (!this.selectedPolygon || currentPolygon?.closed ||
+            this.currentTool.name !== this.selectedPolygon?.type) {
             // no polygon is active, create a new one
             const newPolygon = {
                 _id: uuidv4(),
@@ -438,10 +476,6 @@ export class MapDraw {
             this.drawPolygons();
             return;
         }
-        const { _id, type } = this.selectedPolygon;
-        const currentPolygon = type === "roof"
-            ? this.roofPolygons[_id]
-            : this.obstructionPolygons[_id];
         if (currentPolygon.closed) {
             return;
         }
@@ -503,7 +537,7 @@ export class MapDraw {
         this.drawPolygons();
         this.currentTool = moveTool;
     }
-    calculateSolarPanels() {
+    calculateSolarPanels({ redraw = true } = {}) {
         const currentPolygon = this.getCurrentPolygon();
         if (!currentPolygon.details) {
             return;
@@ -529,7 +563,9 @@ export class MapDraw {
                     DEFAULT_SUNNINESS,
             },
         };
-        this.drawPolygons();
+        if (redraw) {
+            this.drawPolygons();
+        }
     }
     handlePitchChange(event) {
         const target = event.target;
@@ -558,6 +594,13 @@ export class MapDraw {
         }
     }
     handleToolSelect(tool) {
+        const currentPolygon = this.getCurrentPolygon();
+        if (currentPolygon && !currentPolygon.closed &&
+            currentPolygon.points.length > 0) {
+            alert("Please close the polygon before selecting a tool");
+            // TODO translate
+            return;
+        }
         this.currentTool = tool;
     }
     scrollToCanvas() {
@@ -579,24 +622,24 @@ export class MapDraw {
     render() {
         const t = getLanguageStrings(state.settings.language);
         const currentPolygon = this.getCurrentPolygon();
-        return (h("div", { key: 'db05a3e9e75823f18f47f33060f5bc6a0ec7d1ae', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showInstructions && !state.isMobile && (h("div", { key: '6fecaec769220c945c6e8e2967ad044039851f21', class: "w-full rounded-4xl p-4 bg-white" }, t.mapDraw.instructions.parts.roof, " ", h("button", { key: '56bb7d8b770d137b84ade2b2e445e35bf6a2d5e4', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(roofTool) }, h("icon-selector", { key: '5aa62f574812f20a912a712d06d90534e9332b63', name: "house", inline: true })), " ", t.mapDraw.instructions.parts.obstruction, " ", h("button", { key: '700b9c850fbe5b432dbfa4eb02941d226876ab18', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(obstructionTool) }, h("icon-selector", { key: 'de7b4baa4683b4cc50afc1c785a93d4a0a683544', name: "octagon-minus", inline: true })), " ", t.mapDraw.instructions.parts.delete, " ", h("button", { key: '3aba287e7a8f9e635ba7d83121d12d5c3f259ed7', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(deleteTool) }, h("icon-selector", { key: 'dac926501562e02584eef41ce5c0e8d5f3669431', name: "eraser", inline: true })), " ", t.mapDraw.instructions.parts.move, " ", h("button", { key: '5495b847cced1997b0ebc406986472699111c746', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(moveTool) }, h("icon-selector", { key: 'a7d51484dbff6f28d1bf5566934f5aec99f09737', name: "move", inline: true })), " ", t.mapDraw.instructions.parts.end)), h("div", { key: '3a6e2ddc5100069937250dc183d944dee5c1ab07', class: "w-full flex flex-row justify-between items-center" }, !state.isMobile && (this.showInstructions
+        return (h("div", { key: 'ebe7e96014e7ecb78818096b9cb391f07b9d06ec', class: "flex flex-col justify-center items-center w-full h-full gap-4", id: "map-draw" }, this.showInstructions && !state.isMobile && (h("div", { key: '11628abd7633bd943eb2d33772250675df19f4bd', class: "w-full rounded-4xl p-4 bg-white" }, t.mapDraw.instructions.parts.roof, " ", h("button", { key: '3c059c0616008b426c1a7ba4e465bf9fc081cf05', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(roofTool) }, h("icon-selector", { key: '26c297579ac137eb8d91083932933f34b7278011', name: "house", inline: true })), " ", t.mapDraw.instructions.parts.obstruction, " ", h("button", { key: '9e129e16e285300268be4b05a03e245501078111', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(obstructionTool) }, h("icon-selector", { key: 'a4c5822589a06bd6b2a9782d33d3025704e3efe5', name: "octagon-minus", inline: true })), " ", t.mapDraw.instructions.parts.delete, " ", h("button", { key: '5b3872a47d5d9475400c74a22dc02196a56aeed3', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(deleteTool) }, h("icon-selector", { key: '9a5544c3573117cf3aae325319c161e781255356', name: "eraser", inline: true })), " ", t.mapDraw.instructions.parts.move, " ", h("button", { key: 'af9f0e5ccc0bb132d0601bb2a1bc8e0ff4677d05', class: "inline-flex items-center justify-center p-1 rounded-full hover:bg-gray-300 transition-colors", onClick: () => this.handleToolSelect(moveTool) }, h("icon-selector", { key: 'a7cd46f4b0ab05d69edd71237b44a62f0d776ea1', name: "move", inline: true })), " ", t.mapDraw.instructions.parts.end)), h("div", { key: 'f27da8d073e2d49ca923b74319065265b078b51d', class: "w-full flex flex-row justify-between items-center" }, !state.isMobile && (this.showInstructions
             ? (h("button", { class: "px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4", onClick: () => this.showInstructions = false }, t.mapDraw.instructions.hide))
-            : (h("button", { class: "px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4", onClick: () => this.showInstructions = true }, t.mapDraw.instructions.show))), h("button", { key: '6891f0e8b14d8533739d27b6ff40625eef29f1ba', class: "flex items-center gap-2 bg-white p-2 rounded-4xl hover:bg-gray-300", onClick: this.handleSettingsClick }, h("settings-icon", { key: '9f66cfbc1cd4d39fd0ee62e3e31c1d0c804848c5' }))), h("div", { key: 'e6f5d94e07276a86b102443bdcff5499f571425f', class: "w-full" }, !state.isMobile && (h("tool-box", { key: '4911e6f2cbccc82a073dce6d2c3b8c8d1a2b06f1', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool) }))), this.loadingState === "empty" && (h("div", { key: '81098e09b730a7d5e24062379f172a136c143df6', class: "w-full" }, h("p", { key: 'e3bb821c5510f30091b1d5e813724a7a4e9d8971', class: "text-white text-center flex items-center justify-center rounded-4xl p-4 w-full", style: {
+            : (h("button", { class: "px-4 py-2 rounded-4xl hover:bg-gray-300 transition-colors duration-200 bg-white p-4", onClick: () => this.showInstructions = true }, t.mapDraw.instructions.show))), h("button", { key: 'ab4c01b61913637df21a5d7f6b6a814fb804dc7d', class: "flex items-center gap-2 bg-white p-2 rounded-4xl hover:bg-gray-300", onClick: this.handleSettingsClick }, h("settings-icon", { key: '8c1f33df887d1b5810d88f412d0c82b6491110d3' }))), h("div", { key: '9d1c86714cd25349000739fd74f9da866d50b64e', class: "w-full" }, !state.isMobile && (h("tool-box", { key: '40e7f320a6c015baff3294c03bea3f373e7996ca', currentTool: this.currentTool, onToolSelect: (tool) => this.handleToolSelect(tool), undoCallback: () => this.undo() }))), this.loadingState === "empty" && (h("div", { key: 'd05709445fc8f58a62f4dd9c6b9e9604b745b80a', class: "w-full" }, h("p", { key: 'ab9772c7b0ece883781c78280f1ac03db45fa069', class: "text-white text-center flex items-center justify-center rounded-4xl p-4 w-full", style: {
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
             } }, t.mapDraw.noAddressSelected))), (state.latitude && state.longitude &&
-            this.loadingState === "loading") && (h("div", { key: '75471babac89444385700935a2bdcfee22b7828f', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '5822c0ce8903013cf4df805af0b193ed7d3e90f9', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" }))), h("div", { key: 'c2dfd01cb77f0ae4987ce6cab2b80fa795a480e5', class: "flex items-start justify-center h-full w-full bg-[#f3ebda] rounded-4xl" }, h("div", { key: 'df0b2165641f675b4c059cb68c391a2aff07a20e', class: "relative h-full flex items-center justify-center w-full rounded-4xl bg-[#271200]", style: {
+            this.loadingState === "loading") && (h("div", { key: 'd705b12182197d37f8312b0ea99b66defa4e2888', class: "flex items-center justify-center w-full bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: 'a65212b6dcb05a2a640a84b0aa9c0e2dc79c1418', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" }))), h("div", { key: 'c7e39c57c523376c9410708fc09fc9437133c533', class: "flex items-start justify-center h-full w-full bg-[#f3ebda] rounded-4xl" }, h("div", { key: '4cca7a6f7e6857a6d4e1828735f077e84d297398', class: "relative h-full flex items-center justify-center w-full rounded-4xl bg-[#271200]", style: {
                 aspectRatio: this.rgbTiff
                     ? `${this.rgbTiff.width}/${this.rgbTiff.height}`
                     : "1/1",
-            } }, h("canvas", { key: '07b4ac6baaf8f6983f5516ec322d27fd8ae64d6d', ref: (el) => this.canvasElement = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", id: "map-draw-canvas", style: {
+            } }, h("canvas", { key: 'e35c67b1641cc4ed364139598e2eb5de7eb7b788', 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: 'e57d6f0865c117bc2046e6386b02a6cc88741e86', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
+            } }), h("canvas", { key: 'e645e24ee02ddae97d2a8f81c1107a47e10b3a30', ref: (el) => this.polygonCanvas = el, class: "absolute top-0 left-0 w-full h-full rounded-4xl", style: {
                 cursor: this.currentTool.cursor,
-            } }), currentPolygon?.details && (h("button", { key: 'cabbfd6d516498bbf9f13d85a79cc904bc526ab9', class: "absolute bottom-4 right-4 px-4 py-2 bg-[#f3ebda] rounded-4xl hover:bg-[#ffffff] text-[#271200] transition-colors duration-200 z-10 text-xs", onClick: () => this.calculateSolarPanels() }, t.mapDraw.calculateSolarPanels)))), h("div", { key: 'b765a477b2269659853446b419a39267350351c6', class: "w-full" }, h("polygon-buttons", { key: '1b6364ae616c111619216369d74c91295f82bc1f', calculateSolarPanels: () => this.calculateSolarPanels(), selectEdgeTool: () => this.handleToolSelect(markRoofEdgeTool) })), !state.isMobile && (h("div", { key: '927828fb90af42c7b39e1cfdbde85bf95cc9925b', class: "w-full" }, h("polygon-information", { key: 'be15afe3769cc6ac064f7de2944b5305e6880fbf', currentPolygon: currentPolygon, positionedPanels: currentPolygon
+            } }))), currentPolygon?.closed && (h("div", { key: '5b5d7b3abc617b0d322104c3a041d8d331df6862', class: "w-full" }, h("polygon-buttons", { key: '2a5b31ca5b9b7cc0127ad45b8ae0281e5af5de63', currentTool: this.currentTool.name, calculateSolarPanels: () => this.calculateSolarPanels(), selectEdgeTool: () => this.handleToolSelect(markRoofEdgeTool) }))), !state.isMobile && (h("div", { key: 'aec8403b81ff41c3ba6423f8266bf52f10ffff9b', class: "w-full" }, h("polygon-information", { key: '604b909a604bcc1b30345824167d2083ccd4e159', currentPolygon: currentPolygon, positionedPanels: currentPolygon
                 ? this
                     .roofPolygonsSolarPanels[currentPolygon._id]
                     ?.positionedPanels
-                : undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels() }))), h("div", { key: 'df7d4b0e5d3ad645d6f1240b920e8f26cba7fcb5', class: "w-full" }, h("solar-system-form", { key: '73d003470f3a575aadda7f40c06b6af028d42eb4', systemConfigs: this.roofPolygonsSolarPanels, roofPolygons: this.roofPolygons, obstructionPolygons: this.obstructionPolygons })), this.showSettings && (h("settings-modal", { key: 'c570d9798ea0613546c5ece40372b2eadfc3adda', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave }))));
+                : undefined, handleAzimuthChange: (event) => this.handleAzimuthChange(event), handlePitchChange: (event) => this.handlePitchChange(event), calculateSolarPanels: () => this.calculateSolarPanels() }))), h("div", { key: '03895fe0f238cf4a0698af6a9b53a788086cc1cf', class: "w-full" }, h("solar-system-form", { key: '400f8596661668f7a8aa5d2010fcfeac6e02bf5b', systemConfigs: this.roofPolygonsSolarPanels, roofPolygons: this.roofPolygons, obstructionPolygons: this.obstructionPolygons })), this.showSettings && (h("settings-modal", { key: '2be9723f241098046d45eebadaba8d241b4c0c44', settings: state.settings, onClose: this.handleSettingsClose, onSave: this.handleSettingsSave }))));
     }
     static get is() { return "map-draw"; }
     static get originalStyleUrls() {