kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
1,112 lines (1,099 loc) • 60.7 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["default"] = Viewer2D;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactSvgPanZoom = require("react-svg-pan-zoom");
var _constants = _interopRequireWildcard(require("../../constants"));
var constants = _constants;
var _state = _interopRequireDefault(require("./state"));
var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
var _export = require("./export");
var _export2 = require("../../utils/export");
var _formNumberInput = _interopRequireDefault(require("../style/form-number-input"));
var _convertUnitsLite = require("../../utils/convert-units-lite");
var _immutable = require("immutable");
var _math = require("../../utils/math");
var _helper = require("../../utils/helper");
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; }
// variables
// variables
var pinFlag = false;
var sFlag = false; //for all object move
var sPoint = {}; //for all object move
var endPoint = {};
var current_sel_obj_id = null;
var allItemRect;
var allItemSnap;
var allLines;
var allLineRects;
var allLineSnap;
var allRect;
var holeRect;
var allArea;
// /////////
function mode2Tool(mode) {
if (pinFlag) {
return _reactSvgPanZoom.TOOL_NONE;
}
switch (mode) {
case constants.MODE_2D_PAN:
return _reactSvgPanZoom.TOOL_PAN;
case constants.MODE_2D_ZOOM_IN:
return _reactSvgPanZoom.TOOL_ZOOM_IN;
case constants.MODE_2D_ZOOM_OUT:
return _reactSvgPanZoom.TOOL_ZOOM_OUT;
case constants.MODE_IDLE:
return _reactSvgPanZoom.TOOL_AUTO;
default:
return _reactSvgPanZoom.TOOL_NONE;
}
}
function mode2PointerEvents(mode) {
switch (mode) {
case constants.MODE_DRAWING_LINE:
case constants.MODE_DRAWING_HOLE:
case constants.MODE_DRAWING_ITEM:
case constants.MODE_DRAGGING_HOLE:
case constants.MODE_DRAGGING_ITEM:
case constants.MODE_DRAGGING_LINE:
case constants.MODE_DRAGGING_VERTEX:
return {
pointerEvents: 'none'
};
default:
return {};
}
}
function mode2Cursor(mode) {
switch (mode) {
case constants.MODE_DRAGGING_HOLE:
case constants.MODE_DRAGGING_LINE:
case constants.MODE_DRAGGING_VERTEX:
case constants.MODE_DRAGGING_ITEM:
return {
cursor: 'move'
};
case constants.MODE_ROTATING_ITEM:
return {
cursor: 'ew-resize'
};
case constants.MODE_WAITING_DRAWING_LINE:
case constants.MODE_DRAWING_LINE:
return {
cursor: 'crosshair'
};
default:
return {
cursor: 'default'
};
}
}
function mode2DetectAutopan(mode) {
switch (mode) {
case constants.MODE_DRAWING_LINE:
case constants.MODE_DRAGGING_LINE:
case constants.MODE_DRAGGING_VERTEX:
case constants.MODE_DRAGGING_HOLE:
case constants.MODE_DRAGGING_ITEM:
case constants.MODE_DRAWING_HOLE:
case constants.MODE_DRAWING_ITEM:
return true;
default:
return false;
}
}
function extractElementData(node) {
while (!node.attributes.getNamedItem('data-element-root') && node.tagName !== 'svg') {
node = node.parentNode;
}
if (node.tagName === 'svg') return null;
return {
length: node.attributes.getNamedItem('data-length') ? parseFloat(node.attributes.getNamedItem('data-length').value) : 0,
part: node.attributes.getNamedItem('data-part') ? node.attributes.getNamedItem('data-part').value : undefined,
layer: node.attributes.getNamedItem('data-layer').value,
prototype: node.attributes.getNamedItem('data-prototype').value,
selected: node.attributes.getNamedItem('data-selected').value === 'true',
id: node.attributes.getNamedItem('data-id').value,
direct: node.attributes.getNamedItem('data-direct') ? node.attributes.getNamedItem('data-direct').value : 0
};
}
function Viewer2D(_ref, _ref2) {
var state = _ref.state,
width = _ref.width,
height = _ref.height,
setToolbar = _ref.setToolbar,
replaceCabinet = _ref.replaceCabinet;
var viewer2DActions = _ref2.viewer2DActions,
linesActions = _ref2.linesActions,
holesActions = _ref2.holesActions,
verticesActions = _ref2.verticesActions,
itemsActions = _ref2.itemsActions,
areaActions = _ref2.areaActions,
projectActions = _ref2.projectActions,
catalog = _ref2.catalog;
var _useState = (0, _react.useState)(null),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
rulerEdit = _useState2[0],
setRulerEdit = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
rulerEditID = _useState4[0],
setRulerEditID = _useState4[1];
var Viewer = (0, _react.useRef)(null);
var viewer2D = state.viewer2D,
mode = state.mode,
scene = state.scene;
// let relatedLines = [];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
relatedLines = _useState6[0],
setRelatedLines = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
drawStart = _useState8[0],
setdrawStart = _useState8[1];
(0, _react.useEffect)(function () {
// move viewer point to center
var selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
var vertices = selectedLayer.vertices;
if (vertices.isEmpty()) {
return;
}
var bottomX = 0,
bottomY = 100000,
topX = 100000,
topY = 0;
vertices.forEach(function (vertex) {
if (bottomX < vertex.x) bottomX = vertex.x;
if (bottomY > vertex.y) bottomY = vertex.y;
if (topX > vertex.x) topX = vertex.x;
if (topY < vertex.y) topY = vertex.y;
});
var moveX = topX + (bottomX - topX) / 2;
var moveY = 2000 - (bottomY + (topY - bottomY) / 2);
Viewer.current.setPointOnViewerCenter(moveX, moveY, viewer2D.get('a'));
}, []);
var layerID = scene.selectedLayer;
var wall_thickness = _constants.LINE_THICKNESS / 2;
var layer = scene.getIn(['layers', layerID]);
var mapCursorPosition = function mapCursorPosition(_ref3) {
var x = _ref3.x,
y = _ref3.y;
return {
x: x,
y: -y + scene.height
};
};
// let pinBackColor = pinFlag ? "#4488ff" : "black";
// let topRightImg = state.mode == MODE_IDLE || state.mode == MODE_2D_PAN ? "/assets/img/svg/topbar/edit_inactive.svg" : "/assets/img/svg/topbar/edit_active.svg";
// let topBtnAction = state.mode == MODE_IDLE || state.mode == MODE_2D_PAN ? () => linesActions.selectToolDrawingLine("wall") : () => projectActions.setMode(MODE_IDLE);
var prepareSnap = function prepareSnap() {
var layerID = scene.selectedLayer;
var layer = scene.layers.get(layerID);
allLines = _export2.GeometryUtils.getAllLines(layer);
allLineRects = _export2.GeometryUtils.buildRectFromLines(layer, allLines);
allItemRect = _export2.GeometryUtils.getAllItems(scene, catalog, allLineRects);
allItemSnap = _export2.GeometryUtils.getAllItemSnap(allItemRect);
allLineSnap = _export2.GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
allRect = allItemRect.others.concat(allLineRects);
allItemSnap = _export2.GeometryUtils.validateSnaps(allItemSnap, allRect);
allLineSnap = _export2.GeometryUtils.validateSnaps(allLineSnap, allRect);
allArea = _export2.GeometryUtils.getAllArea(layer);
};
var updateRulerDistAttribute = function updateRulerDistAttribute(elementData, value) {
var newVal = value.get('length');
var oldVal = elementData.length;
var direct = elementData.direct;
var thisItem = scene.getIn(['layers', elementData.layer, 'items', elementData.id]).toJS();
var oldX = thisItem.x;
var oldY = thisItem.y;
var oldRotRad = thisItem.rotation / 180 * Math.PI;
var rotRad = oldRotRad + direct / 180 * Math.PI;
var delta = oldVal - newVal;
var newX = oldX + delta * Math.cos(rotRad);
var newY = oldY + delta * Math.sin(rotRad);
itemsActions.updateDraggingItemChanged(newX, newY, elementData.layer, elementData.id);
setRulerEdit(null);
};
var updateangleChangeAttribute = function updateangleChangeAttribute(elementData, value) {
var verArr = elementData.id.split(',');
var oldAngle = elementData.length;
var newAngle = value.getIn(['_length']);
var cenId = verArr[0];
var verId = verArr[1];
var x0 = state.scene.getIn(['layers', layerID, 'vertices', verArr[0], 'x']);
var y0 = state.scene.getIn(['layers', layerID, 'vertices', verArr[0], 'y']);
var x1 = state.scene.getIn(['layers', layerID, 'vertices', verArr[1], 'x']);
var y1 = state.scene.getIn(['layers', layerID, 'vertices', verArr[1], 'y']);
var x, y, delta;
delta = newAngle - oldAngle;
if (verArr[2] === 'true') {
delta = -delta;
}
x = (x1 - x0) * Math.cos(delta * Math.PI / 180) - (y1 - y0) * Math.sin(delta * Math.PI / 180) + x0;
y = (x1 - x0) * Math.sin(delta * Math.PI / 180) + (y1 - y0) * Math.cos(delta * Math.PI / 180) + y0;
setRulerEdit(null);
verticesActions.beginDraggingVertex(elementData.layer, verArr[1], x, y, state.snapMask);
verticesActions.updateDraggingVertex(x, y, state.snapMask);
verticesActions.endDraggingVertex(x, y, state.snapMask);
};
var updateRulerAttribute = function updateRulerAttribute(elementData, value) {
var selectedLine = scene.getIn(['layers', elementData.layer, 'lines', elementData.id]).toJS();
var v_0 = scene.getIn(['layers', elementData.layer, 'vertices', selectedLine.vertices[0]]);
var v_1 = scene.getIn(['layers', elementData.layer, 'vertices', selectedLine.vertices[1]]);
var _GeometryUtils$orderV = _export2.GeometryUtils.orderVertices([v_0, v_1]),
_GeometryUtils$orderV2 = (0, _slicedToArray2["default"])(_GeometryUtils$orderV, 2),
v_a = _GeometryUtils$orderV2[0],
v_b = _GeometryUtils$orderV2[1];
var v_b_new = _export2.GeometryUtils.extendLine(v_a.x, v_a.y, v_b.x, v_b.y, value.get('length'), 2);
// Blocked function that as wall changed, opposite wall should changed together.
// let layer = scene.getIn(['layers', elementData.layer]);
// let allLines = layer.lines.toArray()
// let relatedLine = allLines.filter(line => { return line.vertices.toArray().includes(v_b.id) && line.id != selectedLine.id })[0];
// let relatedVertexID = relatedLine && (relatedLine.vertices.toArray()[0] == v_b.id ? relatedLine.vertices.toArray()[1] : relatedLine.vertices.toArray()[0]);
// let v_d = relatedVertexID && layer.getIn(['vertices', relatedVertexID]);
// let delta = {
// x : v_b_new.x - v_b.x,
// y : v_b_new.y - v_b.y
// };
// let newPosition = {
// x : v_d.x + delta.x,
// y : v_d.y + delta.y
// }
var attributesData = {
// (v_0 === v_a ? 'vertexTwo' : 'vertexOne') : v_b.merge(v_b_new)),
lineLength: value
};
if (v_0 === v_a) {
attributesData = _objectSpread(_objectSpread({}, attributesData), {}, {
vertexTwo: v_b.merge(v_b_new),
vertexOne: v_a
});
} else {
attributesData = _objectSpread(_objectSpread({}, attributesData), {}, {
vertexOne: v_b.merge(v_b_new),
vertexTwo: v_a
});
}
var attributesFormData = new _immutable.Map(_objectSpread({}, attributesData));
setRulerEdit(null);
projectActions.setLinesAttributes(attributesFormData, true, {
layerID: elementData.layer,
lineID: elementData.id
});
// Blocked function that as wall changed, opposite wall should changed together.
// verticesActions.beginDraggingVertex(elementData.layer, relatedVertexID, newPosition.x, newPosition.y, state.snapMask);
// verticesActions.updateDraggingVertex(newPosition.x, newPosition.y, state.snapMask);
// verticesActions.endDraggingVertex(newPosition.x, newPosition.y, state.snapMask);
};
var updateTwoHoleRulerAttribute = function updateTwoHoleRulerAttribute(elementData, value) {
var elementIds = elementData.id.split(',');
elementData.id = elementIds[1];
elementData.length /= 2;
updateLeftHoleRulerAttribute(elementData, value);
elementData.id = elementIds[0];
updateRightHoleRulerAttribute(elementData, value);
};
var updateLeftHoleRulerAttribute = function updateLeftHoleRulerAttribute(elementData, value) {
var newVal = value.get('length');
var oldVal = elementData.length;
var thisItem = scene.getIn(['layers', elementData.layer, 'holes', elementData.id]).toJS();
var oldX = thisItem.x;
var oldY = thisItem.y;
var oldRotRad = thisItem.rotation;
var delta = oldVal - newVal;
var newX = oldX - delta * Math.cos(oldRotRad);
var newY = oldY - delta * Math.sin(oldRotRad);
holesActions.beginDraggingHole(elementData.layer, elementData.id, newX, newY);
holesActions.updateDraggingHoleChanged(newX, newY, elementData.layer, elementData.id);
holesActions.endDraggingHole(newX, newY);
setRulerEdit(null);
};
var updateHoleRulerAttribute = function updateHoleRulerAttribute(elementData, value) {
var newVal = value.get('length');
var thisItem = scene.getIn(['layers', elementData.layer, 'holes', elementData.id]).toJS();
var oldX = thisItem.x;
var oldY = thisItem.y;
holesActions.beginDraggingHole(elementData.layer, elementData.id, oldX, oldY);
holesActions.updateDraggingHoleRulerChanged(newVal, elementData.layer, elementData.id);
holesActions.endDraggingHole(oldX, oldY);
setRulerEdit(null);
};
var updateRightHoleRulerAttribute = function updateRightHoleRulerAttribute(elementData, value) {
var newVal = value.get('length');
var oldVal = elementData.length;
var thisItem = scene.getIn(['layers', elementData.layer, 'holes', elementData.id]).toJS();
var oldX = thisItem.x;
var oldY = thisItem.y;
var oldRotRad = thisItem.rotation;
var delta = oldVal - newVal;
var newX = oldX + delta * Math.cos(oldRotRad);
var newY = oldY + delta * Math.sin(oldRotRad);
holesActions.beginDraggingHole(elementData.layer, elementData.id, newX, newY);
holesActions.updateDraggingHoleChanged(newX, newY, elementData.layer, elementData.id);
holesActions.endDraggingHole(newX, newY);
setRulerEdit(null);
};
var getRelatedLines = function getRelatedLines(tlines, drawingLine, vertices, lines) {
var _loop = function _loop() {
var vertex = vertices[drawingLine.vertices[i]];
var _loop2 = function _loop2(j) {
if (vertex.lines[j] !== drawingLine.id) {
if (!tlines.some(function (line) {
return line.id === lines[vertex.lines[j]].id;
})) {
tlines.push(lines[vertex.lines[j]]);
}
}
};
for (var j = 0; j < vertex.lines.length; j++) {
_loop2(j);
}
};
// if (drawingLine.vertices[0] !== drawingLine.vertices[1]) {
for (var i = 0; i < drawingLine.vertices.length; i++) {
_loop();
}
// }
};
var getEndPoint = function getEndPoint(vertices, x, y, mode) {
var selLineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
if ((0, _helper.isEmpty)(selLineID)) {
return {
isEndDrag: true,
x: x,
y: y
};
}
var draggingLine = state.getIn(['scene', 'layers', layerID, 'lines', selLineID]).toJS();
var allLines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
var dragVertexId = state.getIn(['draggingSupport', 'vertexID']);
dragVertexId = !(0, _helper.isEmpty)(dragVertexId) ? dragVertexId : draggingLine.vertices[1];
var vtx, vty;
var stepUnit = false;
vtx = vertices[dragVertexId].x;
vty = vertices[dragVertexId].y;
if (!vertices[dragVertexId].lines.some(function (line) {
return line !== draggingLine.id;
})) {
stepUnit = true;
}
var endDrag = [];
if (!(0, _helper.isEmpty)(relatedLines) && mode !== 'DRAGGING_LINE') {
vertices[dragVertexId].x = x;
vertices[dragVertexId].y = y;
}
var absAngle, lineAngle;
var angles = [];
if (draggingLine.vertices[0] !== draggingLine.vertices[1]) {
if ((0, _helper.isEmpty)(relatedLines) && mode !== 'DRAGGING_LINE') {
endDrag.push(true);
var originVerIndex = draggingLine.vertices.findIndex(function (vertice) {
return vertice !== dragVertexId;
});
var originVerId = originVerIndex < 0 ? draggingLine.vertices[0] : draggingLine.vertices[originVerIndex];
var ox = vertices[originVerId].x;
var oy = vertices[originVerId].y;
lineAngle = _export2.GeometryUtils.angleBetweenTwoPointsAndOrigin(ox, oy, x, y);
absAngle = Math.abs(lineAngle);
}
for (var i = 0; i < relatedLines.length; i++) {
var line = relatedLines[i];
lineAngle = _export2.GeometryUtils.angleBetweenTwoLines(line, draggingLine, vertices);
absAngle = Math.abs(lineAngle);
var tmpRelated = [];
_export2.GeometryUtils.getRelatedLines(tmpRelated, line, vertices, allLines, draggingLine.id);
angles.push(lineAngle);
for (var j = 0; j < tmpRelated.length; j++) {
var tmpAngle = Math.abs(_export2.GeometryUtils.angleBetweenTwoLines(tmpRelated[j], line, vertices));
if (tmpAngle < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || tmpAngle > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
endDrag.push(false);
} else endDrag.push(true);
}
if (absAngle < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
endDrag.push(false);
} else endDrag.push(true);
}
}
if (!endDrag.some(function (flag) {
return flag === false;
})) {
vtx = x;
vty = y;
} else {
// the origin point of rotation(snapping)
var _originVerId = draggingLine.vertices.findIndex(function (vertice) {
return vertice !== dragVertexId;
});
_originVerId = _originVerId < 0 ? draggingLine.vertices[0] : draggingLine.vertices[_originVerId];
if (stepUnit) {
var _ox = vertices[_originVerId].x;
var _oy = vertices[_originVerId].y;
angles.forEach(function (angle, index) {
if (Math.abs(angle) < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || Math.abs(angle) > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
var absVal = Math.abs(angle);
var rest = _constants.MIN_ANGLE_DISALLOW_DRAW_WALL - absVal;
if (absVal > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
absVal = 360 - absVal;
rest = -(_constants.MIN_ANGLE_DISALLOW_DRAW_WALL - absVal);
}
// determine the direction of rotation.
rest = angle > 0 ? -rest : rest;
// rotate the current point to last point around the first point of drawing line.
var res = _export2.GeometryUtils.rotatePointAroundPoint(x, y, _ox, _oy, rest);
vtx = res.x;
vty = res.y;
}
});
}
}
// angle snapping as a value of UNIT_ANGLE
if (!endDrag.some(function (flag) {
return flag === false;
}) && !(0, _helper.isEmpty)(absAngle) && absAngle % _constants.UNIT_ANGLE !== 0 && stepUnit) {
var _result = _export2.GeometryUtils.snapAngleByUnit(lineAngle, vertices, draggingLine, vtx, vty, dragVertexId);
vtx = _result.x;
vty = _result.y;
}
var result = {
isEndDrag: endDrag,
x: vtx,
y: vty
};
return result;
};
var getProperties = function getProperties(item, property) {
var _item$properties;
if (!(item !== null && item !== void 0 && (_item$properties = item.properties) !== null && _item$properties !== void 0 && _item$properties.getIn)) return 0;
var length = item.properties.getIn([property, '_length']);
var unit = item.properties.getIn([property, '_unit']);
return length && unit ? (0, _convertUnitsLite.convert)(length).from(unit).to('cm') : 0;
};
var point = function point(x, y) {
return {
x: x,
y: y
};
};
var getDistant = function getDistant(x, y, rotRad, curItemInfo, allRect) {
var center_h = 3 * height / 8;
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) {
if (!Array.isArray(centerpoint) || centerpoint.length < 2) return;
var _centerpoint = (0, _slicedToArray2["default"])(centerpoint, 2),
pt = _centerpoint[0],
angle = _centerpoint[1];
if (!pt) return;
// line through centerpoint and reference center
var rectLine = angle === 180 || angle === 0 ? _export2.GeometryUtils.linePassingThroughTwoPoints(pt.x, pt.y, center_x1, center_y1) : _export2.GeometryUtils.linePassingThroughTwoPoints(pt.x, pt.y, x, y);
if (!rectLine) return;
var minDist;
allRect.forEach(function (linerect) {
if (!(linerect !== null && linerect !== void 0 && linerect.rect) || linerect.rect.length < 4) return;
var p0 = _export2.GeometryUtils.clone_point(linerect.rect[2]);
var p1 = _export2.GeometryUtils.clone_point(linerect.rect[3]);
if (!p0 || !p1 || p0.x === p1.x && p0.y === p1.y) return;
var lineFn = _export2.GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
if (!lineFn) return;
var ip = _export2.GeometryUtils.twoLinesIntersection(lineFn.a, lineFn.b, lineFn.c, rectLine.a, rectLine.b, rectLine.c);
if (!ip) return;
// intersection must lie within line segment
var segLen = _export2.GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y);
if (segLen <= _export2.GeometryUtils.pointsDistance(p0.x, p0.y, ip.x, ip.y) || segLen <= _export2.GeometryUtils.pointsDistance(p1.x, p1.y, ip.x, ip.y)) return;
// ensure intersection is farther than pt→center
var distToCenter = _export2.GeometryUtils.pointsDistance(ip.x, ip.y, x, y);
var baseDist = _export2.GeometryUtils.pointsDistance(pt.x, pt.y, ip.x, ip.y);
if (distToCenter <= baseDist) return;
var candidate = baseDist;
minDist = minDist !== undefined ? Math.min(minDist, candidate) : candidate;
});
pointArray.push([minDist !== null && minDist !== void 0 ? minDist : 0, angle]);
});
return pointArray;
};
var getCalcRectFromItem = function getCalcRectFromItem(item) {
if (!(item !== null && item !== void 0 && item.pos) || !(item !== null && item !== void 0 && item.size)) return {
rectCenterPoint: []
};
var _item$pos = item.pos,
x = _item$pos.x,
y = _item$pos.y;
var w = item.size.width / 2;
var h = item.size.height / 2;
var rotRad = item.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);
return {
rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
};
};
var getConnectedLines = function getConnectedLines() {
var _state$getIn;
var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
var drawingLine = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'lines', lineID])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
// get the lines that have same points with drawing line.
if (!(0, _helper.isEmpty)(drawingLine)) {
var tlines = [];
getRelatedLines(tlines, drawingLine, vertices, lines);
setRelatedLines(tlines);
}
};
var onMouseMove = function onMouseMove(viewerEvent) {
//workaround that allow imageful component to work
// let evt = new Event('mousemove-planner-event');
// evt.viewerEvent = viewerEvent;
// document.dispatchEvent(evt);
var _mapCursorPosition = mapCursorPosition(viewerEvent),
x = _mapCursorPosition.x,
y = _mapCursorPosition.y;
projectActions.updateMouseCoord({
x: x,
y: y
});
if (sFlag) {
var differs = {
x: x - sPoint.x,
y: y - sPoint.y
};
projectActions.selectAll(differs);
} else switch (mode) {
case constants.MODE_DRAWING_LINE:
// check whether the drawing line is started.
if (drawStart || state.getIn(['scene', 'setLineAttributes'])) {
var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
var _vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
var tlines = [];
setdrawStart(false);
// get the lines that have same points with drawing line.
getRelatedLines(tlines, drawingLine, _vertices, lines);
setRelatedLines(tlines);
linesActions.updateDrawingLine(x, y, tlines, state.snapMask);
} else {
linesActions.updateDrawingLine(x, y, relatedLines, state.snapMask);
}
// Blocked 90 degree snap.
// let prevVertexID = state.getIn(['scene', 'layers', layerID, 'selected', 'vertices']).toJS()[0];
// let prevVertex = state.getIn(['scene', 'layers', layerID, 'vertices', prevVertexID]);
// let dx = Math.abs(x - prevVertex.x);
// let dy = Math.abs(y - prevVertex.y);
// if (dx > dy) y = prevVertex.y
// else x = prevVertex.x;
break;
case constants.MODE_DRAWING_HOLE:
holesActions.updateDrawingHole(layerID, x, y);
break;
case constants.MODE_DRAWING_ITEM:
var _layer = scene.layers.get(layerID);
var flag = false;
_layer.items.some(function (item) {
if (item.selected) {
item.counterTop.uri = _layer.counterTop.uri;
current_sel_obj_id = item.id;
flag = true;
}
});
if (current_sel_obj_id === null || !flag) {
itemsActions.updateDrawingItem(layerID, x, y);
endPoint.x = x;
endPoint.y = y;
} else {
prepareSnap();
var _GeometryUtils$calcSn = _export2.GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
nx = _GeometryUtils$calcSn.nx,
ny = _GeometryUtils$calcSn.ny,
rot = _GeometryUtils$calcSn.rot,
rotRad = _GeometryUtils$calcSn.rotRad;
var _val = {
pos: {
x: x,
y: y
},
rotRad: rotRad,
size: allItemRect.cur && allItemRect.cur.size,
layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
is_corner: allItemRect.cur && allItemRect.cur.is_corner
};
var _GeometryUtils$getAll = _export2.GeometryUtils.getAllHoleRect(scene, _val),
_isSect = _GeometryUtils$getAll.isSect,
_snap = _GeometryUtils$getAll.snap;
if (!(0, _helper.isEmpty)(_snap) && _isSect) {
if (_snap.length == 1) _val.pos = {
x: _snap[0].x,
y: _snap[0].y
};else {
if ((_snap[0].x - x) * (_snap[0].x - x) + (_snap[0].y - y) * (_snap[0].y - y) < (_snap[1].x - x) * (_snap[1].x - x) + (_snap[1].y - y) * (_snap[1].y - y)) _val.pos = {
x: _snap[0].x,
y: _snap[0].y
};else _val.pos = {
x: _snap[1].x,
y: _snap[1].y
};
}
var interSect = _export2.GeometryUtils.validInterSect(allItemRect.others, _val);
if (interSect) {
nx = _val.pos.x;
ny = _val.pos.y;
}
}
_val.pos = {
x: nx,
y: ny
};
var _isrectSect = _export2.GeometryUtils.validInterSect(allItemRect.others, _val);
if (_isrectSect && _isSect) {
itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
endPoint.x = nx;
endPoint.y = ny;
}
if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('cabinet')) {
itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
endPoint.x = nx;
endPoint.y = ny;
}
if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
endPoint.x = nx;
endPoint.y = ny;
}
}
break;
case constants.MODE_DRAGGING_HOLE:
holesActions.updateDraggingHole(x, y);
break;
case constants.MODE_DRAGGING_LINE:
linesActions.updateDraggingLine(x, y, relatedLines, state.snapMask);
break;
case constants.MODE_DRAGGING_VERTEX:
var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
getConnectedLines();
var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
break;
case constants.MODE_DRAGGING_ITEM:
prepareSnap();
var _GeometryUtils$calcSn2 = _export2.GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
nx = _GeometryUtils$calcSn2.nx,
ny = _GeometryUtils$calcSn2.ny,
rot = _GeometryUtils$calcSn2.rot,
rotRad = _GeometryUtils$calcSn2.rotRad;
var val = {
pos: {
x: x,
y: y
},
rotRad: rotRad,
size: allItemRect.cur && allItemRect.cur.size,
layoutpos: allItemRect.cur && allItemRect.cur.layoutpos,
is_corner: allItemRect.cur && allItemRect.cur.is_corner
};
var _GeometryUtils$getAll2 = _export2.GeometryUtils.getAllHoleRect(scene, val),
isSect = _GeometryUtils$getAll2.isSect,
snap = _GeometryUtils$getAll2.snap;
if (!(0, _helper.isEmpty)(snap) && isSect) {
if (snap.length == 1) val.pos = {
x: snap[0].x,
y: snap[0].y
};else if (snap.length == 2) {
if ((snap[0].x - x) * (snap[0].x - x) + (snap[0].y - y) * (snap[0].y - y) < (snap[1].x - x) * (snap[1].x - x) + (snap[1].y - y) * (snap[1].y - y)) val.pos = {
x: snap[0].x,
y: snap[0].y
};else val.pos = {
x: snap[1].x,
y: snap[1].y
};
}
var _interSect = _export2.GeometryUtils.validInterSect(allItemRect.others, val);
if (_interSect) {
nx = val.pos.x;
ny = val.pos.y;
}
}
val.pos = {
x: nx,
y: ny
};
var isrectSect = _export2.GeometryUtils.validInterSect(allItemRect.others, val);
if (isrectSect && isSect) {
itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
}
if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cabinet')) {
itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
}
if (allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Hood') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Range') || allItemRect.cur && allItemRect.cur.itemInfo.name.includes('Cook Top')) {
itemsActions.updateDraggingItemChanged(nx, ny, layerID, current_sel_obj_id);
itemsActions.updateRotatingItemChanged(rot, layerID, current_sel_obj_id);
}
break;
case constants.MODE_ROTATING_ITEM:
itemsActions.updateRotatingItem(x, y);
break;
}
viewerEvent.originalEvent.stopPropagation();
};
var onMouseDown = function onMouseDown(viewerEvent) {
var event = viewerEvent.originalEvent;
//workaround that allow imageful component to work
// let evt = new Event('mousedown-planner-event');
// evt.viewerEvent = viewerEvent;
// document.dispatchEvent(evt);
var _mapCursorPosition2 = mapCursorPosition(viewerEvent),
x = _mapCursorPosition2.x,
y = _mapCursorPosition2.y;
var layer = state.scene.getIn(['layers', state.scene.selectedLayer]);
var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
if (mode === constants.MODE_DRAWING_LINE) {
if (event.nativeEvent.which === 3) {
projectActions.rollback();
event.stopPropagation();
return;
}
}
if (mode === constants.MODE_IDLE) {
var elementData = extractElementData(event.target);
if (!elementData) return;
if (sCount < 2) switch (elementData.prototype) {
case 'lines':
if (elementData.selected) {
if (elementData.part === 'remove') break;else if (elementData.part === 'elevation') break;
linesActions.beginDraggingLine(elementData.layer, elementData.id, x, y, state.snapMask);
}
break;
case 'vertices':
verticesActions.beginDraggingVertex(elementData.layer, elementData.id, x, y, state.snapMask);
break;
case 'items':
setToolbar('');
current_sel_obj_id = elementData.id;
if (elementData.part === 'rotation-anchor') itemsActions.beginRotatingItem(elementData.layer, elementData.id, x, y);else if (elementData.part === 'remove') break;else if (elementData.part === 'duplicate') break;else if (elementData.part === 'warning_edit') break;else {
// closes the setting dialog
if (document.getElementById('setting_dialog')) {
document.getElementById('setting_dialog').style.display = 'none';
}
itemsActions.selectItem(elementData.layer, elementData.id);
// projectActions.setMode(constants.MODE_DRAGGING_ITEM);
itemsActions.beginDraggingItem(elementData.layer, elementData.id, x, y);
replaceCabinet(false);
}
break;
case 'holes':
if (elementData.selected) holesActions.beginDraggingHole(elementData.layer, elementData.id, x, y);
break;
default:
break;
} else {
sPoint.x = x;
sPoint.y = y;
sFlag = true;
}
}
event.stopPropagation();
};
var onMouseUp = function onMouseUp(viewerEvent) {
//set move all flag false
sFlag = false;
// //////////////////////
// setRulerEdit(null);
var event = viewerEvent.originalEvent;
var bbox = event.target.getBoundingClientRect();
if (!mode.includes('ING')) {
setToolbar('');
}
// bbox.width = event.target.getBBox().width;
// bbox.height = event.target.getBBox().height;
if (event.target.tagName === 'rect') {
if (event.target.id) {
setRulerEditID(event.target.id);
}
}
setRulerEdit(null);
// let evt = new Event('mouseup-planner-event');
// evt.viewerEvent = viewerEvent;
// document.dispatchEvent(evt);
var _mapCursorPosition3 = mapCursorPosition(viewerEvent),
x = _mapCursorPosition3.x,
y = _mapCursorPosition3.y;
var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
switch (mode) {
case constants.MODE_IDLE:
var elementData = extractElementData(event.target);
var selectedLayer = scene.getIn(['layers', layerID]);
switch (elementData ? elementData.prototype : 'none') {
case 'areas':
if (document.getElementById('setting_dialog')) {
document.getElementById('setting_dialog').style.display = 'none';
}
areaActions.selectArea(elementData.layer, elementData.id);
break;
case 'lines':
if (document.getElementById('setting_dialog')) {
document.getElementById('setting_dialog').style.display = 'none';
}
if (elementData.part === 'remove') {
projectActions.remove();
break;
} else if (elementData.part === 'elevation') {
// handle action when click elevation about selected line
var _mode = _constants.MODE_ELEVATION_VIEW;
projectActions.setMode(_mode);
break;
} else {
var tlines = [];
var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id]).toJS();
getRelatedLines(tlines, drawingLine, vertices, lines);
setRelatedLines(tlines);
linesActions.selectLine(elementData.layer, elementData.id);
break;
}
case 'holes':
if (document.getElementById('setting_dialog')) {
document.getElementById('setting_dialog').style.display = 'none';
}
holesActions.selectHole(elementData.layer, elementData.id);
break;
case 'items':
if (elementData.part === 'duplicate') {
var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
itemsActions.duplicateSelected(currentObject);
break;
} else if (elementData.part === 'remove') {
projectActions.remove();
break;
} else if (elementData.part === 'warning_edit') {
// closes the setting dialog
if (document.getElementById('setting_dialog')) {
document.getElementById('setting_dialog').style.display = 'none';
}
itemsActions.selectItem(elementData.layer, elementData.id);
replaceCabinet(true);
break;
} else {
projectActions.unselectAll();
break;
}
case 'rulerDist':
var _length1 = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
var distanceText1 = "".concat((0, _math.formatNumber)(_length1, _constants.DECIMAL_PLACES_2));
var numberInput1 = /*#__PURE__*/_react["default"].createElement("div", {
id: "ruler_numberInput",
style: {
position: 'absolute',
left: bbox.left - (150 - bbox.width) / 2,
top: bbox.top - (50 - bbox.height) / 2,
zIndex: 1000
}
}, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
style: {
width: 150,
height: 50,
textAlign: 'center',
paddingRight: 10,
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600
},
value: distanceText1,
onChange: function onChange(event) {
var value = new _immutable.Map({
length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
_length: event.target.value,
_unit: scene.rulerUnit
});
updateRulerDistAttribute(elementData, value);
},
precision: 2
}));
setRulerEdit(numberInput1);
projectActions.unselectAll();
break;
case 'ruler':
var _length = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(selectedLayer.unit);
var numberInput = /*#__PURE__*/_react["default"].createElement("div", {
id: "ruler_numberInput",
style: {
position: 'absolute',
left: bbox.left - (150 - bbox.width) / 2,
top: bbox.top - (50 - bbox.height) / 2,
zIndex: 1000
}
}, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
style: {
width: 150,
height: 50,
textAlign: 'center',
paddingRight: 10,
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600
},
value: (0, _math.formatNumber)(_length, _constants.DECIMAL_PLACES_2),
onChange: function onChange(event) {
var value = new _immutable.Map({
length: (0, _convertUnitsLite.convert)(event.target.value).from(selectedLayer.unit).to(scene.unit),
_length: event.target.value,
_unit: selectedLayer.unit
});
updateRulerAttribute(elementData, value);
},
precision: 2
}));
setRulerEdit(numberInput);
projectActions.unselectAll();
break;
case 'twoHoleRuler':
var _lengthTwoHoleRuler = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
var distanceTextTwoHoleRuler = "".concat((0, _math.formatNumber)(_lengthTwoHoleRuler, _constants.DECIMAL_PLACES_2));
var numberInputTwoHoleRuler = /*#__PURE__*/_react["default"].createElement("div", {
id: "ruler_numberInput",
style: {
position: 'absolute',
left: bbox.left - (150 - bbox.width) / 2,
top: bbox.top - (50 - bbox.height) / 2,
zIndex: 1000
}
}, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
style: {
width: 150,
height: 50,
textAlign: 'center',
padding: 'auto',
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600
},
value: distanceTextTwoHoleRuler,
onChange: function onChange(event) {
var value = new _immutable.Map({
length: (0, _convertUnitsLite.convert)(event.target.value / 2).from(scene.rulerUnit).to(scene.unit),
_length: event.target.value / 2,
_unit: scene.rulerUnit
});
updateTwoHoleRulerAttribute(elementData, value);
},
precision: 2
}));
setRulerEdit(numberInputTwoHoleRuler);
projectActions.unselectAll();
break;
case 'leftHoleRuler':
var _lengthLeftHoleRuler = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
var distanceTextLeftHoleRuler = "".concat(_lengthLeftHoleRuler.toFixed(2));
var numberInputLeftHoleRuler = /*#__PURE__*/_react["default"].createElement("div", {
id: "ruler_numberInput",
style: {
position: 'absolute',
left: bbox.left - (150 - bbox.width) / 2,
top: bbox.top - (50 - bbox.height) / 2,
zIndex: 1000
}
}, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
style: {
width: 150,
height: 50,
textAlign: 'center',
paddingRight: 10,
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600
},
value: distanceTextLeftHoleRuler,
onChange: function onChange(event) {
var value = new _immutable.Map({
length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
_length: event.target.value,
_unit: scene.rulerUnit
});
updateLeftHoleRulerAttribute(elementData, value);
},
precision: 2
}));
setRulerEdit(numberInputLeftHoleRuler);
projectActions.unselectAll();
break;
case 'rulerHole':
var _lengthRulerHole = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
var distanceTextRulerHole = "".concat((0, _math.formatNumber)(_lengthRulerHole, _constants.DECIMAL_PLACES_2));
var numberInputRulerHole = /*#__PURE__*/_react["default"].createElement("div", {
id: "ruler_numberInput",
style: {
position: 'absolute',
left: bbox.left - (150 - bbox.width) / 2,
top: bbox.top - (50 - bbox.height) / 2,
zIndex: 1000
}
}, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
style: {
width: 150,
height: 50,
textAlign: 'center',
paddingRight: 10,
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600
},
value: distanceTextRulerHole,
onChange: function onChange(event) {
var value = new _immutable.Map({
length: (0, _convertUnitsLite.convert)(event.target.value).from(scene.rulerUnit).to(scene.unit),
_length: event.target.value,
_unit: scene.rulerUnit
});
updateHoleRulerAttribute(elementData, value);
},
precision: 2
}));
setRulerEdit(numberInputRulerHole);
projectActions.unselectAll();
break;
case 'rightHoleRuler':
var _lengthRightHoleRuler = (0, _convertUnitsLite.convert)(elementData.length).from(scene.unit).to(scene.rulerUnit);
var distanceTextRightHoleRuler = "".concat(_lengthRightHoleRuler.toFixed(2));
var numberInputRightHoleRuler = /*#__PURE__*/_react["default"].createElement("div", {
id: "ruler_numberInput",
style: {
position: 'absolute',
left: bbox.left - (150 - bbox.width) / 2,
top: bbox.top - (50 - bbox.height) / 2,
zIndex: 1000
}
}, /*#__PURE__*/_react["default"].createElement(_formNumberInput["default"], {
style: {
width: 150,
height: 50,
textAlign: 'center',
paddingRight: 10,
fontSize: '16px',
lineHeight: '22px',
fontWeight: 600
},
value: distanceTextRightHoleRuler,
onChange: function onChange(event) {
var value = new _immutable.Map({
length: (0, _convertUnitsLite.convert)(event.