@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,551 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.drawRoom = exports.drawElements = exports.drawOpenings = exports.drawDoors = exports.drawWindows = exports.drawDimensions = exports.drawVertices = exports.drawWalls = exports.drawNewWall = exports.drawVertex = exports.drawFloor = exports.drawGrid = exports.drawBackground = exports.clearCanvas = void 0;
|
|
4
|
+
var types_1 = require("./types");
|
|
5
|
+
var types_2 = require("./types");
|
|
6
|
+
var geometry_1 = require("./geometry");
|
|
7
|
+
var constants_1 = require("./constants");
|
|
8
|
+
function clearCanvas(canvas) {
|
|
9
|
+
var ctx = canvas.getContext('2d');
|
|
10
|
+
if (!ctx)
|
|
11
|
+
return;
|
|
12
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
13
|
+
}
|
|
14
|
+
exports.clearCanvas = clearCanvas;
|
|
15
|
+
function drawBackground(canvas, color) {
|
|
16
|
+
if (!color)
|
|
17
|
+
return;
|
|
18
|
+
var ctx = canvas.getContext('2d');
|
|
19
|
+
if (!ctx)
|
|
20
|
+
return;
|
|
21
|
+
ctx.fillStyle = color;
|
|
22
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
23
|
+
}
|
|
24
|
+
exports.drawBackground = drawBackground;
|
|
25
|
+
function drawGrid(canvas, styles) {
|
|
26
|
+
var ctx = canvas.getContext('2d');
|
|
27
|
+
if (!ctx)
|
|
28
|
+
return;
|
|
29
|
+
ctx.strokeStyle = styles.lineColor;
|
|
30
|
+
var numHorizontalLines = Math.ceil(canvas.width / styles.gridStepGap);
|
|
31
|
+
var numVerticalLines = Math.ceil(canvas.height / styles.gridStepGap);
|
|
32
|
+
for (var i = 0; i < numHorizontalLines; i++) {
|
|
33
|
+
var y = i * styles.gridStepGap;
|
|
34
|
+
ctx.lineWidth =
|
|
35
|
+
styles.secondaryLineIncrement !== undefined &&
|
|
36
|
+
i % styles.secondaryLineIncrement === 0
|
|
37
|
+
? styles.secondaryLineThickness
|
|
38
|
+
: styles.lineThickness;
|
|
39
|
+
ctx.beginPath();
|
|
40
|
+
ctx.moveTo(0, y);
|
|
41
|
+
ctx.lineTo(canvas.width, y);
|
|
42
|
+
ctx.stroke();
|
|
43
|
+
}
|
|
44
|
+
for (var i = 0; i < numVerticalLines; i++) {
|
|
45
|
+
var x = i * styles.gridStepGap;
|
|
46
|
+
ctx.lineWidth =
|
|
47
|
+
styles.secondaryLineIncrement !== undefined &&
|
|
48
|
+
i % styles.secondaryLineIncrement === 0
|
|
49
|
+
? styles.secondaryLineThickness
|
|
50
|
+
: styles.lineThickness;
|
|
51
|
+
ctx.beginPath();
|
|
52
|
+
ctx.moveTo(x, 0);
|
|
53
|
+
ctx.lineTo(x, canvas.height);
|
|
54
|
+
ctx.stroke();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
exports.drawGrid = drawGrid;
|
|
58
|
+
function drawFloor(canvas, loops, styles) {
|
|
59
|
+
var ctx = canvas.getContext('2d');
|
|
60
|
+
if (!ctx)
|
|
61
|
+
return;
|
|
62
|
+
if (!loops.length)
|
|
63
|
+
return;
|
|
64
|
+
loops.forEach(function (lines) {
|
|
65
|
+
if (!lines.length)
|
|
66
|
+
return;
|
|
67
|
+
ctx.fillStyle = styles.color;
|
|
68
|
+
ctx.beginPath();
|
|
69
|
+
ctx.moveTo.apply(ctx, lines[0][0]);
|
|
70
|
+
var previousPoint = lines[0][0];
|
|
71
|
+
for (var i = 1; i < lines.length; i++) {
|
|
72
|
+
if (!i) {
|
|
73
|
+
ctx.lineTo.apply(ctx, lines[i][1]);
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
if ((0, geometry_1.arePointsEqual)(previousPoint, lines[i][0])) {
|
|
77
|
+
ctx.lineTo.apply(ctx, lines[i][1]);
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
ctx.lineTo.apply(ctx, lines[i][0]);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
ctx.fill();
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
exports.drawFloor = drawFloor;
|
|
87
|
+
function drawWall(canvas, wall, style, mode) {
|
|
88
|
+
var _a;
|
|
89
|
+
var ctx = canvas.getContext('2d');
|
|
90
|
+
if (!ctx)
|
|
91
|
+
return;
|
|
92
|
+
var path = (_a = wall.path) !== null && _a !== void 0 ? _a : (0, geometry_1.addThicknessToLine)(wall.line, style.thickness);
|
|
93
|
+
var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
|
|
94
|
+
if (mode) {
|
|
95
|
+
stroke = style[mode].stroke;
|
|
96
|
+
fill = style[mode].fill;
|
|
97
|
+
}
|
|
98
|
+
ctx.strokeStyle = stroke || fill;
|
|
99
|
+
ctx.fillStyle = fill;
|
|
100
|
+
ctx.lineWidth = strokeWidth || 1;
|
|
101
|
+
ctx.beginPath();
|
|
102
|
+
ctx.moveTo(path[0][0], path[0][1]);
|
|
103
|
+
for (var i = 1; i < path.length; i++) {
|
|
104
|
+
ctx.lineTo(path[i][0], path[i][1]);
|
|
105
|
+
}
|
|
106
|
+
ctx.lineTo(path[0][0], path[0][1]);
|
|
107
|
+
ctx.fill();
|
|
108
|
+
if (style.stroke && style.strokeWidth)
|
|
109
|
+
ctx.stroke();
|
|
110
|
+
}
|
|
111
|
+
function drawDimension(canvas, line, styles, message) {
|
|
112
|
+
var ctx = canvas.getContext('2d');
|
|
113
|
+
if (!ctx)
|
|
114
|
+
return;
|
|
115
|
+
var dimensionsBoxHeight = styles.fontSize + 6;
|
|
116
|
+
var dimensionsHeight = dimensionsBoxHeight + 6;
|
|
117
|
+
var line1 = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding);
|
|
118
|
+
var line2 = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding + dimensionsHeight / 2);
|
|
119
|
+
var line3 = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding + dimensionsHeight);
|
|
120
|
+
var textLine = (0, geometry_1.getParallelLineSegmentAtDistance)(line, styles.padding + dimensionsHeight / 2 - dimensionsBoxHeight / 2);
|
|
121
|
+
var textCoordinates = (0, geometry_1.getMidpointOfLineSegment)(textLine);
|
|
122
|
+
var textAngle = (0, geometry_1.getAngleOfLineSegment)(textLine);
|
|
123
|
+
ctx.strokeStyle = styles.lineColor;
|
|
124
|
+
ctx.lineWidth = 1;
|
|
125
|
+
ctx.beginPath();
|
|
126
|
+
ctx.moveTo(line2[0][0], line2[0][1]);
|
|
127
|
+
ctx.lineTo(line2[1][0], line2[1][1]);
|
|
128
|
+
ctx.stroke();
|
|
129
|
+
ctx.beginPath();
|
|
130
|
+
ctx.moveTo(line1[0][0], line1[0][1]);
|
|
131
|
+
ctx.lineTo(line3[0][0], line3[0][1]);
|
|
132
|
+
ctx.stroke();
|
|
133
|
+
ctx.beginPath();
|
|
134
|
+
ctx.moveTo(line1[1][0], line1[1][1]);
|
|
135
|
+
ctx.lineTo(line3[1][0], line3[1][1]);
|
|
136
|
+
ctx.stroke();
|
|
137
|
+
ctx.beginPath();
|
|
138
|
+
ctx.font = "".concat(styles.fontSize, "px ").concat(styles.font);
|
|
139
|
+
ctx.font = "".concat(styles.fontSize, "px ").concat(styles.font);
|
|
140
|
+
ctx.translate(textCoordinates[0], textCoordinates[1]);
|
|
141
|
+
ctx.rotate(textAngle);
|
|
142
|
+
ctx.fillStyle = styles.textBackgroundColor;
|
|
143
|
+
ctx.fillRect(-(constants_1.DIMENSIONS_TEXT_BOX_WIDTH / 2), -((dimensionsBoxHeight * 3) / 4), constants_1.DIMENSIONS_TEXT_BOX_WIDTH, dimensionsBoxHeight);
|
|
144
|
+
ctx.fillStyle = styles.textColor;
|
|
145
|
+
ctx.textAlign = 'center';
|
|
146
|
+
ctx.fillText(message, 0, 0);
|
|
147
|
+
ctx.resetTransform();
|
|
148
|
+
}
|
|
149
|
+
function drawVertex(canvas, point, style, mode) {
|
|
150
|
+
var ctx = canvas.getContext('2d');
|
|
151
|
+
if (!ctx)
|
|
152
|
+
return;
|
|
153
|
+
var stroke = style.stroke, innerFill = style.innerFill, outerFill = style.outerFill, strokeWidth = style.strokeWidth, outerRadius = style.outerRadius;
|
|
154
|
+
if (mode) {
|
|
155
|
+
stroke = style[mode].stroke;
|
|
156
|
+
innerFill = style[mode].innerFill;
|
|
157
|
+
outerFill = style[mode].outerFill;
|
|
158
|
+
}
|
|
159
|
+
ctx.lineWidth = strokeWidth || 1;
|
|
160
|
+
ctx.strokeStyle = stroke || innerFill;
|
|
161
|
+
ctx.fillStyle = outerFill;
|
|
162
|
+
if (outerRadius) {
|
|
163
|
+
ctx.beginPath();
|
|
164
|
+
ctx.arc(point[0], point[1], outerRadius, 0, 2 * Math.PI);
|
|
165
|
+
if (style.strokeWidth)
|
|
166
|
+
ctx.stroke();
|
|
167
|
+
ctx.fill();
|
|
168
|
+
}
|
|
169
|
+
ctx.lineWidth = strokeWidth || 1;
|
|
170
|
+
ctx.fillStyle = innerFill;
|
|
171
|
+
ctx.strokeStyle = stroke || innerFill;
|
|
172
|
+
ctx.beginPath();
|
|
173
|
+
ctx.arc(point[0], point[1], style.innerRadius, 0, 2 * Math.PI);
|
|
174
|
+
ctx.fill();
|
|
175
|
+
if (!outerRadius && strokeWidth)
|
|
176
|
+
ctx.stroke();
|
|
177
|
+
}
|
|
178
|
+
exports.drawVertex = drawVertex;
|
|
179
|
+
function drawWindow(canvas, wall, offset, length, style, mode) {
|
|
180
|
+
var ctx = canvas.getContext('2d');
|
|
181
|
+
if (!ctx)
|
|
182
|
+
return;
|
|
183
|
+
var windowLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset, length);
|
|
184
|
+
var windowRectangleLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset + style.thickness / 2, length - style.thickness);
|
|
185
|
+
var points = (0, geometry_1.addThicknessToLine)(windowLine, style.thickness);
|
|
186
|
+
var rectanglePoints = (0, geometry_1.addThicknessToLine)(windowRectangleLine, style.thickness);
|
|
187
|
+
var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
|
|
188
|
+
if (mode) {
|
|
189
|
+
stroke = style[mode].stroke;
|
|
190
|
+
fill = style[mode].fill;
|
|
191
|
+
}
|
|
192
|
+
ctx.fillStyle = 'white';
|
|
193
|
+
ctx.beginPath();
|
|
194
|
+
ctx.moveTo(points[0][0], points[0][1]);
|
|
195
|
+
for (var i = 1; i < points.length; i++) {
|
|
196
|
+
ctx.lineTo(points[i][0], points[i][1]);
|
|
197
|
+
}
|
|
198
|
+
ctx.lineTo(points[0][0], points[0][1]);
|
|
199
|
+
ctx.fill();
|
|
200
|
+
ctx.closePath();
|
|
201
|
+
ctx.strokeStyle = stroke || fill;
|
|
202
|
+
ctx.fillStyle = fill;
|
|
203
|
+
ctx.lineWidth = strokeWidth || 1;
|
|
204
|
+
ctx.moveTo(rectanglePoints[0][0], rectanglePoints[0][1]);
|
|
205
|
+
ctx.beginPath();
|
|
206
|
+
for (var i = 1; i < points.length; i++) {
|
|
207
|
+
ctx.lineTo(rectanglePoints[i][0], rectanglePoints[i][1]);
|
|
208
|
+
}
|
|
209
|
+
ctx.lineTo(rectanglePoints[0][0], rectanglePoints[0][1]);
|
|
210
|
+
ctx.fill();
|
|
211
|
+
ctx.closePath();
|
|
212
|
+
ctx.beginPath();
|
|
213
|
+
ctx.moveTo(windowLine[0][0], windowLine[0][1]);
|
|
214
|
+
ctx.lineTo(windowLine[1][0], windowLine[1][1]);
|
|
215
|
+
if (style.stroke)
|
|
216
|
+
ctx.stroke();
|
|
217
|
+
ctx.closePath();
|
|
218
|
+
var angle = (0, geometry_1.getAngleOfLineSegment)(windowLine);
|
|
219
|
+
ctx.beginPath();
|
|
220
|
+
ctx.arc(windowLine[0][0], windowLine[0][1], style.thickness / 2, angle - Math.PI / 2, angle + Math.PI / 2);
|
|
221
|
+
ctx.fill();
|
|
222
|
+
ctx.closePath();
|
|
223
|
+
ctx.beginPath();
|
|
224
|
+
ctx.arc(windowLine[1][0], windowLine[1][1], style.thickness / 2, angle + Math.PI / 2, angle - Math.PI / 2);
|
|
225
|
+
ctx.fill();
|
|
226
|
+
}
|
|
227
|
+
function drawDoor(canvas, wall, offset, length, style, mode) {
|
|
228
|
+
var ctx = canvas.getContext('2d');
|
|
229
|
+
if (!ctx)
|
|
230
|
+
return;
|
|
231
|
+
var doorLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset, length);
|
|
232
|
+
var points = (0, geometry_1.addThicknessToLine)(doorLine, style.thickness);
|
|
233
|
+
var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
|
|
234
|
+
if (mode) {
|
|
235
|
+
stroke = style[mode].stroke;
|
|
236
|
+
fill = style[mode].fill;
|
|
237
|
+
}
|
|
238
|
+
ctx.strokeStyle = stroke || fill;
|
|
239
|
+
ctx.fillStyle = fill;
|
|
240
|
+
ctx.lineWidth = strokeWidth || 1;
|
|
241
|
+
ctx.beginPath();
|
|
242
|
+
ctx.moveTo(points[0][0], points[0][1]);
|
|
243
|
+
for (var i = 1; i < points.length; i++) {
|
|
244
|
+
ctx.lineTo(points[i][0], points[i][1]);
|
|
245
|
+
}
|
|
246
|
+
ctx.lineTo(points[0][0], points[0][1]);
|
|
247
|
+
ctx.fill();
|
|
248
|
+
if (style.stroke)
|
|
249
|
+
ctx.stroke();
|
|
250
|
+
}
|
|
251
|
+
function drawOpening(canvas, wall, offset, length, style, mode) {
|
|
252
|
+
var ctx = canvas.getContext('2d');
|
|
253
|
+
if (!ctx)
|
|
254
|
+
return;
|
|
255
|
+
var openingLine = (0, geometry_1.getLineAtOffsetOnLineSegment)(wall.line, offset, length);
|
|
256
|
+
var points = (0, geometry_1.addThicknessToLine)(openingLine, style.thickness);
|
|
257
|
+
var stroke = style.stroke, fill = style.fill, strokeWidth = style.strokeWidth;
|
|
258
|
+
if (mode) {
|
|
259
|
+
stroke = style[mode].stroke;
|
|
260
|
+
fill = style[mode].fill;
|
|
261
|
+
}
|
|
262
|
+
ctx.fillStyle = 'white';
|
|
263
|
+
ctx.beginPath();
|
|
264
|
+
ctx.moveTo(points[0][0], points[0][1]);
|
|
265
|
+
for (var i = 1; i < points.length; i++) {
|
|
266
|
+
ctx.lineTo(points[i][0], points[i][1]);
|
|
267
|
+
}
|
|
268
|
+
ctx.lineTo(points[0][0], points[0][1]);
|
|
269
|
+
ctx.fill();
|
|
270
|
+
ctx.beginPath();
|
|
271
|
+
ctx.strokeStyle = stroke || fill;
|
|
272
|
+
ctx.fillStyle = fill;
|
|
273
|
+
ctx.lineWidth = strokeWidth || 1;
|
|
274
|
+
ctx.setLineDash([10, 10]);
|
|
275
|
+
ctx.moveTo(openingLine[0][0], openingLine[0][1]);
|
|
276
|
+
ctx.lineTo(openingLine[1][0], openingLine[1][1]);
|
|
277
|
+
ctx.stroke();
|
|
278
|
+
ctx.closePath();
|
|
279
|
+
ctx.beginPath();
|
|
280
|
+
ctx.setLineDash([]);
|
|
281
|
+
var angle = (0, geometry_1.getAngleOfLineSegment)(openingLine);
|
|
282
|
+
ctx.arc(openingLine[0][0], openingLine[0][1], style.thickness / 2, angle - Math.PI / 2, angle + Math.PI / 2);
|
|
283
|
+
ctx.fill();
|
|
284
|
+
ctx.closePath();
|
|
285
|
+
ctx.beginPath();
|
|
286
|
+
ctx.arc(openingLine[1][0], openingLine[1][1], style.thickness / 2, angle + Math.PI / 2, angle - Math.PI / 2);
|
|
287
|
+
ctx.fill();
|
|
288
|
+
}
|
|
289
|
+
function drawNewWall(canvas, line, styles, mode) {
|
|
290
|
+
drawWall(canvas, {
|
|
291
|
+
line: line,
|
|
292
|
+
path: (0, geometry_1.addThicknessToLine)(line, styles.wall.thickness),
|
|
293
|
+
}, styles.wall, mode !== null && mode !== void 0 ? mode : types_1.IElementStyleModes.ACTIVE);
|
|
294
|
+
line.forEach(function (point) {
|
|
295
|
+
return drawVertex(canvas, point, styles.vertex, mode !== null && mode !== void 0 ? mode : types_1.IElementStyleModes.HIGHLIGHT);
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
exports.drawNewWall = drawNewWall;
|
|
299
|
+
function drawWalls(canvas, walls, selections, styles) {
|
|
300
|
+
var styled = [
|
|
301
|
+
selections.active,
|
|
302
|
+
selections.highlighted,
|
|
303
|
+
selections.error,
|
|
304
|
+
selections.hidden,
|
|
305
|
+
];
|
|
306
|
+
var defaultOpenings = walls.reduce(function (output, _, i) {
|
|
307
|
+
if (!styled.flat().includes(i))
|
|
308
|
+
output.push(i);
|
|
309
|
+
return output;
|
|
310
|
+
}, []);
|
|
311
|
+
var wallsMap = [
|
|
312
|
+
[types_1.IElementStyleModes.ACTIVE, selections.active],
|
|
313
|
+
[types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
|
|
314
|
+
[types_1.IElementStyleModes.ERROR, selections.error],
|
|
315
|
+
[undefined, defaultOpenings],
|
|
316
|
+
];
|
|
317
|
+
wallsMap.forEach(function (_a) {
|
|
318
|
+
var mode = _a[0], wallIndexes = _a[1];
|
|
319
|
+
return wallIndexes.forEach(function (index) { return drawWall(canvas, walls[index], styles, mode); });
|
|
320
|
+
});
|
|
321
|
+
}
|
|
322
|
+
exports.drawWalls = drawWalls;
|
|
323
|
+
function drawVertices(canvas, vertices, selections, styles) {
|
|
324
|
+
var styled = [
|
|
325
|
+
selections.active,
|
|
326
|
+
selections.highlighted,
|
|
327
|
+
selections.error,
|
|
328
|
+
selections.hidden,
|
|
329
|
+
];
|
|
330
|
+
var defaultOpenings = vertices.reduce(function (output, _, i) {
|
|
331
|
+
if (!styled.flat().includes(i))
|
|
332
|
+
output.push(i);
|
|
333
|
+
return output;
|
|
334
|
+
}, []);
|
|
335
|
+
var verticesMap = [
|
|
336
|
+
[types_1.IElementStyleModes.ACTIVE, selections.active],
|
|
337
|
+
[types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
|
|
338
|
+
[types_1.IElementStyleModes.ERROR, selections.error],
|
|
339
|
+
[undefined, defaultOpenings],
|
|
340
|
+
];
|
|
341
|
+
verticesMap.forEach(function (_a) {
|
|
342
|
+
var mode = _a[0], vertexIndexes = _a[1];
|
|
343
|
+
return vertexIndexes.forEach(function (index) {
|
|
344
|
+
var point = vertices[index].point;
|
|
345
|
+
drawVertex(canvas, point, styles, mode);
|
|
346
|
+
});
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
exports.drawVertices = drawVertices;
|
|
350
|
+
function drawDimensions(canvas, dimensions, config) {
|
|
351
|
+
dimensions.forEach(function (_a) {
|
|
352
|
+
var line = _a.line, label = _a.label;
|
|
353
|
+
drawDimension(canvas, line, config.styles.dimensions, label);
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
exports.drawDimensions = drawDimensions;
|
|
357
|
+
function drawWindows(canvas, walls, windows, selections, styles) {
|
|
358
|
+
var styled = [
|
|
359
|
+
selections.active,
|
|
360
|
+
selections.highlighted,
|
|
361
|
+
selections.error,
|
|
362
|
+
selections.hidden,
|
|
363
|
+
];
|
|
364
|
+
var defaultOpenings = windows.reduce(function (output, _, i) {
|
|
365
|
+
if (!styled.flat().includes(i))
|
|
366
|
+
output.push(i);
|
|
367
|
+
return output;
|
|
368
|
+
}, []);
|
|
369
|
+
var windowsMap = [
|
|
370
|
+
[types_1.IElementStyleModes.ACTIVE, selections.active],
|
|
371
|
+
[types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
|
|
372
|
+
[types_1.IElementStyleModes.ERROR, selections.error],
|
|
373
|
+
[undefined, defaultOpenings],
|
|
374
|
+
];
|
|
375
|
+
windowsMap.forEach(function (_a) {
|
|
376
|
+
var mode = _a[0], windowIndexes = _a[1];
|
|
377
|
+
return windowIndexes.forEach(function (index) {
|
|
378
|
+
var window = windows[index];
|
|
379
|
+
if (!(window === null || window === void 0 ? void 0 : window.connectedTo.length))
|
|
380
|
+
return;
|
|
381
|
+
var wallIndex = window.connectedTo[1];
|
|
382
|
+
drawWindow(canvas, walls[wallIndex], window.offset, window.length, styles.feature, mode);
|
|
383
|
+
});
|
|
384
|
+
});
|
|
385
|
+
}
|
|
386
|
+
exports.drawWindows = drawWindows;
|
|
387
|
+
function drawDoors(canvas, walls, doors, selections, styles) {
|
|
388
|
+
var styled = [
|
|
389
|
+
selections.active,
|
|
390
|
+
selections.highlighted,
|
|
391
|
+
selections.error,
|
|
392
|
+
selections.hidden,
|
|
393
|
+
];
|
|
394
|
+
var defaultOpenings = doors.reduce(function (output, _, i) {
|
|
395
|
+
if (!styled.flat().includes(i))
|
|
396
|
+
output.push(i);
|
|
397
|
+
return output;
|
|
398
|
+
}, []);
|
|
399
|
+
var doorsMap = [
|
|
400
|
+
[types_1.IElementStyleModes.ACTIVE, selections.active],
|
|
401
|
+
[types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
|
|
402
|
+
[types_1.IElementStyleModes.ERROR, selections.error],
|
|
403
|
+
[undefined, defaultOpenings],
|
|
404
|
+
];
|
|
405
|
+
doorsMap.forEach(function (_a) {
|
|
406
|
+
var mode = _a[0], doorsIndexes = _a[1];
|
|
407
|
+
return doorsIndexes.forEach(function (index) {
|
|
408
|
+
var door = doors[index];
|
|
409
|
+
if (!(door === null || door === void 0 ? void 0 : door.connectedTo.length))
|
|
410
|
+
return;
|
|
411
|
+
var wallIndex = door.connectedTo[1];
|
|
412
|
+
drawDoor(canvas, walls[wallIndex], door.offset, door.length, styles.feature, mode);
|
|
413
|
+
});
|
|
414
|
+
});
|
|
415
|
+
}
|
|
416
|
+
exports.drawDoors = drawDoors;
|
|
417
|
+
function drawOpenings(canvas, walls, openings, selections, styles) {
|
|
418
|
+
var styled = [
|
|
419
|
+
selections.active,
|
|
420
|
+
selections.highlighted,
|
|
421
|
+
selections.error,
|
|
422
|
+
selections.hidden,
|
|
423
|
+
];
|
|
424
|
+
var defaultOpenings = openings.reduce(function (output, _, i) {
|
|
425
|
+
if (!styled.flat().includes(i))
|
|
426
|
+
output.push(i);
|
|
427
|
+
return output;
|
|
428
|
+
}, []);
|
|
429
|
+
var openingsMap = [
|
|
430
|
+
[types_1.IElementStyleModes.ACTIVE, selections.active],
|
|
431
|
+
[types_1.IElementStyleModes.HIGHLIGHT, selections.highlighted],
|
|
432
|
+
[types_1.IElementStyleModes.ERROR, selections.error],
|
|
433
|
+
[undefined, defaultOpenings],
|
|
434
|
+
];
|
|
435
|
+
openingsMap.forEach(function (_a) {
|
|
436
|
+
var mode = _a[0], openingsIndexes = _a[1];
|
|
437
|
+
return openingsIndexes.forEach(function (index) {
|
|
438
|
+
var opening = openings[index];
|
|
439
|
+
if (!(opening === null || opening === void 0 ? void 0 : opening.connectedTo.length))
|
|
440
|
+
return;
|
|
441
|
+
var wallIndex = opening.connectedTo[1];
|
|
442
|
+
drawOpening(canvas, walls[wallIndex], opening.offset, opening.length, styles.feature, mode);
|
|
443
|
+
});
|
|
444
|
+
});
|
|
445
|
+
}
|
|
446
|
+
exports.drawOpenings = drawOpenings;
|
|
447
|
+
function drawElements(canvas, walls, vertices, features, selections, styles) {
|
|
448
|
+
var wallSelections = {
|
|
449
|
+
active: [],
|
|
450
|
+
highlighted: [],
|
|
451
|
+
hidden: [],
|
|
452
|
+
error: [],
|
|
453
|
+
};
|
|
454
|
+
var verticesSelections = {
|
|
455
|
+
active: [],
|
|
456
|
+
highlighted: [],
|
|
457
|
+
hidden: [],
|
|
458
|
+
error: [],
|
|
459
|
+
};
|
|
460
|
+
var windowSelections = {
|
|
461
|
+
active: [],
|
|
462
|
+
highlighted: [],
|
|
463
|
+
hidden: [],
|
|
464
|
+
error: [],
|
|
465
|
+
};
|
|
466
|
+
var doorSelections = {
|
|
467
|
+
active: [],
|
|
468
|
+
highlighted: [],
|
|
469
|
+
hidden: [],
|
|
470
|
+
error: [],
|
|
471
|
+
};
|
|
472
|
+
var openingSelections = {
|
|
473
|
+
active: [],
|
|
474
|
+
highlighted: [],
|
|
475
|
+
hidden: [],
|
|
476
|
+
error: [],
|
|
477
|
+
};
|
|
478
|
+
selections.active.forEach(function (address) {
|
|
479
|
+
if (address.type === types_2.IElements.WALL)
|
|
480
|
+
wallSelections.active.push(address.index);
|
|
481
|
+
else if (address.type === types_2.IElements.VERTEX)
|
|
482
|
+
verticesSelections.active.push(address.index);
|
|
483
|
+
else if (address.type === types_2.IElements.WINDOW)
|
|
484
|
+
windowSelections.active.push(address.index);
|
|
485
|
+
else if (address.type === types_2.IElements.DOOR)
|
|
486
|
+
doorSelections.active.push(address.index);
|
|
487
|
+
else if (address.type === types_2.IElements.OPENING)
|
|
488
|
+
openingSelections.active.push(address.index);
|
|
489
|
+
});
|
|
490
|
+
selections.highlighted.forEach(function (address) {
|
|
491
|
+
if (address.type === types_2.IElements.WALL)
|
|
492
|
+
wallSelections.highlighted.push(address.index);
|
|
493
|
+
else if (address.type === types_2.IElements.VERTEX)
|
|
494
|
+
verticesSelections.highlighted.push(address.index);
|
|
495
|
+
else if (address.type === types_2.IElements.WINDOW)
|
|
496
|
+
windowSelections.highlighted.push(address.index);
|
|
497
|
+
else if (address.type === types_2.IElements.DOOR)
|
|
498
|
+
doorSelections.highlighted.push(address.index);
|
|
499
|
+
else if (address.type === types_2.IElements.OPENING)
|
|
500
|
+
openingSelections.highlighted.push(address.index);
|
|
501
|
+
});
|
|
502
|
+
selections.hidden.forEach(function (address) {
|
|
503
|
+
if (address.type === types_2.IElements.WALL)
|
|
504
|
+
wallSelections.hidden.push(address.index);
|
|
505
|
+
else if (address.type === types_2.IElements.VERTEX)
|
|
506
|
+
verticesSelections.hidden.push(address.index);
|
|
507
|
+
else if (address.type === types_2.IElements.WINDOW)
|
|
508
|
+
windowSelections.hidden.push(address.index);
|
|
509
|
+
else if (address.type === types_2.IElements.DOOR)
|
|
510
|
+
doorSelections.hidden.push(address.index);
|
|
511
|
+
else if (address.type === types_2.IElements.OPENING)
|
|
512
|
+
openingSelections.hidden.push(address.index);
|
|
513
|
+
});
|
|
514
|
+
selections.error.forEach(function (address) {
|
|
515
|
+
if (address.type === types_2.IElements.WALL)
|
|
516
|
+
wallSelections.error.push(address.index);
|
|
517
|
+
else if (address.type === types_2.IElements.VERTEX)
|
|
518
|
+
verticesSelections.error.push(address.index);
|
|
519
|
+
else if (address.type === types_2.IElements.WINDOW)
|
|
520
|
+
windowSelections.error.push(address.index);
|
|
521
|
+
else if (address.type === types_2.IElements.DOOR)
|
|
522
|
+
doorSelections.error.push(address.index);
|
|
523
|
+
else if (address.type === types_2.IElements.OPENING)
|
|
524
|
+
openingSelections.error.push(address.index);
|
|
525
|
+
});
|
|
526
|
+
drawWalls(canvas, walls, wallSelections, styles.wall);
|
|
527
|
+
drawVertices(canvas, vertices, verticesSelections, styles.vertex);
|
|
528
|
+
if (features[types_2.IElements.WINDOW])
|
|
529
|
+
drawWindows(canvas, walls, features[types_2.IElements.WINDOW] || [], windowSelections, styles);
|
|
530
|
+
if (features[types_2.IElements.DOOR])
|
|
531
|
+
drawDoors(canvas, walls, features[types_2.IElements.DOOR] || [], doorSelections, styles);
|
|
532
|
+
if (features[types_2.IElements.OPENING])
|
|
533
|
+
drawOpenings(canvas, walls, features[types_2.IElements.OPENING] || [], openingSelections, styles);
|
|
534
|
+
}
|
|
535
|
+
exports.drawElements = drawElements;
|
|
536
|
+
function drawRoom(canvas, floor, walls, vertices, features, dimensions, selections, config) {
|
|
537
|
+
var preppedSelections = {
|
|
538
|
+
active: [(selections === null || selections === void 0 ? void 0 : selections.active) || []].flat(),
|
|
539
|
+
highlighted: [(selections === null || selections === void 0 ? void 0 : selections.highlighted) || []].flat(),
|
|
540
|
+
error: [(selections === null || selections === void 0 ? void 0 : selections.error) || []].flat(),
|
|
541
|
+
hidden: [(selections === null || selections === void 0 ? void 0 : selections.hidden) || []].flat(),
|
|
542
|
+
};
|
|
543
|
+
clearCanvas(canvas);
|
|
544
|
+
drawBackground(canvas, config.styles.grid.backgroundColor);
|
|
545
|
+
drawGrid(canvas, config.styles.grid);
|
|
546
|
+
drawFloor(canvas, floor, config.styles.floor);
|
|
547
|
+
drawElements(canvas, walls, vertices, features, preppedSelections, config.styles);
|
|
548
|
+
if (dimensions)
|
|
549
|
+
drawDimensions(canvas, dimensions, config);
|
|
550
|
+
}
|
|
551
|
+
exports.drawRoom = drawRoom;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { ICoordinate2D, ICoordinatesLine, ICoordinatesQuadrilateral } from './types';
|
|
2
|
+
export declare function arePointsEqual(point1: ICoordinate2D, point2: ICoordinate2D): boolean;
|
|
3
|
+
export declare function areLinesEqual(line1: ICoordinatesLine, line2: ICoordinatesLine): boolean;
|
|
4
|
+
export declare function getLengthOfLineSegment(line: ICoordinatesLine): number;
|
|
5
|
+
export declare function getMidpointOfLineSegment(line: ICoordinatesLine): ICoordinate2D;
|
|
6
|
+
export declare function getAngleOfLineSegment(line: ICoordinatesLine): number;
|
|
7
|
+
export declare function getPointAtOffsetOnLineSegment(line: ICoordinatesLine, offset: number): ICoordinate2D;
|
|
8
|
+
export declare function getLineAtOffsetOnLineSegment(line: ICoordinatesLine, offset: number, length: number): ICoordinatesLine;
|
|
9
|
+
export declare function getLineMidpoint(line: ICoordinatesLine): ICoordinate2D;
|
|
10
|
+
export declare function getDistanceToLine(pointOnLine: ICoordinate2D, lineSlope: number, point: ICoordinate2D): number;
|
|
11
|
+
export declare function closestPointOnLine(pointOnLine: ICoordinate2D, lineSlope: number, point: ICoordinate2D): ICoordinate2D;
|
|
12
|
+
export declare function getAngleBetweenLines(line1: ICoordinatesLine, line2: ICoordinatesLine): number;
|
|
13
|
+
export declare function getQuadrilateralArea(quadrilateral: ICoordinatesQuadrilateral): number;
|
|
14
|
+
export declare function getTriangleArea(point1: ICoordinate2D, point2: ICoordinate2D, point3: ICoordinate2D): number;
|
|
15
|
+
export declare function getParallelLineSegmentAtDistance(line: ICoordinatesLine, distance: number): ICoordinatesLine;
|
|
16
|
+
export declare function addThicknessToLine(line: ICoordinatesLine, thickness: number): ICoordinatesQuadrilateral;
|
|
17
|
+
export declare function arePointsWithinProximity(point1: ICoordinate2D, point2: ICoordinate2D, proximity: number): boolean;
|
|
18
|
+
export declare function isPointInQuadrilateral(quadrilateral: ICoordinatesQuadrilateral, point: ICoordinate2D): boolean;
|
|
19
|
+
export declare function isPointInPolygon(point: ICoordinate2D, polygon: Array<ICoordinate2D>): boolean;
|
|
20
|
+
export declare function getLineIntersection(line1: ICoordinatesLine, line2: ICoordinatesLine): ICoordinate2D | null;
|
|
21
|
+
export declare function getLineSegmentsIntersection(line1: ICoordinatesLine, line2: ICoordinatesLine): null | ICoordinate2D;
|
|
22
|
+
export declare function splitLineAtPoint(line: ICoordinatesLine, point: ICoordinate2D): [ICoordinatesLine, ICoordinatesLine];
|
|
23
|
+
export declare function splitLineAtPoints(line: ICoordinatesLine, points: Array<ICoordinate2D>): Array<ICoordinatesLine>;
|
|
24
|
+
export declare function splitLineAtOffset(line: ICoordinatesLine, offset: number): [ICoordinatesLine, ICoordinatesLine];
|
|
25
|
+
export declare function orderCoordinatesOnLineSegment(points?: Array<ICoordinate2D>): Array<ICoordinate2D>;
|
|
26
|
+
export declare function findAllIntersectionPoints(lines: Array<ICoordinatesLine>): Array<{
|
|
27
|
+
lines: [lineIndex1: number, lineIndex2: number];
|
|
28
|
+
point: ICoordinate2D;
|
|
29
|
+
}>;
|
|
30
|
+
export declare function getTangentIntersection(line: ICoordinatesLine, point: ICoordinate2D): undefined | ICoordinate2D;
|
|
31
|
+
export declare function getTangetIntersectionAndOffset(line: ICoordinatesLine, point: ICoordinate2D): undefined | {
|
|
32
|
+
point: ICoordinate2D;
|
|
33
|
+
offset: number;
|
|
34
|
+
};
|
|
35
|
+
export declare function doeslineSegmentIntersectQuadrilateral(line: ICoordinatesLine, quadrilateral: ICoordinatesQuadrilateral): boolean;
|
|
36
|
+
export declare function getAllLineIntersections(line: ICoordinatesLine, lines: Array<ICoordinatesLine | null>): {
|
|
37
|
+
index: number;
|
|
38
|
+
point: ICoordinate2D;
|
|
39
|
+
}[];
|
|
40
|
+
export declare function doLinesOverlap(line1: [offset: number, length: number], line2: [offset: number, length: number]): boolean;
|
|
41
|
+
export declare function getDistanceFromCircumference(point: ICoordinate2D, circleCenter: ICoordinate2D, radius: number): number;
|
|
42
|
+
export declare function getClosestPointOnCircumference(point: ICoordinate2D, circleCenter: ICoordinate2D, radius: number): ICoordinate2D;
|
|
43
|
+
export declare function findClosedPaths(lines: Array<ICoordinatesLine>): Array<number[]>;
|