@threekit-tools/treble 0.0.92 → 0.0.94-next-01

package/dist/hooks/useSpaces/dataHandlers.js

@@ -10,13 +10,54 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepAreaForUser = exports.prepLengthForUser = exports.convertAreaUnit = exports.convertLengthUnit = exports.prepAttributesOutgoing = exports.getAttributeDefaults = exports.prepAttributesIncoming = void 0;
+exports.getAttributeData = 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");
 function filterRestConfiguration(configuration, attributeNames) {
-    var keysToFilter = new Set(Object.values(attributeNames));
+    var attributes = __assign({}, attributeNames);
+    delete attributes.wallMode;
+    delete attributes.doorShowSwing;
+    delete attributes.doorOrientation;
+    delete attributes.doorOpeningDirection;
+    var keysToFilter = new Set(Object.values(attributes));
     var filteredConfiguration = Object.entries(configuration).reduce(function (output, _a) {
         var _b;
         var key = _a[0], value = _a[1];
@@ -33,13 +74,13 @@ function prepConnectionIncoming(connection) {
     var _a = connection.split('.'), attributeName = _a[0], indexStr = _a[1];
     return [attributeName, parseInt(indexStr)];
 }
-function prepWallsAndVerticesIncoming(wallsAttribute, config) {
+function prepWallsAndVerticesIncoming(wallsAttribute, config, attributeDefaults) {
     var _a;
     var walls = [];
     var vertices = {};
     var attributeName = config.attributes;
     ((wallsAttribute === null || wallsAttribute === void 0 ? void 0 : wallsAttribute.value) || []).forEach(function (_a, i) {
-        var _b, _c, _d;
+        var _b, _c;
         var assetId = _a.assetId, configuration = _a.configuration;
         var point1 = [
             (configuration === null || configuration === void 0 ? void 0 : configuration[attributeName.wallStartX]) / config.config.scale,
@@ -60,10 +101,11 @@ function prepWallsAndVerticesIncoming(wallsAttribute, config) {
         else
             vertices[point2Str] = [[i, 1]];
         var connections = [];
-        var visible = ((_d = (_c = (_b = configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.WallAttributes.VISIBILITY]) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c[constants_1.SpacesMetadata.VALUE]) !== null && _d !== void 0 ? _d : 'true') === 'true';
+        var modeValue = (_c = (_b = configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.WallAttributes.WALL_MODE]) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c[constants_1.SpacesMetadata.VALUE];
+        var mode = modeValue !== null && modeValue !== void 0 ? modeValue : attributeDefaults.wallMode;
         walls.push({
             assetId: assetId,
-            visible: visible,
+            mode: mode,
             line: [point1, point2],
             path: (0, geometry_1.addThicknessToLine)([point1, point2], config.config.styles.wall.thickness),
             connections: connections,
@@ -81,12 +123,12 @@ function getWallsVaidationConfig(wallsAttribute, config) {
     };
     return validation;
 }
-function prepFeatureIncoming(type, walls, featureAttribute, config) {
+function prepFeatureIncoming(type, walls, featureAttribute, config, attributeDefaults) {
     var _a;
     var attributeName = config.attributes;
     var feature = [];
     (_a = featureAttribute === null || featureAttribute === void 0 ? void 0 : featureAttribute.value) === null || _a === void 0 ? void 0 : _a.forEach(function (_a) {
-        var _b, _c, _d, _e, _f, _g;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var assetId = _a.assetId, configuration = _a.configuration;
         var offset = (configuration === null || configuration === void 0 ? void 0 : configuration[attributeName.featurePositionX]) / config.config.scale;
         var length = (configuration === null || configuration === void 0 ? void 0 : configuration[attributeName.featureLength]) / config.config.scale;
@@ -106,25 +148,23 @@ function prepFeatureIncoming(type, walls, featureAttribute, config) {
             restConfiguration: JSON.stringify(filterRestConfiguration(configuration, config.attributes)),
         };
         if (type === types_1.IElements.DOOR) {
-            element.showSwing =
-                (((_c = (_b = configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.DoorAttributes.SHOW_SWING]) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c[constants_1.SpacesMetadata.VALUE]) || 'true') === 'true';
-            element.orientation =
-                ((_e = (_d = configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.DoorAttributes.ORIENTATION]) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e[constants_1.SpacesMetadata.VALUE]) === constants_1.DoorOrientations.LEFT
-                    ? constants_1.DoorOrientations.LEFT
-                    : constants_1.DoorOrientations.RIGHT;
-            element.openingDirection =
-                ((_g = (_f = configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.DoorAttributes.OPENING_DIRECTION]) === null || _f === void 0 ? void 0 : _f.metadata) === null || _g === void 0 ? void 0 : _g[constants_1.SpacesMetadata.VALUE]) === constants_1.DoorOpeningDirections.INSIDE
-                    ? constants_1.DoorOpeningDirections.INSIDE
-                    : constants_1.DoorOpeningDirections.OUTSIDE;
+            var doorShowSwing = (_d = (_c = (_b = configuration === null || configuration === void 0 ? void 0 : configuration[attributeName.doorShowSwing]) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c[constants_1.SpacesMetadata.VALUE]) !== null && _d !== void 0 ? _d : attributeDefaults.doorShowSwing;
+            var doorOrientation = (_g = (_f = (_e = configuration === null || configuration === void 0 ? void 0 : configuration[attributeName.doorOrientation]) === null || _e === void 0 ? void 0 : _e.metadata) === null || _f === void 0 ? void 0 : _f[constants_1.SpacesMetadata.VALUE]) !== null && _g !== void 0 ? _g : attributeDefaults.doorOrientation;
+            var doorOpeningDirection = (_k = (_j = (_h = configuration === null || configuration === void 0 ? void 0 : configuration[attributeName.doorOpeningDirection]) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j[constants_1.SpacesMetadata.VALUE]) !== null && _k !== void 0 ? _k : attributeDefaults.doorOpeningDirection;
+            Object.assign(element, {
+                showSwing: doorShowSwing,
+                orientation: doorOrientation,
+                openingDirection: doorOpeningDirection,
+            });
         }
         feature.push(element);
     });
     return feature;
 }
-function prepAttributesIncoming(attributes, config) {
+function prepAttributesIncoming(attributes, config, attributeDefaults) {
     var _a;
     var wallsAttribute = attributes[config.attributes[types_1.IElements.WALL]];
-    var wallsAndVertices = prepWallsAndVerticesIncoming(wallsAttribute, config);
+    var wallsAndVertices = prepWallsAndVerticesIncoming(wallsAttribute, config, attributeDefaults);
     var wallsValidation = getWallsVaidationConfig(wallsAttribute, config);
     var featuresList = [
         types_1.IElements.WINDOW,
@@ -132,31 +172,12 @@ function prepAttributesIncoming(attributes, config) {
         types_1.IElements.OPENING,
     ];
     var featuresData = featuresList.reduce(function (output, type) {
-        output[type] = prepFeatureIncoming(type, wallsAndVertices[types_1.IElements.WALL], attributes[config.attributes[type]], config);
+        output[type] = prepFeatureIncoming(type, wallsAndVertices[types_1.IElements.WALL], attributes[config.attributes[type]], config, attributeDefaults);
         return output;
     }, {});
     return __assign(__assign({}, wallsAndVertices), (_a = { validationConfig: wallsValidation }, _a[types_1.IElements.FEATURE] = featuresData, _a));
 }
 exports.prepAttributesIncoming = prepAttributesIncoming;
-function getAttributeDefaults(attributes, config) {
-    return [
-        types_1.IElements.WALL,
-        types_1.IElements.WINDOW,
-        types_1.IElements.DOOR,
-        types_1.IElements.OPENING,
-    ].reduce(function (output, elementName) {
-        var _a;
-        if (!config.attributes[elementName])
-            return output;
-        var attribute = attributes[config.attributes[elementName]];
-        if (!attribute)
-            return output;
-        return Object.assign(output, (_a = {},
-            _a[elementName] = attribute.values[0].assetId,
-            _a));
-    }, {});
-}
-exports.getAttributeDefaults = getAttributeDefaults;
 function prepFeaturesOutgoing(features, config) {
     var attributeName = config.attributes;
     return features.map(function (feature) {
@@ -243,6 +264,10 @@ function prepLengthForUser(value, unit) {
     if (unit === types_1.IUnits.FEET) {
         var feet = Math.floor(value);
         var inches = 12 * (value % 1);
+        if (inches > 11.95) {
+            feet += 1;
+            inches = 0;
+        }
         return "".concat(feet).concat(constants_1.UNIT_LABELS[types_1.IUnits.FEET], " ").concat(inches.toFixed(1)).concat(constants_1.UNIT_LABELS[types_1.IUnits.INCH]);
     }
     return "".concat(value.toFixed(2), " ").concat(constants_1.UNIT_LABELS[unit]);
@@ -252,3 +277,135 @@ function prepAreaForUser(value, unit) {
     return "".concat(value.toFixed(2), " sq-").concat(constants_1.UNIT_LABELS[unit]);
 }
 exports.prepAreaForUser = prepAreaForUser;
+function getAttributeData(configurator, attributeNames) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    return __awaiter(this, void 0, void 0, function () {
+        var attributes, wallAssetId, doorAssetId, windowAssetId, openingAssetId, i, attr, wallConfigurator, doorConfigurator, wallModeAttr, doorOrientationAttr, doorOpeningDirectionAttr, doorShowSwingAttr, doorAttributes, i, attr, options, optionsMap, wallModeOptions, wallModes, defaults;
+        var _p, _q, _r, _s, _t;
+        return __generator(this, function (_u) {
+            switch (_u.label) {
+                case 0:
+                    attributes = configurator.getDisplayAttributes();
+                    wallAssetId = undefined;
+                    doorAssetId = undefined;
+                    windowAssetId = undefined;
+                    openingAssetId = undefined;
+                    for (i = 0; i < attributes.length &&
+                        (!wallAssetId || !doorAssetId || !windowAssetId || !openingAssetId); i++) {
+                        attr = attributes[i];
+                        switch (attr.name) {
+                            case attributeNames[types_1.IElements.WALL]:
+                                wallAssetId = attr.values[0].assetId;
+                                break;
+                            case attributeNames[types_1.IElements.DOOR]:
+                                doorAssetId = attr.values[0].assetId;
+                                break;
+                            case attributeNames[types_1.IElements.WINDOW]:
+                                windowAssetId = attr.values[0].assetId;
+                                break;
+                            case attributeNames[types_1.IElements.OPENING]:
+                                openingAssetId = attr.values[0].assetId;
+                                break;
+                        }
+                    }
+                    if (!wallAssetId || !doorAssetId || !windowAssetId || !openingAssetId)
+                        throw new Error('Missing assetId: ' +
+                            JSON.stringify({
+                                wallAssetId: wallAssetId,
+                                doorAssetId: doorAssetId,
+                                windowAssetId: windowAssetId,
+                                openingAssetId: openingAssetId,
+                            }));
+                    return [4, configurator.setConfiguration((_p = {},
+                            _p[attributeNames[types_1.IElements.WALL]] = { assetId: wallAssetId },
+                            _p[attributeNames[types_1.IElements.DOOR]] = { assetId: doorAssetId },
+                            _p))];
+                case 1:
+                    _u.sent();
+                    wallConfigurator = configurator.getNestedConfigurator(attributeNames[types_1.IElements.WALL], 0);
+                    doorConfigurator = configurator.getNestedConfigurator(attributeNames[types_1.IElements.DOOR], 0);
+                    wallModeAttr = wallConfigurator === null || wallConfigurator === void 0 ? void 0 : wallConfigurator.getDisplayAttributes().find(function (attr) { return attr.name === attributeNames.wallMode; });
+                    doorOrientationAttr = undefined;
+                    doorOpeningDirectionAttr = undefined;
+                    doorShowSwingAttr = undefined;
+                    doorAttributes = (_a = doorConfigurator === null || doorConfigurator === void 0 ? void 0 : doorConfigurator.getDisplayAttributes()) !== null && _a !== void 0 ? _a : [];
+                    for (i = 0; i < doorAttributes.length &&
+                        (!doorOrientationAttr || !doorOpeningDirectionAttr || !doorShowSwingAttr); i++) {
+                        attr = doorAttributes[i];
+                        switch (doorAttributes[i].name) {
+                            case attributeNames.doorOrientation:
+                                doorOrientationAttr = attr;
+                                break;
+                            case attributeNames.doorOpeningDirection:
+                                doorOpeningDirectionAttr = attr;
+                                break;
+                            case attributeNames.doorShowSwing:
+                                doorShowSwingAttr = attr;
+                                break;
+                        }
+                    }
+                    options = {
+                        doorShowSwing: (_q = {},
+                            _q[constants_1.DoorShowSwing.SHOW] = (_b = doorShowSwingAttr === null || doorShowSwingAttr === void 0 ? void 0 : doorShowSwingAttr.values.find(function (val) { return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.DoorShowSwing.SHOW; })) === null || _b === void 0 ? void 0 : _b.assetId,
+                            _q[constants_1.DoorShowSwing.HIDE] = (_c = doorShowSwingAttr === null || doorShowSwingAttr === void 0 ? void 0 : doorShowSwingAttr.values.find(function (val) { return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.DoorShowSwing.HIDE; })) === null || _c === void 0 ? void 0 : _c.assetId,
+                            _q),
+                        doorOrientation: (_r = {},
+                            _r[constants_1.DoorOrientations.LEFT] = (_d = doorOrientationAttr === null || doorOrientationAttr === void 0 ? void 0 : doorOrientationAttr.values.find(function (val) { return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.DoorOrientations.LEFT; })) === null || _d === void 0 ? void 0 : _d.assetId,
+                            _r[constants_1.DoorOrientations.RIGHT] = (_e = doorOrientationAttr === null || doorOrientationAttr === void 0 ? void 0 : doorOrientationAttr.values.find(function (val) { return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.DoorOrientations.RIGHT; })) === null || _e === void 0 ? void 0 : _e.assetId,
+                            _r),
+                        doorOpeningDirection: (_s = {},
+                            _s[constants_1.DoorOpeningDirections.INSIDE] = (_f = doorOpeningDirectionAttr === null || doorOpeningDirectionAttr === void 0 ? void 0 : doorOpeningDirectionAttr.values.find(function (val) {
+                                return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.DoorOpeningDirections.INSIDE;
+                            })) === null || _f === void 0 ? void 0 : _f.assetId,
+                            _s[constants_1.DoorOpeningDirections.OUTSIDE] = (_g = doorOpeningDirectionAttr === null || doorOpeningDirectionAttr === void 0 ? void 0 : doorOpeningDirectionAttr.values.find(function (val) {
+                                return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.DoorOpeningDirections.OUTSIDE;
+                            })) === null || _g === void 0 ? void 0 : _g.assetId,
+                            _s),
+                    };
+                    optionsMap = Object.entries(options).reduce(function (output, _a) {
+                        var _b;
+                        var attr = _a[0], valuesObj = _a[1];
+                        return Object.assign(output, (_b = {},
+                            _b[attr] = Object.entries(valuesObj).reduce(function (result, _a) {
+                                var _b;
+                                var val = _a[0], key = _a[1];
+                                return Object.assign(result, (_b = {}, _b[key] = val, _b));
+                            }, {}),
+                            _b));
+                    }, {});
+                    wallModeOptions = [
+                        {
+                            value: constants_1.WallModes.WALL,
+                            assetId: (_h = wallModeAttr === null || wallModeAttr === void 0 ? void 0 : wallModeAttr.values.find(function (val) { return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.WallModes.WALL; })) === null || _h === void 0 ? void 0 : _h.assetId,
+                        },
+                        {
+                            value: constants_1.WallModes.BOUNDARY,
+                            assetId: (_j = wallModeAttr === null || wallModeAttr === void 0 ? void 0 : wallModeAttr.values.find(function (val) { return val.metadata[constants_1.SpacesMetadata.VALUE] === constants_1.WallModes.BOUNDARY; })) === null || _j === void 0 ? void 0 : _j.assetId,
+                        },
+                    ];
+                    wallModes = {
+                        options: wallModeOptions.map(function (_a) {
+                            var value = _a.value;
+                            return value;
+                        }),
+                        assetIds: wallModeOptions.reduce(function (output, mode) {
+                            var _a;
+                            return Object.assign(output, (_a = {}, _a[mode.value] = mode.assetId, _a));
+                        }, {}),
+                        value: (_k = wallModeOptions.find(function (mode) { return mode.assetId === (wallModeAttr === null || wallModeAttr === void 0 ? void 0 : wallModeAttr.defaultValue.assetId); })) === null || _k === void 0 ? void 0 : _k.value,
+                    };
+                    defaults = (_t = {},
+                        _t[types_1.IElements.WALL] = wallAssetId,
+                        _t[types_1.IElements.DOOR] = doorAssetId,
+                        _t[types_1.IElements.WINDOW] = windowAssetId,
+                        _t[types_1.IElements.OPENING] = openingAssetId,
+                        _t.doorShowSwing = optionsMap.doorShowSwing[(_l = doorShowSwingAttr === null || doorShowSwingAttr === void 0 ? void 0 : doorShowSwingAttr.values.find(function (val) { return val.assetId === (doorShowSwingAttr === null || doorShowSwingAttr === void 0 ? void 0 : doorShowSwingAttr.defaultValue.assetId); })) === null || _l === void 0 ? void 0 : _l.assetId],
+                        _t.doorOrientation = optionsMap.doorOrientation[(_m = doorOrientationAttr === null || doorOrientationAttr === void 0 ? void 0 : doorOrientationAttr.values.find(function (val) { return val.assetId === (doorOrientationAttr === null || doorOrientationAttr === void 0 ? void 0 : doorOrientationAttr.defaultValue.assetId); })) === null || _m === void 0 ? void 0 : _m.assetId],
+                        _t.doorOpeningDirection = optionsMap.doorOpeningDirection[(_o = doorOpeningDirectionAttr === null || doorOpeningDirectionAttr === void 0 ? void 0 : doorOpeningDirectionAttr.values.find(function (val) { return val.assetId === (doorOpeningDirectionAttr === null || doorOpeningDirectionAttr === void 0 ? void 0 : doorOpeningDirectionAttr.defaultValue.assetId); })) === null || _o === void 0 ? void 0 : _o.assetId],
+                        _t);
+                    return [2, { defaults: defaults, wallModes: wallModes }];
+            }
+        });
+    });
+}
+exports.getAttributeData = getAttributeData;

package/dist/hooks/useSpaces/draw/drawDoors.js

@@ -27,7 +27,7 @@ function drawDoor(canvas, wall, offset, length, showSwing, openingDirection, ori
     ctx.beginPath();
     ctx.strokeStyle = stroke || fill;
     ctx.lineWidth = 2;
-    var swingRatio = showSwing ? 2 : 48;
+    var swingRatio = showSwing === constants_1.DoorShowSwing.SHOW ? 2 : 48;
     if (openingDirection === constants_1.DoorOpeningDirections.INSIDE) {
         if (orientation === constants_1.DoorOrientations.LEFT) {
             ctx.moveTo.apply(ctx, points[0]);

package/dist/hooks/useSpaces/draw/drawGrid.d.ts

@@ -1,3 +1,3 @@
-import { IGridToDraw, IStylesGrid } from '../types';
+import type { IGridToDraw, IStylesGrid } from '../types';
 declare function drawGrid(canvas: HTMLCanvasElement, grid: IGridToDraw, styles: IStylesGrid): void;
 export default drawGrid;

package/dist/hooks/useSpaces/draw/drawGrid.js

@@ -4,10 +4,13 @@ function drawGrid(canvas, grid, styles) {
     var ctx = canvas.getContext('2d');
     if (!ctx)
         return;
-    var unitLength = grid.unitLength, offset = grid.offset, subdivisions = grid.subdivisions;
+    var unitLength = grid.unitLength, subdivisions = grid.subdivisions;
     var showSubdivisions = styles.showSubdivisions &&
         unitLength / subdivisions > styles.subdivisionThreshold;
     var length = showSubdivisions ? unitLength / subdivisions : unitLength;
+    var offset = showSubdivisions
+        ? [grid.offset[0] % length, grid.offset[1] % length]
+        : grid.offset;
     ctx.strokeStyle = styles.lineColor;
     var numHorizontalLines = Math.ceil(canvas.height / length) +
         1 * (showSubdivisions ? subdivisions : 1);

package/dist/hooks/useSpaces/draw/drawWalls.d.ts

@@ -1,7 +1,8 @@
 import { IWall, ICoordinatesLine, ISpacesStyles, IStylesWall, IElementStyleModes } from '../types';
-export interface IWallToDraw extends Pick<IWall, 'line' | 'path' | 'visible'> {
+import { WallModes } from '../constants';
+export interface IWallToDraw extends Pick<IWall, 'line' | 'path' | 'mode'> {
 }
-export declare function drawNewWall(canvas: HTMLCanvasElement, line: ICoordinatesLine, styles: ISpacesStyles, mode?: IElementStyleModes.ERROR): void;
+export declare function drawNewWall(canvas: HTMLCanvasElement, line: ICoordinatesLine, wallMode: WallModes, styles: ISpacesStyles, mode?: IElementStyleModes.ERROR): void;
 export declare function drawWalls(canvas: HTMLCanvasElement, walls: Array<IWallToDraw>, selections: {
     active: Array<number>;
     highlighted: Array<number>;

package/dist/hooks/useSpaces/draw/drawWalls.js

@@ -4,7 +4,8 @@ exports.drawWalls = exports.drawNewWall = void 0;
 var types_1 = require("../types");
 var geometry_1 = require("../geometry");
 var drawVertices_1 = require("./drawVertices");
-function drawInvisibleWall(canvas, wall, style, mode) {
+var constants_1 = require("../constants");
+function drawBoundary(canvas, wall, style, mode) {
     var ctx = canvas.getContext('2d');
     if (!ctx)
         return;
@@ -49,8 +50,9 @@ function drawWall(canvas, wall, style, mode) {
     if (style.stroke && style.strokeWidth)
         ctx.stroke();
 }
-function drawNewWall(canvas, line, styles, mode) {
-    drawWall(canvas, {
+function drawNewWall(canvas, line, wallMode, styles, mode) {
+    var draw = wallMode === constants_1.WallModes.WALL ? drawWall : drawBoundary;
+    draw(canvas, {
         line: line,
         path: (0, geometry_1.addThicknessToLine)(line, styles.wall.thickness),
     }, styles.wall, mode !== null && mode !== void 0 ? mode : types_1.IElementStyleModes.ACTIVE);
@@ -80,7 +82,7 @@ function drawWalls(canvas, walls, selections, styles) {
     wallsMap.forEach(function (_a) {
         var mode = _a[0], wallIndexes = _a[1];
         return wallIndexes.forEach(function (index) {
-            var draw = walls[index].visible ? drawWall : drawInvisibleWall;
+            var draw = walls[index].mode === constants_1.WallModes.WALL ? drawWall : drawBoundary;
             draw(canvas, walls[index], styles, mode);
         });
     });

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

@@ -2,9 +2,11 @@ import React from 'react';
 import type { IHydratedAttributeArray } from '../../types';
 import { ICoordinate2D, IDimensionOptions, IElementName, IElementPublic, ISpacesHookProps } from './types';
 import { IModes, IUnits, IElements } from './types';
+import { WallModes } from './constants';
 import { IThemes } from './themes';
 import SpacesLayout from './SpacesLayout';
 interface IUseSpaces {
+    hasLoaded: boolean;
     draw: () => void;
     canvasRef: React.RefObject<HTMLCanvasElement>;
     [IElements.WALL]?: IHydratedAttributeArray;
@@ -66,6 +68,16 @@ interface IUseSpaces {
         }>;
         handleChange: (mode: IModes) => void;
     };
+    wallMode: {
+        value: WallModes;
+        options: Array<{
+            label: string;
+            value: WallModes;
+            selected: boolean;
+            handleSelect: () => void;
+        }>;
+        handleChange: (wallMode: WallModes) => void;
+    };
     layouts: Array<{
         label: string;
         loops: Array<ICoordinate2D[]>;
@@ -77,6 +89,7 @@ declare const useSpaces: {
     themes: typeof IThemes;
     units: typeof IUnits;
     modes: typeof IModes;
+    wallModes: typeof WallModes;
     LayoutIcon: typeof SpacesLayout;
 };
 export default useSpaces;