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

package/dist/hooks/useRoomBuilder/geometry.js

@@ -0,0 +1,325 @@
+"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.doLinesOverlap = exports.getAllLineIntersections = exports.getTangetIntersectionAndOffset = exports.orderCoordinatesOnLineSegment = exports.splitLineAtOffset = exports.splitLineAtPoints = exports.splitLineAtPoint = exports.getLineSegmentsIntersection = exports.isPointInPolygon = exports.isPointInQuadrilateral = exports.arePointsWithinProximity = exports.addThicknessToLine = exports.getParallelLineSegmentAtDistance = exports.getPolygonArea = exports.closestPointOnLine = exports.getDistanceToLine = exports.getLineMidpoint = exports.getLineAtOffsetOnLineSegment = exports.getPointAtOffsetOnLineSegment = exports.getAngleOfLineSegment = exports.getMidpointOfLineSegment = exports.getLengthOfLineSegment = exports.getLineOtherPoint = exports.areLinesEqual = exports.arePointsEqual = exports.euclideanMod = void 0;
+function euclideanMod(n, m) {
+    return ((n % m) + m) % m;
+}
+exports.euclideanMod = euclideanMod;
+function arePointsEqual(point1, point2) {
+    if (!point1 || !point2)
+        return false;
+    return point1[0] === point2[0] && point1[1] === point2[1];
+}
+exports.arePointsEqual = arePointsEqual;
+function areLinesEqual(line1, line2) {
+    if (!line1 || !line2)
+        return false;
+    if ((arePointsEqual(line1[0], line2[0]) &&
+        arePointsEqual(line1[1], line2[1])) ||
+        (arePointsEqual(line1[0], line2[1]) && arePointsEqual(line1[1], line2[0]))) {
+        return true;
+    }
+    return false;
+}
+exports.areLinesEqual = areLinesEqual;
+function getLineOtherPoint(line, point) {
+    var eq0 = arePointsEqual(line[0], point);
+    var eq1 = arePointsEqual(line[1], point);
+    if (eq0 === eq1)
+        console.warn('Unexpected. Is your wall of 0 length?', JSON.parse(JSON.stringify({ line: line, point: point })));
+    return eq0 ? line[1] : line[0];
+}
+exports.getLineOtherPoint = getLineOtherPoint;
+function getLengthOfLineSegment(line) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+}
+exports.getLengthOfLineSegment = getLengthOfLineSegment;
+function getUnitVectorOfLineSegment(line) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var magnitude = getLengthOfLineSegment(line);
+    return [(x2 - x1) / magnitude, (y2 - y1) / magnitude];
+}
+function getMidpointOfLineSegment(line) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var xMidpoint = (x1 + x2) / 2;
+    var yMidpoint = (y1 + y2) / 2;
+    return [xMidpoint, yMidpoint];
+}
+exports.getMidpointOfLineSegment = getMidpointOfLineSegment;
+function getAngleOfLineSegment(line) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    return Math.atan2(y2 - y1, x2 - x1);
+}
+exports.getAngleOfLineSegment = getAngleOfLineSegment;
+function getPointAtOffsetOnLineSegment(line, offset) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var d = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+    var r = offset / d;
+    var x = x1 + r * (x2 - x1);
+    var y = y1 + r * (y2 - y1);
+    return [x, y];
+}
+exports.getPointAtOffsetOnLineSegment = getPointAtOffsetOnLineSegment;
+function getLineAtOffsetOnLineSegment(line, offset, length) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var d = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+    var startRatio = offset / d;
+    var endRatio = (offset + length) / d;
+    var startX = x1 + startRatio * (x2 - x1);
+    var startY = y1 + startRatio * (y2 - y1);
+    var endX = x1 + endRatio * (x2 - x1);
+    var endY = y1 + endRatio * (y2 - y1);
+    return [
+        [startX, startY],
+        [endX, endY],
+    ];
+}
+exports.getLineAtOffsetOnLineSegment = getLineAtOffsetOnLineSegment;
+function getLineMidpoint(line) {
+    var x = (line[0][0] + line[1][0]) / 2;
+    var y = (line[0][1] + line[1][1]) / 2;
+    return [x, y];
+}
+exports.getLineMidpoint = getLineMidpoint;
+function getDistanceToLine(pointOnLine, angle, point) {
+    var x1 = point[0], y1 = point[1];
+    var x2 = pointOnLine[0], y2 = pointOnLine[1];
+    var dx = Math.cos(angle);
+    var dy = Math.sin(angle);
+    return (Math.abs((y1 - y2) * dx - (x1 - x2) * dy) / Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
+}
+exports.getDistanceToLine = getDistanceToLine;
+function closestPointOnLine(pointOnLine, angle, point) {
+    var x1 = point[0], y1 = point[1];
+    var x2 = pointOnLine[0], y2 = pointOnLine[1];
+    var dx = Math.cos(angle);
+    var dy = Math.sin(angle);
+    var t = ((x1 - x2) * dx + (y1 - y2) * dy) / (dx * dx + dy * dy);
+    var x = x2 + t * dx;
+    var y = y2 + t * dy;
+    return [x, y];
+}
+exports.closestPointOnLine = closestPointOnLine;
+function getQuadrilateralArea(quadrilateral) {
+    var _a = quadrilateral.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3], x3 = _a[4], y3 = _a[5], x4 = _a[6], y4 = _a[7];
+    var area = Math.abs((x1 * y2 +
+        x2 * y3 +
+        x3 * y4 +
+        x4 * y1 -
+        x2 * y1 -
+        x3 * y2 -
+        x4 * y3 -
+        x1 * y4) /
+        2);
+    return area;
+}
+function getTriangleArea(point1, point2, point3) {
+    return ((point1[0] * (point2[1] - point3[1]) +
+        point2[0] * (point3[1] - point1[1]) +
+        point3[0] * (point1[1] - point2[1])) /
+        2);
+}
+function getPolygonArea(polygon) {
+    var origin = [0, 0];
+    return polygon.reduce(function (sum, point1, i) {
+        var point2 = polygon[(i + 1) % polygon.length];
+        sum += getTriangleArea(origin, point1, point2);
+        return sum;
+    }, 0);
+}
+exports.getPolygonArea = getPolygonArea;
+function getParallelLineSegmentAtDistance(line, distance) {
+    if (!distance)
+        return line;
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var unitVector = getUnitVectorOfLineSegment(line);
+    var _b = distance > 0
+        ? [unitVector[1], -unitVector[0]]
+        : [-unitVector[1], unitVector[0]], xNormal = _b[0], yNormal = _b[1];
+    var length = Math.abs(distance);
+    var point1 = [x1 + xNormal * length, y1 + yNormal * length];
+    var point2 = [x2 + xNormal * length, y2 + yNormal * length];
+    return [point1, point2];
+}
+exports.getParallelLineSegmentAtDistance = getParallelLineSegmentAtDistance;
+function addThicknessToLine(line, thickness) {
+    var offset = thickness / 2;
+    var _a = getParallelLineSegmentAtDistance(line, offset), point1 = _a[0], point2 = _a[1];
+    var _b = getParallelLineSegmentAtDistance(line, -offset), point4 = _b[0], point3 = _b[1];
+    return [point1, point2, point3, point4];
+}
+exports.addThicknessToLine = addThicknessToLine;
+function arePointsWithinProximity(point1, point2, proximity) {
+    var length = getLengthOfLineSegment([point1, point2]);
+    return length <= proximity;
+}
+exports.arePointsWithinProximity = arePointsWithinProximity;
+function isPointInQuadrilateral(quadrilateral, point) {
+    var _a = quadrilateral.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3], x3 = _a[4], y3 = _a[5], x4 = _a[6], y4 = _a[7];
+    var pointX = point[0], pointY = point[1];
+    if (pointX < Math.min(x1, x2, x3, x4) ||
+        pointX > Math.max(x1, x2, x3, x4) ||
+        pointY < Math.min(y1, y2, y3, y4) ||
+        pointY > Math.max(y1, y2, y3, y4)) {
+        return false;
+    }
+    var area = getQuadrilateralArea(quadrilateral);
+    var area1 = getTriangleArea(point, quadrilateral[0], quadrilateral[1]);
+    var area2 = getTriangleArea(point, quadrilateral[1], quadrilateral[2]);
+    var area3 = getTriangleArea(point, quadrilateral[2], quadrilateral[3]);
+    var area4 = getTriangleArea(point, quadrilateral[3], quadrilateral[0]);
+    var compareArea = Math.abs(area1) + Math.abs(area2) + Math.abs(area3) + Math.abs(area4);
+    return Math.abs(Math.round(area) - Math.round(compareArea)) < 2;
+}
+exports.isPointInQuadrilateral = isPointInQuadrilateral;
+function isPointInPolygon(point, polygon) {
+    var ray = [
+        point,
+        [point[0] + Number.MAX_SAFE_INTEGER, point[1]],
+    ];
+    var intersectCount = 0;
+    for (var i = 0; i < polygon.length; i++) {
+        var polygonStart = polygon[i];
+        var polygonEnd = polygon[(i + 1) % polygon.length];
+        if (getLineSegmentsIntersection(ray, [polygonStart, polygonEnd]))
+            intersectCount++;
+    }
+    return intersectCount % 2 === 1;
+}
+exports.isPointInPolygon = isPointInPolygon;
+function getLineSegmentsIntersection(line1, line2) {
+    if (arePointsEqual.apply(void 0, line1) || arePointsEqual.apply(void 0, line2))
+        return null;
+    if (arePointsEqual(line1[0], line2[0]))
+        return null;
+    if (arePointsEqual(line1[0], line2[1]))
+        return null;
+    if (arePointsEqual(line1[1], line2[0]))
+        return null;
+    if (arePointsEqual(line1[1], line2[1]))
+        return null;
+    var _a = line1.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var _b = line2.flat(), x3 = _b[0], y3 = _b[1], x4 = _b[2], y4 = _b[3];
+    var a1 = y2 - y1;
+    var b1 = x1 - x2;
+    var c1 = a1 * x1 + b1 * y1;
+    var a2 = y4 - y3;
+    var b2 = x3 - x4;
+    var c2 = a2 * x3 + b2 * y3;
+    var determinant = a1 * b2 - a2 * b1;
+    if (determinant === 0)
+        return null;
+    var x = (b2 * c1 - b1 * c2) / determinant;
+    var y = (a1 * c2 - a2 * c1) / determinant;
+    if (x < Math.min(x1, x2) ||
+        x > Math.max(x1, x2) ||
+        x < Math.min(x3, x4) ||
+        x > Math.max(x3, x4))
+        return null;
+    if (y < Math.min(y1, y2) ||
+        y > Math.max(y1, y2) ||
+        y < Math.min(y3, y4) ||
+        y > Math.max(y3, y4))
+        return null;
+    return [x, y];
+}
+exports.getLineSegmentsIntersection = getLineSegmentsIntersection;
+function splitLineAtPoint(line, point) {
+    return [
+        [line[0], point],
+        [point, line[1]],
+    ];
+}
+exports.splitLineAtPoint = splitLineAtPoint;
+function splitLineAtPoints(line, points) {
+    if (!points.length)
+        return [line];
+    var orderedPoints = orderCoordinatesOnLineSegment(__spreadArray(__spreadArray([], line, true), points, true));
+    return (orderedPoints[0][0] === line[0][0] ? orderedPoints : orderedPoints.reverse()).reduce(function (output, point, i) {
+        if (!i)
+            return output;
+        else
+            output.push([orderedPoints[i - 1], point]);
+        return output;
+    }, []);
+}
+exports.splitLineAtPoints = splitLineAtPoints;
+function splitLineAtOffset(line, offset) {
+    var splitPoint = getPointAtOffsetOnLineSegment(line, offset);
+    return splitLineAtPoint(line, splitPoint);
+}
+exports.splitLineAtOffset = splitLineAtOffset;
+function orderCoordinatesOnLineSegment(points) {
+    if (!points)
+        return [];
+    if (points[0][0] === points[1][0])
+        return points.sort(function (a, b) { return a[1] - b[1]; });
+    else
+        return points.sort(function (a, b) { return a[0] - b[0]; });
+}
+exports.orderCoordinatesOnLineSegment = orderCoordinatesOnLineSegment;
+function getClosestPointOnLineSegment(line, point) {
+    var _a = line.flat(), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+    var lineVector = [x2 - x1, y2 - y1];
+    var pointVector = [point[0] - x1, point[1] - y1];
+    var lineLength = Math.pow(lineVector[0], 2) + Math.pow(lineVector[1], 2);
+    var dotProduct = (pointVector[0] * lineVector[0] + pointVector[1] * lineVector[1]) /
+        lineLength;
+    if (dotProduct < 0)
+        return [x1, y1];
+    if (dotProduct > 1)
+        return [x2, y2];
+    else
+        return [x1 + dotProduct * lineVector[0], y1 + dotProduct * lineVector[1]];
+}
+function getTangetIntersectionAndOffset(line, point) {
+    var interceptPoint = getClosestPointOnLineSegment(line, point);
+    if (!interceptPoint)
+        return undefined;
+    return {
+        point: interceptPoint,
+        offset: getLengthOfLineSegment([line[0], interceptPoint]),
+    };
+}
+exports.getTangetIntersectionAndOffset = getTangetIntersectionAndOffset;
+function getAllLineIntersections(line, lines) {
+    var lineStr = [JSON.stringify(line[0]), JSON.stringify(line[1])];
+    return lines.reduce(function (output, existingLine, i) {
+        if (existingLine === null)
+            return output;
+        var startStr = JSON.stringify(existingLine[0]);
+        var endStr = JSON.stringify(existingLine[1]);
+        if (lineStr.includes(startStr) || lineStr.includes(endStr))
+            return output;
+        var intersectionPoint = getLineSegmentsIntersection(line, existingLine);
+        if (!intersectionPoint)
+            return output;
+        output.push({ index: i, point: intersectionPoint });
+        return output;
+    }, []);
+}
+exports.getAllLineIntersections = getAllLineIntersections;
+function doLinesOverlap(line1, line2) {
+    var start1 = line1[0];
+    var end1 = line1[0] + line1[1];
+    var start2 = line2[0];
+    var end2 = line2[0] + line2[1];
+    if (start2 < start1 && start1 < end2)
+        return true;
+    if (start2 < end1 && end1 < end2)
+        return true;
+    if (start1 < start2 && start2 < end1 && start1 < end2 && end2 < end1)
+        return true;
+    return false;
+}
+exports.doLinesOverlap = doLinesOverlap;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { IHydratedAttributeArray } from '../../types';
+import type { IElementName, IElementPublic, IRoomBuilderHookProps } from './types';
+import { IModes, IUnits, IElements } from './types';
+import { IThemes } from './themes';
+interface IUseRoomBuilder {
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    [IElements.WALL]?: IHydratedAttributeArray;
+    [IElements.WINDOW]?: IHydratedAttributeArray;
+    [IElements.DOOR]?: IHydratedAttributeArray;
+    [IElements.OPENING]?: IHydratedAttributeArray;
+    selectedElement: IElementPublic | null;
+    reset: () => void;
+    deleteElement: (type: IElementName, index: number) => void;
+    dimensions: {
+        enabled: boolean;
+        handleToggle: (val?: boolean) => void;
+    };
+    angleSnapping: {
+        enabled: boolean;
+        handleToggle: (val?: boolean) => void;
+    };
+    mode: {
+        value: IModes;
+        options: Array<{
+            label: IModes;
+            value: IModes;
+            selected: boolean;
+            handleSelect: () => void;
+        }>;
+        handleChange: (mode: IModes) => void;
+    };
+}
+declare const useRoomBuilder: {
+    (props: IRoomBuilderHookProps): IUseRoomBuilder;
+    themes: typeof IThemes;
+    units: typeof IUnits;
+    modes: typeof IModes;
+};
+export default useRoomBuilder;

package/dist/hooks/useRoomBuilder/index.js

@@ -0,0 +1,303 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var types_1 = require("./types");
+var useConfigurator_1 = __importDefault(require("../useConfigurator"));
+var RoomBuilderState_1 = __importDefault(require("./RoomBuilderState"));
+var constants_1 = require("./constants");
+var themes_1 = __importStar(require("./themes"));
+var useRoomBuilder = function (props) {
+    var _a;
+    var attributesState = (0, useConfigurator_1.default)()[0];
+    var _b = (0, react_1.useState)(types_1.IModes.DRAW), modeValue = _b[0], setMode = _b[1];
+    var _c = (0, react_1.useState)(true), showDimensions = _c[0], setShowDimensions = _c[1];
+    var _d = (0, react_1.useState)(true), angleSnappingEnabled = _d[0], setAngleSnappingEnabled = _d[1];
+    var _e = (0, react_1.useState)(null), selectedElement = _e[0], setSelectedElement = _e[1];
+    var _f = (0, react_1.useState)(null), selectedWallAsset = _f[0], setSelectedWallAsset = _f[1];
+    var canvasRef = (0, react_1.useRef)(null);
+    var selectElementPending = (0, react_1.useRef)(null);
+    var preppedConfig = Object.assign({
+        scale: constants_1.SCALE,
+        unit: types_1.IUnits.FEET,
+        snapProximity: constants_1.SNAP_PROXIMITY,
+        styles: ((_a = props.config) === null || _a === void 0 ? void 0 : _a.theme) && themes_1.default[props.config.theme]
+            ? themes_1.default[props.config.theme]
+            : themes_1.default[themes_1.IThemes.DEFAULT],
+    }, props.config);
+    var roomBuilderRef = (0, react_1.useRef)(new RoomBuilderState_1.default(__assign(__assign({}, props), { config: preppedConfig })));
+    var drawRoom = function () { return roomBuilderRef.current.drawRoom(canvasRef.current); };
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (!selectedWallAsset &&
+            (attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WALL]]))
+            setSelectedWallAsset(((_a = attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WALL]]) === null || _a === void 0 ? void 0 : _a.values[0].assetId) || null);
+        var attributesDelinked = JSON.parse(JSON.stringify(attributesState));
+        roomBuilderRef.current.setAttributesToState(attributesDelinked);
+        drawRoom();
+    }, [attributesState]);
+    (0, react_1.useEffect)(function () {
+        if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
+            canvasRef.current.addEventListener('mousedown', handleDrawWallStart);
+            canvasRef.current.addEventListener('mousemove', handleDrawWallMouseMove);
+            document.addEventListener('mouseup', handleDrawWallFinish);
+            canvasRef.current.addEventListener('mousemove', handleSelectModeHover);
+            canvasRef.current.addEventListener('mousedown', handleSelectElement);
+            canvasRef.current.addEventListener('mousemove', handleMoveSelectedElement);
+            document.addEventListener('mouseup', handleSetSelectedElement);
+        }
+        return function () {
+            if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
+                canvasRef.current.removeEventListener('mousedown', handleDrawWallStart);
+                canvasRef.current.removeEventListener('mousemove', handleDrawWallMouseMove);
+                document.removeEventListener('mouseup', handleDrawWallFinish);
+                canvasRef.current.removeEventListener('mousemove', handleSelectModeHover);
+                canvasRef.current.removeEventListener('mousedown', handleSelectElement);
+                canvasRef.current.removeEventListener('mousemove', handleMoveSelectedElement);
+                document.removeEventListener('mouseup', handleSetSelectedElement);
+            }
+        };
+    });
+    (0, react_1.useEffect)(function () {
+        roomBuilderRef.current.showDimensions = showDimensions;
+        roomBuilderRef.current.angleSnappingEnabled = angleSnappingEnabled;
+        roomBuilderRef.current.selectedElement = selectedElement
+            ? {
+                type: selectedElement.path[0],
+                index: selectedElement.path[1],
+            }
+            : null;
+        drawRoom();
+    }, [selectedElement, showDimensions, angleSnappingEnabled]);
+    var handleSelectModeHover = function (e) {
+        if (!canvasRef.current)
+            return;
+        if (modeValue !== types_1.IModes.SELECT)
+            return;
+        if (roomBuilderRef.current.activeElement !== null)
+            return;
+        var cursorPoint = [e.offsetX, e.offsetY];
+        roomBuilderRef.current.highlightElementIfInProximity(canvasRef.current, cursorPoint);
+    };
+    var handleSelectElement = function (e) {
+        if (!canvasRef.current)
+            return;
+        if (modeValue !== types_1.IModes.SELECT)
+            return;
+        var cursorPoint = [e.offsetX, e.offsetY];
+        roomBuilderRef.current.selectElementIfInProximity(canvasRef.current, cursorPoint);
+        var element = roomBuilderRef.current.getClickedElement(cursorPoint);
+        if (!element) {
+            if (selectedElement !== null)
+                setSelectedElement(null);
+            return;
+        }
+        if (roomBuilderRef.current.activeElement ||
+            (selectedElement &&
+                JSON.stringify(element.path) !== JSON.stringify(selectedElement.path)))
+            setSelectedElement(null);
+        selectElementPending.current = element;
+    };
+    var handleMoveSelectedElement = function (e) {
+        if (modeValue !== types_1.IModes.SELECT)
+            return;
+        if (!canvasRef.current)
+            return;
+        var point = [e.offsetX, e.offsetY];
+        roomBuilderRef.current.moveActiveElement(canvasRef.current, point);
+        selectElementPending.current = null;
+    };
+    var handleSetSelectedElement = function (e) {
+        var _a;
+        if (modeValue !== types_1.IModes.SELECT)
+            return;
+        if (!canvasRef.current)
+            return;
+        if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            roomBuilderRef.current.cancelMoveActiveElement(canvasRef.current);
+            return;
+        }
+        roomBuilderRef.current.finishMoveActiveElement(canvasRef.current);
+        if (selectElementPending.current) {
+            setSelectedElement(selectElementPending.current);
+            selectElementPending.current = null;
+        }
+    };
+    var handleDrawWallStart = function (e) {
+        if (modeValue !== types_1.IModes.DRAW)
+            return;
+        var cursorPoint = [e.offsetX, e.offsetY];
+        roomBuilderRef.current.startDrawNewWall(cursorPoint);
+    };
+    var handleDrawWallMouseMove = function (e) {
+        if (modeValue !== types_1.IModes.DRAW)
+            return;
+        if (!canvasRef.current)
+            return;
+        var cursorPoint = [e.offsetX, e.offsetY];
+        roomBuilderRef.current.drawNewWall(canvasRef.current, cursorPoint);
+    };
+    var handleDrawWallFinish = function (e) {
+        var _a;
+        if (modeValue !== types_1.IModes.DRAW)
+            return;
+        if (!canvasRef.current)
+            return;
+        if (!selectedWallAsset)
+            return;
+        if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            roomBuilderRef.current.cancelDrawNewWall(canvasRef.current);
+            return;
+        }
+        roomBuilderRef.current.finishDrawNewWall(canvasRef.current, selectedWallAsset);
+    };
+    var prepFeatureAttributeForOutput = function (type, attribute) {
+        if (!attribute)
+            return undefined;
+        var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { add: function (addToWallIndex, offset) {
+                return roomBuilderRef.current.addFeature(type, {
+                    assetId: val.assetId,
+                    length: constants_1.FEATURE_LENGTH,
+                    offset: offset,
+                }, addToWallIndex);
+            } })); });
+        var value = attribute.value.map(function (val, i) { return (__assign(__assign({}, val), { delete: function () { return roomBuilderRef.current.deleteFeature(type, i); } })); });
+        return __assign(__assign({}, attribute), { values: values, value: value });
+    };
+    var prepWallAttributeForOutput = function (attribute) {
+        if (!attribute)
+            return undefined;
+        var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { selected: val.assetId === selectedWallAsset, selectToDraw: function () {
+                setMode(types_1.IModes.DRAW);
+                setSelectedWallAsset(val.assetId);
+            } })); });
+        var value = attribute.value.map(function (val, i) { return (__assign(__assign({}, val), { delete: function () { var _a; return (_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteWall(i); } })); });
+        return __assign(__assign({}, attribute), { values: values, value: value });
+    };
+    var getElementFromAttributeName = function (attributeName) {
+        var elementAttr = Object.entries(props.attributes).find(function (_a) {
+            var _ = _a[0], attrName = _a[1];
+            return attrName === attributeName;
+        });
+        if (!elementAttr)
+            return;
+        return elementAttr[0];
+    };
+    var handleSetMode = function (mode) {
+        if (mode === modeValue)
+            return;
+        drawRoom();
+        setMode(mode);
+        setSelectedElement(null);
+    };
+    var handleReset = function () {
+        var _a;
+        (_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteAll();
+        setSelectedElement(null);
+    };
+    var handleDeleteElement = function (type, index) {
+        var _a;
+        var elementType = type;
+        if (Object.values(props.attributes).includes(type)) {
+            var updatedType = getElementFromAttributeName(type);
+            if (!updatedType)
+                return;
+            elementType = updatedType;
+        }
+        (_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteElement(elementType, index);
+        setSelectedElement(null);
+    };
+    var handleToggleDimensions = function (val) {
+        if (val === undefined)
+            setShowDimensions(!showDimensions);
+        else
+            setShowDimensions(val);
+        setSelectedElement(null);
+    };
+    var handleToggleAngleSnapping = function (val) {
+        if (val === undefined)
+            setAngleSnappingEnabled(!angleSnappingEnabled);
+        else
+            setAngleSnappingEnabled(val);
+        setSelectedElement(null);
+    };
+    return {
+        canvasRef: canvasRef,
+        selectedElement: selectedElement === null
+            ? selectedElement
+            : __assign(__assign({}, selectedElement), { path: [
+                    props.attributes[selectedElement.path[0]],
+                    selectedElement.path[1],
+                ] }),
+        mode: {
+            value: modeValue,
+            options: [types_1.IModes.DRAW, types_1.IModes.SELECT].map(function (el) { return ({
+                value: el,
+                label: el,
+                selected: modeValue === el,
+                handleSelect: function () { return handleSetMode(el); },
+            }); }),
+            handleChange: handleSetMode,
+        },
+        dimensions: {
+            enabled: showDimensions,
+            handleToggle: handleToggleDimensions,
+        },
+        angleSnapping: {
+            enabled: angleSnappingEnabled,
+            handleToggle: handleToggleAngleSnapping,
+        },
+        reset: handleReset,
+        deleteElement: handleDeleteElement,
+        walls: prepWallAttributeForOutput(attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WALL]]),
+        windows: props.attributes[types_1.IElements.WINDOW]
+            ? prepFeatureAttributeForOutput(types_1.IElements.WINDOW, attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WINDOW]])
+            : undefined,
+        doors: props.attributes[types_1.IElements.DOOR]
+            ? prepFeatureAttributeForOutput(types_1.IElements.DOOR, attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.DOOR]])
+            : undefined,
+        openings: props.attributes[types_1.IElements.OPENING]
+            ? prepFeatureAttributeForOutput(types_1.IElements.OPENING, attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.OPENING]])
+            : undefined,
+    };
+};
+useRoomBuilder.themes = themes_1.IThemes;
+useRoomBuilder.units = types_1.IUnits;
+useRoomBuilder.modes = types_1.IModes;
+exports.default = useRoomBuilder;

package/dist/hooks/{useSpaces/validators → useRoomBuilder}/messaging.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorMessages = void 0;
-var constants_1 = require("../constants");
+var constants_1 = require("./constants");
 exports.errorMessages = {
     addWallCollidingWithWall: function () { return 'Wall cannot collide with another wall.'; },
     addWallCollidingWithFeature: function (feature) {