kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
268 lines (267 loc) • 8.44 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from 'react';
import ContainerDimensions from 'react-container-dimensions';
import mockProps from "./mocks/mockProps.json";
import mockDataBundle from "./mocks/dataBundle2.json";
import cabinetPaylod from "./mocks/cabinetPayload2.json";
import doorStylePaylod from "./mocks/doorStylePayload.json";
import doorStylePaylod2 from "./mocks/doorStylePayload2.json";
import itemCDSPayload from "./mocks/itemCDSPayload.json";
import rectangleData from "./mocks/rectangleShape.json";
import moldingPayload from "./mocks/moldingPayload.json";
import ReactDOM from 'react-dom';
import LiteRenderer from "./LiteRenderer";
import { Button } from 'antd';
import { LEFT, RIGHT, TOP, BOTTOM, EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, EXTERNAL_EVENT_NEW_PROJECT, EXTERNAL_EVENT_CHANGE_DOORSTYLE, EXTERNAL_EVENT_SET_INITIAL_DATA, EXTERNAL_EVENT_ADD_ROOM_SHAPE, EXTERNAL_EVENT_ZOOM_IN, EXTERNAL_EVENT_ZOOM_OUT, EXTERNAL_EVENT_UNDO, EXTERNAL_EVENT_REDO, EXTERNAL_EVENT_SET_MOLDING } from "./constants";
// --- renderer props ---
var options = {
unit: 'in',
enable3D: true
};
document.getElementById('app').style.display = 'block';
function WorkSpace(props) {
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
externalEvent = _useState2[0],
setExternalEvent = _useState2[1];
var offset = 5;
useEffect(function () {
var evt = {
type: EXTERNAL_EVENT_SET_INITIAL_DATA,
payload: {
doorStyle: {
doorStyle: doorStylePaylod
}
}
};
setExternalEvent(evt);
}, []);
return /*#__PURE__*/React.createElement("div", {
className: "flex gap-4"
}, /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_TOGGLE_TO_2D,
payload: {}
};
setExternalEvent(evt);
}
}, "2D"), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_TOGGLE_TO_3D,
payload: {}
};
setExternalEvent(evt);
}
}, "3D"), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_TOGGLE_TO_ELEVATION,
payload: {}
};
setExternalEvent(evt);
}
}, "Elevation"), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_MOVE_PAN,
payload: {
moveType: LEFT,
moveValue: offset
}
};
setExternalEvent(evt);
}
}, /*#__PURE__*/React.createElement("img", {
src: "/assets/img/svg/bottombar/arrow-left.svg"
})), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_MOVE_PAN,
payload: {
moveType: TOP,
moveValue: offset
}
};
setExternalEvent(evt);
}
}, /*#__PURE__*/React.createElement("img", {
src: "/assets/img/svg/bottombar/arrow-up.svg"
})), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_MOVE_PAN,
payload: {
moveType: BOTTOM,
moveValue: offset
}
};
setExternalEvent(evt);
}
}, /*#__PURE__*/React.createElement("img", {
src: "/assets/img/svg/bottombar/arrow-down.svg"
})), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_MOVE_PAN,
payload: {
moveType: RIGHT,
moveValue: offset
}
};
setExternalEvent(evt);
}
}, /*#__PURE__*/React.createElement("img", {
src: "/assets/img/svg/bottombar/arrow-right.svg"
})), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_ZOOM_IN,
payload: {}
};
setExternalEvent(evt);
}
}, /*#__PURE__*/React.createElement("img", {
src: "/assets/img/svg/bottombar/arrow-minus.svg"
})), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_ZOOM_OUT,
payload: {}
};
setExternalEvent(evt);
}
}, /*#__PURE__*/React.createElement("img", {
src: "/assets/img/svg/bottombar/arrow-plus.svg"
})), /*#__PURE__*/React.createElement(Button, {
actionType: "primary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_NEW_PROJECT,
payload: {}
};
setExternalEvent(evt);
}
}, "New Project"), /*#__PURE__*/React.createElement(Button, {
actionType: "secondary",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_ADD_WALL,
payload: {}
};
setExternalEvent(evt);
}
}, "Add Walls"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_ADD_ITEM,
payload: cabinetPaylod
};
setExternalEvent(evt);
}
}, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_CHANGE_DOORSTYLE,
payload: {
doorStyle: doorStylePaylod2,
itemCDS: itemCDSPayload,
isAll: true
}
};
setExternalEvent(evt);
}
}, "DoorStyle (Change into Midtown White Shaker)"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_ADD_ROOM_SHAPE,
payload: rectangleData
};
setExternalEvent(evt);
}
}, "Add Room shape(rectangle)"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_UNDO,
payload: {}
};
setExternalEvent(evt);
}
}, "Undo"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_REDO,
payload: {}
};
setExternalEvent(evt);
}
}, "Redo"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_SET_MOLDING,
payload: {
isGlobal: true,
moldingInfo: moldingPayload
}
};
setExternalEvent(evt);
}
}, "Global Molding (FBM)"), /*#__PURE__*/React.createElement(Button, {
actionType: "danger",
onClick: function onClick() {
var evt = {
type: EXTERNAL_EVENT_SET_MOLDING,
payload: {
isGlobal: false,
moldingInfo: moldingPayload
}
};
setExternalEvent(evt);
}
}, "Individual Molding (FBM)"), /*#__PURE__*/React.createElement(LiteRenderer, {
width: props.width,
height: props.height,
projectElement: mockProps.projectElement,
dataBundle: mockDataBundle,
configData: mockProps.configData,
options: options,
logoImg: "/assets/logo.png",
companyUrl: "https://example.com",
toolbarButtons: [],
externalEvent: externalEvent,
onError: function onError(payload) {
// payload = {
// type: 'render-error' | 'runtime-error' | 'unhandled-rejection',
// error: { name?, message, stack?, raw? },
// info?: { componentStack? },
// externalEvent: { id?, type, payload } | null,
// meta?: { filename?, lineno?, colno? }
// }
console.error('TOOL ERROR:', payload);
}
}));
}
ReactDOM.render(/*#__PURE__*/React.createElement(ContainerDimensions, null, function (_ref) {
var width = _ref.width,
height = _ref.height;
return /*#__PURE__*/React.createElement(WorkSpace, {
width: width,
height: height
});
}), document.getElementById('app'));