blue-chestnut-solar-expert 0.0.1

package/dist/stencil-library/map-draw.entry.js

@@ -0,0 +1,2777 @@
+import { r as registerInstance, g as getElement, h } from './index-CEfm4WRP.js';
+import { f as fetchSolarData, g as getBuildingImages } from './api-By7kNIGr.js';
+
+/*
+ Copyright 2023 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+// [START visualize_render_rgb]
+/**
+ * Renders an RGB GeoTiff image into an HTML canvas.
+ *
+ * The GeoTiff image must include 3 rasters (bands) which
+ * correspond to [Red, Green, Blue] in that order.
+ *
+ * @param  {GeoTiff} rgb   GeoTiff with RGB values of the image.
+ * @param  {GeoTiff} mask  Optional mask for transparency, defaults to opaque.
+ * @return {HTMLCanvasElement}  Canvas element with the rendered image.
+ */
+function renderRGB(rgb, mask, canvas) {
+    // Create an HTML canvas to draw the image.
+    // https://www.w3schools.com/tags/canvas_createimagedata.asp
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+    }
+    // Set the canvas size to the mask size if it's available,
+    // otherwise set it to the RGB data layer size.
+    canvas.width = mask ? mask.width : rgb.width;
+    canvas.height = mask ? mask.height : rgb.height;
+    // Since the mask size can be different than the RGB data layer size,
+    // we calculate the "delta" between the RGB layer size and the canvas/mask
+    // size. For example, if the RGB layer size is the same as the canvas size,
+    // the delta is 1. If the RGB layer size is smaller than the canvas size,
+    // the delta would be greater than 1.
+    // This is used to translate the index from the canvas to the RGB layer.
+    const dw = rgb.width / canvas.width;
+    const dh = rgb.height / canvas.height;
+    // Get the canvas image data buffer.
+    const ctx = canvas.getContext('2d');
+    const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    // Fill in every pixel in the canvas with the corresponding RGB layer value.
+    // Since Javascript doesn't support multidimensional arrays or tensors,
+    // everything is stored in flat arrays and we have to keep track of the
+    // indices for each row and column ourselves.
+    for (let y = 0; y < canvas.height; y++) {
+        for (let x = 0; x < canvas.width; x++) {
+            // RGB index keeps track of the RGB layer position.
+            // This is multiplied by the deltas since it might be a different
+            // size than the image size.
+            const rgbIdx = Math.floor(y * dh) * rgb.width + Math.floor(x * dw);
+            // Mask index keeps track of the mask layer position.
+            const maskIdx = y * canvas.width + x;
+            // Image index keeps track of the canvas image position.
+            // HTML canvas expects a flat array with consecutive RGBA values.
+            // Each value in the image buffer must be between 0 and 255.
+            // The Alpha value is the transparency of that pixel,
+            // if a mask was not provided, we default to 255 which is opaque.
+            const imgIdx = y * canvas.width * 4 + x * 4;
+            const factor = 0.65;
+            img.data[imgIdx + 0] = Math.round(rgb.rasters[0][rgbIdx] * factor); // Red
+            img.data[imgIdx + 1] = Math.round(rgb.rasters[1][rgbIdx] * factor); // Green
+            img.data[imgIdx + 2] = Math.round(rgb.rasters[2][rgbIdx] * factor); // Blue
+            img.data[imgIdx + 3] = mask // Alpha
+                ? mask.rasters[0][maskIdx] * 255
+                : 255;
+        }
+    }
+    // Draw the image data buffer into the canvas context.
+    ctx.putImageData(img, 0, 0);
+    return canvas;
+}
+// [END visualize_render_rgb]
+// [START visualize_render_palette]
+/**
+ * Renders a single value GeoTiff image into an HTML canvas.
+ *
+ * The GeoTiff image must include 1 raster (band) which contains
+ * the values we want to display.
+ *
+ * @param  {GeoTiff}  data    GeoTiff with the values of interest.
+ * @param  {GeoTiff}  mask    Optional mask for transparency, defaults to opaque.
+ * @param  {string[]} colors  Hex color palette, defaults to ['000000', 'ffffff'].
+ * @param  {number}   min     Minimum value of the data range, defaults to 0.
+ * @param  {number}   max     Maximum value of the data range, defaults to 1.
+ * @param  {number}   index   Raster index for the data, defaults to 0.
+ * @return {HTMLCanvasElement}  Canvas element with the rendered image.
+ */
+function renderPalette({ data, mask, colors, min, max, index, canvas, }) {
+    // First create a palette from a list of hex colors.
+    const palette = createPalette(colors ?? ['000000', 'ffffff']);
+    // Normalize each value of our raster/band of interest into indices,
+    // such that they always map into a value within the palette.
+    const indices = data.rasters[index ?? 0]
+        .map((x) => normalize(x, max ?? 1, min ?? 0))
+        .map((x) => Math.round(x * (palette.length - 1)));
+    return renderRGB({
+        ...data,
+        // Map each index into the corresponding RGB values.
+        rasters: [
+            indices.map((i) => palette[i].r),
+            indices.map((i) => palette[i].g),
+            indices.map((i) => palette[i].b),
+        ],
+    }, mask, canvas);
+}
+/**
+ * Creates an {r, g, b} color palette from a hex list of colors.
+ *
+ * Each {r, g, b} value is a number between 0 and 255.
+ * The created palette is always of size 256, regardless of the number of
+ * hex colors passed in. Inbetween values are interpolated.
+ *
+ * @param  {string[]} hexColors  List of hex colors for the palette.
+ * @return {{r, g, b}[]}         RGB values for the color palette.
+ */
+function createPalette(hexColors) {
+    // Map each hex color into an RGB value.
+    const rgb = hexColors.map(colorToRGB);
+    // Create a palette with 256 colors derived from our rgb colors.
+    const size = 256;
+    const step = (rgb.length - 1) / (size - 1);
+    return Array(size)
+        .fill(0)
+        .map((_, i) => {
+        // Get the lower and upper indices for each color.
+        const index = i * step;
+        const lower = Math.floor(index);
+        const upper = Math.ceil(index);
+        // Interpolate between the colors to get the shades.
+        return {
+            r: lerp(rgb[lower].r, rgb[upper].r, index - lower),
+            g: lerp(rgb[lower].g, rgb[upper].g, index - lower),
+            b: lerp(rgb[lower].b, rgb[upper].b, index - lower),
+        };
+    });
+}
+/**
+ * Convert a hex color into an {r, g, b} color.
+ *
+ * @param  {string} color  Hex color like 0099FF or #0099FF.
+ * @return {{r, g, b}}     RGB values for that color.
+ */
+function colorToRGB(color) {
+    const hex = color.startsWith('#') ? color.slice(1) : color;
+    return {
+        r: parseInt(hex.substring(0, 2), 16),
+        g: parseInt(hex.substring(2, 4), 16),
+        b: parseInt(hex.substring(4, 6), 16),
+    };
+}
+/**
+ * Normalizes a number to a given data range.
+ *
+ * @param  {number} x    Value of interest.
+ * @param  {number} max  Maximum value in data range, defaults to 1.
+ * @param  {number} min  Minimum value in data range, defaults to 0.
+ * @return {number}      Normalized value.
+ */
+function normalize(x, max = 1, min = 0) {
+    const y = (x - min) / (max - min);
+    return clamp(y, 0, 1);
+}
+/**
+ * Calculates the linear interpolation for a value within a range.
+ *
+ * @param  {number} x  Lower value in the range, when `t` is 0.
+ * @param  {number} y  Upper value in the range, when `t` is 1.
+ * @param  {number} t  "Time" between 0 and 1.
+ * @return {number}    Inbetween value for that "time".
+ */
+function lerp(x, y, t) {
+    return x + t * (y - x);
+}
+/**
+ * Clamps a value to always be within a range.
+ *
+ * @param  {number} x    Value to clamp.
+ * @param  {number} min  Minimum value in the range.
+ * @param  {number} max  Maximum value in the range.
+ * @return {number}      Clamped value.
+ */
+function clamp(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+}
+// [END visualize_render_palette]
+function rgbToColor({ r, g, b }) {
+    const f = (x) => {
+        const hex = Math.round(x).toString(16);
+        return hex.length == 1 ? `0${hex}` : hex;
+    };
+    return `#${f(r)}${f(g)}${f(b)}`;
+}
+function renderAzimuth(azimuth, ctx) {
+    if (azimuth === undefined) {
+        return;
+    }
+    ctx.save();
+    ctx.moveTo(0, 0);
+    ctx.rotate((azimuth - 90) * Math.PI / 180);
+    ctx.translate(ctx.canvas.width - 100, 100);
+    // Set arrow style
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.lineWidth = 2;
+    ctx.moveTo(-50, 0);
+    ctx.lineTo(50, 0);
+    ctx.lineTo(40, -10);
+    ctx.moveTo(50, 0);
+    ctx.lineTo(40, 10);
+    ctx.stroke();
+    ctx.moveTo(0, 0);
+    ctx.beginPath();
+    ctx.arc(0, 0, 50, 0, Math.PI * 2);
+    ctx.stroke();
+    // Arrow parameters
+    // const arrowLength = 100;
+    // const arrowHeadLength = 15;
+    // const arrowHeadAngle = Math.PI / 6; // 30 degrees
+    // // Convert azimuth to radians (subtract 90 degrees to align with standard compass)
+    // const angle = (azimuth - 90) * Math.PI / 180;
+    // // Calculate arrow end point
+    // const endX = arrowLength * Math.cos(angle);
+    // const endY = arrowLength * Math.sin(angle);
+    // // Draw main arrow line
+    // ctx.beginPath();
+    // ctx.moveTo(0, 0);
+    // ctx.lineTo(endX, endY);
+    // ctx.stroke();
+    // // Calculate arrowhead points
+    // const arrowHeadAngle1 = angle + Math.PI - arrowHeadAngle;
+    // const arrowHeadAngle2 = angle + Math.PI + arrowHeadAngle;
+    // const arrowHead1X = endX + arrowHeadLength * Math.cos(arrowHeadAngle1);
+    // const arrowHead1Y = endY + arrowHeadLength * Math.sin(arrowHeadAngle1);
+    // const arrowHead2X = endX + arrowHeadLength * Math.cos(arrowHeadAngle2);
+    // const arrowHead2Y = endY + arrowHeadLength * Math.sin(arrowHeadAngle2);
+    // // Draw arrowhead
+    // ctx.beginPath();
+    // ctx.moveTo(endX, endY);
+    // ctx.lineTo(arrowHead1X, arrowHead1Y);
+    // ctx.lineTo(arrowHead2X, arrowHead2Y);
+    // ctx.closePath();
+    // ctx.fill();
+    // ctx.translate(ctx.canvas.width/2, 50);
+    ctx.restore();
+    console.log("renderAzimuth", azimuth);
+}
+function renderSolarPanel(solarPanel, ctx, panelWidth, panelHeight, azimuthAngle, pitchAngle) {
+    const { x, y } = solarPanel.pixelPosition;
+    let width = panelWidth;
+    let height = panelHeight * Math.cos(pitchAngle * Math.PI / 180);
+    if (solarPanel.horizontal) {
+        width = panelHeight;
+        height = panelWidth * Math.cos(pitchAngle * Math.PI / 180);
+    }
+    // Save the current context state
+    ctx.save();
+    // Translate to the panel's center point
+    ctx.translate(x, y);
+    // Rotate by the azimuth angle (convert to radians)
+    ctx.rotate((azimuthAngle * Math.PI) / 180);
+    // Draw panel rectangle centered at origin (since we translated)
+    ctx.fillStyle = 'rgba(115, 143, 255, 1)';
+    ctx.fillRect(-width / 2, -height / 2, width, height);
+    // Draw panel border
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(-width / 2, -height / 2, width, height);
+    // Restore the context state
+    ctx.restore();
+}
+function renderPanels({ canvas, panelConfig, bounds, zoom, roofSegments }) {
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+    }
+    const ctx = canvas.getContext("2d");
+    // Calculate pre zoomed dimensions the canvas is already zoomed
+    const preZoomedWidth = Math.floor(canvas.width / zoom);
+    const preZoomedHeight = Math.floor(canvas.height / zoom);
+    const startX = Math.floor((preZoomedWidth - canvas.width) / 2);
+    const startY = Math.floor((preZoomedHeight - canvas.height) / 2);
+    // Calculate the scale factors to convert lat/lng to pixel coordinates
+    const latToPixel = (lat) => {
+        return preZoomedHeight * (1 - (lat - bounds.south) / (bounds.north - bounds.south)) - startY;
+    };
+    const lngToPixel = (lng) => {
+        return preZoomedWidth * (lng - bounds.west) / (bounds.east - bounds.west) - startX;
+    };
+    // Draw each panel
+    for (const panel of panelConfig.panels) {
+        // Convert panel center coordinates to pixel coordinates
+        const centerX = lngToPixel(panel.center.longitude);
+        const centerY = latToPixel(panel.center.latitude);
+        // Calculate panel dimensions (assuming standard panel size)
+        const panelWidth = panel.orientation === 'LANDSCAPE' ? 19 : 10; // pixels
+        const panelHeight = panel.orientation === 'LANDSCAPE' ? 10 : 19;
+        // Get the roof segment's azimuth angle for this panel
+        const roofSegment = roofSegments[panel.segmentIndex];
+        const azimuthAngle = roofSegment ? roofSegment.azimuthDegrees : 0;
+        // Save the current context state
+        ctx.save();
+        // Translate to the panel's center point
+        ctx.translate(centerX, centerY);
+        // Rotate by the azimuth angle (convert to radians)
+        ctx.rotate((azimuthAngle * Math.PI) / 180);
+        // Draw panel rectangle centered at origin (since we translated)
+        ctx.fillStyle = 'rgba(115, 143, 255, 1)';
+        ctx.fillRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight);
+        // Draw panel border
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(-panelWidth / 2, -panelHeight / 2, panelWidth, panelHeight);
+        // Restore the context state
+        ctx.restore();
+    }
+    return canvas;
+}
+function renderCombinedWithZoom({ rgb, zoom = 1, canvas, }) {
+    // First render the RGB image
+    const rgbCanvas = renderRGB(rgb, undefined, canvas);
+    const ctx = rgbCanvas.getContext("2d");
+    const imgData = ctx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height);
+    // Calculate the center portion to show based on zoom
+    const width = rgbCanvas.width;
+    const height = rgbCanvas.height;
+    const zoomedWidth = Math.floor(width * zoom);
+    const zoomedHeight = Math.floor(height * zoom);
+    const startX = Math.floor((width - zoomedWidth) / 2);
+    const startY = Math.floor((height - zoomedHeight) / 2);
+    // Create a new image data for the zoomed portion
+    const zoomedImgData = new ImageData(zoomedWidth, zoomedHeight);
+    // Copy RGB data and apply palette where mask is non-zero
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const i = (y * width + x) * 4;
+            if (x >= startX && x < startX + zoomedWidth &&
+                y >= startY && y < startY + zoomedHeight) {
+                // Calculate position in zoomed image
+                const zoomedX = x - startX;
+                const zoomedY = y - startY;
+                const zoomedI = (zoomedY * zoomedWidth + zoomedX) * 4;
+                zoomedImgData.data[zoomedI] = imgData.data[i];
+                zoomedImgData.data[zoomedI + 1] = imgData.data[i + 1];
+                zoomedImgData.data[zoomedI + 2] = imgData.data[i + 2];
+                zoomedImgData.data[zoomedI + 3] = 255; // Alpha channel
+            }
+        }
+    }
+    // Resize canvas to match zoomed dimensions
+    rgbCanvas.width = zoomedWidth;
+    rgbCanvas.height = zoomedHeight;
+    // Put the zoomed image data back to the canvas
+    ctx.putImageData(zoomedImgData, 0, 0);
+    return rgbCanvas;
+}
+
+const OPEN_POLYGON_COLOR = "red"; //"#ffffff";
+const CLOSED_POLYGON_COLOR = "#fcba03";
+const DOTTED_LINE_COLOR = "rgba(0, 0, 0, 0.5)";
+const ROW_SPACING = 1;
+const COLUMN_SPACING = 1;
+const BORDER_INSET = 0.2;
+
+function projectPointPerpendicularToLine({ x, y, lastPoint, secondLastPoint, }) {
+    // Calculate the direction vector of the last line
+    const dx = lastPoint.x - secondLastPoint.x;
+    const dy = lastPoint.y - secondLastPoint.y;
+    // Calculate perpendicular vector (rotate 90 degrees)
+    const perpDx = -dy;
+    const perpDy = dx;
+    // Normalize the perpendicular vector
+    const perpLength = Math.sqrt(perpDx * perpDx + perpDy * perpDy);
+    const normalizedPerpDx = perpDx / perpLength;
+    const normalizedPerpDy = perpDy / perpLength;
+    // Project the mouse point onto the perpendicular line
+    const vectorToMouse = {
+        x: x - lastPoint.x,
+        y: y - lastPoint.y,
+    };
+    // Calculate the projection length (dot product)
+    const projectionLength = vectorToMouse.x * normalizedPerpDx +
+        vectorToMouse.y * normalizedPerpDy;
+    // Calculate the new point position using the projected length
+    x = lastPoint.x + normalizedPerpDx * projectionLength;
+    y = lastPoint.y + normalizedPerpDy * projectionLength;
+    return { x, y };
+}
+
+function drawPolygon({ polygonCtx, polygonCanvas, polygon, shiftKeyPressed, mousePoint, strokeColor, fillColor }) {
+    if (!polygonCtx || !polygonCanvas)
+        return;
+    // Draw the polygon
+    polygonCtx.beginPath();
+    polygonCtx.strokeStyle = strokeColor;
+    polygonCtx.lineWidth = 2;
+    polygon.points.forEach((point, index) => {
+        if (index === 0) {
+            polygonCtx.moveTo(point.x, point.y);
+        }
+        else {
+            polygonCtx.lineTo(point.x, point.y);
+        }
+    });
+    if (polygon.closed) {
+        polygonCtx.lineTo(polygon.points[0].x, polygon.points[0].y);
+        if (fillColor) {
+            polygonCtx.fillStyle = fillColor;
+            polygonCtx.fill();
+        }
+    }
+    if (polygon.points.length > 0) {
+        polygonCtx.stroke();
+    }
+    if (polygon.points.length > 1 && !polygon.closed && shiftKeyPressed) {
+        const projectedPoint = projectPointPerpendicularToLine({
+            x: mousePoint.x,
+            y: mousePoint.y,
+            lastPoint: polygon.points[polygon.points.length - 1],
+            secondLastPoint: polygon.points[polygon.points.length - 2],
+        });
+        drawPerpendicularDottedLine({
+            ctx: polygonCtx,
+            startPoint: projectedPoint,
+            endPoint: polygon.points[polygon.points.length - 1],
+            strokeStyle: DOTTED_LINE_COLOR,
+        });
+    }
+    if (shiftKeyPressed && polygon.points.length > 1 && !polygon.closed) {
+        const projectedPoint = projectPointPerpendicularToLine({
+            x: mousePoint.x,
+            y: mousePoint.y,
+            lastPoint: polygon.points[polygon.points.length - 1],
+            secondLastPoint: polygon.points[polygon.points.length - 2],
+        });
+        drawCircle({
+            ctx: polygonCtx,
+            x: projectedPoint.x,
+            y: projectedPoint.y,
+            radius: 5,
+            strokeStyle: DOTTED_LINE_COLOR,
+        });
+    }
+    // Draw circles around each point
+    polygon.points.forEach((point) => {
+        polygonCtx.beginPath();
+        const strokeStyle = strokeColor;
+        const distance = Math.sqrt(Math.pow(point.x - mousePoint.x, 2) + Math.pow(point.y - mousePoint.y, 2));
+        // Highlight the point if it's being hovered or dragged
+        if (distance < 10) {
+            drawCircle({
+                ctx: polygonCtx,
+                x: point.x,
+                y: point.y,
+                strokeStyle,
+                radius: 8,
+            });
+        }
+        else {
+            drawCircle({
+                ctx: polygonCtx,
+                x: point.x,
+                y: point.y,
+                strokeStyle,
+                radius: 5,
+            });
+        }
+        polygonCtx.stroke();
+    });
+}
+function drawCircle({ ctx, x, y, radius, strokeStyle = "black", lineWidth = 2 }) {
+    ctx.beginPath();
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.arc(x, y, radius, 0, 2 * Math.PI);
+    ctx.stroke();
+}
+function drawPerpendicularDottedLine({ ctx, startPoint, endPoint, dashPattern = [5, 5], strokeStyle = "black", lineWidth = 2 }) {
+    // Set up the line style
+    ctx.beginPath();
+    ctx.strokeStyle = strokeStyle;
+    ctx.lineWidth = lineWidth;
+    ctx.setLineDash(dashPattern);
+    // Draw the dotted line
+    ctx.moveTo(startPoint.x, startPoint.y);
+    ctx.lineTo(endPoint.x, endPoint.y);
+    ctx.stroke();
+    // Reset the line dash
+    ctx.setLineDash([]);
+}
+function isPointOnBorder(point, polygon) {
+    if (!polygon.closed || polygon.points.length < 3)
+        return false;
+    const x = point.x;
+    const y = point.y;
+    // For each edge of the polygon
+    for (let i = 0; i < polygon.points.length; i++) {
+        const p1 = polygon.points[i];
+        const p2 = polygon.points[(i + 1) % polygon.points.length];
+        // calculate the distance from point p1 to p2
+        const distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+        const distanceToPoint = Math.sqrt(Math.pow(p1.x - x, 2) + Math.pow(p1.y - y, 2));
+        const distanceFromPoint = Math.sqrt(Math.pow(p2.x - x, 2) + Math.pow(p2.y - y, 2));
+        if (distance === distanceToPoint + distanceFromPoint) {
+            return true;
+        }
+    }
+    return false;
+}
+function isPointInPolygon(point, polygon) {
+    if (!polygon.closed || polygon.points.length < 3)
+        return false;
+    const num_vertices = polygon.points.length;
+    const x = point.x;
+    const y = point.y;
+    let inside = false;
+    let p1 = polygon.points[0];
+    let p2;
+    for (let i = 1; i <= num_vertices; i++) {
+        p2 = polygon.points[i % num_vertices];
+        if (y > Math.min(p1.y, p2.y)) {
+            if (y <= Math.max(p1.y, p2.y)) {
+                if (x <= Math.max(p1.x, p2.x)) {
+                    const x_intersection = ((y - p1.y) * (p2.x - p1.x)) / (p2.y - p1.y) + p1.x;
+                    if (p1.x === p2.x || x <= x_intersection) {
+                        inside = !inside;
+                    }
+                }
+            }
+        }
+        p1 = p2;
+    }
+    return inside;
+}
+
+const polygonKeyboardCombinations = [
+    {
+        key: "shift",
+        description: "add one point on perpendicular line",
+    },
+    // {
+    //     key: "alt",
+    //     description: "add parallel line",
+    // },
+];
+const moveTool = {
+    name: "move",
+    ariaLabel: "Move",
+    icon: "move",
+    cursor: "move",
+    keyboardShortcut: "m",
+};
+const roofTool = {
+    name: "roof",
+    ariaLabel: "Roof Area",
+    icon: "house",
+    cursor: "crosshair",
+    keyboardShortcut: "r",
+    keyboardCombinations: polygonKeyboardCombinations,
+};
+const obstructionTool = {
+    name: "obstruction",
+    ariaLabel: "Obstruction",
+    icon: "octagon-minus",
+    cursor: "crosshair",
+    keyboardShortcut: "o",
+    keyboardCombinations: polygonKeyboardCombinations,
+};
+const deleteTool = {
+    name: "delete",
+    ariaLabel: "Delete",
+    icon: "eraser",
+    cursor: "default",
+    keyboardShortcut: "d",
+};
+const tools = [
+    moveTool,
+    roofTool,
+    obstructionTool,
+    deleteTool,
+];
+
+const DEFAULT_SOLAR_EXPERT_CONFIG = {
+    openRoofColor: "#d6eeff",
+    closedRoofColor: "#ffffff",
+    openObstructionColor: "#f57242",
+    closedObstructionColor: "rgba(255, 132, 107, 0.8)",
+    roofPolygonFillColor: "rgba(92, 187, 255, 0.5)",
+    obstructionPolygonFillColor: "rgba(255, 132, 107, 0.5)",
+    roofPolygonHoverFillColor: "rgba(92, 187, 255, 0.8)",
+    obstructionPolygonHoverFillColor: "rgba(255, 132, 107, 0.8)",
+    roofPolygonSelectedFillColor: "rgba(92, 187, 255, 0.7)",
+    obstructionPolygonSelectedFillColor: "rgba(255, 132, 107, 0.7)",
+};
+const DEFAULT_SOLAR_PANEL_TYPE = {
+    widthMeters: 1.134,
+    heightMeters: 1.762,
+    kWattPeak: 600,
+    efficiency: 0.2245,
+    price: 77.68,
+};
+
+function getFillColor(selectedPolygon, hoveredPolygon, _id, polygon, config) {
+    const isHovered = hoveredPolygon?.type === polygon.type && hoveredPolygon?._id === _id;
+    if (isHovered) {
+        return polygon.type === "roof" ? config.roofPolygonHoverFillColor : config.obstructionPolygonHoverFillColor;
+    }
+    const isSelected = selectedPolygon?.type === polygon.type && selectedPolygon?._id === _id;
+    if (isSelected) {
+        return polygon.type === "roof" ? config.roofPolygonSelectedFillColor : config.obstructionPolygonSelectedFillColor;
+    }
+    if (polygon.type === "roof") {
+        return polygon.closed ? config.roofPolygonFillColor : undefined;
+    }
+    return polygon.closed ? config.obstructionPolygonFillColor : undefined;
+}
+
+var max = 'ffffffff-ffff-ffff-ffff-ffffffffffff';
+
+var nil = '00000000-0000-0000-0000-000000000000';
+
+var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/i;
+
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+function parse(uuid) {
+  if (!validate(uuid)) {
+    throw TypeError('Invalid UUID');
+  }
+  var v;
+  var arr = new Uint8Array(16);
+
+  // Parse ########-....-....-....-............
+  arr[0] = (v = parseInt(uuid.slice(0, 8), 16)) >>> 24;
+  arr[1] = v >>> 16 & 0xff;
+  arr[2] = v >>> 8 & 0xff;
+  arr[3] = v & 0xff;
+
+  // Parse ........-####-....-....-............
+  arr[4] = (v = parseInt(uuid.slice(9, 13), 16)) >>> 8;
+  arr[5] = v & 0xff;
+
+  // Parse ........-....-####-....-............
+  arr[6] = (v = parseInt(uuid.slice(14, 18), 16)) >>> 8;
+  arr[7] = v & 0xff;
+
+  // Parse ........-....-....-####-............
+  arr[8] = (v = parseInt(uuid.slice(19, 23), 16)) >>> 8;
+  arr[9] = v & 0xff;
+
+  // Parse ........-....-....-....-############
+  // (Use "/" to avoid 32-bit truncation when bit-shifting high-order bytes)
+  arr[10] = (v = parseInt(uuid.slice(24, 36), 16)) / 0x10000000000 & 0xff;
+  arr[11] = v / 0x100000000 & 0xff;
+  arr[12] = v >>> 24 & 0xff;
+  arr[13] = v >>> 16 & 0xff;
+  arr[14] = v >>> 8 & 0xff;
+  arr[15] = v & 0xff;
+  return arr;
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  //
+  // Note to future-self: No, you can't remove the `toLowerCase()` call.
+  // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+function stringify(arr, offset = 0) {
+  var uuid = unsafeStringify(arr, offset);
+  // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+  return uuid;
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+  return getRandomValues(rnds8);
+}
+
+// **`v1()` - Generate time-based UUID**
+//
+// Inspired by https://github.com/LiosK/UUID.js
+// and http://docs.python.org/library/uuid.html
+
+var _nodeId;
+var _clockseq;
+
+// Previous uuid creation time
+var _lastMSecs = 0;
+var _lastNSecs = 0;
+
+// See https://github.com/uuidjs/uuid for API details
+function v1(options, buf, offset) {
+  var i = buf && offset || 0;
+  var b = buf || new Array(16);
+  options = options || {};
+  var node = options.node;
+  var clockseq = options.clockseq;
+
+  // v1 only: Use cached `node` and `clockseq` values
+  if (!options._v6) {
+    if (!node) {
+      node = _nodeId;
+    }
+    if (clockseq == null) {
+      clockseq = _clockseq;
+    }
+  }
+
+  // Handle cases where we need entropy.  We do this lazily to minimize issues
+  // related to insufficient system entropy.  See #189
+  if (node == null || clockseq == null) {
+    var seedBytes = options.random || (options.rng || rng)();
+
+    // Randomize node
+    if (node == null) {
+      node = [seedBytes[0], seedBytes[1], seedBytes[2], seedBytes[3], seedBytes[4], seedBytes[5]];
+
+      // v1 only: cache node value for reuse
+      if (!_nodeId && !options._v6) {
+        // per RFC4122 4.5: Set MAC multicast bit (v1 only)
+        node[0] |= 0x01; // Set multicast bit
+
+        _nodeId = node;
+      }
+    }
+
+    // Randomize clockseq
+    if (clockseq == null) {
+      // Per 4.2.2, randomize (14 bit) clockseq
+      clockseq = (seedBytes[6] << 8 | seedBytes[7]) & 0x3fff;
+      if (_clockseq === undefined && !options._v6) {
+        _clockseq = clockseq;
+      }
+    }
+  }
+
+  // v1 & v6 timestamps are 100 nano-second units since the Gregorian epoch,
+  // (1582-10-15 00:00).  JSNumbers aren't precise enough for this, so time is
+  // handled internally as 'msecs' (integer milliseconds) and 'nsecs'
+  // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.
+  var msecs = options.msecs !== undefined ? options.msecs : Date.now();
+
+  // Per 4.2.1.2, use count of uuid's generated during the current clock
+  // cycle to simulate higher resolution clock
+  var nsecs = options.nsecs !== undefined ? options.nsecs : _lastNSecs + 1;
+
+  // Time since last uuid creation (in msecs)
+  var dt = msecs - _lastMSecs + (nsecs - _lastNSecs) / 10000;
+
+  // Per 4.2.1.2, Bump clockseq on clock regression
+  if (dt < 0 && options.clockseq === undefined) {
+    clockseq = clockseq + 1 & 0x3fff;
+  }
+
+  // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new
+  // time interval
+  if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === undefined) {
+    nsecs = 0;
+  }
+
+  // Per 4.2.1.2 Throw error if too many uuids are requested
+  if (nsecs >= 10000) {
+    throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
+  }
+  _lastMSecs = msecs;
+  _lastNSecs = nsecs;
+  _clockseq = clockseq;
+
+  // Per 4.1.4 - Convert from unix epoch to Gregorian epoch
+  msecs += 12219292800000;
+
+  // `time_low`
+  var tl = ((msecs & 0xfffffff) * 10000 + nsecs) % 0x100000000;
+  b[i++] = tl >>> 24 & 0xff;
+  b[i++] = tl >>> 16 & 0xff;
+  b[i++] = tl >>> 8 & 0xff;
+  b[i++] = tl & 0xff;
+
+  // `time_mid`
+  var tmh = msecs / 0x100000000 * 10000 & 0xfffffff;
+  b[i++] = tmh >>> 8 & 0xff;
+  b[i++] = tmh & 0xff;
+
+  // `time_high_and_version`
+  b[i++] = tmh >>> 24 & 0xf | 0x10; // include version
+  b[i++] = tmh >>> 16 & 0xff;
+
+  // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant)
+  b[i++] = clockseq >>> 8 | 0x80;
+
+  // `clock_seq_low`
+  b[i++] = clockseq & 0xff;
+
+  // `node`
+  for (var n = 0; n < 6; ++n) {
+    b[i + n] = node[n];
+  }
+  return buf || unsafeStringify(b);
+}
+
+/**
+ * Convert a v1 UUID to a v6 UUID
+ *
+ * @param {string|Uint8Array} uuid - The v1 UUID to convert to v6
+ * @returns {string|Uint8Array} The v6 UUID as the same type as the `uuid` arg
+ * (string or Uint8Array)
+ */
+function v1ToV6(uuid) {
+  var v1Bytes = typeof uuid === 'string' ? parse(uuid) : uuid;
+  var v6Bytes = _v1ToV6(v1Bytes);
+  return typeof uuid === 'string' ? unsafeStringify(v6Bytes) : v6Bytes;
+}
+
+// Do the field transformation needed for v1 -> v6
+function _v1ToV6(v1Bytes, randomize = false) {
+  return Uint8Array.of((v1Bytes[6] & 0x0f) << 4 | v1Bytes[7] >> 4 & 0x0f, (v1Bytes[7] & 0x0f) << 4 | (v1Bytes[4] & 0xf0) >> 4, (v1Bytes[4] & 0x0f) << 4 | (v1Bytes[5] & 0xf0) >> 4, (v1Bytes[5] & 0x0f) << 4 | (v1Bytes[0] & 0xf0) >> 4, (v1Bytes[0] & 0x0f) << 4 | (v1Bytes[1] & 0xf0) >> 4, (v1Bytes[1] & 0x0f) << 4 | (v1Bytes[2] & 0xf0) >> 4, 0x60 | v1Bytes[2] & 0x0f, v1Bytes[3], v1Bytes[8], v1Bytes[9], v1Bytes[10], v1Bytes[11], v1Bytes[12], v1Bytes[13], v1Bytes[14], v1Bytes[15]);
+}
+
+function stringToBytes(str) {
+  str = unescape(encodeURIComponent(str)); // UTF8 escape
+
+  var bytes = [];
+  for (var i = 0; i < str.length; ++i) {
+    bytes.push(str.charCodeAt(i));
+  }
+  return bytes;
+}
+var DNS = '6ba7b810-9dad-11d1-80b4-00c04fd430c8';
+var URL = '6ba7b811-9dad-11d1-80b4-00c04fd430c8';
+function v35(name, version, hashfunc) {
+  function generateUUID(value, namespace, buf, offset) {
+    var _namespace;
+    if (typeof value === 'string') {
+      value = stringToBytes(value);
+    }
+    if (typeof namespace === 'string') {
+      namespace = parse(namespace);
+    }
+    if (((_namespace = namespace) === null || _namespace === void 0 ? void 0 : _namespace.length) !== 16) {
+      throw TypeError('Namespace must be array-like (16 iterable integer values, 0-255)');
+    }
+
+    // Compute hash of namespace and value, Per 4.3
+    // Future: Use spread syntax when supported on all platforms, e.g. `bytes =
+    // hashfunc([...namespace, ... value])`
+    var bytes = new Uint8Array(16 + value.length);
+    bytes.set(namespace);
+    bytes.set(value, namespace.length);
+    bytes = hashfunc(bytes);
+    bytes[6] = bytes[6] & 0x0f | version;
+    bytes[8] = bytes[8] & 0x3f | 0x80;
+    if (buf) {
+      offset = offset || 0;
+      for (var i = 0; i < 16; ++i) {
+        buf[offset + i] = bytes[i];
+      }
+      return buf;
+    }
+    return unsafeStringify(bytes);
+  }
+
+  // Function#name is not settable on some platforms (#270)
+  try {
+    generateUUID.name = name;
+  } catch (err) {}
+
+  // For CommonJS default export support
+  generateUUID.DNS = DNS;
+  generateUUID.URL = URL;
+  return generateUUID;
+}
+
+/*
+ * Browser-compatible JavaScript MD5
+ *
+ * Modification of JavaScript MD5
+ * https://github.com/blueimp/JavaScript-MD5
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ *
+ * Based on
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
+function md5(bytes) {
+  if (typeof bytes === 'string') {
+    var msg = unescape(encodeURIComponent(bytes)); // UTF8 escape
+
+    bytes = new Uint8Array(msg.length);
+    for (var i = 0; i < msg.length; ++i) {
+      bytes[i] = msg.charCodeAt(i);
+    }
+  }
+  return md5ToHexEncodedArray(wordsToMd5(bytesToWords(bytes), bytes.length * 8));
+}
+
+/*
+ * Convert an array of little-endian words to an array of bytes
+ */
+function md5ToHexEncodedArray(input) {
+  var output = [];
+  var length32 = input.length * 32;
+  var hexTab = '0123456789abcdef';
+  for (var i = 0; i < length32; i += 8) {
+    var x = input[i >> 5] >>> i % 32 & 0xff;
+    var hex = parseInt(hexTab.charAt(x >>> 4 & 0x0f) + hexTab.charAt(x & 0x0f), 16);
+    output.push(hex);
+  }
+  return output;
+}
+
+/**
+ * Calculate output length with padding and bit length
+ */
+function getOutputLength(inputLength8) {
+  return (inputLength8 + 64 >>> 9 << 4) + 14 + 1;
+}
+
+/*
+ * Calculate the MD5 of an array of little-endian words, and a bit length.
+ */
+function wordsToMd5(x, len) {
+  /* append padding */
+  x[len >> 5] |= 0x80 << len % 32;
+  x[getOutputLength(len) - 1] = len;
+  var a = 1732584193;
+  var b = -271733879;
+  var c = -1732584194;
+  var d = 271733878;
+  for (var i = 0; i < x.length; i += 16) {
+    var olda = a;
+    var oldb = b;
+    var oldc = c;
+    var oldd = d;
+    a = md5ff(a, b, c, d, x[i], 7, -680876936);
+    d = md5ff(d, a, b, c, x[i + 1], 12, -389564586);
+    c = md5ff(c, d, a, b, x[i + 2], 17, 606105819);
+    b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330);
+    a = md5ff(a, b, c, d, x[i + 4], 7, -176418897);
+    d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426);
+    c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341);
+    b = md5ff(b, c, d, a, x[i + 7], 22, -45705983);
+    a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416);
+    d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417);
+    c = md5ff(c, d, a, b, x[i + 10], 17, -42063);
+    b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162);
+    a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682);
+    d = md5ff(d, a, b, c, x[i + 13], 12, -40341101);
+    c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290);
+    b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329);
+    a = md5gg(a, b, c, d, x[i + 1], 5, -165796510);
+    d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632);
+    c = md5gg(c, d, a, b, x[i + 11], 14, 643717713);
+    b = md5gg(b, c, d, a, x[i], 20, -373897302);
+    a = md5gg(a, b, c, d, x[i + 5], 5, -701558691);
+    d = md5gg(d, a, b, c, x[i + 10], 9, 38016083);
+    c = md5gg(c, d, a, b, x[i + 15], 14, -660478335);
+    b = md5gg(b, c, d, a, x[i + 4], 20, -405537848);
+    a = md5gg(a, b, c, d, x[i + 9], 5, 568446438);
+    d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690);
+    c = md5gg(c, d, a, b, x[i + 3], 14, -187363961);
+    b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501);
+    a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467);
+    d = md5gg(d, a, b, c, x[i + 2], 9, -51403784);
+    c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473);
+    b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734);
+    a = md5hh(a, b, c, d, x[i + 5], 4, -378558);
+    d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463);
+    c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562);
+    b = md5hh(b, c, d, a, x[i + 14], 23, -35309556);
+    a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060);
+    d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353);
+    c = md5hh(c, d, a, b, x[i + 7], 16, -155497632);
+    b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640);
+    a = md5hh(a, b, c, d, x[i + 13], 4, 681279174);
+    d = md5hh(d, a, b, c, x[i], 11, -358537222);
+    c = md5hh(c, d, a, b, x[i + 3], 16, -722521979);
+    b = md5hh(b, c, d, a, x[i + 6], 23, 76029189);
+    a = md5hh(a, b, c, d, x[i + 9], 4, -640364487);
+    d = md5hh(d, a, b, c, x[i + 12], 11, -421815835);
+    c = md5hh(c, d, a, b, x[i + 15], 16, 530742520);
+    b = md5hh(b, c, d, a, x[i + 2], 23, -995338651);
+    a = md5ii(a, b, c, d, x[i], 6, -198630844);
+    d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415);
+    c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905);
+    b = md5ii(b, c, d, a, x[i + 5], 21, -57434055);
+    a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571);
+    d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606);
+    c = md5ii(c, d, a, b, x[i + 10], 15, -1051523);
+    b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799);
+    a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359);
+    d = md5ii(d, a, b, c, x[i + 15], 10, -30611744);
+    c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380);
+    b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649);
+    a = md5ii(a, b, c, d, x[i + 4], 6, -145523070);
+    d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379);
+    c = md5ii(c, d, a, b, x[i + 2], 15, 718787259);
+    b = md5ii(b, c, d, a, x[i + 9], 21, -343485551);
+    a = safeAdd(a, olda);
+    b = safeAdd(b, oldb);
+    c = safeAdd(c, oldc);
+    d = safeAdd(d, oldd);
+  }
+  return [a, b, c, d];
+}
+
+/*
+ * Convert an array bytes to an array of little-endian words
+ * Characters >255 have their high-byte silently ignored.
+ */
+function bytesToWords(input) {
+  if (input.length === 0) {
+    return [];
+  }
+  var length8 = input.length * 8;
+  var output = new Uint32Array(getOutputLength(length8));
+  for (var i = 0; i < length8; i += 8) {
+    output[i >> 5] |= (input[i / 8] & 0xff) << i % 32;
+  }
+  return output;
+}
+
+/*
+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+ * to work around bugs in some JS interpreters.
+ */
+function safeAdd(x, y) {
+  var lsw = (x & 0xffff) + (y & 0xffff);
+  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+  return msw << 16 | lsw & 0xffff;
+}
+
+/*
+ * Bitwise rotate a 32-bit number to the left.
+ */
+function bitRotateLeft(num, cnt) {
+  return num << cnt | num >>> 32 - cnt;
+}
+
+/*
+ * These functions implement the four basic operations the algorithm uses.
+ */
+function md5cmn(q, a, b, x, s, t) {
+  return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b);
+}
+function md5ff(a, b, c, d, x, s, t) {
+  return md5cmn(b & c | ~b & d, a, b, x, s, t);
+}
+function md5gg(a, b, c, d, x, s, t) {
+  return md5cmn(b & d | c & ~d, a, b, x, s, t);
+}
+function md5hh(a, b, c, d, x, s, t) {
+  return md5cmn(b ^ c ^ d, a, b, x, s, t);
+}
+function md5ii(a, b, c, d, x, s, t) {
+  return md5cmn(c ^ (b | ~d), a, b, x, s, t);
+}
+
+var v3 = v35('v3', 0x30, md5);
+
+var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+
+  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80;
+
+  // Copy bytes to buffer, if provided
+  if (buf) {
+    offset = offset || 0;
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
+
+// Adapted from Chris Veness' SHA1 code at
+// http://www.movable-type.co.uk/scripts/sha1.html
+function f(s, x, y, z) {
+  switch (s) {
+    case 0:
+      return x & y ^ ~x & z;
+    case 1:
+      return x ^ y ^ z;
+    case 2:
+      return x & y ^ x & z ^ y & z;
+    case 3:
+      return x ^ y ^ z;
+  }
+}
+function ROTL(x, n) {
+  return x << n | x >>> 32 - n;
+}
+function sha1(bytes) {
+  var K = [0x5a827999, 0x6ed9eba1, 0x8f1bbcdc, 0xca62c1d6];
+  var H = [0x67452301, 0xefcdab89, 0x98badcfe, 0x10325476, 0xc3d2e1f0];
+  if (typeof bytes === 'string') {
+    var msg = unescape(encodeURIComponent(bytes)); // UTF8 escape
+
+    bytes = [];
+    for (var i = 0; i < msg.length; ++i) {
+      bytes.push(msg.charCodeAt(i));
+    }
+  } else if (!Array.isArray(bytes)) {
+    // Convert Array-like to Array
+    bytes = Array.prototype.slice.call(bytes);
+  }
+  bytes.push(0x80);
+  var l = bytes.length / 4 + 2;
+  var N = Math.ceil(l / 16);
+  var M = new Array(N);
+  for (var _i = 0; _i < N; ++_i) {
+    var arr = new Uint32Array(16);
+    for (var j = 0; j < 16; ++j) {
+      arr[j] = bytes[_i * 64 + j * 4] << 24 | bytes[_i * 64 + j * 4 + 1] << 16 | bytes[_i * 64 + j * 4 + 2] << 8 | bytes[_i * 64 + j * 4 + 3];
+    }
+    M[_i] = arr;
+  }
+  M[N - 1][14] = (bytes.length - 1) * 8 / Math.pow(2, 32);
+  M[N - 1][14] = Math.floor(M[N - 1][14]);
+  M[N - 1][15] = (bytes.length - 1) * 8 & 0xffffffff;
+  for (var _i2 = 0; _i2 < N; ++_i2) {
+    var W = new Uint32Array(80);
+    for (var t = 0; t < 16; ++t) {
+      W[t] = M[_i2][t];
+    }
+    for (var _t = 16; _t < 80; ++_t) {
+      W[_t] = ROTL(W[_t - 3] ^ W[_t - 8] ^ W[_t - 14] ^ W[_t - 16], 1);
+    }
+    var a = H[0];
+    var b = H[1];
+    var c = H[2];
+    var d = H[3];
+    var e = H[4];
+    for (var _t2 = 0; _t2 < 80; ++_t2) {
+      var s = Math.floor(_t2 / 20);
+      var T = ROTL(a, 5) + f(s, b, c, d) + e + K[s] + W[_t2] >>> 0;
+      e = d;
+      d = c;
+      c = ROTL(b, 30) >>> 0;
+      b = a;
+      a = T;
+    }
+    H[0] = H[0] + a >>> 0;
+    H[1] = H[1] + b >>> 0;
+    H[2] = H[2] + c >>> 0;
+    H[3] = H[3] + d >>> 0;
+    H[4] = H[4] + e >>> 0;
+  }
+  return [H[0] >> 24 & 0xff, H[0] >> 16 & 0xff, H[0] >> 8 & 0xff, H[0] & 0xff, H[1] >> 24 & 0xff, H[1] >> 16 & 0xff, H[1] >> 8 & 0xff, H[1] & 0xff, H[2] >> 24 & 0xff, H[2] >> 16 & 0xff, H[2] >> 8 & 0xff, H[2] & 0xff, H[3] >> 24 & 0xff, H[3] >> 16 & 0xff, H[3] >> 8 & 0xff, H[3] & 0xff, H[4] >> 24 & 0xff, H[4] >> 16 & 0xff, H[4] >> 8 & 0xff, H[4] & 0xff];
+}
+
+var v5 = v35('v5', 0x50, sha1);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+/**
+ *
+ * @param {object} options
+ * @param {Uint8Array=} buf
+ * @param {number=} offset
+ * @returns
+ */
+function v6(options = {}, buf, offset = 0) {
+  // v6 is v1 with different field layout, so we start with a v1 UUID, albeit
+  // with slightly different behavior around how the clock_seq and node fields
+  // are randomized, which is why we call v1 with _v6: true.
+  var bytes = v1(_objectSpread(_objectSpread({}, options), {}, {
+    _v6: true
+  }), new Uint8Array(16));
+
+  // Reorder the fields to v6 layout.
+  bytes = v1ToV6(bytes);
+
+  // Return as a byte array if requested
+  if (buf) {
+    for (var i = 0; i < 16; i++) {
+      buf[offset + i] = bytes[i];
+    }
+    return buf;
+  }
+  return unsafeStringify(bytes);
+}
+
+/**
+ * Convert a v6 UUID to a v1 UUID
+ *
+ * @param {string|Uint8Array} uuid - The v6 UUID to convert to v6
+ * @returns {string|Uint8Array} The v1 UUID as the same type as the `uuid` arg
+ * (string or Uint8Array)
+ */
+function v6ToV1(uuid) {
+  var v6Bytes = typeof uuid === 'string' ? parse(uuid) : uuid;
+  var v1Bytes = _v6ToV1(v6Bytes);
+  return typeof uuid === 'string' ? unsafeStringify(v1Bytes) : v1Bytes;
+}
+
+// Do the field transformation needed for v6 -> v1
+function _v6ToV1(v6Bytes) {
+  return Uint8Array.of((v6Bytes[3] & 0x0f) << 4 | v6Bytes[4] >> 4 & 0x0f, (v6Bytes[4] & 0x0f) << 4 | (v6Bytes[5] & 0xf0) >> 4, (v6Bytes[5] & 0x0f) << 4 | v6Bytes[6] & 0x0f, v6Bytes[7], (v6Bytes[1] & 0x0f) << 4 | (v6Bytes[2] & 0xf0) >> 4, (v6Bytes[2] & 0x0f) << 4 | (v6Bytes[3] & 0xf0) >> 4, 0x10 | (v6Bytes[0] & 0xf0) >> 4, (v6Bytes[0] & 0x0f) << 4 | (v6Bytes[1] & 0xf0) >> 4, v6Bytes[8], v6Bytes[9], v6Bytes[10], v6Bytes[11], v6Bytes[12], v6Bytes[13], v6Bytes[14], v6Bytes[15]);
+}
+
+/**
+ * UUID V7 - Unix Epoch time-based UUID
+ *
+ * The IETF has published RFC9562, introducing 3 new UUID versions (6,7,8). This
+ * implementation of V7 is based on the accepted, though not yet approved,
+ * revisions.
+ *
+ * RFC 9562:https://www.rfc-editor.org/rfc/rfc9562.html Universally Unique
+ * IDentifiers (UUIDs)
+
+ *
+ * Sample V7 value:
+ * https://www.rfc-editor.org/rfc/rfc9562.html#name-example-of-a-uuidv7-value
+ *
+ * Monotonic Bit Layout: RFC rfc9562.6.2 Method 1, Dedicated Counter Bits ref:
+ *     https://www.rfc-editor.org/rfc/rfc9562.html#section-6.2-5.1
+ *
+ *   0                   1                   2                   3 0 1 2 3 4 5 6
+ *   7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
+ *  +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+ *  |                          unix_ts_ms                           |
+ *  +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+ *  |          unix_ts_ms           |  ver  |        seq_hi         |
+ *  +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+ *  |var|               seq_low               |        rand         |
+ *  +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+ *  |                             rand                              |
+ *  +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
+ *
+ * seq is a 31 bit serialized counter; comprised of 12 bit seq_hi and 19 bit
+ * seq_low, and randomly initialized upon timestamp change. 31 bit counter size
+ * was selected as any bitwise operations in node are done as _signed_ 32 bit
+ * ints. we exclude the sign bit.
+ */
+
+var _seqLow = null;
+var _seqHigh = null;
+var _msecs = 0;
+function v7(options, buf, offset) {
+  options = options || {};
+
+  // initialize buffer and pointer
+  var i = buf && offset || 0;
+  var b = buf || new Uint8Array(16);
+
+  // rnds is Uint8Array(16) filled with random bytes
+  var rnds = options.random || (options.rng || rng)();
+
+  // milliseconds since unix epoch, 1970-01-01 00:00
+  var msecs = options.msecs !== undefined ? options.msecs : Date.now();
+
+  // seq is user provided 31 bit counter
+  var seq = options.seq !== undefined ? options.seq : null;
+
+  // initialize local seq high/low parts
+  var seqHigh = _seqHigh;
+  var seqLow = _seqLow;
+
+  // check if clock has advanced and user has not provided msecs
+  if (msecs > _msecs && options.msecs === undefined) {
+    _msecs = msecs;
+
+    // unless user provided seq, reset seq parts
+    if (seq !== null) {
+      seqHigh = null;
+      seqLow = null;
+    }
+  }
+
+  // if we have a user provided seq
+  if (seq !== null) {
+    // trim provided seq to 31 bits of value, avoiding overflow
+    if (seq > 0x7fffffff) {
+      seq = 0x7fffffff;
+    }
+
+    // split provided seq into high/low parts
+    seqHigh = seq >>> 19 & 0xfff;
+    seqLow = seq & 0x7ffff;
+  }
+
+  // randomly initialize seq
+  if (seqHigh === null || seqLow === null) {
+    seqHigh = rnds[6] & 0x7f;
+    seqHigh = seqHigh << 8 | rnds[7];
+    seqLow = rnds[8] & 0x3f; // pad for var
+    seqLow = seqLow << 8 | rnds[9];
+    seqLow = seqLow << 5 | rnds[10] >>> 3;
+  }
+
+  // increment seq if within msecs window
+  if (msecs + 10000 > _msecs && seq === null) {
+    if (++seqLow > 0x7ffff) {
+      seqLow = 0;
+      if (++seqHigh > 0xfff) {
+        seqHigh = 0;
+
+        // increment internal _msecs. this allows us to continue incrementing
+        // while staying monotonic. Note, once we hit 10k milliseconds beyond system
+        // clock, we will reset breaking monotonicity (after (2^31)*10000 generations)
+        _msecs++;
+      }
+    }
+  } else {
+    // resetting; we have advanced more than
+    // 10k milliseconds beyond system clock
+    _msecs = msecs;
+  }
+  _seqHigh = seqHigh;
+  _seqLow = seqLow;
+
+  // [bytes 0-5] 48 bits of local timestamp
+  b[i++] = _msecs / 0x10000000000 & 0xff;
+  b[i++] = _msecs / 0x100000000 & 0xff;
+  b[i++] = _msecs / 0x1000000 & 0xff;
+  b[i++] = _msecs / 0x10000 & 0xff;
+  b[i++] = _msecs / 0x100 & 0xff;
+  b[i++] = _msecs & 0xff;
+
+  // [byte 6] - set 4 bits of version (7) with first 4 bits seq_hi
+  b[i++] = seqHigh >>> 4 & 0x0f | 0x70;
+
+  // [byte 7] remaining 8 bits of seq_hi
+  b[i++] = seqHigh & 0xff;
+
+  // [byte 8] - variant (2 bits), first 6 bits seq_low
+  b[i++] = seqLow >>> 13 & 0x3f | 0x80;
+
+  // [byte 9] 8 bits seq_low
+  b[i++] = seqLow >>> 5 & 0xff;
+
+  // [byte 10] remaining 5 bits seq_low, 3 bits random
+  b[i++] = seqLow << 3 & 0xff | rnds[10] & 0x07;
+
+  // [bytes 11-15] always random
+  b[i++] = rnds[11];
+  b[i++] = rnds[12];
+  b[i++] = rnds[13];
+  b[i++] = rnds[14];
+  b[i++] = rnds[15];
+  return buf || unsafeStringify(b);
+}
+
+function version(uuid) {
+  if (!validate(uuid)) {
+    throw TypeError('Invalid UUID');
+  }
+  return parseInt(uuid.slice(14, 15), 16);
+}
+
+function calculatePolygonArea(points) {
+    let area = 0;
+    for (let i = 0; i < points.length; i++) {
+        const j = (i + 1) % points.length;
+        area += points[i].x * points[j].y;
+        area -= points[j].x * points[i].y;
+    }
+    return Math.abs(area / 2);
+}
+;
+function azimuthToCardinal(azimuth) {
+    // Convert angle to cardinal direction
+    if (azimuth >= 337.5 || azimuth < 22.5)
+        return "North";
+    if (azimuth >= 22.5 && azimuth < 67.5)
+        return "Northeast";
+    if (azimuth >= 67.5 && azimuth < 112.5)
+        return "East";
+    if (azimuth >= 112.5 && azimuth < 157.5)
+        return "Southeast";
+    if (azimuth >= 157.5 && azimuth < 202.5)
+        return "South";
+    if (azimuth >= 202.5 && azimuth < 247.5)
+        return "Southwest";
+    if (azimuth >= 247.5 && azimuth < 292.5)
+        return "West";
+    return "Northwest";
+}
+function calculatePolygonOrientation(points) {
+    if (points.length < 3)
+        return 0;
+    // Calculate the average direction of the polygon
+    let totalAngle = 0;
+    for (let i = 0; i < points.length; i++) {
+        const j = (i + 1) % points.length;
+        const angle = Math.atan2(points[j].y - points[i].y, points[j].x - points[i].x);
+        totalAngle += angle;
+    }
+    const avgAngle = (totalAngle / points.length) * (180 / Math.PI);
+    const normalizedAngle = (avgAngle + 360) % 360;
+    return normalizedAngle;
+}
+;
+function calculatePolygonAngle(points) {
+    if (points.length < 3)
+        return 0;
+    // Calculate the average angle of the polygon
+    let totalAngle = 0;
+    for (let i = 0; i < points.length; i++) {
+        const j = (i + 1) % points.length;
+        const k = (i + 2) % points.length;
+        const v1 = {
+            x: points[j].x - points[i].x,
+            y: points[j].y - points[i].y,
+        };
+        const v2 = {
+            x: points[k].x - points[j].x,
+            y: points[k].y - points[j].y,
+        };
+        const dot = v1.x * v2.x + v1.y * v2.y;
+        const mag1 = Math.sqrt(v1.x * v1.x + v1.y * v1.y);
+        const mag2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);
+        const angle = Math.acos(dot / (mag1 * mag2));
+        totalAngle += angle;
+    }
+    return (totalAngle / points.length) * (180 / Math.PI);
+}
+;
+function latLngToPixel(bounds, canvas, latLng) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Canvas context not found');
+    }
+    const latToPixel = (lat) => {
+        return canvas.height * (1 - (lat - bounds.south) / (bounds.north - bounds.south));
+    };
+    const lngToPixel = (lng) => {
+        return canvas.width * (lng - bounds.west) / (bounds.east - bounds.west);
+    };
+    return {
+        x: lngToPixel(latLng.longitude),
+        y: latToPixel(latLng.latitude),
+    };
+}
+function getPixelInMeters(rgbTiff) {
+    const latDiff = rgbTiff.bounds.north - rgbTiff.bounds.south;
+    // const lngDiff = rgbTiff.bounds.east - rgbTiff.bounds.west;
+    // const pixelWidth = rgbTiff.width;
+    const pixelHeight = rgbTiff.height;
+    const pixelInMeters = latDiff * 111320 / pixelHeight;
+    // const latAvg = (rgbTiff.bounds.north + rgbTiff.bounds.south) / 2;
+    // const pixelInMetersLng = lngDiff * 111320 * Math.cos(latAvg * Math.PI / 180) / pixelWidth;
+    return pixelInMeters;
+}
+
+/**
+ * Get the intersections of a line parallel to the x-axis of the projected coordinate system with a polygon.
+ * @param projectedPoint the point to draw the line from
+ * @param projectedPolygon the polygon to get the intersections with
+ * @returns the intersections of the line with the polygon
+ */
+function getIntersections(projectedPoint, projectedPolygon) {
+    const intersections = [];
+    if (projectedPolygon.points.length === 0) {
+        return intersections;
+    }
+    // For each edge of the polygon
+    for (let i = 0; i < projectedPolygon.points.length; i++) {
+        const p1 = projectedPolygon.points[i];
+        const p2 = projectedPolygon.points[(i + 1) % projectedPolygon.points.length];
+        // Calculate intersection point
+        const t = (projectedPoint.y - p1.y) / (p2.y - p1.y);
+        const x = p1.x + t * (p2.x - p1.x);
+        if (t > 0 && t <= 1) {
+            intersections.push({ x, y: projectedPoint.y });
+        }
+        if (t === 0) {
+            intersections.push({ x: p1.x, y: projectedPoint.y });
+        }
+    }
+    // Sort intersections by y-coordinate
+    return intersections.sort((a, b) => a.x - b.x);
+}
+function projectPoint(point, azimuth) {
+    const angle = azimuth * (Math.PI / 180);
+    const x = point.x * Math.cos(angle) - point.y * Math.sin(angle);
+    const y = point.x * Math.sin(angle) + point.y * Math.cos(angle);
+    return { x, y };
+}
+function projectPolygon(polygon, azimuth) {
+    return {
+        points: polygon.points.map((point) => projectPoint(point, azimuth)),
+        type: polygon.type,
+        closed: polygon.closed,
+        _id: polygon._id,
+        details: polygon.details,
+    };
+}
+function offsetPolygon(polygon, offset) {
+    if (polygon.points.length === 0) {
+        return { polygon: polygon, offset: { x: 0, y: 0 } };
+    }
+    let offsetX = 0;
+    let offsetY = 0;
+    if (!offset) {
+        const minX = Math.min(...polygon.points.map((point) => point.x));
+        const minY = Math.min(...polygon.points.map((point) => point.y));
+        const maxX = Math.max(...polygon.points.map((point) => point.x));
+        const maxY = Math.max(...polygon.points.map((point) => point.y));
+        offsetX = minX + (maxX - minX) / 2;
+        offsetY = minY + (maxY - minY) / 2;
+    }
+    else {
+        offsetX = offset.x;
+        offsetY = offset.y;
+    }
+    const newPoints = polygon.points.map((point) => ({
+        x: point.x - offsetX,
+        y: point.y - offsetY,
+    }));
+    return { polygon: { ...polygon, points: newPoints }, offset: { x: offsetX, y: offsetY } };
+}
+function equalsPoints(point1, point2) {
+    return point1.x === point2.x && point1.y === point2.y;
+}
+/**
+ * Checks if two lines intersect.
+ * if the lines intersect in a start or end point they are not considered as intersecting
+ * @param line1 The first line.
+ * @param line2 The second line.
+ * @returns True if the lines intersect, false otherwise.
+ */
+function intersects(line1, line2) {
+    // Get the points of each line
+    const p1 = line1.start;
+    const p2 = line1.end;
+    const p3 = line2.start;
+    const p4 = line2.end;
+    if (equalsPoints(p1, p3) || equalsPoints(p1, p4) || equalsPoints(p2, p3) || equalsPoints(p2, p4)) {
+        return false;
+    }
+    // Calculate the cross products
+    const d1 = (p4.x - p3.x) * (p1.y - p3.y) - (p4.y - p3.y) * (p1.x - p3.x);
+    const d2 = (p4.x - p3.x) * (p2.y - p3.y) - (p4.y - p3.y) * (p2.x - p3.x);
+    const d3 = (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x);
+    const d4 = (p2.x - p1.x) * (p4.y - p1.y) - (p2.y - p1.y) * (p4.x - p1.x);
+    // Check if the lines intersect
+    return (d1 * d2 < 0) && (d3 * d4 < 0);
+}
+function undoOffsetPolygon(polygon, offset) {
+    return {
+        ...polygon,
+        points: polygon.points.map((point) => ({
+            x: point.x + offset.x,
+            y: point.y + offset.y,
+        })),
+    };
+}
+function segmentPolygon(polygon) {
+    const segments = [];
+    const segmentsMap = {};
+    for (const point of polygon.points) {
+        const intersections = getIntersections(point, polygon);
+        for (const [index, intersection] of intersections.slice(0, -1).entries()) {
+            const nextIntersection = intersections[index + 1];
+            const halfPoint = {
+                x: (intersection.x + nextIntersection.x) / 2,
+                y: (intersection.y + nextIntersection.y) / 2,
+            };
+            const isInner = isPointInPolygon(halfPoint, polygon);
+            const isOnBorder = isPointOnBorder(halfPoint, polygon);
+            const key = `${intersection.x}-${intersection.y}-${nextIntersection.x}-${nextIntersection.y}`;
+            if (segmentsMap[key]) {
+                continue;
+            }
+            segments.push({ start: intersection, end: nextIntersection, type: isOnBorder ? "border" : (isInner ? "inner" : "outer") });
+            segmentsMap[key] = true;
+        }
+    }
+    return segments;
+}
+/**
+ * for each segment this method will find all the following segments that are connected to it
+ *
+ * first the method subdivides the segments into y levels (all segments that have the same y coordinate are in the same level)
+ * then it will check for each segment in each level if there is a following segment that is connected to it by checking it the
+ * start point of the top segment to the end point of the bottom segment does not intersect with any of the polygon borders and the center point of the connection is in the polygon
+ *
+ * @param segments
+ * @param roof
+ * @returns
+ */
+function matchSegments(segments, roof) {
+    const matches = [];
+    const map = {};
+    for (const segment of segments) {
+        map[`${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`] = segment;
+    }
+    // Group segments by y-coordinate (level)
+    const levels = {};
+    segments.forEach(segment => {
+        const y = segment.start.y;
+        if (!levels[y]) {
+            levels[y] = [];
+        }
+        levels[y].push(segment);
+    });
+    // Sort levels by y-coordinate
+    const sortedLevels = Object.keys(levels).map(Number).sort((a, b) => a - b);
+    // For each level except the last one
+    for (let i = 0; i < sortedLevels.length - 1; i++) {
+        const currentLevel = levels[sortedLevels[i]];
+        const nextLevel = levels[sortedLevels[i + 1]];
+        // For each segment in current level
+        for (const currentSegment of currentLevel) {
+            if (currentSegment.type === "outer") {
+                continue;
+            }
+            const matchedSegments = [];
+            // For each segment in next level
+            for (const nextSegment of nextLevel) {
+                // Check if segments can be connected
+                const connectionStart = currentSegment.start;
+                const connectionEnd = nextSegment.end;
+                let intersected = false;
+                for (let i = 0; i < roof.points.length; i++) {
+                    const line = {
+                        start: roof.points[i],
+                        end: roof.points[(i + 1) % roof.points.length]
+                    };
+                    if (intersects(line, { start: connectionStart, end: connectionEnd })) {
+                        intersected = true;
+                        break;
+                    }
+                }
+                if (intersected) {
+                    continue;
+                }
+                // Check if center point of connection is inside polygon
+                const centerPoint = {
+                    x: (connectionStart.x + connectionEnd.x) / 2,
+                    y: (connectionStart.y + connectionEnd.y) / 2
+                };
+                if (isPointInPolygon(centerPoint, roof)) {
+                    matchedSegments.push(nextSegment);
+                }
+            }
+            if (matchedSegments.length > 0) {
+                matches.push({
+                    segment: `${currentSegment.start.x}-${currentSegment.start.y}-${currentSegment.end.x}-${currentSegment.end.y}`,
+                    matchedSegments: matchedSegments.map(segment => `${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`)
+                });
+            }
+        }
+    }
+    return { matches, map };
+}
+/**
+ * Fits panels to a roof polygon.
+ *
+ * Starts with positioning a solar panel row (a rectangle with the height of the solar panel and the width in the direction of the perpendicular of
+ * the azimuth of the roof) at each corner of the roof.
+ * For each corner there are four possible cases (the width is the width of the whole roof in the direction of the perpendicular of the azimuth):
+ * 1. The row has height of the solar panel height and sits below the point in the direction of the azimuth of the roof.
+ * 2. The row has height of the solar panel height and sits above the point in the direction of the azimuth of the roof.
+ * 3. The row has the height of the solar panel width (solar panels are rotated) and sits below the point in the direction of the azimuth of the roof.
+ * 4. The row has the height of the solar panel width (solar panels are rotated) and sits above the point in the direction of the azimuth of the roof.
+ *
+ * For each of these cases the function then places the solar panel rows directly above and below the current row.
+ *
+ * after the function has positioned all the rows it places the solar panels in the spaces between the rows.
+ * For each of the four scenarios of each corner the number of panels are counted and the optimal placement is chosen.
+ *
+ * @param roof - The roof polygon.
+ * @param panelType - The type of panel to fit.
+ * @param borderOffset - The offset of the panel from the border of the roof. If negative, the panel can be partially overhanging the roof.
+ * @param azimuth - The azimuth of the roof.
+ * @returns The positioned panels.
+ */
+function fitPanelsToRoof(roof, panelType, borderOffset = 0, azimuth = 0) {
+    if (!roof || !panelType || !roof.points || !roof.details) {
+        return [];
+    }
+    console.log(borderOffset, azimuth);
+    return [];
+    // const minX = Math.min(...roof.points.map(p => p.x));
+    // const maxX = Math.max(...roof.points.map(p => p.x));
+    // const minY = Math.min(...roof.points.map(p => p.y));
+    // const maxY = Math.max(...roof.points.map(p => p.y));
+    // const projectedRoof = projectPolygon(roof, azimuth);
+    // const projectedOffsetRoof = offsetPolygon(projectedRoof);
+    // const segments = segmentPolygon(projectedOffsetRoof.polygon);
+    // const {matches, map} = matchSegments(segments, projectedOffsetRoof.polygon);
+    // const matchesMap: Record<string, LineSegment[]> = {};
+    // for (const match of matches) {
+    //     matchesMap[match.segment] = match.matchedSegments.map(segment => map[segment]);
+    // }
+    // let panels: PositionedSolarPanel[] = [];
+    // let undidPanels: PositionedSolarPanel[] = [];
+    // for (const segment of segments) {
+    //     if (segment.type === "outer") {
+    //         continue;
+    //     }
+    //     const matches = matchesMap[`${segment.start.x}-${segment.start.y}-${segment.end.x}-${segment.end.y}`];
+    //     if (!matches || matches.length === 0) {
+    //         continue;
+    //     }
+    //     // Combine segments until we reach panel height
+    //     let combinedSegments: Array<Array<LineSegment>> = [[segment]];
+    //     let currentHeight = 0;
+    //     let currentMatches = matches;
+    //     // while (currentHeight < panelType.heightMeters && currentMatches.length > 0) {
+    //     //     const nextSegment = currentMatches[0];
+    //     //     combinedSegments.push(nextSegment);
+    //     //     currentHeight += Math.abs(nextSegment.start.y - segment.start.y);
+    //     //     currentMatches = matchesMap[`${nextSegment.start.x}-${nextSegment.start.y}-${nextSegment.end.x}-${nextSegment.end.y}`] || [];
+    //     // }
+    //     if (currentHeight < panelType.heightMeters) {
+    //         continue;
+    //     }
+    //     // Calculate minimum width
+    //     // let minEnd = Math.max(...combinedSegments.map(s => s.end.x));
+    //     // let maxStart = Math.min(...combinedSegments.map(s => s.start.x));
+    //     // let width = minEnd - maxStart;
+    //     // if (width >= panelType.widthMeters) {
+    //     //     // Find highest segment for starting position
+    //     //     const highestSegment = combinedSegments.reduce((prev, curr) => 
+    //     //         curr.start.y < prev.start.y ? curr : prev
+    //     //     );
+    //     //     // Place panels in a grid
+    //     //     const panelSpacing = panelType.widthMeters + borderOffset;
+    //     //     const rowSpacing = panelType.heightMeters + borderOffset;
+    //     //     let currentX = maxStart;
+    //     //     let currentY = highestSegment.start.y;
+    //     //     while (currentX + panelType.widthMeters <= minEnd) {
+    //     //         while (currentY + panelType.heightMeters <= highestSegment.start.y + currentHeight) {
+    //     //             const panelCenter = {
+    //     //                 x: currentX + panelType.widthMeters / 2,
+    //     //                 y: currentY + panelType.heightMeters / 2
+    //     //             };
+    //     //             if (isPointInPolygon(panelCenter, projectedOffsetRoof.polygon)) {
+    //     //                 panels.push({
+    //     //                     panel: panelType,
+    //     //                     pixelPosition: panelCenter
+    //     //                 });
+    //     //             }
+    //     //             currentY += rowSpacing;
+    //     //         }
+    //     //         currentX += panelSpacing;
+    //     //         currentY = highestSegment.start.y;
+    //     //     }
+    //     // }
+    // }
+    // for (const panel of panels) {
+    //     const undoOffset = {
+    //         x: panel.pixelPosition.x + projectedOffsetRoof.offset.x,
+    //         y: panel.pixelPosition.y + projectedOffsetRoof.offset.y,
+    //     };
+    //     const projectedPanel = projectPoint(undoOffset, azimuth);
+    //     undidPanels.push({
+    //         panel: panel.panel,
+    //         pixelPosition: projectedPanel,
+    //     });
+    // }
+    // return panels;
+    // project the polygon points such that the azimuth is 0 degrees
+    // this means that the solar panel are aligned perfectly with the coordinate system
+    //
+    // 1. below point and height is height
+    // for each point do the following
+    // draw a line along the y-axis of the projected coordinate system (this is the perpendicular of the azimuth)
+    // find all the intersection of that line with the roof polygon
+    // get all points that are within the height of the solar panel in the direction of the azimuth
+    // 
+    // for each point generate a line along the y-axis of the projected coordinate system (this is the perpendicular of the azimuth)
+    // find all points on that line that intersect with the roof polygon bounds
+    // if the number of points is even 
+    // 
+    // const positionedPanels: PositionedSolarPanel[] = [];
+    // let bestPanelCount = 0;
+    // let bestPanelArrangement: PositionedSolarPanel[] = [];
+    // // Get roof details
+    // const { azimuth } = roof.details;
+    // const perpendicularAzimuth = (azimuth + 90) % 360;
+    // for (const point of roof.points) {
+    //     const row = createPanelRow(point, false, false);
+    //     positionedPanels.push(...row);
+    // }
+    // Helper function to create a panel row
+    // const createPanelRow = (startPoint: Point, isRotated: boolean, isAbove: boolean): PositionedSolarPanel[] => {
+    //     const rowPanels: PositionedSolarPanel[] = [];
+    //     const panelWidth = isRotated ? panelType.heightMeters : panelType.widthMeters;
+    //     const panelHeight = isRotated ? panelType.widthMeters : panelType.heightMeters;
+    //     // Calculate row direction based on azimuth
+    //     const rowAngle = perpendicularAzimuth * (Math.PI / 180);
+    //     const rowDirX = Math.cos(rowAngle);
+    //     const rowDirY = Math.sin(rowAngle);
+    //     // Calculate panel spacing direction based on azimuth
+    //     const panelAngle = azimuth * (Math.PI / 180);
+    //     const panelDirX = Math.cos(panelAngle);
+    //     const panelDirY = Math.sin(panelAngle);
+    //     // Calculate row width (distance from start to end of roof in perpendicular direction)
+    //     let maxRowWidth = 0;
+    //     for (const point of roof.points) {
+    //         const dx = point.x - startPoint.x;
+    //         const dy = point.y - startPoint.y;
+    //         const width = Math.abs(dx * rowDirX + dy * rowDirY);
+    //         maxRowWidth = Math.max(maxRowWidth, width);
+    //     }
+    //     // Place panels along the row
+    //     const numPanels = Math.floor(maxRowWidth / panelWidth);
+    //     for (let i = 0; i < numPanels; i++) {
+    //         const panelX = startPoint.x + i * panelWidth * rowDirX;
+    //         const panelY = startPoint.y + i * panelWidth * rowDirY;
+    //         // Check if panel center is within roof polygon
+    //         const panelCenter = {
+    //             x: panelX + (panelWidth / 2) * rowDirX + (panelHeight / 2) * panelDirX,
+    //             y: panelY + (panelWidth / 2) * rowDirY + (panelHeight / 2) * panelDirY
+    //         };
+    //         if (isPointInPolygon(panelCenter, roof)) {
+    //             rowPanels.push({
+    //                 panel: panelType,
+    //                 pixelPosition: {
+    //                     x: panelCenter.x,
+    //                     y: panelCenter.y
+    //                 }
+    //             });
+    //         }
+    //     }
+    //     return rowPanels;
+    // };
+    // // Try each corner and arrangement
+    // for (const corner of roof.points) {
+    //     // Try all four arrangements for this corner
+    //     const arrangements = [
+    //         { isRotated: false, isAbove: false },
+    //         { isRotated: false, isAbove: true },
+    //         { isRotated: true, isAbove: false },
+    //         { isRotated: true, isAbove: true }
+    //     ];
+    //     for (const arrangement of arrangements) {
+    //         const currentPanels: PositionedSolarPanel[] = [];
+    //         const { isRotated, isAbove } = arrangement;
+    //         // Create initial row
+    //         const initialRow = createPanelRow(corner, isRotated, isAbove);
+    //         currentPanels.push(...initialRow);
+    //         // Add rows above and below
+    //         const panelHeight = isRotated ? panelType.widthMeters : panelType.heightMeters;
+    //         const rowSpacing = panelHeight + borderOffset;
+    //         // Calculate direction for adding rows
+    //         const rowAngle = azimuth * (Math.PI / 180);
+    //         const rowDirX = Math.cos(rowAngle);
+    //         const rowDirY = Math.sin(rowAngle);
+    //         // Add rows in both directions
+    //         let rowOffset = rowSpacing;
+    //         while (true) {
+    //             const newRowPoint = {
+    //                 x: corner.x + rowOffset * rowDirX,
+    //                 y: corner.y + rowOffset * rowDirY
+    //             };
+    //             const newRow = createPanelRow(newRowPoint, isRotated, isAbove);
+    //             if (newRow.length === 0) break;
+    //             currentPanels.push(...newRow);
+    //             rowOffset += rowSpacing;
+    //         }
+    //         rowOffset = -rowSpacing;
+    //         while (true) {
+    //             const newRowPoint = {
+    //                 x: corner.x + rowOffset * rowDirX,
+    //                 y: corner.y + rowOffset * rowDirY
+    //             };
+    //             const newRow = createPanelRow(newRowPoint, isRotated, isAbove);
+    //             if (newRow.length === 0) break;
+    //             currentPanels.push(...newRow);
+    //             rowOffset -= rowSpacing;
+    //         }
+    //         // Update best arrangement if this one has more panels
+    //         if (currentPanels.length > bestPanelCount) {
+    //             bestPanelCount = currentPanels.length;
+    //             bestPanelArrangement = currentPanels;
+    //         }
+    //     }
+    // }
+    // return bestPanelArrangement;
+}
+/**
+ * Uses the bounding box of the roof and the roof segment bounding boxes to find the best fitting roof segment.
+ * @param roof the roof shape
+ * @param roofSegmentStats the stats of the roof segments
+ * @returns the best fitting roof segment
+ */
+function getBestFittingRoofSegment(roof, roofSegmentStats, bounds, canvas) {
+    const polygonBounds = {
+        minX: Math.min(...roof.points.map((p) => p.x)),
+        maxX: Math.max(...roof.points.map((p) => p.x)),
+        minY: Math.min(...roof.points.map((p) => p.y)),
+        maxY: Math.max(...roof.points.map((p) => p.y)),
+    };
+    let bestSegment = null;
+    let bestIoU = 0;
+    for (const segment of roofSegmentStats) {
+        const sw = latLngToPixel(bounds, canvas, {
+            latitude: segment.boundingBox.sw.latitude,
+            longitude: segment.boundingBox.sw.longitude,
+        });
+        const ne = latLngToPixel(bounds, canvas, {
+            latitude: segment.boundingBox.ne.latitude,
+            longitude: segment.boundingBox.ne.longitude,
+        });
+        const segmentBounds = {
+            minX: sw.x,
+            maxX: ne.x,
+            minY: ne.y,
+            maxY: sw.y,
+        };
+        // Calculate intersection
+        const interLeft = Math.max(polygonBounds.minX, segmentBounds.minX);
+        const interRight = Math.min(polygonBounds.maxX, segmentBounds.maxX);
+        const interTop = Math.max(polygonBounds.minY, segmentBounds.minY);
+        const interBottom = Math.min(polygonBounds.maxY, segmentBounds.maxY);
+        const interWidth = interRight - interLeft;
+        const interHeight = interBottom - interTop;
+        let intersectionArea = 0;
+        if (interWidth > 0 && interHeight > 0) {
+            intersectionArea = interWidth * interHeight;
+        }
+        const polygonArea = (polygonBounds.maxX - polygonBounds.minX) * (polygonBounds.maxY - polygonBounds.minY);
+        const segmentArea = (segmentBounds.maxX - segmentBounds.minX) * (segmentBounds.maxY - segmentBounds.minY);
+        const unionArea = polygonArea + segmentArea - intersectionArea;
+        const iou = unionArea > 0 ? intersectionArea / unionArea : 0;
+        if (iou > bestIoU) {
+            bestIoU = iou;
+            bestSegment = segment;
+        }
+    }
+    return bestSegment;
+}
+
+function generateGrid(minMax, solarPanel, horizontal, anker, rowSpacing, columnSpacing) {
+    const grid = [];
+    const width = horizontal ? solarPanel.heightMeters : solarPanel.widthMeters;
+    const widthCount = Math.ceil((minMax.maxX - minMax.minX) / width);
+    const height = horizontal ? solarPanel.widthMeters : solarPanel.heightMeters;
+    const heightCount = Math.ceil((minMax.maxY - minMax.minY) / height);
+    const widthOffset = width / 2;
+    const heightOffset = height / 2;
+    // calculate the starting point based on the anker
+    const startX = anker.x - (Math.ceil((anker.x - minMax.minX) / width) * width);
+    const startY = anker.y - (Math.ceil((anker.y - minMax.minY) / height) * height);
+    for (let i = 0; i < heightCount; i++) {
+        const row = [];
+        for (let j = 0; j < widthCount; j++) {
+            const x = startX + j * width + j * columnSpacing + widthOffset;
+            const y = startY + i * height + i * rowSpacing + heightOffset;
+            const positionedSolarPanel = {
+                panel: solarPanel,
+                pixelPosition: {
+                    x: x,
+                    y: y
+                },
+                horizontal: horizontal
+            };
+            row.push(positionedSolarPanel);
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+function getSolarPanelLines(positionedSolarPanel, horizontal) {
+    const width = horizontal ? positionedSolarPanel.panel.heightMeters : positionedSolarPanel.panel.widthMeters;
+    const height = horizontal ? positionedSolarPanel.panel.widthMeters : positionedSolarPanel.panel.heightMeters;
+    const p1 = {
+        x: positionedSolarPanel.pixelPosition.x - width / 2,
+        y: positionedSolarPanel.pixelPosition.y - height / 2
+    };
+    const p2 = {
+        x: positionedSolarPanel.pixelPosition.x - width / 2,
+        y: positionedSolarPanel.pixelPosition.y + height / 2
+    };
+    const p3 = {
+        x: positionedSolarPanel.pixelPosition.x + width / 2,
+        y: positionedSolarPanel.pixelPosition.y + height / 2
+    };
+    const p4 = {
+        x: positionedSolarPanel.pixelPosition.x + width / 2,
+        y: positionedSolarPanel.pixelPosition.y - height / 2
+    };
+    const lines = [
+        {
+            start: p1,
+            end: p2
+        },
+        {
+            start: p2,
+            end: p3
+        },
+        {
+            start: p3,
+            end: p4
+        },
+        {
+            start: p4,
+            end: p1
+        }
+    ];
+    return lines;
+}
+function solarPanelInObstacle(positionedSolarPanel, obstacle, horizontal) {
+    const lines = getSolarPanelLines(positionedSolarPanel, horizontal);
+    if (isPointInPolygon(positionedSolarPanel.pixelPosition, obstacle)) {
+        return true;
+    }
+    for (let i = 0; i < obstacle.points.length; i++) {
+        const point = obstacle.points[i];
+        const nextPoint = obstacle.points[(i + 1) % obstacle.points.length];
+        const border = {
+            start: point,
+            end: nextPoint
+        };
+        for (const line of lines) {
+            if (intersects(line, border)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function solarPanelInPolygon(positionedSolarPanel, polygon, horizontal) {
+    const lines = getSolarPanelLines(positionedSolarPanel, horizontal);
+    for (let i = 0; i < polygon.points.length; i++) {
+        const point = polygon.points[i];
+        const nextPoint = polygon.points[(i + 1) % polygon.points.length];
+        const border = {
+            start: point,
+            end: nextPoint
+        };
+        for (const line of lines) {
+            if (intersects(line, border)) {
+                return false;
+            }
+        }
+    }
+    return isPointInPolygon(positionedSolarPanel.pixelPosition, polygon);
+}
+function isPanelObstructed(positionedSolarPanel, obstacles, horizontal) {
+    for (const obstacle of obstacles) {
+        if (solarPanelInObstacle(positionedSolarPanel, obstacle.polygon, horizontal)) {
+            return true;
+        }
+    }
+    return false;
+}
+function getSolarPanelsInPolygon(grid, polygon, horizontal, obstacles) {
+    const solarPanels = [];
+    for (const row of grid) {
+        let newRow = [];
+        for (const positionedSolarPanel of row) {
+            const isObstructed = isPanelObstructed(positionedSolarPanel, obstacles, horizontal);
+            if (solarPanelInPolygon(positionedSolarPanel, polygon, horizontal) && !isObstructed) {
+                newRow.push(positionedSolarPanel);
+            }
+        }
+        solarPanels.push(newRow);
+    }
+    return solarPanels;
+}
+function getOptimalSolarPosition(roof, obstacles, solarPanel, angle) {
+    const minX = Math.min(...roof.points.map(p => p.x));
+    const maxX = Math.max(...roof.points.map(p => p.x));
+    const minY = Math.min(...roof.points.map(p => p.y));
+    const maxY = Math.max(...roof.points.map(p => p.y));
+    const minMax = {
+        minX: minX,
+        maxX: maxX,
+        minY: minY,
+        maxY: maxY
+    };
+    console.log("solar", solarPanel);
+    const horizontalSolarPanel = {
+        ...solarPanel,
+        widthMeters: solarPanel.widthMeters * Math.cos(angle * Math.PI / 180),
+        heightMeters: solarPanel.heightMeters
+    };
+    const verticalSolarPanel = {
+        ...solarPanel,
+        widthMeters: solarPanel.widthMeters,
+        heightMeters: solarPanel.heightMeters * Math.cos(angle * Math.PI / 180)
+    };
+    let solarPanels = [];
+    let numberOfPanels = 0;
+    for (const point of roof.points) {
+        for (const horizontal of [false]) { // TODO removed true
+            const grid = generateGrid(minMax, horizontal ? horizontalSolarPanel : verticalSolarPanel, horizontal, point, ROW_SPACING, COLUMN_SPACING);
+            const solarPanelsInPolygon = getSolarPanelsInPolygon(grid, roof, horizontal, obstacles);
+            const numberOfPanelsInPolygon = solarPanelsInPolygon.reduce((acc, row) => acc + row.length, 0);
+            if (numberOfPanelsInPolygon > numberOfPanels) {
+                numberOfPanels = numberOfPanelsInPolygon;
+                solarPanels = solarPanelsInPolygon;
+            }
+        }
+        break;
+    }
+    return solarPanels;
+}
+function projectObstacles(obstacles, azimuth, offset, inset) {
+    const result = [];
+    for (const obstacle of obstacles) {
+        const offsetObstacle = offsetPolygon(obstacle, offset);
+        const projectedObstacle = projectPolygon(offsetObstacle.polygon, -azimuth);
+        const insetObstacle = insetPolygon(projectedObstacle, -inset);
+        const minX = Math.min(...insetObstacle.points.map(p => p.x));
+        const maxX = Math.max(...insetObstacle.points.map(p => p.x));
+        const minY = Math.min(...insetObstacle.points.map(p => p.y));
+        const maxY = Math.max(...insetObstacle.points.map(p => p.y));
+        const boundingBox = {
+            minX: minX,
+            maxX: maxX,
+            minY: minY,
+            maxY: maxY
+        };
+        result.push({
+            polygon: projectedObstacle,
+            boundingBox: boundingBox
+        });
+    }
+    return result;
+}
+function isClockwise(points) {
+    let sum = 0;
+    for (let i = 0; i < points.length; i++) {
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+        sum += (next.x - curr.x) * (next.y + curr.y);
+    }
+    return sum > 0;
+}
+function insetPolygon(polygon, inset) {
+    const points = polygon.points;
+    const isClockwisePolygon = isClockwise(points);
+    inset = inset * Math.sqrt(2) * (isClockwisePolygon ? -1 : 1);
+    const insetPoints = [];
+    for (let i = 0; i < points.length; i++) {
+        const prev = points[(i - 1 + points.length) % points.length];
+        const curr = points[i];
+        const next = points[(i + 1) % points.length];
+        // Calculate vectors for the two edges meeting at current point
+        const v1 = {
+            x: curr.x - prev.x,
+            y: curr.y - prev.y
+        };
+        const v2 = {
+            x: next.x - curr.x,
+            y: next.y - curr.y
+        };
+        // Calculate perpendicular vectors (90 degrees clockwise)
+        const perp1 = {
+            x: -v1.y,
+            y: v1.x
+        };
+        const perp2 = {
+            x: -v2.y,
+            y: v2.x
+        };
+        // Normalize the perpendicular vectors
+        const length1 = Math.sqrt(perp1.x * perp1.x + perp1.y * perp1.y);
+        const length2 = Math.sqrt(perp2.x * perp2.x + perp2.y * perp2.y);
+        perp1.x /= length1;
+        perp1.y /= length1;
+        perp2.x /= length2;
+        perp2.y /= length2;
+        // Calculate the bisector vector
+        const bisector = {
+            x: perp1.x + perp2.x,
+            y: perp1.y + perp2.y
+        };
+        // Normalize the bisector
+        const bisectorLength = Math.sqrt(bisector.x * bisector.x + bisector.y * bisector.y);
+        bisector.x /= bisectorLength;
+        bisector.y /= bisectorLength;
+        // Calculate the inset point
+        const insetPoint = {
+            x: curr.x + bisector.x * inset,
+            y: curr.y + bisector.y * inset
+        };
+        insetPoints.push(insetPoint);
+    }
+    return {
+        points: insetPoints,
+        type: polygon.type,
+        closed: polygon.closed,
+        _id: polygon._id,
+        details: polygon.details
+    };
+}
+function getOptimalSolarPositionFully(roof, obstacles, solarPanel, azimuth, inset, angle) {
+    const insetRoof = insetPolygon(roof, inset);
+    const offset = offsetPolygon(insetRoof);
+    const projectedOffset = projectPolygon(offset.polygon, -azimuth);
+    const projectedObstacles = projectObstacles(obstacles, azimuth, offset.offset, inset);
+    const horizontalSolarPanels = getOptimalSolarPosition(projectedOffset, projectedObstacles, solarPanel, angle);
+    const unprojectedPanels = [];
+    for (const panel of horizontalSolarPanels.flat()) {
+        const unprojectedPanel = projectPoint(panel.pixelPosition, azimuth);
+        const offsetPosition = {
+            x: unprojectedPanel.x + offset.offset.x,
+            y: unprojectedPanel.y + offset.offset.y
+        };
+        unprojectedPanels.push({
+            panel: panel.panel,
+            pixelPosition: offsetPosition,
+            horizontal: panel.horizontal
+        });
+    }
+    return unprojectedPanels;
+}
+
+const outputCss = "/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --radius-4xl: 2rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1 {\n    top: calc(var(--spacing) * 1);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-3 {\n    left: calc(var(--spacing) * 3);\n  }\n  .z-1 {\n    z-index: 1;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .m-auto {\n    margin: auto;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .table {\n    display: table;\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-52 {\n    width: calc(var(--spacing) * 52);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .-translate-y-1 {\n    --tw-translate-y: calc(var(--spacing) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .resize {\n    resize: both;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-4xl {\n    border-radius: var(--radius-4xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t-2 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 2px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-\\[\\#271200\\] {\n    border-color: #271200;\n  }\n  .border-gray-300 {\n    border-color: var(--color-gray-300);\n  }\n  .bg-\\[\\#271200\\] {\n    background-color: #271200;\n  }\n  .bg-\\[\\#f3ebda\\] {\n    background-color: #f3ebda;\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .pt-7 {\n    padding-top: calc(var(--spacing) * 7);\n  }\n  .pr-4 {\n    padding-right: calc(var(--spacing) * 4);\n  }\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n  .pl-10 {\n    padding-left: calc(var(--spacing) * 10);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-600 {\n    color: var(--color-gray-600);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .hover\\:bg-\\[\\#964500\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: #964500;\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-blue-500 {\n    &:focus {\n      --tw-ring-color: var(--color-blue-500);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const FACTOR = 1;
+const MapDraw = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    apiKey = "";
+    latitude = null;
+    longitude = null;
+    config = DEFAULT_SOLAR_EXPERT_CONFIG;
+    solarPanel = DEFAULT_SOLAR_PANEL_TYPE;
+    zoom = 1;
+    loadingState = "empty";
+    rgbTiff = null;
+    draggedPointIndex = null;
+    hoveredPointIndex = null;
+    hoveredPolygon = null;
+    shiftKeyPressed = false;
+    altKeyPressed = false;
+    mousePoint = null;
+    currentTool = roofTool;
+    roofPolygons = {};
+    roofPolygonsSolarPanels = {};
+    obstructionPolygons = {};
+    selectedPolygon = null;
+    buildingInsights = null;
+    pixelInMeters = 0.2;
+    showAzimuth = true; // TODO: make this false
+    get el() { return getElement(this); }
+    canvasElement;
+    polygonCanvas;
+    polygonCtx;
+    getCurrentPolygon() {
+        if (!this.selectedPolygon) {
+            return null;
+        }
+        const { _id, type } = this.selectedPolygon;
+        return type === "roof"
+            ? this.roofPolygons[_id]
+            : this.obstructionPolygons[_id];
+    }
+    componentDidLoad() {
+        if (this.latitude && this.longitude) {
+            this.loadingState = "loading";
+        }
+        requestAnimationFrame(() => {
+            const rect = this.canvasElement.getBoundingClientRect();
+            if (this.canvasElement) {
+                this.canvasElement.width = rect.width;
+                this.canvasElement.height = rect.height;
+                this.drawMap();
+            }
+        });
+    }
+    sizeCanvas(width, height) {
+        if (this.polygonCanvas) {
+            this.polygonCanvas.width = width;
+            this.polygonCanvas.height = height;
+            this.polygonCtx = this.polygonCanvas.getContext("2d");
+        }
+    }
+    async getBuildingInsights() {
+        if (!this.latitude || !this.longitude) {
+            return;
+        }
+        if (this.buildingInsights) {
+            const sameLocation = this.buildingInsights.center.latitude === this.latitude &&
+                this.buildingInsights.center.longitude === this.longitude;
+            if (sameLocation) {
+                return;
+            }
+            this.obstructionPolygons = {};
+            this.roofPolygons = {};
+            this.selectedPolygon = null;
+            this.hoveredPolygon = null;
+            this.canvasElement.getContext("2d")?.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
+            this.loadingState = "loading";
+        }
+        this.buildingInsights = await fetchSolarData(this.latitude, this.longitude, this.apiKey);
+        if (!this.buildingInsights) {
+            alert("No building insights found. Please enter them manually.");
+        }
+    }
+    async getBuildingImages() {
+        if (!this.latitude || !this.longitude) {
+            return;
+        }
+        if (this.buildingInsights) {
+            const sameLocation = this.buildingInsights.center.latitude === this.latitude &&
+                this.buildingInsights.center.longitude === this.longitude;
+            if (sameLocation) {
+                return;
+            }
+        }
+        this.rgbTiff = await getBuildingImages(this.latitude, this.longitude, this.apiKey);
+        this.pixelInMeters = getPixelInMeters(this.rgbTiff);
+        // this.drawMap();
+    }
+    async drawMap() {
+        if (!this.canvasElement || !this.rgbTiff || !this.buildingInsights)
+            return;
+        this.sizeCanvas(this.rgbTiff.width, this.rgbTiff.height);
+        renderCombinedWithZoom({
+            rgb: this.rgbTiff,
+            zoom: this.zoom,
+            canvas: this.canvasElement,
+        });
+        this.loadingState = "loaded";
+        // this.polygonCanvas.width = this.canvasElement.width;
+        // this.polygonCanvas.height = this.canvasElement.height;
+    }
+    handleMouseMove(event) {
+        if (!this.polygonCanvas || !this.polygonCtx)
+            return;
+        const rect = this.polygonCanvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        this.mousePoint = { x, y };
+        const currentPolygon = this.getCurrentPolygon();
+        // Check for point hover
+        const newHoveredPointIndex = currentPolygon?.points.findIndex((point) => {
+            const distance = Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2));
+            return distance < 10;
+        });
+        // Check for polygon hover
+        let newHoveredPolygon = null;
+        for (const polygon of Object.values(this.obstructionPolygons)) {
+            if (isPointInPolygon({ x, y }, polygon)) {
+                newHoveredPolygon = { _id: polygon._id, type: "obstruction" };
+                break;
+            }
+        }
+        // obstruction polygons get priority
+        if (!newHoveredPolygon) {
+            for (const polygon of Object.values(this.roofPolygons)) {
+                if (isPointInPolygon({ x, y }, polygon)) {
+                    newHoveredPolygon = { _id: polygon._id, type: "roof" };
+                    break;
+                }
+            }
+        }
+        // Only redraw if hover state changed
+        if (newHoveredPointIndex !== this.hoveredPointIndex ||
+            JSON.stringify(newHoveredPolygon) !==
+                JSON.stringify(this.hoveredPolygon)) {
+            this.hoveredPointIndex = newHoveredPointIndex;
+            this.hoveredPolygon = newHoveredPolygon;
+            this.drawPolygons();
+        }
+        // Handle dragging
+        if (this.draggedPointIndex !== null && currentPolygon &&
+            this.currentTool.name === "move") {
+            currentPolygon.points[this.draggedPointIndex] = { x, y };
+            this.drawPolygons();
+        }
+        if (this.shiftKeyPressed) {
+            this.drawPolygons();
+        }
+    }
+    drawPolygons() {
+        if (!this.polygonCanvas || !this.polygonCtx)
+            return;
+        // Clear the canvas and redraw the map
+        this.polygonCtx.clearRect(0, 0, this.polygonCanvas.width, this.polygonCanvas.height);
+        // draw roof polygons
+        for (const polygon of Object.values(this.roofPolygons)) {
+            const fillColor = getFillColor(this.selectedPolygon, this.hoveredPolygon, polygon._id, polygon, this.config);
+            drawPolygon({
+                polygonCtx: this.polygonCtx,
+                polygonCanvas: this.polygonCanvas,
+                polygon,
+                strokeColor: polygon.closed
+                    ? this.config.closedRoofColor
+                    : this.config.openRoofColor,
+                fillColor,
+                pixelInMeters: this.pixelInMeters,
+                shiftKeyPressed: this.shiftKeyPressed,
+                mousePoint: this.mousePoint,
+            });
+            const solarPanels = this.roofPolygonsSolarPanels[polygon._id];
+            const convertedSolarPanel = {
+                ...this.solarPanel,
+                widthMeters: this.solarPanel.widthMeters / this.pixelInMeters,
+                heightMeters: this.solarPanel.heightMeters / this.pixelInMeters,
+            };
+            if (solarPanels) {
+                for (const panel of solarPanels) {
+                    renderSolarPanel(panel, this.polygonCtx, convertedSolarPanel.widthMeters, convertedSolarPanel.heightMeters, polygon.details?.azimuth, polygon.details?.pitch);
+                }
+            }
+        }
+        // draw obstruction polygons
+        for (const polygon of Object.values(this.obstructionPolygons)) {
+            const fillColor = getFillColor(this.selectedPolygon, this.hoveredPolygon, polygon._id, polygon, this.config);
+            drawPolygon({
+                polygonCtx: this.polygonCtx,
+                polygonCanvas: this.polygonCanvas,
+                polygon,
+                pixelInMeters: this.pixelInMeters,
+                shiftKeyPressed: this.shiftKeyPressed,
+                mousePoint: this.mousePoint,
+                strokeColor: polygon.closed
+                    ? this.config.closedObstructionColor
+                    : this.config.openObstructionColor,
+                fillColor,
+            });
+        }
+        // if (this.showAzimuth && this.selectedPolygon) {
+        //     const currentPolygon = this.getCurrentPolygon();
+        //     renderAzimuth(currentPolygon.details?.azimuth, this.polygonCtx);
+        // }
+    }
+    deletePolygon(_id) {
+        if (this.selectedPolygon?._id === _id) {
+            this.selectedPolygon = null;
+        }
+        if (this.roofPolygons[_id]) {
+            delete this.roofPolygons[_id];
+            delete this.roofPolygonsSolarPanels[_id];
+        }
+        if (this.obstructionPolygons[_id]) {
+            delete this.obstructionPolygons[_id];
+        }
+    }
+    handleKeyDown(event) {
+        if (event.target instanceof HTMLInputElement) {
+            return;
+        }
+        // Handle shift key for perpendicular points
+        if (event.shiftKey && !this.shiftKeyPressed) {
+            this.shiftKeyPressed = true;
+            this.drawPolygons();
+            return;
+        }
+        if (event.altKey && !this.altKeyPressed) {
+            this.altKeyPressed = true;
+            return;
+        }
+        if ((event.key === "Delete" || event.key === "Backspace") &&
+            this.selectedPolygon) {
+            const currentPolygon = this.getCurrentPolygon();
+            if (currentPolygon.closed) {
+                this.deletePolygon(currentPolygon._id);
+                this.drawPolygons();
+                return;
+            }
+            currentPolygon.points.pop();
+            this.drawPolygons();
+            return;
+        }
+        // Handle tool selection shortcuts
+        const pressedKey = event.key.toLowerCase();
+        const tool = tools.find((t) => t.keyboardShortcut?.toLowerCase() === pressedKey);
+        if (tool) {
+            this.currentTool = tool;
+        }
+    }
+    handleKeyUp(event) {
+        if (!event.shiftKey && this.shiftKeyPressed) {
+            this.shiftKeyPressed = false;
+            this.drawPolygons();
+        }
+        if (!event.altKey && this.altKeyPressed) {
+            this.altKeyPressed = false;
+        }
+    }
+    handleMouseDown(event) {
+        if (!this.polygonCanvas || !this.polygonCtx)
+            return;
+        if (!this.polygonCanvas.contains(event.target))
+            return;
+        // get the mouse position in the polygon canvas
+        const rect = this.polygonCanvas.getBoundingClientRect();
+        let x = event.clientX - rect.left;
+        let y = event.clientY - rect.top;
+        if (this.currentTool.name === "delete") {
+            if (!this.hoveredPolygon) {
+                return;
+            }
+            const { _id, type } = this.hoveredPolygon;
+            if (type === "roof") {
+                delete this.roofPolygons[_id];
+                delete this.roofPolygonsSolarPanels[_id];
+            }
+            else if (type === "obstruction") {
+                delete this.obstructionPolygons[_id];
+            }
+            this.hoveredPolygon = null;
+            if (this.selectedPolygon?._id === _id) {
+                this.selectedPolygon = null;
+            }
+            this.drawPolygons();
+            return;
+        }
+        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;
+                });
+                if (pointIndex !== undefined && pointIndex !== -1) {
+                    this.draggedPointIndex = pointIndex;
+                    return;
+                }
+                if (this.hoveredPolygon) {
+                    this.selectedPolygon = this.hoveredPolygon;
+                    return;
+                }
+            }
+            this.selectedPolygon = null;
+            this.drawPolygons();
+            return;
+        }
+        if (!this.selectedPolygon || this.getCurrentPolygon()?.closed) {
+            // no polygon is active, create a new one
+            const newPolygon = {
+                _id: v4(),
+                points: [{ x, y }],
+                type: this.currentTool.name,
+                closed: false,
+            };
+            let _id;
+            if (this.currentTool.name === "roof") {
+                this.roofPolygons = {
+                    ...this.roofPolygons,
+                    [newPolygon._id]: newPolygon,
+                };
+                _id = newPolygon._id;
+            }
+            else if (this.currentTool.name === "obstruction") {
+                this.obstructionPolygons = {
+                    ...this.obstructionPolygons,
+                    [newPolygon._id]: newPolygon,
+                };
+                _id = newPolygon._id;
+            }
+            this.selectedPolygon = { _id, type: this.currentTool.name };
+            return;
+        }
+        const { _id, type } = this.selectedPolygon;
+        const currentPolygon = type === "roof"
+            ? this.roofPolygons[_id]
+            : this.obstructionPolygons[_id];
+        if (currentPolygon.closed) {
+            return;
+        }
+        // If we have at least one point, check if we're clicking near the first point
+        if (currentPolygon.points.length > 2) {
+            const firstPoint = currentPolygon.points[0];
+            const distance = Math.sqrt(Math.pow(x - firstPoint.x, 2) + Math.pow(y - firstPoint.y, 2));
+            if (distance < 10) {
+                this.closePolygon();
+                return;
+            }
+        }
+        // Handle shift key for perpendicular points
+        if (event.shiftKey && currentPolygon?.points.length >= 2) {
+            const projectedPoint = projectPointPerpendicularToLine({
+                x,
+                y,
+                lastPoint: currentPolygon.points[currentPolygon.points.length - 1],
+                secondLastPoint: currentPolygon.points[currentPolygon.points.length - 2],
+            });
+            x = projectedPoint.x;
+            y = projectedPoint.y;
+        }
+        currentPolygon.points = [...currentPolygon.points, { x, y }];
+        this.drawPolygons();
+    }
+    handleMouseUp() {
+        this.draggedPointIndex = null;
+    }
+    closePolygon() {
+        const currentPolygon = this.getCurrentPolygon();
+        if (currentPolygon.points.length >= 3 &&
+            (this.currentTool.name === "roof" ||
+                this.currentTool.name === "obstruction")) {
+            currentPolygon.closed = true;
+        }
+        if (currentPolygon.type === "roof") {
+            // Calculate basic polygon details
+            const metersInPixels = 1 / this.pixelInMeters;
+            const area = calculatePolygonArea(currentPolygon.points) /
+                (metersInPixels * metersInPixels);
+            const bestMatch = getBestFittingRoofSegment(currentPolygon, this.buildingInsights?.solarPotential.roofSegmentStats, this.rgbTiff.bounds, this.canvasElement);
+            if (bestMatch) {
+                currentPolygon.details = {
+                    area,
+                    azimuth: bestMatch.azimuthDegrees,
+                    pitch: bestMatch.pitchDegrees,
+                };
+            }
+            else {
+                currentPolygon.details = {
+                    area,
+                    azimuth: 0,
+                    pitch: 0,
+                };
+            }
+        }
+        this.drawPolygons();
+        this.currentTool = moveTool;
+    }
+    calculateSolarPanels() {
+        const currentPolygon = this.getCurrentPolygon();
+        if (!currentPolygon.details) {
+            return;
+        }
+        if (this.roofPolygonsSolarPanels[currentPolygon._id]) {
+            delete this.roofPolygonsSolarPanels[currentPolygon._id];
+        }
+        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(currentPolygon, Object.values(this.obstructionPolygons), convertedSolarPanel, currentPolygon.details?.azimuth, inset, currentPolygon.details?.pitch);
+        this.roofPolygonsSolarPanels = {
+            ...this.roofPolygonsSolarPanels,
+            [currentPolygon._id]: solarPanels,
+        };
+        this.drawPolygons();
+    }
+    handlePitchChange(event) {
+        console.log("handlePitchChange");
+        const target = event.target;
+        const pitch = parseFloat(target.value);
+        const currentPolygon = this.getCurrentPolygon();
+        if (currentPolygon) {
+            this.roofPolygons[currentPolygon._id].details.pitch = pitch;
+        }
+        if (currentPolygon.type === "roof" &&
+            this.roofPolygonsSolarPanels[currentPolygon._id]) {
+            this.calculateSolarPanels();
+            return;
+        }
+    }
+    handleAzimuthChange(event) {
+        console.log("handleAzimuthChange");
+        const target = event.target;
+        const azimuth = parseFloat(target.value);
+        const currentPolygon = this.getCurrentPolygon();
+        if (currentPolygon) {
+            this.roofPolygons[currentPolygon._id].details.azimuth = azimuth;
+        }
+        if (currentPolygon.type === "roof" &&
+            this.roofPolygonsSolarPanels[currentPolygon._id]) {
+            this.calculateSolarPanels();
+            return;
+        }
+    }
+    handleToolSelect(tool) {
+        this.currentTool = tool;
+    }
+    render() {
+        const currentTool = tools.find((tool) => tool.name === this.currentTool.name);
+        const currentPolygon = this.getCurrentPolygon();
+        return (h("div", { key: '563fc00541c7988ceeae97faeeafa0ae98bb2595', class: "flex flex-col justify-center items-center w-full h-full gap-4" }, h("div", { key: '13c087a2b267360989df9165a065cba2f1e5b7a6', class: "flex gap-4 rounded-4xl bg-[#f3ebda] p-4" }, tools.map((tool) => (h("button", { class: `px-4 py-2 rounded-4xl transition-colors duration-200 hover:bg-[#964500] ${this.currentTool.name === tool.name
+                ? "bg-[#271200] text-white hover:bg-[#964500]"
+                : "bg-[#f3ebda] hover:bg-[#964500]"}`, "aria-label": tool.ariaLabel, onClick: () => this.handleToolSelect(tool) }, h("i", { "data-lucide": tool.icon }))))), h("div", { key: 'ffc89d75efaf196cae646353a04846d83f93db25', class: "flex w-full gap-4 items-start justify-center h-full" }, h("div", { key: '476fada243140756e07c4a1f52b0e187e1ca8c8a', class: "w-52 bg-[#f3ebda] rounded-4xl p-4" }, h("h3", { key: '2342023f09347e69a4400f29afcdb397323c37bd', class: "text-lg font-semibold mb-4 text-center" }, "Information"), currentPolygon?.details
+            ? (h("div", { class: "space-y-4" }, h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, "Area"), h("p", { class: "text-lg" }, currentPolygon.details?.area
+                .toFixed(2), " m\u00B2")), h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, "Orientation"), h("div", { class: "flex gap-2 flex-row justify-start" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        this.handleAzimuthChange(e);
+                        e.target
+                            .blur();
+                    }
+                }, value: currentPolygon.details
+                    ?.azimuth }), "(", azimuthToCardinal(currentPolygon.details
+                ?.azimuth), ")")), h("div", null, h("h4", { class: "text-sm font-medium text-gray-600" }, "Angle"), h("div", { class: "flex gap-2 flex-row justify-start" }, h("input", { class: "text-lg w-full", onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        this.handlePitchChange(e);
+                        e.target
+                            .blur();
+                    }
+                }, value: currentPolygon.details
+                    ?.pitch }), "\u00B0")), h("div", { class: "flex flex-col gap-2" }, h("button", { class: "px-4 py-2 bg-[#271200] text-white rounded-4xl hover:bg-[#964500] transition-colors duration-200", onClick: () => this.calculateSolarPanels() }, "Calculate Solar Panels"), this
+                .roofPolygonsSolarPanels[currentPolygon._id] && (h("p", { class: "text-lg text-center" }, this
+                .roofPolygonsSolarPanels[currentPolygon._id].length, " panels")))))
+            : (h("p", { class: "text-gray-500 text-center" }, "No polygon selected"))), h("div", { key: '0dd5c474e7aa42e62938a0161615bd91ec514f4b', class: "relative flex-1 w-full h-full rounded-4xl flex items-center justify-center", style: {
+                width: `${this.rgbTiff?.width * FACTOR || 0}px`,
+                height: `${this.rgbTiff?.height * FACTOR || 0}px`,
+            } }, (this.latitude && this.longitude &&
+            this.loadingState !== "loaded") && (h("div", { key: '426443edf9bb64b9be51213b831ff607455c2dbc', class: "absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 z-20 pt-7 rounded-4xl" }, h("div", { key: '8c90cb0b16317fa32d66dd100a53c66d2eb17f17', class: "animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-[#271200]" }))), h("canvas", { key: '17902a4cd9e4ab7d1040051d6e020f4b157c3381', ref: (el) => this.canvasElement = el, class: `absolute top-0 left-0 z-1 rounded-4xl m-auto`, style: {
+                cursor: this.currentTool.cursor,
+            } }), h("canvas", { key: '33085ea829cd1a0fa41496e80ab8f1b4388d37a1', ref: (el) => this.polygonCanvas = el, class: `absolute top-0 left-0 z-10 rounded-4xl m-auto`, style: {
+                cursor: this.currentTool.cursor,
+            } })), h("div", { key: '5b7d1e538b3f7a0fd45382e185a25a1171ecf779', class: "w-52 bg-[#f3ebda] rounded-4xl p-4" }, h("h3", { key: '093369adeb939445fca2680fe4d2ebbe5f7d7a5f', class: "text-lg font-semibold mb-4 text-center" }, "Keyboard Shortcuts"), currentTool.keyboardCombinations && (h("div", { key: '405221a4095e148d121b63eba5fd91ba4b422d8e', class: "mb-6" }, h("h4", { key: '6f3c0a185e319631fa68bfb8c3ebdf25ab8d5f82', class: "text-sm font-medium text-gray-600 mb-2 text-center" }, currentTool.ariaLabel, " Tool"), currentTool.keyboardCombinations?.map((combo) => (h("div", { class: "flex items-center gap-2 mb-2" }, h("kbd", { class: "px-2 py-1 bg-white rounded text-sm" }, combo.key), h("span", { class: "text-sm text-gray-600" }, combo.description)))))), h("div", { key: 'edf0e2a52e0b8908dda0b9e63508e22b25e1cd59' }, h("h4", { key: 'df6f4eb73f425cdf20ca87f36f2665ef1b822f84', class: "text-sm font-medium text-gray-600 mb-2 text-center" }, "Tool Selection"), tools.map((tool) => (h("div", { class: "flex items-center gap-2 mb-2" }, h("kbd", { class: "px-2 py-1 bg-white rounded text-sm" }, tool.keyboardShortcut), h("span", { class: "text-sm text-gray-600" }, tool.ariaLabel)))))))));
+    }
+    static get watchers() { return {
+        "latitude": ["getBuildingInsights", "getBuildingImages"],
+        "longitude": ["getBuildingInsights", "getBuildingImages"],
+        "rgbTiff": ["drawMap"],
+        "buildingInsights": ["drawMap"]
+    }; }
+};
+MapDraw.style = outputCss;
+
+export { MapDraw as map_draw };
+//# sourceMappingURL=map-draw.entry.esm.js.map
+
+//# sourceMappingURL=map-draw.entry.js.map