@pie-element/drawing-response 10.3.4-next.0 → 11.0.0-beta.0

package/src/drawing-response/container.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import Translator from '@pie-lib/translator';
 
 import constants from './constants';
@@ -13,6 +13,34 @@ import Icon from './icon';
 const { tools: TOOLS } = constants;
 const { translator } = Translator;
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+}));
+
+const Box = styled('div')(({ theme }) => ({
+  border: '1px solid #E0E1E6',
+  borderRadius: '5px',
+  marginTop: theme.spacing(2),
+  backgroundColor: '#ECEDF1',
+}));
+
+const DrawableHeight = styled('div')({
+  minHeight: 350,
+  backgroundColor: '#fff',
+});
+
+const Toolbar = styled('div')(({ theme }) => ({
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  padding: '12px 8px 4px',
+  boxSizing: 'border-box',
+  maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls
+  '& button': {
+    marginBottom: theme.spacing(1),
+  },
+}));
+
 const ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({
   value: c,
   label: c,
@@ -20,7 +48,6 @@ const ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white',
 
 export class Container extends Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     disabled: PropTypes.bool,
     session: PropTypes.object.isRequired,
     onSessionChange: PropTypes.func.isRequired,
@@ -192,7 +219,7 @@ export class Container extends Component {
   }
 
   render() {
-    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =
+    const { disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =
       this.props;
     const {
       drawableDimensions,
@@ -209,7 +236,7 @@ export class Container extends Component {
     const heightToUse = drawableDimensions.height * this.state.scale;
 
     return (
-      <div className={classes.base}>
+      <BaseContainer>
         {!disabled && (
           <DrawablePalette
             fillColor={fillColor}
@@ -225,8 +252,8 @@ export class Container extends Component {
           />
         )}
 
-        <div className={classes.box}>
-          <div className={classes.toolbar}>
+        <Box>
+          <Toolbar>
             {TOOLS.map((tool) => {
               const { type, label, icon } = tool;
 
@@ -240,13 +267,12 @@ export class Container extends Component {
                 />
               );
             })}
-          </div>
+          </Toolbar>
 
-          <div
+          <DrawableHeight
             ref={(drawable) => {
               this.drawable = drawable;
             }}
-            className={classes.drawableHeight}
             style={{ height: heightToUse, maxHeight: heightToUse, overflow: 'scroll' }}
           >
             <DrawableMain
@@ -265,38 +291,11 @@ export class Container extends Component {
               backgroundImageEnabled={backgroundImageEnabled}
               language={language}
             />
-          </div>
-        </div>
-      </div>
+          </DrawableHeight>
+        </Box>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 2,
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px',
-    marginTop: theme.spacing.unit * 2,
-    backgroundColor: '#ECEDF1',
-  },
-  drawableHeight: {
-    minHeight: 350,
-    backgroundColor: '#fff',
-  },
-  toolbar: {
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    padding: '12px 8px 4px',
-    boxSizing: 'border-box',
-    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls
-    '& button': {
-      marginBottom: theme.spacing.unit,
-    },
-  },
-});
-
-export default withStyles(styles)(Container);
+export default Container;

package/src/drawing-response/drawable-image.jsx

@@ -1,12 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
-  <div className={classes.imageContainer}>
-    <img
+const ImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const DrawableImage = ({ url, dimensions: { height, width } }) => (
+  <ImageContainer>
+    <Image
       alt="drawing-response-image"
-      className={classes.image}
       src={url}
       style={{
         height,
@@ -15,25 +25,12 @@ const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
         width,
       }}
     />
-  </div>
+  </ImageContainer>
 );
 
-const styles = () => ({
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-  },
-});
-
 DrawableImage.propTypes = {
-  classes: PropTypes.object.isRequired,
   dimensions: PropTypes.object.isRequired,
   url: PropTypes.string.isRequired,
 };
 
-export default withStyles(styles)(DrawableImage);
+export default DrawableImage;

package/src/drawing-response/drawable-main.jsx

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
-import classnames from 'classnames';
 import { Layer, Stage } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import Translator from '@pie-lib/translator';
 
 const { translator } = Translator;
@@ -13,6 +12,23 @@ import ImageBackground from './drawable-image';
 import Button from './button';
 import factory from './factory';
 
+const Wrapper = styled('div')({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-end',
+});
+
+const Base = styled('div')({
+  position: 'relative',
+  width: '100%',
+});
+
+const UndoControls = styled('div')({
+  marginTop: -43,
+  marginRight: 10,
+  position: 'absolute',
+});
+
 export class DrawableMain extends React.Component {
   constructor(props) {
     super(props);
@@ -21,6 +37,14 @@ export class DrawableMain extends React.Component {
       newDrawable: [],
       textIsSelected: false,
     };
+    this.stage = null;
+    this.layer = null;
+  }
+
+  componentWillUnmount() {
+    // Clean up refs to prevent React Konva errors
+    this.stage = null;
+    this.layer = null;
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -90,7 +114,10 @@ export class DrawableMain extends React.Component {
     const { toolActive, fillColor, outlineColor, scale } = this.props;
 
     if (newDrawable.length === 0 && !textIsSelected) {
-      const { x, y } = e.target.getStage().getPointerPosition();
+      const stage = e.target.getStage();
+      if (!stage) return;
+
+      const { x, y } = stage.getPointerPosition();
 
       const newDrawable = factory(toolActive.type, {
         startx: x / scale,
@@ -114,7 +141,10 @@ export class DrawableMain extends React.Component {
     const { scale } = this.props;
 
     if (newDrawable.length === 1) {
-      const { x, y } = e.target.getStage().getPointerPosition();
+      const stage = e.target.getStage();
+      if (!stage) return;
+
+      const { x, y } = stage.getPointerPosition();
       const drawableToAdd = newDrawable[0];
 
       drawableToAdd.registerMovement(x / scale, y / scale);
@@ -135,7 +165,10 @@ export class DrawableMain extends React.Component {
     const { scale } = this.props;
 
     if (newDrawable.length === 1) {
-      const { x, y } = e.target.getStage().getPointerPosition();
+      const stage = e.target.getStage();
+      if (!stage) return;
+
+      const { x, y } = stage.getPointerPosition();
       const updatedNewDrawable = newDrawable[0];
 
       updatedNewDrawable.registerMovement(x / scale, y / scale);
@@ -176,7 +209,6 @@ export class DrawableMain extends React.Component {
 
   render() {
     const {
-      classes,
       disabled,
       drawableDimensions,
       fillColor,
@@ -232,8 +264,8 @@ export class DrawableMain extends React.Component {
     const imageWidth = imageDimensions?.width * scale;
 
     return (
-      <div className={classes.wrapper}>
-        <div className={classes.undoControls}>
+      <Wrapper>
+        <UndoControls>
           <Button
             disabled={disabled}
             onClick={this.handleUndo}
@@ -244,71 +276,46 @@ export class DrawableMain extends React.Component {
             onClick={this.handleClearAll}
             label={translator.t('common:clearAll', { lng: language })}
           />
-        </div>
-        <div className={classes.base}>
+        </UndoControls>
+        <Base>
           {backgroundImageEnabled && imageUrl && (
             <ImageBackground dimensions={{ height: imageHeight, width: imageWidth }} url={imageUrl} />
           )}
 
           {TextEntry.renderTextareas()}
 
-          <Stage
-            scaleX={scale}
-            scaleY={scale}
-            ref={(ref) => {
-              this.stage = ref;
+          {/* Wrap Stage in a styled div instead of styling Stage directly */}
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              touchAction: 'none',
+              cursor: draggable && (isOver || newDrawable.length === 1) ? 'pointer' : 'default',
             }}
-            className={classnames(classes.stage, {
-              [classes.active]: draggable && (isOver || (newDrawable && newDrawable.length === 1)),
-            })}
-            height={drawableDimensions.height}
-            width={drawableDimensions.width}
-            {...listeners}
           >
-            <Layer
-              ref={(ref) => {
-                this.layer = ref;
-              }}
+            <Stage
+              key="drawing-stage"
+              scaleX={scale}
+              scaleY={scale}
+              ref={(ref) => (this.stage = ref)}
+              height={drawableDimensions.height}
+              width={drawableDimensions.width}
+              {...listeners}
             >
-              {drawables.map((drawable, key) => drawable.render({ ...drawableProps, key }))}
-              {/* Text Entry is a special case  */}
-              {TextEntry.render(drawableProps)}
-            </Layer>
-          </Stage>
-        </div>
-      </div>
+              <Layer ref={(ref) => (this.layer = ref)}>
+                {drawables.map((drawable, key) => drawable.render({ ...drawableProps, key }))}
+                {TextEntry.render(drawableProps)}
+              </Layer>
+            </Stage>
+          </div>
+        </Base>
+      </Wrapper>
     );
   }
 }
 
-const styles = () => ({
-  wrapper: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-end',
-  },
-  base: {
-    position: 'relative',
-    width: '100%',
-  },
-  stage: {
-    left: 0,
-    position: 'absolute',
-    touchAction: 'none',
-    top: 0,
-  },
-  active: {
-    cursor: 'pointer',
-  },
-  undoControls: {
-    marginTop: -43,
-    marginRight: 10,
-    position: 'absolute',
-  },
-});
-
 DrawableMain.propTypes = {
-  classes: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   drawableDimensions: PropTypes.object.isRequired,
   imageDimensions: PropTypes.object.isRequired,
@@ -325,4 +332,4 @@ DrawableMain.propTypes = {
   language: PropTypes.string,
 };
 
-export default withStyles(styles)(DrawableMain);
+export default DrawableMain;

package/src/drawing-response/drawable-palette.jsx

@@ -1,14 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputContainer } from '@pie-lib/render-ui';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import { withStyles } from '@material-ui/core/styles';
-import classnames from 'classnames';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
 import Translator from '@pie-lib/translator';
 
 const { translator } = Translator;
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex',
+}));
+
+const StyledInputContainer = styled(InputContainer)({
+  flex: 1,
+  fontSize: 'inherit',
+  width: '90%',
+});
+
+const StyledMenuItem = styled(MenuItem)(({ theme, isBlackColor }) => ({
+  borderRadius: '2px',
+  fontSize: 'inherit',
+  height: '22px',
+  marginLeft: theme.spacing(2),
+  marginRight: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  ...(isBlackColor && {
+    color: theme.palette.background.paper,
+  }),
+}));
+
+const StyledSelect = styled(Select)({
+  fontSize: 'inherit',
+  transform: 'translate(0%, 40%)',
+});
+
 // TODO: Change Palette so will render inputs and colors dynamically
 class Palette extends React.Component {
   onChange = (name) => (event) => {
@@ -25,73 +52,40 @@ class Palette extends React.Component {
   };
 
   render() {
-    const { classes, fillColor, outlineColor, fillList, outlineList, language } = this.props;
+    const { fillColor, outlineColor, fillList, outlineList, language } = this.props;
 
     return (
-      <div className={classes.base}>
-        <InputContainer label={translator.t('drawingResponse.fillColor', { lng: language })} className={classes.input}>
-          <Select className={classes.select} onChange={this.onChange('fill')} value={fillColor}>
+      <BaseContainer>
+        <StyledInputContainer label={translator.t('drawingResponse.fillColor', { lng: language })}>
+          <StyledSelect onChange={this.onChange('fill')} value={fillColor} variant='standard' MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}>
             {fillList.map(({ value, label }) => (
-              <MenuItem
+              <StyledMenuItem
                 key={value}
                 value={value}
-                className={classnames(classes.item, {
-                  [classes.blackColorItem]: value === 'black',
-                })}
+                isBlackColor={value === 'black'}
                 style={{ backgroundColor: value }}
               >
                 {label}
-              </MenuItem>
+              </StyledMenuItem>
             ))}
-          </Select>
-        </InputContainer>
+          </StyledSelect>
+        </StyledInputContainer>
 
-        <InputContainer
-          label={translator.t('drawingResponse.outlineColor', { lng: language })}
-          className={classes.input}
-        >
-          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>
+        <StyledInputContainer label={translator.t('drawingResponse.outlineColor', { lng: language })}>
+          <StyledSelect onChange={this.onChange('outline')} value={outlineColor} variant='standard' MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}>
             {outlineList.map(({ value, label }) => (
-              <MenuItem key={value} value={value} className={classes.item} style={{ border: `2px solid ${value}` }}>
+              <StyledMenuItem key={value} value={value} style={{ border: `2px solid ${value}` }}>
                 {label}
-              </MenuItem>
+              </StyledMenuItem>
             ))}
-          </Select>
-        </InputContainer>
-      </div>
+          </StyledSelect>
+        </StyledInputContainer>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 2,
-    display: 'flex',
-  },
-  input: {
-    flex: 1,
-    fontSize: 'inherit',
-    width: '90%',
-  },
-  item: {
-    borderRadius: '2px',
-    fontSize: 'inherit',
-    height: '22px',
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2,
-  },
-  blackColorItem: {
-    color: theme.palette.background.paper,
-  },
-  select: {
-    fontSize: 'inherit',
-    transform: 'translate(0%, 40%)',
-  },
-});
-
 Palette.propTypes = {
-  classes: PropTypes.object.isRequired,
   fillColor: PropTypes.string.isRequired,
   fillList: PropTypes.array.isRequired,
   onFillColorChange: PropTypes.func.isRequired,
@@ -102,4 +96,4 @@ Palette.propTypes = {
   language: PropTypes.string,
 };
 
-export default withStyles(styles)(Palette);
+export default Palette;

package/src/drawing-response/drawable-text.jsx

@@ -38,6 +38,7 @@ export default class TextDrawable {
 
     all.push({
       id: id,
+      text: '',
       isDefault: true,
       label: translator.t('drawingResponse.onDoubleClick', { lng: language }),
       width: 200,
@@ -83,15 +84,19 @@ export default class TextDrawable {
     }
   }
 
-  saveValue(id, textNode, textareaNode) {
-    if (textareaNode.value) {
-      textNode.text(textareaNode.value);
-    } else {
-      this.all = this.all.filter((text) => text.id !== id);
-      this.props.forceUpdate();
+  saveValue(id, textareaNode) {
+    const value = textareaNode.value;
+    this.all = this.all.map((t) =>
+      t.id === id ? { ...t, text: value } : t
+    );
+
+    if (!value) {
+      this.all = this.all.filter((t) => t.id !== id);
     }
 
+    this.toggleTextarea(id, false);
     this.props.handleSessionChange();
+    this.props.forceUpdate();
   }
 
   handleMouseDown = () => this.props.toggleTextSelected(true);
@@ -110,9 +115,11 @@ export default class TextDrawable {
     const textNode = this[TextDrawable.getTextNode(id)];
     const textareaNode = this[TextDrawable.getTextareaNode(id)];
 
-    const areaPosition = textNode._lastPos;
+    if (!textNode || !textareaNode) return;
 
-    textareaNode.value = isDefault ? '' : textNode.text();
+    const areaPosition = textNode.getAbsolutePosition();
+
+    textareaNode.value = text.text || '';
     textareaNode.style.position = 'absolute';
     textareaNode.style.top = areaPosition.y + 'px';
     textareaNode.style.left = areaPosition.x + 'px';
@@ -131,53 +138,34 @@ export default class TextDrawable {
     textareaNode.style.transformOrigin = 'left top';
     textareaNode.style.textAlign = textNode.align();
     textareaNode.style.color = textNode.fill();
+    textareaNode.style.display = 'block';
 
     let rotation = textNode.rotation();
-    let transform = '';
-    if (rotation) {
-      transform += 'rotateZ(' + rotation + 'deg)';
-    }
-
-    let px = 0;
-    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
-    if (isFirefox) {
-      px += 2 + Math.round(textNode.fontSize() / 20);
-    }
-
-    transform += 'translateY(-' + px + 'px)';
-
-    textareaNode.style.transform = transform;
-    textareaNode.style.height = 'auto';
-    textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';
+    textareaNode.style.transform = rotation ? `rotateZ(${rotation}deg)` : '';
 
     textareaNode.focus();
 
     const keyDownHandler = (e) => {
-      // hide on enter but don't hide on shift + enter
-      if (e.keyCode === 13 && !e.shiftKey) {
-        this.toggleTextarea(id, false);
-        this.saveValue(id, textNode, textareaNode);
+      if (e.key === 'Enter' && !e.shiftKey) {
+        this.saveValue(id, textareaNode);
       }
-
-      // on esc do not set value back to node
-      if (e.keyCode === 27) {
+      if (e.key === 'Escape') {
         this.toggleTextarea(id, false);
       }
     };
 
-    textareaNode.addEventListener('keydown', keyDownHandler);
-
-    this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('keydown', keyDownHandler));
-
     const blurHandler = () => {
       this.showOnlyTextNodes();
-      this.saveValue(id, textNode, textareaNode);
+      this.saveValue(id, textareaNode);
     };
 
+    textareaNode.addEventListener('keydown', keyDownHandler);
     textareaNode.addEventListener('blur', blurHandler);
 
-    this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('blur', blurHandler));
+    this.eventListenersDetachArray.push(() => {
+      textareaNode.removeEventListener('keydown', keyDownHandler);
+      textareaNode.removeEventListener('blur', blurHandler);
+    });
 
     this.initializeDefault(id, isDefault);
     this.props.forceUpdate();