pcm-shared-components 0.0.63 → 0.0.66

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Slider from '@mui/material/Slider';
 import Typography from '@mui/material/Typography';
 import { combineDrawing } from '../service/image_tools';
@@ -6,6 +6,7 @@ import imageCompression from 'browser-image-compression';
 import { ChromePicker } from 'react-color';
 import Button from '@mui/material/Button';
 import { OUTPUT_TYPES } from '../constants';
+import { rgbToHex } from '../../../Tools/color';
 const imageScaleMarks = [{
   value: 1.5,
   label: 'Full'
@@ -81,32 +82,15 @@ const Controls = 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,
+    disableAlpha: false,
     color: state.color,
     onChange: (color, event) => {
       setState(previousState => {
         return { ...previousState,
-          color: color.hex
+          color: rgbToHex(color.rgb)
         };
       });
     }
@@ -153,7 +137,7 @@ const Controls = props => {
     },
     step: 1,
     min: 1,
-    max: 10
+    max: 20
   }))), /*#__PURE__*/React.createElement("div", {
     className: "my-6"
   }, /*#__PURE__*/React.createElement(Typography, {
@@ -173,12 +157,29 @@ const Controls = props => {
         return { ...previousState,
           imageScale: Number(event.target.value)
         };
-      });
+      }); // saveableCanvas.current.eraseAll();
     },
     marks: imageScaleMarks,
     min: 1.5,
     max: 2.5
   })))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-row justify-between mt-12 "
+  }, /*#__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: "flex flex-row justify-center mt-12"
   }, showDownloadButton && /*#__PURE__*/React.createElement(Button, {
     variant: "outlined",

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

@@ -8,6 +8,7 @@ import { getStorage, setStorage } from './service/local_storage';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme } from '@mui/material/styles';
+import PCMScrollbar from '../../Tools/PCMScrollbar';
 /**
  * Displays an image that can is used to draw on to generate maps with highlighted routes.
  * 
@@ -87,6 +88,18 @@ export const ImageCanvasDraw = props => {
   useEffect(() => {
     //Get the scaled down image and width, height 
     setImageSize(state.b64DataUrl);
+
+    try {
+      document.addEventListener('keydown', function (e) {
+        console.log('debug e', e);
+
+        if (e.ctrlKey && e.key.toLowerCase() === 'z') {
+          saveableCanvas.current.undo();
+        }
+      });
+    } catch (error) {
+      console.error('Error in keydown ImageCanvasDraw Controls', error);
+    }
   }, []);
   useEffect(() => {
     if (saveableCanvas && saveableCanvas.current) {
@@ -132,8 +145,11 @@ export const ImageCanvasDraw = props => {
     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(DrawerButtonOpenClose, null, /*#__PURE__*/React.createElement(ChevronRightIcon, null))), state.width !== 0 && /*#__PURE__*/React.createElement(PCMScrollbar, {
+    className: "overflow-scroll",
+    style: {
+      maxHeight: '90vh'
+    }
   }, /*#__PURE__*/React.createElement(CanvasDraw, {
     className: "",
     ref: saveableCanvas,

package/dist/components/Sandbox/ScrollingInnerDiv/index.js

@@ -0,0 +1,24 @@
+import { height } from '@mui/system';
+import React from 'react';
+import ImageCanvasDraw from '../../Drawing/ImageCanvasDraw';
+import { cedarShade } from '../../Drawing/ImageCanvasDraw/storybook/testMap.test';
+
+const ScrollingInnerDiv = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'yellow',
+      padding: 24,
+      height: 200
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: 'blue',
+      height: '100%',
+      overflow: 'scroll'
+    }
+  }, /*#__PURE__*/React.createElement(ImageCanvasDraw, {
+    b64DataUrl: cedarShade
+  }), "CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE CONTENT TO HAVE TAKING UP THE ENTIRE PARENT DIV SPACE"));
+};
+
+export default ScrollingInnerDiv;

package/dist/components/Tools/PCMScrollbar/index.js

@@ -10,23 +10,27 @@ export const PCMScrollbar = props => {
   const {
     children,
     className,
-    enable
+    enable,
+    style
   } = props;
   return /*#__PURE__*/React.createElement(PerfectScrollbar, {
     key: props.id,
     className: clsx(className),
     style: enable && !isMobile ? {
       position: 'relative',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      ...style
     } : {}
   }, children);
 };
 export default PCMScrollbar;
 PCMScrollbar.propTypes = {
   className: PropTypes.any,
+  style: PropTypes.object,
   enable: PropTypes.bool
 };
 PCMScrollbar.defaultProps = {
   className: '',
+  style: {},
   enable: true
 };

package/dist/components/Tools/color.js

@@ -0,0 +1,6 @@
+export const rgbToHex = rgb => {
+  let alpha = Math.ceil(rgb.a * 255).toString(16);
+  alpha = alpha.length > 1 ? alpha : `0${alpha}`;
+  const hex = rgb ? (rgb.r | 1 << 8).toString(16).slice(1) + (rgb.g | 1 << 8).toString(16).slice(1) + (rgb.b | 1 << 8).toString(16).slice(1) + alpha : undefined;
+  return `#${hex}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.63",
+  "version": "0.0.66",
   "private": false,
   "main": "dist/index.js",
   "babel": {