@threekit-tools/treble 0.0.89-next-006 → 0.0.90

package/dist/hooks/useRoomBuilder/constants.js

@@ -1,44 +1,29 @@
 "use strict";
 var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
-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.TRANSLATE_DEFAULT = exports.TRANSLATE_MIN = exports.TRANSLATE_MAX = exports.ZOOM_DEFAULT = exports.ZOOM_MIN = exports.ZOOM_MAX = exports.SNAP_PROXIMITY = exports.SCALE = exports.IFeatureAttribute = exports.IWallAttributes = exports.IRoomBuilderAttributes = 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 IRoomBuilderAttributes;
-(function (IRoomBuilderAttributes) {
-    IRoomBuilderAttributes["WALLS"] = "_tkSpace_walls";
-    IRoomBuilderAttributes["WINDOWS"] = "_tkSpace_windows";
-    IRoomBuilderAttributes["DOORS"] = "_tkSpace_doors";
-    IRoomBuilderAttributes["OPENINGS"] = "_tkSpace_openings";
-})(IRoomBuilderAttributes = exports.IRoomBuilderAttributes || (exports.IRoomBuilderAttributes = {}));
 var IWallAttributes;
 (function (IWallAttributes) {
-    IWallAttributes["START_X"] = "_tkSpace_startX";
-    IWallAttributes["START_Y"] = "_tkSpace_startY";
-    IWallAttributes["START_Z"] = "_tkSpace_startZ";
-    IWallAttributes["END_X"] = "_tkSpace_endX";
-    IWallAttributes["END_Y"] = "_tkSpace_endY";
-    IWallAttributes["END_Z"] = "_tkSpace_endZ";
-    IWallAttributes["CONNECTIONS"] = "_tkSpace_connections";
-    IWallAttributes["WALL_HEIGHT"] = "_tkSpace_wallHeight";
-    IWallAttributes["WALL_THICKNESS"] = "_tkSpace_wallThickness";
+    IWallAttributes["START_X"] = "Start X";
+    IWallAttributes["START_Z"] = "Start Z";
+    IWallAttributes["END_X"] = "End X";
+    IWallAttributes["END_Z"] = "End Z";
+    IWallAttributes["HEIGHT"] = "Height";
+    IWallAttributes["THICKNESS"] = "Thickness";
+    IWallAttributes["CONNECTIONS"] = "Connections";
 })(IWallAttributes = exports.IWallAttributes || (exports.IWallAttributes = {}));
 var IFeatureAttribute;
 (function (IFeatureAttribute) {
-    IFeatureAttribute["POSITION_X"] = "_tkSpace_offsetX";
-    IFeatureAttribute["POSITION_Y"] = "_tkSpace_offsetY";
-    IFeatureAttribute["POSITION_Z"] = "_tkSpace_offsetZ";
-    IFeatureAttribute["CONNECTED_TO"] = "_tkSpace_connectedTo";
-    IFeatureAttribute["FEATURE_HEIGHT"] = "_tkSpace_featureHeight";
-    IFeatureAttribute["FEATURE_LENGTH"] = "_tkSpace_featureWidth";
+    IFeatureAttribute["POSITION_X"] = "Start X";
+    IFeatureAttribute["POSITION_Y"] = "Start Y";
+    IFeatureAttribute["POSITION_Z"] = "Start Z";
+    IFeatureAttribute["HEIGHT"] = "Height";
+    IFeatureAttribute["LENGTH"] = "Length";
+    IFeatureAttribute["CONNECTED_TO"] = "Connected To";
 })(IFeatureAttribute = exports.IFeatureAttribute || (exports.IFeatureAttribute = {}));
 exports.SCALE = 0.02;
-exports.SNAP_PROXIMITY = 16;
-exports.ZOOM_MAX = 100;
-exports.ZOOM_MIN = 20;
-exports.ZOOM_DEFAULT = 40;
-exports.TRANSLATE_MAX = [-400, -400];
-exports.TRANSLATE_MIN = [400, 400];
-exports.TRANSLATE_DEFAULT = [-200, -200];
+exports.SNAP_PROXIMITY = 10;
 exports.MIN_WALL_LENGTH = 50;
 exports.WALL_PADDING_FOR_FEATURE = 20;
 exports.UNIT_LABELS = (_a = {},

package/dist/hooks/useRoomBuilder/dataHandlers.js

@@ -51,8 +51,8 @@ function prepWallsAndVerticesIncoming(wallsAttribute, config) {
             assetId: assetId,
             line: [point1, point2],
             path: (0, geometry_1.addThicknessToLine)([point1, point2], config.config.styles.wall.thickness),
-            height: configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IWallAttributes.WALL_HEIGHT],
-            thickness: configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IWallAttributes.WALL_THICKNESS],
+            height: configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IWallAttributes.HEIGHT],
+            thickness: configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IWallAttributes.THICKNESS],
             connections: connections,
         });
     });
@@ -64,7 +64,7 @@ function prepFeatureIncoming(walls, featureAttribute, config) {
     (_a = featureAttribute === null || featureAttribute === void 0 ? void 0 : featureAttribute.value) === null || _a === void 0 ? void 0 : _a.forEach(function (_a) {
         var assetId = _a.assetId, configuration = _a.configuration;
         var offset = (configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IFeatureAttribute.POSITION_X]) / config.config.scale;
-        var length = (configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IFeatureAttribute.FEATURE_LENGTH]) / config.config.scale ||
+        var length = (configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IFeatureAttribute.LENGTH]) / config.config.scale ||
             constants_1.FEATURE_LENGTH;
         var connectedTo = (configuration === null || configuration === void 0 ? void 0 : configuration[constants_1.IFeatureAttribute.CONNECTED_TO]) || '';
         var wallIndex = prepConnectionIncoming(connectedTo)[1];
@@ -100,7 +100,7 @@ function prepFeaturesOutgoing(features, config) {
             feature.connectedTo[1],
         ]);
         var configuration = Object.entries((_a = {},
-            _a[constants_1.IFeatureAttribute.FEATURE_LENGTH] = length,
+            _a[constants_1.IFeatureAttribute.LENGTH] = length,
             _a[constants_1.IFeatureAttribute.POSITION_X] = offset,
             _a)).reduce(function (output, _a) {
             var _b;
@@ -133,8 +133,8 @@ function prepWallsOutgoing(walls, config) {
             _a[constants_1.IWallAttributes.START_Z] = y1,
             _a[constants_1.IWallAttributes.END_X] = x2,
             _a[constants_1.IWallAttributes.END_Z] = y2,
-            _a[constants_1.IWallAttributes.WALL_HEIGHT] = height,
-            _a[constants_1.IWallAttributes.WALL_THICKNESS] = thickness,
+            _a[constants_1.IWallAttributes.HEIGHT] = height,
+            _a[constants_1.IWallAttributes.THICKNESS] = thickness,
             _a)).reduce(function (output, _a) {
             var _b;
             var key = _a[0], value = _a[1];

package/dist/hooks/useRoomBuilder/draw.js

@@ -36,8 +36,8 @@ function drawGrid(canvas, styles) {
     if (!ctx)
         return;
     ctx.strokeStyle = styles.lineColor;
-    var numHorizontalLines = Math.ceil(canvas.height / styles.gridStepGap);
-    var numVerticalLines = Math.ceil(canvas.width / styles.gridStepGap);
+    var numHorizontalLines = Math.ceil(canvas.width / styles.gridStepGap);
+    var numVerticalLines = Math.ceil(canvas.height / styles.gridStepGap);
     for (var i = 0; i < numHorizontalLines; i++) {
         var y = i * styles.gridStepGap;
         ctx.lineWidth =

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import type { IHydratedAttributeArray } from '../../types';
-import type { ICoordinate2D, IElementName, IElementPublic, IRoomBuilderHookProps } from './types';
+import type { IElementName, IElementPublic, IRoomBuilderHookProps } from './types';
 import { IModes, IUnits, IElements } from './types';
 import { IThemes } from './themes';
-import RoomBuilderLayout from './RoomBuilderLayout';
 interface IUseRoomBuilder {
-    drawRoom: () => void;
     canvasRef: React.RefObject<HTMLCanvasElement>;
     [IElements.WALL]?: IHydratedAttributeArray;
     [IElements.WINDOW]?: IHydratedAttributeArray;
@@ -22,15 +20,6 @@ interface IUseRoomBuilder {
         enabled: boolean;
         handleToggle: (val?: boolean) => void;
     };
-    zoom: {
-        min: number;
-        max: number;
-        value: number;
-        handleChange: (value: number) => void;
-    };
-    translate: {
-        handleChange: (delta: ICoordinate2D) => void;
-    };
     mode: {
         value: IModes;
         options: Array<{
@@ -41,17 +30,11 @@ interface IUseRoomBuilder {
         }>;
         handleChange: (mode: IModes) => void;
     };
-    layouts: Array<{
-        label: string;
-        loops: Array<ICoordinate2D[]>;
-        handleSelect: () => void;
-    }>;
 }
 declare const useRoomBuilder: {
     (props: IRoomBuilderHookProps): IUseRoomBuilder;
     themes: typeof IThemes;
     units: typeof IUnits;
     modes: typeof IModes;
-    LayoutIcon: typeof RoomBuilderLayout;
 };
 export default useRoomBuilder;

package/dist/hooks/useRoomBuilder/index.js

@@ -43,82 +43,46 @@ var useConfigurator_1 = __importDefault(require("../useConfigurator"));
 var RoomBuilderState_1 = __importDefault(require("./RoomBuilderState"));
 var constants_1 = require("./constants");
 var themes_1 = __importStar(require("./themes"));
-var RoomBuilderLayout_1 = __importDefault(require("./RoomBuilderLayout"));
-var store_1 = require("../../store");
-var roomBuilder_1 = require("../../store/roomBuilder");
-var useThreekitInitStatus_1 = __importDefault(require("../useThreekitInitStatus"));
 var useRoomBuilder = function (props) {
     var _a;
-    var _b;
     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)(roomBuilder_1.getLayouts);
-    var zoom = (0, store_1.useThreekitSelector)(roomBuilder_1.getZoom);
-    var translation = (0, store_1.useThreekitSelector)(roomBuilder_1.getTranslation);
-    var modeValue = (0, store_1.useThreekitSelector)(roomBuilder_1.getMode);
-    var showDimensions = (0, store_1.useThreekitSelector)(roomBuilder_1.getShowDimensions);
-    var angleSnappingEnabled = (0, store_1.useThreekitSelector)(roomBuilder_1.getAngleSnappingEnabled);
-    var _c = (0, react_1.useState)(null), selectedElement = _c[0], setSelectedElement = _c[1];
-    var _d = (0, react_1.useState)(null), selectedWallAsset = _d[0], setSelectedWallAsset = _d[1];
+    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 translationAnchorRef = (0, react_1.useRef)(null);
     var preppedConfig = Object.assign({
         scale: constants_1.SCALE,
         unit: types_1.IUnits.FEET,
         snapProximity: constants_1.SNAP_PROXIMITY,
-        zoomDefault: zoom || constants_1.ZOOM_DEFAULT,
-        translateDefault: translation || constants_1.TRANSLATE_DEFAULT,
-        styles: ((_b = props.config) === null || _b === void 0 ? void 0 : _b.theme) && themes_1.default[props.config.theme]
+        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 attributeNames = Object.assign((_a = {},
-        _a[types_1.IElements.WALL] = constants_1.IRoomBuilderAttributes.WALLS,
-        _a[types_1.IElements.WINDOW] = constants_1.IRoomBuilderAttributes.WINDOWS,
-        _a[types_1.IElements.OPENING] = constants_1.IRoomBuilderAttributes.OPENINGS,
-        _a[types_1.IElements.DOOR] = constants_1.IRoomBuilderAttributes.DOORS,
-        _a), props.attributes);
-    var roomBuilderRef = (0, react_1.useRef)(new RoomBuilderState_1.default(__assign(__assign({}, props), { config: preppedConfig, attributes: attributeNames })));
+    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[attributeNames[types_1.IElements.WALL]]))
-            setSelectedWallAsset(((_a = attributesState === null || attributesState === void 0 ? void 0 : attributesState[attributeNames[types_1.IElements.WALL]]) === null || _a === void 0 ? void 0 : _a.values[0].assetId) || null);
+        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 () {
-        var _a;
-        if (zoom &&
-            ((_a = props.config) === null || _a === void 0 ? void 0 : _a.zoomDefault) &&
-            props.config.zoomDefault >= roomBuilderRef.current.zoomMin &&
-            roomBuilderRef.current.zoomMax >= props.config.zoomDefault)
-            updateZoom(props.config.zoomDefault);
-    }, []);
-    (0, react_1.useEffect)(function () {
-        var _a, _b;
         if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
-            roomBuilderRef.current.canvasDimensions = [
-                canvasRef.current.width,
-                canvasRef.current.height,
-            ];
             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);
-            if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled))
-                canvasRef.current.addEventListener('mousemove', handleMoveCanvas);
             document.addEventListener('mouseup', handleSetSelectedElement);
-            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) {
                 canvasRef.current.removeEventListener('mousedown', handleDrawWallStart);
                 canvasRef.current.removeEventListener('mousemove', handleDrawWallMouseMove);
@@ -126,11 +90,7 @@ var useRoomBuilder = function (props) {
                 canvasRef.current.removeEventListener('mousemove', handleSelectModeHover);
                 canvasRef.current.removeEventListener('mousedown', handleSelectElement);
                 canvasRef.current.removeEventListener('mousemove', handleMoveSelectedElement);
-                if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled))
-                    canvasRef.current.removeEventListener('mousemove', handleMoveCanvas);
                 document.removeEventListener('mouseup', handleSetSelectedElement);
-                if (!((_b = props.config) === null || _b === void 0 ? void 0 : _b.zoomDisabled))
-                    canvasRef.current.removeEventListener('wheel', handleScrollToZoom);
             }
         };
     });
@@ -145,30 +105,6 @@ var useRoomBuilder = function (props) {
             : null;
         drawRoom();
     }, [selectedElement, showDimensions, angleSnappingEnabled]);
-    (0, react_1.useEffect)(function () {
-        if (!hasLoaded)
-            return;
-        var layoutIds = props.layouts || [];
-        dispatch((0, roomBuilder_1.hydrateLayouts)(layoutIds, {
-            walls: attributeNames[types_1.IElements.WALL],
-            startX: constants_1.IWallAttributes.START_X,
-            startZ: constants_1.IWallAttributes.START_Z,
-            endX: constants_1.IWallAttributes.END_X,
-            endZ: constants_1.IWallAttributes.END_Z,
-        }));
-    }, [hasLoaded, JSON.stringify(props.layouts)]);
-    var updateZoom = function (value) {
-        var newZoom = roomBuilderRef.current.setZoom(value);
-        if (!newZoom)
-            return;
-        dispatch((0, roomBuilder_1.setZoom)(newZoom));
-        drawRoom();
-    };
-    var handleScrollToZoom = function (e) {
-        if (!canvasRef.current)
-            return;
-        updateZoom(e.deltaY);
-    };
     var handleSelectModeHover = function (e) {
         if (!canvasRef.current)
             return;
@@ -176,22 +112,16 @@ var useRoomBuilder = function (props) {
             return;
         if (roomBuilderRef.current.activeElement !== null)
             return;
-        if (translationAnchorRef.current)
-            return;
         var cursorPoint = [e.offsetX, e.offsetY];
         roomBuilderRef.current.highlightElementIfInProximity(canvasRef.current, cursorPoint);
     };
     var handleSelectElement = function (e) {
-        var _a;
         if (!canvasRef.current)
             return;
         if (modeValue !== types_1.IModes.SELECT)
             return;
         var cursorPoint = [e.offsetX, e.offsetY];
         roomBuilderRef.current.selectElementIfInProximity(canvasRef.current, cursorPoint);
-        if (!((_a = props.config) === null || _a === void 0 ? void 0 : _a.translateDisabled) &&
-            !roomBuilderRef.current.activeElement)
-            translationAnchorRef.current = cursorPoint;
         var element = roomBuilderRef.current.getClickedElement(cursorPoint);
         if (!element) {
             if (selectedElement !== null)
@@ -213,20 +143,6 @@ var useRoomBuilder = function (props) {
         roomBuilderRef.current.moveActiveElement(canvasRef.current, point);
         selectElementPending.current = null;
     };
-    var handleMoveCanvas = function (e) {
-        if (modeValue !== types_1.IModes.SELECT)
-            return;
-        if (!canvasRef.current)
-            return;
-        if (roomBuilderRef.current.selectedElement || !translationAnchorRef.current)
-            return;
-        var delta = [
-            e.offsetX - translationAnchorRef.current[0],
-            e.offsetY - translationAnchorRef.current[1],
-        ];
-        handleChangeTranslate(delta);
-        translationAnchorRef.current = [e.offsetX, e.offsetY];
-    };
     var handleSetSelectedElement = function (e) {
         var _a;
         if (modeValue !== types_1.IModes.SELECT)
@@ -241,10 +157,7 @@ var useRoomBuilder = function (props) {
         if (selectElementPending.current) {
             setSelectedElement(selectElementPending.current);
             selectElementPending.current = null;
-            return;
         }
-        if (translationAnchorRef.current)
-            translationAnchorRef.current = null;
     };
     var handleDrawWallStart = function (e) {
         if (modeValue !== types_1.IModes.DRAW)
@@ -258,8 +171,7 @@ var useRoomBuilder = function (props) {
         if (!canvasRef.current)
             return;
         var cursorPoint = [e.offsetX, e.offsetY];
-        if (roomBuilderRef.current.isDrawWallActive)
-            roomBuilderRef.current.drawNewWall(canvasRef.current, cursorPoint);
+        roomBuilderRef.current.drawNewWall(canvasRef.current, cursorPoint);
     };
     var handleDrawWallFinish = function (e) {
         var _a;
@@ -292,14 +204,14 @@ var useRoomBuilder = function (props) {
         if (!attribute)
             return undefined;
         var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { selected: val.assetId === selectedWallAsset, selectToDraw: function () {
-                dispatch((0, roomBuilder_1.setMode)(types_1.IModes.DRAW));
+                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(attributeNames).find(function (_a) {
+        var elementAttr = Object.entries(props.attributes).find(function (_a) {
             var _ = _a[0], attrName = _a[1];
             return attrName === attributeName;
         });
@@ -311,7 +223,7 @@ var useRoomBuilder = function (props) {
         if (mode === modeValue)
             return;
         drawRoom();
-        dispatch((0, roomBuilder_1.setMode)(mode));
+        setMode(mode);
         setSelectedElement(null);
     };
     var handleReset = function () {
@@ -322,7 +234,7 @@ var useRoomBuilder = function (props) {
     var handleDeleteElement = function (type, index) {
         var _a;
         var elementType = type;
-        if (Object.values(attributeNames).includes(type)) {
+        if (Object.values(props.attributes).includes(type)) {
             var updatedType = getElementFromAttributeName(type);
             if (!updatedType)
                 return;
@@ -333,38 +245,29 @@ var useRoomBuilder = function (props) {
     };
     var handleToggleDimensions = function (val) {
         if (val === undefined)
-            dispatch((0, roomBuilder_1.setShowDimensions)(!showDimensions));
+            setShowDimensions(!showDimensions);
         else
-            dispatch((0, roomBuilder_1.setShowDimensions)(val));
+            setShowDimensions(val);
         setSelectedElement(null);
     };
     var handleToggleAngleSnapping = function (val) {
         if (val === undefined)
-            dispatch((0, roomBuilder_1.setAngleSnappingEnabled)(!angleSnappingEnabled));
+            setAngleSnappingEnabled(!angleSnappingEnabled);
         else
-            dispatch((0, roomBuilder_1.setAngleSnappingEnabled)(val));
+            setAngleSnappingEnabled(val);
         setSelectedElement(null);
     };
-    var handleChangeTranslate = function (delta) {
-        roomBuilderRef.current.translate = [
-            roomBuilderRef.current.translate[0] + delta[0],
-            roomBuilderRef.current.translate[1] + delta[1],
-        ];
-        dispatch((0, roomBuilder_1.setTranslation)(roomBuilderRef.current.translate));
-        drawRoom();
-    };
     return {
-        drawRoom: drawRoom,
         canvasRef: canvasRef,
         selectedElement: selectedElement === null
             ? selectedElement
             : __assign(__assign({}, selectedElement), { path: [
-                    attributeNames[selectedElement.path[0]],
+                    props.attributes[selectedElement.path[0]],
                     selectedElement.path[1],
-                ], type: selectedElement.path[0] }),
+                ] }),
         mode: {
             value: modeValue,
-            options: [types_1.IModes.SELECT, types_1.IModes.DRAW].map(function (el) { return ({
+            options: [types_1.IModes.DRAW, types_1.IModes.SELECT].map(function (el) { return ({
                 value: el,
                 label: el,
                 selected: modeValue === el,
@@ -380,32 +283,21 @@ var useRoomBuilder = function (props) {
             enabled: angleSnappingEnabled,
             handleToggle: handleToggleAngleSnapping,
         },
-        zoom: {
-            min: roomBuilderRef.current.zoomMin,
-            max: roomBuilderRef.current.zoomMax,
-            value: zoom || constants_1.ZOOM_DEFAULT,
-            handleChange: updateZoom,
-        },
-        translate: {
-            handleChange: handleChangeTranslate,
-        },
         reset: handleReset,
         deleteElement: handleDeleteElement,
-        layouts: layouts.map(function (layout) { return ({
-            label: layout.label,
-            loops: layout.loop,
-            handleSelect: function () {
-                return window.threekit.configurator.setFullConfiguration(layout.configuration);
-            },
-        }); }),
-        walls: prepWallAttributeForOutput(attributesState === null || attributesState === void 0 ? void 0 : attributesState[attributeNames[types_1.IElements.WALL]]),
-        windows: prepFeatureAttributeForOutput(types_1.IElements.WINDOW, attributesState === null || attributesState === void 0 ? void 0 : attributesState[attributeNames[types_1.IElements.WINDOW]]),
-        doors: prepFeatureAttributeForOutput(types_1.IElements.DOOR, attributesState === null || attributesState === void 0 ? void 0 : attributesState[attributeNames[types_1.IElements.DOOR]]),
-        openings: prepFeatureAttributeForOutput(types_1.IElements.OPENING, attributesState === null || attributesState === void 0 ? void 0 : attributesState[attributeNames[types_1.IElements.OPENING]]),
+        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;
-useRoomBuilder.LayoutIcon = RoomBuilderLayout_1.default;
 exports.default = useRoomBuilder;

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

@@ -157,9 +157,6 @@ export interface IRoomBuilderThemePartial {
     vertex: Partial<IStylesVertex>;
     feature: Partial<IStylesFeature>;
 }
-export declare enum SNAPPING_TYPES {
-    ANGLE = "angle"
-}
 export interface IElementAddress {
     type: IElementName;
     index: number;
@@ -180,7 +177,7 @@ export interface ISnapPointWall extends ISnapPointShared<IElements.WALL> {
 }
 export interface ISnapPointFeature extends ISnapPointShared<IFeatureName> {
 }
-export interface ISnapPointAngle extends Omit<ISnapPointShared<SNAPPING_TYPES.ANGLE>, 'index'> {
+export interface ISnapPointAngle extends Omit<ISnapPointShared<'Angle'>, 'index'> {
 }
 export declare type ISnapPoint = ISnapPointVertex | ISnapPointWall | ISnapPointFeature | ISnapPointAngle;
 export interface IActiveElement extends IElementAddress {
@@ -202,7 +199,6 @@ export interface IElementUi {
 }
 export interface IElementPublic extends Pick<IElementUi, 'uiAnchor'> {
     path: [attribute: string, index: number];
-    type: IFeatureName | IElements.WALL;
 }
 export declare enum IModes {
     SELECT = "select",
@@ -219,15 +215,11 @@ export interface IRoomBuilderConfigShared<T> {
     unit: IUnits;
     snapProximity: number;
     styles: T;
-    zoomDefault: number;
-    translateDefault: ICoordinate2D;
 }
 export interface IRoomBuilderConfigInternal extends IRoomBuilderConfigShared<IRoomBuilderStyles> {
 }
 export interface IRoomBuilderConfigUser extends IRoomBuilderConfigShared<Partial<IRoomBuilderStyles>> {
-    theme: string;
-    zoomDisabled: boolean;
-    translateDisabled: boolean;
+    theme?: string;
 }
 export interface IRoomBuilderAttributes {
     [IElements.WALL]: string;
@@ -238,7 +230,6 @@ export interface IRoomBuilderAttributes {
 interface IRoomBuilderPropsShared<T> {
     config: T;
     attributes: IRoomBuilderAttributes;
-    layouts?: Array<string>;
 }
 export interface IRoomBuilderHookProps extends IRoomBuilderPropsShared<undefined | Partial<IRoomBuilderConfigUser>> {
 }

package/dist/hooks/useRoomBuilder/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IUnits = exports.IModes = exports.IErrorTypes = exports.SNAPPING_TYPES = exports.IElementStyleModes = exports.IElements = void 0;
+exports.IUnits = exports.IModes = exports.IErrorTypes = exports.IElementStyleModes = exports.IElements = void 0;
 var IElements;
 (function (IElements) {
     IElements["WALL"] = "walls";
@@ -16,10 +16,6 @@ var IElementStyleModes;
     IElementStyleModes["ACTIVE"] = "active";
     IElementStyleModes["ERROR"] = "error";
 })(IElementStyleModes = exports.IElementStyleModes || (exports.IElementStyleModes = {}));
-var SNAPPING_TYPES;
-(function (SNAPPING_TYPES) {
-    SNAPPING_TYPES["ANGLE"] = "angle";
-})(SNAPPING_TYPES = exports.SNAPPING_TYPES || (exports.SNAPPING_TYPES = {}));
 var IErrorTypes;
 (function (IErrorTypes) {
     IErrorTypes["HARD"] = "hard";

package/dist/icons/Draw.js

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Draw = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var Path = styled_components_1.default.path(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: ", ";\n"], ["\n  fill: ", ";\n"])), function (props) { return props.color || props.theme.textColor; });
+var SVG = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .tk-icon {\n    fill: ", ";\n  }\n"], ["\n  .tk-icon {\n    fill: ", ";\n  }\n"])), function (props) { return props.color || props.theme.textColor; });
 var Draw = function (props) {
-    return (react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        react_1.default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M3.74417 0.637287C4.59388 -0.212428 5.97154 -0.21243 6.82126 0.637287L19.3627 13.1787C19.7708 13.5868 20 14.1402 20 14.7173V20H14.7173C14.1402 20 13.5868 19.7708 13.1787 19.3627L0.637287 6.82126C-0.21243 5.97154 -0.21243 4.59388 0.637286 3.74417L3.74417 0.637287ZM5.50251 1.95604C5.38112 1.83465 5.18431 1.83465 5.06292 1.95604L1.95604 5.06292C1.83465 5.18431 1.83465 5.38112 1.95604 5.50251L4.20155 7.74802L7.74802 4.20155L5.50251 1.95604ZM9.06677 5.52031L18.044 14.4975C18.1023 14.5558 18.135 14.6348 18.135 14.7173V18.135H14.7173C14.6348 18.135 14.5558 18.1023 14.4975 18.044L5.52031 9.06677L9.06677 5.52031Z", color: props.color })));
+    return (react_1.default.createElement(SVG, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: props.color },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.74417 0.637287C4.59388 -0.212428 5.97154 -0.21243 6.82126 0.637287L19.3627 13.1787C19.7708 13.5868 20 14.1402 20 14.7173V20H14.7173C14.1402 20 13.5868 19.7708 13.1787 19.3627L0.637287 6.82126C-0.21243 5.97154 -0.21243 4.59388 0.637286 3.74417L3.74417 0.637287ZM5.50251 1.95604C5.38112 1.83465 5.18431 1.83465 5.06292 1.95604L1.95604 5.06292C1.83465 5.18431 1.83465 5.38112 1.95604 5.50251L4.20155 7.74802L7.74802 4.20155L5.50251 1.95604ZM9.06677 5.52031L18.044 14.4975C18.1023 14.5558 18.135 14.6348 18.135 14.7173V18.135H14.7173C14.6348 18.135 14.5558 18.1023 14.4975 18.044L5.52031 9.06677L9.06677 5.52031Z", className: "tk-icon" })));
 };
 exports.Draw = Draw;
 exports.Draw.iconName = 'draw';

package/dist/icons/Window.js

@@ -10,11 +10,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Window = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var Path = styled_components_1.default.path(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: ", ";\n"], ["\n  fill: ", ";\n"])), function (props) { return props.color || props.theme.textColor; });
+var SVG = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .tk-icon {\n    fill: ", ";\n  }\n"], ["\n  .tk-icon {\n    fill: ", ";\n  }\n"])), function (props) { return props.color || props.theme.textColor; });
 var Window = function (props) {
-    return (react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-        react_1.default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", color: props.color, d: "M2.28571 15.4286V4.42858H17.7603V15.4286H2.28571ZM10.4891 10.3947V14.5714H16.9031V10.3947H10.4891ZM16.9031 9.46248V5.28572H10.4891V9.46248H16.9031ZM9.55688 5.28572H3.14286V9.46248H9.55688V5.28572ZM3.14286 14.5714V10.3947H9.55688V14.5714H3.14286Z" }),
-        react_1.default.createElement(Path, { fillRule: "evenodd", clipRule: "evenodd", color: props.color, d: "M0.285714 2.71429C0.127919 2.71429 0 2.84221 0 3.00001V17C0 17.1578 0.127918 17.2857 0.285714 17.2857H19.7143C19.8721 17.2857 20 17.1578 20 17V3.00001C20 2.84221 19.8721 2.71429 19.7143 2.71429H0.285714ZM0.857143 3.57144V16.4286H19.1429V3.57144H0.857143Z" })));
+    return (react_1.default.createElement(SVG, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", color: props.color },
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.28571 15.4286V4.42858H17.7603V15.4286H2.28571ZM10.4891 10.3947V14.5714H16.9031V10.3947H10.4891ZM16.9031 9.46248V5.28572H10.4891V9.46248H16.9031ZM9.55688 5.28572H3.14286V9.46248H9.55688V5.28572ZM3.14286 14.5714V10.3947H9.55688V14.5714H3.14286Z", className: "tk-icon" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.285714 2.71429C0.127919 2.71429 0 2.84221 0 3.00001V17C0 17.1578 0.127918 17.2857 0.285714 17.2857H19.7143C19.8721 17.2857 20 17.1578 20 17V3.00001C20 2.84221 19.8721 2.71429 19.7143 2.71429H0.285714ZM0.857143 3.57144V16.4286H19.1429V3.57144H0.857143Z", className: "tk-icon" })));
 };
 exports.Window = Window;
 exports.Window.iconName = 'window';

package/dist/icons/index.js

@@ -33,7 +33,6 @@ var More_1 = __importDefault(require("./More"));
 var NewWindow_1 = __importDefault(require("./NewWindow"));
 var Pause_1 = __importDefault(require("./Pause"));
 var Play_1 = __importDefault(require("./Play"));
-var Player3D_1 = __importDefault(require("./Player3D"));
 var Redo_1 = __importDefault(require("./Redo"));
 var Remove_1 = __importDefault(require("./Remove"));
 var Ruler_1 = __importDefault(require("./Ruler"));
@@ -87,7 +86,6 @@ exports.default = (_a = {},
     _a[NewWindow_1.default.iconName] = NewWindow_1.default,
     _a[Pause_1.default.iconName] = Pause_1.default,
     _a[Play_1.default.iconName] = Play_1.default,
-    _a[Player3D_1.default.iconName] = Player3D_1.default,
     _a[Redo_1.default.iconName] = Redo_1.default,
     _a[Remove_1.default.iconName] = Remove_1.default,
     _a[Ruler_1.default.iconName] = Ruler_1.default,

package/dist/index.d.ts

@@ -55,7 +55,6 @@ import PlayerLoadingSpinner from './components/PlayerLoadingSpinner';
 import DraggableHint from './components/DraggableHint';
 import TurntableAnimation from './components/TurntableAnimation';
 import BreatheAnimation from './components/BreatheAnimation';
-import RoomBuilderLayoutIcon from './hooks/useRoomBuilder/RoomBuilderLayout';
 import AddIcon from './icons/Add';
 import ArrowLeftIcon from './icons/ArrowLeft';
 import ArrowRightIcon from './icons/ArrowRight';
@@ -85,7 +84,6 @@ import MoreIcon from './icons/More';
 import NewWindowIcon from './icons/NewWindow';
 import PauseIcon from './icons/Pause';
 import PlayIcon from './icons/Play';
-import Player3DIcon from './icons/Player3D';
 import RedoIcon from './icons/Redo';
 import RemoveIcon from './icons/Remove';
 import RulerIcon from './icons/Ruler';
@@ -109,4 +107,4 @@ import DoorIcon from './icons/Door';
 import OpeningIcon from './icons/Opening';
 import WallIcon from './icons/Wall';
 import LayoutIcon from './icons/Layout';
-export { useAttribute, useConfigurator, useConfigurationLoader, useFirstPlayerInteraction, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, useRoomBuilder, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, TextInput, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, TurntableAnimation, BreatheAnimation, RoomBuilderLayoutIcon, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, Player3DIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, AngleIcon, TrashCanIcon, TrashCanAltIcon, CursorIcon, WindowIcon, DrawIcon, DoorIcon, OpeningIcon, WallIcon, LayoutIcon, };
+export { useAttribute, useConfigurator, useConfigurationLoader, useFirstPlayerInteraction, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, useRoomBuilder, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, TextInput, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, TurntableAnimation, BreatheAnimation, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, AngleIcon, TrashCanIcon, TrashCanAltIcon, CursorIcon, WindowIcon, DrawIcon, DoorIcon, OpeningIcon, WallIcon, LayoutIcon, };