@pie-element/drawing-response 12.1.0-next.19 → 12.1.1-next.0

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

@@ -1,13 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,301 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,36 +0,0 @@
-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;