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

package/dist/hooks/useSpaces/index.js

@@ -10,28 +10,41 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } };
+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(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 };
@@ -41,19 +54,27 @@ var react_1 = require("react");
 var types_1 = require("./types");
 var types_2 = require("./types");
 var useConfigurator_1 = __importDefault(require("../useConfigurator"));
-var SpacesState_1 = __importDefault(require("./SpacesState"));
 var constants_1 = require("./constants");
-var themes_1 = __importStar(require("./themes"));
+var themes_1 = require("./themes");
 var SpacesLayout_1 = __importDefault(require("./SpacesLayout"));
 var store_1 = require("../../store");
 var spaces_1 = require("../../store/spaces");
 var useThreekitInitStatus_1 = __importDefault(require("../useThreekitInitStatus"));
+var getLocalTouchPoint = function (touch, rect) {
+    if (touch.clientY < rect.top ||
+        rect.bottom < touch.clientY ||
+        touch.clientX < rect.left ||
+        rect.right < touch.clientX)
+        return undefined;
+    return [touch.clientX - rect.left, touch.clientY - rect.top];
+};
 var useSpaces = function (props) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     var attributesState = (0, useConfigurator_1.default)()[0];
     var hasLoaded = (0, useThreekitInitStatus_1.default)();
     var dispatch = (0, store_1.useThreekitDispatch)();
     var layouts = (0, store_1.useThreekitSelector)(spaces_1.getLayouts);
+    var hasInitialized = (0, store_1.useThreekitSelector)(spaces_1.getInitialized);
     var zoom = (0, store_1.useThreekitSelector)(spaces_1.getZoom);
     var unit = (0, store_1.useThreekitSelector)(spaces_1.getUnit);
     var translation = (0, store_1.useThreekitSelector)(spaces_1.getTranslation);
@@ -62,131 +83,176 @@ var useSpaces = function (props) {
     var angleSnappingEnabled = (0, store_1.useThreekitSelector)(spaces_1.getAngleSnappingEnabled);
     var guideSnappingEnabled = (0, store_1.useThreekitSelector)(spaces_1.getGuideSnappingEnabled);
     var gridSnappingEnabled = (0, store_1.useThreekitSelector)(spaces_1.getGridSnappingEnabled);
-    var _b = (0, react_1.useState)(null), selectedElement = _b[0], setSelectedElement = _b[1];
+    var wallMode = (0, store_1.useThreekitSelector)(spaces_1.getWallMode);
+    var _f = (0, react_1.useState)(null), selectedElement = _f[0], setSelectedElement = _f[1];
+    var _g = (0, react_1.useState)(false), pendingStatus = _g[0], setPendingStatus = _g[1];
     var canvasRef = (0, react_1.useRef)(null);
     var selectElementPending = (0, react_1.useRef)(null);
     var translationAnchorRef = (0, react_1.useRef)(null);
-    var preppedConfig = Object.assign({
-        scale: constants_1.SCALE,
-        unit: types_2.IUnits.FEET,
-        snapProximity: constants_1.SNAP_PROXIMITY,
-        zoomDefault: zoom || constants_1.ZOOM_DEFAULT,
-        translateDefault: translation || constants_1.TRANSLATE_DEFAULT,
-        disableGuides: false,
-        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 prevStateRef = (0, react_1.useRef)('');
     var attributeNames = Object.assign(constants_1.ATTRIBUTE_NAME_DEFAULTS, props.attributes);
-    var spacesRef = (0, react_1.useRef)(new SpacesState_1.default(__assign(__assign({}, props), { config: preppedConfig, attributes: attributeNames })));
-    var drawSpaces = function () { return spacesRef.current.drawSpaces(canvasRef.current); };
-    (0, react_1.useEffect)(function () {
-        var attributesDelinked = JSON.parse(JSON.stringify(attributesState));
-        spacesRef.current.setAttributesToState(attributesDelinked);
-        drawSpaces();
-    }, [attributesState]);
+    var spacesRef = (0, react_1.useRef)(null);
+    var drawSpaces = function () { var _a; return (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.drawSpaces(canvasRef.current); };
     (0, react_1.useEffect)(function () {
-        var _a;
-        var guidesEnabled = !(((_a = props.config) === null || _a === void 0 ? void 0 : _a.disableGuides) || false);
-        dispatch((0, spaces_1.setGuideSnappingEnabled)(guidesEnabled));
-        spacesRef.current.guideSnappingEnabled = guidesEnabled;
-    }, []);
+        if (!hasLoaded)
+            return;
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var parameters, _a;
+            var _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        parameters = props.config
+                            ? Object.assign({}, props.config.unit ? { unit: props.config.unit } : undefined, props.config.showDimensions
+                                ? { showDimensions: props.config.showDimensions }
+                                : undefined, 'zoomDefault' in props.config
+                                ? { zoomDefault: props.config.zoomDefault }
+                                : undefined, props.config.translateDefault
+                                ? { translateDefault: props.config.translateDefault }
+                                : undefined, 'enableAngleSnapping' in props.config
+                                ? { enableAngleSnapping: props.config.enableAngleSnapping }
+                                : undefined, 'enableGridSnapping' in props.config
+                                ? { enableGridSnapping: props.config.enableGridSnapping }
+                                : undefined, 'enableGuideSnapping' in props.config
+                                ? { enableGridSnapping: props.config.enableGuideSnapping }
+                                : undefined)
+                            : {};
+                        _a = spacesRef;
+                        return [4, dispatch((0, spaces_1.initSpaces)({
+                                parameters: __assign(__assign({}, parameters), { theme: (_b = props.config) === null || _b === void 0 ? void 0 : _b.theme }),
+                                layoutIds: props.layouts || [],
+                                attributeNames: attributeNames,
+                                canvasDimensions: canvasRef.current
+                                    ? [canvasRef.current.width, canvasRef.current.height]
+                                    : undefined,
+                                setPendingStatus: setPendingStatus,
+                            }))];
+                    case 1:
+                        _a.current = _c.sent();
+                        drawSpaces();
+                        return [2];
+                }
+            });
+        }); })();
+    }, [hasLoaded]);
+    if (spacesRef.current) {
+        var attributesDelinked = void 0;
+        if (JSON.stringify(attributesState) !== prevStateRef.current) {
+            prevStateRef.current = JSON.stringify(attributesState);
+            attributesDelinked = JSON.parse(JSON.stringify(attributesState));
+        }
+        (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.sync({
+            attributesState: attributesDelinked,
+            canvasDimensions: canvasRef.current
+                ? [canvasRef.current.width, canvasRef.current.height]
+                : undefined,
+            angleSnappingEnabled: angleSnappingEnabled,
+            gridSnappingEnabled: gridSnappingEnabled,
+            guideSnappingEnabled: guideSnappingEnabled,
+            showDimensions: showDimensions,
+            unit: unit,
+            zoom: spacesRef.current.zoom !== zoom ? zoom : undefined,
+            translate: translation,
+            wallMode: {
+                value: wallMode.value,
+                assetId: wallMode.assetId,
+            },
+            selectedElement: selectedElement
+                ? {
+                    type: selectedElement.path[0],
+                    index: selectedElement.path[1],
+                }
+                : null,
+        });
+    }
     (0, react_1.useEffect)(function () {
-        var _a;
-        if (zoom &&
-            ((_a = props.config) === null || _a === void 0 ? void 0 : _a.zoomDefault) &&
-            props.config.zoomDefault >= spacesRef.current.zoomMin &&
-            spacesRef.current.zoomMax >= props.config.zoomDefault)
-            updateZoom(props.config.zoomDefault);
-        updateUnit(preppedConfig.unit);
-    }, []);
+        if (!canvasRef.current)
+            return;
+        if (pendingStatus)
+            canvasRef.current.style.cursor = 'progress';
+        else
+            canvasRef.current.style.cursor = 'default';
+    }, [pendingStatus, canvasRef.current]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
-            spacesRef.current.canvasDimensions = [
-                canvasRef.current.width,
-                canvasRef.current.height,
-            ];
+        if (pendingStatus)
+            return;
+        if (canvasRef.current) {
             canvasRef.current.addEventListener('mousedown', handleDrawWallStart);
+            canvasRef.current.addEventListener('touchstart', handleDrawWallStart);
             canvasRef.current.addEventListener('mousemove', handleDrawWallMouseMove);
+            canvasRef.current.addEventListener('touchmove', handleDrawWallMouseMove);
             document.addEventListener('mouseup', handleDrawWallFinish);
+            document.addEventListener('touchend', handleDrawWallFinish);
             canvasRef.current.addEventListener('mousemove', handleHover);
             canvasRef.current.addEventListener('mousedown', handleSelectElement);
+            canvasRef.current.addEventListener('touchstart', handleSelectElement);
             canvasRef.current.addEventListener('mousemove', handleMoveSelectedElement);
-            if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled))
+            canvasRef.current.addEventListener('touchmove', handleMoveSelectedElement);
+            if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled)) {
                 canvasRef.current.addEventListener('mousemove', handleMoveCanvas);
-            document.addEventListener('mouseup', handleSetSelectedElement);
+                canvasRef.current.addEventListener('touchmove', handleMoveCanvas);
+            }
+            document.addEventListener('mouseup', handleFinishMove);
+            document.addEventListener('touchend', handleFinishMove);
             if (!((_b = props.config) === null || _b === void 0 ? void 0 : _b.zoomDisabled))
                 canvasRef.current.addEventListener('wheel', handleScrollToZoom);
         }
         return function () {
             var _a, _b;
-            if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
+            if (canvasRef.current) {
                 canvasRef.current.removeEventListener('mousedown', handleDrawWallStart);
+                canvasRef.current.removeEventListener('touchstart', handleDrawWallStart);
                 canvasRef.current.removeEventListener('mousemove', handleDrawWallMouseMove);
+                canvasRef.current.removeEventListener('touchmove', handleDrawWallMouseMove);
                 document.removeEventListener('mouseup', handleDrawWallFinish);
+                document.removeEventListener('touchend', handleDrawWallFinish);
                 canvasRef.current.removeEventListener('mousemove', handleHover);
                 canvasRef.current.removeEventListener('mousedown', handleSelectElement);
+                canvasRef.current.removeEventListener('touchstart', handleSelectElement);
                 canvasRef.current.removeEventListener('mousemove', handleMoveSelectedElement);
-                if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled))
+                canvasRef.current.removeEventListener('touchmove', handleMoveSelectedElement);
+                if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled)) {
                     canvasRef.current.removeEventListener('mousemove', handleMoveCanvas);
-                document.removeEventListener('mouseup', handleSetSelectedElement);
+                    canvasRef.current.removeEventListener('touchmove', handleMoveCanvas);
+                }
+                document.removeEventListener('mouseup', handleFinishMove);
+                document.removeEventListener('touchend', handleFinishMove);
                 if (!((_b = props.config) === null || _b === void 0 ? void 0 : _b.zoomDisabled))
                     canvasRef.current.removeEventListener('wheel', handleScrollToZoom);
             }
         };
     });
     (0, react_1.useEffect)(function () {
-        spacesRef.current.showDimensions = showDimensions;
-        spacesRef.current.angleSnappingEnabled = angleSnappingEnabled;
-        spacesRef.current.guideSnappingEnabled = guideSnappingEnabled;
-        spacesRef.current.gridSnappingEnabled = gridSnappingEnabled;
-        spacesRef.current.selectedElement = selectedElement
-            ? {
-                type: selectedElement.path[0],
-                index: selectedElement.path[1],
-            }
-            : null;
-        drawSpaces();
-    }, [
-        selectedElement,
-        showDimensions,
-        angleSnappingEnabled,
-        guideSnappingEnabled,
-        gridSnappingEnabled,
-    ]);
-    (0, react_1.useEffect)(function () {
-        if (!hasLoaded)
-            return;
-        var layoutIds = props.layouts || [];
-        dispatch((0, spaces_1.hydrateLayouts)(layoutIds, {
-            walls: attributeNames[types_2.IElements.WALL],
-            startX: attributeNames.wallStartX,
-            startZ: attributeNames.wallStartZ,
-            endX: attributeNames.wallEndX,
-            endZ: attributeNames.wallEndZ,
-        }));
-    }, [hasLoaded, JSON.stringify(props.layouts)]);
+        if (hasInitialized)
+            drawSpaces();
+    });
     var updateZoom = function (value) {
+        if (!spacesRef.current)
+            return;
+        var prevZoom = spacesRef.current.zoom;
         spacesRef.current.zoom = value;
-        if (!spacesRef.current.zoom)
+        if (prevZoom === spacesRef.current.zoom)
             return;
         dispatch((0, spaces_1.setZoom)(spacesRef.current.zoom));
+        drawSpaces();
     };
     var updateUnit = function (unit) {
         if (!spacesRef.current)
             return;
         spacesRef.current.unit = unit;
-        if (!spacesRef.current.unit)
-            return;
         dispatch((0, spaces_1.setUnit)(spacesRef.current.unit));
-        spacesRef.current.drawSpaces(canvasRef.current);
     };
     var handleRecenter = function (zoomToFit) {
+        if (!spacesRef.current)
+            return;
         spacesRef.current.centerSpace(canvasRef.current, zoomToFit);
         dispatch((0, spaces_1.setZoom)(spacesRef.current.zoom));
+        dispatch((0, spaces_1.setTranslation)(spacesRef.current.translate));
     };
     var handleSelectModeHover = function (canvas, cursorPoint) {
+        if (!spacesRef.current)
+            return;
         if (spacesRef.current.activeElement !== null)
             return;
         if (translationAnchorRef.current)
@@ -195,11 +261,21 @@ var useSpaces = function (props) {
     };
     var handleSelectElement = function (e) {
         var _a;
+        if (!spacesRef.current)
+            return;
         if (!canvasRef.current)
             return;
         if (modeValue !== types_2.IModes.SELECT)
             return;
-        var cursorPoint = [e.offsetX, e.offsetY];
+        var cursorPoint;
+        if ('offsetX' in e && 'offsetY' in e)
+            cursorPoint = [e.offsetX, e.offsetY];
+        else {
+            var localTouchPoint = getLocalTouchPoint(e.touches[0], canvasRef.current.getBoundingClientRect());
+            if (!localTouchPoint)
+                return;
+            cursorPoint = localTouchPoint;
+        }
         spacesRef.current.selectElementIfInProximity(canvasRef.current, cursorPoint);
         var element = spacesRef.current.getElementUiAtPoint(cursorPoint);
         if (!element) {
@@ -216,30 +292,57 @@ var useSpaces = function (props) {
         selectElementPending.current = element;
     };
     var handleMoveSelectedElement = function (e) {
+        if (!spacesRef.current)
+            return;
         if (modeValue !== types_2.IModes.SELECT)
             return;
         if (!canvasRef.current)
             return;
-        var point = [e.offsetX, e.offsetY];
+        var point;
+        if ('offsetX' in e && 'offsetY' in e)
+            point = [e.offsetX, e.offsetY];
+        else {
+            var localTouchPoint = getLocalTouchPoint(e.touches[0], canvasRef.current.getBoundingClientRect());
+            if (!localTouchPoint)
+                return;
+            point = localTouchPoint;
+        }
         spacesRef.current.moveActiveElement(canvasRef.current, point);
         selectElementPending.current = null;
     };
     var handleMoveCanvas = function (e) {
+        if (!spacesRef.current)
+            return;
         if (modeValue !== types_2.IModes.SELECT)
             return;
         if (!canvasRef.current)
             return;
         if (spacesRef.current.selectedElement || !translationAnchorRef.current)
             return;
-        var delta = [
-            e.offsetX - translationAnchorRef.current[0],
-            e.offsetY - translationAnchorRef.current[1],
+        var point;
+        if ('offsetX' in e && 'offsetY' in e)
+            point = [e.offsetX, e.offsetY];
+        else {
+            var localTouchPoint = getLocalTouchPoint(e.touches[0], canvasRef.current.getBoundingClientRect());
+            if (!localTouchPoint)
+                return;
+            point = localTouchPoint;
+        }
+        spacesRef.current.translate = [
+            spacesRef.current.translate[0] +
+                point[0] -
+                translationAnchorRef.current[0],
+            spacesRef.current.translate[1] +
+                point[1] -
+                translationAnchorRef.current[1],
         ];
-        handleChangeTranslate(delta);
-        translationAnchorRef.current = [e.offsetX, e.offsetY];
+        translationAnchorRef.current = point;
+        drawSpaces();
     };
-    var handleSetSelectedElement = function (e) {
+    var handleFinishMove = function (e) {
         var _a;
+        if (!spacesRef.current)
+            return;
         if (modeValue !== types_2.IModes.SELECT)
             return;
         if (!canvasRef.current)
@@ -254,34 +357,57 @@ var useSpaces = function (props) {
             selectElementPending.current = null;
             return;
         }
-        if (translationAnchorRef.current)
+        if (translationAnchorRef.current) {
             translationAnchorRef.current = null;
+            dispatch((0, spaces_1.setTranslation)(spacesRef.current.translate));
+        }
     };
     var handleDrawModeHover = function (canvas, cursorPoint) {
+        if (!spacesRef.current)
+            return;
         if (spacesRef.current.isDrawWallActive)
             return;
         spacesRef.current.showGuideAtPoint(canvas, cursorPoint);
     };
     var handleDrawWallStart = function (e) {
+        if (!spacesRef.current || !canvasRef.current)
+            return;
         if (modeValue !== types_2.IModes.DRAW)
             return;
-        var cursorPoint = [e.offsetX, e.offsetY];
-        spacesRef.current.startDrawNewWall(cursorPoint);
+        var startPoint;
+        if ('offsetX' in e && 'offsetY' in e)
+            startPoint = [e.offsetX, e.offsetY];
+        else {
+            var localTouchPoint = getLocalTouchPoint(e.touches[0], canvasRef.current.getBoundingClientRect());
+            if (!localTouchPoint)
+                return;
+            startPoint = localTouchPoint;
+        }
+        spacesRef.current.startDrawNewWall(startPoint);
     };
     var handleDrawWallMouseMove = function (e) {
+        if (!spacesRef.current || !canvasRef.current)
+            return;
         if (modeValue !== types_2.IModes.DRAW)
             return;
-        if (!canvasRef.current)
+        if (!spacesRef.current.isDrawWallActive)
             return;
-        var cursorPoint = [e.offsetX, e.offsetY];
-        if (spacesRef.current.isDrawWallActive)
-            spacesRef.current.drawNewWall(canvasRef.current, cursorPoint);
+        var point;
+        if ('offsetX' in e && 'offsetY' in e)
+            point = [e.offsetX, e.offsetY];
+        else {
+            var localTouchPoint = getLocalTouchPoint(e.touches[0], canvasRef.current.getBoundingClientRect());
+            if (!localTouchPoint)
+                return;
+            point = localTouchPoint;
+        }
+        spacesRef.current.drawNewWall(canvasRef.current, point);
     };
     var handleDrawWallFinish = function (e) {
         var _a;
-        if (modeValue !== types_2.IModes.DRAW)
+        if (!spacesRef.current || !canvasRef.current)
             return;
-        if (!canvasRef.current)
+        if (modeValue !== types_2.IModes.DRAW)
             return;
         if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             spacesRef.current.cancelDrawNewWall(canvasRef.current);
@@ -310,9 +436,10 @@ var useSpaces = function (props) {
         if (!attribute)
             return undefined;
         var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { add: function (addToWallIndex, feature) {
-                return spacesRef.current.addFeature(type, addToWallIndex, __assign({ assetId: val.assetId }, (feature || {})));
+                var _a;
+                return (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.addFeature(type, addToWallIndex, __assign({ assetId: val.assetId }, (feature || {})));
             } })); });
-        var value = attribute.value.map(function (val, i) { return (__assign(__assign({}, val), { delete: function () { return spacesRef.current.deleteFeature(type, i); } })); });
+        var value = attribute.value.map(function (val, i) { return (__assign(__assign({}, val), { delete: function () { var _a; return (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.deleteFeature(type, i); } })); });
         return __assign(__assign({}, attribute), { values: values, value: value });
     };
     var prepWallAttributeForOutput = function (attribute) {
@@ -334,7 +461,6 @@ var useSpaces = function (props) {
     var handleSetMode = function (mode) {
         if (mode === modeValue)
             return;
-        drawSpaces();
         dispatch((0, spaces_1.setMode)(mode));
         setSelectedElement(null);
     };
@@ -380,14 +506,16 @@ var useSpaces = function (props) {
         setSelectedElement(null);
     };
     var handleChangeTranslate = function (delta) {
+        if (!spacesRef.current)
+            return;
         spacesRef.current.translate = [
             spacesRef.current.translate[0] + delta[0],
             spacesRef.current.translate[1] + delta[1],
         ];
         dispatch((0, spaces_1.setTranslation)(spacesRef.current.translate));
-        drawSpaces();
     };
     return {
+        hasLoaded: hasInitialized,
         draw: drawSpaces,
         canvasRef: canvasRef,
         selectedElement: selectedElement === null
@@ -398,11 +526,13 @@ var useSpaces = function (props) {
                 ], type: selectedElement.path[0], deleteElement: function () { return handleDeleteElement.apply(void 0, selectedElement.path); }, splitWall: selectedElement.path[0] !== types_2.IElements.WALL
                     ? undefined
                     : function (offset) {
-                        return spacesRef.current.splitWallAtOffset(selectedElement.path[1], offset);
+                        var _a;
+                        return (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.splitWallAtOffset(selectedElement.path[1], offset);
                     }, addFeature: selectedElement.path[0] !== types_2.IElements.WALL
                     ? undefined
                     : function (type, feature) {
-                        return spacesRef.current.addFeature(type, selectedElement.path[1], feature);
+                        var _a;
+                        return (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.addFeature(type, selectedElement.path[1], feature);
                     } }),
         mode: {
             value: modeValue,
@@ -441,9 +571,9 @@ var useSpaces = function (props) {
             handleToggle: handleToggleGridSnapping,
         },
         zoom: {
-            min: spacesRef.current.zoomMin,
-            max: spacesRef.current.zoomMax,
-            value: zoom || constants_1.ZOOM_DEFAULT,
+            min: (_c = (_b = spacesRef.current) === null || _b === void 0 ? void 0 : _b.zoomMin) !== null && _c !== void 0 ? _c : constants_1.ZOOM_MIN,
+            max: (_e = (_d = spacesRef.current) === null || _d === void 0 ? void 0 : _d.zoomMax) !== null && _e !== void 0 ? _e : constants_1.ZOOM_MAX,
+            value: zoom,
             handleChange: updateZoom,
         },
         unit: {
@@ -456,6 +586,18 @@ var useSpaces = function (props) {
             }); }),
             handleChange: updateUnit,
         },
+        wallMode: {
+            value: wallMode.value,
+            options: wallMode.options.map(function (mode) { return ({
+                value: mode,
+                label: constants_1.wallModeLabels[mode],
+                selected: mode === wallMode.value,
+                handleSelect: function () { return dispatch((0, spaces_1.setWallModeValue)(mode)); },
+            }); }),
+            handleChange: function (wallMode) {
+                return dispatch((0, spaces_1.setWallModeValue)(wallMode));
+            },
+        },
         translate: {
             handleChange: handleChangeTranslate,
         },
@@ -478,5 +620,6 @@ var useSpaces = function (props) {
 useSpaces.themes = themes_1.IThemes;
 useSpaces.units = types_2.IUnits;
 useSpaces.modes = types_2.IModes;
+useSpaces.wallModes = constants_1.WallModes;
 useSpaces.LayoutIcon = SpacesLayout_1.default;
 exports.default = useSpaces;