kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
975 lines (968 loc) • 44.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.STYLE_ROOM_SHAPE = void 0;
exports.compareVertices = compareVertices;
exports["default"] = Line;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _export = require("../../utils/export");
var _ruler = _interopRequireDefault(require("./ruler"));
var _constants = require("../../constants");
var Three = _interopRequireWildcard(require("three"));
var _utils = require("./utils");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2["default"])(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; }
var STYLE = {
stroke: '#78909C',
strokeWidth: '1px',
strokeDasharray: '4 8'
};
var STYLE_ANGLE = {
stroke: 'rgb(77, 77, 77)',
strokeWidth: 1,
strokeLinecap: 'round',
strokeLinejoin: 'round',
strokeMiterlimit: 2.613,
fill: 'transparent'
};
var STYLE_TEXT = {
textAnchor: 'middle',
fontSize: '7px',
fontWeight: 'middle',
fontFamily: "'Courier New', Courier, monospace"
};
var STYLE_ROOM_SHAPE = exports.STYLE_ROOM_SHAPE = {
stroke: _constants.ROOM_SHAPE_MEASUREMENT_LINE_COLOR,
strokeWidth: '2px'
};
var STYLE_DASH = {
stroke: _constants.DASH_LINE_COLOR,
strokeDasharray: '4 4',
strokeWidth: '2px',
strokeLinecap: 'round'
};
var STYLE_ROOM_ELEMENT = {
fill: _constants.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
stroke: _constants.ROOM_ELEMENT_MEASUREMENT_LINE_COLOR,
strokeWidth: '2px'
};
var STYLE_BASE_ITEM = {
fill: _constants.BASE_ITEM_MEASUREMENT_LINE_COLOR,
stroke: _constants.BASE_ITEM_MEASUREMENT_LINE_COLOR,
strokeWidth: '2px'
};
var STYLE_WALL_ITEM = {
fill: _constants.WALL_ITEM_MEASUREMENT_LINE_COLOR,
stroke: _constants.WALL_ITEM_MEASUREMENT_LINE_COLOR,
strokeWidth: '2px'
};
var STYLE_DISTANCE = {
fill: _constants.DISTANCE_MEASUREMENT_LINE_COLOR,
stroke: _constants.DISTANCE_MEASUREMENT_LINE_COLOR,
strokeWidth: '2px'
};
var selectStyle = function selectStyle(element, style) {
return element.iFlag ? style : STYLE_DISTANCE;
};
function compareVertices(v0, v1) {
return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
}
function Line(_ref) {
var _state$getIn;
var line = _ref.line,
allLine = _ref.allLine,
layer = _ref.layer,
scene = _ref.scene,
num = _ref.num,
catalog = _ref.catalog,
state = _ref.state,
relatedLines = _ref.relatedLines;
var showWallLengthMeasure = scene.showWallLengthMeasure,
showWallCabinetMeasure = scene.showWallCabinetMeasure,
showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
showWindowDoorMeasure = scene.showWindowDoorMeasure;
var vertex0 = layer.vertices.get(line.vertices.get(0));
var vertex1 = layer.vertices.get(line.vertices.get(1));
if (vertex0.id === vertex1.id || _export.GeometryUtils.samePoints(vertex0, vertex1)) return null; //avoid 0-length lines
var x1 = vertex0.x,
y1 = vertex0.y;
var x2 = vertex1.x,
y2 = vertex1.y;
var l2 = {
x: x1,
y: y1
};
var l3 = {
x: x2,
y: y2
};
var isSnapped = function isSnapped(itemRect) {
var r0 = itemRect.rect[0];
var r1 = itemRect.rect[1];
var r2 = itemRect.rect[2];
var r3 = itemRect.rect[3];
var delta23 = _export.GeometryUtils.verticesDistance(l2, r3) + _export.GeometryUtils.verticesDistance(r3, r2) + _export.GeometryUtils.verticesDistance(r2, l3) - _export.GeometryUtils.verticesDistance(l3, l2);
if (delta23 < 0.1) {
return true;
} else {
return false;
}
};
var relatedvertice0x, relatedvertice0y, relatedvertice1x, relatedvertice1y;
line.relatedVertices.forEach(function (relatedVertice) {
if (relatedVertice.index == undefined) relatedVertice = relatedVertice.toJSON();
if (relatedVertice.index == 0) {
relatedvertice0x = relatedVertice.point.x;
relatedvertice0y = relatedVertice.point.y;
} else {
relatedvertice1x = relatedVertice.point.x;
relatedvertice1y = relatedVertice.point.y;
}
});
var thickness = _constants.LINE_THICKNESS;
var half_thickness = thickness / 2;
var STEP = 20;
var length = _export.GeometryUtils.pointsDistance(x1, y1, x2, y2);
// let length = GeometryUtils.pointsDistance(relatedvertice0x,relatedvertice0y,relatedvertice1x,relatedvertice1y);
var rightHoleLength, leftHoleLength, holeLength;
var angle = _export.GeometryUtils.angleBetweenTwoPointsAndOrigin(x1, y1, x2, y2);
// wall cabinet
var wallSpace = STEP;
var wall_item = _export.GeometryUtils.getAllItemSpecified(scene, catalog, [_constants.WALL_CABINET_LAYOUTPOS, _constants.TALL_CABINET_LAYOUTPOS]);
var wallRuler = [];
var wall_posArray = [];
if (wall_item.cur) {
wall_item.others.push(wall_item.cur);
}
// let relatedLines = [];
var angleVertices = [];
var layerID = state.getIn(['scene', 'selectedLayer']);
var drawingLineID = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'selected', 'lines'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
if (!(0, _utils.isEmpty)(drawingLineID)) {
var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', drawingLineID[0]]).toJS();
var allLines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
var allLinesArray = state.getIn(['scene', 'layers', layerID, 'lines']).toArray();
var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
var reget = false;
relatedLines.forEach(function (relLine) {
if (!allLinesArray.some(function (alLine) {
return alLine.id === relLine.id;
})) {
reget = true;
}
});
if (reget) {
relatedLines = [];
_export.GeometryUtils.getRelatedLines(relatedLines, drawingLine, vertices, allLines);
}
// get the angle of two lines and check the angle.
if (drawingLine.vertices[0] !== drawingLine.vertices[1]) {
relatedLines.forEach(function (line) {
// get the points of two lines(drawing line and related line)
// the first value is overlapped point of two lines as a center of angle.
if (!(0, _utils.isEmpty)(line)) {
var points = [];
var anglePoints = [];
line.vertices.forEach(function (vt) {
if (drawingLine.vertices.some(function (dvt) {
return dvt === vt;
})) {
points.push(vt);
}
});
line.vertices.forEach(function (vt) {
if (!points.some(function (pt) {
return pt === vt;
})) {
points.push(vt);
}
});
drawingLine.vertices.forEach(function (vt) {
if (!points.some(function (pt) {
return pt === vt;
})) {
points.push(vt);
}
});
if (points.length < 3) {
points.push(points[points.length - 1]);
}
points.forEach(function (point) {
return anglePoints.push(vertices[point]);
});
angleVertices.push(anglePoints);
}
});
}
}
if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) wall_item.others.sort(function (a, b) {
return a.pos.x - b.pos.x;
});else wall_item.others.sort(function (a, b) {
return a.pos.y - b.pos.y;
});
wall_posArray.push(_objectSpread(_objectSpread({}, l2), {}, {
iFlag: false
}));
wall_item.others.forEach(function (itemRect) {
var r2 = l2 > l3 ? itemRect.rect[2] : itemRect.rect[3];
var r3 = l2 > l3 ? itemRect.rect[3] : itemRect.rect[2];
if (isSnapped(itemRect)) {
wall_posArray.push(_objectSpread(_objectSpread({}, r2), {}, {
iFlag: itemRect.itemInfo.id
}));
wall_posArray.push(_objectSpread(_objectSpread({}, r3), {}, {
iFlag: itemRect.itemInfo.id
}));
}
});
wall_posArray.push(_objectSpread(_objectSpread({}, l3), {}, {
iFlag: false
}));
var wall_posAndwidth = [];
if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
wall_posArray.sort(function (a, b) {
return a.x - b.x;
});
if (wall_posArray.length > 2) {
for (var index = 0; index < wall_posArray.length - 1; index++) {
var element = wall_posArray[index];
wall_posAndwidth.push({
pos: element,
length: wall_posArray[index + 1].x - element.x,
iFlag: wall_posArray[index + 1].iFlag === element.iFlag ? true : false
});
}
}
} else {
wall_posArray.sort(function (a, b) {
return a.y - b.y;
});
if (wall_posArray.length > 2) {
for (var _index = 0; _index < wall_posArray.length - 1; _index++) {
var _element = wall_posArray[_index];
wall_posAndwidth.push({
pos: _element,
length: Math.abs((wall_posArray[_index + 1].y - _element.y) / Math.sin(angle / 180 * Math.PI)),
iFlag: wall_posArray[_index + 1].iFlag === _element.iFlag ? true : false
});
}
}
}
if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
wallSpace = 0;
}
wallRuler = wall_posAndwidth.map(function (pAw) {
if (pAw.length > 1) {
if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
if (x1 - x2 > 0) {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length,
y1: pAw.pos.y,
x2: pAw.pos.x + pAw.length,
y2: pAw.pos.y - thickness / 2 - wallSpace,
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 4,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - wallSpace, " ) rotate(").concat(angle + 180, ", 0, 0)"),
style: selectStyle(pAw, STYLE_WALL_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x,
y2: pAw.pos.y - thickness / 2 - wallSpace,
style: STYLE_DASH
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length,
y1: pAw.pos.y,
x2: pAw.pos.x + pAw.length,
y2: pAw.pos.y + thickness / 2 + wallSpace,
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 4,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + wallSpace, " ) rotate(").concat(angle, ", 0, 0)"),
style: selectStyle(pAw, STYLE_WALL_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x,
y2: pAw.pos.y + thickness / 2 + wallSpace,
style: STYLE_DASH
}));
}
} else {
if (y1 - y2 > 0) {
if (x1 - x2 < 0 || _export.GeometryUtils.almostEqual(x1, x2)) {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
style: selectStyle(pAw, STYLE_WALL_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
style: selectStyle(pAw, STYLE_WALL_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
}
} else {
if (x1 - x2 < 0 || _export.GeometryUtils.almostEqual(x1, x2)) {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
style: selectStyle(pAw, STYLE_WALL_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
style: selectStyle(pAw, STYLE_WALL_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + wallSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
}
}
}
}
});
//base cabinet
var baseSpace = wallSpace + STEP;
var base_item = _export.GeometryUtils.getAllItemSpecified(scene, catalog, _constants.BASE_CABINET_LAYOUTPOS);
// base cabinet
var baseRuler = [];
var base_posArray = [];
if (base_item.cur) {
base_item.others.push(base_item.cur);
}
if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) base_item.others.sort(function (a, b) {
return a.pos.x - b.pos.x;
});else base_item.others.sort(function (a, b) {
return a.pos.y - b.pos.y;
});
base_posArray.push(_objectSpread(_objectSpread({}, l2), {}, {
iFlag: false
}));
base_item.others.forEach(function (itemRect) {
var r2 = l2 > l3 ? itemRect.rect[2] : itemRect.rect[3];
var r3 = l2 > l3 ? itemRect.rect[3] : itemRect.rect[2];
if (isSnapped(itemRect)) {
base_posArray.push(_objectSpread(_objectSpread({}, r2), {}, {
iFlag: itemRect.itemInfo.id
}));
base_posArray.push(_objectSpread(_objectSpread({}, r3), {}, {
iFlag: itemRect.itemInfo.id
}));
}
});
base_posArray.push(_objectSpread(_objectSpread({}, l3), {}, {
iFlag: false
}));
var base_posAndwidth = [];
if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
base_posArray.sort(function (a, b) {
return a.x - b.x;
});
if (base_posArray.length > 2) {
for (var _index2 = 0; _index2 < base_posArray.length - 1; _index2++) {
var _element2 = base_posArray[_index2];
base_posAndwidth.push({
pos: _element2,
length: base_posArray[_index2 + 1].x - _element2.x,
iFlag: base_posArray[_index2 + 1].iFlag === _element2.iFlag ? true : false
});
}
}
} else {
base_posArray.sort(function (a, b) {
return a.y - b.y;
});
if (base_posArray.length > 2) {
for (var _index3 = 0; _index3 < base_posArray.length - 1; _index3++) {
var _element3 = base_posArray[_index3];
base_posAndwidth.push({
pos: _element3,
length: Math.abs((base_posArray[_index3 + 1].y - _element3.y) / Math.sin(angle / 180 * Math.PI)),
iFlag: base_posArray[_index3 + 1].iFlag === _element3.iFlag ? true : false
});
}
}
}
if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
baseSpace -= STEP;
}
baseRuler = base_posAndwidth.map(function (pAw) {
if (pAw.length > 1) {
if (Math.sin(angle) === 0 || _export.GeometryUtils.almostEqual(y1, y2)) {
if (x1 - x2 > 0) {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length,
y1: pAw.pos.y,
x2: pAw.pos.x + pAw.length,
y2: pAw.pos.y - thickness / 2 - baseSpace,
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 4,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y - thickness / 2 - baseSpace, " ) rotate(").concat(angle + 180, ", 0, 0)"),
style: selectStyle(pAw, STYLE_BASE_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x,
y2: pAw.pos.y - thickness / 2 - baseSpace,
style: STYLE_DASH
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length,
y1: pAw.pos.y,
x2: pAw.pos.x + pAw.length,
y2: pAw.pos.y + thickness / 2 + baseSpace,
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 4,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x, ", ").concat(pAw.pos.y + thickness / 2 + baseSpace, " ) rotate(").concat(angle, ", 0, 0)"),
style: selectStyle(pAw, STYLE_BASE_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x,
y2: pAw.pos.y + thickness / 2 + baseSpace,
style: STYLE_DASH
}));
}
} else {
if (y1 - y2 > 0) {
if (x1 - x2 < 0 || _export.GeometryUtils.almostEqual(x1, x2)) {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
style: selectStyle(pAw, STYLE_BASE_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
style: selectStyle(pAw, STYLE_BASE_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
}
} else {
if (x1 - x2 < 0 || _export.GeometryUtils.almostEqual(x1, x2)) {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0)"),
style: selectStyle(pAw, STYLE_BASE_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 5,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: pAw.length,
transform: "translate(".concat(pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI), ", ").concat(pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI) + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI), " ) rotate(").concat(angle, ", 0, 0) scale(-1, -1)"),
style: selectStyle(pAw, STYLE_BASE_ITEM)
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: pAw.pos.x,
y1: pAw.pos.y,
x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
y2: pAw.pos.y + (thickness / 2 + baseSpace) * Math.cos(angle / 180 * Math.PI),
style: STYLE_DASH
}));
}
}
}
}
});
var doorSpace = baseSpace + STEP;
var renderedHoles = line.holes.map(function (holeID) {
var hole = layer.holes.get(holeID);
if (hole === undefined) {
return '';
}
var startAt = length * hole.offset;
var renderedHole = catalog.getElement(hole.type).render2D(hole, layer, scene);
return /*#__PURE__*/_react["default"].createElement("g", {
key: holeID,
transform: "translate(".concat(startAt, ", 3.5)"),
"data-element-root": true,
"data-prototype": hole.prototype,
"data-id": hole.id,
"data-selected": hole.selected,
"data-layer": layer.id
}, renderedHole);
});
var renderedLine = catalog.getElement(line.type).render2D(line, layer, scene, state);
var holeTemp = [];
var renderedRuler = [];
var renderedAllRuler = [];
if (!line.holes.size || !showWindowDoorMeasure) {
doorSpace -= STEP;
}
var allRuler = [0],
holeData = [];
var lineHoles = line.holes.sortBy(function (holeID) {
var hole = layer.holes.get(holeID);
return !hole ? 0 : hole.offset;
});
lineHoles.forEach(function (holeID) {
var hole = layer.holes.get(holeID);
if (hole !== undefined) {
var startAt = length * hole.offset;
var holeWidth = hole.properties.toJS().width.length;
allRuler.push(startAt - holeWidth / 2);
allRuler.push(startAt + holeWidth / 2);
holeData["".concat(startAt - holeWidth / 2, "_").concat(startAt + holeWidth / 2)] = holeID;
}
});
allRuler.push(length);
var lineSpace = doorSpace + STEP;
//the space from the dimensioning line to the top
var lineSpacedimension1 = 4;
//the space from the dimensioning line to the bottom
var lineSpacedimension2 = 14;
if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
renderedRuler.push(/*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: length,
y1: lineSpace + lineSpacedimension1,
x2: length,
y2: lineSpace + lineSpacedimension2,
style: STYLE_ROOM_SHAPE
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 0,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: length,
transform: "translate(".concat(length, ", ").concat(half_thickness + lineSpace, ") scale(-1, -1)"),
style: STYLE_ROOM_SHAPE
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
y1: lineSpace + lineSpacedimension1,
x2: 0,
y2: lineSpace + lineSpacedimension2,
style: STYLE_ROOM_SHAPE
})));
} else {
renderedRuler.push(/*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
y1: lineSpace + lineSpacedimension1,
x2: 0,
y2: lineSpace + lineSpacedimension2,
style: STYLE_ROOM_SHAPE
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: 0,
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: length,
transform: "translate(0, ".concat(half_thickness + lineSpace, ")"),
style: STYLE_ROOM_SHAPE
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: length,
y1: lineSpace + lineSpacedimension1,
x2: length,
y2: lineSpace + lineSpacedimension2,
style: STYLE_ROOM_SHAPE
})));
}
allRuler.sort(function (a, b) {
return a - b;
});
if (allRuler.length > 2) {
allRuler.forEach(function (rulerData, index) {
var element = allRuler[index + 1] - allRuler[index];
if (!Number.isNaN(element)) {
var dataProtoType = 'ruler';
var dataId = holeData["".concat(allRuler[index], "_").concat(allRuler[index + 1])];
if (!dataId) {
var holeID1 = holeData["".concat(allRuler[index - 1], "_").concat(allRuler[index])];
var holeID2 = holeData["".concat(allRuler[index + 1], "_").concat(allRuler[index + 2])];
if (holeID1 && holeID2) {
dataId = "".concat(holeID1, ",").concat(holeID2);
dataProtoType = 'twoHoleRuler';
} else if (holeID1) {
dataId = holeID1;
dataProtoType = 'rightHoleRuler';
} else if (holeID2) {
dataId = holeID2;
dataProtoType = 'leftHoleRuler';
}
} else {
dataProtoType = 'rulerHole';
}
if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
renderedAllRuler.push(/*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
}, /*#__PURE__*/_react["default"].createElement("line", {
x1: allRuler[index],
y1: half_thickness,
x2: allRuler[index],
y2: half_thickness + doorSpace,
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: "allRuler_".concat(index),
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: element,
transform: "translate(".concat(allRuler[index] + element, ", ").concat(half_thickness + doorSpace, " ) scale(-1, -1)"),
style: STYLE_ROOM_ELEMENT
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: allRuler[index] + element,
y1: half_thickness,
x2: allRuler[index] + element,
y2: half_thickness + doorSpace,
style: STYLE_DASH
})));
} else {
renderedAllRuler.push(/*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
}, /*#__PURE__*/_react["default"].createElement("line", {
x1: allRuler[index],
y1: half_thickness,
x2: allRuler[index],
y2: half_thickness + doorSpace,
style: STYLE_DASH
}), /*#__PURE__*/_react["default"].createElement(_ruler["default"], {
key: "allRuler_".concat(index),
layer: layer,
unit: scene.unit,
rulerUnit: scene.rulerUnit,
length: element,
transform: "translate(".concat(allRuler[index], ", ").concat(half_thickness + doorSpace, " )"),
style: STYLE_ROOM_ELEMENT
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: allRuler[index] + element,
y1: half_thickness,
x2: allRuler[index] + element,
y2: half_thickness + doorSpace,
style: STYLE_DASH
})));
}
}
});
}
return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)"),
"data-element-root": true,
"data-prototype": 'ruler',
"data-id": line.id,
"data-selected": line.selected,
"data-layer": layer.id,
"data-length": length
}, showWallLengthMeasure ? renderedRuler : null), line.selected && angleVertices.map(function (vertex, index) {
var _relateLineLengthArra2;
var lineGroup = vertex[0].lines;
var angles = [];
var thickness = [];
var vectories = [];
var relateLineLengthArray = [];
// get the vector of lines
lineGroup.forEach(function (line) {
var _relateLineLengthArra;
line = layer.lines.get(line);
var vertex0 = layer.vertices.get(line.vertices.get(0));
var vertex1 = layer.vertices.get(line.vertices.get(1));
var vec = vertex0 === vertex[0] ? new Three.Vector2(vertex1.x - vertex0.x, vertex1.y - vertex0.y) : new Three.Vector2(vertex0.x - vertex1.x, vertex0.y - vertex1.y);
(_relateLineLengthArra = relateLineLengthArray) === null || _relateLineLengthArra === void 0 || _relateLineLengthArra.push(_export.GeometryUtils.verticesDistance(vertex0, vertex1));
var angle = vec.angle();
var thick = 15;
angles.push(angle);
thickness.push(thick);
vectories.push(vec.normalize());
});
relateLineLengthArray = (_relateLineLengthArra2 = relateLineLengthArray) === null || _relateLineLengthArra2 === void 0 ? void 0 : _relateLineLengthArra2.sort(function (a, b) {
return a - b;
});
var minLineLength = relateLineLengthArray[0] < _constants.MAX_ANGLE_SCALE * 2 ? relateLineLengthArray[0] / 2 // scale down to half of the smallest adjacent surface
: _constants.MAX_ANGLE_SCALE;
// calculate the angle between two lines
var center = new Three.Vector2(vertex[0].x, vertex[0].y);
var pos1 = new Three.Vector2(vertex[1].x, vertex[1].y);
var pos2 = new Three.Vector2(vertex[2].x, vertex[2].y);
var cen = center.clone();
var pos = pos1.clone();
var vec1 = pos.sub(cen).normalize();
pos = pos2.clone();
var vec2 = pos.sub(cen).normalize();
var v1 = vec1.clone(),
v2 = vec2.clone();
var vec = v1.add(v2).normalize();
var angle = Math.abs(Math.floor(vec1.angle() * 180 / Math.PI - vec2.angle() * 180 / Math.PI + 0.5));
angle = angle > 180 ? 360 - angle : angle;
var rotDir = vec1.cross(vec2) > 0; // true: rotate CCW, false: rotate CW
// Angle Text Position
var angleTextO = center.clone();
var textTranslation = vec1.clone().add(vec2).normalize().multiplyScalar(minLineLength * 2 / 3);
angleTextO.add(textTranslation);
angleTextO.y -= minLineLength / 10; // half the height of text `angle`
angleTextO.x += minLineLength / 10;
var tx = 0;
var ty = 0;
vec = vec.multiplyScalar(minLineLength);
vec1 = vec1.multiplyScalar(minLineLength);
var cen1 = center.clone(),
cen2 = center.clone();
center = center.add(vec);
pos1 = cen1.add(vec1);
var rotated = pos1.clone().rotateAround(cen2, angle / 2.0 * Math.PI / 180);
var lines = [];
var t = center.distanceTo(rotated) < 5 ? 1 : -1;
pos2 = pos1.clone().rotateAround(cen2, t * angle * Math.PI / 180);
// Angle SVG Path
lines.push(/*#__PURE__*/_react["default"].createElement("path", {
style: STYLE_ANGLE,
d: "\n M ".concat(vertex[0].x, ",").concat(vertex[0].y, " L ").concat(pos1.x, ",").concat(pos1.y, " A ").concat(minLineLength, " ").concat(minLineLength, " ").concat(angle, " 0 ").concat(t > 0 ? 1 : 0, " ").concat(pos2.x, ",").concat(pos2.y, " z\n ")
}));
var length = angle;
// draw angle and angle text
return /*#__PURE__*/_react["default"].createElement("g", {
key: index,
transform: "translate(".concat(tx, ", ").concat(ty, ")"),
"data-element-root": true,
"data-prototype": "angleChange",
"data-layer": layer.id,
"data-selected": "true",
"data-id": [vertex[0].id, vertex[1].id, rotDir],
"data-length": length
}, lines, /*#__PURE__*/_react["default"].createElement("text", {
transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") scale(").concat(minLineLength / 20, ", ").concat(-minLineLength / 20, ")"),
style: STYLE_TEXT
}, angle + '° '));
}), showWindowDoorMeasure ? renderedAllRuler : null, showBaseCabinetMeasure ? baseRuler : null, showWallCabinetMeasure ? wallRuler : null, /*#__PURE__*/_react["default"].createElement("g", {
"data-element-root": true,
"data-prototype": line.prototype,
"data-id": line.id,
id: line.id,
"data-selected": line.selected,
"data-layer": layer.id,
style: line.selected ? {
cursor: 'move'
} : {}
}, renderedLine, /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
}, renderedHoles)), line.selected && /*#__PURE__*/_react["default"].createElement("g", {
id: 'elevation-button',
key: 1,
transform: "translate(".concat(x1 + 35, ", ").concat(y1 - 15, ")"),
style: {
cursor: 'pointer'
}
}, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
id: "shadow"
}, /*#__PURE__*/_react["default"].createElement("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "0.6"
}))), /*#__PURE__*/_react["default"].createElement("rect", {
rx: "4",
ry: "4",
y: "20",
height: "22",
width: "22",
fill: "white",
filter: "url(#shadow)"
}), /*#__PURE__*/_react["default"].createElement("image", {
href: "/assets/img/svg/bottombar/elevation.svg",
x: "5",
y: "-36",
height: "12",
width: "12",
style: {
transform: 'rotateX(180deg)'
}
})), line.selected && /*#__PURE__*/_react["default"].createElement("g", {
id: 'remove-button',
key: 2,
transform: "translate(".concat(x1 + 10, ", ").concat(y1, ")"),
style: {
cursor: 'pointer'
}
}, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
id: "shadow"
}, /*#__PURE__*/_react["default"].createElement("feDropShadow", {
dx: "0",
dy: "0",
stdDeviation: "0.6"
}))), /*#__PURE__*/_react["default"].createElement("rect", {
rx: "4",
ry: "4",
y: "5",
height: "22",
width: "22",
fill: "white",
filter: "url(#shadow)"
}), /*#__PURE__*/_react["default"].createElement("image", {
href: "/assets/img/svg/delete.svg",
x: "3",
y: "-24",
height: "16",
width: "16",
style: {
transform: 'rotateX(180deg)'
}
})), /*#__PURE__*/_react["default"].createElement("use", {
id: 'use elevation button',
xlinkHref: '#elevation-button',
"data-element-root": true,
"data-prototype": line.prototype,
"data-id": line.id,
"data-selected": line.selected,
"data-layer": layer.id,
"data-part": "elevation"
}), /*#__PURE__*/_react["default"].createElement("use", {
id: 'use remove button',
xlinkHref: '#remove-button',
"data-element-root": true,
"data-prototype": line.prototype,
"data-id": line.id,
"data-selected": line.selected,
"data-layer": layer.id,
"data-part": "remove"
}));
}
Line.propTypes = {
line: _propTypes["default"].object.isRequired,
layer: _propTypes["default"].object.isRequired,
scene: _propTypes["default"].object.isRequired,
catalog: _propTypes["default"].object.isRequired
};