pcm-shared-components 0.0.45 → 0.0.48

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/CustomFab/CustomFab.js

@@ -7,8 +7,6 @@ import clsx from 'clsx';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ThemeProvider } from '@mui/system';
 import { createTheme } from '@mui/material/styles';
-import { theme } from '../../Theme/theme';
-const defaultTheme = createTheme(theme.pitchCamp);
 const useStyles = makeStyles(() => ({
   rootFabElement: {
     margin: 2,
@@ -59,8 +57,10 @@ const CustomFab = props => {
     Icon,
     buttonText,
     boxShadow,
-    iconLocation
+    iconLocation,
+    theme
   } = props;
+  const defaultTheme = createTheme(theme);
   const classes = useStyles(props);
   console.log('debug boxShadow', boxShadow);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -106,7 +106,8 @@ CustomFab.defaultProps = {
   textColor: 'textPrimary',
   hoverTextColor: 'textPrimary',
   className: '',
-  color: 'primary'
+  color: 'primary',
+  theme: {}
 };
 CustomFab.propTypes = {
   /** onClick function passed to the button */
@@ -154,5 +155,8 @@ CustomFab.propTypes = {
   className: PropTypes.string,
 
   /** Theme colors if not using backgroundColor ['primary','secondary'] */
-  color: PropTypes.oneOf(['primary', 'secondary'])
+  color: PropTypes.oneOf(['primary', 'secondary']),
+
+  /** Theme object to use on this component*/
+  theme: PropTypes.object
 };

package/dist/components/Buttons/HelpButton/HelpButton.js

@@ -2,6 +2,8 @@ import React from 'react';
 import CustomFab from '../CustomFab/CustomFab';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import PropTypes from 'prop-types';
+import { ThemeProvider } from '@mui/system';
+import { createTheme } from '@mui/material/styles';
 export const HelpButton = props => {
   const {
     onClickLink,
@@ -9,9 +11,13 @@ export const HelpButton = props => {
     color,
     tooltipText,
     size,
-    iconSize
+    iconSize,
+    theme
   } = props;
-  return /*#__PURE__*/React.createElement(CustomFab, {
+  const defaultTheme = createTheme(theme);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement(CustomFab, {
     className: className,
     Icon: HelpOutlineIcon,
     tooltipText: tooltipText,
@@ -19,10 +25,11 @@ export const HelpButton = props => {
     size: size,
     iconSize: iconSize,
     variant: 'round',
+    theme: theme,
     onClick: () => {
       window.open(onClickLink, "_blank");
     }
-  });
+  }));
 };
 export default HelpButton;
 HelpButton.defaultProps = {
@@ -31,7 +38,8 @@ HelpButton.defaultProps = {
   color: 'primary',
   tooltipText: '',
   size: 'large',
-  iconSize: 24
+  iconSize: 24,
+  theme: {}
 };
 HelpButton.propTypes = {
   /** On click link, it's the URL to navigate too */
@@ -50,5 +58,8 @@ HelpButton.propTypes = {
   iconSize: PropTypes.number,
 
   /** The size of the button ['small','medium','large'] */
-  size: PropTypes.oneOf(['small', 'medium', 'large'])
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+
+  /** Theme object to use on this component*/
+  theme: PropTypes.object
 };

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