@pie-element/drawing-response 3.9.11 → 3.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "3.9.11",
+  "version": "3.9.14",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -11,8 +11,8 @@
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.3.12",
-    "@pie-lib/render-ui": "^4.12.4",
+    "@pie-lib/math-rendering": "^2.3.13",
+    "@pie-lib/render-ui": "^4.12.5",
     "classnames": "^2.2.6",
     "enzyme-to-json": "^3.3.5",
     "konva": "^3.4.1",
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "cd1a2efd59f915b882937dea95c2675b2d2a3a50",
+  "gitHead": "b32a90d35916de8f2b77d7b3428b02efbd145313",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap

@@ -212,7 +212,14 @@ exports[`Container snapshot renders 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": NaN,
+          "maxHeight": NaN,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -240,6 +247,7 @@ exports[`Container snapshot renders 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {
@@ -466,7 +474,14 @@ exports[`Container snapshot renders disabled 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": NaN,
+          "maxHeight": NaN,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -495,6 +510,7 @@ exports[`Container snapshot renders disabled 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {

package/src/drawing-response/__tests__/__snapshots__/drawing-main.test.jsx.snap

@@ -26,7 +26,12 @@ exports[`DrawingResponse DrawableMain snapshot renders 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef
@@ -58,7 +63,12 @@ exports[`DrawingResponse DrawableMain snapshot renders disabled 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef

package/src/drawing-response/__tests__/container.test.jsx

@@ -1,5 +1,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
 import { Container } from '../container';
 
 beforeEach(() => {

package/src/drawing-response/__tests__/drawing-main.test.jsx

@@ -507,7 +507,8 @@ describe('DrawingResponse', () => {
         startx: 200,
         starty: 200,
         x: 300,
-        y: 300
+        y: 300,
+        scale: 1
       };
       wrapper = mkWrapper('DrawableText', props, 'div');
     });

package/src/drawing-response/container.jsx

@@ -29,7 +29,8 @@ export class Container extends Component {
     session: PropTypes.object.isRequired,
     onSessionChange: PropTypes.func.isRequired,
     imageDimensions: PropTypes.object.isRequired,
-    imageUrl: PropTypes.string.isRequired
+    imageUrl: PropTypes.string.isRequired,
+    backgroundImageEnabled: PropTypes.bool.isRequired
   };
 
   constructor(props) {
@@ -37,6 +38,7 @@ export class Container extends Component {
     const TextEntry = new DrawableText();
 
     this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
         width: 0
@@ -80,12 +82,42 @@ export class Container extends Component {
 
   componentDidMount() {
     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,
+          });
+        }
+      });
+    });
+
+    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();
   }
 
   handleMakeToolActive(tool) {
@@ -131,7 +163,8 @@ export class Container extends Component {
       imageUrl,
       imageDimensions,
       onSessionChange,
-      session
+      session,
+      backgroundImageEnabled
     } = this.props;
     const {
       drawableDimensions,
@@ -145,6 +178,8 @@ export class Container extends Component {
       TextEntry
     } = this.state;
 
+    const heightToUse = drawableDimensions * this.state.scale;
+
     return (
       <div className={classes.base}>
         <DrawablePalette
@@ -185,8 +220,10 @@ export class Container extends Component {
               this.drawable = drawable;
             }}
             className={classes.drawableHeight}
+            style={{ height: heightToUse, maxHeight: heightToUse }}
           >
             <DrawableMain
+              scale={this.state.scale}
               session={session}
               disabled={disabled}
               onSessionChange={onSessionChange}
@@ -198,6 +235,7 @@ export class Container extends Component {
               imageDimensions={imageDimensions}
               toolActive={toolActive}
               TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
             />
           </div>
         </div>

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

@@ -5,11 +5,12 @@ import { withStyles } from '@material-ui/core/styles';
 const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
   <div className={classes.imageContainer}>
     <img
+      alt="drawing-response-image"
       className={classes.image}
       src={url}
       style={{
         height,
-        maxWidth: width,
+        maxWidth: 598,
         maxHeight: 350,
         width,
       }}

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

@@ -90,13 +90,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseDown = e => {
     const { newDrawable, textIsSelected } = this.state;
-    const { toolActive, fillColor, outlineColor } = this.props;
+    const { toolActive, fillColor, outlineColor, scale } = this.props;
 
     if (newDrawable.length === 0 && !textIsSelected) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const newDrawable = factory(toolActive.type, {
-        startx: x,
-        starty: y,
+        startx: x / scale,
+        starty: y / scale,
         fillColor,
         outlineColor,
         createdAt: new Date()
@@ -110,12 +110,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseUp = e => {
     const { newDrawable, drawables } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const drawableToAdd = newDrawable[0];
 
-      drawableToAdd.registerMovement(x, y);
+      drawableToAdd.registerMovement(x / scale, y / scale);
       drawables.push(drawableToAdd);
 
       this.setState(
@@ -130,12 +131,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseMove = e => {
     const { newDrawable } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const updatedNewDrawable = newDrawable[0];
 
-      updatedNewDrawable.registerMovement(x, y);
+      updatedNewDrawable.registerMovement(x / scale, y / scale);
 
       this.setState({
         newDrawable: [updatedNewDrawable]
@@ -185,7 +187,9 @@ export class DrawableMain extends React.Component {
       paintColor,
       outlineColor,
       TextEntry,
-      toolActive: { type }
+      backgroundImageEnabled = true,
+      toolActive: { type },
+      scale
     } = this.props;
     const { isOver, newDrawable } = this.state;
 
@@ -205,7 +209,8 @@ export class DrawableMain extends React.Component {
       handleSessionChange: this.handleSessionChange,
       stage: this.stage,
       onMouseOverElement: this.onMouseOverElement,
-      onMouseOutElement: this.onMouseOutElement
+      onMouseOutElement: this.onMouseOutElement,
+      scale
     };
 
     let listeners = {};
@@ -221,6 +226,9 @@ export class DrawableMain extends React.Component {
       }
     }
 
+    const imageHeight = imageDimensions.height * scale;
+    const imageWidth = imageDimensions.width * scale;
+
     return (
       <div>
         <div className={classes.undoControls}>
@@ -228,13 +236,17 @@ export class DrawableMain extends React.Component {
           <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all" />
         </div>
         <div className={classes.base}>
-          {imageUrl && (
-            <ImageBackground dimensions={imageDimensions} url={imageUrl} />
+          {backgroundImageEnabled && imageUrl && (
+            <ImageBackground
+              dimensions={{height: imageHeight, width: imageWidth}}
+              url={imageUrl}/>
           )}
 
           {TextEntry.renderTextareas()}
 
           <Stage
+            scaleX={scale}
+            scaleY={scale}
             ref={ref => {
               this.stage = ref;
             }}
@@ -297,7 +309,9 @@ DrawableMain.propTypes = {
   imageUrl: PropTypes.string.isRequired,
   TextEntry: PropTypes.object.isRequired,
   toolActive: PropTypes.object.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
+  backgroundImageEnabled: PropTypes.bool.isRequired,
+  scale: PropTypes.number.isRequired
 };
 
 export default withStyles(styles)(DrawableMain);

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

@@ -193,7 +193,7 @@ export default class TextDrawable {
   handleTransform = (e, textNode) => {
     this[textNode].setAttrs({
       width: this[textNode].width() * this[textNode].scaleX(),
-      scaleX: 1
+      scaleX: this.props.scale,
     });
   };
 

package/src/drawing-response/index.jsx

@@ -27,7 +27,8 @@ class DrawingResponseComponent extends React.Component {
         imageUrl,
         prompt,
         mode,
-        teacherInstructions
+        teacherInstructions,
+        backgroundImageEnabled = true
       },
       session,
       onSessionChange,
@@ -64,6 +65,7 @@ class DrawingResponseComponent extends React.Component {
           isEvaluateMode={isEvaluateMode}
           imageDimensions={imageDimensions}
           imageUrl={imageUrl}
+          backgroundImageEnabled={backgroundImageEnabled}
           disabled={disabled}
         />
       </div>