@threekit-tools/treble 0.0.90-next-09 → 0.0.91

package/dist/hooks/useRoomBuilder/draw.js

@@ -0,0 +1,573 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.drawRoom = exports.drawElements = exports.drawOpenings = exports.drawDoors = exports.drawWindows = exports.drawDimensions = exports.drawVertices = exports.drawWalls = exports.drawNewWall = exports.drawVertex = exports.drawFloor = exports.drawGrid = exports.drawBackground = exports.clearCanvas = void 0;
+var types_1 = require("./types");
+var types_2 = require("./types");
+var geometry_1 = require("./geometry");
+var debug = false;
+function clearCanvas(canvas) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+exports.clearCanvas = clearCanvas;
+function drawBackground(canvas, color) {
+    if (!color)
+        return;
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+exports.drawBackground = drawBackground;
+function drawGrid(canvas, styles) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    ctx.strokeStyle = styles.lineColor;
+    var numHorizontalLines = Math.ceil(canvas.width / styles.gridStepGap);
+    var numVerticalLines = Math.ceil(canvas.height / styles.gridStepGap);
+    for (var i = 0; i < numHorizontalLines; i++) {
+        var y = i * styles.gridStepGap;
+        ctx.lineWidth =
+            styles.secondaryLineIncrement !== undefined &&
+                i % styles.secondaryLineIncrement === 0
+                ? styles.secondaryLineThickness
+                : styles.lineThickness;
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+        ctx.stroke();
+    }
+    for (var i = 0; i < numVerticalLines; i++) {
+        var x = i * styles.gridStepGap;
+        ctx.lineWidth =
+            styles.secondaryLineIncrement !== undefined &&
+                i % styles.secondaryLineIncrement === 0
+                ? styles.secondaryLineThickness
+                : styles.lineThickness;
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, canvas.height);
+        ctx.stroke();
+    }
+}
+exports.drawGrid = drawGrid;
+function drawFloor(canvas, enclosedSpaces, styles) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    if (!enclosedSpaces.length)
+        return;
+    for (var _i = 0, enclosedSpaces_1 = enclosedSpaces; _i < enclosedSpaces_1.length; _i++) {
+        var enclosedSpace = enclosedSpaces_1[_i];
+        var loop = enclosedSpace.loop;
+        ctx.fillStyle = styles.color;
+        if (debug)
+            ctx.fillStyle = 'rgba(255,0,0,.2)';
+        ctx.beginPath();
+        ctx.moveTo.apply(ctx, loop[0]);
+        for (var i = 1; i < loop.length; i++)
+            ctx.lineTo.apply(ctx, loop[i]);
+        ctx.fill();
+    }
+}
+exports.drawFloor = drawFloor;
+function drawWall(canvas, wall, style, mode) {
+    var _a;
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    var path = (_a = wall.path) !== null && _a !== void 0 ? _a : (0, geometry_1.addThicknessToLine)(wall.line, style.thickness);
+    var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
+    if (mode) {
+        stroke = style[mode].stroke;
+        fill = style[mode].fill;
+    }
+    ctx.strokeStyle = stroke || fill;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = strokeWidth || 1;
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, path[0]);
+    for (var i = 1; i < path.length; i++) {
+        ctx.lineTo.apply(ctx, path[i]);
+    }
+    ctx.lineTo.apply(ctx, path[0]);
+    ctx.fill();
+    if (style.stroke && style.strokeWidth)
+        ctx.stroke();
+}
+function drawFloorArea(canvas, enclosedSpaces, styles) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    if (!enclosedSpaces.length)
+        return;
+    for (var _i = 0, enclosedSpaces_2 = enclosedSpaces; _i < enclosedSpaces_2.length; _i++) {
+        var enclosedSpace = enclosedSpaces_2[_i];
+        var center = enclosedSpace.center, area = enclosedSpace.area;
+        ctx.font = '20px Arial';
+        ctx.fillStyle = styles.textColor;
+        ctx.fillText(area, center[0], center[1]);
+    }
+}
+function drawDimension(canvas, line, styles, message) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    var dimensionsBoxHeight = styles.fontSize + 6;
+    var dimensionsHeight = dimensionsBoxHeight + 6;
+    var line1 = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding);
+    var line2 = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding + dimensionsHeight / 2);
+    var line3 = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding + dimensionsHeight);
+    var textLine = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding + dimensionsHeight / 2 - dimensionsBoxHeight / 2);
+    var textCoordinates = (0, geometry_1.getMidpointOfLineSegment)(textLine);
+    var textAngle = (0, geometry_1.getAngleOfLineSegment)(textLine);
+    ctx.strokeStyle = styles.lineColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, line2[0]);
+    ctx.lineTo.apply(ctx, line2[1]);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, line1[0]);
+    ctx.lineTo.apply(ctx, line3[0]);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, line1[1]);
+    ctx.lineTo.apply(ctx, line3[1]);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.font = "".concat(styles.fontSize, "px ").concat(styles.font);
+    ctx.font = "".concat(styles.fontSize, "px ").concat(styles.font);
+    ctx.translate.apply(ctx, textCoordinates);
+    ctx.rotate(textAngle);
+    ctx.fillStyle = styles.textBackgroundColor;
+    var textWidth = ctx.measureText(message).width + 12;
+    ctx.fillRect(-(textWidth / 2), -((dimensionsBoxHeight * 3) / 4), textWidth, dimensionsBoxHeight);
+    ctx.fillStyle = styles.textColor;
+    ctx.textAlign = 'center';
+    ctx.fillText(message, 0, 0);
+    ctx.resetTransform();
+}
+function drawVertex(canvas, point, style, mode) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    var stroke = style.stroke, innerFill = style.innerFill, outerFill = style.outerFill, strokeWidth = style.strokeWidth, outerRadius = style.outerRadius;
+    if (mode) {
+        stroke = style[mode].stroke;
+        innerFill = style[mode].innerFill;
+        outerFill = style[mode].outerFill;
+    }
+    ctx.lineWidth = strokeWidth || 1;
+    ctx.strokeStyle = stroke || innerFill;
+    ctx.fillStyle = outerFill;
+    if (outerRadius) {
+        ctx.beginPath();
+        ctx.arc(point[0], point[1], outerRadius, 0, 2 * Math.PI);
+        if (style.strokeWidth)
+            ctx.stroke();
+        ctx.fill();
+    }
+    ctx.lineWidth = strokeWidth || 1;
+    ctx.fillStyle = innerFill;
+    ctx.strokeStyle = stroke || innerFill;
+    ctx.beginPath();
+    ctx.arc(point[0], point[1], style.innerRadius, 0, 2 * Math.PI);
+    ctx.fill();
+    if (!outerRadius && strokeWidth)
+        ctx.stroke();
+    if (debug) {
+        ctx.font = '20px Arial';
+        ctx.fillStyle = 'red';
+        ctx.fillText.apply(ctx, __spreadArray([Math.round(point[0]) + ',' + Math.round(point[1])], point, false));
+    }
+}
+exports.drawVertex = drawVertex;
+function drawWindow(canvas, wall, offset, length, style, mode) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    var windowLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset, length);
+    var windowRectangleLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset + style.thickness / 2, length - style.thickness);
+    var points = (0, geometry_1.addThicknessToLine)(windowLine, style.thickness);
+    var rectanglePoints = (0, geometry_1.addThicknessToLine)(windowRectangleLine, style.thickness);
+    var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
+    if (mode) {
+        stroke = style[mode].stroke;
+        fill = style[mode].fill;
+    }
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, points[0]);
+    for (var i = 1; i < points.length; i++) {
+        ctx.lineTo.apply(ctx, points[i]);
+    }
+    ctx.lineTo.apply(ctx, points[0]);
+    ctx.fill();
+    ctx.closePath();
+    ctx.strokeStyle = stroke || fill;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = strokeWidth || 1;
+    ctx.moveTo.apply(ctx, rectanglePoints[0]);
+    ctx.beginPath();
+    for (var i = 1; i < points.length; i++) {
+        ctx.lineTo.apply(ctx, rectanglePoints[i]);
+    }
+    ctx.lineTo.apply(ctx, rectanglePoints[0]);
+    ctx.fill();
+    ctx.closePath();
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, windowLine[0]);
+    ctx.lineTo.apply(ctx, windowLine[1]);
+    if (style.stroke)
+        ctx.stroke();
+    ctx.closePath();
+    var angle = (0, geometry_1.getAngleOfLineSegment)(windowLine);
+    ctx.beginPath();
+    ctx.arc(windowLine[0][0], windowLine[0][1], style.thickness / 2, angle - Math.PI / 2, angle + Math.PI / 2);
+    ctx.fill();
+    ctx.closePath();
+    ctx.beginPath();
+    ctx.arc(windowLine[1][0], windowLine[1][1], style.thickness / 2, angle + Math.PI / 2, angle - Math.PI / 2);
+    ctx.fill();
+}
+function drawDoor(canvas, wall, offset, length, style, mode) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    var doorLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset, length);
+    var points = (0, geometry_1.addThicknessToLine)(doorLine, style.thickness);
+    var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
+    if (mode) {
+        stroke = style[mode].stroke;
+        fill = style[mode].fill;
+    }
+    ctx.strokeStyle = stroke || fill;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = strokeWidth || 1;
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, points[0]);
+    for (var i = 1; i < points.length; i++) {
+        ctx.lineTo.apply(ctx, points[i]);
+    }
+    ctx.lineTo.apply(ctx, points[0]);
+    ctx.fill();
+    if (style.stroke)
+        ctx.stroke();
+}
+function drawOpening(canvas, wall, offset, length, style, mode) {
+    var ctx = canvas.getContext('2d');
+    if (!ctx)
+        return;
+    var openingLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset, length);
+    var points = (0, geometry_1.addThicknessToLine)(openingLine, style.thickness);
+    var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
+    if (mode) {
+        stroke = style[mode].stroke;
+        fill = style[mode].fill;
+    }
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo.apply(ctx, points[0]);
+    for (var i = 1; i < points.length; i++) {
+        ctx.lineTo.apply(ctx, points[i]);
+    }
+    ctx.lineTo.apply(ctx, points[0]);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.strokeStyle = stroke || fill;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = strokeWidth || 1;
+    ctx.setLineDash([10, 10]);
+    ctx.moveTo.apply(ctx, openingLine[0]);
+    ctx.lineTo.apply(ctx, openingLine[1]);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.beginPath();
+    ctx.setLineDash([]);
+    var angle = (0, geometry_1.getAngleOfLineSegment)(openingLine);
+    ctx.arc(openingLine[0][0], openingLine[0][1], style.thickness / 2, angle - Math.PI / 2, angle + Math.PI / 2);
+    ctx.fill();
+    ctx.closePath();
+    ctx.beginPath();
+    ctx.arc(openingLine[1][0], openingLine[1][1], style.thickness / 2, angle + Math.PI / 2, angle - Math.PI / 2);
+    ctx.fill();
+}
+function drawNewWall(canvas, line, styles, mode) {
+    drawWall(canvas, {
+        line: line,
+        path: (0, geometry_1.addThicknessToLine)(line, styles.wall.thickness),
+    }, styles.wall, mode !== null && mode !== void 0 ? mode : types_1.IElementStyleModes.ACTIVE);
+    line.forEach(function (point) {
+        return drawVertex(canvas, point, styles.vertex, mode !== null && mode !== void 0 ? mode : types_1.IElementStyleModes.HIGHLIGHT);
+    });
+}
+exports.drawNewWall = drawNewWall;
+function drawWalls(canvas, walls, selections, styles) {
+    var styled = [
+        selections.active,
+        selections.highlighted,
+        selections.error,
+        selections.hidden,
+    ];
+    var defaultOpenings = walls.reduce(function (output, _, i) {
+        if (!styled.flat().includes(i))
+            output.push(i);
+        return output;
+    }, []);
+    var wallsMap = [
+        [types_1.IElementStyleModes.ACTIVE, selections.active],
+        [types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
+        [types_1.IElementStyleModes.ERROR, selections.error],
+        [undefined, defaultOpenings],
+    ];
+    wallsMap.forEach(function (_a) {
+        var mode = _a[0], wallIndexes = _a[1];
+        return wallIndexes.forEach(function (index) { return drawWall(canvas, walls[index], styles, mode); });
+    });
+}
+exports.drawWalls = drawWalls;
+function drawVertices(canvas, vertices, selections, styles) {
+    var styled = [
+        selections.active,
+        selections.highlighted,
+        selections.error,
+        selections.hidden,
+    ];
+    var defaultOpenings = vertices.reduce(function (output, _, i) {
+        if (!styled.flat().includes(i))
+            output.push(i);
+        return output;
+    }, []);
+    var verticesMap = [
+        [types_1.IElementStyleModes.ACTIVE, selections.active],
+        [types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
+        [types_1.IElementStyleModes.ERROR, selections.error],
+        [undefined, defaultOpenings],
+    ];
+    verticesMap.forEach(function (_a) {
+        var mode = _a[0], vertexIndexes = _a[1];
+        return vertexIndexes.forEach(function (index) {
+            var point = vertices[index].point;
+            drawVertex(canvas, point, styles, mode);
+        });
+    });
+}
+exports.drawVertices = drawVertices;
+function drawDimensions(canvas, dimensions, config) {
+    dimensions.forEach(function (_a) {
+        var line = _a.line, label = _a.label;
+        drawDimension(canvas, line, config.styles.dimensions, label);
+    });
+}
+exports.drawDimensions = drawDimensions;
+function drawWindows(canvas, walls, windows, selections, styles) {
+    var styled = [
+        selections.active,
+        selections.highlighted,
+        selections.error,
+        selections.hidden,
+    ];
+    var defaultOpenings = windows.reduce(function (output, _, i) {
+        if (!styled.flat().includes(i))
+            output.push(i);
+        return output;
+    }, []);
+    var windowsMap = [
+        [types_1.IElementStyleModes.ACTIVE, selections.active],
+        [types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
+        [types_1.IElementStyleModes.ERROR, selections.error],
+        [undefined, defaultOpenings],
+    ];
+    windowsMap.forEach(function (_a) {
+        var mode = _a[0], windowIndexes = _a[1];
+        return windowIndexes.forEach(function (index) {
+            var window = windows[index];
+            if (!(window === null || window === void 0 ? void 0 : window.connectedTo.length))
+                return;
+            var wallIndex = window.connectedTo[1];
+            drawWindow(canvas, walls[wallIndex], window.offset, window.length, styles.feature, mode);
+        });
+    });
+}
+exports.drawWindows = drawWindows;
+function drawDoors(canvas, walls, doors, selections, styles) {
+    var styled = [
+        selections.active,
+        selections.highlighted,
+        selections.error,
+        selections.hidden,
+    ];
+    var defaultOpenings = doors.reduce(function (output, _, i) {
+        if (!styled.flat().includes(i))
+            output.push(i);
+        return output;
+    }, []);
+    var doorsMap = [
+        [types_1.IElementStyleModes.ACTIVE, selections.active],
+        [types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
+        [types_1.IElementStyleModes.ERROR, selections.error],
+        [undefined, defaultOpenings],
+    ];
+    doorsMap.forEach(function (_a) {
+        var mode = _a[0], doorsIndexes = _a[1];
+        return doorsIndexes.forEach(function (index) {
+            var door = doors[index];
+            if (!(door === null || door === void 0 ? void 0 : door.connectedTo.length))
+                return;
+            var wallIndex = door.connectedTo[1];
+            drawDoor(canvas, walls[wallIndex], door.offset, door.length, styles.feature, mode);
+        });
+    });
+}
+exports.drawDoors = drawDoors;
+function drawOpenings(canvas, walls, openings, selections, styles) {
+    var styled = [
+        selections.active,
+        selections.highlighted,
+        selections.error,
+        selections.hidden,
+    ];
+    var defaultOpenings = openings.reduce(function (output, _, i) {
+        if (!styled.flat().includes(i))
+            output.push(i);
+        return output;
+    }, []);
+    var openingsMap = [
+        [types_1.IElementStyleModes.ACTIVE, selections.active],
+        [types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
+        [types_1.IElementStyleModes.ERROR, selections.error],
+        [undefined, defaultOpenings],
+    ];
+    openingsMap.forEach(function (_a) {
+        var mode = _a[0], openingsIndexes = _a[1];
+        return openingsIndexes.forEach(function (index) {
+            var opening = openings[index];
+            if (!(opening === null || opening === void 0 ? void 0 : opening.connectedTo.length))
+                return;
+            var wallIndex = opening.connectedTo[1];
+            drawOpening(canvas, walls[wallIndex], opening.offset, opening.length, styles.feature, mode);
+        });
+    });
+}
+exports.drawOpenings = drawOpenings;
+function drawElements(canvas, walls, vertices, features, selections, styles) {
+    var wallSelections = {
+        active: [],
+        highlighted: [],
+        hidden: [],
+        error: [],
+    };
+    var verticesSelections = {
+        active: [],
+        highlighted: [],
+        hidden: [],
+        error: [],
+    };
+    var windowSelections = {
+        active: [],
+        highlighted: [],
+        hidden: [],
+        error: [],
+    };
+    var doorSelections = {
+        active: [],
+        highlighted: [],
+        hidden: [],
+        error: [],
+    };
+    var openingSelections = {
+        active: [],
+        highlighted: [],
+        hidden: [],
+        error: [],
+    };
+    selections.active.forEach(function (address) {
+        if (address.type === types_2.IElements.WALL)
+            wallSelections.active.push(address.index);
+        else if (address.type === types_2.IElements.VERTEX)
+            verticesSelections.active.push(address.index);
+        else if (address.type === types_2.IElements.WINDOW)
+            windowSelections.active.push(address.index);
+        else if (address.type === types_2.IElements.DOOR)
+            doorSelections.active.push(address.index);
+        else if (address.type === types_2.IElements.OPENING)
+            openingSelections.active.push(address.index);
+    });
+    selections.highlighted.forEach(function (address) {
+        if (address.type === types_2.IElements.WALL)
+            wallSelections.highlighted.push(address.index);
+        else if (address.type === types_2.IElements.VERTEX)
+            verticesSelections.highlighted.push(address.index);
+        else if (address.type === types_2.IElements.WINDOW)
+            windowSelections.highlighted.push(address.index);
+        else if (address.type === types_2.IElements.DOOR)
+            doorSelections.highlighted.push(address.index);
+        else if (address.type === types_2.IElements.OPENING)
+            openingSelections.highlighted.push(address.index);
+    });
+    selections.hidden.forEach(function (address) {
+        if (address.type === types_2.IElements.WALL)
+            wallSelections.hidden.push(address.index);
+        else if (address.type === types_2.IElements.VERTEX)
+            verticesSelections.hidden.push(address.index);
+        else if (address.type === types_2.IElements.WINDOW)
+            windowSelections.hidden.push(address.index);
+        else if (address.type === types_2.IElements.DOOR)
+            doorSelections.hidden.push(address.index);
+        else if (address.type === types_2.IElements.OPENING)
+            openingSelections.hidden.push(address.index);
+    });
+    selections.error.forEach(function (address) {
+        if (address.type === types_2.IElements.WALL)
+            wallSelections.error.push(address.index);
+        else if (address.type === types_2.IElements.VERTEX)
+            verticesSelections.error.push(address.index);
+        else if (address.type === types_2.IElements.WINDOW)
+            windowSelections.error.push(address.index);
+        else if (address.type === types_2.IElements.DOOR)
+            doorSelections.error.push(address.index);
+        else if (address.type === types_2.IElements.OPENING)
+            openingSelections.error.push(address.index);
+    });
+    drawWalls(canvas, walls, wallSelections, styles.wall);
+    drawVertices(canvas, vertices, verticesSelections, styles.vertex);
+    if (features[types_2.IElements.WINDOW])
+        drawWindows(canvas, walls, features[types_2.IElements.WINDOW] || [], windowSelections, styles);
+    if (features[types_2.IElements.DOOR])
+        drawDoors(canvas, walls, features[types_2.IElements.DOOR] || [], doorSelections, styles);
+    if (features[types_2.IElements.OPENING])
+        drawOpenings(canvas, walls, features[types_2.IElements.OPENING] || [], openingSelections, styles);
+}
+exports.drawElements = drawElements;
+function drawRoom(canvas, enclosedSpaces, walls, vertices, features, dimensions, selections, config) {
+    var preppedSelections = {
+        active: [(selections === null || selections === void 0 ? void 0 : selections.active) || []].flat(),
+        highlighted: [(selections === null || selections === void 0 ? void 0 : selections.highlighted) || []].flat(),
+        error: [(selections === null || selections === void 0 ? void 0 : selections.error) || []].flat(),
+        hidden: [(selections === null || selections === void 0 ? void 0 : selections.hidden) || []].flat(),
+    };
+    clearCanvas(canvas);
+    drawBackground(canvas, config.styles.grid.backgroundColor);
+    drawGrid(canvas, config.styles.grid);
+    drawFloor(canvas, enclosedSpaces, config.styles.floor);
+    drawElements(canvas, walls, vertices, features, preppedSelections, config.styles);
+    if (dimensions) {
+        drawDimensions(canvas, dimensions, config);
+        drawFloorArea(canvas, enclosedSpaces, config.styles.floor);
+    }
+}
+exports.drawRoom = drawRoom;

package/dist/hooks/useRoomBuilder/findLoops.d.ts

@@ -0,0 +1,5 @@
+import type { ICoordinate2D, ICoordinatesLine } from './types';
+export declare function findLoops(lines: Array<ICoordinatesLine>): {
+    inner: Array<ICoordinate2D[]>;
+    outer: Array<ICoordinate2D[]>;
+};

package/dist/hooks/{useSpaces/geometry → useRoomBuilder}/findLoops.js

@@ -8,18 +8,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var arePointsEqual_1 = __importDefault(require("./arePointsEqual"));
-var euclideanMod_1 = __importDefault(require("./euclideanMod"));
-var getAngleOfLineSegment_1 = __importDefault(require("./getAngleOfLineSegment"));
-var getLineOtherPoint_1 = __importDefault(require("./getLineOtherPoint"));
+exports.findLoops = void 0;
+var geometry_1 = require("./geometry");
 var areSidesEqual = function (_a, _b) {
     var lineIndex0 = _a[0], fromPoint0 = _a[1];
     var lineIndex1 = _b[0], fromPoint1 = _b[1];
-    return lineIndex0 === lineIndex1 && (0, arePointsEqual_1.default)(fromPoint0, fromPoint1);
+    return lineIndex0 === lineIndex1 && (0, geometry_1.arePointsEqual)(fromPoint0, fromPoint1);
 };
 var composeSideKey = function (_a) {
     var lineIndex = _a[0], point = _a[1];
@@ -48,8 +43,8 @@ function findLoops(lines) {
     function nextAdjacentWallSide(side) {
         var lineIndex = side[0], fromPoint = side[1];
         var line = lines[lineIndex];
-        var toPoint = (0, getLineOtherPoint_1.default)(line, fromPoint);
-        var lineAng = (0, getAngleOfLineSegment_1.default)([fromPoint, toPoint]);
+        var toPoint = (0, geometry_1.getLineOtherPoint)(line, fromPoint);
+        var lineAng = (0, geometry_1.getAngleOfLineSegment)([fromPoint, toPoint]);
         var adjacentLineIndices = pointToLinesIndices[JSON.stringify(toPoint)];
         var nextLineIndex;
         if (adjacentLineIndices.length === 0)
@@ -65,9 +60,9 @@ function findLoops(lines) {
                 if (adjacentLineIndex === lineIndex)
                     continue;
                 var adjacentLine = lines[adjacentLineIndex];
-                var adjacentPoint = (0, getLineOtherPoint_1.default)(adjacentLine, toPoint);
-                var adjacentLineAng = (0, getAngleOfLineSegment_1.default)([toPoint, adjacentPoint]);
-                var angDiff = (0, euclideanMod_1.default)(lineAng - adjacentLineAng + Math.PI, Math.PI * 2);
+                var adjacentPoint = (0, geometry_1.getLineOtherPoint)(adjacentLine, toPoint);
+                var adjacentLineAng = (0, geometry_1.getAngleOfLineSegment)([toPoint, adjacentPoint]);
+                var angDiff = (0, geometry_1.euclideanMod)(lineAng - adjacentLineAng + Math.PI, Math.PI * 2);
                 if (angDiff < smallestAngDiff) {
                     smallestAngDiff = angDiff;
                     nextLineIndex = adjacentLineIndex;
@@ -101,4 +96,4 @@ function findLoops(lines) {
         outer: outerLoops,
     };
 }
-exports.default = findLoops;
+exports.findLoops = findLoops;

package/dist/hooks/useRoomBuilder/geometry.d.ts

@@ -0,0 +1,33 @@
+import type { ICoordinate2D, ICoordinatesLine, ICoordinatesQuadrilateral } from './types';
+export declare function euclideanMod(n: number, m: number): number;
+export declare function arePointsEqual(point1: ICoordinate2D, point2: ICoordinate2D): boolean;
+export declare function areLinesEqual(line1: ICoordinatesLine, line2: ICoordinatesLine): boolean;
+export declare function getLineOtherPoint(line: ICoordinatesLine, point: ICoordinate2D): ICoordinate2D;
+export declare function getLengthOfLineSegment(line: ICoordinatesLine): number;
+export declare function getMidpointOfLineSegment(line: ICoordinatesLine): ICoordinate2D;
+export declare function getAngleOfLineSegment(line: ICoordinatesLine): number;
+export declare function getPointAtOffsetOnLineSegment(line: ICoordinatesLine, offset: number): ICoordinate2D;
+export declare function getLineAtOffsetOnLineSegment(line: ICoordinatesLine, offset: number, length: number): ICoordinatesLine;
+export declare function getLineMidpoint(line: ICoordinatesLine): ICoordinate2D;
+export declare function getDistanceToLine(pointOnLine: ICoordinate2D, angle: number, point: ICoordinate2D): number;
+export declare function closestPointOnLine(pointOnLine: ICoordinate2D, angle: number, point: ICoordinate2D): ICoordinate2D;
+export declare function getPolygonArea(polygon: Array<ICoordinate2D>): number;
+export declare function getParallelLineSegmentAtDistance(line: ICoordinatesLine, distance: number): ICoordinatesLine;
+export declare function addThicknessToLine(line: ICoordinatesLine, thickness: number): ICoordinatesQuadrilateral;
+export declare function arePointsWithinProximity(point1: ICoordinate2D, point2: ICoordinate2D, proximity: number): boolean;
+export declare function isPointInQuadrilateral(quadrilateral: ICoordinatesQuadrilateral, point: ICoordinate2D): boolean;
+export declare function isPointInPolygon(point: ICoordinate2D, polygon: Array<ICoordinate2D>): boolean;
+export declare function getLineSegmentsIntersection(line1: ICoordinatesLine, line2: ICoordinatesLine): null | ICoordinate2D;
+export declare function splitLineAtPoint(line: ICoordinatesLine, point: ICoordinate2D): [ICoordinatesLine, ICoordinatesLine];
+export declare function splitLineAtPoints(line: ICoordinatesLine, points: Array<ICoordinate2D>): Array<ICoordinatesLine>;
+export declare function splitLineAtOffset(line: ICoordinatesLine, offset: number): [ICoordinatesLine, ICoordinatesLine];
+export declare function orderCoordinatesOnLineSegment(points?: Array<ICoordinate2D>): Array<ICoordinate2D>;
+export declare function getTangetIntersectionAndOffset(line: ICoordinatesLine, point: ICoordinate2D): undefined | {
+    point: ICoordinate2D;
+    offset: number;
+};
+export declare function getAllLineIntersections(line: ICoordinatesLine, lines: Array<ICoordinatesLine | null>): {
+    index: number;
+    point: ICoordinate2D;
+}[];
+export declare function doLinesOverlap(line1: [offset: number, length: number], line2: [offset: number, length: number]): boolean;