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

package/src/drawing-response/__tests__/factory.test.js

@@ -0,0 +1,13 @@
+import factory from '../factory';
+
+describe('factory', () => {
+  it('creates instance', () => {
+    const instance = factory('FreePathDrawable', {});
+    expect(instance).toBeDefined();
+    expect(instance.toJson().type).toEqual('FreePathDrawable');
+  });
+
+  it('throws error for unknown instance', () => {
+    expect(() => factory('?', {})).toThrow(/Can't find.*/);
+  });
+});

package/src/drawing-response/button.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+const StyledButton = styled(Button)({
+  fontSize: '0.9em',
+  marginLeft: 8,
+  minWidth: 32,
+  height: 32,
+
+  '& span': {
+    '& svg': {
+      width: '1.3em !important',
+      height: '1.3em !important',
+    },
+  },
+});
+
+const CustomButton = ({ label, onClick, disabled, title }) => (
+  <StyledButton
+    title={title}
+    onClick={onClick}
+    disabled={disabled}
+    size="small"
+    variant="contained">
+    {label}
+  </StyledButton>
+);
+
+CustomButton.propTypes = {
+  disabled: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onClick: PropTypes.func,
+  title: PropTypes.string,
+};
+
+CustomButton.defaultProps = {
+  disabled: false,
+  label: 'Add',
+  onClick: () => {},
+  title: '',
+};
+
+export default CustomButton;

package/src/drawing-response/constants.js

@@ -0,0 +1,44 @@
+export default {
+  tools: [
+    {
+      type: 'Select',
+      label: 'Select',
+      icon: 'mdiCursorDefault',
+    },
+    {
+      type: 'FreePathDrawable',
+      label: 'Free Draw',
+      icon: 'mdiPencil',
+    },
+    {
+      type: 'LineDrawable',
+      label: 'Line',
+      icon: 'mdiMinus',
+    },
+    {
+      type: 'RectangleDrawable',
+      label: 'Rectangle',
+      icon: 'mdiRectangle',
+    },
+    {
+      type: 'CircleDrawable',
+      label: 'Circle',
+      icon: 'mdiCircle',
+    },
+    {
+      type: 'Text',
+      label: 'Text Entry',
+      icon: 'mdiFormatColorText',
+    },
+    {
+      // ,{
+      //   type: 'PaintBucket',
+      //   label: 'Paint Bucket',
+      //   icon: 'mdiFormatColorFill'
+      // },
+      type: 'EraserDrawable',
+      label: 'Eraser',
+      icon: 'mdiEraser',
+    },
+  ],
+};

package/src/drawing-response/container.jsx

@@ -0,0 +1,301 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Translator from '@pie-lib/translator';
+
+import constants from './constants';
+import Button from './button';
+import DrawablePalette from './drawable-palette';
+import DrawableMain from './drawable-main';
+import DrawableText from './drawable-text';
+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,
+}));
+
+export class Container extends Component {
+  static propTypes = {
+    disabled: PropTypes.bool,
+    session: PropTypes.object.isRequired,
+    onSessionChange: PropTypes.func.isRequired,
+    imageDimensions: PropTypes.object.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    backgroundImageEnabled: PropTypes.bool.isRequired,
+    language: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+    const TextEntry = new DrawableText();
+
+    this.state = {
+      scale: 1,
+      drawableDimensions: {
+        height: 0,
+        width: 0,
+      },
+      toolActive: TOOLS[0],
+      fillColor: 'white',
+      fillColorList: [
+        { value: 'transparent', label: 'no fill' },
+        { value: 'lightblue', label: 'light blue' },
+        { value: 'lightyellow', label: 'light yellow' },
+        ...ROGVAIV,
+      ],
+      outlineColor: 'black',
+      outlineColorList: ROGVAIV,
+      paintColor: 'red',
+      paintColorList: ROGVAIV,
+      TextEntry,
+    };
+  }
+
+  setTranslatedState(language) {
+    const translatedROGVAIV = ROGVAIV.map((c) => ({
+      value: c.value,
+      label: translator.t(`drawingResponse.${c.label}`, { lng: language }),
+    }));
+
+    this.setState({
+      fillColorList: [
+        { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }) },
+        { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }) },
+        { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }) },
+        ...translatedROGVAIV,
+      ],
+      paintColor: translator.t('drawingResponse.red', { lng: language }),
+      outlineColorList: translatedROGVAIV,
+      paintColorList: translatedROGVAIV,
+    });
+  }
+
+  UNSAFE_componentWillReceiveProps(props) {
+    const { language } = props;
+    this.setTranslatedState(language);
+  }
+
+  setDimensions() {
+    const checkExist = setInterval(() => {
+      try {
+        const { height, width } = this.drawable.getBoundingClientRect();
+        const effectiveWidth = this.props.session.width || width;
+
+        if (height !== 0 && width !== 0) {
+          this.setState({
+            drawableDimensions: {
+              height,
+              width: effectiveWidth,
+            },
+          });
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('setDimensions Error: ', e);
+      } finally {
+        clearInterval(checkExist);
+      }
+    }, 100);
+  }
+
+  componentDidMount() {
+    const { language } = this.props;
+    this.setTranslatedState(language);
+
+    this.setDimensions();
+
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText;
+        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+        const zoomParsed = zoom?.replace(/\s/g, '');
+
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            });
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    // Use ResizeObserver to detect when the drawable container becomes visible
+    // (e.g., after switching from build to item preview in New Item Bank) and trigger dimension calculation.
+    // This helps ensure the canvas is properly sized even when componentDidMount is not re-triggered.
+    this.resizeObserver = new ResizeObserver(() => {
+      this.setDimensions();
+    });
+
+    if (this.drawable) {
+      this.resizeObserver.observe(this.drawable);
+    }
+
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
+    }
+  }
+
+  componentWillUnmount() {
+    const { TextEntry } = this.state;
+
+    TextEntry.removeEventListeners();
+    this.observer?.disconnect();
+    this.resizeObserver?.disconnect();
+  }
+
+  handleMakeToolActive(tool) {
+    const { TextEntry } = this.state;
+    const { type } = tool;
+    const { language } = this.props;
+
+    if (type !== 'Text') {
+      this.setState({
+        toolActive: tool,
+      });
+    } else {
+      TextEntry.addNewTextEntry(language);
+      // Force update
+      this.setState({
+        updatedAt: new Date(),
+      });
+    }
+  }
+
+  checkIfToolIsDisabled = (type) => {
+    if (this.props.disabled) return true;
+
+    const { toolActive } = this.state;
+    // Text will never be disabled since on each "Text Entry" click a new text is added
+    if (type === 'Text') {
+      return false;
+    }
+    return type === toolActive.type;
+  };
+
+  handleColorChange(type, color) {
+    const cType = `${type}Color`;
+    this.setState({
+      [cType]: color,
+    });
+  }
+
+  render() {
+    const { disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =
+      this.props;
+    const {
+      drawableDimensions,
+      toolActive,
+      fillColor,
+      fillColorList,
+      outlineColor,
+      outlineColorList,
+      paintColor,
+      paintColorList,
+      TextEntry,
+    } = this.state;
+
+    const heightToUse = drawableDimensions.height * this.state.scale;
+
+    return (
+      <BaseContainer>
+        {!disabled && (
+          <DrawablePalette
+            fillColor={fillColor}
+            fillList={fillColorList}
+            outlineColor={outlineColor}
+            outlineList={outlineColorList}
+            paintColor={paintColor}
+            paintList={paintColorList}
+            onFillColorChange={(color) => this.handleColorChange('fill', color)}
+            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}
+            onPaintColorChange={(color) => this.handleColorChange('paint', color)}
+            language={language}
+          />
+        )}
+
+        <Box>
+          <Toolbar>
+            {TOOLS.map((tool) => {
+              const { type, label, icon } = tool;
+
+              return (
+                <Button
+                  title={label}
+                  key={type}
+                  disabled={this.checkIfToolIsDisabled(type)}
+                  onClick={() => this.handleMakeToolActive(tool)}
+                  label={<Icon path={icon} />}
+                />
+              );
+            })}
+          </Toolbar>
+
+          <DrawableHeight
+            ref={(drawable) => {
+              this.drawable = drawable;
+            }}
+            style={{ height: heightToUse, maxHeight: heightToUse, overflow: 'scroll' }}
+          >
+            <DrawableMain
+              scale={this.state.scale}
+              session={session}
+              disabled={disabled}
+              onSessionChange={onSessionChange}
+              fillColor={fillColor}
+              outlineColor={outlineColor}
+              paintColor={paintColor}
+              imageUrl={imageUrl}
+              drawableDimensions={drawableDimensions}
+              imageDimensions={imageDimensions}
+              toolActive={toolActive}
+              TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
+              language={language}
+            />
+          </DrawableHeight>
+        </Box>
+      </BaseContainer>
+    );
+  }
+}
+
+export default Container;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Circle } from 'react-konva';
+
+import DrawableHelper from './drawable-helper';
+
+export default class CircleDrawable extends DrawableHelper {
+  static TYPE = 'CircleDrawable';
+  constructor(props) {
+    super(props, CircleDrawable.TYPE);
+    const { startx, starty, x, y } = props;
+
+    this.startx = startx;
+    this.starty = starty;
+    this.x = x || startx;
+    this.y = y || starty;
+
+    const dx = this.startx - this.x;
+    const dy = this.starty - this.y;
+
+    this.radius = Math.sqrt(dx * dx + dy * dy);
+  }
+
+  registerMovement(x, y) {
+    this.x = x;
+    this.y = y;
+
+    const dx = this.startx - this.x;
+    const dy = this.starty - this.y;
+
+    this.radius = Math.sqrt(dx * dx + dy * dy);
+  }
+
+  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 (
+      <Circle
+        key={key}
+        draggable={draggable}
+        radius={this.radius}
+        x={this.startx}
+        y={this.starty}
+        fill={this.paintColor || this.fillColor}
+        onClick={() => this.handleOnClick(props)}
+        onDragEnd={this.handleDragEnd.bind(this, props)}
+        onMouseEnter={onMouseOverElement}
+        onMouseLeave={onMouseOutElement}
+        stroke={this.outlineColor}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Line } from 'react-konva';
+
+import DrawableHelper from './drawable-helper';
+
+export default class EraserDrawable extends DrawableHelper {
+  static TYPE = 'EraserDrawable';
+  constructor(props) {
+    super(props, EraserDrawable.TYPE);
+    const { startx, starty, points, posX, posY } = props;
+
+    this.points = points || [startx, starty];
+    this.posX = posX || 0;
+    this.posY = posY || 0;
+  }
+
+  registerMovement(x, y) {
+    this.points = [...this.points, x, y];
+  }
+
+  handleDragEnd = (props, event) => {
+    this.posX = event.target.getX();
+    this.posY = event.target.getY();
+
+    props.handleSessionChange();
+  };
+
+  render(props) {
+    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;
+
+    return (
+      <Line
+        key={key}
+        draggable={draggable}
+        globalCompositeOperation="destination-out"
+        tension={0}
+        bezier={true}
+        points={this.points}
+        onDragEnd={this.handleDragEnd.bind(this, props)}
+        onMouseEnter={onMouseOverElement}
+        onMouseLeave={onMouseOutElement}
+        strokeStyle="#df4b26"
+        lineJoin="round"
+        lineWidth="5"
+        fill="white"
+        stroke="white"
+        strokeWidth={5}
+        x={this.posX}
+        y={this.posY}
+      />
+    );
+  }
+}

package/src/drawing-response/drawable-free-path.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Line } from 'react-konva';
+
+import DrawableHelper from './drawable-helper';
+
+export default class FreePathDrawable extends DrawableHelper {
+  static TYPE = 'FreePathDrawable';
+
+  constructor(props) {
+    super(props, FreePathDrawable.TYPE);
+    const { startx, starty, points, posX, posY } = props;
+
+    this.points = points || [startx, starty];
+    this.posX = posX || 0;
+    this.posY = posY || 0;
+  }
+
+  registerMovement(x, y) {
+    this.points = [...this.points, x, 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;
+
+    return (
+      <Line
+        key={key}
+        draggable={draggable}
+        tension={0}
+        bezier={true}
+        points={this.points}
+        fill={this.paintColor || this.fillColor}
+        onClick={() => this.handleOnClick(props)}
+        onDragEnd={this.handleDragEnd.bind(this, props)}
+        onMouseEnter={onMouseOverElement}
+        onMouseLeave={onMouseOutElement}
+        stroke={this.paintColor || this.outlineColor}
+        x={this.posX}
+        y={this.posY}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Not using React in order to avoid performance issues.
+ * If you switch this class to a React one make sure that
+ * this interaction will not have performance leaks in pie-website nor in pits.
+ */
+export default class DrawableHelper {
+  constructor(props, type) {
+    const { startx, starty, fillColor, outlineColor, createdAt } = props;
+    this.startx = startx;
+    this.starty = starty;
+    this.createdAt = createdAt;
+    this.fillColor = fillColor;
+    this.outlineColor = outlineColor;
+    this.type = type;
+  }
+
+  toJson() {
+    const base = JSON.parse(JSON.stringify(this));
+    return base;
+  }
+}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+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"
+      src={url}
+      style={{
+        height,
+        maxWidth: width,
+        maxHeight: 350,
+        width,
+      }}
+    />
+  </ImageContainer>
+);
+
+DrawableImage.propTypes = {
+  dimensions: PropTypes.object.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+export default DrawableImage;