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

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

@@ -1,175 +0,0 @@
-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

@@ -1,283 +0,0 @@
-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;