UNPKG

kitchen-simulator

Version:

It is a kitchen simulator (self-contained micro-frontend).

795 lines (789 loc) 27.1 kB
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 { Map, List } from 'immutable'; import { MODE_VIEWING_CATALOG, MODE_CONFIGURING_PROJECT, MODE_IDLE, MODE_DRAWING_ITEM_3D, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_LINE, MODE_WAITING_DRAWING_LINE, MODE_DRAWING_HOLE, ARRAY_3D_MODES, END_DRAWING_LINE } from "../constants"; import * as constants from "../constants"; import { State, Catalog, Scene, safeLoadMapList, CatalogElement } from "../models"; import { GeometryUtils, history } from "../utils/export"; import { Layer, Group, Line, Hole, Item, Area, HorizontalGuide, VerticalGuide } from "../class/export"; import * as viewer2DActions from "../actions/viewer2d-actions"; import { isEmpty } from "../utils/helper"; var Project = /*#__PURE__*/function () { function Project() { _classCallCheck(this, Project); } return _createClass(Project, null, [{ key: "setAlterate", value: function setAlterate(state) { return { updatedState: state.set('alterate', !state.alterate) }; } }, { key: "openCatalog", value: function openCatalog(state) { state = this.setMode(state, MODE_VIEWING_CATALOG).updatedState; return { updatedState: state }; } }, { key: "newProject", value: function newProject(state) { var doorStyle = state.toJS().doorStyle === null ? null : state.toJS().doorStyle; // let counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']); // let floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']); var _viewer2D = state.viewer2D; var viewer = state.viewer2D.toJS(); _viewer2D = _viewer2D.merge({ e: viewer.viewerWidth / 2 - viewer.SVGWidth / 2, f: viewer.viewerHeight / 2 - viewer.SVGHeight / 2, a: 0.99, d: 0.99 }); state = new State({}); state = state.merge({ doorStyle: doorStyle, viewer2D: _viewer2D }); // state = Item.setCounterTop(state, counterTop).updatedState; // state = Area.setFloorStyles(state, floorStyle).updatedState; return { updatedState: state }; } }, { key: "loadProject", value: function loadProject(state, sceneJSON) { var doorStyle = state.doorStyle; var layerID = state.scene.selectedLayer; var _viewer2D = state.viewer2D; var viewer = state.viewer2D.toJS(); var counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']); var floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']); var a, e, f; e = viewer.viewerWidth / 2 - viewer.SVGWidth / 2; f = viewer.viewerHeight / 2 - viewer.SVGHeight / 2; _viewer2D = _viewer2D.merge({ e: e, f: f, a: 0.99, d: 0.99 }); var _state = state, oldScene = _state.scene, oldSceneHistory = _state.sceneHistory; var json_items = sceneJSON.layers[sceneJSON.selectedLayer].items; var elements = state.catalog.get('elements').toArray(); var _loop = function _loop(x) { var idx = elements.findIndex(function (it) { return it.itemID === json_items[x].itemID && it.type === json_items[x].category; }); if (idx > -1) { json_items[x].name = elements[idx].name; json_items[x].type = elements[idx].name; } }; for (var x in json_items) { _loop(x); } var newScene = new Scene(sceneJSON); state = new State({ scene: newScene.toJS(), catalog: state.catalog.toJS() }); state = state.merge({ sceneHistory: history.historyPush(oldSceneHistory, oldScene) }); if (state.scene.title === '') { state = state.mergeIn(['scene', 'title'], oldScene.title); } //Validate item positions after loading project. state = Item.validateItemPositions(state, layerID).updatedState; // get counterTop and floorStyle is after state created from sceneJSON if (state.getIn(['scene', 'layers', layerID, 'counterTop']).uri) { counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']); } if (state.getIn(['scene', 'layers', layerID, 'floorStyle']).uri) { floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']); } var layer = state.scene.getIn(['layers', state.scene.selectedLayer]); var bb = { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity }; bb = layer.vertices.reduce(function (pre, cur) { pre.minX = Math.min(pre.minX, cur.x); pre.maxX = Math.max(pre.maxX, cur.x); pre.minY = Math.min(pre.minY, cur.y); pre.maxY = Math.max(pre.maxY, cur.y); return pre; }, bb); var w = bb.maxX - bb.minX; var h = bb.maxY - bb.minY; if (w != 0 && Math.abs(w) != Infinity && h != 0 && Math.abs(h) != Infinity) { a = viewer.viewerHeight < h ? viewer.viewerHeight / h : (viewer.viewerHeight / h * 3 / 5 - 0.5) / constants.ZOOM_VARIABLE > 400 ? viewer.viewerHeight / h * 400 / ((viewer.viewerHeight / h - 0.5) / constants.ZOOM_VARIABLE) : viewer.viewerHeight / h * 3 / 5; e = (viewer.viewerWidth - (bb.maxX + bb.minX) * a) / 2; f = (viewer.viewerHeight - (viewer.SVGHeight * 2 - bb.maxY - bb.minY) * a) / 2; while (!(e <= 10)) { e -= 0.1; } while (!(e + a * viewer.SVGWidth + 10 >= viewer.viewerWidth)) { e += 0.1; } while (!(f <= 80)) { f -= 0.1; } while (!(f + a * viewer.SVGHeight + 10 >= viewer.viewerHeight)) { f += 0.1; } _viewer2D = _viewer2D.merge({ a: a, d: a, e: e, f: f }); } if (!doorStyle) { if (state.getIn(['scene', 'layers', layerID, 'doorStyle'])) { doorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']); } } state = state.merge({ doorStyle: doorStyle, viewer2D: _viewer2D }); state = Item.setCounterTop(state, counterTop).updatedState; state = Area.setFloorStyles(state, floorStyle).updatedState; this.updateZoomScale(state, a); viewer2DActions.updateCameraView(_viewer2D); return { updatedState: state }; } }, { key: "setProperties", value: function setProperties(state, layerID, properties) { var propJS = properties.toJS(); if (propJS && !propJS.altitude) { alert('You can not set width to 0'); return { updatedState: state }; } state = Layer.setPropertiesOnSelected(state, layerID, properties).updatedState; state = Layer.updateMovingState(state, false).updatedState; return { updatedState: state }; } }, { key: "updateProperties", value: function updateProperties(state, layerID, properties) { state = Layer.updatePropertiesOnSelected(state, layerID, properties).updatedState; return { updatedState: state }; } }, { key: "setItemsAttributes", value: function setItemsAttributes(state, attributes) { //TODO apply only to items state = Layer.updateMovingState(state, false).updatedState; state.getIn(['scene', 'layers']).forEach(function (layer) { state = Layer.setAttributesOnSelected(state, layer.id, attributes).updatedState; }); return { updatedState: state }; } }, { key: "setLinesAttributes", value: function setLinesAttributes(state, attributes, isDirect, directData) { //TODO apply only to lines if (!isDirect) { state.getIn(['scene', 'layers']).forEach(function (layer) { state = Layer.setAttributesOnSelected(state, layer.id, attributes).updatedState; }); } else if (isDirect && directData !== null) { var layerID = directData.layerID, lineID = directData.lineID; if (layerID && lineID) state = Line.setAttributes(state, layerID, lineID, attributes).updatedState; } return { updatedState: state }; } }, { key: "setHolesAttributes", value: function setHolesAttributes(state, attributes) { //TODO apply only to holes state.getIn(['scene', 'layers']).forEach(function (layer) { state = Layer.setAttributesOnSelected(state, layer.id, attributes).updatedState; }); return { updatedState: state }; } }, { key: "unselectAll", value: function unselectAll(state) { state.getIn(['scene', 'layers']).forEach(function (_ref) { var layerID = _ref.id; state = Layer.unselectAll(state, layerID).updatedState; }); state.getIn(['scene', 'groups']).forEach(function (group) { state = Group.unselect(state, group.get('id')).updatedState; }); var mode = state.getIn(['mode']); if (mode === constants.MODE_DRAGGING_LINE || mode === constants.MODE_DRAGGING_VERTEX) { if (mode.includes('3D')) { state = state.setIn(['mode'], MODE_IDLE_3D); } else state = state.setIn(['mode'], MODE_IDLE); state = state.merge({ activeSnapElement: null, snapElements: new List() }); } return { updatedState: state }; } }, { key: "selectAll", value: function selectAll(state, value) { if (value == null) { state.getIn(['scene', 'layers']).forEach(function (_ref2) { var layerID = _ref2.id; state = Layer.selectAll(state, layerID).updatedState; }); } else { var layerID = state.getIn(['scene', 'selectedLayer']); var layer = state.scene.layers.get(layerID); layer.items.forEach(function (data) { var x = state.getIn(['scene', 'layers', layerID, 'items', data.id, 'x']); state = state.mergeIn(['scene', 'layers', layerID, 'items', data.id, 'x'], x + value.x); var y = state.getIn(['scene', 'layers', layerID, 'items', data.id, 'y']); state = state.mergeIn(['scene', 'layers', layerID, 'items', data.id, 'y'], y + value.y); }); // layer.lines.forEach(data => { state = Layer.selectElement(state, layerID, "lines", data.id).updatedState }); // layer.holes.forEach(data => { state = Layer.selectElement(state, layerID, "holes", data.id).updatedState }); // layer.areas.forEach(data => { state = Layer.selectElement(state, layerID, "areas", data.id).updatedState }); layer.vertices.forEach(function (data) { var x = state.getIn(['scene', 'layers', layerID, 'vertices', data.id, 'x']); state = state.mergeIn(['scene', 'layers', layerID, 'vertices', data.id, 'x'], x + value.x); var y = state.getIn(['scene', 'layers', layerID, 'vertices', data.id, 'y']); state = state.mergeIn(['scene', 'layers', layerID, 'vertices', data.id, 'y'], y + value.y); }); return { updatedState: state }; } // state.getIn(['scene', 'groups']).forEach(group => { state = Group.unselect(state, group.get('id')).updatedState; }); return { updatedState: state }; } }, { key: "remove", value: function remove(state) { var selectedLayer = state.getIn(['scene', 'selectedLayer']); var _state$getIn = state.getIn(['scene', 'layers', selectedLayer, 'selected']), selectedLines = _state$getIn.lines, selectedHoles = _state$getIn.holes, selectedItems = _state$getIn.items; var allVertices = state.getIn(['scene', 'layers', selectedLayer, 'vertices']).toJS(); var selLines = state.getIn(['scene', 'layers', selectedLayer, 'selected', 'lines']).toJS(); var lineID = selLines[0]; var delLine = !isEmpty(lineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', lineID]).toJS(); var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS(); var relatedLines = []; !isEmpty(delLine) && GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines); selectedLines.forEach(function (lineID) { state = Line.remove(state, selectedLayer, lineID).updatedState; }); selectedHoles.forEach(function (holeID) { state = Hole.remove(state, selectedLayer, holeID).updatedState; }); selectedItems.forEach(function (itemID) { state = Item.remove(state, selectedLayer, itemID).updatedState; }); if (!isEmpty(selectedLines) && !isEmpty(relatedLines)) { state = state.setIn(['mode'], MODE_DRAWING_LINE); relatedLines.forEach(function (relLine, index) { state = Line.select(state, selectedLayer, relLine.id).updatedState; state = Line.applyWallChanges(state, END_DRAWING_LINE).updatedState; }); } else { state = Line.applyWallChanges(state, END_DRAWING_LINE).updatedState; } state = Layer.unselectAll(state, selectedLayer).updatedState; var mode = state.getIn(['mode']); if (mode.includes('DRAWING') || mode.includes('DRAGGING') || mode.includes('ROTATING')) { state = state.merge({ activeSnapElement: null }); if (mode.endsWith('3D')) state = state.setIn(['mode'], MODE_IDLE_3D);else state = state.setIn(['mode'], MODE_IDLE); } return { updatedState: state }; } }, { key: "undo", value: function undo(state) { var ActiveDrawingHelpers = document.getElementsByName('line_type_ActiveDrawingHelper'); ActiveDrawingHelpers.forEach(function (element, index) { element.style.display = 'none'; }); var sceneHistory = state.sceneHistory; var forRedo = window.forRedo; window.forRedo = forRedo; if (state.scene === sceneHistory.last && sceneHistory.list.size > 1) { sceneHistory = history.historyPop(sceneHistory); } forRedo.push(state.scene); var mode; if (ARRAY_3D_MODES.includes(state.mode)) mode = MODE_IDLE_3D;else mode = MODE_IDLE; state = state.merge({ mode: mode, scene: sceneHistory.last, sceneHistory: history.historyPop(sceneHistory) }); return { updatedState: state }; } }, { key: "redo", value: function redo(state) { var forRedo = window.forRedo; if (forRedo.length == 0) return { updatedState: state }; var scene = forRedo.pop(); var mode; if (ARRAY_3D_MODES.includes(state.mode)) mode = MODE_IDLE_3D;else mode = MODE_IDLE; state = state.merge({ mode: mode, scene: scene, sceneHistory: history.historyPush(state.sceneHistory, state.scene) }); window.forRedo = forRedo; return { updatedState: state }; } }, { key: "uncreate", value: function uncreate(state) { state = state.merge({ popup: false }); return { updatedState: state }; } }, { key: "rename", value: function rename(state, name) { state = state.mergeIn(['scene', 'title'], name); return { updatedState: state }; } }, { key: "recreate", value: function recreate(state) { if (state.getIn(['drawingSupport', 'type']) !== undefined) state = state.merge({ mode: MODE_DRAWING_ITEM_3D, popup: true }); return { updatedState: state }; } }, { key: "shift2don", value: function shift2don(state) { state = state.merge({ popup: false }); return { updatedState: state }; } }, { key: "shift2doff", value: function shift2doff(state) { if (state.getIn(['drawingSupport', 'type']) !== undefined) { if (state.get('selectedElementsHistory')._tail.array[0].prototype === 'holes') state = state.merge({ mode: MODE_DRAWING_HOLE, popup: true });else state = state.merge({ mode: MODE_DRAWING_ITEM, popup: true }); } return { updatedState: state }; } }, { key: "rollback", value: function rollback(state) { var sceneHistory = state.sceneHistory; state = this.unselectAll(state).updatedState; // if create a design and any elements is not added then no need rollback to last scene state if (!sceneHistory.last && sceneHistory.list.isEmpty()) { return { updatedState: state }; } // ESC event doesn't need when mode = MODE_IDLE || MODE_IDLE_3D if (state.mode == MODE_IDLE_3D || state.mode == MODE_IDLE) { return { updatedState: state }; } var mode; var isLineAction = false; if (state.mode.includes('LINE')) { isLineAction = true; } if (state.mode == MODE_DRAWING_ITEM_3D) { mode = MODE_IDLE_3D; if (state.drawingSupport.has('currentID')) state = Layer.removeElement(state, state.scene.selectedLayer, 'items', state.drawingSupport.get('currentID')).updatedState; state = state.merge({ mode: mode, snapElements: new List(), activeSnapElement: null, drawingSupport: new Map(), draggingSupport: new Map(), rotatingSupport: new Map() }); return { updatedState: state }; } // when Add Walls button clicked if (state.mode == MODE_WAITING_DRAWING_LINE) { mode = MODE_IDLE; state = state.merge({ mode: mode, snapElements: new List(), activeSnapElement: null, drawingSupport: new Map(), draggingSupport: new Map(), rotatingSupport: new Map() }); return { updatedState: state }; } if (ARRAY_3D_MODES.includes(state.mode)) mode = MODE_IDLE_3D;else mode = MODE_IDLE; state = state.merge({ mode: mode, scene: sceneHistory.last, sceneHistory: history.historyPush(sceneHistory, sceneHistory.last), snapElements: new List(), activeSnapElement: null, drawingSupport: new Map(), draggingSupport: new Map(), rotatingSupport: new Map() }); if (isLineAction) { state = Line.applyWallChanges(state, END_DRAWING_LINE).updatedState; } return { updatedState: state }; } }, { key: "removeDrawingSupport", value: function removeDrawingSupport(state) { var sceneHistory = state.sceneHistory; var mode = state.mode; if (!sceneHistory.last && sceneHistory.list.isEmpty() || mode != MODE_DRAWING_ITEM_3D) { return { updatedState: state }; } state = this.unselectAll(state).updatedState; state = state.merge({ scene: sceneHistory.last, sceneHistory: history.historyPush(sceneHistory, sceneHistory.last), drawingSupport: new Map() }); return { updatedState: state }; } }, { key: "setProjectProperties", value: function setProjectProperties(state, properties) { var scene = state.scene.merge(properties); state = state.merge({ mode: MODE_IDLE, scene: scene }); return { updatedState: state }; } }, { key: "setProjectId", value: function setProjectId(state, id) { var scene = state.scene.merge(id); state = state.merge({ scene: scene }); return { updatedState: state }; } }, { key: "openProjectConfigurator", value: function openProjectConfigurator(state) { state = state.merge({ mode: MODE_CONFIGURING_PROJECT }); return { updatedState: state }; } }, { key: "initCatalog", value: function initCatalog(state, catalog) { try { state = state.set('catalog', new Catalog(catalog)); return { updatedState: state }; } catch (error) { console.log('initCatalogError', error); return { updatedState: state }; } } }, { key: "addElementToCatalog", value: function addElementToCatalog(state, element) { try { var elements = state.getIn(['catalog', 'elements']).toJS(); elements[element.name] = element; var newElements = safeLoadMapList(elements, CatalogElement); state = state.setIn(['catalog', 'elements'], newElements); return { updatedState: state }; } catch (error) { console.log('addElementToCatalogError', error); return { updatedState: state }; } } }, { key: "updateMouseCoord", value: function updateMouseCoord(state, coords) { state = state.set('mouse', new Map(coords)); return { updatedState: state }; } }, { key: "updateZoomScale", value: function updateZoomScale(state, scale) { state = state.set('zoom', scale); return { updatedState: state }; } }, { key: "toggleSnap", value: function toggleSnap(state, mask) { state = state.set('snapMask', mask); return { updatedState: state }; } }, { key: "throwError", value: function throwError(state, error) { state = state.set('errors', state.get('errors').push({ date: Date.now(), error: error })); return { updatedState: state }; } }, { key: "throwWarning", value: function throwWarning(state, warning) { state = state.set('warnings', state.get('warnings').push({ date: Date.now(), warning: warning })); return { updatedState: state }; } }, { key: "copyProperties", value: function copyProperties(state, properties) { var layerID = state.getIn(['drawingSupport', 'layerID']); var layer = state.getIn(['scene', 'layers', layerID]); if (layer === undefined) return { updatedState: state };else { state = state.merge({ mode: MODE_WAITING_DRAWING_LINE, activeSnapElement: null }); return { updatedState: state }; } } }, { key: "pasteProperties", value: function pasteProperties(state) { state = this.updateProperties(state, state.getIn(['scene', 'selectedLayer']), state.get('clipboardProperties')).updatedState; return { updatedState: state }; } }, { key: "pushLastSelectedCatalogElementToHistory", value: function pushLastSelectedCatalogElementToHistory(state, element) { var currHistory = state.selectedElementsHistory; var previousPosition = currHistory.findIndex(function (el) { return el.name === element.name; }); if (previousPosition !== -1) { currHistory = currHistory.splice(previousPosition, 1); } currHistory = currHistory.splice(0, 0, element); state = state.set('selectedElementsHistory', currHistory); return { updatedState: state }; } }, { key: "changeCatalogPage", value: function changeCatalogPage(state, oldPage, newPage) { state = state.setIn(['catalog', 'page'], newPage).updateIn(['catalog', 'path'], function (path) { return path.push(oldPage); }); return { updatedState: state }; } }, { key: "goBackToCatalogPage", value: function goBackToCatalogPage(state, newPage) { var pageIndex = state.catalog.path.findIndex(function (page) { return page === newPage; }); state = state.setIn(['catalog', 'page'], newPage).updateIn(['catalog', 'path'], function (path) { return path.take(pageIndex); }); return { updatedState: state }; } }, { key: "setMode", value: function setMode(state, mode) { state = state.set('mode', mode); return { updatedState: state }; } }, { key: "addHorizontalGuide", value: function addHorizontalGuide(state, coordinate) { state = HorizontalGuide.create(state, coordinate).updatedState; return { updatedState: state }; } }, { key: "addVerticalGuide", value: function addVerticalGuide(state, coordinate) { state = VerticalGuide.create(state, coordinate).updatedState; return { updatedState: state }; } }, { key: "addCircularGuide", value: function addCircularGuide(state, x, y, radius) { console.log('adding horizontal guide at', x, y, radius); return { updatedState: state }; } }, { key: "removeHorizontalGuide", value: function removeHorizontalGuide(state, guideID) { state = HorizontalGuide.remove(state, guideID).updatedState; return { updatedState: state }; } }, { key: "removeVerticalGuide", value: function removeVerticalGuide(state, guideID) { state = VerticalGuide.remove(state, guideID).updatedState; return { updatedState: state }; } }, { key: "removeCircularGuide", value: function removeCircularGuide(state, guideID) { console.log('removeing horizontal guide ', guideID); return { updatedState: state }; } }, { key: "setStateProperties", value: function setStateProperties(state, properties) { state = state.merge(_objectSpread({}, properties)); return { updatedState: state }; } }, { key: "setIsHelp", value: function setIsHelp(state, isHelp) { state = state.merge({ isHelp: isHelp }); return { updatedState: state }; } }, { key: "setIsCabinetDrawing", value: function setIsCabinetDrawing(state, isCabinetDrawing) { state = state.merge({ isCabinetDrawing: isCabinetDrawing }); return { updatedState: state }; } }]); }(); export { Project as default };