@threekit-tools/treble 0.0.89-next-001 → 0.0.89-next-003

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

@@ -1,4 +1,4 @@
-import { IWalls, IVerticesState, ICoordinate2D, IFeature, IFeatures, ICoordinatesLine, IRoomBuilderStateProps, IElementAddress, IFeatureName, IVertex, IFeaturesHydrated, IElementUi, IElementName, IActiveElement } from './types';
+import { IWalls, IVerticesState, ICoordinate2D, IFeature, IFeatures, ICoordinatesLine, IRoomBuilderStateProps, IElementAddress, IFeatureName, IVertex, IFeaturesHydrated, IElementUi, IElementName, IActiveElement, IEnclosedSpace } from './types';
 import type { IHydratedAttribute } from '../../types';
 export declare class RoomBuilderState {
     private _config;
@@ -30,7 +30,7 @@ export declare class RoomBuilderState {
     set showDimensions(val: boolean);
     get angleSnappingEnabled(): boolean;
     set angleSnappingEnabled(val: boolean);
-    get enclosedSpaces(): ICoordinatesLine[][];
+    get enclosedSpaces(): Array<IEnclosedSpace>;
     private getWall;
     private addWall;
     private addWalls;
@@ -80,6 +80,7 @@ export declare class RoomBuilderState {
     highlightElementIfInProximity(canvas: HTMLCanvasElement, point: ICoordinate2D): void;
     startDrawNewWall(startPoint: ICoordinate2D): void;
     drawNewWall(canvas: HTMLCanvasElement, endPoint: ICoordinate2D): void;
+    cancelDrawNewWall(canvas: HTMLCanvasElement): void;
     finishDrawNewWall(canvas: HTMLCanvasElement, assetId: string): Promise<void>;
     private moveActiveVertex;
     private finishMoveActiveVertex;
@@ -88,6 +89,7 @@ export declare class RoomBuilderState {
     selectElementIfInProximity(canvas: HTMLCanvasElement, point: ICoordinate2D): void;
     moveActiveElement(canvas: HTMLCanvasElement, moveToPoint: ICoordinate2D): void;
     finishMoveActiveElement(canvas: HTMLCanvasElement): void;
+    cancelMoveActiveElement(canvas: HTMLCanvasElement): void;
     drawRoom(canvas: HTMLCanvasElement | null): void;
 }
 export default RoomBuilderState;

package/dist/hooks/useRoomBuilder/RoomBuilderState.js

@@ -65,6 +65,7 @@ var draw_1 = require("./draw");
 var dataHandlers_1 = require("./dataHandlers");
 var __1 = require("../..");
 var constants_1 = require("./constants");
+var findLoops_1 = require("./findLoops");
 var RoomBuilderState = (function () {
     function RoomBuilderState(config) {
         var _a;
@@ -318,9 +319,23 @@ var RoomBuilderState = (function () {
     Object.defineProperty(RoomBuilderState.prototype, "enclosedSpaces", {
         get: function () {
             var _this = this;
-            return (0, geometry_1.findClosedPaths)(this.wallLines).map(function (loop) {
-                return loop.map(function (wallIndex) { return _this.getWall(wallIndex).line; });
-            });
+            var loops = (0, findLoops_1.findLoops)(this.wallLines).inner;
+            return loops.reduce(function (output, loop) {
+                var screenSpaceArea = Math.round((0, geometry_1.getPolygonArea)(loop));
+                var area = screenSpaceArea * Math.pow(_this._config.config.scale, 2);
+                var convertedArea = (0, dataHandlers_1.convertAreaUnit)(area, types_1.IUnits.METER, _this._config.config.unit);
+                var enclosedSpace = {
+                    loop: loop,
+                    area: (0, dataHandlers_1.prepAreaForUser)(convertedArea, _this._config.config.unit),
+                    center: loop.reduce(function (centerPoint, point) {
+                        centerPoint[0] += point[0] / loop.length;
+                        centerPoint[1] += point[1] / loop.length;
+                        return centerPoint;
+                    }, [0, 0]),
+                };
+                output.push(enclosedSpace);
+                return output;
+            }, []);
         },
         enumerable: false,
         configurable: true
@@ -369,12 +384,11 @@ var RoomBuilderState = (function () {
         var line = (_a = this.getWall(index)) === null || _a === void 0 ? void 0 : _a.line;
         if (!line)
             return undefined;
-        var prepLength = function (val) { return val.toFixed(2); };
         var lineLength = (0, geometry_1.getLengthOfLineSegment)(line) * this._config.config.scale;
         var convertedVal = (0, dataHandlers_1.convertLengthUnit)(lineLength, types_1.IUnits.METER, this._config.config.unit);
         return {
             line: line,
-            label: "".concat(prepLength(convertedVal), " ").concat(constants_1.UNIT_LABELS[this._config.config.unit]),
+            label: (0, dataHandlers_1.prepLengthForUser)(convertedVal, this._config.config.unit),
         };
     };
     RoomBuilderState.prototype.getWallDetailedDimensions = function (index) {
@@ -771,7 +785,7 @@ var RoomBuilderState = (function () {
     RoomBuilderState.prototype.getWallInProximity = function (point) {
         var _this = this;
         var index = this.walls.findIndex(function (wall) {
-            var path = (0, geometry_1.addThicknessToLine)(wall.line, _this._config.config.styles.wall.thickness * constants_1.WALL_SNAP_DISTANCE);
+            var path = (0, geometry_1.addThicknessToLine)(wall.line, _this._config.config.styles.wall.thickness + constants_1.WALL_SNAP_DISTANCE);
             return (0, geometry_1.isPointInQuadrilateral)(path, point);
         });
         if (index === -1)
@@ -838,11 +852,10 @@ var RoomBuilderState = (function () {
             if (degrees === 0 || degrees % 90 === 0)
                 continue;
             var radians = degrees * (Math.PI / 180);
-            var slope = Math.tan(radians);
-            if ((0, geometry_1.getDistanceToLine)(anchorPoint, slope, point) < snapProximity)
+            if ((0, geometry_1.getDistanceToLine)(anchorPoint, radians, point) < snapProximity)
                 return {
                     type: 'Angle',
-                    point: (0, geometry_1.closestPointOnLine)(anchorPoint, slope, point),
+                    point: (0, geometry_1.closestPointOnLine)(anchorPoint, radians, point),
                 };
         }
         return undefined;
@@ -1050,6 +1063,12 @@ var RoomBuilderState = (function () {
                 break;
         }
     };
+    RoomBuilderState.prototype.cancelDrawNewWall = function (canvas) {
+        this._newWall = null;
+        this._errorElement = null;
+        this._highlightedElement = null;
+        this.drawRoom(canvas);
+    };
     RoomBuilderState.prototype.finishDrawNewWall = function (canvas, assetId) {
         return __awaiter(this, void 0, void 0, function () {
             var _a, start, end, snapStartTo, snapEndTo, wallsToExclude, filteredWalls, intersections, newWallLines;
@@ -1065,8 +1084,12 @@ var RoomBuilderState = (function () {
                     return [2];
                 }
                 _a = this._newWall || {}, start = _a.start, end = _a.end, snapStartTo = _a.snapStartTo, snapEndTo = _a.snapEndTo;
-                if (!start || !end)
+                if (!start || !end) {
+                    this._newWall = null;
+                    this._errorElement = null;
+                    this._highlightedElement = null;
                     return [2];
+                }
                 wallsToExclude = new Set([]);
                 if ((snapStartTo === null || snapStartTo === void 0 ? void 0 : snapStartTo.type) === types_2.IElements.WALL) {
                     this.splitWall(snapStartTo.index, start);
@@ -1159,6 +1182,13 @@ var RoomBuilderState = (function () {
         this._highlightedElement = null;
         this.drawRoom(canvas);
     };
+    RoomBuilderState.prototype.cancelMoveActiveElement = function (canvas) {
+        this._activeElement = null;
+        this._errorElement = null;
+        this._highlightedElement = null;
+        this.resetInternalState();
+        this.drawRoom(canvas);
+    };
     RoomBuilderState.prototype.drawRoom = function (canvas) {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!canvas)

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

@@ -19,15 +19,23 @@ export declare const SCALE = 0.02;
 export declare const SNAP_PROXIMITY = 10;
 export declare const MIN_WALL_LENGTH = 50;
 export declare const WALL_PADDING_FOR_FEATURE = 20;
-export declare const DIMENSIONS_TEXT_BOX_WIDTH = 60;
 export declare const UNIT_LABELS: {
     feet: string;
     meter: string;
     inch: string;
     cm: string;
 };
-export declare const CANVAS_HEIGHT = 800;
-export declare const CANVAS_WIDTH = 800;
+export declare const UNIT_FACTORS: {
+    cm: number;
+    meter: number;
+    feet: number;
+    inch: number;
+};
+export declare const FEATURE_LABELS: {
+    windows: string;
+    doors: string;
+    openings: string;
+};
 export declare const FEATURE_LENGTH = 120;
 export declare const UI_ANCHOR_DISTANCE = -60;
-export declare const WALL_SNAP_DISTANCE = 1.5;
+export declare const WALL_SNAP_DISTANCE = 12;

package/dist/hooks/useRoomBuilder/constants.js

@@ -1,7 +1,7 @@
 "use strict";
-var _a;
+var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WALL_SNAP_DISTANCE = exports.UI_ANCHOR_DISTANCE = exports.FEATURE_LENGTH = exports.CANVAS_WIDTH = exports.CANVAS_HEIGHT = exports.UNIT_LABELS = exports.DIMENSIONS_TEXT_BOX_WIDTH = exports.WALL_PADDING_FOR_FEATURE = exports.MIN_WALL_LENGTH = exports.SNAP_PROXIMITY = exports.SCALE = exports.IFeatureAttribute = exports.IWallAttributes = void 0;
+exports.WALL_SNAP_DISTANCE = exports.UI_ANCHOR_DISTANCE = exports.FEATURE_LENGTH = exports.FEATURE_LABELS = exports.UNIT_FACTORS = exports.UNIT_LABELS = exports.WALL_PADDING_FOR_FEATURE = exports.MIN_WALL_LENGTH = exports.SNAP_PROXIMITY = exports.SCALE = exports.IFeatureAttribute = exports.IWallAttributes = void 0;
 var types_1 = require("./types");
 var IWallAttributes;
 (function (IWallAttributes) {
@@ -26,15 +26,23 @@ exports.SCALE = 0.02;
 exports.SNAP_PROXIMITY = 10;
 exports.MIN_WALL_LENGTH = 50;
 exports.WALL_PADDING_FOR_FEATURE = 20;
-exports.DIMENSIONS_TEXT_BOX_WIDTH = 60;
 exports.UNIT_LABELS = (_a = {},
     _a[types_1.IUnits.FEET] = 'ft',
     _a[types_1.IUnits.METER] = 'm',
     _a[types_1.IUnits.INCH] = 'in',
     _a[types_1.IUnits.CM] = 'cm',
     _a);
-exports.CANVAS_HEIGHT = 800;
-exports.CANVAS_WIDTH = 800;
+exports.UNIT_FACTORS = (_b = {},
+    _b[types_1.IUnits.CM] = 100,
+    _b[types_1.IUnits.METER] = 1,
+    _b[types_1.IUnits.FEET] = 3.28084,
+    _b[types_1.IUnits.INCH] = 39.37,
+    _b);
+exports.FEATURE_LABELS = (_c = {},
+    _c[types_1.IElements.WINDOW] = 'Window',
+    _c[types_1.IElements.DOOR] = 'Door',
+    _c[types_1.IElements.OPENING] = 'Opening',
+    _c);
 exports.FEATURE_LENGTH = 120;
 exports.UI_ANCHOR_DISTANCE = -60;
-exports.WALL_SNAP_DISTANCE = 1.5;
+exports.WALL_SNAP_DISTANCE = 12;

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

@@ -13,3 +13,6 @@ export declare function prepAttributesOutgoing(walls: IWalls, features: IFeature
     }[];
 };
 export declare function convertLengthUnit(value: number, from: IUnits, to: IUnits): number;
+export declare function convertAreaUnit(value: number, from: IUnits, to: IUnits): number;
+export declare function prepLengthForUser(value: number, unit: IUnits): string;
+export declare function prepAreaForUser(value: number, unit: IUnits): string;

package/dist/hooks/useRoomBuilder/dataHandlers.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertLengthUnit = exports.prepAttributesOutgoing = exports.prepAttributesIncoming = void 0;
+exports.prepAreaForUser = exports.prepLengthForUser = exports.convertAreaUnit = exports.convertLengthUnit = exports.prepAttributesOutgoing = exports.prepAttributesIncoming = void 0;
 var types_1 = require("./types");
 var constants_1 = require("./constants");
 var geometry_1 = require("./geometry");
@@ -165,13 +165,23 @@ function prepAttributesOutgoing(walls, features, config) {
 }
 exports.prepAttributesOutgoing = prepAttributesOutgoing;
 function convertLengthUnit(value, from, to) {
-    var _a;
-    var factors = (_a = {},
-        _a[types_1.IUnits.CM] = 100,
-        _a[types_1.IUnits.METER] = 1,
-        _a[types_1.IUnits.FEET] = 3.28084,
-        _a[types_1.IUnits.INCH] = 39.37,
-        _a);
-    return (value / factors[from]) * factors[to];
+    return (value / constants_1.UNIT_FACTORS[from]) * constants_1.UNIT_FACTORS[to];
 }
 exports.convertLengthUnit = convertLengthUnit;
+function convertAreaUnit(value, from, to) {
+    return (value / constants_1.UNIT_FACTORS[from]) * Math.pow(constants_1.UNIT_FACTORS[to], 2);
+}
+exports.convertAreaUnit = convertAreaUnit;
+function prepLengthForUser(value, unit) {
+    if (unit === types_1.IUnits.FEET) {
+        var feet = Math.floor(value);
+        var inches = 1.2 * (value % 1);
+        return "".concat(feet).concat(constants_1.UNIT_LABELS[types_1.IUnits.FEET], " ").concat(inches.toFixed(2)).concat(constants_1.UNIT_LABELS[types_1.IUnits.INCH]);
+    }
+    return "".concat(value.toFixed(2), " ").concat(constants_1.UNIT_LABELS[unit]);
+}
+exports.prepLengthForUser = prepLengthForUser;
+function prepAreaForUser(value, unit) {
+    return "".concat(value.toFixed(2), " sq-").concat(constants_1.UNIT_LABELS[unit]);
+}
+exports.prepAreaForUser = prepAreaForUser;

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

@@ -1,4 +1,4 @@
-import { IWall, ICoordinate2D, ICoordinatesLine, IFeatures, IFeature, IElementAddress, IRoomBuilderStyles, IRoomBuilderConfigInternal, IStylesGrid, IStylesWall, IStylesVertex, ILineDimensions, IVertex, IElementStyleModes, IStylesFloor } from './types';
+import { IWall, ICoordinate2D, ICoordinatesLine, IFeatures, IFeature, IElementAddress, IRoomBuilderStyles, IRoomBuilderConfigInternal, IStylesGrid, IStylesWall, IStylesVertex, ILineDimensions, IVertex, IElementStyleModes, IStylesFloor, IEnclosedSpace } from './types';
 interface IWallToDraw extends Omit<IWall, 'assetId' | 'connections'> {
 }
 interface IWallsToDraw extends Array<IWallToDraw> {
@@ -6,7 +6,7 @@ interface IWallsToDraw extends Array<IWallToDraw> {
 export declare function clearCanvas(canvas: HTMLCanvasElement): void;
 export declare function drawBackground(canvas: HTMLCanvasElement, color?: string): void;
 export declare function drawGrid(canvas: HTMLCanvasElement, styles: IStylesGrid): void;
-export declare function drawFloor(canvas: HTMLCanvasElement, loops: Array<ICoordinatesLine[]>, styles: IStylesFloor): void;
+export declare function drawFloor(canvas: HTMLCanvasElement, enclosedSpaces: Array<IEnclosedSpace>, styles: IStylesFloor): void;
 export declare function drawVertex(canvas: HTMLCanvasElement, point: ICoordinate2D, style: IStylesVertex, mode?: IElementStyleModes): void;
 export declare function drawNewWall(canvas: HTMLCanvasElement, line: ICoordinatesLine, styles: IRoomBuilderStyles, mode?: IElementStyleModes.ERROR): void;
 export declare function drawWalls(canvas: HTMLCanvasElement, walls: IWallsToDraw, selections: {
@@ -46,7 +46,7 @@ export declare function drawElements(canvas: HTMLCanvasElement, walls: IWallsToD
     hidden: Array<IElementAddress>;
     error: Array<IElementAddress>;
 }, styles: IRoomBuilderStyles): void;
-export declare function drawRoom(canvas: HTMLCanvasElement, floor: Array<ICoordinatesLine[]>, walls: IWallsToDraw, vertices: Array<IVertex>, features: IFeatures, dimensions: Array<ILineDimensions> | undefined, selections: {
+export declare function drawRoom(canvas: HTMLCanvasElement, enclosedSpaces: Array<IEnclosedSpace>, walls: IWallsToDraw, vertices: Array<IVertex>, features: IFeatures, dimensions: Array<ILineDimensions> | undefined, selections: {
     active?: Array<IElementAddress> | IElementAddress;
     highlighted?: Array<IElementAddress> | IElementAddress;
     hidden?: Array<IElementAddress> | IElementAddress;

package/dist/hooks/useRoomBuilder/draw.js

@@ -1,10 +1,19 @@
 "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 constants_1 = require("./constants");
+var debug = false;
 function clearCanvas(canvas) {
     var ctx = canvas.getContext('2d');
     if (!ctx)
@@ -55,33 +64,24 @@ function drawGrid(canvas, styles) {
     }
 }
 exports.drawGrid = drawGrid;
-function drawFloor(canvas, loops, styles) {
+function drawFloor(canvas, enclosedSpaces, styles) {
     var ctx = canvas.getContext('2d');
     if (!ctx)
         return;
-    if (!loops.length)
+    if (!enclosedSpaces.length)
         return;
-    loops.forEach(function (lines) {
-        if (!lines.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, lines[0][0]);
-        var previousPoint = lines[0][0];
-        for (var i = 1; i < lines.length; i++) {
-            if (!i) {
-                ctx.lineTo.apply(ctx, lines[i][1]);
-                continue;
-            }
-            if ((0, geometry_1.arePointsEqual)(previousPoint, lines[i][0])) {
-                ctx.lineTo.apply(ctx, lines[i][1]);
-            }
-            else {
-                ctx.lineTo.apply(ctx, lines[i][0]);
-            }
-        }
+        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) {
@@ -99,15 +99,29 @@ function drawWall(canvas, wall, style, mode) {
     ctx.fillStyle = fill;
     ctx.lineWidth = strokeWidth || 1;
     ctx.beginPath();
-    ctx.moveTo(path[0][0], path[0][1]);
+    ctx.moveTo.apply(ctx, path[0]);
     for (var i = 1; i < path.length; i++) {
-        ctx.lineTo(path[i][0], path[i][1]);
+        ctx.lineTo.apply(ctx, path[i]);
     }
-    ctx.lineTo(path[0][0], path[0][1]);
+    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)
@@ -123,24 +137,25 @@ function drawDimension(canvas, line, styles, message) {
     ctx.strokeStyle = styles.lineColor;
     ctx.lineWidth = 1;
     ctx.beginPath();
-    ctx.moveTo(line2[0][0], line2[0][1]);
-    ctx.lineTo(line2[1][0], line2[1][1]);
+    ctx.moveTo.apply(ctx, line2[0]);
+    ctx.lineTo.apply(ctx, line2[1]);
     ctx.stroke();
     ctx.beginPath();
-    ctx.moveTo(line1[0][0], line1[0][1]);
-    ctx.lineTo(line3[0][0], line3[0][1]);
+    ctx.moveTo.apply(ctx, line1[0]);
+    ctx.lineTo.apply(ctx, line3[0]);
     ctx.stroke();
     ctx.beginPath();
-    ctx.moveTo(line1[1][0], line1[1][1]);
-    ctx.lineTo(line3[1][0], line3[1][1]);
+    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(textCoordinates[0], textCoordinates[1]);
+    ctx.translate.apply(ctx, textCoordinates);
     ctx.rotate(textAngle);
     ctx.fillStyle = styles.textBackgroundColor;
-    ctx.fillRect(-(constants_1.DIMENSIONS_TEXT_BOX_WIDTH / 2), -((dimensionsBoxHeight * 3) / 4), constants_1.DIMENSIONS_TEXT_BOX_WIDTH, dimensionsBoxHeight);
+    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);
@@ -174,6 +189,11 @@ function drawVertex(canvas, point, style, mode) {
     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) {
@@ -191,27 +211,27 @@ function drawWindow(canvas, wall, offset, length, style, mode) {
     }
     ctx.fillStyle = 'white';
     ctx.beginPath();
-    ctx.moveTo(points[0][0], points[0][1]);
+    ctx.moveTo.apply(ctx, points[0]);
     for (var i = 1; i < points.length; i++) {
-        ctx.lineTo(points[i][0], points[i][1]);
+        ctx.lineTo.apply(ctx, points[i]);
     }
-    ctx.lineTo(points[0][0], points[0][1]);
+    ctx.lineTo.apply(ctx, points[0]);
     ctx.fill();
     ctx.closePath();
     ctx.strokeStyle = stroke || fill;
     ctx.fillStyle = fill;
     ctx.lineWidth = strokeWidth || 1;
-    ctx.moveTo(rectanglePoints[0][0], rectanglePoints[0][1]);
+    ctx.moveTo.apply(ctx, rectanglePoints[0]);
     ctx.beginPath();
     for (var i = 1; i < points.length; i++) {
-        ctx.lineTo(rectanglePoints[i][0], rectanglePoints[i][1]);
+        ctx.lineTo.apply(ctx, rectanglePoints[i]);
     }
-    ctx.lineTo(rectanglePoints[0][0], rectanglePoints[0][1]);
+    ctx.lineTo.apply(ctx, rectanglePoints[0]);
     ctx.fill();
     ctx.closePath();
     ctx.beginPath();
-    ctx.moveTo(windowLine[0][0], windowLine[0][1]);
-    ctx.lineTo(windowLine[1][0], windowLine[1][1]);
+    ctx.moveTo.apply(ctx, windowLine[0]);
+    ctx.lineTo.apply(ctx, windowLine[1]);
     if (style.stroke)
         ctx.stroke();
     ctx.closePath();
@@ -239,11 +259,11 @@ function drawDoor(canvas, wall, offset, length, style, mode) {
     ctx.fillStyle = fill;
     ctx.lineWidth = strokeWidth || 1;
     ctx.beginPath();
-    ctx.moveTo(points[0][0], points[0][1]);
+    ctx.moveTo.apply(ctx, points[0]);
     for (var i = 1; i < points.length; i++) {
-        ctx.lineTo(points[i][0], points[i][1]);
+        ctx.lineTo.apply(ctx, points[i]);
     }
-    ctx.lineTo(points[0][0], points[0][1]);
+    ctx.lineTo.apply(ctx, points[0]);
     ctx.fill();
     if (style.stroke)
         ctx.stroke();
@@ -261,19 +281,19 @@ function drawOpening(canvas, wall, offset, length, style, mode) {
     }
     ctx.fillStyle = 'white';
     ctx.beginPath();
-    ctx.moveTo(points[0][0], points[0][1]);
+    ctx.moveTo.apply(ctx, points[0]);
     for (var i = 1; i < points.length; i++) {
-        ctx.lineTo(points[i][0], points[i][1]);
+        ctx.lineTo.apply(ctx, points[i]);
     }
-    ctx.lineTo(points[0][0], points[0][1]);
+    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(openingLine[0][0], openingLine[0][1]);
-    ctx.lineTo(openingLine[1][0], openingLine[1][1]);
+    ctx.moveTo.apply(ctx, openingLine[0]);
+    ctx.lineTo.apply(ctx, openingLine[1]);
     ctx.stroke();
     ctx.closePath();
     ctx.beginPath();
@@ -533,7 +553,7 @@ function drawElements(canvas, walls, vertices, features, selections, styles) {
         drawOpenings(canvas, walls, features[types_2.IElements.OPENING] || [], openingSelections, styles);
 }
 exports.drawElements = drawElements;
-function drawRoom(canvas, floor, walls, vertices, features, dimensions, selections, config) {
+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(),
@@ -543,9 +563,11 @@ function drawRoom(canvas, floor, walls, vertices, features, dimensions, selectio
     clearCanvas(canvas);
     drawBackground(canvas, config.styles.grid.backgroundColor);
     drawGrid(canvas, config.styles.grid);
-    drawFloor(canvas, floor, config.styles.floor);
+    drawFloor(canvas, enclosedSpaces, config.styles.floor);
     drawElements(canvas, walls, vertices, features, preppedSelections, config.styles);
-    if (dimensions)
+    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/useRoomBuilder/findLoops.js

@@ -0,0 +1,99 @@
+"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.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, geometry_1.arePointsEqual)(fromPoint0, fromPoint1);
+};
+var composeSideKey = function (_a) {
+    var lineIndex = _a[0], point = _a[1];
+    return "".concat(lineIndex, ":").concat(JSON.stringify(point));
+};
+var decomposeSideKey = function (key) {
+    var _a = key.split(':'), lineIndexStr = _a[0], fromVertStr = _a[1];
+    return [Number(lineIndexStr), JSON.parse(fromVertStr)];
+};
+function calcPointToLineAdjacency(lines) {
+    return lines.reduce(function (output, line, lineIndex) {
+        line.forEach(function (point) {
+            var pointStr = JSON.stringify(point);
+            if (output[pointStr])
+                output[pointStr].push(lineIndex);
+            else
+                output[pointStr] = [lineIndex];
+        });
+        return output;
+    }, {});
+}
+function findLoops(lines) {
+    var pointToLinesIndices = calcPointToLineAdjacency(lines);
+    var unvisitedSides = new Set(__spreadArray(__spreadArray([], lines.map(function (line, i) { return composeSideKey([i, line[0]]); }), true), lines.map(function (line, i) { return composeSideKey([i, line[1]]); }), true));
+    var sumCurvature = 0;
+    function nextAdjacentWallSide(side) {
+        var lineIndex = side[0], fromPoint = side[1];
+        var line = lines[lineIndex];
+        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)
+            throw new Error();
+        if (adjacentLineIndices.length === 1) {
+            nextLineIndex = adjacentLineIndices[0];
+            sumCurvature += Math.PI;
+        }
+        else {
+            var smallestAngDiff = Infinity;
+            for (var _i = 0, adjacentLineIndices_1 = adjacentLineIndices; _i < adjacentLineIndices_1.length; _i++) {
+                var adjacentLineIndex = adjacentLineIndices_1[_i];
+                if (adjacentLineIndex === lineIndex)
+                    continue;
+                var adjacentLine = lines[adjacentLineIndex];
+                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;
+                }
+            }
+            sumCurvature += smallestAngDiff - Math.PI;
+        }
+        return [nextLineIndex, toPoint];
+    }
+    function traverseLoop(start) {
+        var path = new Array();
+        var curr = start;
+        do {
+            path.push(curr[1]);
+            unvisitedSides.delete(composeSideKey(curr));
+            curr = nextAdjacentWallSide(curr);
+        } while (!areSidesEqual(start, curr));
+        return path;
+    }
+    var innerLoops = new Array();
+    var outerLoops = new Array();
+    while (unvisitedSides.size > 0) {
+        sumCurvature = 0;
+        var start = decomposeSideKey(unvisitedSides.values().next().value);
+        var path = traverseLoop(start);
+        var isClockwise = sumCurvature < 0;
+        (isClockwise ? innerLoops : outerLoops).push(path);
+    }
+    return {
+        inner: innerLoops,
+        outer: outerLoops,
+    };
+}
+exports.findLoops = findLoops;