@threekit-tools/treble 0.0.90-next-07 → 0.0.90-next-08

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

@@ -1,4 +1,4 @@
-import { IWalls, IVerticesState, ICoordinate2D, IFeature, IFeatures, ICoordinatesLine, ISpacesStateProps, IElementAddress, IFeatureName, IVertex, IFeaturesHydrated, IElementUi, IElementName, IActiveElement, IEnclosedSpace, IFeatureDoor, IWallsValidationConfig } from './types';
+import { IWalls, IVerticesState, ICoordinate2D, IFeature, IFeatures, ICoordinatesLine, ISpacesStateProps, IElementAddress, IFeatureName, IVertex, IFeaturesHydrated, IElementUi, IElementName, IActiveElement, IUnits, IEnclosedSpace, IFeatureDoor, IWallsValidationConfig } from './types';
 import type { IHydratedAttribute } from '../../types';
 export declare class SpacesState {
     private _config;
@@ -15,6 +15,7 @@ export declare class SpacesState {
     private _zoomLimits;
     private _translate;
     private _translateLimits;
+    private _unit;
     private _validationConfig;
     private _state;
     constructor(config: ISpacesStateProps);
@@ -56,6 +57,8 @@ export declare class SpacesState {
     get zoomMin(): number;
     get zoomMax(): number;
     setZoom(delta: number): number | undefined;
+    get unit(): IUnits;
+    setUnit(unit: IUnits): IUnits;
     get translate(): ICoordinate2D;
     get translateMin(): ICoordinate2D;
     get translateMax(): ICoordinate2D;

package/dist/hooks/useSpaces/SpacesState.js

@@ -365,10 +365,10 @@ var SpacesState = (function () {
             return loops.reduce(function (output, loop) {
                 var screenSpaceArea = Math.round((0, geometry_1.getPolygonArea)(loop));
                 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 convertedArea = (0, dataHandlers_1.convertAreaUnit)(area, types_1.IUnits.METER, _this.unit);
                 var enclosedSpace = {
                     loop: loop.map(function (point) { return _this.transformPointToCanvas(point); }),
-                    area: (0, dataHandlers_1.prepAreaForUser)(convertedArea, _this._config.config.unit),
+                    area: (0, dataHandlers_1.prepAreaForUser)(convertedArea, _this.unit),
                     center: loop.reduce(function (centerPoint, point) {
                         centerPoint[0] += point[0] / loop.length;
                         centerPoint[1] += point[1] / loop.length;
@@ -447,6 +447,17 @@ var SpacesState = (function () {
         this._zoom = preppedZoom;
         return this.zoom;
     };
+    Object.defineProperty(SpacesState.prototype, "unit", {
+        get: function () {
+            return this._unit;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SpacesState.prototype.setUnit = function (unit) {
+        this._unit = unit;
+        return this._unit;
+    };
     Object.defineProperty(SpacesState.prototype, "translate", {
         get: function () {
             return this._translate;
@@ -573,10 +584,10 @@ var SpacesState = (function () {
     };
     SpacesState.prototype.getWallDimensions = function (line) {
         var lineLength = (0, geometry_1.getLengthOfLineSegment)(line) * this._config.config.scale;
-        var convertedVal = (0, dataHandlers_1.convertLengthUnit)(lineLength, types_1.IUnits.METER, this._config.config.unit);
+        var convertedVal = (0, dataHandlers_1.convertLengthUnit)(lineLength, types_1.IUnits.METER, this.unit);
         return {
             line: line,
-            label: (0, dataHandlers_1.prepLengthForUser)(convertedVal, this._config.config.unit),
+            label: (0, dataHandlers_1.prepLengthForUser)(convertedVal, this.unit),
         };
     };
     SpacesState.prototype.getWallDimensionsByIndex = function (index) {
@@ -600,7 +611,7 @@ var SpacesState = (function () {
             var offset = _a.offset, length = _a.length;
             var featureLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(line, offset, length);
             var featureLength = (0, geometry_1.getLengthOfLineSegment)(featureLine);
-            var unit = constants_1.UNIT_LABELS[_this._config.config.unit];
+            var unit = constants_1.UNIT_LABELS[_this.unit];
             var scale = _this._config.config.scale;
             if (!i) {
                 var startLine = [line[0], featureLine[0]];

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

@@ -28,6 +28,16 @@ interface IUseSpaces {
         value: number;
         handleChange: (value: number) => void;
     };
+    unit: {
+        value: IUnits;
+        options: Array<{
+            label: string;
+            value: IUnits;
+            selected: boolean;
+            handleSelect: () => void;
+        }>;
+        handleChange: (unit: IUnits) => void;
+    };
     translate: {
         handleChange: (delta: ICoordinate2D) => void;
     };

package/dist/hooks/useSpaces/index.js

@@ -48,18 +48,19 @@ var store_1 = require("../../store");
 var spaces_1 = require("../../store/spaces");
 var useThreekitInitStatus_1 = __importDefault(require("../useThreekitInitStatus"));
 var useSpaces = function (props) {
-    var _a;
+    var _a, _b, _c, _d;
     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 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);
     var modeValue = (0, store_1.useThreekitSelector)(spaces_1.getMode);
     var showDimensions = (0, store_1.useThreekitSelector)(spaces_1.getShowDimensions);
     var angleSnappingEnabled = (0, store_1.useThreekitSelector)(spaces_1.getAngleSnappingEnabled);
-    var _b = (0, react_1.useState)(null), selectedElement = _b[0], setSelectedElement = _b[1];
-    var _c = (0, react_1.useState)(null), selectedWallAsset = _c[0], setSelectedWallAsset = _c[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);
@@ -74,26 +75,33 @@ var useSpaces = function (props) {
             : themes_1.default[themes_1.IThemes.DEFAULT],
     }, props.config);
     var attributeNames = Object.assign(constants_1.attributeNameDefaults, 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); };
+    var spacesRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
-        var _a;
+        spacesRef.current = new SpacesState_1.default(__assign(__assign({}, props), { config: preppedConfig, attributes: attributeNames }));
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c;
         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);
         var attributesDelinked = JSON.parse(JSON.stringify(attributesState));
-        spacesRef.current.setAttributesToState(attributesDelinked);
-        drawSpaces();
+        (_b = spacesRef.current) === null || _b === void 0 ? void 0 : _b.setAttributesToState(attributesDelinked);
+        (_c = spacesRef.current) === null || _c === void 0 ? void 0 : _c.drawSpaces(canvasRef.current);
     }, [attributesState]);
     (0, react_1.useEffect)(function () {
         var _a;
+        if (!spacesRef.current)
+            return;
         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);
     }, []);
     (0, react_1.useEffect)(function () {
         var _a, _b;
+        if (!spacesRef.current)
+            return;
         if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
             spacesRef.current.canvasDimensions = [
                 canvasRef.current.width,
@@ -129,6 +137,8 @@ var useSpaces = function (props) {
         };
     });
     (0, react_1.useEffect)(function () {
+        if (!spacesRef.current)
+            return;
         spacesRef.current.showDimensions = showDimensions;
         spacesRef.current.angleSnappingEnabled = angleSnappingEnabled;
         spacesRef.current.selectedElement = selectedElement
@@ -137,7 +147,7 @@ var useSpaces = function (props) {
                 index: selectedElement.path[1],
             }
             : null;
-        drawSpaces();
+        spacesRef.current.drawSpaces(canvasRef.current);
     }, [selectedElement, showDimensions, angleSnappingEnabled]);
     (0, react_1.useEffect)(function () {
         if (!hasLoaded)
@@ -152,11 +162,22 @@ var useSpaces = function (props) {
         }));
     }, [hasLoaded, JSON.stringify(props.layouts)]);
     var updateZoom = function (value) {
+        if (!spacesRef.current)
+            return;
         var newZoom = spacesRef.current.setZoom(value);
         if (!newZoom)
             return;
         dispatch((0, spaces_1.setZoom)(newZoom));
-        drawSpaces();
+        spacesRef.current.drawSpaces(canvasRef.current);
+    };
+    var updateUnit = function (unit) {
+        if (!spacesRef.current)
+            return;
+        var newUnit = spacesRef.current.setUnit(unit);
+        if (!newUnit)
+            return;
+        dispatch((0, spaces_1.setUnit)(newUnit));
+        spacesRef.current.drawSpaces(canvasRef.current);
     };
     var handleScrollToZoom = function (e) {
         var _a, _b;
@@ -170,6 +191,8 @@ var useSpaces = function (props) {
     var handleSelectModeHover = function (e) {
         if (!canvasRef.current)
             return;
+        if (!spacesRef.current)
+            return;
         if (modeValue !== types_1.IModes.SELECT)
             return;
         if (spacesRef.current.activeElement !== null)
@@ -183,6 +206,8 @@ var useSpaces = function (props) {
         var _a;
         if (!canvasRef.current)
             return;
+        if (!spacesRef.current)
+            return;
         if (modeValue !== types_1.IModes.SELECT)
             return;
         var cursorPoint = [e.offsetX, e.offsetY];
@@ -202,6 +227,8 @@ var useSpaces = function (props) {
         selectElementPending.current = element;
     };
     var handleMoveSelectedElement = function (e) {
+        if (!spacesRef.current)
+            return;
         if (modeValue !== types_1.IModes.SELECT)
             return;
         if (!canvasRef.current)
@@ -215,6 +242,8 @@ var useSpaces = function (props) {
             return;
         if (!canvasRef.current)
             return;
+        if (!spacesRef.current)
+            return;
         if (spacesRef.current.selectedElement || !translationAnchorRef.current)
             return;
         var delta = [
@@ -230,6 +259,8 @@ var useSpaces = function (props) {
             return;
         if (!canvasRef.current)
             return;
+        if (!spacesRef.current)
+            return;
         if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             spacesRef.current.cancelMoveActiveElement(canvasRef.current);
             return;
@@ -246,6 +277,8 @@ var useSpaces = function (props) {
     var handleDrawWallStart = function (e) {
         if (modeValue !== types_1.IModes.DRAW)
             return;
+        if (!spacesRef.current)
+            return;
         var cursorPoint = [e.offsetX, e.offsetY];
         spacesRef.current.startDrawNewWall(cursorPoint);
     };
@@ -254,6 +287,8 @@ var useSpaces = function (props) {
             return;
         if (!canvasRef.current)
             return;
+        if (!spacesRef.current)
+            return;
         var cursorPoint = [e.offsetX, e.offsetY];
         if (spacesRef.current.isDrawWallActive)
             spacesRef.current.drawNewWall(canvasRef.current, cursorPoint);
@@ -264,6 +299,8 @@ var useSpaces = function (props) {
             return;
         if (!canvasRef.current)
             return;
+        if (!spacesRef.current)
+            return;
         if (!selectedWallAsset)
             return;
         if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
@@ -276,13 +313,14 @@ var useSpaces = function (props) {
         if (!attribute)
             return undefined;
         var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { add: function (addToWallIndex, offset) {
-                return spacesRef.current.addFeature(type, {
+                var _a;
+                return (_a = spacesRef.current) === null || _a === void 0 ? void 0 : _a.addFeature(type, {
                     assetId: val.assetId,
                     length: constants_1.FEATURE_LENGTH,
                     offset: offset,
                 }, addToWallIndex);
             } })); });
-        var value = attribute.value.map(function (val, i) { return (__assign(__assign({}, val), { delete: function () { return 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) {
@@ -307,7 +345,9 @@ var useSpaces = function (props) {
     var handleSetMode = function (mode) {
         if (mode === modeValue)
             return;
-        drawSpaces();
+        if (!spacesRef.current)
+            return;
+        spacesRef.current.drawSpaces(canvasRef.current);
         dispatch((0, spaces_1.setMode)(mode));
         setSelectedElement(null);
     };
@@ -343,15 +383,17 @@ 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();
+        spacesRef.current.drawSpaces(canvasRef.current);
     };
     return {
-        draw: drawSpaces,
+        draw: ((_b = spacesRef.current) === null || _b === void 0 ? void 0 : _b.drawSpaces(canvasRef.current)) || (function () { }),
         canvasRef: canvasRef,
         selectedElement: selectedElement === null
             ? selectedElement
@@ -378,11 +420,21 @@ var useSpaces = function (props) {
             handleToggle: handleToggleAngleSnapping,
         },
         zoom: {
-            min: spacesRef.current.zoomMin,
-            max: spacesRef.current.zoomMax,
+            min: ((_c = spacesRef.current) === null || _c === void 0 ? void 0 : _c.zoomMin) || 1,
+            max: ((_d = spacesRef.current) === null || _d === void 0 ? void 0 : _d.zoomMax) || 1,
             value: zoom || constants_1.ZOOM_DEFAULT,
             handleChange: updateZoom,
         },
+        unit: {
+            value: unit,
+            options: [types_1.IUnits.FEET, types_1.IUnits.METER, types_1.IUnits.INCH, types_1.IUnits.CM].map(function (el) { return ({
+                value: el,
+                label: el,
+                selected: unit === el,
+                handleSelect: function () { return updateUnit(el); },
+            }); }),
+            handleChange: updateUnit,
+        },
         translate: {
             handleChange: handleChangeTranslate,
         },

package/dist/store/spaces.d.ts

@@ -1,6 +1,6 @@
 import { RootState, ThreekitDispatch } from './index';
 import { IConfiguration } from '../types';
-import { ICoordinate2D, IModes } from '../hooks/useSpaces/types';
+import { ICoordinate2D, IModes, IUnits } from '../hooks/useSpaces/types';
 interface ILayout {
     label: string;
     configuration: IConfiguration;
@@ -16,6 +16,7 @@ interface IAttributeMap {
 export interface SpacesState {
     mode: IModes;
     layouts: Array<ILayout>;
+    unit: IUnits;
     zoom: null | number;
     translation: null | ICoordinate2D;
     showDimensions: boolean;
@@ -23,6 +24,7 @@ export interface SpacesState {
 }
 export declare const setLayouts: import("@reduxjs/toolkit").ActionCreatorWithPayload<ILayout[], string>;
 export declare const setZoom: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
+export declare const setUnit: import("@reduxjs/toolkit").ActionCreatorWithPayload<IUnits, string>;
 export declare const setTranslation: import("@reduxjs/toolkit").ActionCreatorWithPayload<ICoordinate2D, string>;
 export declare const setMode: import("@reduxjs/toolkit").ActionCreatorWithPayload<IModes, string>;
 export declare const setShowDimensions: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
@@ -30,6 +32,7 @@ export declare const setAngleSnappingEnabled: import("@reduxjs/toolkit").ActionC
 declare const reducer: import("redux").Reducer<SpacesState, import("redux").AnyAction>;
 export declare const getMode: (state: RootState) => IModes;
 export declare const getLayouts: (state: RootState) => Array<ILayout>;
+export declare const getUnit: (state: RootState) => IUnits;
 export declare const getZoom: (state: RootState) => number | null;
 export declare const getTranslation: (state: RootState) => ICoordinate2D | null;
 export declare const getShowDimensions: (state: RootState) => boolean;

package/dist/store/spaces.js

@@ -59,13 +59,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hydrateLayouts = exports.getAngleSnappingEnabled = exports.getShowDimensions = exports.getTranslation = exports.getZoom = exports.getLayouts = exports.getMode = exports.setAngleSnappingEnabled = exports.setShowDimensions = exports.setMode = exports.setTranslation = exports.setZoom = exports.setLayouts = void 0;
+exports.hydrateLayouts = exports.getAngleSnappingEnabled = exports.getShowDimensions = exports.getTranslation = exports.getZoom = exports.getUnit = exports.getLayouts = exports.getMode = exports.setAngleSnappingEnabled = exports.setShowDimensions = exports.setMode = exports.setTranslation = exports.setUnit = exports.setZoom = exports.setLayouts = void 0;
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
 var types_1 = require("../hooks/useSpaces/types");
 var findLoops_1 = require("../hooks/useSpaces/findLoops");
 exports.setLayouts = (0, toolkit_1.createAction)('treble/spaces/set-layouts');
 exports.setZoom = (0, toolkit_1.createAction)('treble/spaces/set-zoom');
+exports.setUnit = (0, toolkit_1.createAction)('treble/spaces/set-unit');
 exports.setTranslation = (0, toolkit_1.createAction)('treble/spaces/set-translation');
 exports.setMode = (0, toolkit_1.createAction)('treble/spaces/set-mode');
 exports.setShowDimensions = (0, toolkit_1.createAction)('treble/spaces/set-show-dimensions');
@@ -73,6 +74,7 @@ exports.setAngleSnappingEnabled = (0, toolkit_1.createAction)('treble/spaces/set
 var initialState = {
     mode: types_1.IModes.SELECT,
     layouts: [],
+    unit: types_1.IUnits.FEET,
     zoom: null,
     translation: null,
     showDimensions: true,
@@ -88,6 +90,9 @@ var reducer = (0, toolkit_1.createSlice)({
         builder.addCase(exports.setLayouts, function (state, action) {
             return __assign(__assign({}, state), { layouts: action.payload });
         });
+        builder.addCase(exports.setUnit, function (state, action) {
+            return __assign(__assign({}, state), { unit: action.payload });
+        });
         builder.addCase(exports.setZoom, function (state, action) {
             return __assign(__assign({}, state), { zoom: action.payload });
         });
@@ -109,6 +114,8 @@ var getLayouts = function (state) {
     return state.spaces.layouts;
 };
 exports.getLayouts = getLayouts;
+var getUnit = function (state) { return state.spaces.unit; };
+exports.getUnit = getUnit;
 var getZoom = function (state) { return state.spaces.zoom; };
 exports.getZoom = getZoom;
 var getTranslation = function (state) { return state.spaces.translation; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.90-next-07",
+  "version": "0.0.90-next-08",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [