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

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

@@ -1,318 +0,0 @@
-import React from 'react';
-import { Text } from 'react-konva';
-import Translator from '@pie-lib/translator';
-
-const { translator } = Translator;
-import Transformer from './drawable-transformer';
-
-export const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
-
-export default class TextDrawable {
-  static getTextareaNode(id) {
-    return `textarea_${id}`;
-  }
-
-  static getTextNode(id) {
-    return `text_${id}`;
-  }
-
-  static getTransformerNode(id) {
-    return `transformer_${id}`;
-  }
-
-  constructor(props) {
-    this.all = (props && props.all) || [];
-    this.eventListenersDetachArray = [];
-  }
-
-  removeEventListeners = () => this.eventListenersDetachArray.forEach((fn) => fn());
-
-  setAll = (all) => {
-    this.all = all;
-    this.props.forceUpdate();
-  };
-
-  addNewTextEntry = (language) => {
-    const all = this.all;
-    const id = generateId();
-
-    all.push({
-      id: id,
-      text: '',
-      isDefault: true,
-      label: translator.t('drawingResponse.onDoubleClick', { lng: language }),
-      width: 200,
-      x: (all.length + 1) * 5 + 50,
-      y: (all.length + 1) * 5 + 50,
-      textVisible: true,
-      transformerVisible: true,
-      textareaVisible: false,
-      createdAt: new Date(),
-      type: 'text-entry',
-    });
-
-    this.props.handleSessionChange();
-  };
-
-  showOnlyTextNodes() {
-    this.all.map((item) => {
-      item.textVisible = true;
-      item.transformerVisible = false;
-      item.textareaVisible = false;
-    });
-  }
-
-  toggleTextarea(id, value) {
-    this.all = this.all.map((item) => {
-      if (item.id === id) {
-        return {
-          ...item,
-          textVisible: !value,
-          transformerVisible: !value,
-          textareaVisible: value,
-        };
-      }
-      return item;
-    });
-    this.props.forceUpdate();
-  }
-
-  initializeDefault(id, isDefault) {
-    if (isDefault) {
-      const current = this.all.filter((item) => item.id === id)[0];
-      current.isDefault = false;
-    }
-  }
-
-  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);
-  handleMouseUp = () => this.props.toggleTextSelected(false);
-
-  handleClick = (e, id) => {
-    const current = this.all.filter((item) => item.id === id)[0];
-    current.transformerVisible = true;
-    this.props.forceUpdate();
-  };
-
-  handleDblClick = (e, text) => {
-    const { id, isDefault } = text;
-    this.toggleTextarea(id, true);
-
-    const textNode = this[TextDrawable.getTextNode(id)];
-    const textareaNode = this[TextDrawable.getTextareaNode(id)];
-
-    if (!textNode || !textareaNode) return;
-
-    const areaPosition = textNode.getAbsolutePosition();
-
-    textareaNode.value = text.text || '';
-    textareaNode.style.position = 'absolute';
-    textareaNode.style.top = areaPosition.y + 'px';
-    textareaNode.style.left = areaPosition.x + 'px';
-    textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';
-    textareaNode.style.height = textNode.height() - textNode.padding() * 2 + 5 + 'px';
-    textareaNode.style.fontSize = textNode.fontSize() + 'px';
-    textareaNode.style.border = 'none';
-    textareaNode.style.padding = '0px';
-    textareaNode.style.margin = '0px';
-    textareaNode.style.overflow = 'hidden';
-    textareaNode.style.background = 'none';
-    textareaNode.style.outline = 'none';
-    textareaNode.style.resize = 'none';
-    textareaNode.style.lineHeight = textNode.lineHeight();
-    textareaNode.style.fontFamily = textNode.fontFamily();
-    textareaNode.style.transformOrigin = 'left top';
-    textareaNode.style.textAlign = textNode.align();
-    textareaNode.style.color = textNode.fill();
-    textareaNode.style.display = 'block';
-
-    let rotation = textNode.rotation();
-    textareaNode.style.transform = rotation ? `rotateZ(${rotation}deg)` : '';
-
-    textareaNode.focus();
-
-    const keyDownHandler = (e) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        this.saveValue(id, textareaNode);
-      }
-      if (e.key === 'Escape') {
-        this.toggleTextarea(id, false);
-      }
-    };
-
-    const blurHandler = () => {
-      this.showOnlyTextNodes();
-      this.saveValue(id, textareaNode);
-    };
-
-    textareaNode.addEventListener('keydown', keyDownHandler);
-    textareaNode.addEventListener('blur', blurHandler);
-
-    this.eventListenersDetachArray.push(() => {
-      textareaNode.removeEventListener('keydown', keyDownHandler);
-      textareaNode.removeEventListener('blur', blurHandler);
-    });
-
-    this.initializeDefault(id, isDefault);
-    this.props.forceUpdate();
-  };
-
-  handleTransform = (e, textNode) => {
-    this[textNode].setAttrs({
-      width: this[textNode].width() * this[textNode].scaleX(),
-      scaleX: this.props.scale,
-    });
-  };
-
-  renderTextareas() {
-    return this.all.map((text) => {
-      const { id, textareaVisible } = text;
-      const textareaNode = `textarea_${id}`;
-
-      return (
-        <textarea
-          key={textareaNode}
-          ref={(textarea) => {
-            this[textareaNode] = textarea;
-          }}
-          style={{ display: `${textareaVisible ? 'block' : 'none'}` }}
-        />
-      );
-    });
-  }
-
-  setInitialProps(props) {
-    if (!this.props) {
-      this.props = props;
-    }
-  }
-
-  render(props) {
-    this.setInitialProps(props);
-
-    if (props.stage) {
-      const newStage = props.stage;
-
-      // setting the handler only once
-      if (newStage !== this.stage) {
-        const stageClickHandler = (e) => {
-          if (e.target !== this.stage) {
-            return;
-          }
-
-          this.showOnlyTextNodes();
-          this.props.forceUpdate();
-        };
-
-        newStage.on('click', stageClickHandler);
-        this.eventListenersDetachArray.push(() => newStage.off('click', stageClickHandler));
-      }
-
-      this.stage = newStage;
-    }
-
-    return this.all.map((text) => {
-      const { id, label, x, y, width, textVisible, rotation, transformerVisible } = text;
-
-      const textNode = `text_${id}`;
-      const transformerNode = `transformer_${id}`;
-      let extraProps = {};
-
-      if (!props.disabled) {
-        extraProps = {
-          onClick: (e) => this.handleClick(e, id),
-          onTap: (e) => this.handleClick(e, id),
-          onDblClick: (e) => this.handleDblClick(e, text),
-          onDblTap: (e) => this.handleDblClick(e, text),
-          onTransform: (e) => this.handleTransform(e, textNode),
-          onTransformEnd: this.props.handleSessionChange,
-
-          onMouseDown: (e) => {
-            e.cancelBubble = true;
-            this.props.toggleTextSelected(true);
-          },
-          onTouchStart: (e) => {
-            e.cancelBubble = true;
-            this.props.toggleTextSelected(true);
-          },
-
-          onDragStart: (e) => {
-            e.cancelBubble = true;
-            this.props.toggleTextSelected(true);
-          },
-          onDragMove: (e) => {
-            e.cancelBubble = true;
-          },
-          onDragEnd: (e) => {
-            e.cancelBubble = true;
-            this.props.toggleTextSelected(false);
-            this.props.handleSessionChange();
-          },
-
-          onMouseUp: (e) => {
-            e.cancelBubble = true;
-            this.props.toggleTextSelected(false);
-          },
-          onTouchEnd: (e) => {
-            e.cancelBubble = true;
-            this.props.toggleTextSelected(false);
-          },
-
-          onMouseEnter: this.props.onMouseOverElement,
-          onMouseLeave: this.props.onMouseOutElement,
-        };
-      }
-
-      if (rotation) {
-        extraProps.rotation = rotation;
-      }
-
-      return [
-        <Text
-          key={id}
-          bubbles={true}
-          id={id}
-          ref={(text) => {
-            this[textNode] = text;
-          }}
-          text={text.text || label}
-          name={textNode}
-          x={x}
-          y={y}
-          width={width}
-          draggable={!props.disabled}
-          visible={textVisible}
-          fontSize={16}
-          {...extraProps}
-        />,
-        transformerVisible && (
-          <Transformer
-            key={`transformer_${id}`}
-            ref={(text) => {
-              this[transformerNode] = text;
-            }}
-            selectedShapeName={textNode}
-            onMouseDown={this.handleMouseDown}
-            onTouchStart={this.handleMouseDown}
-            onMouseUp={this.handleMouseUp}
-            onTouchEnd={this.handleMouseUp}
-          />
-        ),
-      ];
-    });
-  }
-}

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Transformer } from 'react-konva';
-
-class TransformerComponent extends React.Component {
-  componentDidMount() {
-    this.checkNode();
-  }
-
-  componentDidUpdate() {
-    this.checkNode();
-  }
-
-  checkNode() {
-    // here we need to manually attach or detach Transformer node
-    const stage = this.transformer.getStage();
-    const { selectedShapeName } = this.props;
-
-    const selectedNode = stage.findOne(`.${selectedShapeName}`);
-    // do nothing if selected node is already attached
-    if (selectedNode === this.transformer.node()) {
-      return;
-    }
-
-    if (selectedNode) {
-      // attach to another node
-      this.transformer.attachTo(selectedNode);
-    } else {
-      // remove transformer
-      this.transformer.detach();
-    }
-    this.transformer.getLayer().batchDraw();
-  }
-
-  render() {
-    return (
-      <Transformer
-        ref={(node) => {
-          this.transformer = node;
-        }}
-        enabledAnchors={['middle-left', 'middle-right']}
-        {...this.props}
-      />
-    );
-  }
-}
-
-TransformerComponent.propTypes = {
-  selectedShapeName: PropTypes.string.isRequired,
-};
-
-export default TransformerComponent;

package/src/drawing-response/factory.js

@@ -1,17 +0,0 @@
-import FreePathDrawable from './drawable-free-path';
-import LineDrawable from './drawable-line';
-import RectangleDrawable from './drawable-rectangle';
-import CircleDrawable from './drawable-circle';
-import EraserDrawable from './drawable-eraser';
-
-const DRAWABLES = [FreePathDrawable, LineDrawable, RectangleDrawable, CircleDrawable, EraserDrawable];
-
-export default (type, props) => {
-  const T = DRAWABLES.find((D) => D.TYPE === type);
-
-  if (T) {
-    return new T(props);
-  }
-
-  throw new Error(`Can't find drawable for type: ${type} and props: ${JSON.stringify(props)}`);
-};

package/src/drawing-response/icon.jsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from '@mdi/react';
-import {
-  mdiCursorDefault,
-  mdiPencil,
-  mdiMinus,
-  mdiRectangle,
-  mdiCircle,
-  mdiFormatColorText,
-  mdiFormatColorFill,
-  mdiEraser,
-} from '@mdi/js';
-
-const IconWrapper = ({ path }) => {
-  let iconPath;
-
-  switch (path) {
-    case 'mdiPencil':
-      iconPath = mdiPencil;
-      break;
-    case 'mdiMinus':
-      iconPath = mdiMinus;
-      break;
-    case 'mdiCircle':
-      iconPath = mdiCircle;
-      break;
-    case 'mdiRectangle':
-      iconPath = mdiRectangle;
-      break;
-    case 'mdiFormatColorText':
-      iconPath = mdiFormatColorText;
-      break;
-    case 'mdiFormatColorFill':
-      iconPath = mdiFormatColorFill;
-      break;
-    case 'mdiEraser':
-      iconPath = mdiEraser;
-      break;
-    default:
-      iconPath = mdiCursorDefault;
-      break;
-  }
-
-  return <Icon path={iconPath} size={0.8} rotate={180} horizontal vertical color="#2B3963" />;
-};
-
-IconWrapper.propTypes = {
-  path: PropTypes.string.isRequired,
-};
-
-export default IconWrapper;

package/src/drawing-response/index.jsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/render-ui';
-import { styled } from '@mui/material/styles';
-
-import Container from './container';
-
-const StyledUiLayout = styled(UiLayout)({
-  color: color.text(),
-  backgroundColor: color.background(),
-});
-
-const StyledCollapsible = styled(Collapsible)(({ theme }) => ({
-  marginBottom: theme.spacing(2),
-}));
-
-const ErrorDiv = styled('div')({
-  color: color.text(),
-  backgroundColor: color.background(),
-});
-
-class DrawingResponseComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showCorrect: false,
-      hasError: false,
-    };
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true, errorMessage: error.message };
-  }
-
-  render() {
-    const {
-      model: {
-        extraCSSRules,
-        disabled,
-        imageDimensions,
-        imageUrl,
-        prompt,
-        mode,
-        teacherInstructions,
-        backgroundImageEnabled,
-        language,
-      },
-      session,
-      onSessionChange,
-    } = this.props;
-    const { hasError, errorMessage } = this.state;
-    const isEvaluateMode = mode === 'evaluate';
-
-    return hasError ? (
-      <ErrorDiv>An error occured: {errorMessage}</ErrorDiv>
-    ) : (
-      <StyledUiLayout extraCSSRules={extraCSSRules}>
-        {teacherInstructions && (
-          <StyledCollapsible
-            labels={{
-              hidden: 'Show Teacher Instructions',
-              visible: 'Hide Teacher Instructions',
-            }}
-          >
-            <PreviewPrompt prompt={teacherInstructions} />
-          </StyledCollapsible>
-        )}
-
-        {prompt && <PreviewPrompt tagName="span" prompt={prompt} />}
-
-        <Container
-          session={session}
-          onSessionChange={onSessionChange}
-          isEvaluateMode={isEvaluateMode}
-          imageDimensions={imageDimensions}
-          imageUrl={imageUrl}
-          backgroundImageEnabled={backgroundImageEnabled}
-          disabled={disabled}
-          language={language}
-        />
-      </StyledUiLayout>
-    );
-  }
-}
-
-DrawingResponseComponent.propTypes = {
-  model: PropTypes.object.isRequired,
-  onSessionChange: PropTypes.func.isRequired,
-  session: PropTypes.object.isRequired,
-};
-
-export default DrawingResponseComponent;

package/src/index.js

@@ -1,72 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { isEmpty } from 'lodash-es';
-import { renderMath } from '@pie-lib/math-rendering';
-import { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';
-
-import DrawingResponseComponent from './drawing-response';
-
-export default class DrawingResponse extends HTMLElement {
-  constructor() {
-    super();
-    this._root = null;
-  }
-
-  set model(m) {
-    this._model = m;
-
-    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._render();
-  }
-
-  isComplete() {
-    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));
-  }
-
-  sessionChanged = (update) => {
-    this._session.drawables = update.drawables;
-    this._session.texts = update.texts;
-    this._session.width = update.width;
-
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-
-    this._render();
-  };
-
-  set session(s) {
-    this._session = s;
-    this._render();
-  }
-
-  get session() {
-    return this._session;
-  }
-
-  connectedCallback() {
-    this._render();
-  }
-
-  _render() {
-    if (this._model && this._session) {
-      const el = React.createElement(DrawingResponseComponent, {
-        model: this._model,
-        session: this._session,
-        onSessionChange: this.sessionChanged,
-      });
-
-      if (!this._root) {
-        this._root = createRoot(this);
-      }
-      this._root.render(el);
-      queueMicrotask(() => {
-        renderMath(this);
-      });
-    }
-  }
-
-  disconnectedCallback() {
-    if (this._root) {
-      this._root.unmount();
-    }
-  }
-}