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

package/dist/Treble/Treble.d.ts

@@ -26,7 +26,7 @@ declare class Treble {
     _debugMode: boolean;
     constructor({ player, orgId }: ITreble);
     createOrder: (order?: IOrder) => Promise<import("../http/orders").IOrderResponse>;
-    saveConfiguration: (config?: Partial<Omit<ISaveConfiguration, 'configuration'>>) => Promise<{
+    saveConfiguration: (config?: Partial<ISaveConfiguration>) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;

package/dist/Treble/Treble.js

@@ -80,18 +80,18 @@ var Treble = (function () {
             });
         }); };
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
-            var threekitDomain, _a, customerId, metadata, productVersion, attachments, player, response, params, url;
+            var threekitDomain, _a, customerId, metadata, configuration, productVersion, attachments, player, response, params, url;
             var _b;
             var _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         threekitDomain = connection_1.default.getConnection().threekitDomain;
-                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion, attachments = _a.attachments;
+                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, configuration = _a.configuration, productVersion = _a.productVersion, attachments = _a.attachments;
                         player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
                         return [4, api_1.default.configurations.save({
                                 assetId: window.threekit.player.assetId,
-                                configuration: player.getConfigurator().getFullConfiguration(),
+                                configuration: configuration || player.getConfigurator().getFullConfiguration(),
                                 customerId: customerId,
                                 metadata: metadata,
                                 productVersion: productVersion,

package/dist/hooks/useNestedConfigurator/index.js

@@ -57,8 +57,7 @@ var useNestedConfigurator = function (address) {
                 return;
             if (playerLoading)
                 return;
-            configurator.current =
-                window.threekit.treble.getNestedConfigurator(address);
+            configurator.current = window.threekit.configurator.getNestedConfigurator([address].flat());
             if (!configurator.current)
                 return;
             var updatedAttrs = configurator.current.getDisplayAttributes();

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ICoordinate2D } from './types';
+interface IRoomBuilderLayout {
+    loops?: Array<ICoordinate2D[]>;
+    size?: number;
+}
+export default function RoomBuilderLayout(props: IRoomBuilderLayout): JSX.Element;
+export {};

package/dist/hooks/useRoomBuilder/RoomBuilderLayout.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function RoomBuilderLayout(props) {
+    var loops = props.loops;
+    var size = props.size || 20;
+    if (!(loops === null || loops === void 0 ? void 0 : loops.length))
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    var paths = loops.map(function (loop) {
+        return loop
+            .map(function (_a, i) {
+            var x = _a[0], y = _a[1];
+            return (i === 0 ? 'M ' : 'L ') + x + ' ' + y;
+        })
+            .join(' ') + ' Z';
+    });
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: "none", xmlns: "http://www.w3.org/2000/svg" }, paths.map(function (path, i) { return (react_1.default.createElement("path", { key: "path-".concat(i), d: path, stroke: "white", strokeWidth: 1 })); })));
+}
+exports.default = RoomBuilderLayout;

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

@@ -10,16 +10,32 @@ export declare class RoomBuilderState {
     private _errorElement;
     private _showDimensions;
     private _angleSnappingEnabled;
+    private _canvasDimensions;
+    private _zoom;
+    private _zoomLimits;
+    private _translate;
+    private _translateLimits;
     private _state;
     constructor(config: IRoomBuilderStateProps);
     get walls(): IWalls;
+    get wallsToDraw(): {
+        line: ICoordinatesLine;
+        path: undefined;
+        assetId: string;
+        height?: number | undefined;
+        thickness?: number | undefined;
+        connections: [elementType: IFeatureName, index: number][];
+    }[];
     set walls(walls: IWalls);
     get wallCount(): number;
     get wallLines(): ICoordinatesLine[];
     get vertices(): IVerticesState;
+    get verticesToDraw(): IVerticesState;
     set vertices(vertices: IVerticesState);
     get verticesList(): Array<IVertex>;
+    get verticesListToDraw(): Array<IVertex>;
     get features(): IFeatures;
+    get featuresToDraw(): Record<string, IFeature[]>;
     set features(features: IFeatures);
     get getHydratedFeatures(): undefined | IFeaturesHydrated;
     get featureCount(): number;
@@ -30,7 +46,27 @@ export declare class RoomBuilderState {
     set showDimensions(val: boolean);
     get angleSnappingEnabled(): boolean;
     set angleSnappingEnabled(val: boolean);
-    get enclosedSpaces(): Array<IEnclosedSpace>;
+    get enclosedSpacesToDraw(): Array<IEnclosedSpace>;
+    get canvasDimensions(): ICoordinate2D;
+    get canvasWidth(): number;
+    get canvasHeight(): number;
+    set canvasDimensions(dimensions: ICoordinate2D);
+    get zoom(): number;
+    get zoomFactor(): number;
+    get zoomMin(): number;
+    get zoomMax(): number;
+    setZoom(delta: number): number | undefined;
+    get translate(): ICoordinate2D;
+    get translateMin(): ICoordinate2D;
+    get translateMax(): ICoordinate2D;
+    set translate(position: ICoordinate2D);
+    get isDrawWallActive(): boolean;
+    transformLengthFromCanvas(length: number): number;
+    transformLengthToCanvas(length: number): number;
+    transformPointToCanvas(point: ICoordinate2D): ICoordinate2D;
+    transformPointFromCanvas(point: ICoordinate2D): ICoordinate2D;
+    transformLineToCanvas(line: ICoordinatesLine): ICoordinatesLine;
+    transformLineFromCanvas(line: ICoordinatesLine): ICoordinatesLine;
     private getWall;
     private addWall;
     private addWalls;
@@ -39,7 +75,7 @@ export declare class RoomBuilderState {
     private getWallConnectionsHydrated;
     private getWallDimensions;
     private getWallDetailedDimensions;
-    private getAllWallDimensions;
+    private getAllWallDimensionsToDraw;
     private shiftAllFeaturesOnWall;
     private addFeatureToWall;
     private removeFeatureFromWall;
@@ -70,23 +106,24 @@ export declare class RoomBuilderState {
     private snapVertexToAbsoluteAngle;
     private getFeatureAtPoint;
     private getElementAtPoint;
-    getClickedElement(point: ICoordinate2D): undefined | IElementUi;
+    getClickedElement(cursorPoint: ICoordinate2D): undefined | IElementUi;
     private getPointProximity;
     private reevaluateFeatureConnections;
     private pushStateToConfigurator;
     setAttributesToState(attributes?: Record<string, IHydratedAttribute>): void;
     deleteAll(): void;
     private resetInternalState;
-    highlightElementIfInProximity(canvas: HTMLCanvasElement, point: ICoordinate2D): void;
+    highlightElementIfInProximity(canvas: HTMLCanvasElement, cursorPoint: ICoordinate2D): void;
     startDrawNewWall(startPoint: ICoordinate2D): void;
     drawNewWall(canvas: HTMLCanvasElement, endPoint: ICoordinate2D): void;
     cancelDrawNewWall(canvas: HTMLCanvasElement): void;
     finishDrawNewWall(canvas: HTMLCanvasElement, assetId: string): Promise<void>;
+    drawNewWallGuides(canvas: HTMLCanvasElement, cursorPoint: ICoordinate2D): void;
     private moveActiveVertex;
     private finishMoveActiveVertex;
     private moveActiveFeature;
     private finishMoveActiveFeature;
-    selectElementIfInProximity(canvas: HTMLCanvasElement, point: ICoordinate2D): void;
+    selectElementIfInProximity(canvas: HTMLCanvasElement, cursorPoint: ICoordinate2D): void;
     moveActiveElement(canvas: HTMLCanvasElement, moveToPoint: ICoordinate2D): void;
     finishMoveActiveElement(canvas: HTMLCanvasElement): void;
     cancelMoveActiveElement(canvas: HTMLCanvasElement): void;

package/dist/hooks/useRoomBuilder/RoomBuilderState.js

@@ -109,7 +109,7 @@ var RoomBuilderState = (function () {
                     _this._activeElement.snapPoint = snapPoint;
                     _this.repositionVertex(_this._activeElement.index, (_c = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _c !== void 0 ? _c : point);
                     _this.drawRoom(canvas);
-                    (0, draw_1.drawVertex)(canvas, (_d = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _d !== void 0 ? _d : point, _this._config.config.styles.vertex, types_1.IElementStyleModes.HIGHLIGHT);
+                    (0, draw_1.drawVertex)(canvas, _this.transformPointToCanvas((_d = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _d !== void 0 ? _d : point), _this._config.config.styles.vertex, types_1.IElementStyleModes.HIGHLIGHT);
                     break;
             }
         };
@@ -191,6 +191,11 @@ var RoomBuilderState = (function () {
         this._showDimensions = true;
         this._angleSnappingEnabled = true;
         this._attributesState = null;
+        this._canvasDimensions = [0, 0];
+        this._zoom = config.config.zoomDefault;
+        this._zoomLimits = [constants_1.ZOOM_MIN, constants_1.ZOOM_MAX];
+        this._translate = config.config.translateDefault;
+        this._translateLimits = [constants_1.TRANSLATE_MIN, constants_1.TRANSLATE_MAX];
     }
     Object.defineProperty(RoomBuilderState.prototype, "walls", {
         get: function () {
@@ -202,6 +207,14 @@ var RoomBuilderState = (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RoomBuilderState.prototype, "wallsToDraw", {
+        get: function () {
+            var _this = this;
+            return this._state[types_2.IElements.WALL].map(function (wall) { return (__assign(__assign({}, wall), { line: _this.transformLineToCanvas(wall.line), path: undefined })); });
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(RoomBuilderState.prototype, "wallCount", {
         get: function () {
             return this.walls.length;
@@ -229,6 +242,13 @@ var RoomBuilderState = (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RoomBuilderState.prototype, "verticesToDraw", {
+        get: function () {
+            return this._state[types_2.IElements.VERTEX];
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(RoomBuilderState.prototype, "verticesList", {
         get: function () {
             return Object.entries(this.vertices).map(function (_a) {
@@ -242,6 +262,14 @@ var RoomBuilderState = (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RoomBuilderState.prototype, "verticesListToDraw", {
+        get: function () {
+            var _this = this;
+            return this.verticesList.map(function (vertex) { return (__assign(__assign({}, vertex), { point: _this.transformPointToCanvas(vertex.point) })); });
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(RoomBuilderState.prototype, "features", {
         get: function () {
             return this._state[types_2.IElements.FEATURE];
@@ -252,6 +280,20 @@ var RoomBuilderState = (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RoomBuilderState.prototype, "featuresToDraw", {
+        get: function () {
+            var _this = this;
+            return Object.entries(this.features).reduce(function (output, _a) {
+                var _b;
+                var type = _a[0], featureArr = _a[1];
+                return Object.assign(output, (_b = {},
+                    _b[type] = featureArr.map(function (feature) { return (__assign(__assign({}, feature), { path: undefined, offset: _this.transformLengthToCanvas(feature.offset), length: _this.transformLengthToCanvas(feature.length) })); }),
+                    _b));
+            }, {});
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(RoomBuilderState.prototype, "getHydratedFeatures", {
         get: function () {
             var _this = this;
@@ -316,7 +358,7 @@ var RoomBuilderState = (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(RoomBuilderState.prototype, "enclosedSpaces", {
+    Object.defineProperty(RoomBuilderState.prototype, "enclosedSpacesToDraw", {
         get: function () {
             var _this = this;
             var loops = (0, findLoops_1.findLoops)(this.wallLines).inner;
@@ -325,7 +367,7 @@ var RoomBuilderState = (function () {
                 var area = screenSpaceArea * Math.pow(_this._config.config.scale, 2);
                 var convertedArea = (0, dataHandlers_1.convertAreaUnit)(area, types_1.IUnits.METER, _this._config.config.unit);
                 var enclosedSpace = {
-                    loop: loop,
+                    loop: loop.map(function (point) { return _this.transformPointToCanvas(point); }),
                     area: (0, dataHandlers_1.prepAreaForUser)(convertedArea, _this._config.config.unit),
                     center: loop.reduce(function (centerPoint, point) {
                         centerPoint[0] += point[0] / loop.length;
@@ -333,6 +375,7 @@ var RoomBuilderState = (function () {
                         return centerPoint;
                     }, [0, 0]),
                 };
+                enclosedSpace.center = _this.transformPointToCanvas(enclosedSpace.center);
                 output.push(enclosedSpace);
                 return output;
             }, []);
@@ -340,6 +383,145 @@ var RoomBuilderState = (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(RoomBuilderState.prototype, "canvasDimensions", {
+        get: function () {
+            return this._canvasDimensions;
+        },
+        set: function (dimensions) {
+            this._canvasDimensions = dimensions;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "canvasWidth", {
+        get: function () {
+            return this.canvasDimensions[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "canvasHeight", {
+        get: function () {
+            return this.canvasDimensions[1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "zoom", {
+        get: function () {
+            return this._zoom;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "zoomFactor", {
+        get: function () {
+            return this._zoom / this.zoomMin;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "zoomMin", {
+        get: function () {
+            return this._zoomLimits[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "zoomMax", {
+        get: function () {
+            return this._zoomLimits[1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    RoomBuilderState.prototype.setZoom = function (delta) {
+        var newZoom = this.zoom + delta;
+        var preppedZoom = newZoom < this.zoomMin
+            ? this.zoomMin
+            : newZoom > this.zoomMax
+                ? this.zoomMax
+                : newZoom;
+        if (preppedZoom === this.zoom)
+            return;
+        this._zoom = preppedZoom;
+        return this.zoom;
+    };
+    Object.defineProperty(RoomBuilderState.prototype, "translate", {
+        get: function () {
+            return this._translate;
+        },
+        set: function (position) {
+            var zoomFactor = this._zoom / this.zoomMin;
+            var delta = [
+                (position[0] - this._translate[0]) / zoomFactor,
+                (position[1] - this._translate[1]) / zoomFactor,
+            ];
+            this._translate = [
+                this._translate[0] + delta[0],
+                this._translate[1] + delta[1],
+            ];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "translateMin", {
+        get: function () {
+            return this._translateLimits[0];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "translateMax", {
+        get: function () {
+            return this._translateLimits[1];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(RoomBuilderState.prototype, "isDrawWallActive", {
+        get: function () {
+            return !!this._newWall;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    RoomBuilderState.prototype.transformLengthFromCanvas = function (length) {
+        return length / this.zoomFactor;
+    };
+    RoomBuilderState.prototype.transformLengthToCanvas = function (length) {
+        return length * this.zoomFactor;
+    };
+    RoomBuilderState.prototype.transformPointToCanvas = function (point) {
+        var widthOffset = this.canvasWidth / 2;
+        var heightOffset = this.canvasHeight / 2;
+        return [
+            this.transformLengthToCanvas(point[0] + this.translate[0]) -
+                widthOffset * (this.zoomFactor - 1),
+            this.transformLengthToCanvas(point[1] + this.translate[1]) -
+                heightOffset * (this.zoomFactor - 1),
+        ];
+    };
+    RoomBuilderState.prototype.transformPointFromCanvas = function (point) {
+        var widthOffset = this.canvasWidth / 2;
+        var heightOffset = this.canvasHeight / 2;
+        return [
+            this.transformLengthFromCanvas(point[0] + widthOffset * (this.zoomFactor - 1)) - this.translate[0],
+            this.transformLengthFromCanvas(point[1] + heightOffset * (this.zoomFactor - 1)) - this.translate[1],
+        ];
+    };
+    RoomBuilderState.prototype.transformLineToCanvas = function (line) {
+        return [
+            this.transformPointToCanvas(line[0]),
+            this.transformPointToCanvas(line[1]),
+        ];
+    };
+    RoomBuilderState.prototype.transformLineFromCanvas = function (line) {
+        return [
+            this.transformPointFromCanvas(line[0]),
+            this.transformPointFromCanvas(line[1]),
+        ];
+    };
     RoomBuilderState.prototype.getWall = function (index) {
         return this.walls[index];
     };
@@ -442,11 +624,11 @@ var RoomBuilderState = (function () {
         }, []);
         return lines;
     };
-    RoomBuilderState.prototype.getAllWallDimensions = function (detailedWallsIndexes) {
+    RoomBuilderState.prototype.getAllWallDimensionsToDraw = function (detailedWallsIndexes) {
         var _this = this;
         if (detailedWallsIndexes === void 0) { detailedWallsIndexes = []; }
         var indexes = new Set([detailedWallsIndexes].flat());
-        return this.walls.reduce(function (output, _, i) {
+        var dimensionsList = this.walls.reduce(function (output, _, i) {
             var dimensions = indexes.has(i)
                 ? _this.getWallDetailedDimensions(i)
                 : _this.getWallDimensions(i);
@@ -458,6 +640,7 @@ var RoomBuilderState = (function () {
                 output.push(dimensions);
             return output;
         }, []);
+        return dimensionsList.map(function (dimension) { return (__assign(__assign({}, dimension), { line: _this.transformLineToCanvas(dimension.line) })); });
     };
     RoomBuilderState.prototype.shiftAllFeaturesOnWall = function (index, shift) {
         var _this = this;
@@ -622,7 +805,8 @@ var RoomBuilderState = (function () {
         if (!wall)
             return undefined;
         var line = (0, geometry_1.getParallelLineSegmentAtDistance)(wall.line, constants_1.UI_ANCHOR_DISTANCE);
-        return (0, geometry_1.getMidpointOfLineSegment)(line);
+        var point = (0, geometry_1.getMidpointOfLineSegment)(line);
+        return this.transformPointToCanvas(point);
     };
     RoomBuilderState.prototype.getVertex = function (index) {
         return this.verticesList[index];
@@ -762,7 +946,8 @@ var RoomBuilderState = (function () {
         if (!feature)
             return;
         var line = (0, geometry_1.getParallelLineSegmentAtDistance)(feature.line, constants_1.UI_ANCHOR_DISTANCE);
-        return (0, geometry_1.getMidpointOfLineSegment)(line);
+        var point = (0, geometry_1.getMidpointOfLineSegment)(line);
+        return this.transformPointToCanvas(point);
     };
     RoomBuilderState.prototype.deleteElement = function (type, index) {
         if (type === types_2.IElements.VERTEX)
@@ -773,11 +958,11 @@ var RoomBuilderState = (function () {
             this.deleteFeature(type, index);
     };
     RoomBuilderState.prototype.getVertexInProximity = function (point) {
-        var _this = this;
         if (!point)
             return undefined;
+        var snapProximity = this.transformLengthFromCanvas(this._config.config.snapProximity);
         var index = this.verticesList.findIndex(function (vertex) {
-            return (0, geometry_1.arePointsWithinProximity)(vertex.point, point, _this._config.config.snapProximity);
+            return (0, geometry_1.arePointsWithinProximity)(vertex.point, point, snapProximity);
         });
         if (index === -1)
             return undefined;
@@ -835,17 +1020,17 @@ var RoomBuilderState = (function () {
         return __assign({ type: types_2.IElements.WALL, index: index }, intersection);
     };
     RoomBuilderState.prototype.snapPointToAbsoluteAngle = function (point, anchorPoint, angle) {
-        if (angle === void 0) { angle = 15; }
-        var snapProximity = this._config.config.snapProximity;
+        if (angle === void 0) { angle = 30; }
+        var snapProximity = this.transformLengthFromCanvas(this._config.config.snapProximity);
         if (Math.abs(point[0] - anchorPoint[0]) < snapProximity) {
             return {
-                type: 'Angle',
+                type: types_1.SNAPPING_TYPES.ANGLE,
                 point: [anchorPoint[0], point[1]],
             };
         }
         else if (Math.abs(point[1] - anchorPoint[1]) < snapProximity) {
             return {
-                type: 'Angle',
+                type: types_1.SNAPPING_TYPES.ANGLE,
                 point: [point[0], anchorPoint[1]],
             };
         }
@@ -855,7 +1040,7 @@ var RoomBuilderState = (function () {
             var radians = degrees * (Math.PI / 180);
             if ((0, geometry_1.getDistanceToLine)(anchorPoint, radians, point) < snapProximity)
                 return {
-                    type: 'Angle',
+                    type: types_1.SNAPPING_TYPES.ANGLE,
                     point: (0, geometry_1.closestPointOnLine)(anchorPoint, radians, point),
                 };
         }
@@ -866,6 +1051,7 @@ var RoomBuilderState = (function () {
         var vertex = this.getVertex(vertexIndex);
         if (!vertex)
             return undefined;
+        var snapProximity = this.transformLengthFromCanvas(this._config.config.snapProximity);
         var point = vertex.connections.reduce(function (output, connection) {
             var _a;
             var line = (_a = _this.getWall(connection[0])) === null || _a === void 0 ? void 0 : _a.line;
@@ -873,16 +1059,16 @@ var RoomBuilderState = (function () {
                 return output;
             var _b = output || updatedPoint, x = _b[0], y = _b[1];
             var _c = line[connection[1] === 0 ? 1 : 0], xAnchor = _c[0], yAnchor = _c[1];
-            if (Math.abs(x - xAnchor) < _this._config.config.snapProximity)
+            if (Math.abs(x - xAnchor) < snapProximity)
                 return [xAnchor, y];
-            else if (Math.abs(y - yAnchor) < _this._config.config.snapProximity)
+            else if (Math.abs(y - yAnchor) < snapProximity)
                 return [x, yAnchor];
             return output;
         }, undefined);
         if (!point)
             return point;
         return {
-            type: 'Angle',
+            type: types_1.SNAPPING_TYPES.ANGLE,
             point: point,
         };
     };
@@ -928,7 +1114,8 @@ var RoomBuilderState = (function () {
             return { type: types_2.IElements.WALL, index: wallInProximity };
         return undefined;
     };
-    RoomBuilderState.prototype.getClickedElement = function (point) {
+    RoomBuilderState.prototype.getClickedElement = function (cursorPoint) {
+        var point = this.transformPointFromCanvas(cursorPoint);
         var element = this.getElementAtPoint(point);
         if (!element)
             return;
@@ -975,8 +1162,6 @@ var RoomBuilderState = (function () {
     RoomBuilderState.prototype.setAttributesToState = function (attributes) {
         if (!attributes)
             return;
-        if (!attributes[this._config.attributes[types_2.IElements.WALL]])
-            return;
         this._attributesState = attributes;
         var data = (0, dataHandlers_1.prepAttributesIncoming)(attributes, this._config);
         this.walls = data[types_2.IElements.WALL];
@@ -997,8 +1182,9 @@ var RoomBuilderState = (function () {
         if (this._attributesState)
             this.setAttributesToState(this._attributesState);
     };
-    RoomBuilderState.prototype.highlightElementIfInProximity = function (canvas, point) {
+    RoomBuilderState.prototype.highlightElementIfInProximity = function (canvas, cursorPoint) {
         var _a, _b;
+        var point = this.transformPointFromCanvas(cursorPoint);
         var elementAtPoint = this.getElementAtPoint(point);
         if ((!elementAtPoint && !this._highlightedElement) ||
             Array.isArray(this._highlightedElement))
@@ -1014,13 +1200,14 @@ var RoomBuilderState = (function () {
     };
     RoomBuilderState.prototype.startDrawNewWall = function (startPoint) {
         var _a;
-        var snapPoint = this.getPointProximity(startPoint);
+        var point = this.transformPointFromCanvas(startPoint);
+        var snapPoint = this.getPointProximity(point);
         if ((snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.type) === types_2.IElements.WINDOW ||
             (snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.type) === types_2.IElements.OPENING ||
             (snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.type) === types_2.IElements.DOOR)
             return;
         this._newWall = {
-            start: (_a = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _a !== void 0 ? _a : startPoint,
+            start: (_a = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _a !== void 0 ? _a : point,
             snapStartTo: snapPoint,
         };
     };
@@ -1028,12 +1215,13 @@ var RoomBuilderState = (function () {
         var _a, _b, _c, _d, _e;
         if (!this._newWall)
             return;
-        var snapPoint = this.getPointProximity(endPoint);
+        var point = this.transformPointFromCanvas(endPoint);
+        var snapPoint = this.getPointProximity(point);
         if (!snapPoint && this._angleSnappingEnabled)
-            snapPoint = this.snapPointToAbsoluteAngle(endPoint, (_b = (_a = this._newWall.snapStartTo) === null || _a === void 0 ? void 0 : _a.point) !== null && _b !== void 0 ? _b : this._newWall.start);
+            snapPoint = this.snapPointToAbsoluteAngle(point, (_b = (_a = this._newWall.snapStartTo) === null || _a === void 0 ? void 0 : _a.point) !== null && _b !== void 0 ? _b : this._newWall.start);
         var wallLine = [
             this._newWall.start,
-            (_c = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _c !== void 0 ? _c : endPoint,
+            (_c = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _c !== void 0 ? _c : point,
         ];
         var validationData = {
             walls: this.walls,
@@ -1058,7 +1246,7 @@ var RoomBuilderState = (function () {
             case types_1.IErrorTypes.WARN:
             case null:
             default:
-                this._newWall.end = (_e = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _e !== void 0 ? _e : endPoint;
+                this._newWall.end = (_e = snapPoint === null || snapPoint === void 0 ? void 0 : snapPoint.point) !== null && _e !== void 0 ? _e : point;
                 this._newWall.snapEndTo = snapPoint;
                 this.drawRoom(canvas);
                 break;
@@ -1129,7 +1317,13 @@ var RoomBuilderState = (function () {
             });
         });
     };
-    RoomBuilderState.prototype.selectElementIfInProximity = function (canvas, point) {
+    RoomBuilderState.prototype.drawNewWallGuides = function (canvas, cursorPoint) {
+        var point = this.transformPointFromCanvas(cursorPoint);
+        if (canvas)
+            console.log(point);
+    };
+    RoomBuilderState.prototype.selectElementIfInProximity = function (canvas, cursorPoint) {
+        var point = this.transformPointFromCanvas(cursorPoint);
         var elementAtPoint = this.getElementAtPoint(point);
         if (!elementAtPoint || elementAtPoint.type === types_2.IElements.WALL)
             return;
@@ -1148,13 +1342,14 @@ var RoomBuilderState = (function () {
             return;
         if (!this._activeElement)
             return;
+        var point = this.transformPointFromCanvas(moveToPoint);
         var type = this._activeElement.type;
         if (type === types_2.IElements.VERTEX)
-            this.moveActiveVertex(canvas, moveToPoint);
+            this.moveActiveVertex(canvas, point);
         else if (type === types_2.IElements.WINDOW ||
             type === types_2.IElements.DOOR ||
             type === types_2.IElements.OPENING)
-            this.moveActiveFeature(canvas, moveToPoint);
+            this.moveActiveFeature(canvas, point);
     };
     RoomBuilderState.prototype.finishMoveActiveElement = function (canvas) {
         if (!this._activeElement)
@@ -1223,11 +1418,11 @@ var RoomBuilderState = (function () {
                 ((_c = this._activeElement) === null || _c === void 0 ? void 0 : _c.type) === types_2.IElements.DOOR ||
                 ((_d = this._activeElement) === null || _d === void 0 ? void 0 : _d.type) === types_2.IElements.OPENING))
             activeWallIndex = (_e = this.getFeature(this._activeElement.type, this._activeElement.index)) === null || _e === void 0 ? void 0 : _e.connectedTo[1];
-        (0, draw_1.drawRoom)(canvas, this.enclosedSpaces, this.walls, this.verticesList, this.features, this._showDimensions
-            ? this.getAllWallDimensions(activeWallIndex)
+        (0, draw_1.drawRoom)(canvas, this.enclosedSpacesToDraw, this.wallsToDraw, this.verticesListToDraw, this.featuresToDraw, this._showDimensions
+            ? this.getAllWallDimensionsToDraw(activeWallIndex)
             : undefined, selection, this._config.config);
         if (((_f = this._newWall) === null || _f === void 0 ? void 0 : _f.start) && ((_g = this._newWall) === null || _g === void 0 ? void 0 : _g.end)) {
-            (0, draw_1.drawNewWall)(canvas, [this._newWall.start, this._newWall.end], this._config.config.styles, this._errorElement ? types_1.IElementStyleModes.ERROR : undefined);
+            (0, draw_1.drawNewWall)(canvas, this.transformLineToCanvas([this._newWall.start, this._newWall.end]), this._config.config.styles, this._errorElement ? types_1.IElementStyleModes.ERROR : undefined);
         }
     };
     return RoomBuilderState;