kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

package/src/components/toolbar/popup/downloadsummary/show2D/viewer2DDownLoad.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef } from 'react';
+import { ReactSVGPanZoom } from 'react-svg-pan-zoom';
+import State from '../../../../viewer2d/state';
+import { getSignedUrl } from '../../../../../utils/helper';
+
+const Viewer2DDownLoad = ({ state, catalog, width, height }) => {
+  const Viewer = useRef(null);
+
+  useEffect(() => {
+    // move viewer point to center
+    let selectedLayer = state.scene.layers.get(state.scene.selectedLayer);
+    const vertices = selectedLayer.vertices;
+
+    if (vertices.isEmpty()) {
+      return;
+    }
+
+    let bottomX = 0,
+      bottomY = 100000,
+      topX = 100000,
+      topY = 0;
+
+    vertices.forEach(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;
+    });
+
+    let width = bottomX - topX;
+    let height = topY - bottomY;
+    let scale = Math.min(786 / width, 700 / height);
+    let moveX = topX + width / 2;
+    let moveY = 2000 - (bottomY + height / 2);
+
+    Viewer.current.setPointOnViewerCenter(moveX, moveY, scale * 0.62);
+
+    saveSVGScreenshotToFile();
+
+    return () => (window.pdf2DPlain = '');
+  }, []);
+
+  const saveSVGScreenshotToFile = async () => {
+    // First of all I need the svg content of the viewer
+    let svgElements1 = document.getElementById('viewer2d_download');
+
+    if (svgElements1 !== null) {
+      let svgElements = svgElements1.getElementsByTagName('svg');
+
+      // I get the element with max width (which is the viewer)
+      let maxWidthSVGElement = svgElements[0];
+      // let maxWidthSVGElement = document.getElementById("viewer2d_download");
+      for (let i = 1; i < svgElements.length; i++) {
+        if (
+          svgElements[i].width.baseVal.value >
+          maxWidthSVGElement.width.baseVal.value
+        ) {
+          maxWidthSVGElement = svgElements[i];
+        }
+      }
+      // Begin: Change Image tags' href to local data src
+      let images = maxWidthSVGElement.getElementsByTagName('image');
+
+      let readBlob = b => {
+        return new Promise(res => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            res(reader.result);
+          };
+          reader.onerror = () => {
+            res(b);
+          };
+          reader.readAsDataURL(b);
+        });
+      };
+
+      try {
+        let imagePromises = Array.from(images).map(async image => {
+          image.setAttribute('crossorigin', 'anonymous');
+          const url = getSignedUrl(image.getAttribute('href'));
+          const response = await fetch(url, { cache: 'no-store' });
+          const blob = await response.blob();
+          const content = await readBlob(blob);
+          image.setAttribute('href', content);
+        });
+
+        await Promise.all(imagePromises); // 💡 wait for all images to be ready
+      } catch (e) {
+        console.error(
+          '[Download 2D View of PDF] Error loading images for SVG:',
+          e
+        );
+      }
+      // End: Change Image tags' href to local data src
+
+      let serializer = new XMLSerializer();
+
+      let img = new Image();
+
+      // I create the new canvas to draw
+      let canvas42DPlain = document.createElement('canvas');
+      // let canvas = document.getElementById('canvas_crop_image');
+      let ctx = canvas42DPlain.getContext('2d');
+
+      // Set width and height for the new canvas
+      let heightAtt = document.createAttribute('height');
+      heightAtt.value = maxWidthSVGElement.height.baseVal.value;
+      canvas42DPlain.setAttributeNode(heightAtt);
+
+      let widthAtt = document.createAttribute('width');
+      widthAtt.value = maxWidthSVGElement.width.baseVal.value;
+      canvas42DPlain.setAttributeNode(widthAtt);
+
+      ctx.fillStyle = 'white';
+      ctx.fillRect(0, 0, canvas42DPlain.width, canvas42DPlain.height);
+
+      img.crossOrigin = 'anonymous';
+      img.src = `data:image/svg+xml;base64,${window.btoa(
+        serializer.serializeToString(maxWidthSVGElement)
+      )}`;
+
+      img.onload = () => {
+        ctx.globalAlpha = 1;
+        ctx.drawImage(
+          img,
+          0,
+          0,
+          maxWidthSVGElement.width.baseVal.value,
+          maxWidthSVGElement.height.baseVal.value
+        );
+
+        window.pdf2DPlain = canvas42DPlain.toDataURL();
+      };
+    } else {
+      window.pdf2DPlain = '';
+    }
+  };
+
+  return (
+    <div style={{}} id="viewer2d_download">
+      <ReactSVGPanZoom
+        width={width}
+        height={height}
+        miniaturePosition="none"
+        toolbarPosition="none"
+        ref={Viewer}
+        detectWheel={false}
+        detectAutoPan={false}
+      >
+        <svg width={width} height={height}>
+          <defs>
+            <pattern
+              id="diagonalFill"
+              patternUnits="userSpaceOnUse"
+              width="4"
+              height="4"
+              fill="#FFF"
+            >
+              <rect x="0" y="0" width="4" height="4" fill="#FFF" />
+              <path
+                d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
+                style={{ stroke: '#8E9BA2', strokeWidth: 1 }}
+              />
+            </pattern>
+          </defs>
+          <g>
+            <State state={state} catalog={catalog} relatedLines={[]} />
+          </g>
+        </svg>
+      </ReactSVGPanZoom>
+    </div>
+  );
+};
+
+export default Viewer2DDownLoad;

package/src/components/toolbar/popup/downloadsummary/show3D/show3DView.jsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useState, useContext } from 'react';
+import moment from 'moment';
+import Viewer3D from '../../../../viewer3d/viewer3d';
+import { DEFAULT_FONT_FAMILY, MODE_3D_VIEW } from '../../../../../constants';
+import { DownloadSummaryContext } from './../downloadSummaryContext';
+
+const Show3DView = ({ props, setIsLoading3D }) => {
+  let newState = props.state.set('mode', MODE_3D_VIEW);
+  const summaryContextValue = useContext(DownloadSummaryContext);
+
+  const clientName = (
+    (summaryContextValue?.firstName ?? '') +
+    ' ' +
+    (summaryContextValue?.lastName ?? '')
+  ).trim();
+
+  const projectId = summaryContextValue?.projectId
+    ? `#${summaryContextValue?.projectId}`
+    : '';
+
+  const [hasWall, setHasWall] = useState(true);
+
+  useEffect(() => {
+    let layer = props.state.scene.getIn([
+      'layers',
+      props.state.scene.selectedLayer
+    ]);
+    !layer.lines.size && setHasWall(false);
+  });
+
+  useEffect(() => {
+    return () => (window.pdf3DPlain = '');
+  }, []);
+
+  const saveSVGScreenshotToFile = () => {
+    let canvas2D3DPlain1 = document.getElementById('div_pdf3DPlain');
+
+    if (canvas2D3DPlain1 !== null) {
+      let canvas2D3DPlain = canvas2D3DPlain1.getElementsByTagName('canvas')[0];
+
+      if (canvas2D3DPlain !== undefined) {
+        window.pdf3DPlain = canvas2D3DPlain.toDataURL();
+      }
+    } else {
+      window.pdf3DPlain = '';
+    }
+  };
+
+  const _setIsLoading3D = v => {
+    if (!v) {
+      saveSVGScreenshotToFile();
+    }
+    setIsLoading3D(v);
+  };
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        minHeight: '100%',
+        backgroundColor: '#fff',
+        marginBottom: '10px'
+      }}
+    >
+      {hasWall ? (
+        <div
+          id="div_pdf3DPlain"
+          style={{ transform: `scale(0.5, 0.5)`, width: 0, height: 0 }}
+        >
+          <Viewer3D
+            state={newState}
+            setIsLoading3D={_setIsLoading3D}
+            width={802}
+            height={700}
+            downloadFlag={true}
+          />
+          <div style={{ position: 'absolute', left: '690px', top: '38px' }}>
+            <img
+              id="logo3DPlain"
+              style={{
+                width: '50px',
+                height: '50px'
+              }}
+              src={'/assets/img/loading/loading.gif'}
+              alt="img"
+            />
+          </div>
+        </div>
+      ) : (
+        <div style={styles.noWall}>
+          <h1>No wall</h1>
+        </div>
+      )}
+      <div
+        style={{
+          padding: hasWall ? '360px 30px 30px 30px' : '30px 30px 30px 30px'
+        }}
+      >
+        <div style={{ alignItems: 'center', padding: '5px 0' }}>
+          <div style={styles.headerInfo}>
+            <span>
+              Created for:
+              <span
+                style={{
+                  color: '#565F77',
+                  fontWeight: '700',
+                  marginLeft: 5
+                }}
+              >
+                {clientName}
+              </span>
+            </span>
+            <span>
+              Date:{' '}
+              <span
+                style={{
+                  color: '#565F77',
+                  fontWeight: '700',
+                  marginLeft: 5
+                }}
+              >
+                {moment(new Date()).format('DD-MM-YYYY')}
+              </span>
+            </span>
+            <span>
+              ID:{' '}
+              <span
+                style={{ color: '#565F77', fontWeight: '700', marginLeft: 5 }}
+              >
+                {projectId}
+              </span>
+            </span>
+          </div>
+          <div
+            style={{ display: 'flex', alignItems: 'center', marginTop: '11px' }}
+          >
+            <div style={{ flex: 5 }}>
+              <div
+                style={{
+                  color: '#000F33',
+                  fontSize: '17px',
+                  fontFamily: DEFAULT_FONT_FAMILY,
+                  fontWeight: '700',
+                  lineHeight: '45.9px',
+                  wordWrap: 'break-word',
+                  margin: '7px 0'
+                }}
+              >
+                {summaryContextValue?.projectTitle ?? ''}
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
+                }}
+              >
+                <span
+                  style={{
+                    textAlign: 'center',
+                    fontFamily: DEFAULT_FONT_FAMILY,
+                    fontWeight: '600',
+                    lineHeight: '15px',
+                    wordWrap: 'break-word',
+                    fontSize: '9px',
+                    color: '#434D63'
+                  }}
+                >
+                  <b>
+                    Summary ID: #{projectId}
+                    {moment(new Date()).format('DD-MM-YYYY')}
+                  </b>
+                </span>
+                <div
+                  style={{ width: 1, height: 14, backgroundColor: '#8791AB' }}
+                ></div>
+                <span
+                  style={{
+                    textAlign: 'center',
+                    fontFamily: DEFAULT_FONT_FAMILY,
+                    fontWeight: '600',
+                    lineHeight: '15px',
+                    wordWrap: 'break-word',
+                    fontSize: '9px',
+                    color: '#434D63'
+                  }}
+                >
+                  <b>Available: {moment(new Date()).format('DD-MM-YYYY')}</b>
+                </span>
+              </div>
+            </div>
+            <div
+              style={{ flex: 2, display: 'flex', justifyContent: 'flex-end' }}
+            >
+              <div style={{ height: 46, width: 46 }}>
+                <img src={props.logoImage} width="100%" height="100%" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style={{
+            margin: '30px 0',
+            textAlign: 'justify',
+            marginBottom: '40px',
+            fontSize: '7px',
+            color: '#565F77'
+          }}
+        >
+          <span
+            style={{
+              // fontSize: '8px',
+              fontFamily: DEFAULT_FONT_FAMILY,
+              fontWeight: '700',
+              lineHeight: '13px',
+              wordWrap: 'break-word'
+            }}
+          >
+            Disclaimer:
+          </span>{' '}
+          <span
+            style={{
+              // fontSize: '8px',
+              fontFamily: DEFAULT_FONT_FAMILY,
+              fontWeight: '400',
+              lineHeight: '13px',
+              wordWrap: 'break-word'
+            }}
+          >
+            DIY Design Space not take responsibility for the accuracy of
+            measurements or furniture arrangements. The prices displayed here
+            apply to items in stock at the time of the offer's issuance. All
+            delivery, assembly, and installation services required are billed
+            are billed separately and are not included in the price. While we
+            strive to ensure the accuracy of the information in this program, we
+            apologize for any errors that may occur.
+          </span>
+        </div>
+        <div style={styles.footer}>
+          <span>© DIY.DS v1.0/2024</span>
+          <span>DIY Design Space® 2024 All rights reserved</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  headerInfo: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    height: '30px',
+    fontFamily: DEFAULT_FONT_FAMILY,
+    color: '#565F77',
+    borderBottom: '1px solid #EAEDFF',
+    fontSize: '7px',
+    fontWeight: '400',
+    lineHeight: '13px',
+    wordWrap: 'break-word'
+  },
+  footer: {
+    padding: '15px 0',
+    borderTop: '1px solid #EAEDFF',
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontFamily: 'Inter',
+    color: '#565F77',
+    fontSize: '7px',
+    lineHeight: '11.2px',
+    wordWrap: 'break-word'
+  },
+  noWall: {
+    width: '400px',
+    height: '350px',
+    backgroundColor: 'lightgrey',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
+
+export default Show3DView;