kitchen-simulator 5.0.0-test.5 → 5.0.0-test.7

package/src/components/viewer3d/ruler-utils/layer3D.jsx

@@ -0,0 +1,528 @@
+import React from 'react';
+import Ruler3D from './ruler3D';
+import convert from 'convert-units';
+import { GeometryUtils } from '../../../utils/export';
+import { returnReplaceableDeepSearchType } from '../../../components/viewer2d/utils';
+import { DELTA, DISTANCE_EPSILON, DECIMAL_PLACES_2 } from '../../../constants';
+import { formatNumber, isNonZeroText } from '../../../utils/math';
+
+export default function Layer3D({
+  layer,
+  frontRect,
+  lineLength,
+  ceilHeight,
+  catalog,
+  scene,
+  scale,
+  mode,
+  line,
+  viewScale,
+  downloadFlag
+}) {
+  const { width, height } = frontRect;
+  let v0 = layer.vertices.get(line.vertices.get(0));
+  let v1 = layer.vertices.get(line.vertices.get(1));
+  const l0 = { x: v0.x, y: v0.y };
+  const l1 = { x: v1.x, y: v1.y };
+  const rulerSpace = 50 * viewScale;
+  const lineSpace = 25 * viewScale;
+  let rulerLines = [],
+    rulerData = [],
+    baseItems = [],
+    wallItems = [],
+    basePosArray = [
+      { x: width / 2, y: height / 2 },
+      { x: -width / 2, y: height / 2 }
+    ],
+    wallPosArray = [
+      { x: -width / 2, y: -height / 2 },
+      { x: width / 2, y: -height / 2 }
+    ],
+    left_count = 0,
+    right_count = 0,
+    leftBaseItems = [],
+    rightBaseItems = [],
+    leftWallItems = [],
+    rightWallItems = [],
+    toler_unit = 'mm';
+
+  // get length between 2 points
+  const getLength = (vertex0, vertex1) => {
+    return Math.sqrt(
+      Math.pow(vertex0.x - vertex1.x, 2) + Math.pow(vertex0.y - vertex1.y, 2)
+    );
+  };
+
+  // determin if this line(vertex0, vertex1) is snapped into wall
+  const isSnapped = (vertex0, vertex1) => {
+    let itemSnapped = false;
+    let delta = GeometryUtils.distancePointFromLineSegment(
+      l0,
+      l1,
+      (vertex0.x + vertex1.x) / 2,
+      (vertex0.y + vertex1.y) / 2
+    );
+    if (delta < DISTANCE_EPSILON) {
+      itemSnapped = true;
+    }
+    return itemSnapped;
+  };
+
+  // get array of wallItem and baseITem in layer
+  layer.items.forEach(item => {
+    let val = {
+      pos: { x: item.x, y: item.y },
+      rotRad: (item.rotation / 180) * Math.PI
+    };
+    let catid = item.type;
+    let cat = catalog.elements[catid];
+    if (!cat) cat = catalog.elements[returnReplaceableDeepSearchType(catid)];
+    let width = convert(item.properties.getIn(['width', '_length']))
+      .from(item.properties.getIn(['width', '_unit']))
+      .to(scene.unit);
+    let height = convert(item.properties.getIn(['height', '_length']))
+      .from(item.properties.getIn(['height', '_unit']))
+      .to(scene.unit);
+    let depth = convert(item.properties.getIn(['depth', '_length']))
+      .from(item.properties.getIn(['depth', '_unit']))
+      .to(scene.unit);
+    let altitude = convert(item.properties.getIn(['altitude', '_length']))
+      .from(item.properties.getIn(['altitude', '_unit']))
+      .to(scene.unit);
+    val.size = { width, height, depth, altitude };
+    val.layoutpos = cat && cat.info.layoutpos;
+    val.is_corner = cat && cat.info.is_corner;
+    val.item = item.toJS();
+    let calcrect = GeometryUtils.getCalcRectFromItem3D(val);
+
+    if (
+      isSnapped(calcrect.rect[3], calcrect.rect[2]) ||
+      isSnapped(calcrect.rect[2], calcrect.rect[1]) ||
+      isSnapped(calcrect.rect[0], calcrect.rect[3])
+    ) {
+      if (calcrect.itemInfo.properties.altitude.length) {
+        wallItems.push(calcrect);
+      } else {
+        baseItems.push(calcrect);
+      }
+    }
+  });
+
+  // sort function
+  const sortFunc = (a, b) => {
+    return a.pos.x - b.pos.x;
+  };
+  const negSortFunc = (a, b) => -sortFunc(a, b);
+
+  // get item's pos array about baseItem, then sort - baseItems' order is right: (width/2) -> left: (-width/2)
+  if (baseItems.length) {
+    baseItems.forEach(item => {
+      let vertex0, vertex1;
+      if (isSnapped(item.rect[3], item.rect[2])) {
+        vertex0 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[3], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: height / 2
+        };
+        vertex1 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[2], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: height / 2
+        };
+      } else if (isSnapped(item.rect[2], item.rect[1])) {
+        vertex0 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[2], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: height / 2
+        };
+        vertex1 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[1], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: height / 2
+        };
+      } else if (isSnapped(item.rect[0], item.rect[3])) {
+        vertex0 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[0], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: height / 2
+        };
+        vertex1 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[3], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: height / 2
+        };
+      }
+      basePosArray.push(vertex0);
+      basePosArray.push(vertex1);
+
+      // determin which side(left or right) item is closer to. If item is closer to left side, it will be included in leftBaseITems
+      let distLeft = getLength(item.pos, v0);
+      let distRight = getLength(item.pos, v1);
+      if (distLeft < distRight) {
+        leftBaseItems.push(item);
+      } else {
+        rightBaseItems.push(item);
+      }
+    });
+  }
+  basePosArray.sort((a, b) => {
+    return b.x - a.x;
+  });
+
+  // get item's pos array about wallItem, then sort - wallItems' order is left: (-width/2) -> right: (width/2)
+  if (wallItems.length) {
+    wallItems.forEach(item => {
+      let vertex0, vertex1;
+      if (isSnapped(item.rect[3], item.rect[2])) {
+        vertex0 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[3], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: -height / 2
+        };
+        vertex1 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[2], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: -height / 2
+        };
+      } else if (isSnapped(item.rect[2], item.rect[1])) {
+        vertex0 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[2], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: -height / 2
+        };
+        vertex1 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[1], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: -height / 2
+        };
+      } else if (isSnapped(item.rect[0], item.rect[3])) {
+        vertex0 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[0], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: -height / 2
+        };
+        vertex1 = {
+          x:
+            -frontRect.width / 2 +
+            convert(getLength(item.rect[3], v0)).from('cm').to(layer.unit) *
+              scale,
+          y: -height / 2
+        };
+      }
+      wallPosArray.push(vertex0);
+      wallPosArray.push(vertex1);
+
+      // determin which side(left or right) item is closer to. If item is closer to left side, it will be included in leftBaseITems
+      let distLeft = getLength(item.pos, v0);
+      let distRight = getLength(item.pos, v1);
+      if (distLeft < distRight) {
+        rightWallItems.push(item);
+      } else {
+        leftWallItems.push(item);
+      }
+    });
+  }
+  wallPosArray.sort((a, b) => {
+    return a.x - b.x;
+  });
+
+  // leftItems = leftBaseItems + inverted leftWallItems : Here, it's different between BaseItem's order and WallItem's order
+  leftBaseItems.sort(sortFunc);
+  leftWallItems.sort(negSortFunc);
+
+  rightBaseItems.sort(negSortFunc);
+  rightWallItems.sort(sortFunc);
+  let leftItems = leftBaseItems.concat(leftWallItems);
+  let rightItems = rightBaseItems.concat(rightWallItems);
+
+  // To display side dimensions, set rulerLines about leftItems
+  leftItems.forEach((item, idx) => {
+    let forwardItems = [];
+    let distLine = 0;
+    let itemHeight = convert(item.size.height).from(scene.unit).to(layer.unit);
+    for (let i = 0; i < idx; i++) {
+      forwardItems.push(leftItems[i]);
+    }
+    if (
+      !forwardItems.filter(
+        it =>
+          it.itemInfo.properties.altitude._length ===
+            item.itemInfo.properties.altitude._length &&
+          it.itemInfo.properties.height._length ===
+            item.itemInfo.properties.height._length
+      ).length
+    ) {
+      if (item.itemInfo.properties.altitude._length) {
+        if (isSnapped(item.rect[3], item.rect[2])) {
+          distLine = convert(getLength(item.rect[2], v1))
+            .from(scene.unit)
+            .to(layer.unit);
+        } else if (isSnapped(item.rect[2], item.rect[1])) {
+          distLine = convert(getLength(item.rect[1], v1))
+            .from(scene.unit)
+            .to(layer.unit);
+        }
+        let itemAltitude = convert(item.size.altitude)
+          .from(scene.unit)
+          .to(layer.unit);
+
+        if (
+          ceilHeight - (itemAltitude + itemHeight) >
+          convert(DELTA).from(toler_unit).to(layer.unit)
+        ) {
+          rulerLines.push({
+            v0: { x: width / 2, y: -height / 2 },
+            v1: {
+              x: width / 2,
+              y: height / 2 - (itemHeight + itemAltitude) * scale
+            },
+            text: formatNumber(
+              ceilHeight - (itemAltitude + itemHeight),
+              DECIMAL_PLACES_2
+            ),
+            space: rulerSpace + right_count * lineSpace
+          });
+        }
+        rulerLines.push({
+          v0: {
+            x: width / 2 - distLine * scale,
+            y: height / 2 - (itemHeight + itemAltitude) * scale
+          },
+          v1: {
+            x: width / 2 - distLine * scale,
+            y: height / 2 - itemAltitude * scale
+          },
+          text: formatNumber(itemHeight, DECIMAL_PLACES_2),
+          space: rulerSpace + distLine * scale + right_count * lineSpace
+        });
+        rulerLines.push({
+          v0: {
+            x: width / 2,
+            y: height / 2 - itemAltitude * scale
+          },
+          v1: { x: width / 2, y: height / 2 },
+          text: formatNumber(itemAltitude, DECIMAL_PLACES_2),
+          space: rulerSpace + right_count * lineSpace
+        });
+        right_count++;
+      } else {
+        if (isSnapped(item.rect[3], item.rect[2])) {
+          distLine = convert(getLength(item.rect[3], v0))
+            .from(scene.unit)
+            .to(layer.unit);
+        } else if (isSnapped(item.rect[2], item.rect[1])) {
+          distLine = convert(getLength(item.rect[2], v0))
+            .from(scene.unit)
+            .to(layer.unit);
+        }
+        rulerLines.push({
+          v0: { x: -width / 2 + distLine * scale, y: height / 2 },
+          v1: {
+            x: -width / 2 + distLine * scale,
+            y: height / 2 - itemHeight * scale
+          },
+          text: formatNumber(itemHeight, DECIMAL_PLACES_2),
+          space: rulerSpace + distLine * scale + left_count * lineSpace
+        });
+        rulerLines.push({
+          v0: { x: -width / 2, y: height / 2 - itemHeight * scale },
+          v1: { x: -width / 2, y: -height / 2 },
+          text: formatNumber(ceilHeight - itemHeight, DECIMAL_PLACES_2),
+          space: rulerSpace + left_count * lineSpace
+        });
+        left_count++;
+      }
+    }
+  });
+
+  // To display side dimensions, set rulerLines about rightItems
+  rightItems.forEach((item, idx) => {
+    let forwardItems = [];
+    let distLine = 0;
+    let itemHeight = convert(item.size.height).from(scene.unit).to(layer.unit);
+    for (let i = 0; i < idx; i++) {
+      forwardItems.push(rightItems[i]);
+    }
+    if (
+      !forwardItems.filter(
+        it =>
+          it.itemInfo.properties.altitude._length ===
+            item.itemInfo.properties.altitude._length &&
+          it.itemInfo.properties.height._length ===
+            item.itemInfo.properties.height._length
+      ).length
+    ) {
+      if (item.itemInfo.properties.altitude._length) {
+        if (isSnapped(item.rect[3], item.rect[2])) {
+          distLine = convert(getLength(item.rect[3], v0))
+            .from(scene.unit)
+            .to(layer.unit);
+        } else if (isSnapped(item.rect[2], item.rect[1])) {
+          distLine = convert(getLength(item.rect[2], v0))
+            .from(scene.unit)
+            .to(layer.unit);
+        }
+        let itemHeight = convert(item.size.height)
+          .from(scene.unit)
+          .to(layer.unit);
+        let itemAltitude = convert(item.size.altitude)
+          .from(scene.unit)
+          .to(layer.unit);
+        rulerLines.push({
+          v0: { x: -width / 2, y: height / 2 },
+          v1: {
+            x: -width / 2,
+            y: height / 2 - itemAltitude * scale
+          },
+          text: formatNumber(itemAltitude, DECIMAL_PLACES_2),
+          space: rulerSpace + left_count * lineSpace
+        });
+        rulerLines.push({
+          v0: {
+            x: -width / 2 + distLine * scale,
+            y: height / 2 - itemAltitude * scale
+          },
+          v1: {
+            x: -width / 2 + distLine * scale,
+            y: height / 2 - (itemAltitude + itemHeight) * scale
+          },
+          text: formatNumber(itemHeight, DECIMAL_PLACES_2),
+          space: rulerSpace + +distLine * scale + left_count * lineSpace
+        });
+        if (
+          ceilHeight - (itemAltitude + itemHeight) >
+          convert(DELTA).from(toler_unit).to(layer.unit)
+        ) {
+          rulerLines.push({
+            v0: {
+              x: -width / 2,
+              y: height / 2 - (itemAltitude + itemHeight) * scale
+            },
+            v1: { x: -width / 2, y: -height / 2 },
+            text: formatNumber(
+              ceilHeight - (itemAltitude + itemHeight),
+              DECIMAL_PLACES_2
+            ),
+            space: rulerSpace + left_count * lineSpace
+          });
+        }
+
+        left_count++;
+      } else {
+        if (isSnapped(item.rect[3], item.rect[2])) {
+          distLine = convert(getLength(item.rect[2], v1))
+            .from(scene.unit)
+            .to(layer.unit);
+        } else if (isSnapped(item.rect[2], item.rect[1])) {
+          distLine = convert(getLength(item.rect[1], v1))
+            .from(scene.unit)
+            .to(layer.unit);
+        }
+        rulerLines.push({
+          v0: { x: width / 2, y: -height / 2 },
+          v1: { x: width / 2, y: height / 2 - itemHeight * scale },
+          text: formatNumber(ceilHeight - itemHeight, DECIMAL_PLACES_2),
+          space: rulerSpace + right_count * lineSpace
+        });
+        rulerLines.push({
+          v0: {
+            x: width / 2 - distLine * scale,
+            y: height / 2 - itemHeight * scale
+          },
+          v1: { x: width / 2 - distLine * scale, y: height / 2 },
+          text: formatNumber(itemHeight, DECIMAL_PLACES_2),
+          space: rulerSpace + distLine * scale + right_count * lineSpace
+        });
+        right_count++;
+      }
+    }
+  });
+
+  // To display wall line dimensions, set rulerLines
+  rulerLines.push({
+    v0: { x: width / 2, y: -height / 2 },
+    v1: { x: width / 2, y: height / 2 },
+    text: ceilHeight,
+    space: rulerSpace + lineSpace * right_count
+  });
+  rulerLines.push({
+    v0: { x: -width / 2, y: height / 2 },
+    v1: { x: -width / 2, y: -height / 2 },
+    text: ceilHeight,
+    space: rulerSpace + lineSpace * left_count
+  });
+  rulerLines.push({
+    v0: { x: width / 2, y: height / 2 },
+    v1: { x: -width / 2, y: height / 2 },
+    text: formatNumber(lineLength, DECIMAL_PLACES_2),
+    space: rulerSpace + (baseItems.length ? lineSpace : 0)
+  });
+  rulerLines.push({
+    v0: { x: -width / 2, y: -height / 2 },
+    v1: { x: width / 2, y: -height / 2 },
+    text: formatNumber(lineLength, DECIMAL_PLACES_2),
+    space: rulerSpace + (wallItems.length ? lineSpace : 0)
+  });
+
+  // To display wallItems dimensions, set rulerLines with wallPosArray
+  if (wallItems.length) {
+    for (let i = 0; i < wallPosArray.length - 1; i++) {
+      let dist = getLength(wallPosArray[i], wallPosArray[i + 1]) / scale;
+      rulerLines.push({
+        v0: wallPosArray[i],
+        v1: wallPosArray[i + 1],
+        space: rulerSpace,
+        text: formatNumber(dist, DECIMAL_PLACES_2)
+      });
+    }
+  }
+
+  // To display baseItems dimensions, set rulerLines with basePosArray
+  if (baseItems.length) {
+    for (let j = 0; j < basePosArray.length - 1; j++) {
+      let dist = getLength(basePosArray[j], basePosArray[j + 1]) / scale;
+      rulerLines.push({
+        v0: basePosArray[j],
+        v1: basePosArray[j + 1],
+        space: rulerSpace,
+        text: formatNumber(dist, DECIMAL_PLACES_2)
+      });
+    }
+  }
+
+  rulerLines.forEach(line => {
+    if (isNonZeroText(line.text))
+      rulerData.push(
+        <Ruler3D
+          line={line}
+          layer={layer}
+          viewScale={viewScale}
+          downloadFlag={downloadFlag}
+        />
+      );
+  });
+
+  return <g opacity={layer.opacity}>{rulerData}</g>;
+}