pcm-shared-components 0.0.45 → 0.0.48

package/dist/components/Buttons/ImageCanvasDraw/index.js

@@ -0,0 +1,183 @@
+import { useState, useRef, useEffect } from 'react';
+import CanvasDraw from "react-canvas-draw";
+import Controls from './components/Controls';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import Button from '@mui/material/Button';
+import { getStorage, setStorage } from './service/local_storage';
+import PropTypes from 'prop-types';
+/**
+ * Displays an image that can is used to draw on to generate maps with highlighted routes.
+ * 
+ * - Requires the ```b64DataUrl``` props to contain a dataUrl string. 
+ * - Returns the ```data``` inside the onSave(data) function passed to the component.
+ *
+ * ### Importing the component
+
+```//PitchCamp shared component
+import {ImageCanvasDraw} from 'pcm-shared-components';
+```
+
+ * 
+ */
+
+const ImageCanvasDraw = props => {
+  const {
+    onSave,
+    outputFormat,
+    showDownloadButton,
+    b64DataUrl
+  } = props;
+  const [state, setState] = useState({
+    drawerOpen: true,
+    color: "darkorange",
+    width: 0,
+    height: 0,
+    brushRadius: 5,
+    lazyRadius: 2,
+    imageScale: 1.5,
+    imageQuality: 0.5,
+    b64DataUrl: b64DataUrl,
+    imageCompressionOptions: {
+      maxSizeMB: 0.4,
+      maxWidthOrHeight: 1920,
+      useWebWorker: true,
+      maxIteration: 10
+    }
+  });
+  const saveableCanvas = useRef();
+
+  const setImageSize = imageUrl => {
+    try {
+      const img = new Image();
+
+      img.onload = () => {
+        //Scale the image down
+        const new_width = Number(img.width) / Number(state.imageScale);
+        const new_height = Number(img.height) / Number(state.imageScale); // Create a temporary canvas to draw the downscaled image on.
+
+        let canvas = document.createElement("canvas");
+        canvas.width = new_width;
+        canvas.height = new_height; // Draw the downscaled image on the canvas and return the new data URL.
+
+        let ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, new_width, new_height);
+        const newDataUrl = canvas.toDataURL("image/jpeg", state.imageQuality);
+        setState(previousState => {
+          return { ...previousState,
+            ...getStorage(),
+            height: new_height,
+            width: new_width,
+            b64DataUrl: newDataUrl
+          };
+        });
+      };
+
+      img.src = imageUrl;
+    } catch (error) {
+      console.error('error in setImageSize', error);
+    }
+  };
+
+  useEffect(() => {
+    //Get the scaled down image and width, height 
+    setImageSize(state.b64DataUrl);
+  }, []);
+  useEffect(() => {
+    if (saveableCanvas && saveableCanvas.current) {
+      //Refresh the canvas each time a props changes
+      saveableCanvas.current.drawImage();
+      setStorage(state);
+    }
+  }, [state]);
+
+  const DrawerButtonOpenClose = ({
+    children
+  }) => /*#__PURE__*/React.createElement(Button, {
+    style: {
+      minWidth: 6,
+      padding: 0,
+      margin: 0
+    },
+    color: "secondary",
+    onClick: () => {
+      setState(previousState => {
+        return { ...previousState,
+          drawerOpen: !previousState.drawerOpen
+        };
+      });
+    }
+  }, children);
+
+  if (state.width && state.width !== 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-row overflow-hidden"
+    }, state.drawerOpen ? /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-row",
+      style: {
+        width: 'auto'
+      }
+    }, /*#__PURE__*/React.createElement(Controls, {
+      state: state,
+      setState: setState,
+      saveableCanvas: saveableCanvas,
+      onSave: onSave,
+      outputFormat: outputFormat,
+      showDownloadButton: showDownloadButton
+    }), /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronLeftIcon, null))) : /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-row justify-end"
+    }, /*#__PURE__*/React.createElement(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronRightIcon, null))), state.width !== 0 && /*#__PURE__*/React.createElement("div", {
+      className: "overflow-scroll"
+    }, /*#__PURE__*/React.createElement(CanvasDraw, {
+      className: "",
+      ref: saveableCanvas,
+      onChange: evt => console.log("onChange", evt) // enablePanAndZoom //Don't enable pan and zoom or else it gets too complicated when saving...
+      // zoomExtents={{ min: 0.33, max: 10 }}
+      ,
+      clampLinesToDocument: true,
+      hideInterface: false,
+      hideGrid: false,
+      backgroundColor: 'rgba(34,34,34,0.2)',
+      brushColor: state.color,
+      brushRadius: state.brushRadius,
+      lazyRadius: state.lazyRadius,
+      canvasWidth: Number(state.width) / Number(state.imageScale),
+      canvasHeight: Number(state.height) / Number(state.imageScale),
+      catenaryColor: 'black',
+      gridColor: "#ccc",
+      imgSrc: state.b64DataUrl
+    })));
+  } else {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "loading...");
+  }
+};
+
+export default ImageCanvasDraw;
+ImageCanvasDraw.defaultProps = {
+  onSave: undefined,
+  outputFormat: 'blob',
+  showDownloadButton: undefined,
+  b64DataUrl: undefined
+};
+ImageCanvasDraw.propTypes = {
+  /** On save function to execute returns either base64 or blob format based on the output format specified 
+   * 
+   * - onSave(data) data is either a **``blob``** or a **``base64``**
+   
+   ```
+     onSave = (data) =>{
+    
+    }
+    ```
+  */
+  onSave: PropTypes.func,
+
+  /** Specified the type of data the onSave function will return */
+  outputFormat: PropTypes.oneOf(['blob', 'base64']),
+
+  /** If specified then we show the download button which is mainly used for testing to display what the canvas is exporting */
+  showDownloadButton: PropTypes.bool,
+
+  /** This is the image in a base 64 url format to use as the base image to draw on */
+  b64DataUrl: PropTypes.string.isRequired
+};

package/dist/components/Buttons/ImageCanvasDraw/service/image_tools.js

@@ -0,0 +1,37 @@
+export const combineDrawing = canvasRef => {
+  try {
+    const width = canvasRef.current.props.canvasWidth;
+    const height = canvasRef.current.props.canvasHeight;
+    const background = canvasRef.current.canvasContainer.children[0]; // const test = canvasRef.current.canvasContainer.children[0]; 
+
+    const drawing = canvasRef.current.canvasContainer.children[1];
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height; // composite now
+
+    canvas.getContext('2d').drawImage(background, 0, 0);
+    canvas.getContext('2d').globalAlpha = 1.0;
+    canvas.getContext('2d').drawImage(drawing, 0, 0); // canvas.getContext('2d').drawImage(test, 0, 0);
+
+    const dataUri = canvas.toDataURL('image/jpeg', 1.0);
+    const data = dataUri.split(',')[1];
+    const mimeType = dataUri.split(';')[0].slice(5);
+    const bytes = window.atob(data);
+    const buf = new ArrayBuffer(bytes.length);
+    const arr = new Uint8Array(buf);
+
+    for (let i = 0; i < bytes.length; i++) {
+      arr[i] = bytes.charCodeAt(i);
+    }
+
+    const blob = new Blob([arr], {
+      type: mimeType
+    });
+    return {
+      blob: blob,
+      dataUri: dataUri
+    };
+  } catch (error) {
+    console.error('Error in combineDrawing: ', error);
+  }
+};

package/dist/components/Buttons/ImageCanvasDraw/service/local_storage.js

@@ -0,0 +1,20 @@
+const STORAGE_NAME = 'PC_IMAGE_DRAW_STATES';
+export const getStorage = () => {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_NAME));
+  } catch (error) {
+    console.error('Error in getting storage for IMAGE Draw:', error);
+    setStorage('');
+  }
+};
+export const setStorage = value => {
+  try {
+    //Need to filter out the b64DataUrl object from the state or else it might slow down the browser...
+    let new_value = Object.fromEntries(Object.entries(value).filter(([key, value]) => key !== 'b64DataUrl'));
+    console.log('debug new_value', new_value);
+    localStorage.setItem(STORAGE_NAME, JSON.stringify(new_value));
+  } catch (error) {
+    console.error('Error in setting storage for IMAGE Draw:', error);
+    setStorage('');
+  }
+};