@pie-element/drawing-response 12.1.2-next.1 → 12.1.2

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Arrow } from 'react-konva';
+
+import DrawableHelper from './drawable-helper';
+
+export default class LineDrawable extends DrawableHelper {
+  static TYPE = 'LineDrawable';
+
+  constructor(props) {
+    super(props, LineDrawable.TYPE);
+    const { startx, starty, x, y, posX, posY } = props;
+
+    this.x = x || startx;
+    this.y = y || starty;
+    this.posX = posX || 0;
+    this.posY = posY || 0;
+  }
+
+  registerMovement(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  handleOnClick(props) {
+    const { paint, paintColor, forceUpdate } = props;
+
+    if (paint) {
+      this.paintColor = paintColor;
+      forceUpdate();
+    }
+  }
+
+  handleDragEnd = (props, event) => {
+    this.posX = event.target.getX();
+    this.posY = event.target.getY();
+
+    props.handleSessionChange();
+  };
+
+  render(props) {
+    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;
+    const points = [this.startx, this.starty, this.x, this.y];
+
+    return (
+      <Arrow
+        key={key}
+        draggable={draggable}
+        points={points}
+        fill={this.paintColor || this.outlineColor}
+        onClick={() => this.handleOnClick(props)}
+        stroke={this.paintColor || this.outlineColor}
+        onDragEnd={this.handleDragEnd.bind(this, props)}
+        onMouseEnter={onMouseOverElement}
+        onMouseLeave={onMouseOutElement}
+        x={this.posX}
+        y={this.posY}
+        pointerWidth={0}
+        pointerLength={0}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,333 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { cloneDeep, isEqual, omit } from 'lodash-es';
+import { Layer, Stage } from 'react-konva';
+import { styled } from '@mui/material/styles';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+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);
+    this.state = {
+      drawables: [],
+      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) {
+    if (nextProps.session) {
+      const { TextEntry } = nextProps;
+      const { drawables: currentDrawables } = this.state;
+
+      if (nextProps.session.drawables) {
+        const newDrawables = cloneDeep(nextProps.session.drawables);
+        const drawablesString = JSON.stringify(currentDrawables);
+        const sessionDrawableString = JSON.stringify((newDrawables || []).map((drawable) => omit(drawable, 'type')));
+
+        if (drawablesString !== sessionDrawableString) {
+          const drawableArray = nextProps.session.drawables;
+
+          this.setState({
+            drawables: drawableArray.map((drawable) => factory(drawable.type, drawable)),
+          });
+        }
+
+        const currentTexts = TextEntry.all.map((text) => ({
+          ...text,
+          ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),
+          value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value,
+        }));
+
+        if (!isEqual(currentTexts, nextProps.session.texts)) {
+          TextEntry.setAll(nextProps.session.texts || []);
+        }
+      }
+    } else {
+      this.handleSessionChange();
+    }
+  }
+
+  handleSessionChange = () => {
+    const { onSessionChange, session, TextEntry, drawableDimensions } = this.props;
+    const { drawables } = this.state;
+
+    const newSession = {
+      width: drawableDimensions.width,
+      drawables: drawables.map((d) => d.toJson()),
+      texts: TextEntry.all.map((text) => ({
+        ...text,
+        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),
+        value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value,
+      })),
+    };
+
+    if (!isEqual(newSession, session)) {
+      onSessionChange({
+        ...session,
+        ...newSession,
+      });
+    }
+  };
+
+  onMouseOverElement = () => this.setState({ isOver: true });
+
+  onMouseOutElement = () => this.setState({ isOver: false });
+
+  handleMouseDown = (e) => {
+    // ONLY IF MOBILE?
+    document.body.style.overflow = 'hidden';
+
+    const { newDrawable, textIsSelected } = this.state;
+    const { toolActive, fillColor, outlineColor, scale } = this.props;
+
+    if (newDrawable.length === 0 && !textIsSelected) {
+      const stage = e.target.getStage();
+      if (!stage) return;
+
+      const { x, y } = stage.getPointerPosition();
+
+      const newDrawable = factory(toolActive.type, {
+        startx: x / scale,
+        starty: y / scale,
+        fillColor,
+        outlineColor,
+        createdAt: new Date(),
+      });
+
+      this.setState({
+        newDrawable: [newDrawable],
+      });
+    }
+  };
+
+  handleMouseUp = (e) => {
+    // ONLY IF MOBILE?
+    document.body.style.overflow = 'initial';
+
+    const { newDrawable, drawables } = this.state;
+    const { scale } = this.props;
+
+    if (newDrawable.length === 1) {
+      const stage = e.target.getStage();
+      if (!stage) return;
+
+      const { x, y } = stage.getPointerPosition();
+      const drawableToAdd = newDrawable[0];
+
+      drawableToAdd.registerMovement(x / scale, y / scale);
+      drawables.push(drawableToAdd);
+
+      this.setState(
+        {
+          newDrawable: [],
+          drawables,
+        },
+        this.handleSessionChange.bind(this, drawableToAdd),
+      );
+    }
+  };
+
+  handleMouseMove = (e) => {
+    const { newDrawable } = this.state;
+    const { scale } = this.props;
+
+    if (newDrawable.length === 1) {
+      const stage = e.target.getStage();
+      if (!stage) return;
+
+      const { x, y } = stage.getPointerPosition();
+      const updatedNewDrawable = newDrawable[0];
+
+      updatedNewDrawable.registerMovement(x / scale, y / scale);
+
+      this.setState({
+        newDrawable: [updatedNewDrawable],
+      });
+    }
+  };
+
+  handleUndo = () => {
+    const { drawables } = this.state;
+    const { TextEntry } = this.props;
+
+    const newDrawables = [...drawables];
+    const allData = [...drawables, ...TextEntry.all];
+
+    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+    const lastElement = allData[allData.length - 1];
+
+    if (lastElement && lastElement.type === 'text-entry') {
+      TextEntry.all.pop();
+      this.setState({ updatedAt: new Date() }, this.handleSessionChange);
+    } else {
+      newDrawables.pop();
+      this.setState({ drawables: newDrawables }, this.handleSessionChange);
+    }
+  };
+
+  handleClearAll = () => {
+    const { TextEntry } = this.props;
+
+    TextEntry.all = [];
+    this.setState({ drawables: [], updatedAt: new Date() }, this.handleSessionChange);
+  };
+
+  toggleTextSelected = (textIsSelected) => this.setState({ textIsSelected });
+
+  render() {
+    const {
+      disabled,
+      drawableDimensions,
+      fillColor,
+      imageDimensions,
+      imageUrl,
+      paintColor,
+      outlineColor,
+      TextEntry,
+      backgroundImageEnabled = true,
+      toolActive: { type },
+      scale,
+      language,
+    } = this.props;
+    const { isOver, newDrawable } = this.state;
+
+    const draggable = type === 'Select';
+    const paint = type === 'PaintBucket';
+    const drawables = [...this.state.drawables, ...this.state.newDrawable];
+
+    const drawableProps = {
+      draggable: draggable && !disabled,
+      disabled,
+      paint,
+      fillColor,
+      forceUpdate: () => this.setState({ updatedAt: new Date() }),
+      paintColor,
+      outlineColor,
+      toggleTextSelected: this.toggleTextSelected,
+      handleSessionChange: this.handleSessionChange,
+      stage: this.stage,
+      onMouseOverElement: this.onMouseOverElement,
+      onMouseOutElement: this.onMouseOutElement,
+      scale,
+    };
+
+    let listeners = {};
+
+    if (!disabled) {
+      listeners = {
+        onMouseUp: this.handleMouseUp,
+        onTouchEnd: this.handleMouseUp,
+        onMouseMove: this.handleMouseMove,
+        onTouchMove: this.handleMouseMove,
+      };
+
+      if (!draggable) {
+        listeners.onMouseDown = this.handleMouseDown;
+        listeners.onTouchStart = this.handleMouseDown;
+      }
+    }
+
+    const imageHeight = imageDimensions?.height * scale;
+    const imageWidth = imageDimensions?.width * scale;
+
+    return (
+      <Wrapper>
+        <UndoControls>
+          <Button
+            disabled={disabled}
+            onClick={this.handleUndo}
+            label={translator.t('common:undo', { lng: language })}
+          />
+          <Button
+            disabled={disabled}
+            onClick={this.handleClearAll}
+            label={translator.t('common:clearAll', { lng: language })}
+          />
+        </UndoControls>
+        <Base>
+          {backgroundImageEnabled && imageUrl && (
+            <ImageBackground dimensions={{ height: imageHeight, width: imageWidth }} url={imageUrl} />
+          )}
+
+          {TextEntry.renderTextareas()}
+
+          {/* 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',
+            }}
+          >
+            <Stage
+              key="drawing-stage"
+              scaleX={scale}
+              scaleY={scale}
+              ref={(ref) => (this.stage = ref)}
+              height={drawableDimensions.height}
+              width={drawableDimensions.width}
+              {...listeners}
+            >
+              <Layer ref={(ref) => (this.layer = ref)}>
+                {drawables.map((drawable, key) => drawable.render({ ...drawableProps, key }))}
+                {TextEntry.render(drawableProps)}
+              </Layer>
+            </Stage>
+          </div>
+        </Base>
+      </Wrapper>
+    );
+  }
+}
+
+DrawableMain.propTypes = {
+  disabled: PropTypes.bool,
+  drawableDimensions: PropTypes.object.isRequired,
+  imageDimensions: PropTypes.object.isRequired,
+  fillColor: PropTypes.string.isRequired,
+  onSessionChange: PropTypes.func.isRequired,
+  paintColor: PropTypes.string.isRequired,
+  outlineColor: PropTypes.string.isRequired,
+  imageUrl: PropTypes.string.isRequired,
+  TextEntry: PropTypes.object.isRequired,
+  toolActive: PropTypes.object.isRequired,
+  session: PropTypes.object.isRequired,
+  backgroundImageEnabled: PropTypes.bool.isRequired,
+  scale: PropTypes.number.isRequired,
+  language: PropTypes.string,
+};
+
+export default DrawableMain;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { InputContainer } from '@pie-lib/render-ui';
+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) => {
+    const { value } = event.target;
+    const { onFillColorChange, onOutlineColorChange, onPaintColorChange } = this.props;
+
+    if (name === 'fill') {
+      onFillColorChange(value);
+    } else if (name === 'outline') {
+      onOutlineColorChange(value);
+    } else {
+      onPaintColorChange(value);
+    }
+  };
+
+  render() {
+    const { fillColor, outlineColor, fillList, outlineList, language } = this.props;
+
+    return (
+      <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 }) => (
+              <StyledMenuItem
+                key={value}
+                value={value}
+                isBlackColor={value === 'black'}
+                style={{ backgroundColor: value }}
+              >
+                {label}
+              </StyledMenuItem>
+            ))}
+          </StyledSelect>
+        </StyledInputContainer>
+
+        <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 }) => (
+              <StyledMenuItem key={value} value={value} style={{ border: `2px solid ${value}` }}>
+                {label}
+              </StyledMenuItem>
+            ))}
+          </StyledSelect>
+        </StyledInputContainer>
+      </BaseContainer>
+    );
+  }
+}
+
+Palette.propTypes = {
+  fillColor: PropTypes.string.isRequired,
+  fillList: PropTypes.array.isRequired,
+  onFillColorChange: PropTypes.func.isRequired,
+  onOutlineColorChange: PropTypes.func.isRequired,
+  onPaintColorChange: PropTypes.func.isRequired,
+  outlineColor: PropTypes.string.isRequired,
+  outlineList: PropTypes.array.isRequired,
+  language: PropTypes.string,
+};
+
+export default Palette;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Rect } from 'react-konva';
+
+import DrawableHelper from './drawable-helper';
+
+export default class RectangleDrawable extends DrawableHelper {
+  static TYPE = 'RectangleDrawable';
+  constructor(props) {
+    super(props, RectangleDrawable.TYPE);
+    const { startx, starty, x, y } = props;
+    this.startx = startx;
+    this.starty = starty;
+    this.x = x || startx;
+    this.y = y || starty;
+    this.width = x - startx || 0;
+    this.height = y - starty || 0;
+  }
+
+  registerMovement(x, y) {
+    this.x = x;
+    this.y = y;
+    this.width = this.x - this.startx;
+    this.height = this.y - this.starty;
+  }
+
+  handleOnClick(props) {
+    const { paint, paintColor, forceUpdate } = props;
+
+    if (paint) {
+      this.paintColor = paintColor;
+      forceUpdate();
+    }
+  }
+
+  handleDragEnd = (props, event) => {
+    const deltaX = this.startx - event.target.getX();
+    const deltaY = this.starty - event.target.getY();
+
+    this.startx = event.target.getX();
+    this.starty = event.target.getY();
+
+    this.x = this.x - deltaX;
+    this.y = this.y - deltaY;
+
+    props.handleSessionChange();
+  };
+
+  render(props) {
+    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;
+
+    return (
+      <Rect
+        key={key}
+        height={this.height}
+        width={this.width}
+        fill={this.paintColor || this.fillColor}
+        onClick={() => this.handleOnClick(props)}
+        onDragEnd={this.handleDragEnd.bind(this, props)}
+        onMouseEnter={onMouseOverElement}
+        onMouseLeave={onMouseOutElement}
+        stroke={this.outlineColor}
+        draggable={draggable}
+        strokeWidth={2}
+        x={this.startx}
+        y={this.starty}
+      />
+    );
+  }
+}