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

package/dist/hooks/useRoomBuilder/index.js

@@ -0,0 +1,411 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var types_1 = require("./types");
+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 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]
+            ? 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 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);
+        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);
+                document.removeEventListener('mouseup', handleDrawWallFinish);
+                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);
+            }
+        };
+    });
+    (0, react_1.useEffect)(function () {
+        roomBuilderRef.current.showDimensions = showDimensions;
+        roomBuilderRef.current.angleSnappingEnabled = angleSnappingEnabled;
+        roomBuilderRef.current.selectedElement = selectedElement
+            ? {
+                type: selectedElement.path[0],
+                index: selectedElement.path[1],
+            }
+            : 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;
+        if (modeValue !== types_1.IModes.SELECT)
+            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)
+                setSelectedElement(null);
+            return;
+        }
+        if (roomBuilderRef.current.activeElement ||
+            (selectedElement &&
+                JSON.stringify(element.path) !== JSON.stringify(selectedElement.path)))
+            setSelectedElement(null);
+        selectElementPending.current = element;
+    };
+    var handleMoveSelectedElement = function (e) {
+        if (modeValue !== types_1.IModes.SELECT)
+            return;
+        if (!canvasRef.current)
+            return;
+        var point = [e.offsetX, e.offsetY];
+        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)
+            return;
+        if (!canvasRef.current)
+            return;
+        if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            roomBuilderRef.current.cancelMoveActiveElement(canvasRef.current);
+            return;
+        }
+        roomBuilderRef.current.finishMoveActiveElement(canvasRef.current);
+        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)
+            return;
+        var cursorPoint = [e.offsetX, e.offsetY];
+        roomBuilderRef.current.startDrawNewWall(cursorPoint);
+    };
+    var handleDrawWallMouseMove = function (e) {
+        if (modeValue !== types_1.IModes.DRAW)
+            return;
+        if (!canvasRef.current)
+            return;
+        var cursorPoint = [e.offsetX, e.offsetY];
+        if (roomBuilderRef.current.isDrawWallActive)
+            roomBuilderRef.current.drawNewWall(canvasRef.current, cursorPoint);
+    };
+    var handleDrawWallFinish = function (e) {
+        var _a;
+        if (modeValue !== types_1.IModes.DRAW)
+            return;
+        if (!canvasRef.current)
+            return;
+        if (!selectedWallAsset)
+            return;
+        if (!((_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            roomBuilderRef.current.cancelDrawNewWall(canvasRef.current);
+            return;
+        }
+        roomBuilderRef.current.finishDrawNewWall(canvasRef.current, selectedWallAsset);
+    };
+    var prepFeatureAttributeForOutput = function (type, attribute) {
+        if (!attribute)
+            return undefined;
+        var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { add: function (addToWallIndex, offset) {
+                return roomBuilderRef.current.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 roomBuilderRef.current.deleteFeature(type, i); } })); });
+        return __assign(__assign({}, attribute), { values: values, value: value });
+    };
+    var prepWallAttributeForOutput = function (attribute) {
+        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));
+                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 _ = _a[0], attrName = _a[1];
+            return attrName === attributeName;
+        });
+        if (!elementAttr)
+            return;
+        return elementAttr[0];
+    };
+    var handleSetMode = function (mode) {
+        if (mode === modeValue)
+            return;
+        drawRoom();
+        dispatch((0, roomBuilder_1.setMode)(mode));
+        setSelectedElement(null);
+    };
+    var handleReset = function () {
+        var _a;
+        (_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteAll();
+        setSelectedElement(null);
+    };
+    var handleDeleteElement = function (type, index) {
+        var _a;
+        var elementType = type;
+        if (Object.values(attributeNames).includes(type)) {
+            var updatedType = getElementFromAttributeName(type);
+            if (!updatedType)
+                return;
+            elementType = updatedType;
+        }
+        (_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteElement(elementType, index);
+        setSelectedElement(null);
+    };
+    var handleToggleDimensions = function (val) {
+        if (val === undefined)
+            dispatch((0, roomBuilder_1.setShowDimensions)(!showDimensions));
+        else
+            dispatch((0, roomBuilder_1.setShowDimensions)(val));
+        setSelectedElement(null);
+    };
+    var handleToggleAngleSnapping = function (val) {
+        if (val === undefined)
+            dispatch((0, roomBuilder_1.setAngleSnappingEnabled)(!angleSnappingEnabled));
+        else
+            dispatch((0, roomBuilder_1.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]],
+                    selectedElement.path[1],
+                ], type: selectedElement.path[0] }),
+        mode: {
+            value: modeValue,
+            options: [types_1.IModes.SELECT, types_1.IModes.DRAW].map(function (el) { return ({
+                value: el,
+                label: el,
+                selected: modeValue === el,
+                handleSelect: function () { return handleSetMode(el); },
+            }); }),
+            handleChange: handleSetMode,
+        },
+        dimensions: {
+            enabled: showDimensions,
+            handleToggle: handleToggleDimensions,
+        },
+        angleSnapping: {
+            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]]),
+    };
+};
+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/messaging.d.ts

@@ -0,0 +1,8 @@
+export declare const errorMessages: {
+    addWallCollidingWithWall: () => string;
+    addWallCollidingWithFeature: (feature: string) => string;
+    featuresColliding: (feature: string) => string;
+    featureOutsideWallBounds: () => string;
+    wallsNotUnique: () => string;
+    wallTooShort: () => string;
+};

package/dist/hooks/useRoomBuilder/messaging.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.errorMessages = void 0;
+var constants_1 = require("./constants");
+exports.errorMessages = {
+    addWallCollidingWithWall: function () { return 'Wall cannot collide with another wall.'; },
+    addWallCollidingWithFeature: function (feature) {
+        return "Wall cannot collide with a ".concat(constants_1.FEATURE_LABELS[feature]);
+    },
+    featuresColliding: function (feature) {
+        return "There is already a ".concat(constants_1.FEATURE_LABELS[feature], " in that space.");
+    },
+    featureOutsideWallBounds: function () {
+        return 'Feature is too close to the end of the wall.';
+    },
+    wallsNotUnique: function () { return 'Cannot place a wall over an existing wall.'; },
+    wallTooShort: function () { return 'Wall is too short.'; },
+};

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

@@ -0,0 +1,12 @@
+import type { IRoomBuilderStyles } from './types';
+export declare enum IThemes {
+    DEFAULT = "default",
+    BLUEPRINT = "blueprint",
+    LIGHT = "light"
+}
+declare const _default: {
+    default: IRoomBuilderStyles;
+    blueprint: IRoomBuilderStyles;
+    light: IRoomBuilderStyles;
+};
+export default _default;