kitchen-simulator 3.12.0 → 3.14.0
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/es/catalog/factories/area-factory-3d.js +17 -17
- package/es/catalog/utils/item-loader.js +1 -1
- package/es/class/hole.js +0 -2
- package/es/class/item.js +28 -17
- package/es/class/project.js +14 -6
- package/es/devLiteRenderer.js +99 -99
- package/es/utils/geometry.js +2 -2
- package/es/utils/isolate-event-handler.js +6 -3
- package/es/utils/molding.js +242 -28
- package/lib/catalog/factories/area-factory-3d.js +14 -14
- package/lib/catalog/utils/item-loader.js +1 -1
- package/lib/class/hole.js +0 -2
- package/lib/class/item.js +27 -16
- package/lib/class/project.js +14 -6
- package/lib/devLiteRenderer.js +94 -94
- package/lib/utils/geometry.js +2 -2
- package/lib/utils/isolate-event-handler.js +5 -2
- package/lib/utils/molding.js +243 -27
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import * as Three from
|
|
2
|
-
import { Box3, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, RepeatWrapping, Shape, TextureLoader, Vector2 } from
|
|
1
|
+
import * as Three from 'three';
|
|
2
|
+
import { Box3, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, RepeatWrapping, Shape, TextureLoader, Vector2 } from 'three';
|
|
3
3
|
import * as SharedStyle from "../../shared-style";
|
|
4
|
-
import { RGBELoader } from
|
|
4
|
+
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
|
|
5
5
|
var params = {
|
|
6
|
-
envMap:
|
|
6
|
+
envMap: 'HDR',
|
|
7
7
|
roughness: 0.9,
|
|
8
8
|
metalness: 0.8,
|
|
9
9
|
exposure: 1.0
|
|
@@ -58,7 +58,7 @@ var assignUVs = function assignUVs(geometry) {
|
|
|
58
58
|
var y3 = position.getY(i + 2);
|
|
59
59
|
uvArray.push((x1 + offset.x) / range.x, (y1 + offset.y) / range.y, (x2 + offset.x) / range.x, (y2 + offset.y) / range.y, (x3 + offset.x) / range.x, (y3 + offset.y) / range.y);
|
|
60
60
|
}
|
|
61
|
-
geometry.setAttribute(
|
|
61
|
+
geometry.setAttribute('uv', new Three.BufferAttribute(new Float32Array(uvArray), 2));
|
|
62
62
|
geometry.needsUpdate = true;
|
|
63
63
|
};
|
|
64
64
|
export function createArea(element, layer, scene, textures) {
|
|
@@ -69,15 +69,15 @@ export function createArea(element, layer, scene, textures) {
|
|
|
69
69
|
var texture = element.texture;
|
|
70
70
|
texture.lengthRepeatScale = 0.01;
|
|
71
71
|
texture.heightRepeatScale = 0.01;
|
|
72
|
-
var color = element.properties.get(
|
|
72
|
+
var color = element.properties.get('patternColor');
|
|
73
73
|
if (element.selected) {
|
|
74
74
|
color = SharedStyle.AREA_MESH_COLOR.selected;
|
|
75
75
|
} else {
|
|
76
76
|
color = SharedStyle.AREA_MESH_COLOR.unselected;
|
|
77
77
|
}
|
|
78
|
-
if (texture.uri === undefined || texture.uri ==
|
|
78
|
+
if (texture.uri === undefined || texture.uri == '') {
|
|
79
79
|
// @todo THIS IS A TEMPORARY FIX TO HAVE A DEFAULT FLOOR TEXTURE
|
|
80
|
-
texture.uri = layer.floorStyle.uri ||
|
|
80
|
+
texture.uri = layer.floorStyle.uri || 'https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg';
|
|
81
81
|
}
|
|
82
82
|
var shape = new Shape();
|
|
83
83
|
shape.moveTo(vertices[0].x, vertices[0].y);
|
|
@@ -85,7 +85,7 @@ export function createArea(element, layer, scene, textures) {
|
|
|
85
85
|
shape.lineTo(vertices[i].x, vertices[i].y);
|
|
86
86
|
}
|
|
87
87
|
function loadFloorENV() {
|
|
88
|
-
return new RGBELoader().load(
|
|
88
|
+
return new RGBELoader().load('/assets/Window.hdr', function (texture) {
|
|
89
89
|
texture.mapping = Three.EquirectangularReflectionMapping;
|
|
90
90
|
return texture;
|
|
91
91
|
});
|
|
@@ -105,8 +105,8 @@ export function createArea(element, layer, scene, textures) {
|
|
|
105
105
|
/* Create holes for the area */
|
|
106
106
|
element.holes.forEach(function (holeID) {
|
|
107
107
|
var holeCoords = [];
|
|
108
|
-
layer.getIn([
|
|
109
|
-
var _layer$getIn = layer.getIn([
|
|
108
|
+
layer.getIn(['areas', holeID, 'vertices']).forEach(function (vertexID) {
|
|
109
|
+
var _layer$getIn = layer.getIn(['vertices', vertexID]),
|
|
110
110
|
x = _layer$getIn.x,
|
|
111
111
|
y = _layer$getIn.y;
|
|
112
112
|
holeCoords.push([x, y]);
|
|
@@ -133,7 +133,7 @@ export function createArea(element, layer, scene, textures) {
|
|
|
133
133
|
var area = new Mesh(shapeGeometry, areaMaterial);
|
|
134
134
|
area.rotation.x -= Math.PI / 2;
|
|
135
135
|
area.receiveShadow = true;
|
|
136
|
-
area.name =
|
|
136
|
+
area.name = 'floor';
|
|
137
137
|
// This mesh is use for creating ceiling mesh
|
|
138
138
|
|
|
139
139
|
var shapeGeometry2 = new Three.ShapeGeometry(shape);
|
|
@@ -144,7 +144,7 @@ export function createArea(element, layer, scene, textures) {
|
|
|
144
144
|
area2.castShadow = true;
|
|
145
145
|
area2.rotation.x -= Math.PI / 2;
|
|
146
146
|
area2.receiveShadow = true;
|
|
147
|
-
area2.name =
|
|
147
|
+
area2.name = 'floorSupport';
|
|
148
148
|
var floorSupport = area2.clone();
|
|
149
149
|
area.userData.floorSupport = floorSupport;
|
|
150
150
|
return Promise.resolve(area);
|
|
@@ -154,13 +154,13 @@ export function updatedArea(element, layer, scene, textures, mesh, oldElement, d
|
|
|
154
154
|
selfDestroy();
|
|
155
155
|
return selfBuild();
|
|
156
156
|
};
|
|
157
|
-
var floor = mesh.getObjectByName(
|
|
157
|
+
var floor = mesh.getObjectByName('floor');
|
|
158
158
|
floor.receiveShadow = true;
|
|
159
|
-
if (differences[0] ==
|
|
159
|
+
if (differences[0] == 'selected') {
|
|
160
160
|
var color = element.selected ? SharedStyle.AREA_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.unselected;
|
|
161
161
|
floor.material.color.set(color);
|
|
162
|
-
} else if (differences[0] ==
|
|
163
|
-
if (differences[1] ===
|
|
162
|
+
} else if (differences[0] == 'properties') {
|
|
163
|
+
if (differences[1] === 'texture') {
|
|
164
164
|
return noPerf();
|
|
165
165
|
}
|
|
166
166
|
} else return noPerf();
|
|
@@ -997,7 +997,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
|
|
|
997
997
|
counterTop = counterTop.toJS();
|
|
998
998
|
} catch (error) {
|
|
999
999
|
//@todo THIS IS A TEMPORARY FIX FOR COUNTERTOP TEXTURE UNDEFINED ISSUE
|
|
1000
|
-
counterTop.uri = '
|
|
1000
|
+
counterTop.uri = 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
|
|
1001
1001
|
console.log(error);
|
|
1002
1002
|
}
|
|
1003
1003
|
}
|
package/es/class/hole.js
CHANGED
|
@@ -777,11 +777,9 @@ var Hole = /*#__PURE__*/function () {
|
|
|
777
777
|
scene: scene.mergeIn(['layers', layerID, 'holes', holeID], hole)
|
|
778
778
|
});
|
|
779
779
|
state = state.updateIn(['scene', 'layers', layerID, 'lines', hole.line, 'holes'], function (holes) {
|
|
780
|
-
console.log(holes, 'holes');
|
|
781
780
|
var index = holes.findIndex(function (ID) {
|
|
782
781
|
return holeID === ID;
|
|
783
782
|
});
|
|
784
|
-
console.log(index, 'index');
|
|
785
783
|
return index === -1 ? holes.push(holeID) : holes;
|
|
786
784
|
});
|
|
787
785
|
return {
|
package/es/class/item.js
CHANGED
|
@@ -12,7 +12,7 @@ import { INSTALLATION_SUFFIX_TYPE, INTERNAL_EVENT_DRAW_ELEMENT, MODE_DRAGGING_IT
|
|
|
12
12
|
import { debugUtil, updatePayloadOfInternalEvent } from "../utils/helper";
|
|
13
13
|
import { isUndefined } from 'util';
|
|
14
14
|
import { hasMoldingLayout } from "../utils/molding";
|
|
15
|
-
import { getInstallationSuffix } from "../components/viewer2d/utils";
|
|
15
|
+
import { getInstallationSuffix, isEmpty } from "../components/viewer2d/utils";
|
|
16
16
|
import { historyPush } from "../utils/history";
|
|
17
17
|
var allItemRect;
|
|
18
18
|
var allItemSnap;
|
|
@@ -29,9 +29,11 @@ var Item = /*#__PURE__*/function () {
|
|
|
29
29
|
return _createClass(Item, null, [{
|
|
30
30
|
key: "create",
|
|
31
31
|
value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
|
|
32
|
+
var _item;
|
|
32
33
|
var molding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : [];
|
|
33
34
|
var isInitialPos = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
|
|
34
35
|
var refItem = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : null;
|
|
36
|
+
var counterTopURI = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : null;
|
|
35
37
|
var itemID = IDBroker.acquireID();
|
|
36
38
|
var item = state.catalog.factoryElement(type, {
|
|
37
39
|
id: itemID,
|
|
@@ -160,6 +162,9 @@ var Item = /*#__PURE__*/function () {
|
|
|
160
162
|
}
|
|
161
163
|
};
|
|
162
164
|
item.category === 'cabinet' && setSizeOfItemByDoorStyle();
|
|
165
|
+
if (counterTopURI || (_item = item) !== null && _item !== void 0 && _item.counterTop) {
|
|
166
|
+
item.counterTop.uri = counterTopURI;
|
|
167
|
+
}
|
|
163
168
|
item = this.updateDoorHandle(item, state.getIn(['scene', 'layers', layerID]));
|
|
164
169
|
state = state.setIn(['scene', 'layers', layerID, 'items', itemID], item);
|
|
165
170
|
if (item.type.includes('Light')) {
|
|
@@ -331,17 +336,17 @@ var Item = /*#__PURE__*/function () {
|
|
|
331
336
|
if (isRect) {
|
|
332
337
|
var _this$create2 = this.create(state, layerID, sceneComponentType, x - width * Math.cos(rotRad), y - width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
|
|
333
338
|
_stateI = _this$create2.updatedState,
|
|
334
|
-
|
|
335
|
-
duplicatedElement =
|
|
336
|
-
if (
|
|
339
|
+
_item2 = _this$create2.item;
|
|
340
|
+
duplicatedElement = _item2;
|
|
341
|
+
if (_item2 === null) {
|
|
337
342
|
alert('There are no Door Colors in this cabinet.');
|
|
338
343
|
state = state.merge({
|
|
339
344
|
mode: MODE_IDLE,
|
|
340
345
|
drawingSupport: new Map()
|
|
341
346
|
});
|
|
342
347
|
} else {
|
|
343
|
-
state = Item.select(_stateI, layerID,
|
|
344
|
-
state = state.setIn(['drawingSupport', 'currentID'],
|
|
348
|
+
state = Item.select(_stateI, layerID, _item2.id).updatedState;
|
|
349
|
+
state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
|
|
345
350
|
}
|
|
346
351
|
} else {
|
|
347
352
|
var _val2 = {
|
|
@@ -358,17 +363,17 @@ var Item = /*#__PURE__*/function () {
|
|
|
358
363
|
if (isRectDown) {
|
|
359
364
|
var _this$create3 = this.create(state, layerID, sceneComponentType, x - depth * Math.sin(rotRad), y - depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
|
|
360
365
|
_stateI2 = _this$create3.updatedState,
|
|
361
|
-
|
|
362
|
-
duplicatedElement =
|
|
363
|
-
if (
|
|
366
|
+
_item3 = _this$create3.item;
|
|
367
|
+
duplicatedElement = _item3;
|
|
368
|
+
if (_item3 === null) {
|
|
364
369
|
alert('There are no Door Colors in this cabinet.');
|
|
365
370
|
state = state.merge({
|
|
366
371
|
mode: MODE_IDLE,
|
|
367
372
|
drawingSupport: new Map()
|
|
368
373
|
});
|
|
369
374
|
} else {
|
|
370
|
-
state = Item.select(_stateI2, layerID,
|
|
371
|
-
state = state.setIn(['drawingSupport', 'currentID'],
|
|
375
|
+
state = Item.select(_stateI2, layerID, _item3.id).updatedState;
|
|
376
|
+
state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
|
|
372
377
|
}
|
|
373
378
|
} else {
|
|
374
379
|
var _val3 = {
|
|
@@ -385,17 +390,17 @@ var Item = /*#__PURE__*/function () {
|
|
|
385
390
|
if (isRectUp) {
|
|
386
391
|
var _this$create4 = this.create(state, layerID, sceneComponentType, x + depth * Math.sin(rotRad), y + depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding, false, myObject),
|
|
387
392
|
_stateI3 = _this$create4.updatedState,
|
|
388
|
-
|
|
389
|
-
duplicatedElement =
|
|
390
|
-
if (
|
|
393
|
+
_item4 = _this$create4.item;
|
|
394
|
+
duplicatedElement = _item4;
|
|
395
|
+
if (_item4 === null) {
|
|
391
396
|
alert('There are no Door Colors in this cabinet.');
|
|
392
397
|
state = state.merge({
|
|
393
398
|
mode: MODE_IDLE,
|
|
394
399
|
drawingSupport: new Map()
|
|
395
400
|
});
|
|
396
401
|
} else {
|
|
397
|
-
state = Item.select(_stateI3, layerID,
|
|
398
|
-
state = state.setIn(['drawingSupport', 'currentID'],
|
|
402
|
+
state = Item.select(_stateI3, layerID, _item4.id).updatedState;
|
|
403
|
+
state = state.setIn(['drawingSupport', 'currentID'], _item4.id);
|
|
399
404
|
}
|
|
400
405
|
} else {
|
|
401
406
|
console.log('there is no space');
|
|
@@ -532,8 +537,14 @@ var Item = /*#__PURE__*/function () {
|
|
|
532
537
|
}, {
|
|
533
538
|
key: "replaceItem",
|
|
534
539
|
value: function replaceItem(state, selectedPos, currentObject, selectedObject) {
|
|
540
|
+
var _currentObject$counte;
|
|
541
|
+
var counterTopURI = '';
|
|
542
|
+
if (!isEmpty(currentObject === null || currentObject === void 0 || (_currentObject$counte = currentObject.counterTop) === null || _currentObject$counte === void 0 ? void 0 : _currentObject$counte.uri)) {
|
|
543
|
+
var _currentObject$counte2;
|
|
544
|
+
counterTopURI = currentObject === null || currentObject === void 0 || (_currentObject$counte2 = currentObject.counterTop) === null || _currentObject$counte2 === void 0 ? void 0 : _currentObject$counte2.uri;
|
|
545
|
+
} else if (!isEmpty(state.getIn(['scene', 'layers', 'layer-1', 'counterTop']))) counterTopURI = state.getIn(['scene', 'layers', 'layer-1', 'counterTop']).uri;else counterTopURI = 'https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg';
|
|
535
546
|
state = this.remove(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
|
|
536
|
-
state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false).updatedState;
|
|
547
|
+
state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false, [], false, null, counterTopURI).updatedState;
|
|
537
548
|
// state = this.select(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
|
|
538
549
|
return {
|
|
539
550
|
updatedState: state
|
package/es/class/project.js
CHANGED
|
@@ -34,7 +34,8 @@ var Project = /*#__PURE__*/function () {
|
|
|
34
34
|
}, {
|
|
35
35
|
key: "newProject",
|
|
36
36
|
value: function newProject(state) {
|
|
37
|
-
var
|
|
37
|
+
var _state$toJS$doorStyle, _state;
|
|
38
|
+
var doorStyle = (_state$toJS$doorStyle = (_state = state) === null || _state === void 0 || (_state = _state.toJS()) === null || _state === void 0 ? void 0 : _state.doorStyle) !== null && _state$toJS$doorStyle !== void 0 ? _state$toJS$doorStyle : null;
|
|
38
39
|
// let counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']);
|
|
39
40
|
// let floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']);
|
|
40
41
|
var _viewer2D = state.viewer2D;
|
|
@@ -74,9 +75,9 @@ var Project = /*#__PURE__*/function () {
|
|
|
74
75
|
a: 0.99,
|
|
75
76
|
d: 0.99
|
|
76
77
|
});
|
|
77
|
-
var
|
|
78
|
-
oldScene =
|
|
79
|
-
oldSceneHistory =
|
|
78
|
+
var _state2 = state,
|
|
79
|
+
oldScene = _state2.scene,
|
|
80
|
+
oldSceneHistory = _state2.sceneHistory;
|
|
80
81
|
var json_items = sceneJSON.layers[sceneJSON.selectedLayer].items;
|
|
81
82
|
var elements = state.catalog.get('elements').toArray();
|
|
82
83
|
var _loop = function _loop(x) {
|
|
@@ -829,14 +830,18 @@ var Project = /*#__PURE__*/function () {
|
|
|
829
830
|
key: "createRoomWithShape",
|
|
830
831
|
value: function createRoomWithShape(state, roomShapeType, width, height, doorStyle) {
|
|
831
832
|
var catalog = state.catalog;
|
|
833
|
+
// keep measurement unit
|
|
834
|
+
var curLayerID = state.scene.selectedLayer;
|
|
835
|
+
var layerUnit = state.getIn(['scene', 'layers', curLayerID, 'unit']);
|
|
836
|
+
var ceilHeight = state.getIn(['scene', 'layers', curLayerID, 'ceilHeight']);
|
|
832
837
|
state = this.newProject(state).updatedState;
|
|
833
838
|
state = state.merge({
|
|
834
839
|
catalog: catalog
|
|
835
840
|
});
|
|
836
841
|
var _viewer2D = state.viewer2D;
|
|
837
842
|
var viewer = _viewer2D.toJS();
|
|
838
|
-
width = convert(width).from('
|
|
839
|
-
height = convert(height).from('
|
|
843
|
+
width = convert(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
|
|
844
|
+
height = convert(height).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
|
|
840
845
|
var layerID = state.scene.selectedLayer;
|
|
841
846
|
state = Item.setInitialDoorStyle(state, doorStyle).updatedState;
|
|
842
847
|
if (isEmpty(viewer)) return {
|
|
@@ -912,6 +917,9 @@ var Project = /*#__PURE__*/function () {
|
|
|
912
917
|
}
|
|
913
918
|
state = Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
|
|
914
919
|
}
|
|
920
|
+
// copy keeped measurement unit
|
|
921
|
+
state = state.setIn(['scene', 'layers', layerID, 'unit'], layerUnit);
|
|
922
|
+
state = state.setIn(['scene', 'layers', layerID, 'ceilHeight'], ceilHeight);
|
|
915
923
|
state = centering2D(state);
|
|
916
924
|
return {
|
|
917
925
|
updatedState: state
|