@threekit-tools/treble 0.0.87 → 0.0.89-next-001
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Treble/Treble.d.ts +2 -5
- package/dist/Treble/Treble.js +1 -7
- package/dist/components/AttributeValue/index.js +2 -0
- package/dist/components/Wishlist/index.d.ts +1 -1
- package/dist/components/Zoom/index.d.ts +1 -1
- package/dist/components/containers/formInputContainer.d.ts +1 -1
- package/dist/connection.d.ts +4 -0
- package/dist/connection.js +3 -0
- package/dist/hooks/useProductCache/index.d.ts +2 -1
- package/dist/hooks/useProductCache/index.js +43 -1
- package/dist/hooks/useResetProduct/index.d.ts +3 -0
- package/dist/hooks/useResetProduct/index.js +55 -0
- package/dist/hooks/useRoomBuilder/RoomBuilderState.d.ts +93 -0
- package/dist/hooks/useRoomBuilder/RoomBuilderState.js +1207 -0
- package/dist/hooks/useRoomBuilder/constants.d.ts +33 -0
- package/dist/hooks/useRoomBuilder/constants.js +40 -0
- package/dist/hooks/useRoomBuilder/dataHandlers.d.ts +15 -0
- package/dist/hooks/useRoomBuilder/dataHandlers.js +177 -0
- package/dist/hooks/useRoomBuilder/draw.d.ts +55 -0
- package/dist/hooks/useRoomBuilder/draw.js +551 -0
- package/dist/hooks/useRoomBuilder/geometry.d.ts +43 -0
- package/dist/hooks/useRoomBuilder/geometry.js +462 -0
- package/dist/hooks/useRoomBuilder/index.d.ts +40 -0
- package/dist/hooks/useRoomBuilder/index.js +299 -0
- package/dist/hooks/useRoomBuilder/messaging.d.ts +8 -0
- package/dist/hooks/useRoomBuilder/messaging.js +13 -0
- package/dist/hooks/useRoomBuilder/themes.d.ts +12 -0
- package/dist/hooks/useRoomBuilder/themes.js +270 -0
- package/dist/hooks/useRoomBuilder/types.d.ts +232 -0
- package/dist/hooks/useRoomBuilder/types.js +36 -0
- package/dist/hooks/useRoomBuilder/validators.d.ts +36 -0
- package/dist/hooks/useRoomBuilder/validators.js +362 -0
- package/dist/http/request.js +4 -1
- package/dist/icons/Add.d.ts +1 -1
- package/dist/icons/Add.js +3 -3
- package/dist/icons/Angle.d.ts +3 -0
- package/dist/icons/Angle.js +21 -0
- package/dist/icons/ArrowLeft.d.ts +1 -1
- package/dist/icons/ArrowLeft.js +3 -3
- package/dist/icons/ArrowRight.d.ts +1 -1
- package/dist/icons/ArrowRight.js +3 -3
- package/dist/icons/Camera.d.ts +1 -1
- package/dist/icons/Camera.js +3 -3
- package/dist/icons/CaretDown.d.ts +1 -1
- package/dist/icons/CaretDown.js +3 -3
- package/dist/icons/CaretLeft.d.ts +1 -1
- package/dist/icons/CaretLeft.js +3 -3
- package/dist/icons/CaretRight.d.ts +1 -1
- package/dist/icons/CaretRight.js +3 -3
- package/dist/icons/CaretUp.d.ts +1 -1
- package/dist/icons/CaretUp.js +3 -3
- package/dist/icons/Cart.d.ts +1 -1
- package/dist/icons/Cart.js +3 -3
- package/dist/icons/Checkmate.d.ts +1 -1
- package/dist/icons/Checkmate.js +3 -3
- package/dist/icons/Clipboard.d.ts +1 -1
- package/dist/icons/Clipboard.js +3 -3
- package/dist/icons/ColorPicker.d.ts +1 -1
- package/dist/icons/ColorPicker.js +3 -3
- package/dist/icons/Copy.d.ts +1 -1
- package/dist/icons/Copy.js +3 -3
- package/dist/icons/Cursor.d.ts +3 -0
- package/dist/icons/Cursor.js +21 -0
- package/dist/icons/Delete.d.ts +1 -1
- package/dist/icons/Delete.js +3 -3
- package/dist/icons/Door.d.ts +3 -0
- package/dist/icons/Door.js +22 -0
- package/dist/icons/DoubleCaretLeft.d.ts +1 -1
- package/dist/icons/DoubleCaretLeft.js +3 -3
- package/dist/icons/DoubleCaretRight.d.ts +1 -1
- package/dist/icons/DoubleCaretRight.js +3 -3
- package/dist/icons/Download.d.ts +1 -1
- package/dist/icons/Download.js +3 -3
- package/dist/icons/Drag.d.ts +1 -1
- package/dist/icons/Drag.js +3 -3
- package/dist/icons/Draggable.d.ts +1 -1
- package/dist/icons/Draggable.js +3 -3
- package/dist/icons/Edit.d.ts +1 -1
- package/dist/icons/Edit.js +3 -3
- package/dist/icons/Heart.d.ts +1 -1
- package/dist/icons/Heart.js +3 -3
- package/dist/icons/Image.d.ts +1 -1
- package/dist/icons/Image.js +3 -3
- package/dist/icons/Info.d.ts +1 -1
- package/dist/icons/Info.js +3 -3
- package/dist/icons/Layout.d.ts +3 -0
- package/dist/icons/Layout.js +21 -0
- package/dist/icons/Mail.d.ts +1 -1
- package/dist/icons/Mail.js +3 -3
- package/dist/icons/Menu.d.ts +1 -1
- package/dist/icons/Menu.js +3 -3
- package/dist/icons/More.d.ts +1 -1
- package/dist/icons/More.js +3 -3
- package/dist/icons/NewWindow.d.ts +1 -1
- package/dist/icons/NewWindow.js +3 -3
- package/dist/icons/Opening.d.ts +3 -0
- package/dist/icons/Opening.js +21 -0
- package/dist/icons/Pause.d.ts +1 -1
- package/dist/icons/Pause.js +3 -3
- package/dist/icons/Play.d.ts +1 -1
- package/dist/icons/Play.js +3 -3
- package/dist/icons/Redo.d.ts +1 -1
- package/dist/icons/Redo.js +3 -3
- package/dist/icons/Remove.d.ts +1 -1
- package/dist/icons/Remove.js +3 -3
- package/dist/icons/Ruler.d.ts +1 -1
- package/dist/icons/Ruler.js +3 -3
- package/dist/icons/Search.d.ts +1 -1
- package/dist/icons/Search.js +3 -3
- package/dist/icons/Settings.d.ts +1 -1
- package/dist/icons/Settings.js +3 -3
- package/dist/icons/Share.d.ts +1 -1
- package/dist/icons/Share.js +3 -3
- package/dist/icons/Switch.d.ts +1 -1
- package/dist/icons/Switch.js +3 -3
- package/dist/icons/Tag.d.ts +1 -1
- package/dist/icons/Tag.js +3 -3
- package/dist/icons/TrashCan.d.ts +3 -0
- package/dist/icons/TrashCan.js +21 -0
- package/dist/icons/TrashCanAlt.d.ts +3 -0
- package/dist/icons/TrashCanAlt.js +21 -0
- package/dist/icons/Undo.d.ts +1 -1
- package/dist/icons/Undo.js +3 -3
- package/dist/icons/Wall.d.ts +3 -0
- package/dist/icons/Wall.js +21 -0
- package/dist/icons/Window.d.ts +3 -0
- package/dist/icons/Window.js +22 -0
- package/dist/icons/Wishlist.d.ts +1 -1
- package/dist/icons/Wishlist.js +3 -3
- package/dist/icons/ZoomIn.d.ts +1 -1
- package/dist/icons/ZoomIn.js +3 -3
- package/dist/icons/ZoomOut.d.ts +1 -1
- package/dist/icons/ZoomOut.js +3 -3
- package/dist/icons/index.d.ts +2 -6
- package/dist/icons/index.js +18 -0
- package/dist/icons/types.d.ts +7 -0
- package/dist/icons/types.js +2 -0
- package/dist/index.d.ts +11 -1
- package/dist/index.js +23 -2
- package/dist/store/product.d.ts +5 -4
- package/dist/store/product.js +43 -26
- package/dist/store/treble.js +6 -3
- package/dist/types.d.ts +47 -7
- package/dist/types.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
var react_1 = require("react");
|
|
41
|
+
var types_1 = require("./types");
|
|
42
|
+
var useConfigurator_1 = __importDefault(require("../useConfigurator"));
|
|
43
|
+
var RoomBuilderState_1 = __importDefault(require("./RoomBuilderState"));
|
|
44
|
+
var constants_1 = require("./constants");
|
|
45
|
+
var themes_1 = __importStar(require("./themes"));
|
|
46
|
+
var useRoomBuilder = function (props) {
|
|
47
|
+
var _a;
|
|
48
|
+
var attributesState = (0, useConfigurator_1.default)()[0];
|
|
49
|
+
var _b = (0, react_1.useState)(types_1.IModes.DRAW), modeValue = _b[0], setMode = _b[1];
|
|
50
|
+
var _c = (0, react_1.useState)(true), showDimensions = _c[0], setShowDimensions = _c[1];
|
|
51
|
+
var _d = (0, react_1.useState)(true), angleSnappingEnabled = _d[0], setAngleSnappingEnabled = _d[1];
|
|
52
|
+
var _e = (0, react_1.useState)(null), selectedElement = _e[0], setSelectedElement = _e[1];
|
|
53
|
+
var _f = (0, react_1.useState)(null), selectedWallAsset = _f[0], setSelectedWallAsset = _f[1];
|
|
54
|
+
var canvasRef = (0, react_1.useRef)(null);
|
|
55
|
+
var selectElementPending = (0, react_1.useRef)(null);
|
|
56
|
+
var preppedConfig = Object.assign({
|
|
57
|
+
scale: constants_1.SCALE,
|
|
58
|
+
unit: types_1.IUnits.FEET,
|
|
59
|
+
snapProximity: constants_1.SNAP_PROXIMITY,
|
|
60
|
+
styles: ((_a = props.config) === null || _a === void 0 ? void 0 : _a.theme) && themes_1.default[props.config.theme]
|
|
61
|
+
? themes_1.default[props.config.theme]
|
|
62
|
+
: themes_1.default[themes_1.IThemes.DEFAULT],
|
|
63
|
+
}, props.config);
|
|
64
|
+
var roomBuilderRef = (0, react_1.useRef)(new RoomBuilderState_1.default(__assign(__assign({}, props), { config: preppedConfig })));
|
|
65
|
+
var drawRoom = function () { return roomBuilderRef.current.drawRoom(canvasRef.current); };
|
|
66
|
+
(0, react_1.useEffect)(function () {
|
|
67
|
+
if (!canvasRef.current)
|
|
68
|
+
return;
|
|
69
|
+
canvasRef.current.height = constants_1.CANVAS_HEIGHT;
|
|
70
|
+
canvasRef.current.width = constants_1.CANVAS_WIDTH;
|
|
71
|
+
}, [canvasRef.current]);
|
|
72
|
+
(0, react_1.useEffect)(function () {
|
|
73
|
+
var _a;
|
|
74
|
+
if (!selectedWallAsset &&
|
|
75
|
+
(attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WALL]]))
|
|
76
|
+
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);
|
|
77
|
+
var attributesDelinked = JSON.parse(JSON.stringify(attributesState));
|
|
78
|
+
roomBuilderRef.current.setAttributesToState(attributesDelinked);
|
|
79
|
+
drawRoom();
|
|
80
|
+
}, [attributesState]);
|
|
81
|
+
(0, react_1.useEffect)(function () {
|
|
82
|
+
if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
|
|
83
|
+
canvasRef.current.addEventListener('mousedown', handleDrawWallStart);
|
|
84
|
+
canvasRef.current.addEventListener('mousemove', handleDrawWallMouseMove);
|
|
85
|
+
canvasRef.current.addEventListener('mouseup', handleDrawWallFinish);
|
|
86
|
+
canvasRef.current.addEventListener('mousemove', handleSelectModeHover);
|
|
87
|
+
canvasRef.current.addEventListener('mousedown', handleSelectElement);
|
|
88
|
+
canvasRef.current.addEventListener('mousemove', handleMoveSelectedElement);
|
|
89
|
+
canvasRef.current.addEventListener('mouseup', handleSetSelectedElement);
|
|
90
|
+
}
|
|
91
|
+
return function () {
|
|
92
|
+
if (canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current) {
|
|
93
|
+
canvasRef.current.removeEventListener('mousedown', handleDrawWallStart);
|
|
94
|
+
canvasRef.current.removeEventListener('mousemove', handleDrawWallMouseMove);
|
|
95
|
+
canvasRef.current.removeEventListener('mouseup', handleDrawWallFinish);
|
|
96
|
+
canvasRef.current.removeEventListener('mousemove', handleSelectModeHover);
|
|
97
|
+
canvasRef.current.removeEventListener('mousedown', handleSelectElement);
|
|
98
|
+
canvasRef.current.removeEventListener('mousemove', handleMoveSelectedElement);
|
|
99
|
+
canvasRef.current.removeEventListener('mouseup', handleSetSelectedElement);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
});
|
|
103
|
+
(0, react_1.useEffect)(function () {
|
|
104
|
+
roomBuilderRef.current.showDimensions = showDimensions;
|
|
105
|
+
roomBuilderRef.current.angleSnappingEnabled = angleSnappingEnabled;
|
|
106
|
+
roomBuilderRef.current.selectedElement = selectedElement
|
|
107
|
+
? {
|
|
108
|
+
type: selectedElement.path[0],
|
|
109
|
+
index: selectedElement.path[1],
|
|
110
|
+
}
|
|
111
|
+
: null;
|
|
112
|
+
drawRoom();
|
|
113
|
+
}, [selectedElement, showDimensions, angleSnappingEnabled]);
|
|
114
|
+
var handleSelectModeHover = function (e) {
|
|
115
|
+
if (!canvasRef.current)
|
|
116
|
+
return;
|
|
117
|
+
if (modeValue !== types_1.IModes.SELECT)
|
|
118
|
+
return;
|
|
119
|
+
if (roomBuilderRef.current.activeElement !== null)
|
|
120
|
+
return;
|
|
121
|
+
var cursorPoint = [e.offsetX, e.offsetY];
|
|
122
|
+
roomBuilderRef.current.highlightElementIfInProximity(canvasRef.current, cursorPoint);
|
|
123
|
+
};
|
|
124
|
+
var handleSelectElement = function (e) {
|
|
125
|
+
if (!canvasRef.current)
|
|
126
|
+
return;
|
|
127
|
+
if (modeValue !== types_1.IModes.SELECT)
|
|
128
|
+
return;
|
|
129
|
+
var cursorPoint = [e.offsetX, e.offsetY];
|
|
130
|
+
roomBuilderRef.current.selectElementIfInProximity(canvasRef.current, cursorPoint);
|
|
131
|
+
var element = roomBuilderRef.current.getClickedElement(cursorPoint);
|
|
132
|
+
if (!element) {
|
|
133
|
+
if (selectedElement !== null)
|
|
134
|
+
setSelectedElement(null);
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
if (roomBuilderRef.current.activeElement ||
|
|
138
|
+
(selectedElement &&
|
|
139
|
+
JSON.stringify(element.path) !== JSON.stringify(selectedElement.path)))
|
|
140
|
+
setSelectedElement(null);
|
|
141
|
+
selectElementPending.current = element;
|
|
142
|
+
};
|
|
143
|
+
var handleMoveSelectedElement = function (e) {
|
|
144
|
+
if (modeValue !== types_1.IModes.SELECT)
|
|
145
|
+
return;
|
|
146
|
+
if (!canvasRef.current)
|
|
147
|
+
return;
|
|
148
|
+
var point = [e.offsetX, e.offsetY];
|
|
149
|
+
roomBuilderRef.current.moveActiveElement(canvasRef.current, point);
|
|
150
|
+
selectElementPending.current = null;
|
|
151
|
+
};
|
|
152
|
+
var handleSetSelectedElement = function () {
|
|
153
|
+
if (modeValue !== types_1.IModes.SELECT)
|
|
154
|
+
return;
|
|
155
|
+
if (!canvasRef.current)
|
|
156
|
+
return;
|
|
157
|
+
roomBuilderRef.current.finishMoveActiveElement(canvasRef.current);
|
|
158
|
+
if (selectElementPending.current) {
|
|
159
|
+
setSelectedElement(selectElementPending.current);
|
|
160
|
+
selectElementPending.current = null;
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
var handleDrawWallStart = function (e) {
|
|
164
|
+
if (modeValue !== types_1.IModes.DRAW)
|
|
165
|
+
return;
|
|
166
|
+
var cursorPoint = [e.offsetX, e.offsetY];
|
|
167
|
+
roomBuilderRef.current.startDrawNewWall(cursorPoint);
|
|
168
|
+
};
|
|
169
|
+
var handleDrawWallMouseMove = function (e) {
|
|
170
|
+
if (modeValue !== types_1.IModes.DRAW)
|
|
171
|
+
return;
|
|
172
|
+
if (!canvasRef.current)
|
|
173
|
+
return;
|
|
174
|
+
var cursorPoint = [e.offsetX, e.offsetY];
|
|
175
|
+
roomBuilderRef.current.drawNewWall(canvasRef.current, cursorPoint);
|
|
176
|
+
};
|
|
177
|
+
var handleDrawWallFinish = function () {
|
|
178
|
+
if (modeValue !== types_1.IModes.DRAW)
|
|
179
|
+
return;
|
|
180
|
+
if (!canvasRef.current)
|
|
181
|
+
return;
|
|
182
|
+
if (!selectedWallAsset)
|
|
183
|
+
return;
|
|
184
|
+
roomBuilderRef.current.finishDrawNewWall(canvasRef.current, selectedWallAsset);
|
|
185
|
+
};
|
|
186
|
+
var prepFeatureAttributeForOutput = function (type, attribute) {
|
|
187
|
+
if (!attribute)
|
|
188
|
+
return undefined;
|
|
189
|
+
var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { add: function (addToWallIndex, offset) {
|
|
190
|
+
return roomBuilderRef.current.addFeature(type, {
|
|
191
|
+
assetId: val.assetId,
|
|
192
|
+
length: constants_1.FEATURE_LENGTH,
|
|
193
|
+
offset: offset,
|
|
194
|
+
}, addToWallIndex);
|
|
195
|
+
} })); });
|
|
196
|
+
var value = attribute.value.map(function (val, i) { return (__assign(__assign({}, val), { delete: function () { return roomBuilderRef.current.deleteFeature(type, i); } })); });
|
|
197
|
+
return __assign(__assign({}, attribute), { values: values, value: value });
|
|
198
|
+
};
|
|
199
|
+
var prepWallAttributeForOutput = function (attribute) {
|
|
200
|
+
if (!attribute)
|
|
201
|
+
return undefined;
|
|
202
|
+
var values = attribute.values.map(function (val) { return (__assign(__assign({}, val), { selected: val.assetId === selectedWallAsset, selectToDraw: function () {
|
|
203
|
+
setMode(types_1.IModes.DRAW);
|
|
204
|
+
setSelectedWallAsset(val.assetId);
|
|
205
|
+
} })); });
|
|
206
|
+
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); } })); });
|
|
207
|
+
return __assign(__assign({}, attribute), { values: values, value: value });
|
|
208
|
+
};
|
|
209
|
+
var getElementFromAttributeName = function (attributeName) {
|
|
210
|
+
var elementAttr = Object.entries(props.attributes).find(function (_a) {
|
|
211
|
+
var _ = _a[0], attrName = _a[1];
|
|
212
|
+
return attrName === attributeName;
|
|
213
|
+
});
|
|
214
|
+
if (!elementAttr)
|
|
215
|
+
return;
|
|
216
|
+
return elementAttr[0];
|
|
217
|
+
};
|
|
218
|
+
var handleSetMode = function (mode) {
|
|
219
|
+
if (mode === modeValue)
|
|
220
|
+
return;
|
|
221
|
+
drawRoom();
|
|
222
|
+
setMode(mode);
|
|
223
|
+
setSelectedElement(null);
|
|
224
|
+
};
|
|
225
|
+
var handleDeleteAll = function () {
|
|
226
|
+
var _a;
|
|
227
|
+
(_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteAll();
|
|
228
|
+
setSelectedElement(null);
|
|
229
|
+
};
|
|
230
|
+
var handleDeleteElement = function (type, index) {
|
|
231
|
+
var _a;
|
|
232
|
+
var elementType = type;
|
|
233
|
+
if (Object.values(props.attributes).includes(type)) {
|
|
234
|
+
var updatedType = getElementFromAttributeName(type);
|
|
235
|
+
if (!updatedType)
|
|
236
|
+
return;
|
|
237
|
+
elementType = updatedType;
|
|
238
|
+
}
|
|
239
|
+
(_a = roomBuilderRef.current) === null || _a === void 0 ? void 0 : _a.deleteElement(elementType, index);
|
|
240
|
+
setSelectedElement(null);
|
|
241
|
+
};
|
|
242
|
+
var handleToggleDimensions = function (val) {
|
|
243
|
+
if (val === undefined)
|
|
244
|
+
setShowDimensions(!showDimensions);
|
|
245
|
+
else
|
|
246
|
+
setShowDimensions(val);
|
|
247
|
+
setSelectedElement(null);
|
|
248
|
+
};
|
|
249
|
+
var handleToggleAngleSnapping = function (val) {
|
|
250
|
+
if (val === undefined)
|
|
251
|
+
setAngleSnappingEnabled(!angleSnappingEnabled);
|
|
252
|
+
else
|
|
253
|
+
setAngleSnappingEnabled(val);
|
|
254
|
+
setSelectedElement(null);
|
|
255
|
+
};
|
|
256
|
+
return {
|
|
257
|
+
canvasRef: canvasRef,
|
|
258
|
+
selectedElement: selectedElement === null
|
|
259
|
+
? selectedElement
|
|
260
|
+
: __assign(__assign({}, selectedElement), { path: [
|
|
261
|
+
props.attributes[selectedElement.path[0]],
|
|
262
|
+
selectedElement.path[1],
|
|
263
|
+
] }),
|
|
264
|
+
mode: {
|
|
265
|
+
value: modeValue,
|
|
266
|
+
options: [types_1.IModes.DRAW, types_1.IModes.SELECT].map(function (el) { return ({
|
|
267
|
+
value: el,
|
|
268
|
+
label: el,
|
|
269
|
+
selected: modeValue === el,
|
|
270
|
+
handleSelect: function () { return handleSetMode(el); },
|
|
271
|
+
}); }),
|
|
272
|
+
handleChange: handleSetMode,
|
|
273
|
+
},
|
|
274
|
+
dimensions: {
|
|
275
|
+
show: showDimensions,
|
|
276
|
+
handleToggle: handleToggleDimensions,
|
|
277
|
+
},
|
|
278
|
+
snapping: {
|
|
279
|
+
enabled: angleSnappingEnabled,
|
|
280
|
+
handleToggle: handleToggleAngleSnapping,
|
|
281
|
+
},
|
|
282
|
+
deleteAll: handleDeleteAll,
|
|
283
|
+
deleteElement: handleDeleteElement,
|
|
284
|
+
walls: prepWallAttributeForOutput(attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WALL]]),
|
|
285
|
+
windows: props.attributes[types_1.IElements.WINDOW]
|
|
286
|
+
? prepFeatureAttributeForOutput(types_1.IElements.WINDOW, attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.WINDOW]])
|
|
287
|
+
: undefined,
|
|
288
|
+
doors: props.attributes[types_1.IElements.DOOR]
|
|
289
|
+
? prepFeatureAttributeForOutput(types_1.IElements.DOOR, attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.DOOR]])
|
|
290
|
+
: undefined,
|
|
291
|
+
openings: props.attributes[types_1.IElements.OPENING]
|
|
292
|
+
? prepFeatureAttributeForOutput(types_1.IElements.OPENING, attributesState === null || attributesState === void 0 ? void 0 : attributesState[props.attributes[types_1.IElements.OPENING]])
|
|
293
|
+
: undefined,
|
|
294
|
+
};
|
|
295
|
+
};
|
|
296
|
+
useRoomBuilder.themes = themes_1.IThemes;
|
|
297
|
+
useRoomBuilder.units = types_1.IUnits;
|
|
298
|
+
useRoomBuilder.modes = types_1.IModes;
|
|
299
|
+
exports.default = useRoomBuilder;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const errorMessages: {
|
|
2
|
+
addWallCollidingWithWall: () => string;
|
|
3
|
+
addWallCollidingWithFeature: () => string;
|
|
4
|
+
featuresColliding: () => string;
|
|
5
|
+
featureOutsideWallBounds: () => string;
|
|
6
|
+
wallsNotUnique: () => string;
|
|
7
|
+
wallTooShort: () => string;
|
|
8
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.errorMessages = void 0;
|
|
4
|
+
exports.errorMessages = {
|
|
5
|
+
addWallCollidingWithWall: function () { return 'Wall colliding with other wall'; },
|
|
6
|
+
addWallCollidingWithFeature: function () {
|
|
7
|
+
return 'Cannot add a wall that collides with a feature on the wall';
|
|
8
|
+
},
|
|
9
|
+
featuresColliding: function () { return 'Feature is colliding with another feature'; },
|
|
10
|
+
featureOutsideWallBounds: function () { return 'Feature is too close to the end of the wall'; },
|
|
11
|
+
wallsNotUnique: function () { return 'walls cannot overlap'; },
|
|
12
|
+
wallTooShort: function () { return 'wall too short'; },
|
|
13
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { IRoomBuilderStyles } from './types';
|
|
2
|
+
export declare enum IThemes {
|
|
3
|
+
DEFAULT = "default",
|
|
4
|
+
BLUEPRINT = "blueprint",
|
|
5
|
+
LIGHT = "light"
|
|
6
|
+
}
|
|
7
|
+
declare const _default: {
|
|
8
|
+
default: IRoomBuilderStyles;
|
|
9
|
+
blueprint: IRoomBuilderStyles;
|
|
10
|
+
light: IRoomBuilderStyles;
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var _a;
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.IThemes = void 0;
|
|
5
|
+
var IThemes;
|
|
6
|
+
(function (IThemes) {
|
|
7
|
+
IThemes["DEFAULT"] = "default";
|
|
8
|
+
IThemes["BLUEPRINT"] = "blueprint";
|
|
9
|
+
IThemes["LIGHT"] = "light";
|
|
10
|
+
})(IThemes = exports.IThemes || (exports.IThemes = {}));
|
|
11
|
+
var HIGHLIGHT_COLOR = '#36738E';
|
|
12
|
+
var ACTIVE_COLOR = 'green';
|
|
13
|
+
var ERROR_COLOR = 'red';
|
|
14
|
+
var DEFAULT_WALL_THICKNESS = 18;
|
|
15
|
+
var DEFAULT_VERTEX_RADIUS = (DEFAULT_WALL_THICKNESS - 6) / 2;
|
|
16
|
+
var DEFAULT_FEATURE_THICKNESS = DEFAULT_WALL_THICKNESS + 6;
|
|
17
|
+
var defaultTheme = {
|
|
18
|
+
grid: {
|
|
19
|
+
gridStepGap: 12,
|
|
20
|
+
lineThickness: 1,
|
|
21
|
+
secondaryLineThickness: 2,
|
|
22
|
+
lineColor: '#ddd',
|
|
23
|
+
backgroundColor: '#fff',
|
|
24
|
+
secondaryLineIncrement: 4,
|
|
25
|
+
},
|
|
26
|
+
floor: {
|
|
27
|
+
color: '#eee',
|
|
28
|
+
},
|
|
29
|
+
dimensions: {
|
|
30
|
+
padding: DEFAULT_WALL_THICKNESS / 2 + 24,
|
|
31
|
+
lineThickness: 1,
|
|
32
|
+
lineColor: '#444',
|
|
33
|
+
fontSize: 14,
|
|
34
|
+
font: 'Helvetica',
|
|
35
|
+
textColor: '#444',
|
|
36
|
+
textBackgroundColor: 'white',
|
|
37
|
+
},
|
|
38
|
+
wall: {
|
|
39
|
+
fill: '#d9d9d9',
|
|
40
|
+
stroke: '#d9d9d9',
|
|
41
|
+
strokeWidth: 0,
|
|
42
|
+
thickness: DEFAULT_WALL_THICKNESS,
|
|
43
|
+
highlight: {
|
|
44
|
+
fill: HIGHLIGHT_COLOR,
|
|
45
|
+
stroke: HIGHLIGHT_COLOR,
|
|
46
|
+
},
|
|
47
|
+
active: {
|
|
48
|
+
fill: ACTIVE_COLOR,
|
|
49
|
+
stroke: ACTIVE_COLOR,
|
|
50
|
+
},
|
|
51
|
+
error: {
|
|
52
|
+
fill: ERROR_COLOR,
|
|
53
|
+
stroke: ERROR_COLOR,
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
vertex: {
|
|
57
|
+
innerFill: '#36738E',
|
|
58
|
+
outerFill: 'white',
|
|
59
|
+
stroke: '#36738E',
|
|
60
|
+
strokeWidth: 2,
|
|
61
|
+
outerRadius: DEFAULT_VERTEX_RADIUS,
|
|
62
|
+
innerRadius: DEFAULT_VERTEX_RADIUS / 2,
|
|
63
|
+
highlight: {
|
|
64
|
+
innerFill: HIGHLIGHT_COLOR,
|
|
65
|
+
outerFill: HIGHLIGHT_COLOR,
|
|
66
|
+
stroke: HIGHLIGHT_COLOR,
|
|
67
|
+
},
|
|
68
|
+
active: {
|
|
69
|
+
innerFill: ACTIVE_COLOR,
|
|
70
|
+
outerFill: ACTIVE_COLOR,
|
|
71
|
+
stroke: ACTIVE_COLOR,
|
|
72
|
+
},
|
|
73
|
+
error: {
|
|
74
|
+
innerFill: ERROR_COLOR,
|
|
75
|
+
outerFill: ERROR_COLOR,
|
|
76
|
+
stroke: ERROR_COLOR,
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
feature: {
|
|
80
|
+
fill: '#888',
|
|
81
|
+
stroke: '#888',
|
|
82
|
+
strokeWidth: 0,
|
|
83
|
+
thickness: DEFAULT_FEATURE_THICKNESS,
|
|
84
|
+
highlight: {
|
|
85
|
+
fill: HIGHLIGHT_COLOR,
|
|
86
|
+
stroke: HIGHLIGHT_COLOR,
|
|
87
|
+
},
|
|
88
|
+
active: {
|
|
89
|
+
fill: ACTIVE_COLOR,
|
|
90
|
+
stroke: ACTIVE_COLOR,
|
|
91
|
+
},
|
|
92
|
+
error: {
|
|
93
|
+
fill: ERROR_COLOR,
|
|
94
|
+
stroke: ERROR_COLOR,
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
};
|
|
98
|
+
var BLUEPRINT_WALL_THICKNESS = 22;
|
|
99
|
+
var BLUEPRINT_VERTEX_RADIUS = (BLUEPRINT_WALL_THICKNESS - 8) / 2;
|
|
100
|
+
var BLUEPRINT_FEATURE_THICKNESS = BLUEPRINT_WALL_THICKNESS + 6;
|
|
101
|
+
var blueprint = {
|
|
102
|
+
grid: {
|
|
103
|
+
gridStepGap: 20,
|
|
104
|
+
lineThickness: 1,
|
|
105
|
+
secondaryLineThickness: 2,
|
|
106
|
+
lineColor: '#fff',
|
|
107
|
+
backgroundColor: '#37588B',
|
|
108
|
+
secondaryLineIncrement: 3,
|
|
109
|
+
},
|
|
110
|
+
floor: {
|
|
111
|
+
color: '#eee',
|
|
112
|
+
},
|
|
113
|
+
dimensions: {
|
|
114
|
+
padding: BLUEPRINT_WALL_THICKNESS / 2 + 24,
|
|
115
|
+
lineThickness: 1,
|
|
116
|
+
lineColor: '#fff',
|
|
117
|
+
fontSize: 14,
|
|
118
|
+
font: 'Helvetica',
|
|
119
|
+
textColor: '#444',
|
|
120
|
+
textBackgroundColor: '#fff',
|
|
121
|
+
},
|
|
122
|
+
wall: {
|
|
123
|
+
fill: '#848484',
|
|
124
|
+
stroke: '#fff',
|
|
125
|
+
strokeWidth: 1,
|
|
126
|
+
thickness: BLUEPRINT_WALL_THICKNESS,
|
|
127
|
+
highlight: {
|
|
128
|
+
fill: HIGHLIGHT_COLOR,
|
|
129
|
+
stroke: HIGHLIGHT_COLOR,
|
|
130
|
+
},
|
|
131
|
+
active: {
|
|
132
|
+
fill: ACTIVE_COLOR,
|
|
133
|
+
stroke: ACTIVE_COLOR,
|
|
134
|
+
},
|
|
135
|
+
error: {
|
|
136
|
+
fill: ERROR_COLOR,
|
|
137
|
+
stroke: ERROR_COLOR,
|
|
138
|
+
},
|
|
139
|
+
},
|
|
140
|
+
vertex: {
|
|
141
|
+
innerFill: '#fff',
|
|
142
|
+
outerFill: '#fff',
|
|
143
|
+
stroke: '#36738E',
|
|
144
|
+
strokeWidth: 0,
|
|
145
|
+
outerRadius: BLUEPRINT_VERTEX_RADIUS,
|
|
146
|
+
innerRadius: BLUEPRINT_VERTEX_RADIUS / 2,
|
|
147
|
+
highlight: {
|
|
148
|
+
innerFill: HIGHLIGHT_COLOR,
|
|
149
|
+
outerFill: HIGHLIGHT_COLOR,
|
|
150
|
+
stroke: HIGHLIGHT_COLOR,
|
|
151
|
+
},
|
|
152
|
+
active: {
|
|
153
|
+
innerFill: ACTIVE_COLOR,
|
|
154
|
+
outerFill: ACTIVE_COLOR,
|
|
155
|
+
stroke: ACTIVE_COLOR,
|
|
156
|
+
},
|
|
157
|
+
error: {
|
|
158
|
+
innerFill: ERROR_COLOR,
|
|
159
|
+
outerFill: ERROR_COLOR,
|
|
160
|
+
stroke: ERROR_COLOR,
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
feature: {
|
|
164
|
+
fill: '#888',
|
|
165
|
+
stroke: '#888',
|
|
166
|
+
strokeWidth: 0,
|
|
167
|
+
thickness: BLUEPRINT_FEATURE_THICKNESS,
|
|
168
|
+
highlight: {
|
|
169
|
+
fill: HIGHLIGHT_COLOR,
|
|
170
|
+
stroke: HIGHLIGHT_COLOR,
|
|
171
|
+
},
|
|
172
|
+
active: {
|
|
173
|
+
fill: ACTIVE_COLOR,
|
|
174
|
+
stroke: ACTIVE_COLOR,
|
|
175
|
+
},
|
|
176
|
+
error: {
|
|
177
|
+
fill: ERROR_COLOR,
|
|
178
|
+
stroke: ERROR_COLOR,
|
|
179
|
+
},
|
|
180
|
+
},
|
|
181
|
+
};
|
|
182
|
+
var LIGHT_WALL_THICKNESS = 8;
|
|
183
|
+
var LIGHT_VERTEX_RADIUS = (LIGHT_WALL_THICKNESS + 8) / 2;
|
|
184
|
+
var LIGHT_FEATURE_THICKNESS = LIGHT_WALL_THICKNESS + 4;
|
|
185
|
+
var light = {
|
|
186
|
+
grid: {
|
|
187
|
+
gridStepGap: 15,
|
|
188
|
+
lineThickness: 1,
|
|
189
|
+
secondaryLineThickness: 2,
|
|
190
|
+
lineColor: '#ddd',
|
|
191
|
+
backgroundColor: '#fff',
|
|
192
|
+
secondaryLineIncrement: undefined,
|
|
193
|
+
},
|
|
194
|
+
floor: {
|
|
195
|
+
color: '#eee',
|
|
196
|
+
},
|
|
197
|
+
dimensions: {
|
|
198
|
+
padding: LIGHT_WALL_THICKNESS / 2 + 24,
|
|
199
|
+
lineThickness: 1,
|
|
200
|
+
lineColor: '#444',
|
|
201
|
+
fontSize: 14,
|
|
202
|
+
font: 'Helvetica',
|
|
203
|
+
textColor: '#444',
|
|
204
|
+
textBackgroundColor: '#fff',
|
|
205
|
+
},
|
|
206
|
+
wall: {
|
|
207
|
+
fill: '#000',
|
|
208
|
+
stroke: '#000',
|
|
209
|
+
strokeWidth: 0,
|
|
210
|
+
thickness: LIGHT_WALL_THICKNESS,
|
|
211
|
+
highlight: {
|
|
212
|
+
fill: HIGHLIGHT_COLOR,
|
|
213
|
+
stroke: HIGHLIGHT_COLOR,
|
|
214
|
+
},
|
|
215
|
+
active: {
|
|
216
|
+
fill: ACTIVE_COLOR,
|
|
217
|
+
stroke: ACTIVE_COLOR,
|
|
218
|
+
},
|
|
219
|
+
error: {
|
|
220
|
+
fill: ERROR_COLOR,
|
|
221
|
+
stroke: ERROR_COLOR,
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
vertex: {
|
|
225
|
+
innerFill: '#aaa',
|
|
226
|
+
outerFill: '#fff',
|
|
227
|
+
stroke: '#000',
|
|
228
|
+
strokeWidth: 1,
|
|
229
|
+
outerRadius: LIGHT_VERTEX_RADIUS,
|
|
230
|
+
innerRadius: (LIGHT_VERTEX_RADIUS / 5) * 3,
|
|
231
|
+
highlight: {
|
|
232
|
+
innerFill: HIGHLIGHT_COLOR,
|
|
233
|
+
outerFill: '#fff',
|
|
234
|
+
stroke: '#000',
|
|
235
|
+
},
|
|
236
|
+
active: {
|
|
237
|
+
innerFill: ACTIVE_COLOR,
|
|
238
|
+
outerFill: '#fff',
|
|
239
|
+
stroke: '#000',
|
|
240
|
+
},
|
|
241
|
+
error: {
|
|
242
|
+
innerFill: ERROR_COLOR,
|
|
243
|
+
outerFill: ERROR_COLOR,
|
|
244
|
+
stroke: ERROR_COLOR,
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
feature: {
|
|
248
|
+
fill: '#888',
|
|
249
|
+
stroke: '#888',
|
|
250
|
+
strokeWidth: 0,
|
|
251
|
+
thickness: LIGHT_FEATURE_THICKNESS,
|
|
252
|
+
highlight: {
|
|
253
|
+
fill: HIGHLIGHT_COLOR,
|
|
254
|
+
stroke: HIGHLIGHT_COLOR,
|
|
255
|
+
},
|
|
256
|
+
active: {
|
|
257
|
+
fill: ACTIVE_COLOR,
|
|
258
|
+
stroke: ACTIVE_COLOR,
|
|
259
|
+
},
|
|
260
|
+
error: {
|
|
261
|
+
fill: ERROR_COLOR,
|
|
262
|
+
stroke: ERROR_COLOR,
|
|
263
|
+
},
|
|
264
|
+
},
|
|
265
|
+
};
|
|
266
|
+
exports.default = (_a = {},
|
|
267
|
+
_a[IThemes.DEFAULT] = defaultTheme,
|
|
268
|
+
_a[IThemes.BLUEPRINT] = blueprint,
|
|
269
|
+
_a[IThemes.LIGHT] = light,
|
|
270
|
+
_a);
|