kitchen-simulator 5.0.0-test.66 → 5.0.0-test.68

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

@@ -1,528 +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>;
-}
+import React from 'react';
+import Ruler3D from './ruler3D';
+import * as 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>;
+}