kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
513 lines (507 loc) • 18.3 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import RulerDist from "./rulerDist";
import { convert } from "../../utils/convert-units-lite";
import { GeometryUtils } from "../../utils/export";
import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
import { isEmpty, returnReplaceableDeepSearchType } from "./utils";
import { findCatalogElement } from "../../utils/geometry";
var STYLE_LINE = {
fill: '#0096fd',
stroke: '#0096fd'
};
var STYLE_CIRCLE = {
fill: '#0096fd',
stroke: '#0096fd',
cursor: 'ew-resize'
};
var STYLE_CIRCLE2 = {
fill: 'none',
stroke: '#0096fd',
cursor: 'ew-resize'
};
export default function Item(_ref, _ref2) {
var _element$render2D;
var layer = _ref.layer,
item = _ref.item,
scene = _ref.scene,
catalog = _ref.catalog,
mode = _ref.mode;
var itemsActions = _ref2.itemsActions;
var x = item.x,
y = item.y,
rotation = item.rotation,
id = item.id;
var showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
showWallCabinetMeasure = scene.showWallCabinetMeasure;
var vertices = layer.vertices;
var layerID = scene.selectedLayer;
var element = catalog.getElement(item.type);
var allLines;
var curiteminfo;
var allLineRects;
var allItemRect;
var width, height;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
clockRotateState = _useState2[0],
setClockRotateState = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
antiClockRotateState = _useState4[0],
setAntiClockRotateState = _useState4[1];
var val = {
pos: {
x: item.x,
y: item.y
},
rotRad: item.rotation / 180 * Math.PI
};
var tempWidth = item.properties.get('width');
var tempHeight = item.properties.get('depth');
if (tempWidth || tempHeight) {
width = convert(tempWidth.get('_length')).from(tempWidth.get('_unit')).to('cm');
height = convert(tempHeight.get('_length')).from(tempHeight.get('_unit')).to('cm');
} else {
width = convert(element.info.sizeinfo.width).from('in').to('cm');
height = convert(element.info.sizeinfo.depth).from('in').to('cm');
}
var angle = rotation + 90;
val.size = {
width: width,
height: height
};
function point(x, y) {
return {
x: x,
y: y
};
}
var buttons = [{
name: 'Edit',
thumbnail: '/assets/img/svg/3d_item_warning_edit.svg'
}, {
name: 'Info',
thumbnail: '/assets/img/svg/3d_item_warning_info.svg'
}];
function getCalcRectFromItem(items) {
var x = items.pos.x;
var y = items.pos.y;
var w = items.size.width / 2;
var h = items.size.height / 2;
var rotRad = items.rotRad;
var mh = 3 * h / 4;
var mx = x - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
var my = y - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
var m2x = x + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
var m2y = y + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
var m3x = x - h * Math.sin(rotRad);
var m3y = y + h * Math.cos(rotRad);
var m1x = x + h * Math.sin(rotRad);
var m1y = y - h * Math.cos(rotRad);
var x0 = mx + h * Math.sin(rotRad);
var y0 = my - h * Math.cos(rotRad);
var x3 = mx * 2 - x0;
var y3 = my * 2 - y0;
var x1 = x * 2 - x3;
var y1 = y * 2 - y3;
var x2 = x * 2 - x0;
var y2 = y * 2 - y0;
return {
rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
};
}
function getAllItems() {
var rectarray = [];
var currentItem;
var selectedItem;
if (layer.selected.items.size > 0) {
selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
var _catid = selectedItem.type;
var _cat = findCatalogElement(catalog, _catid);
currentItem = {
selectedItem: selectedItem,
cat: _cat
};
}
layer.items.forEach(function (item) {
var val = {
pos: {
x: item.x,
y: item.y
},
rotRad: item.rotation / 180 * Math.PI
};
var catid = item.type;
var cat = findCatalogElement(catalog, catid);
var width = convert(item.properties.getIn(['width', '_length'])).from('in').to('cm');
var height = convert(item.properties.getIn(['depth', '_length'])).from('in').to('cm');
// let width = cat.info.sizeinfo.width;
// let height = cat.info.sizeinfo.depth;
val.size = {
width: width,
height: height
};
var otherItem = {
item: item,
cat: cat
};
// if (!GeometryUtils.needSnap(currentItem, otherItem)) {
// return;
// }
if (!item.selected) {
var _x = val.pos.x;
var _y = val.pos.y;
var rotRad = val.rotRad;
var w = val.size.width / 2;
var h = val.size.height / 2;
var mx = _x - w * Math.cos(rotRad);
var my = _y - w * Math.sin(rotRad);
var x0 = mx + h * Math.sin(rotRad);
var y0 = my - h * Math.cos(rotRad);
var x3 = mx * 2 - x0;
var y3 = my * 2 - y0;
var x1 = _x * 2 - x3;
var y1 = _y * 2 - y3;
var x2 = _x * 2 - x0;
var y2 = _y * 2 - y0;
rectarray.push({
rect: [point(x0, y0), point(x1, y1), point(x0, y0), point(x1, y1)]
});
rectarray.push({
rect: [point(x1, y1), point(x2, y2), point(x1, y1), point(x2, y2)]
});
rectarray.push({
rect: [point(x2, y2), point(x3, y3), point(x2, y2), point(x3, y3)]
});
rectarray.push({
rect: [point(x3, y3), point(x0, y0), point(x3, y3), point(x0, y0)]
});
}
});
// layer.holes.forEach(hole => {
// let val = {pos:{x:hole.x, y:hole.y}, rotRad:hole.rotation};
// let catid = hole.type;
// let cat = catalog.elements[catid];
// let width = hole.properties.getIn(['width']).getIn(['length']);
// let height = hole.properties.getIn(['height']).getIn(['length']);
// val.size = {width, height};
// let otherItem = {
// hole,
// cat
// }
// // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
// // return;
// // }
// if (!hole.selected) {
// let x = val.pos.x;
// let y = val.pos.y;
// let rotRad = val.rotRad;
// let w = val.size.width / 2;
// let mx = x - w * Math.cos(rotRad);
// let my = y - w * Math.sin(rotRad);
// let kx = x + w * Math.cos(rotRad);
// let ky = y + w * Math.sin(rotRad);
// let x0 = mx - 10 * Math.sin(rotRad);
// let y0 = my + 10 * Math.cos(rotRad);
// let x3 = mx + 10 * Math.sin(rotRad);
// let y3 = my - 10 * Math.cos(rotRad);
// let x1 = kx - 10 * Math.sin(rotRad);
// let y1 = ky + 10 * Math.cos(rotRad);
// let x2 = kx + 10 * Math.sin(rotRad);
// let y2 = ky - 10 * Math.cos(rotRad);
// rectarray.push({'rect':[point(x0,y0), point(x1,y1) ,point(x0,y0), point(x1,y1)]});
// rectarray.push({'rect':[point(x1,y1), point(x2,y2), point(x1,y1), point(x2,y2)]}); // right
// rectarray.push({'rect':[point(x2,y2), point(x3,y3), point(x2,y2), point(x3,y3)]}); // front
// rectarray.push({'rect':[point(x3,y3), point(x0,y0), point(x3,y3), point(x0,y0)]}); // left
// }
// });
return {
others: rectarray
};
}
allItemRect = getAllItems();
allLines = GeometryUtils.getAllLines(layer);
allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
var allRect = allLineRects.concat(allItemRect.others);
curiteminfo = getCalcRectFromItem(val);
/**
*
* @param x y position
* @param y x position
* @param rotRad item's rotation in radian
*/
var getDistant = function getDistant(x, y, rotRad) {
var center_h = 3 * height / 8;
var center_x = x;
var center_y = y;
var center_x1 = x - center_h * Math.sin(rotRad);
var center_y1 = y + center_h * Math.cos(rotRad);
var PointArray = [];
curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
var comparelength = [];
var a;
var RectLineFuction;
if (centerpoint[1] === 180 || centerpoint[1] === 0) RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
allRect.forEach(function (linerect) {
var p0 = GeometryUtils.clone_point(linerect.rect[2]);
var p1 = GeometryUtils.clone_point(linerect.rect[3]);
var lineFunction = {};
if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
var coordinatePoint = GeometryUtils.twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
if (coordinatePoint !== undefined) {
if (GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
if (GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
comparelength.push(GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
a = Math.max.apply(null, comparelength);
}
}
}
});
PointArray.push([a, centerpoint[1]]);
});
return {
PointArray: PointArray
};
};
var nw = width / 2;
var nh = height / 2;
var _getDistant = getDistant(x, y, val.rotRad),
PointArray = _getDistant.PointArray;
var catid = item.type;
var cat = catalog.elements[catid];
PointArray.forEach(function (pointElement, index) {
if (pointElement[0] == undefined) PointArray[index][0] = 0;
if (pointElement[1] === -90 && cat.info.is_corner !== 1) {
PointArray[index][0] -= 4;
}
});
if (Array.isArray(PointArray)) {
itemsActions.storeDistArray(layerID, id, PointArray);
}
var renderedRuler = [];
var ep = 0.1;
if (item.selected) {
PointArray.forEach(function (element, key) {
var itemDistanceFromLine = element[0];
var length = itemDistanceFromLine;
if (itemDistanceFromLine > ep || itemDistanceFromLine < -ep) {
renderedRuler.push(/*#__PURE__*/React.createElement("g", {
"data-element-root": true,
"data-prototype": "rulerDist",
"data-id": item.id,
"data-selected": item.selected,
"data-layer": layer.id,
key: key,
"data-length": length,
"data-direct": element[1]
}, /*#__PURE__*/React.createElement(RulerDist, {
key: key,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: itemDistanceFromLine,
angle: rotation,
rotation: element[1],
transform: "translate(".concat(element[1] === 180 ? -nw : element[1] === 0 ? nw : 0, ", ").concat(element[1] === 90 ? nh : element[1] === -90 ? cat.info.is_corner !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(element[1], ", 0, 0)")
})));
}
});
}
var renderedItem = element === null || element === void 0 || (_element$render2D = element.render2D) === null || _element$render2D === void 0 ? void 0 : _element$render2D.call(element, item, layer, scene);
var isSmall = false;
if (width < 40) isSmall = true;
var parts = [];
var warning_buttons = '';
var newWidth = item.toJS().properties.width.length;
if (item.toJS().doorStyle.doorStyles && item.toJS().doorStyle.doorStyles.cds && item.toJS().doorStyle.doorStyles.cds.filter(function (cd) {
return cd.itemID == item.getIn(['itemID']);
}).length === 0 && item.category === 'cabinet') warning_buttons = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
id: "warning_info_2d",
style: {
transform: "translate(0px,20px)",
cursor: 'pointer'
},
onMouseEnter: function onMouseEnter(event) {
var bbox = event.target.getBoundingClientRect();
if (!isEmpty(document.getElementById('warning_box_2d'))) {
document.getElementById('warning_box_2d').style.display = 'flex';
document.getElementById('warning_box_2d').style.top = "".concat(bbox.top - 60, "px");
document.getElementById('warning_box_2d').style.left = "".concat(bbox.left, "px");
}
},
onMouseLeave: function onMouseLeave() {
if (!isEmpty(document.getElementById('warning_box_2d'))) document.getElementById('warning_box_2d').style.display = 'none';
}
}, /*#__PURE__*/React.createElement("circle", {
cx: 0,
cy: 0,
r: 8,
fill: "white"
}), /*#__PURE__*/React.createElement("image", {
width: 15,
height: 15,
x: -7.5,
y: -7.5,
style: {
transform: "rotate(".concat(180 - item.rotation, "deg)")
},
href: buttons[1].thumbnail
})), /*#__PURE__*/React.createElement("g", {
style: {
cursor: 'pointer'
},
"data-element-root": true,
"data-prototype": item.prototype,
"data-id": item.id,
"data-selected": item.selected,
"data-layer": layer.id,
"data-part": "warning_edit"
}, /*#__PURE__*/React.createElement("circle", {
cx: 0,
cy: 0,
r: 8,
fill: "white"
}), /*#__PURE__*/React.createElement("image", {
width: 15,
height: 15,
x: -7.5,
y: -7.5,
style: {
transform: "rotate(".concat(90 - item.rotation, "deg)")
},
href: buttons[0].thumbnail
})));
if (item.selected) parts = [/*#__PURE__*/React.createElement("g", {
key: 0,
"data-element-root": true,
"data-prototype": item.prototype,
"data-id": item.id,
"data-selected": item.selected,
"data-layer": layer.id,
"data-part": "rotation-anchor",
style: {
cursor: 'w-resize'
}
}, /*#__PURE__*/React.createElement("image", {
href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
style: {
transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
},
height: "20",
width: "20",
onMouseEnter: function onMouseEnter() {
setClockRotateState(true);
setAntiClockRotateState(false);
},
onMouseLeave: function onMouseLeave() {
return setClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
}
}), /*#__PURE__*/React.createElement("image", {
href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
style: {
transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
},
height: "20",
width: "20",
onMouseEnter: function onMouseEnter() {
setAntiClockRotateState(true);
setClockRotateState(false);
},
onMouseLeave: function onMouseLeave() {
return setAntiClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
}
})), /*#__PURE__*/React.createElement("g", {
key: 1
// transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2 + 40})`}
,
style: {
cursor: 'pointer',
transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ", 0, "px)")
},
"data-element-root": true,
"data-prototype": item.prototype,
"data-id": item.id,
"data-selected": item.selected,
"data-layer": layer.id,
"data-part": "duplicate"
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
id: "shadow"
}, /*#__PURE__*/React.createElement("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "0.6"
}))), /*#__PURE__*/React.createElement("rect", {
rx: "4",
ry: "4",
height: "22",
width: "22",
fill: "white",
filter: "url(#shadow)"
}), /*#__PURE__*/React.createElement("image", {
href: "/assets/img/svg/duplicate.svg",
x: "3",
y: "-19",
height: "16",
width: "16",
style: {
transform: 'rotateX(180deg)'
}
})), /*#__PURE__*/React.createElement("g", {
key: 2
// transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2})`}
,
style: {
cursor: 'pointer',
transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ").concat(-27, "px)")
},
"data-element-root": true,
"data-prototype": item.prototype,
"data-id": item.id,
"data-selected": item.selected,
"data-layer": layer.id,
"data-part": "remove"
}, /*#__PURE__*/React.createElement("rect", {
rx: "4",
ry: "4",
height: "22",
width: "22",
fill: "white",
filter: "url(#shadow)"
}), /*#__PURE__*/React.createElement("image", {
href: "/assets/img/svg/delete.svg",
x: "3",
y: "-19",
height: "16",
width: "16",
style: {
transform: 'rotateX(180deg)'
}
}))];
var measure = item.layoutpos === WALL_CABINET_LAYOUTPOS ? showWallCabinetMeasure : showBaseCabinetMeasure;
return /*#__PURE__*/React.createElement("g", {
"data-element-root": true,
"data-prototype": item.prototype,
"data-id": item.id,
"data-selected": item.selected,
"data-layer": layer.id,
style: item.selected ? {
cursor: 'move'
} : {}
}, renderedItem, /*#__PURE__*/React.createElement("g", {
transform: "translate(".concat(x, ",").concat(y, ") rotate(").concat(rotation, ")"),
style: {
cursor: 'initial'
}
}, measure ? renderedRuler : null, parts, warning_buttons));
}
Item.propTypes = {
item: PropTypes.object.isRequired,
layer: PropTypes.object.isRequired,
scene: PropTypes.object.isRequired,
catalog: PropTypes.object.isRequired
};
Item.contextTypes = {
itemsActions: PropTypes.object.isRequired
};