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

package/src/components/viewer2d/snap.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Geometry from '../../utils/geometry';
+
+const STYLE = {
+  stroke: '#D32F2F',
+  strokeWidth: '1px'
+};
+
+export default function ActiveDrawingHelper({ snap, width, height }) {
+  switch (snap.type) {
+    case 'point':
+      return (
+        <g transform={`translate(${snap.x} ${snap.y})`}>
+          <line
+            name="line_type_ActiveDrawingHelper"
+            x1="0"
+            y1="-70"
+            x2="0"
+            y2="70"
+            style={STYLE}
+          />
+          <line
+            name="line_type_ActiveDrawingHelper"
+            x1="-70"
+            y1="0"
+            x2="70"
+            y2="0"
+            style={STYLE}
+          />
+        </g>
+      );
+
+    case 'line':
+      let h0 = Geometry.horizontalLine(0);
+      let h1 = Geometry.horizontalLine(height);
+      let pointH0 = Geometry.twoLinesIntersection(
+        snap.a,
+        snap.b,
+        snap.c,
+        h0.a,
+        h0.b,
+        h0.c
+      );
+      let pointH1 = Geometry.twoLinesIntersection(
+        snap.a,
+        snap.b,
+        snap.c,
+        h1.a,
+        h1.b,
+        h1.c
+      );
+
+      let v0 = Geometry.verticalLine(0);
+      let v1 = Geometry.verticalLine(width);
+      let pointV0 = Geometry.twoLinesIntersection(
+        snap.a,
+        snap.b,
+        snap.c,
+        v0.a,
+        v0.b,
+        v0.c
+      );
+      let pointV1 = Geometry.twoLinesIntersection(
+        snap.a,
+        snap.b,
+        snap.c,
+        v1.a,
+        v1.b,
+        v1.c
+      );
+
+      if (pointH0 && pointH1)
+        return (
+          <line
+            name="line_type_ActiveDrawingHelper"
+            x1={pointH0.x}
+            y1={pointH0.y}
+            x2={pointH1.x}
+            y2={pointH1.y}
+            style={STYLE}
+          />
+        );
+      if (pointV0 && pointV1)
+        return (
+          <line
+            name="line_type_ActiveDrawingHelper"
+            x1={pointV0.x}
+            y1={pointV0.y}
+            x2={pointV1.x}
+            y2={pointV1.y}
+            style={STYLE}
+          />
+        );
+      return null;
+
+    case 'line-segment':
+      return (
+        <line
+          name="line_type_ActiveDrawingHelper"
+          x1={snap.x1}
+          y1={snap.y1}
+          x2={snap.x2}
+          y2={snap.y2}
+          style={STYLE}
+        />
+      );
+
+    default:
+      return null;
+  }
+}
+
+ActiveDrawingHelper.propTypes = {
+  snap: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
+};

package/src/components/viewer2d/state.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Scene from './scene';
+import Snap from './snap';
+import * as SharedStyle from '../../shared-style';
+const guideStyle = {
+  stroke: SharedStyle.SECONDARY_COLOR.main,
+  strokewidth: '2.5px'
+};
+
+export default function State({ state, catalog, relatedLines }) {
+  let { activeSnapElement, snapElements, scene } = state;
+  let { width, height } = scene;
+  activeSnapElement = activeSnapElement ? (
+    <Snap snap={activeSnapElement} width={scene.width} height={scene.height} />
+  ) : null;
+  // snapElements = snapElements.map((snap,id) => <Snap key={id} snap={snap} width={scene.width} height={scene.height}/>);
+  snapElements = null; //only for debug purpose
+
+  return (
+    <g>
+      <rect
+        x="0"
+        y="0"
+        width={width}
+        height={height}
+        fill={SharedStyle.COLORS.white}
+      />
+      <g
+        transform={`translate(0, ${scene.height}) scale(1, -1)`}
+        id="svg-drawing-paper"
+      >
+        <Scene
+          scene={scene}
+          state={state}
+          catalog={catalog}
+          relatedLines={relatedLines}
+        />
+        {scene
+          .getIn(['guides', 'horizontal'])
+          .entrySeq()
+          .map(([hgKey, hgVal]) => (
+            <line
+              id={'hGuide' + hgKey}
+              key={hgKey}
+              x1={0}
+              y1={hgVal}
+              x2={width}
+              y2={hgVal}
+              style={guideStyle}
+            />
+          ))}
+        {scene
+          .getIn(['guides', 'vertical'])
+          .entrySeq()
+          .map(([vgKey, vgVal]) => (
+            <line
+              key={vgKey}
+              x1={vgVal}
+              y1={0}
+              x2={vgVal}
+              y2={height}
+              style={guideStyle}
+            />
+          ))}
+        {activeSnapElement}
+        {snapElements}
+      </g>
+    </g>
+  );
+}
+
+State.propTypes = {
+  state: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired,
+  relatedLines: PropTypes.object.isRequired
+};

package/src/components/viewer2d/utils.js

@@ -0,0 +1,195 @@
+import { isImmutable, toPlainObject } from '../../utils/helper';
+import {
+  INSTALLATION_SUFFIX_TYPE,
+  INSTALLATION_TYPE_NAME,
+  INSTALLATION_TYPE_SKU_SUFFIX,
+  TOE_KICK_MOLDING
+} from '../../constants';
+
+export const searchForSkuValue = (catalog, selectedLayer, elementType) => {
+  return new Promise(resolve => {
+    if (elementType) {
+      Object.values(catalog.elements).forEach(value => {
+        if (value.obj && value.obj.skuArray) {
+          if (value.obj.skuArray.find(skItem => skItem.sku === elementType)) {
+            saveDeepSearchType(elementType, value.name);
+            resolve({
+              isAvailable: true,
+              rootType: value.name
+            });
+          }
+        }
+      });
+    } else {
+      selectedLayer.items.valueSeq().forEach(item => {
+        Object.values(catalog.elements).forEach(value => {
+          if (value.obj && value.obj.skuArray) {
+            if (value.obj.skuArray.find(skItem => skItem.sku === item.type)) {
+              resolve({
+                isAvailable: true,
+                rootType: value.name
+              });
+            }
+          }
+        });
+      });
+    }
+
+    resolve({
+      isAvailable: false
+    });
+  });
+};
+
+export const returnReplaceableDeepSearchType = type => {
+  const DeepSearchTypes =
+    JSON.parse(sessionStorage.getItem('deepSearchTypes')) || [];
+  const replaceableType = DeepSearchTypes.find(item => item.type === type);
+  return (replaceableType && replaceableType.foundType) || '';
+};
+
+export function getInstallationSuffix(type, doorColor = {}) {
+  if (!doorColor) {
+    console.error(
+      'getInstallationSuffix received false argument : ',
+      doorColor
+    );
+    return doorColor;
+  }
+
+  doorColor = toPlainObject(doorColor);
+
+  // If doorColor.isAssembled is explicitly set → trust it.
+  // Else → fall back to checking install.
+  const isAssembled =
+    doorColor.isAssembled ??
+    doorColor.install?.toLowerCase() ===
+      INSTALLATION_TYPE_NAME.ASSEMBLED.toLowerCase();
+
+  if (type === INSTALLATION_SUFFIX_TYPE.SKU) {
+    return isAssembled
+      ? INSTALLATION_TYPE_SKU_SUFFIX.ASSEMBLED
+      : INSTALLATION_TYPE_SKU_SUFFIX.RTA;
+  } else {
+    return isAssembled
+      ? INSTALLATION_TYPE_NAME.ASSEMBLED
+      : INSTALLATION_TYPE_NAME.RTA;
+  }
+}
+
+export function isEqualInstallationType(doorColor1, doorColor2) {
+  return (
+    getInstallationSuffix(
+      INSTALLATION_SUFFIX_TYPE.NAME,
+      doorColor1
+    )?.toLowerCase() ===
+    getInstallationSuffix(
+      INSTALLATION_SUFFIX_TYPE.NAME,
+      doorColor2
+    )?.toLowerCase()
+  );
+}
+
+function buildSKU(baseSKU, doorColor = {}) {
+  const colorSuffix = doorColor.color_sku_alias || doorColor.sku || '';
+  const installationSuffix = getInstallationSuffix(
+    INSTALLATION_SUFFIX_TYPE.SKU,
+    doorColor
+  );
+  return [baseSKU, colorSuffix, installationSuffix].filter(Boolean).join('-');
+}
+
+function buildToeKickSKU(doorColor = {}, catalog = {}) {
+  // Base toe kick SKU (can be swapped between ['TKC', 'TK8', 'TK96'])
+  const baseSKU = getToeKickSKU(doorColor, catalog);
+  if (baseSKU === false) return false;
+
+  return buildSKU(baseSKU, doorColor);
+}
+
+function buildRegularSKU(element, catalog, doorColor = {}) {
+  // Try to resolve element in catalog
+  let _element =
+    catalog.elements[element.type] ||
+    catalog.elements[returnReplaceableDeepSearchType(element.type)];
+  if (!_element) return false;
+
+  // Start from default SKU
+  let internal_sku = _element.obj.sku_number;
+
+  // Override with SKU matching door color if found
+  const tempSKU = _element.obj.skuArray.find(
+    el => el.door_color_id === doorColor.id
+  );
+  if (tempSKU?.sku) {
+    internal_sku = tempSKU.sku;
+  }
+
+  // Normalize left/right variants
+  internal_sku = internal_sku?.replace(/-([RL])$/, '');
+
+  // Reuse generic builder for suffixes
+  return buildSKU(internal_sku, doorColor);
+}
+
+// element : cabinet
+// catalog : all cabinet info
+export function makeSKUForMagento(element, catalog, categoryData) {
+  if (element.category?.toLowerCase().includes('molding')) {
+    element.type = element.name;
+  }
+
+  const doorColor = toPlainObject(element.doorStyle);
+  if (!doorColor) return false;
+
+  return element.name === TOE_KICK_MOLDING
+    ? buildToeKickSKU(doorColor, catalog)
+    : buildRegularSKU(element, catalog, doorColor);
+}
+
+export function isEmpty(value) {
+  if (
+    value === undefined ||
+    value === null ||
+    (typeof value === 'object' && Object.keys(value).length === 0) ||
+    (typeof value === 'string' && value.trim().length === 0)
+  )
+    return true;
+  else return false;
+}
+
+const saveDeepSearchType = (type, foundType) => {
+  const DeepSearchTypes =
+    JSON.parse(sessionStorage.getItem('deepSearchTypes')) || [];
+  const isAlreadyAvailable = DeepSearchTypes.find(item => item.type === type);
+  if (!isAlreadyAvailable) {
+    DeepSearchTypes.push({ type, foundType });
+  }
+
+  sessionStorage.setItem('deepSearchTypes', JSON.stringify(DeepSearchTypes));
+};
+
+/**
+ * @param {Boolean} flag true: for thumbnail, false: default value
+ * @returns
+ */
+export const getToeKickSKU = (doorColor = {}, catalog = {}, flag = false) => {
+  const catalogData = catalog.elements || [];
+  const itemDoorColorID = doorColor?.id || [];
+  let skuData = '';
+  Object.keys(catalogData).forEach(data => {
+    const obj = catalogData[data].obj;
+    if (obj?.cabinet_category === TOE_KICK_MOLDING) {
+      const found = obj.skuArray?.find(
+        cData => cData.door_color_id === itemDoorColorID
+      );
+      if (found) {
+        skuData = flag ? data : found?.sku;
+      }
+    }
+  });
+
+  if (!skuData) return false;
+
+  return skuData;
+};

package/src/components/viewer2d/vertex.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+import { LINE_THICKNESS } from '../../../src/constants';
+//Space from the center of the point(Use cases:x - vertexthickness,y + vertexthickness )
+let vertexthickness = 4;
+const STYLE = {
+  // strokeWidth: 5,
+  strokeLinejoin: 'round',
+  rx: '2px',
+  stroke: SharedStyle.LINE_MESH_COLOR.selected,
+  fill: SharedStyle.LINE_MESH_COLOR.selected,
+  cursor: 'move'
+};
+
+export default function Vertex({ vertex, layer }) {
+  let { x, y } = vertex;
+  let relatedVertice = { x, y };
+
+  if (vertex.lines.get(0)) {
+    let line = layer.lines.get(vertex.lines.get(0));
+    if (
+      layer.lines.get(vertex.lines.get(1)) !== undefined &&
+      layer.lines.get(vertex.lines.get(1)).get('selected')
+    ) {
+      line = layer.lines.get(vertex.lines.get(1));
+    }
+
+    if (line) {
+      const index = line.vertices.findIndex(a => a === vertex.id);
+      if (index > -1) {
+        const vertice = line.relatedVertices
+          .filter(a => {
+            if (a['index'] === undefined) {
+              return a.get('index') === index;
+            } else if (a['index'] !== undefined) {
+              return a.index === index;
+            }
+          })
+          .get(0);
+        if (vertice && !vertice['point']) {
+          relatedVertice = {
+            x: vertice.get('point').get('x'),
+            y: vertice.get('point').get('y')
+          };
+        } else if (vertice !== undefined) {
+          relatedVertice = vertice['point'];
+        }
+      }
+    }
+  }
+
+  return (
+    <g
+      data-element-root
+      data-prototype={vertex.prototype}
+      data-id={vertex.id}
+      data-selected={vertex.selected}
+      data-layer={layer.id}
+    >
+      {/* <polygon
+        points={`${relatedVertice.x},${relatedVertice.y} ${relatedVertice.x},${y} ${x},${y} ${x},${relatedVertice.y}`}
+        style={STYLE}
+      ></polygon> */}
+      <polygon
+        points={`${x - vertexthickness},${y + vertexthickness } ${x -vertexthickness },${y - vertexthickness} ${x + vertexthickness},${y - vertexthickness} ${x + vertexthickness},${y + vertexthickness}`}
+        style={STYLE}
+      ></polygon>
+    </g>
+  );
+}
+
+Vertex.propTypes = {
+  vertex: PropTypes.object.isRequired,
+  layer: PropTypes.object.isRequired
+};