@pie-element/drawing-response 3.7.3-next.133 → 3.7.3-next.1332

package/controller/src/__tests__/index.test.js

@@ -12,7 +12,8 @@ describe('controller', () => {
         height: 0,
         width: 0
       },
-      teacherInstructions: 'Teacher Instructions'
+      teacherInstructions: 'Teacher Instructions',
+      backgroundImageEnabled: true
     };
   });
 
@@ -56,7 +57,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -69,7 +71,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: null,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -83,7 +86,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -96,7 +100,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: question.teacherInstructions
+          teacherInstructions: question.teacherInstructions,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -112,7 +117,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -125,7 +131,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -138,7 +145,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: question.teacherInstructions
+          teacherInstructions: question.teacherInstructions,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -154,7 +162,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
     });

package/controller/src/index.js

@@ -7,6 +7,7 @@ export const normalize = question => ({
   promptEnabled: true,
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
+  backgroundImageEnabled: true,
   ...question,
 });
 
@@ -16,7 +17,8 @@ export function model(question, session, env) {
     imageUrl,
     imageDimensions,
     prompt,
-    promptEnabled
+    promptEnabled,
+    backgroundImageEnabled
   } = normalizedQuestion;
 
   return new Promise(resolve => {
@@ -26,6 +28,7 @@ export function model(question, session, env) {
       imageDimensions,
       imageUrl,
       prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/docs/config-schema.json

@@ -40,6 +40,22 @@
         }
       }
     },
+    "spellCheck": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
     "studentInstructions": {
       "title": "ConfigureProp",
       "type": "object",
@@ -72,6 +88,64 @@
         }
       }
     },
+    "maxImageWidth": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "maxImageHeight": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "withRubric": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
     "showPrompt": {
       "description": "Determines whether prompt field will be displayed or not",
       "default": true,
@@ -122,6 +196,27 @@
           "title": "label"
         }
       }
+    },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/docs/config-schema.json.md

@@ -31,6 +31,18 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `spellCheck` (object)
+
+Properties of the `spellCheck` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
 # `studentInstructions` (object)
 
 Properties of the `studentInstructions` object:
@@ -55,6 +67,50 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+# `maxImageWidth` (object)
+
+Properties of the `maxImageWidth` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+# `maxImageHeight` (object)
+
+Properties of the `maxImageHeight` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+# `withRubric` (object)
+
+Properties of the `withRubric` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
 # `showPrompt` (boolean)
 
 Determines whether prompt field will be displayed or not
@@ -100,4 +156,20 @@ Indicates if the item has to be displayed in the Settings Panel
 
 ### `label` (string)
 
-Indicates the label for the item that has to be displayed in the Settings Panel
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale

package/docs/demo/generate.js

@@ -3,10 +3,12 @@ exports.model = (id, element) => ({
   element,
   prompt: 'This is the question prompt',
   promptEnabled: true,
+  backgroundImageEnabled: true,
   toolbarEditorPosition: 'bottom',
   imageUrl: '',
   imageDimensions: {
     height: 0,
     width: 0
-  }
+  },
+  rubricEnabled: false
 });

package/docs/pie-schema.json

@@ -63,6 +63,16 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
+    "backgroundImageEnabled": {
+      "description": "Indicates if Background Image is enabled",
+      "type": "boolean",
+      "title": "backgroundImageEnabled"
+    },
     "toolbarEditorPosition": {
       "description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
       "default": ": 'bottom'",
@@ -73,6 +83,11 @@
       "type": "string",
       "title": "toolbarEditorPosition"
     },
+    "rubricEnabled": {
+      "description": "Indicates if Rubric is enabled",
+      "type": "boolean",
+      "title": "rubricEnabled"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -85,9 +100,12 @@
     }
   },
   "required": [
+    "backgroundImageEnabled",
     "element",
     "id",
     "imageDimensions",
+    "rubricEnabled",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
@@ -129,6 +147,27 @@
         }
       }
     },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
     "Dimension": {
       "title": "Dimension",
       "type": "object",

package/docs/pie-schema.json.md

@@ -46,6 +46,14 @@ Indicates if Student Instructions are enabled
 
 Indicates if Teacher Instructions are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
+# `backgroundImageEnabled` (boolean, required)
+
+Indicates if Background Image is enabled
+
 # `toolbarEditorPosition` (string, enum)
 
 Indicates the editor's toolbar position which can be 'bottom' or 'top'
@@ -57,6 +65,10 @@ This element must be one of the following enum values:
 
 Default: `": 'bottom'"`
 
+# `rubricEnabled` (boolean, required)
+
+Indicates if Rubric is enabled
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -100,6 +112,22 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
 ## `Dimension` (object)
 
 Properties of the `Dimension` object:

package/lib/drawing-response/container.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -43,9 +43,13 @@ var _drawableText = _interopRequireDefault(require("./drawable-text"));
 
 var _icon = _interopRequireDefault(require("./icon"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var TOOLS = _constants["default"].tools;
 var ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map(function (c) {
@@ -77,6 +81,7 @@ var Container = /*#__PURE__*/function (_Component) {
     });
     var TextEntry = new _drawableText["default"]();
     _this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
         width: 0
@@ -132,13 +137,49 @@ var Container = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this3 = this;
+
       this.setDimensions();
+      this.observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function () {
+          var _document$getElementB, _document$getElementB2;
+
+          var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.style) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.cssText;
+          var zoom = target === null || target === void 0 ? void 0 : target.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+          var zoomParsed = zoom === null || zoom === void 0 ? void 0 : zoom.replace(/\s/g, '');
+
+          if (zoomParsed) {
+            var newScale = parseFloat(zoomParsed) / 100;
+
+            if (newScale !== _this3.state.scale) {
+              _this3.setState({
+                scale: parseFloat(zoomParsed) / 100
+              });
+            }
+          } else if (!zoomParsed && _this3.state.scale !== 1) {
+            _this3.setState({
+              scale: 1
+            });
+          }
+        });
+      });
+      var target = document.getElementById('question-container');
+
+      if (target) {
+        this.observer.observe(target, {
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$observer;
+
       var TextEntry = this.state.TextEntry;
       TextEntry.removeEventListeners();
+      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
     }
   }, {
     key: "handleMakeToolActive",
@@ -167,7 +208,7 @@ var Container = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this4 = this;
 
       var _this$props = this.props,
           classes = _this$props.classes,
@@ -175,7 +216,8 @@ var Container = /*#__PURE__*/function (_Component) {
           imageUrl = _this$props.imageUrl,
           imageDimensions = _this$props.imageDimensions,
           onSessionChange = _this$props.onSessionChange,
-          session = _this$props.session;
+          session = _this$props.session,
+          backgroundImageEnabled = _this$props.backgroundImageEnabled;
       var _this$state = this.state,
           drawableDimensions = _this$state.drawableDimensions,
           toolActive = _this$state.toolActive,
@@ -186,9 +228,10 @@ var Container = /*#__PURE__*/function (_Component) {
           paintColor = _this$state.paintColor,
           paintColorList = _this$state.paintColorList,
           TextEntry = _this$state.TextEntry;
+      var heightToUse = drawableDimensions.height * this.state.scale;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
-      }, /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
+      }, !disabled && /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
         fillColor: fillColor,
         fillList: fillColorList,
         outlineColor: outlineColor,
@@ -196,39 +239,44 @@ var Container = /*#__PURE__*/function (_Component) {
         paintColor: paintColor,
         paintList: paintColorList,
         onFillColorChange: function onFillColorChange(color) {
-          return _this3.handleColorChange('fill', color);
+          return _this4.handleColorChange('fill', color);
         },
         onOutlineColorChange: function onOutlineColorChange(color) {
-          return _this3.handleColorChange('outline', color);
+          return _this4.handleColorChange('outline', color);
         },
         onPaintColorChange: function onPaintColorChange(color) {
-          return _this3.handleColorChange('paint', color);
+          return _this4.handleColorChange('paint', color);
         }
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.box
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.toolbar
-      }, /*#__PURE__*/_react["default"].createElement("div", null, TOOLS.map(function (tool) {
+      }, TOOLS.map(function (tool) {
         var type = tool.type,
             label = tool.label,
             icon = tool.icon;
         return /*#__PURE__*/_react["default"].createElement(_button["default"], {
           title: label,
           key: type,
-          disabled: _this3.checkIfToolIsDisabled(type),
+          disabled: _this4.checkIfToolIsDisabled(type),
           onClick: function onClick() {
-            return _this3.handleMakeToolActive(tool);
+            return _this4.handleMakeToolActive(tool);
           },
           label: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
             path: icon
           })
         });
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
+      })), /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(drawable) {
-          _this3.drawable = drawable;
+          _this4.drawable = drawable;
         },
-        className: classes.drawableHeight
+        className: classes.drawableHeight,
+        style: {
+          height: heightToUse,
+          maxHeight: heightToUse
+        }
       }, /*#__PURE__*/_react["default"].createElement(_drawableMain["default"], {
+        scale: this.state.scale,
         session: session,
         disabled: disabled,
         onSessionChange: onSessionChange,
@@ -239,7 +287,8 @@ var Container = /*#__PURE__*/function (_Component) {
         drawableDimensions: drawableDimensions,
         imageDimensions: imageDimensions,
         toolActive: toolActive,
-        TextEntry: TextEntry
+        TextEntry: TextEntry,
+        backgroundImageEnabled: backgroundImageEnabled
       }))));
     }
   }]);
@@ -253,7 +302,8 @@ exports.Container = Container;
   session: _propTypes["default"].object.isRequired,
   onSessionChange: _propTypes["default"].func.isRequired,
   imageDimensions: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired
+  imageUrl: _propTypes["default"].string.isRequired,
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired
 });
 
 var styles = function styles(theme) {
@@ -264,19 +314,24 @@ var styles = function styles(theme) {
     box: {
       border: '1px solid #E0E1E6',
       borderRadius: '5px',
-      marginTop: theme.spacing.unit * 2
+      marginTop: theme.spacing.unit * 2,
+      backgroundColor: '#ECEDF1'
     },
     drawableHeight: {
-      minHeight: 350
+      minHeight: 350,
+      backgroundColor: '#fff'
     },
     toolbar: {
-      backgroundColor: '#ECEDF1',
       borderBottom: '1px solid #E0E1E6',
       borderTopLeftRadius: '5px',
       borderTopRightRadius: '5px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      padding: '12px 8px'
+      padding: '12px 8px 4px',
+      boxSizing: 'border-box',
+      maxWidth: 'calc(100% - 163px)',
+      // 163px is the width set on undoControls
+      '& button': {
+        marginBottom: '8px'
+      }
     }
   };
 };