kitchen-simulator/es/components/viewer2d/layer.js

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

import React from 'react';
import PropTypes from 'prop-types';
import { Line, Area, Vertex, Item, Group } from "./export";
import { GeometryUtils } from "../../utils/export";
import { MODE_DRAWING_LINE, WALL_CABINET_LAYOUTPOS } from "../../constants";
import { returnReplaceableDeepSearchType } from "./utils";
var STYLE = {
  stroke: '#494949',
  strokeWidth: 1,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  strokeMiterlimit: 2.613,
  fill: '#D6F0EE'
};
var STYLE_TEXT = {
  textAnchor: 'middle',
  fontSize: 10,
  fontFamily: "'Courier New', Courier, monospace",
  fontWeight: 'bold',
  fill: '#506ad3'
};
var HINT_STYLE_TEXT = {
  textAnchor: 'middle',
  fontSize: '10px',
  fontFamily: "'Microsoft YaHei UI', Courier, monospace",
  fontWeight: 'bold',
  fill: '1a75ff'
};
export default function Layer(_ref) {
  var layer = _ref.layer,
    scene = _ref.scene,
    catalog = _ref.catalog,
    mode = _ref.mode,
    state = _ref.state,
    relatedLines = _ref.relatedLines;
  var unit = scene.unit,
    groups = scene.groups;
  var lines = layer.lines,
    areas = layer.areas,
    vertices = layer.vertices,
    holes = layer.holes,
    layerID = layer.id,
    items = layer.items,
    opacity = layer.opacity;
  var allLines;
  var allLineRects;
  allLines = GeometryUtils.getAllLines(layer);
  allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
  var hintVertex = {
    x: 0,
    y: 0
  };
  var angleVertexes = [];
  vertices.valueSeq().forEach(function (vert) {
    var vertexes = [vert];
    lines.valueSeq().forEach(function (line) {
      var vertex0 = layer.vertices.get(line.vertices.get(0));
      var vertex1 = layer.vertices.get(line.vertices.get(1));
      if (vertex0 === vert) vertexes.push(vertex1);
      if (vertex1 === vert) vertexes.push(vertex0);
    });
    if (vertexes.length === 3) {
      angleVertexes.push(vertexes);
    }
    hintVertex.x += vert.x;
    hintVertex.y += vert.y;
  });
  hintVertex.x /= vertices.size;
  hintVertex.y /= vertices.size;
  var itemData = [];
  var itemWall = [];
  var itemSelected = [];
  items = items.sort(function (a, b) {
    return a.getIn(['properties', 'altitude', '_length']) - b.getIn(['properties', 'altitude', '_length']);
  });
  items.valueSeq().filter(function (a) {
    return a.selected === true;
  }).forEach(function (item) {
    itemSelected.push(/*#__PURE__*/React.createElement(Item, {
      key: item.id,
      layer: layer,
      item: item,
      scene: scene,
      catalog: catalog,
      mode: mode
    }));
  });
  items.valueSeq().forEach(function (item) {
    if (item.layoutpos !== WALL_CABINET_LAYOUTPOS) {
      if (catalog.elements.hasOwnProperty(item.type) || !catalog.elements[item.type] && !!catalog.elements[returnReplaceableDeepSearchType(item.type)]) itemData.push(/*#__PURE__*/React.createElement(Item, {
        key: item.id,
        layer: layer,
        item: item,
        scene: scene,
        catalog: catalog
      }));else {
        console.log("Element ".concat(item.type, " does not exist in catalog."));
      }
    }
  });
  items.valueSeq().filter(function (a) {
    return a.selected === false;
  }).forEach(function (item) {
    if (item.layoutpos === WALL_CABINET_LAYOUTPOS) {
      if (catalog.elements.hasOwnProperty(item.type) || !catalog.elements[item.type] && !!catalog.elements[returnReplaceableDeepSearchType(item.type)]) itemWall.push(/*#__PURE__*/React.createElement(Item, {
        key: item.id,
        layer: layer,
        item: item,
        scene: scene,
        catalog: catalog
      }));else {
        console.log("Element ".concat(item.type, " does not exist in catalog."));
      }
    }
  });
  var lineData = [];
  lines.sort(function compare(a, b) {
    return a.createdDateTime - b.createdDateTime;
  }).valueSeq().forEach(function (line) {
    lineData.push(/*#__PURE__*/React.createElement(Line, {
      key: line.id,
      layer: layer,
      line: line,
      scene: scene,
      catalog: catalog,
      state: state,
      relatedLines: relatedLines
    }));
  });
  return /*#__PURE__*/React.createElement("g", {
    opacity: opacity
  }, areas.valueSeq().map(function (area) {
    return /*#__PURE__*/React.createElement(Area, {
      key: area.id,
      layer: layer,
      area: area,
      unit: unit,
      catalog: catalog
    });
  }), itemData, itemWall, lineData, itemSelected, mode !== MODE_DRAWING_LINE && vertices.valueSeq().filter(function (v) {
    return v.selected;
  }).map(function (vertex) {
    return /*#__PURE__*/React.createElement(Vertex, {
      key: vertex.id,
      layer: layer,
      vertex: vertex
    });
  }), groups.valueSeq().filter(function (g) {
    return g.hasIn(['elements', layerID]) && g.get('selected');
  }).map(function (group) {
    return /*#__PURE__*/React.createElement(Group, {
      key: group.get('id'),
      layer: layer,
      group: group,
      scene: scene,
      catalog: catalog
    });
  }));
}
Layer.propTypes = {
  layer: PropTypes.object.isRequired,
  scene: PropTypes.object.isRequired,
  catalog: PropTypes.object.isRequired
};