kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
1,288 lines (1,282 loc) • 70.3 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { convert } from "../utils/convert-units-lite";
import { Group, Hole, Layer } from "./export";
import { GeometryUtils, IDBroker, MoldingUtils, NameGenerator } from "../utils/export";
import { fromJS, Map } from 'immutable';
import { INSTALLATION_SUFFIX_TYPE, MODE_DRAGGING_ITEM, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM, MODE_ROTATING_ITEM_3D, MOLDING_LOCATIONS } from "../constants";
import { debugUtil } from "../utils/helper";
import { isUndefined } from 'util';
import { hasMoldingLayout } from "../utils/molding";
import { getInstallationSuffix } from "../components/viewer2d/utils";
var allItemRect;
var allItemSnap;
var allLines;
var allLineRects;
var allLineSnap;
var allRect;
var time1;
var time2;
var Item = /*#__PURE__*/function () {
function Item() {
_classCallCheck(this, Item);
}
return _createClass(Item, null, [{
key: "create",
value: function create(state, layerID, type, x, y, width, height, rotation, isDuplication) {
var molding = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : [];
var itemID = IDBroker.acquireID();
var item = state.catalog.factoryElement(type, {
id: itemID,
itemID: state.catalog.getIn(['elements', type, 'itemID']),
name: NameGenerator.generateName('items', state.catalog.getIn(['elements', type, 'info', 'title'])),
sku_number: state.catalog.getIn(['elements', type, 'obj']).toJS().sku_number,
//style: state.catalog.getIn(['elements', type, 'info', 'door']),
category: state.catalog.getIn(['elements', type, 'type']),
layoutpos: state.catalog.getIn(['elements', type, 'info', 'layoutpos']),
cabinet_category: state.catalog.getIn(['elements', type, 'obj']).toJS().cabinet_category,
type: type,
height: height,
width: width,
x: x,
y: y,
rotation: rotation,
isDuplication: isDuplication
}, null, state);
if (item.category === 'cabinet') {
var _state$doorStyle;
var layer = state.getIn(['scene', 'layers', layerID]);
var temp = layer.doorStyle || ((_state$doorStyle = state.doorStyle) === null || _state$doorStyle === void 0 ? void 0 : _state$doorStyle.toJS());
var cds = state.catalog.getIn(['elements', type, 'cds']);
if (cds) {
var updatedDoorStyles = _objectSpread(_objectSpread({}, temp.doorStyles), {}, {
cds: [cds]
});
item = item.merge({
doorStyle: fromJS(_objectSpread(_objectSpread({}, temp), {}, {
doorStyles: updatedDoorStyles
}))
});
}
}
if (item.get('type') === 'cabinet' && item.get('doorStyle').size === 0) {
return {
updatedState: state,
item: null
};
}
var setSizeOfItemByDoorStyle = function setSizeOfItemByDoorStyle() {
var doorStyle = item.get('doorStyle').toJS();
var euroCDS = state.catalog.getIn(['elements', type, 'customer_property']).is_euro_cds;
if (doorStyle.door_style_name === 'Euro & Frameless' && euroCDS.length > 0) {
var newProperties = item.get('properties').toJS();
if (newProperties.hasOwnProperty('depth')) {
if (!newProperties.hasOwnProperty('oldDepth')) {
newProperties['oldDepth'] = new Map({
length: newProperties.depth.length,
_length: newProperties.depth._length,
_unit: newProperties.depth._unit
});
}
newProperties['depth'] = new Map({
length: convert(euroCDS[0].euro_length).from('in').to('cm'),
_length: euroCDS[0].euro_length,
_unit: 'in'
});
}
if (newProperties.hasOwnProperty('height')) {
if (!newProperties.hasOwnProperty('oldHeight')) {
newProperties['oldHeight'] = new Map({
length: newProperties.height.length,
_length: newProperties.height._length,
_unit: newProperties.height._unit
});
}
newProperties['height'] = new Map({
length: convert(euroCDS[0].euro_height).from('in').to('cm'),
_length: euroCDS[0].euro_height,
_unit: 'in'
});
}
if (newProperties.hasOwnProperty('width')) {
if (!newProperties.hasOwnProperty('oldWidth')) {
newProperties['oldWidth'] = new Map({
length: newProperties.width.length,
_length: newProperties.width._length,
_unit: newProperties.width._unit
});
}
newProperties['width'] = new Map({
length: convert(euroCDS[0].euro_width).from('in').to('cm') - 10,
_length: euroCDS[0].euro_width,
_unit: 'in'
});
}
item = item.merge({
properties: fromJS(newProperties)
});
} else {
var properties = item.get('properties').toJS();
if (properties.hasOwnProperty('oldDepth')) {
properties['depth'] = new Map({
length: properties.oldDepth.length,
_length: properties.oldDepth._length,
_unit: properties.oldDepth._unit
});
}
if (properties.hasOwnProperty('oldHeight')) {
properties['height'] = new Map({
length: properties.oldHeight.length,
_length: properties.oldHeight._length,
_unit: properties.oldHeight._unit
});
}
if (properties.hasOwnProperty('oldWidth')) {
properties['width'] = new Map({
length: properties.oldWidth.length,
_length: properties.oldWidth._length,
_unit: properties.oldWidth._unit
});
}
item = item.merge({
properties: fromJS(properties)
});
}
};
item.category === 'cabinet' && setSizeOfItemByDoorStyle();
item = this.updateDoorHandle(item, state.getIn(['scene', 'layers', layerID]));
state = state.setIn(['scene', 'layers', layerID, 'items', itemID], item);
if (item.type.includes('Light')) {
var ceilHeight = state.getIn(['scene', 'layers', layerID, 'ceilHeight']);
var ceilUnit = state.getIn(['scene', 'layers', layerID, 'unit']);
ceilHeight = convert(ceilHeight).from(ceilUnit).to('cm');
var newAltitude = ceilHeight - item.properties.getIn(['height', 'length']);
newAltitude = convert(newAltitude).from('cm').to(ceilUnit);
item = item.setIn(['properties', 'altitude', '_length'], newAltitude);
state = state.setIn(['scene', 'layers', layerID, 'items', item.id], item);
}
if (item.category === 'cabinet') {
// If create a copied object, copied object has original object's molding property.And if create a object, it has a layer's molding property.
var layerMolding = state.getIn(['scene', 'layers', layerID, 'molding']).filter(function (md) {
return hasMoldingLayout(md, item.layoutpos);
});
state = state.setIn(['scene', 'layers', layerID, 'items', itemID, 'molding'], layerMolding.length ? layerMolding : molding);
}
return {
updatedState: state,
item: item
};
}
}, {
key: "updateDoorHandle",
value: function updateDoorHandle(item, layer) {
var doorHandle = layer.get('doorHandle');
if (doorHandle == '') return item;
var dataJSON = item.toJS();
var itemID = dataJSON.id;
var doorStyle = dataJSON.doorStyle;
var tmpDS = _objectSpread(_objectSpread({}, doorStyle), {}, {
handle_gltf: doorHandle,
metalness: 0.2,
roughness: 0.1
});
var cnt = 0;
for (var prop in doorStyle.doorStyles) cnt++;
if (cnt !== 0) {
for (var i = 1; i < 10; i++) {
tmpDS['doorStyles']['door_handle_' + i + '_gltf'] = doorHandle;
tmpDS['doorStyles']['fixed_drawer_door_handle_' + i + '_gltf'] = doorHandle;
tmpDS['doorStyles']['drawer_door_handle_' + i + '_gltf'] = doorHandle;
}
}
item = item.mergeIn(['doorStyle'], fromJS(tmpDS));
return item;
}
}, {
key: "select",
value: function select(state, layerID, itemID) {
state = Layer.select(state, layerID).updatedState;
state = Layer.selectElement(state, layerID, 'items', itemID).updatedState;
state = state.merge({
replacingSupport: new Map({
layerID: layerID,
itemID: itemID
})
});
return {
updatedState: state
};
}
}, {
key: "selectHole",
value: function selectHole(state, layerID, holeID) {
state = Layer.select(state, layerID).updatedState;
state = Layer.selectElement(state, layerID, 'holes', holeID).updatedState;
return {
updatedState: state
};
}
}, {
key: "editWidth",
value: function editWidth(state, newWidth, layerID, itemID) {
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
var properties = item.properties;
if (newWidth === 0) {
alert('You can not set width to 0');
return {
updatedState: state
};
}
var width = new Map({
_length: newWidth,
_unit: 'in',
length: convert(newWidth).from('in').to('cm')
});
properties = properties.set('width', width);
state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties'], properties);
return {
updatedState: state
};
}
}, {
key: "prepareSnap",
value: function prepareSnap(state, layerID) {
var layer = state.getIn(['scene', 'layers', layerID]);
var scene = state.get('scene');
var catalog = state.catalog.toJS();
allLines = GeometryUtils.getAllLines(layer);
allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
allItemRect = GeometryUtils.getAllItems(scene, catalog, allLineRects);
allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
allRect = allItemRect.others.concat(allLineRects);
allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
}
}, {
key: "duplicateSelected",
value: function duplicateSelected(state, currentObject) {
var layerID = state.getIn(['scene', 'selectedLayer']);
var layer = state.getIn(['scene', 'layers', layerID]);
var objectID = currentObject.id;
var myObject;
var x = currentObject.x;
var y = currentObject.y;
var sceneComponentType, width, depth, rotRad;
switch (currentObject.prototype) {
case 'items':
myObject = state.getIn(['scene', 'layers', layerID, 'items', objectID]);
sceneComponentType = myObject.type;
width = myObject.properties.getIn(['width', 'length']);
depth = myObject.properties.getIn(['depth', 'length']);
rotRad = myObject.rotation * Math.PI / 180;
this.prepareSnap(state, layerID);
var val = {
pos: {
x: x + width * Math.cos(rotRad),
y: y + width * Math.sin(rotRad)
},
rotRad: rotRad
};
val.size = allItemRect.cur.size;
val.layoutpos = allItemRect.cur.layoutpos;
val.is_corner = allItemRect.cur.is_corner;
var isrectSect = GeometryUtils.validInterSect(allRect, val);
if (isrectSect) {
// Duplicated object has a original object's molding property
var _this$create = this.create(state, layerID, sceneComponentType, x + width * Math.cos(rotRad), y + width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
stateI = _this$create.updatedState,
item = _this$create.item;
if (item === null) {
alert('There are no Door Colors in this cabinet.');
state = state.merge({
mode: MODE_IDLE,
drawingSupport: new Map()
});
} else {
state = Item.select(stateI, layerID, item.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], item.id);
}
} else {
var _val = {
pos: {
x: x - width * Math.cos(rotRad),
y: y - width * Math.sin(rotRad)
},
rotRad: rotRad
};
_val.size = allItemRect.cur.size;
_val.layoutpos = allItemRect.cur.layoutpos;
_val.is_corner = allItemRect.cur.is_corner;
var isRect = GeometryUtils.validInterSect(allRect, _val);
if (isRect) {
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),
_stateI = _this$create2.updatedState,
_item = _this$create2.item;
if (_item === null) {
alert('There are no Door Colors in this cabinet.');
state = state.merge({
mode: MODE_IDLE,
drawingSupport: new Map()
});
} else {
state = Item.select(_stateI, layerID, _item.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], _item.id);
}
} else {
var _val2 = {
pos: {
x: x - depth * Math.sin(rotRad),
y: y - depth * Math.cos(rotRad)
},
rotRad: rotRad
};
_val2.size = allItemRect.cur.size;
_val2.layoutpos = allItemRect.cur.layoutpos;
_val2.is_corner = allItemRect.cur.is_corner;
var isRectDown = GeometryUtils.validInterSect(allRect, _val2);
if (isRectDown) {
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),
_stateI2 = _this$create3.updatedState,
_item2 = _this$create3.item;
if (_item2 === null) {
alert('There are no Door Colors in this cabinet.');
state = state.merge({
mode: MODE_IDLE,
drawingSupport: new Map()
});
} else {
state = Item.select(_stateI2, layerID, _item2.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], _item2.id);
}
} else {
var _val3 = {
pos: {
x: x + depth * Math.sin(rotRad),
y: y + depth * Math.cos(rotRad)
},
rotRad: rotRad
};
_val3.size = allItemRect.cur.size;
_val3.layoutpos = allItemRect.cur.layoutpos;
_val3.is_corner = allItemRect.cur.is_corner;
var isRectUp = GeometryUtils.validInterSect(allRect, _val3);
if (isRectUp) {
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),
_stateI3 = _this$create4.updatedState,
_item3 = _this$create4.item;
if (_item3 === null) {
alert('There are no Door Colors in this cabinet.');
state = state.merge({
mode: MODE_IDLE,
drawingSupport: new Map()
});
} else {
state = Item.select(_stateI3, layerID, _item3.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], _item3.id);
}
} else {
console.log('there is no space');
alert('No more space!');
}
}
}
}
break;
case 'holes':
this.prepareSnap(state, layerID);
myObject = state.getIn(['scene', 'layers', layerID, 'holes', objectID]);
var line = state.getIn(['scene', 'layers', layerID, 'lines', myObject.line]);
sceneComponentType = myObject.type;
width = myObject.get('properties').get('width').get('length');
var myOffset = myObject.offset;
var v0 = layer.getIn(['vertices', line.vertices.get(0)]);
var v1 = layer.getIn(['vertices', line.vertices.get(1)]);
var lineLength = GeometryUtils.pointsDistance(v0.x, v0.y, v1.x, v1.y);
var delta = width / 2 / lineLength + 0.00001;
var allHoles = state.getIn(['scene', 'layers', layerID, 'holes']);
var rightAble = true;
var leftAble = true;
if (myOffset + 3 * delta > 1) rightAble = false;else if (myOffset - 3 * delta < 0) leftAble = false;
if (allHoles.size === 0) {
var _this$createHole = this.createHole(state, layerID, sceneComponentType, myObject.line, myOffset + delta * 2, myObject.get('properties')),
stateH = _this$createHole.updatedState,
hole = _this$createHole.hole;
state = this.selectHole(stateH, layerID, hole.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], hole.id);
} else {
allHoles.forEach(function (hole) {
if (hole.line === line.id) if (!hole.selected) {
var newDelta = hole.get('properties').get('width').get('length') / 2 / lineLength;
if (myOffset < hole.offset) {
if (myOffset + delta * 3 > hole.offset - newDelta) {
rightAble = false;
}
} else {
if (myOffset - delta * 3 < hole.offset + newDelta) {
leftAble = false;
}
}
}
});
}
if (rightAble) {
var _this$createHole2 = this.createHole(state, layerID, sceneComponentType, myObject.line, myOffset + delta * 2, myObject.get('properties')),
_stateH = _this$createHole2.updatedState,
_hole = _this$createHole2.hole;
state = this.selectHole(_stateH, layerID, _hole.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], _hole.id);
} else {
if (leftAble) {
var _this$createHole3 = this.createHole(state, layerID, sceneComponentType, myObject.line, myOffset - delta * 2, myObject.get('properties')),
_stateH2 = _this$createHole3.updatedState,
_hole2 = _this$createHole3.hole;
state = this.selectHole(_stateH2, layerID, _hole2.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], _hole2.id);
} else alert('No more space');
}
break;
case 'lines':
alert('Duplicating lines is not currently supported yet.');
break;
default:
break;
}
return {
updatedState: state
};
}
}, {
key: "storeDistArray",
value: function storeDistArray(state, layerID, itemID, distArray) {
var curDistArray = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'distArray']);
var isEqualDist = function isEqualDist(a, b) {
return a == b;
};
if (curDistArray) {
var equal = curDistArray.every(function (curElement, index) {
return isEqualDist(curElement[0], distArray[index][0]);
});
if (!equal) {
state = state.setIn(['scene', 'layers', layerID, 'items', itemID, 'distArray'], distArray);
}
}
return {
updatedState: state
};
}
}, {
key: "validateItemPositions",
value: function validateItemPositions(state, layerID) {
var _this = this;
var layer = state.getIn(['scene', 'layers', layerID]);
function isItemInRect(item) {
var _state$getIn = state.getIn(['scene']),
width = _state$getIn.width,
height = _state$getIn.height;
return item.x >= 0 && item.x <= width && item.y >= 0 && item.y <= height;
}
layer.items.forEach(function (item) {
if (!isItemInRect(item)) state = _this.remove(state, layerID, item.id).updatedState;
});
return {
updatedState: state
};
}
}, {
key: "remove",
value: function remove(state, layerID, itemID) {
state = this.unselect(state, layerID, itemID).updatedState;
state = Layer.removeElement(state, layerID, 'items', itemID).updatedState;
state.getIn(['scene', 'groups']).forEach(function (group) {
return state = Group.removeElement(state, group.id, layerID, 'items', itemID).updatedState;
});
return {
updatedState: state
};
}
}, {
key: "replaceItem",
value: function replaceItem(state, selectedPos, currentObject, selectedObject) {
state = this.remove(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
state = this.create(state, state.scene.selectedLayer, selectedObject.name, selectedPos.x, selectedPos.y, selectedObject.info.width, selectedObject.info.height, selectedPos.rotation, false).updatedState;
// state = this.select(state, state.scene.selectedLayer, selectedPos.selectedItemId).updatedState;
return {
updatedState: state
};
}
}, {
key: "unselect",
value: function unselect(state, layerID, itemID) {
state = Layer.unselect(state, layerID, 'items', itemID).updatedState;
return {
updatedState: state
};
}
}, {
key: "selectToolDrawingItem",
value: function selectToolDrawingItem(state, sceneComponentType) {
state = state.merge({
mode: MODE_DRAWING_ITEM,
drawingSupport: new Map({
type: sceneComponentType
})
});
return {
updatedState: state
};
}
}, {
key: "selectToolDrawingItem3D",
value: function selectToolDrawingItem3D(state, sceneComponentType) {
state = state.merge({
mode: MODE_DRAWING_ITEM_3D,
drawingSupport: new Map({
type: sceneComponentType
})
});
state = state.mergeIn(['scene', 'loadFlag'], false);
// place the item at random position
var layerID = state.scene.get('selectedLayer');
state = this.updateDrawingItem(state, layerID, 0, 0).updatedState;
return {
updatedState: state
};
}
}, {
key: "endCreatingCabinet",
value: function endCreatingCabinet(state) {
state = state.merge({
isOpen: false,
openedType: 0
});
return {
updatedState: state
};
}
}, {
key: "updatePopupOpen",
value: function updatePopupOpen(state, value) {
state = state.merge({
openedType: value
});
return {
updatedState: state
};
}
}, {
key: "updateDrawingItem",
value: function updateDrawingItem(state, layerID, x, y) {
if (state.hasIn(['drawingSupport', 'currentID'])) {
var mode = state.get('mode');
if ([MODE_DRAWING_ITEM_3D].includes(mode)) {
state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
return item && item.merge({
x: x,
y: y
});
});
state = state.merge({
mode: MODE_IDLE_3D
});
}
if ([MODE_DRAWING_ITEM].includes(mode)) {
state = state.merge({
mode: MODE_IDLE
});
state = state.updateIn(['scene', 'layers', layerID, 'items', state.getIn(['drawingSupport', 'currentID'])], function (item) {
return item && item.merge({
x: x,
y: y
});
});
}
} else {
var _this$create5 = this.create(state, layerID, state.getIn(['drawingSupport', 'type']), x, y, 200, 100, 0, false),
stateI = _this$create5.updatedState,
item = _this$create5.item;
if (item === null) {
alert('There are no Door Colors in this cabinet.');
state = state.merge({
mode: MODE_IDLE,
drawingSupport: new Map()
});
} else {
state = Item.select(stateI, layerID, item.id).updatedState;
state = state.setIn(['drawingSupport', 'currentID'], item.id);
}
}
return {
updatedState: state
};
}
}, {
key: "updateDraggingItemChanged",
value: function updateDraggingItemChanged(state, x, y, layerID, itemID) {
var _state = state,
scene = _state.scene;
// let originalX = draggingSupport.get('originalX');
// let originalY = draggingSupport.get('originalY');
// let diffX = x;
// let diffY = y;
var item = scene.getIn(['layers', layerID, 'items', itemID]);
// let tX = originalX - diffX;
// let tY = originalY - diffY;
// tX = tX > 500 ? 500 : tX < 0 ? 0 : tX;
// tY = tY > 500 ? 500 : tY < 0 ? 0 : tY;
item = item.merge({
x: x,
y: y
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
time2 = debugUtil();
false && console.log('FPS:', Math.round(1000 / (time2 - time1)), ' Delta Time:', (time2 - time1) / 1000, '(s)');
return {
updatedState: state
};
}
}, {
key: "endDrawingItem",
value: function endDrawingItem(state, layerID, x, y) {
var catalog = state.catalog;
state = this.updateDrawingItem(state, layerID, x, y, catalog).updatedState;
state = Layer.unselectAll(state, layerID).updatedState;
var popup = state.get('popup');
state = state.merge({
drawingSupport: Map({
type: state.drawingSupport.get('type')
}),
isOpen: !popup
});
state = Layer.unselectAll(state, layerID).updatedState;
this.updateMolding(state);
return {
updatedState: state
};
}
}, {
key: "beginDraggingItem",
value: function beginDraggingItem(state, layerID, itemID, x, y) {
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
time1 = debugUtil();
if (isUndefined(item)) return;
state = state.merge({
mode: MODE_DRAGGING_ITEM,
draggingSupport: Map({
layerID: layerID,
itemID: itemID,
startPointX: x,
startPointY: y,
originalX: item.x,
originalY: item.y
})
});
return {
updatedState: state
};
}
}, {
key: "beginDraggingItem3D",
value: function beginDraggingItem3D(state, layerID, itemID, x, y) {
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
state = state.setIn(['scene', 'isEndDragging'], false);
if (isUndefined(item)) return {
updatedState: state
};
state = state.merge({
mode: MODE_DRAGGING_ITEM_3D,
draggingSupport: Map({
layerID: layerID,
itemID: itemID,
startPointX: x,
startPointY: y,
originalX: item.x,
originalY: item.y
})
});
return {
updatedState: state
};
}
}, {
key: "updateDraggingItem",
value: function updateDraggingItem(state, x, y) {
var _state2 = state,
draggingSupport = _state2.draggingSupport,
scene = _state2.scene;
var layerID = draggingSupport.get('layerID');
var itemID = draggingSupport.get('itemID');
var startPointX = draggingSupport.get('startPointX');
var startPointY = draggingSupport.get('startPointY');
var originalX = draggingSupport.get('originalX');
var originalY = draggingSupport.get('originalY');
var diffX = startPointX - x;
var diffY = startPointY - y;
var item = scene.getIn(['layers', layerID, 'items', itemID]);
if (isUndefined(item)) return {
updatedState: state
};
var tX = originalX - diffX;
var tY = originalY - diffY;
tX = tX > scene.width ? scene.width : tX < 0 ? 0 : tX;
tY = tY > scene.height ? scene.height : tY < 0 ? 0 : tY;
item = item.merge({
x: tX,
y: tY
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
return {
updatedState: state
};
}
}, {
key: "updateDraggingItem3DX",
value: function updateDraggingItem3DX(state, x) {
var _state3 = state,
draggingSupport = _state3.draggingSupport,
scene = _state3.scene;
var layerID = draggingSupport.get('layerID');
var itemID = draggingSupport.get('itemID');
var startPointX = draggingSupport.get('startPointX');
var originalX = draggingSupport.get('originalX');
var diffX = startPointX - x;
var item = scene.getIn(['layers', layerID, 'items', itemID]);
item = item.merge({
x: originalX - diffX
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
return {
updatedState: state
};
}
}, {
key: "updateDraggingItem3DY",
value: function updateDraggingItem3DY(state, y) {
var _state4 = state,
draggingSupport = _state4.draggingSupport,
scene = _state4.scene;
var layerID = draggingSupport.get('layerID');
var itemID = draggingSupport.get('itemID');
var startPointY = draggingSupport.get('startPointY');
var originalY = draggingSupport.get('originalY');
var diffY = startPointY - y;
var item = scene.getIn(['layers', layerID, 'items', itemID]);
item = item.merge({
y: originalY - diffY
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
return {
updatedState: state
};
}
}, {
key: "endDraggingItem",
value: function endDraggingItem(state, x, y) {
state = this.updateDraggingItem(state, x, y).updatedState;
state = state.merge({
mode: MODE_IDLE
});
return {
updatedState: state
};
}
}, {
key: "endDraggingItem3D",
value: function endDraggingItem3D(state) {
// state = this.updateDraggingItem(state, x, y).updatedState;
state = state.merge({
mode: MODE_IDLE_3D
});
state = state.setIn(['scene', 'isEndDragging'], true);
return {
updatedState: state
};
}
}, {
key: "beginRotatingItem",
value: function beginRotatingItem(state, layerID, itemID, x, y) {
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
var originRotation = item.get('rotation');
state = state.merge({
mode: MODE_ROTATING_ITEM,
rotatingSupport: Map({
layerID: layerID,
itemID: itemID,
x: x,
y: y,
originRotation: originRotation
})
});
return {
updatedState: state
};
}
}, {
key: "beginRotatingItem3D",
value: function beginRotatingItem3D(state, layerID, itemID, x, y) {
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
var originRotation = item.get('rotation');
state = state.merge({
mode: MODE_ROTATING_ITEM_3D,
rotatingSupport: Map({
layerID: layerID,
itemID: itemID,
x: x,
y: y,
originRotation: originRotation
})
});
return {
updatedState: state
};
}
}, {
key: "updateRotatingItem",
value: function updateRotatingItem(state, x, y) {
var _state5 = state,
rotatingSupport = _state5.rotatingSupport,
scene = _state5.scene;
var layerID = rotatingSupport.get('layerID');
var itemID = rotatingSupport.get('itemID');
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
var origin = {
x: rotatingSupport.get('x'),
y: rotatingSupport.get('y'),
originRotation: rotatingSupport.get('originRotation')
};
var newRot = Math.atan2(origin.y - item.y, origin.x - item.x) * 180 / Math.PI + 90;
var deltaRot = newRot - origin.originRotation;
var deltaX = x - item.x;
var deltaY = y - item.y;
var rotation = Math.atan2(deltaY, deltaX) * 180 / Math.PI + 90;
rotation -= deltaRot;
if (-5 < rotation && rotation < 5) rotation = 0;
if (-95 < rotation && rotation < -85) rotation = -90;
if (-185 < rotation && rotation < -175) rotation = -180;
if (85 < rotation && rotation < 95) rotation = 90;
if (-270 < rotation && rotation < -265) rotation = 90;
if (175 < rotation && rotation < 185) rotation = 180;
if (265 < rotation && rotation < 275) rotation = -90;
item = item.merge({
rotation: rotation
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
return {
updatedState: state
};
}
}, {
key: "updateRotatingItemChanged",
value: function updateRotatingItemChanged(state, rotation, layerID, itemID) {
var scene = state.scene;
// let originalX = draggingSupport.get('originalX');
// let originalY = draggingSupport.get('originalY');
// let diffX = x;
// let diffY = y;
var item = scene.getIn(['layers', layerID, 'items', itemID]);
// let tX = originalX - diffX;
// let tY = originalY - diffY;
// tX = tX > 500 ? 500 : tX < 0 ? 0 : tX;
// tY = tY > 500 ? 500 : tY < 0 ? 0 : tY;
item = item.merge({
rotation: rotation
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
return {
updatedState: state
};
}
}, {
key: "endRotatingItem",
value: function endRotatingItem(state, x, y) {
//state = this.updateRotatingItem(state, x, y).updatedState;
state = state.merge({
mode: MODE_IDLE
});
return {
updatedState: state
};
}
}, {
key: "endRotatingItem3D",
value: function endRotatingItem3D(state, x, y) {
state = this.updateRotatingItem(state, x, y).updatedState;
state = state.merge({
mode: MODE_IDLE_3D
});
return {
updatedState: state
};
}
}, {
key: "replaceSubmodule",
value: function replaceSubmodule(state, url) {
var _state6 = state,
replacingSupport = _state6.replacingSupport,
scene = _state6.scene;
url = 'catalog/texture.png';
var urlData = url.split('/');
var newURL = '';
var addURL = false;
for (var i = 0; i < urlData.length; i++) {
if (urlData[i] == '') {
continue;
}
newURL += '/' + urlData[i];
}
var layerID = replacingSupport.get('layerID');
var itemID = replacingSupport.get('itemID');
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
var submodule = [];
var normalMap = [];
for (var _i = 0; _i < item.submodule.size; _i++) submodule.push(item.submodule.get(_i));
for (var _i2 = 0; _i2 < item.normalMap.size; _i2++) normalMap.push(item.normalMap.get(_i2));
//let submodule = state.getIn(['scene', 'layers', layerID, 'items', itemID, 'submodule']);
urlData = newURL.split('/');
var flag = false;
if (urlData[urlData.length - 1].includes('.gltf')) {
for (var _i3 = 0; _i3 < submodule.length; _i3++) {
var pathData = submodule[_i3].split('/');
if (pathData[pathData.length - 2] === urlData[urlData.length - 2]) {
submodule[_i3] = newURL;
flag = true;
}
}
if (!flag) submodule.push(newURL);
item = item.merge({
submodule: submodule
});
} else {
for (var _i4 = 0; _i4 < normalMap.length; _i4++) {
var _pathData = normalMap[_i4].split('/');
if (_pathData[_pathData.length - 2] === urlData[urlData.length - 2]) {
normalMap[_i4] = newURL;
flag = true;
}
}
if (!flag) normalMap.push(newURL);
item = item.merge({
normalMap: normalMap
});
}
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
state = state.merge({
mode: MODE_IDLE_3D
});
return {
updatedState: state
};
}
}, {
key: "setProperties",
value: function setProperties(state, layerID, itemID, properties) {
state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties'], properties);
return {
updatedState: state
};
}
}, {
key: "setJsProperties",
value: function setJsProperties(state, layerID, itemID, properties) {
return this.setProperties(state, layerID, itemID, fromJS(properties));
}
}, {
key: "updateProperties",
value: function updateProperties(state, layerID, itemID, properties) {
properties.forEach(function (v, k) {
if (state.hasIn(['scene', 'layers', layerID, 'items', itemID, 'properties', k])) state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'properties', k], v);
});
return {
updatedState: state
};
}
}, {
key: "updateJsProperties",
value: function updateJsProperties(state, layerID, itemID, properties) {
return this.updateProperties(state, layerID, itemID, fromJS(properties));
}
}, {
key: "setAttributes",
value: function setAttributes(state, layerID, itemID, itemAttributes) {
state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID], itemAttributes);
return {
updatedState: state
};
}
}, {
key: "setJsAttributes",
value: function setJsAttributes(state, layerID, itemID, itemAttributes) {
itemAttributes = fromJS(itemAttributes);
return this.setAttributes(state, layerID, itemID, itemAttributes);
}
}, {
key: "animateObject",
value: function animateObject(state, value) {
var _state7 = state,
replacingSupport = _state7.replacingSupport,
scene = _state7.scene;
var layerID = replacingSupport.get('layerID');
var itemID = replacingSupport.get('itemID');
var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
if (item !== undefined) {
var animCount = item.get('animate');
item = item.merge({
animValue: value,
animate: animCount + 1
});
state = state.merge({
scene: scene.mergeIn(['layers', layerID, 'items', itemID], item)
});
state = state.merge({
mode: MODE_IDLE_3D
});
}
return {
updatedState: state
};
}
}, {
key: "removeReplacingSupport",
value: function removeReplacingSupport(state) {
state = state.merge({
replacingSupport: new Map()
});
return {
updatedState: state
};
}
}, {
key: "setInitialDoorStyle",
value: function setInitialDoorStyle(state, doorStyle) {
state = state.merge({
doorStyle: doorStyle
});
var _state8 = state,
scene = _state8.scene;
var layerID = scene.get('selectedLayer');
var layers = scene.layers.get(layerID);
var items = layers.items;
items.forEach(function (data) {
{
var itemID = data.id;
var tmpDS = _objectSpread(_objectSpread({}, data.doorStyle), {}, {
doorStyles: _objectSpread(_objectSpread({}, data.doorStyle.doorStyles), {}, {
counttop: doorStyle.doorStyles.counttop
})
});
data = data.mergeIn(['doorStyle'], fromJS(tmpDS));
layers = layers.mergeIn(['items', itemID], data);
state = state.merge({
scene: scene.mergeIn(['layers', layerID], layers)
});
}
});
return {
updatedState: state
};
}
}, {
key: "setDoorStyle",
value: function setDoorStyle(state, doorStyle, itemCDS, isAll) {
var _this2 = this;
var keys = Object.keys(doorStyle.doorStyles);
keys = keys.filter(function (elem) {
return !elem.endsWith('_gltf');
});
var tmp = {};
for (var x in keys) {
tmp[keys[x]] = doorStyle.doorStyles[keys[x]];
}
state = state.setIn(['scene', 'layers', state.scene.selectedLayer, 'doorStyle'], doorStyle);
state = state.merge({
doorStyle: doorStyle
});
var layerID = state.scene.get('selectedLayer');
var temp_layer_molding = state.scene.getIn(['layers', layerID, 'molding']);
temp_layer_molding = temp_layer_molding.filter(function (md) {
return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
return md.itemID === ds.itemID;
});
});
state = state.setIn(['scene', 'layers', layerID, 'molding'], temp_layer_molding);
var itemIDs = state.scene.layers.getIn([layerID, 'selected', 'items']).toJS();
var setDoorStyleOfItem = function setDoorStyleOfItem(data) {
var _cds$data;
if (data.category !== 'cabinet') return; //CDS should effect to cabinets
var itemID = data.id;
var curItem = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
var layer = state.getIn(['scene', 'layers', layerID]);
var tmpMolding = _toConsumableArray(curItem.molding);
var temp_item_molding = _toConsumableArray(curItem.molding);
temp_item_molding = temp_item_molding.filter(function (md) {
return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
return ds.itemID === md.itemID;
});
});
tmpMolding.forEach(function (md) {
var itemGroup = MoldingUtils.getItemGroupFromMolding(layer, curItem, md);
itemGroup.forEach(function (it) {
state = state.setIn(['scene', 'layers', layerID, 'items', it.id, 'molding'], temp_item_molding);
});
});
var cds = itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.find(function (elem) {
return elem.itemID === data.itemID;
});
var euro_cds = (cds === null || cds === void 0 || (_cds$data = cds.data) === null || _cds$data === void 0 ? void 0 : _cds$data.filter(function (element) {
return element && element.is_euro_cds;
})) || [];
var cds_data = cds ? [cds] : [];
if (
// doorStyle.door_style_name === 'Euro & Frameless' &&
euro_cds.length > 0) {
var newProperties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
if (newProperties.hasOwnProperty('depth')) {
if (!newProperties.hasOwnProperty('oldDepth')) {
newProperties['oldDepth'] = new Map({
length: newProperties.depth.length,
_length: newProperties.depth._length,
_unit: newProperties.depth._unit
});
}
newProperties['depth'] = new Map({
length: convert(euro_cds[0].euro_length).from('in').to('cm'),
_length: euro_cds[0].euro_length,
_unit: 'in'
});
}
if (newProperties.hasOwnProperty('height')) {
if (!newProperties.hasOwnProperty('oldHeight')) {
newProperties['oldHeight'] = new Map({
length: newProperties.height.length,
_length: newProperties.height._length,
_unit: newProperties.height._unit
});
}
newProperties['height'] = new Map({
length: convert(euro_cds[0].euro_height).from('in').to('cm'),
_length: euro_cds[0].euro_height,
_unit: 'in'
});
}
if (newProperties.hasOwnProperty('width')) {
if (!newProperties.hasOwnProperty('oldWidth')) {
newProperties['oldWidth'] = new Map({
length: newProperties.width.length,
_length: newProperties.width._length,
_unit: newProperties.width._unit
});
}
newProperties['width'] = new Map({
length: convert(euro_cds[0].euro_width).from('in').to('cm') - 10,
_length: euro_cds[0].euro_width,
_unit: 'in'
});
}
state = _this2.setJsProperties(state, layerID, itemID, newProperties).updatedState;
} else {
var properties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
if (properties.hasOwnProperty('oldDepth')) {
properties['depth'] = new Map({
length: properties.oldDepth.length,
_length: properties.oldDepth._length,
_unit: properties.oldDepth._unit
});
}
if (properties.hasOwnProperty('oldHeight')) {
properties['height'] = new Map({
length: properties.oldHeight.length,
_length: properties.oldHeight._length,
_unit: properties.oldHeight._unit
});
}
if (properties.hasOwnProperty('oldWidth')) {
properties['width'] = new Map({
length: properties.oldWidth.length,
_length: properties.oldWidth._length,
_unit: properties.oldWidth._unit
});
}
state = _this2.setJsProperties(state, layerID, itemID, properties).updatedState;
}
var tmpDS = {
id: doorStyle.id,
brightness: doorStyle.brightness,
color: doorStyle.color,
glossness: doorStyle.glossness,
name: doorStyle.name,
door_style_name: doorStyle.door_style_name,
texture: doorStyle.texture,
thumbnail: doorStyle.thumbnail,
type: doorStyle.type,
sku: doorStyle.sku,
color_sku_alias: doorStyle.color_sku_alias,
// alias name of color_sku for the current dealer
install: getInstallationSuffix(INSTALLATION_SUFFIX_TYPE.NAME, doorStyle),
doorStyles: _objectSpread(_objectSpread({}, tmp), {}, {
cds: cds_data
})
};
state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'doorStyle'], fromJS(tmpDS));
};
if (isAll) {
var items = state.scene.layers.get(layerID).items;
items.forEach(setDoorStyleOfItem);
} else {
if (itemIDs.length > 0) {
var _loop = function _loop() {
var itemID = itemIDs[i];
var items = state.scene.layers.get(layerID).items;
items.forEach(function (data) {
if (itemID === data.id) {
setDoorStyleOfItem(data);
}
});
};
for (var i = 0; i < itemIDs.length; i++) {
_loop();
}
}
}
return {
updatedState: state
};
}
}, {
key: "setCounterTop",
value: function setCounterTop(state, counterTop) {
var _state9 = state,
scene = _state9.scene;
var layerID = scene.get('selectedLayer');
var layers = scene.layers.get(layerID);
layers = layers.mergeIn(['counterTop'], counterTop);
state = state.merge({
scene: scene.mergeIn(['layers', layerID], layers)
});
var items = layers.items;
items.forEach(function (data) {
{
var dataJSON = data.toJS();
var itemID = dataJSON.id;
var newCounter = dataJSON.counterTop;
newCounter = _objectSpread(_objectSpread({}, newCounter), counterTop);
data = data.mergeIn(['counterTop'], newCounter);
layers = layers.mergeIn(['items', itemID], data);
state = state.