pcm-shared-components 0.0.44 → 0.0.47

package/README.md

@@ -1,3 +1,26 @@
 # Shared Components between client and admin portal
 
 The Library is published to NPM on the github build.
+
+# Deploying
+
+- When the code is checked into Github it will publish it automatically if the package.json version is bumped.
+
+# Manual Deploy
+
+Manually deploying is faster then committing the code as it doesn't need to create a ful build.
+
+```shell
+# Must build the Storybook dist folder before manually publishing
+> npm run build
+
+# Edit the package.json file and up he version.
+> npm version patch --force
+
+# Login if not already logged in
+> npm login
+
+# Publish your new library
+> npm publish
+
+```

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

@@ -0,0 +1,207 @@
+import React, { useEffect, useRef } from 'react';
+import tinycolor from "tinycolor2"; // Brush colour and size
+// // Geometry
+// // Drawing functions
+// // Event helpers
+// // Event handlers
+
+export const CanvasPain = () => {
+  const canvas = useRef();
+  let context; //   // Set up our drawing context
+  // // const canvas = document.getElementById("canvas");
+  // canvas.current.width = window.innerWidth;
+  // canvas.current.height = window.innerHeight - 10;
+
+  let colour;
+  const strokeWidth = 40;
+  const varyBrightness = 5; // Drawing state
+
+  let latestPoint;
+  let drawing = false;
+  let currentAngle;
+
+  const mouseDown = evt => {
+    if (drawing) {
+      return;
+    }
+
+    evt.preventDefault();
+    canvas.current.addEventListener("mousemove", mouseMove, false);
+    startStroke([evt.offsetX, evt.offsetY]);
+  };
+
+  const mouseEnter = evt => {
+    if (!mouseButtonIsDown(evt.buttons) || drawing) {
+      return;
+    }
+
+    mouseDown(evt);
+  };
+
+  const endStroke = evt => {
+    if (!drawing) {
+      return;
+    }
+
+    drawing = false;
+    evt.currentTarget.removeEventListener("mousemove", mouseMove, false);
+  };
+
+  const continueStroke = newPoint => {
+    const newAngle = getNewAngle(latestPoint, newPoint, currentAngle);
+    drawStroke(currentBrush, latestPoint, newPoint, currentAngle, newAngle);
+    currentAngle = newAngle % (Math.PI * 2);
+    latestPoint = newPoint;
+  };
+
+  const startStroke = point => {
+    colour = document.getElementById("colourInput").value;
+    currentAngle = undefined;
+    currentBrush = makeBrush(strokeWidth);
+    drawing = true;
+    latestPoint = point;
+  };
+
+  const touchStart = evt => {
+    if (drawing) {
+      return;
+    }
+
+    evt.preventDefault();
+    startStroke(getTouchPoint(evt));
+  };
+
+  const mouseMove = evt => {
+    if (!drawing) {
+      return;
+    }
+
+    continueStroke([evt.offsetX, evt.offsetY]);
+  };
+
+  const touchMove = evt => {
+    if (!drawing) {
+      return;
+    }
+
+    continueStroke(getTouchPoint(evt));
+  };
+
+  const touchEnd = evt => {
+    drawing = false;
+  };
+
+  const varyColour = sourceColour => {
+    const amount = Math.round(Math.random() * 2 * varyBrightness);
+    const c = tinycolor(sourceColour);
+    const varied = amount > varyBrightness ? c.brighten(amount - varyBrightness) : c.darken(amount);
+    return varied.toHexString();
+  };
+
+  const makeBrush = size => {
+    const brush = [];
+    let bristleCount = Math.round(size / 3);
+    const gap = strokeWidth / bristleCount;
+
+    for (let i = 0; i < bristleCount; i++) {
+      const distance = i === 0 ? 0 : gap * i + Math.random() * gap / 2 - gap / 2;
+      brush.push({
+        distance,
+        thickness: Math.random() * 2 + 2,
+        colour: varyColour(colour)
+      });
+    }
+
+    return brush;
+  };
+
+  let currentBrush = makeBrush(strokeWidth);
+
+  const getNewAngle = (origin, destination, oldAngle) => {
+    const bearing = getBearing(origin, destination);
+
+    if (typeof oldAngle === "undefined") {
+      console.log(bearing);
+      return bearing;
+    }
+
+    return oldAngle - angleDiff(oldAngle, bearing);
+  };
+
+  const rotatePoint = (distance, angle, origin) => [origin[0] + distance * Math.cos(angle), origin[1] + distance * Math.sin(angle)];
+
+  const getBearing = (origin, destination) => (Math.atan2(destination[1] - origin[1], destination[0] - origin[0]) - Math.PI / 2) % (Math.PI * 2);
+
+  const angleDiff = (angleA, angleB) => {
+    const twoPi = Math.PI * 2;
+    const diff = (angleA - (angleB > 0 ? angleB : angleB + twoPi) + Math.PI) % twoPi - Math.PI;
+    return diff < -Math.PI ? diff + twoPi : diff;
+  };
+
+  const drawStroke = (bristles, origin, destination, oldAngle, newAngle) => {
+    bristles.forEach(bristle => {
+      context.beginPath();
+      let bristleOrigin = rotatePoint(bristle.distance - strokeWidth / 2, oldAngle, origin);
+      let bristleDestination = rotatePoint(bristle.distance - strokeWidth / 2, newAngle, destination);
+      const controlPoint = rotatePoint(bristle.distance - strokeWidth / 2, newAngle, origin);
+      bristleDestination = rotatePoint(bristle.distance - strokeWidth / 2, newAngle, destination);
+      strokeBristle(bristleOrigin, bristleDestination, bristle, controlPoint);
+    });
+  };
+
+  const strokeBristle = (origin, destination, bristle, controlPoint) => {
+    context.beginPath();
+    context.moveTo(origin[0], origin[1]);
+    context.strokeStyle = bristle.colour;
+    context.lineWidth = bristle.thickness;
+    context.lineCap = "round";
+    context.lineJoin = "round";
+    context.shadowColor = bristle.colour;
+    context.shadowBlur = bristle.thickness / 2;
+    context.quadraticCurveTo(controlPoint[0], controlPoint[1], destination[0], destination[1]);
+    context.lineTo(destination[0], destination[1]);
+    context.stroke();
+  };
+
+  const getTouchPoint = evt => {
+    if (!evt.currentTarget) {
+      return [0, 0];
+    }
+
+    const rect = evt.currentTarget.getBoundingClientRect();
+    const touch = evt.targetTouches[0];
+    console.log(rect, touch);
+    return [touch.clientX - rect.left, touch.clientY - rect.top];
+  };
+
+  const BUTTON = 0b01;
+
+  const mouseButtonIsDown = buttons => (BUTTON & buttons) === BUTTON;
+
+  useEffect(() => {
+    // Register event handlers
+    canvas.current.addEventListener("touchstart", touchStart, false);
+    canvas.current.addEventListener("touchend", touchEnd, false);
+    canvas.current.addEventListener("touchcancel", touchEnd, false);
+    canvas.current.addEventListener("touchmove", touchMove, false);
+    canvas.current.addEventListener("mousedown", mouseDown, false);
+    canvas.current.addEventListener("mouseup", endStroke, false);
+    canvas.current.addEventListener("mouseout", endStroke, false);
+    canvas.current.addEventListener("mouseenter", mouseEnter, false);
+    context = canvas.current.getContext("2d");
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
+    id: "canvas",
+    ref: canvas,
+    height: "450",
+    width: "800",
+    style: {
+      backgroundColor: 'yellow'
+    }
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    id: "colourInput",
+    value: "#3d34a5"
+  }));
+};
+export default CanvasPain;

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

@@ -0,0 +1,191 @@
+import React from 'react';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
+import { combineDrawing } from '../service/image_tools';
+import imageCompression from 'browser-image-compression';
+import { ChromePicker } from 'react-color';
+import Button from '@mui/material/Button';
+import { OUTPUT_TYPES } from '.././constants';
+const imageScaleMarks = [{
+  value: 1.5,
+  label: 'Full'
+}, {
+  value: 2,
+  label: 'Medium'
+}, {
+  value: 2.5,
+  label: 'Small'
+}];
+export const downloadImage = (blob, filename = `pitchcamp_${new Date().toString()}.jpg`) => {
+  //Used for testing
+  const a = document.createElement('a');
+  document.body.appendChild(a);
+  a.style = 'display: none';
+  const url = window.URL.createObjectURL(blob);
+  a.href = url;
+  a.download = filename;
+  a.click();
+  window.URL.revokeObjectURL(url);
+};
+export const toBase64 = async blob => {
+  try {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    return await new Promise(resolve => {
+      reader.onloadend = () => {
+        resolve(reader.result);
+      };
+    });
+  } catch (error) {
+    console.error('Error in toBase64 function of hte ImageCanvasDraw component: ', error);
+  }
+};
+
+function valueLabelFormat(value) {
+  return imageScaleMarks.findIndex(mark => mark.value === value) + 0.5;
+}
+
+const exportImage = async (thisFunction, saveableCanvas, outputFormat, imageCompressionOptions) => {
+  try {
+    const {
+      blob,
+      dataUri
+    } = combineDrawing(saveableCanvas);
+    imageCompression(blob, imageCompressionOptions).then(function (compressedBlob) {
+      if (OUTPUT_TYPES.BLOB === outputFormat.toLowerCase()) {
+        //Return the blob object
+        thisFunction(compressedBlob);
+      } else {
+        //Return the base64 url
+        toBase64(compressedBlob).then(base64Data => {
+          thisFunction(base64Data);
+        });
+      }
+    }).catch(function (error) {
+      console.log(error.message);
+    });
+  } catch (error) {
+    console.log('error in exportImage in ImageCanvasDraw comp: ', error);
+  }
+};
+
+const Controls = props => {
+  const {
+    state,
+    setState,
+    saveableCanvas,
+    onSave,
+    outputFormat,
+    showDownloadButton
+  } = props;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-between "
+  }, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: () => {
+      saveableCanvas.current.eraseAll();
+    }
+  }, "Erase"), /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: () => {
+      saveableCanvas.current.undo();
+    }
+  }, "Undo"), /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    onClick: () => {
+      exportImage(onSave, saveableCanvas, outputFormat, state.imageCompressionOptions);
+    }
+  }, "Save")), /*#__PURE__*/React.createElement("div", {
+    className: "m-auto my-12"
+  }, /*#__PURE__*/React.createElement(ChromePicker, {
+    className: "drop-shadow-none",
+    disableAlpha: true,
+    color: state.color,
+    onChange: (color, event) => {
+      setState(previousState => {
+        return { ...previousState,
+          color: color.hex
+        };
+      });
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "my-6"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    id: "image-scale"
+  }, "Pull String Length"), /*#__PURE__*/React.createElement("div", {
+    className: "mx-8"
+  }, /*#__PURE__*/React.createElement(Slider, {
+    className: "w-full",
+    defaultValue: 1.5,
+    "aria-labelledby": "image-scale",
+    valueLabelDisplay: "auto",
+    value: state.lazyRadius,
+    onChange: event => {
+      setState(previousState => {
+        return { ...previousState,
+          lazyRadius: Number(event.target.value)
+        };
+      });
+    },
+    step: 1,
+    min: 1,
+    max: 30
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "my-6"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    id: "image-scale"
+  }, "Brush Size"), /*#__PURE__*/React.createElement("div", {
+    className: "mx-8"
+  }, /*#__PURE__*/React.createElement(Slider, {
+    className: "w-full",
+    defaultValue: 1.5,
+    "aria-labelledby": "image-scale",
+    valueLabelDisplay: "auto",
+    value: state.brushRadius,
+    onChange: event => {
+      setState(previousState => {
+        return { ...previousState,
+          brushRadius: Number(event.target.value)
+        };
+      });
+    },
+    step: 1,
+    min: 1,
+    max: 10
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "my-6"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    id: "image-scale"
+  }, "Image Size"), /*#__PURE__*/React.createElement("div", {
+    className: "mx-8"
+  }, /*#__PURE__*/React.createElement(Slider, {
+    className: "w-full",
+    defaultValue: 1.5,
+    valueLabelFormat: valueLabelFormat,
+    "aria-labelledby": "image-scale",
+    step: null // valueLabelDisplay="auto"
+    ,
+    value: state.imageScale,
+    onChange: event => {
+      setState(previousState => {
+        return { ...previousState,
+          imageScale: Number(event.target.value)
+        };
+      });
+    },
+    marks: imageScaleMarks,
+    min: 1.5,
+    max: 2.5
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-center mt-12"
+  }, showDownloadButton && /*#__PURE__*/React.createElement(Button, {
+    variant: "outlined",
+    onClick: () => {
+      exportImage(downloadImage, saveableCanvas, OUTPUT_TYPES.BLOB, state.imageCompressionOptions);
+    }
+  }, "Download")));
+};
+
+export default Controls;

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

@@ -0,0 +1 @@
+export * from './types';

package/dist/components/Buttons/ImageCanvasDraw/constants/types.js

@@ -0,0 +1,4 @@
+export const OUTPUT_TYPES = {
+  BLOB: 'blob',
+  BASE64: 'base64'
+};

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('');
+  }
+};