pcm-shared-components 0.0.64 → 0.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
2
|
import Slider from '@mui/material/Slider';
|
|
3
3
|
import Typography from '@mui/material/Typography';
|
|
4
4
|
import { combineDrawing } from '../service/image_tools';
|
|
@@ -6,6 +6,7 @@ import imageCompression from 'browser-image-compression';
|
|
|
6
6
|
import { ChromePicker } from 'react-color';
|
|
7
7
|
import Button from '@mui/material/Button';
|
|
8
8
|
import { OUTPUT_TYPES } from '../constants';
|
|
9
|
+
import { rgbToHex } from '../../../Tools/color';
|
|
9
10
|
const imageScaleMarks = [{
|
|
10
11
|
value: 1.5,
|
|
11
12
|
label: 'Full'
|
|
@@ -81,32 +82,15 @@ const Controls = props => {
|
|
|
81
82
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
|
|
82
83
|
className: "flex flex-col"
|
|
83
84
|
}, /*#__PURE__*/React.createElement("div", {
|
|
84
|
-
className: "flex flex-row justify-between "
|
|
85
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
86
|
-
color: "secondary",
|
|
87
|
-
onClick: () => {
|
|
88
|
-
saveableCanvas.current.eraseAll();
|
|
89
|
-
}
|
|
90
|
-
}, "Erase"), /*#__PURE__*/React.createElement(Button, {
|
|
91
|
-
color: "secondary",
|
|
92
|
-
onClick: () => {
|
|
93
|
-
saveableCanvas.current.undo();
|
|
94
|
-
}
|
|
95
|
-
}, "Undo"), /*#__PURE__*/React.createElement(Button, {
|
|
96
|
-
variant: "outlined",
|
|
97
|
-
onClick: () => {
|
|
98
|
-
exportImage(onSave, saveableCanvas, outputFormat, state.imageCompressionOptions);
|
|
99
|
-
}
|
|
100
|
-
}, "Save")), /*#__PURE__*/React.createElement("div", {
|
|
101
85
|
className: "m-auto my-12"
|
|
102
86
|
}, /*#__PURE__*/React.createElement(ChromePicker, {
|
|
103
87
|
className: "drop-shadow-none",
|
|
104
|
-
disableAlpha:
|
|
88
|
+
disableAlpha: false,
|
|
105
89
|
color: state.color,
|
|
106
90
|
onChange: (color, event) => {
|
|
107
91
|
setState(previousState => {
|
|
108
92
|
return { ...previousState,
|
|
109
|
-
color: color.
|
|
93
|
+
color: rgbToHex(color.rgb)
|
|
110
94
|
};
|
|
111
95
|
});
|
|
112
96
|
}
|
|
@@ -173,12 +157,29 @@ const Controls = props => {
|
|
|
173
157
|
return { ...previousState,
|
|
174
158
|
imageScale: Number(event.target.value)
|
|
175
159
|
};
|
|
176
|
-
});
|
|
160
|
+
}); // saveableCanvas.current.eraseAll();
|
|
177
161
|
},
|
|
178
162
|
marks: imageScaleMarks,
|
|
179
163
|
min: 1.5,
|
|
180
164
|
max: 2.5
|
|
181
165
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
166
|
+
className: "flex flex-row justify-between mt-12 "
|
|
167
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
168
|
+
color: "secondary",
|
|
169
|
+
onClick: () => {
|
|
170
|
+
saveableCanvas.current.eraseAll();
|
|
171
|
+
}
|
|
172
|
+
}, "Erase"), /*#__PURE__*/React.createElement(Button, {
|
|
173
|
+
color: "secondary",
|
|
174
|
+
onClick: () => {
|
|
175
|
+
saveableCanvas.current.undo();
|
|
176
|
+
}
|
|
177
|
+
}, "Undo"), /*#__PURE__*/React.createElement(Button, {
|
|
178
|
+
variant: "outlined",
|
|
179
|
+
onClick: () => {
|
|
180
|
+
exportImage(onSave, saveableCanvas, outputFormat, state.imageCompressionOptions);
|
|
181
|
+
}
|
|
182
|
+
}, "Save")), /*#__PURE__*/React.createElement("div", {
|
|
182
183
|
className: "flex flex-row justify-center mt-12"
|
|
183
184
|
}, showDownloadButton && /*#__PURE__*/React.createElement(Button, {
|
|
184
185
|
variant: "outlined",
|
|
@@ -88,6 +88,18 @@ export const ImageCanvasDraw = props => {
|
|
|
88
88
|
useEffect(() => {
|
|
89
89
|
//Get the scaled down image and width, height
|
|
90
90
|
setImageSize(state.b64DataUrl);
|
|
91
|
+
|
|
92
|
+
try {
|
|
93
|
+
document.addEventListener('keydown', function (e) {
|
|
94
|
+
console.log('debug e', e);
|
|
95
|
+
|
|
96
|
+
if (e.ctrlKey && e.key.toLowerCase() === 'z') {
|
|
97
|
+
saveableCanvas.current.undo();
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
} catch (error) {
|
|
101
|
+
console.error('Error in keydown ImageCanvasDraw Controls', error);
|
|
102
|
+
}
|
|
91
103
|
}, []);
|
|
92
104
|
useEffect(() => {
|
|
93
105
|
if (saveableCanvas && saveableCanvas.current) {
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export const rgbToHex = rgb => {
|
|
2
|
+
let alpha = Math.ceil(rgb.a * 255).toString(16);
|
|
3
|
+
alpha = alpha.length > 1 ? alpha : `0${alpha}`;
|
|
4
|
+
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;
|
|
5
|
+
return `#${hex}`;
|
|
6
|
+
};
|