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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+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();
+    }
+  }
+}

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/button.d.ts

@@ -1,29 +0,0 @@
-/**
- * @synced-from pie-elements/packages/drawing-response/configure/src/button.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-declare const CustomButton: {
-    ({ label, onClick, disabled }: {
-        label: any;
-        onClick: any;
-        disabled: any;
-    }): React.JSX.Element;
-    propTypes: {
-        disabled: PropTypes.Requireable<boolean>;
-        label: PropTypes.Requireable<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    defaultProps: {
-        className: string;
-        disabled: boolean;
-        label: string;
-        onClick: () => void;
-    };
-};
-export default CustomButton;

package/dist/author/button.js

@@ -1,25 +0,0 @@
-import "react";
-import e from "prop-types";
-import { jsx as t } from "react/jsx-runtime";
-import { styled as n } from "@mui/material/styles";
-import r from "@mui/material/Button";
-//#region src/author/button.tsx
-var i = n(r)({ marginLeft: 8 }), a = ({ label: e, onClick: n, disabled: r }) => /* @__PURE__ */ t(i, {
-	onClick: n,
-	disabled: r,
-	size: "small",
-	variant: "contained",
-	children: e
-});
-a.propTypes = {
-	disabled: e.bool,
-	label: e.string,
-	onClick: e.func
-}, a.defaultProps = {
-	className: "",
-	disabled: !1,
-	label: "Add",
-	onClick: () => {}
-};
-//#endregion
-export { a as default };