@pie-element/complex-rubric 3.7.6-next.12 → 3.7.6-next.17

package/controller/package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.23.2",
+    "@pie-lib/pie-toolbox": "2.23.3",
     "lodash": "^4.17.15"
   },
   "author": "",

package/module/configure.js

@@ -1,6 +1,6 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@5.5.2/module/index.js";
 import RubricConfigure from '@pie-element/rubric/configure/lib';
-import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@8.5.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@8.5.2/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -151135,6 +151135,9 @@ const require$$16$3 = _dll_classnames;
       (0, _classCallCheck2["default"])(this, BlankContent);
       _this = _super.call(this, props);
       _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
+      _this.state = {
+        hoveredElementSize: null
+      };
       return _this;
     }
     (0, _createClass2["default"])(BlankContent, [{
@@ -151155,21 +151158,46 @@ const require$$16$3 = _dll_classnames;
           this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
         }
       }
+    }, {
+      key: "getSnapshotBeforeUpdate",
+      value: function getSnapshotBeforeUpdate(prevProps) {
+        if (!prevProps.isOver && this.props.isOver && this.elementRef) {
+          var node = this.elementRef;
+          return {
+            width: node.offsetWidth,
+            height: node.offsetHeight
+          };
+        }
+        return null;
+      }
     }, {
       key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        if (this.elementRef) {
+      value: function componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.elementRef && typeof _mathRendering.renderMath === 'function') {
           (0, _mathRendering.renderMath)(this.elementRef);
         }
+        if (snapshot && (!this.state.hoveredElementSize || this.state.hoveredElementSize.width !== snapshot.width || this.state.hoveredElementSize.height !== snapshot.height)) {
+          this.setState({
+            hoveredElementSize: snapshot
+          });
+          return;
+        }
+        if (prevProps.isOver && !this.props.isOver && this.state.hoveredElementSize) {
+          this.setState({
+            hoveredElementSize: null
+          });
+        }
       }
     }, {
       key: "render",
       value: function render() {
         var _this2 = this;
         var _this$props = this.props, n = _this$props.n, children = _this$props.children, isDragging = _this$props.isDragging, dragItem = _this$props.dragItem, isOver = _this$props.isOver, value = _this$props.value;
+        var hoveredElementSize = this.state.hoveredElementSize;
         var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
         var finalLabel = isDragging ? "\xA0" : label;
         var hasGrip = finalLabel !== "\xA0";
+        var isPreview = dragItem && isOver;
         return _react["default"].createElement("div", {
           ref: function ref(_ref) {
             return _this2.elementRef = _ref;
@@ -151178,13 +151206,15 @@ const require$$16$3 = _dll_classnames;
             display: 'inline-flex',
             minWidth: '178px',
             minHeight: '36px',
-            background: '#FFF',
-            border: '1px solid #C0C3CF',
+            background: isPreview ? ("").concat(_renderUi.color.defaults.BORDER_LIGHT) : ("").concat(_renderUi.color.defaults.WHITE),
+            border: isPreview ? ("1px solid  ").concat(_renderUi.color.defaults.BORDER_DARK) : ("1px solid  ").concat(_renderUi.color.defaults.BORDER_LIGHT),
             boxSizing: 'border-box',
             borderRadius: '3px',
             overflow: 'hidden',
             position: 'relative',
-            padding: '8px 8px 8px 35px'
+            padding: '8px 8px 8px 35px',
+            width: hoveredElementSize ? hoveredElementSize.width : undefined,
+            height: hoveredElementSize ? hoveredElementSize.height : undefined
           },
           "data-key": n.key,
           contentEditable: false
@@ -151246,7 +151276,9 @@ const require$$16$3 = _dll_classnames;
   var DropTile = (0, _drag.DropTarget)('drag-in-the-blank-choice', tileTarget, function (connect, monitor) {
     return {
       connectDropTarget: connect.dropTarget(),
-      isOver: monitor.isOver(),
+      isOver: monitor.isOver({
+        shallow: true
+      }),
       dragItem: monitor.getItem()
     };
   })(connectedBlankContent);

package/module/element.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@5.5.2/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@8.5.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@8.5.2/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -149237,6 +149237,9 @@ const require$$16$3 = _dll_classnames;
       (0, _classCallCheck2["default"])(this, BlankContent);
       _this = _super.call(this, props);
       _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
+      _this.state = {
+        hoveredElementSize: null
+      };
       return _this;
     }
     (0, _createClass2["default"])(BlankContent, [{
@@ -149257,21 +149260,46 @@ const require$$16$3 = _dll_classnames;
           this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
         }
       }
+    }, {
+      key: "getSnapshotBeforeUpdate",
+      value: function getSnapshotBeforeUpdate(prevProps) {
+        if (!prevProps.isOver && this.props.isOver && this.elementRef) {
+          var node = this.elementRef;
+          return {
+            width: node.offsetWidth,
+            height: node.offsetHeight
+          };
+        }
+        return null;
+      }
     }, {
       key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        if (this.elementRef) {
+      value: function componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.elementRef && typeof _mathRendering.renderMath === 'function') {
           (0, _mathRendering.renderMath)(this.elementRef);
         }
+        if (snapshot && (!this.state.hoveredElementSize || this.state.hoveredElementSize.width !== snapshot.width || this.state.hoveredElementSize.height !== snapshot.height)) {
+          this.setState({
+            hoveredElementSize: snapshot
+          });
+          return;
+        }
+        if (prevProps.isOver && !this.props.isOver && this.state.hoveredElementSize) {
+          this.setState({
+            hoveredElementSize: null
+          });
+        }
       }
     }, {
       key: "render",
       value: function render() {
         var _this2 = this;
         var _this$props = this.props, n = _this$props.n, children = _this$props.children, isDragging = _this$props.isDragging, dragItem = _this$props.dragItem, isOver = _this$props.isOver, value = _this$props.value;
+        var hoveredElementSize = this.state.hoveredElementSize;
         var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
         var finalLabel = isDragging ? "\xA0" : label;
         var hasGrip = finalLabel !== "\xA0";
+        var isPreview = dragItem && isOver;
         return _react["default"].createElement("div", {
           ref: function ref(_ref) {
             return _this2.elementRef = _ref;
@@ -149280,13 +149308,15 @@ const require$$16$3 = _dll_classnames;
             display: 'inline-flex',
             minWidth: '178px',
             minHeight: '36px',
-            background: '#FFF',
-            border: '1px solid #C0C3CF',
+            background: isPreview ? ("").concat(_renderUi.color.defaults.BORDER_LIGHT) : ("").concat(_renderUi.color.defaults.WHITE),
+            border: isPreview ? ("1px solid  ").concat(_renderUi.color.defaults.BORDER_DARK) : ("1px solid  ").concat(_renderUi.color.defaults.BORDER_LIGHT),
             boxSizing: 'border-box',
             borderRadius: '3px',
             overflow: 'hidden',
             position: 'relative',
-            padding: '8px 8px 8px 35px'
+            padding: '8px 8px 8px 35px',
+            width: hoveredElementSize ? hoveredElementSize.width : undefined,
+            height: hoveredElementSize ? hoveredElementSize.height : undefined
           },
           "data-key": n.key,
           contentEditable: false
@@ -149348,7 +149378,9 @@ const require$$16$3 = _dll_classnames;
   var DropTile = (0, _drag.DropTarget)('drag-in-the-blank-choice', tileTarget, function (connect, monitor) {
     return {
       connectDropTarget: connect.dropTarget(),
-      isOver: monitor.isOver(),
+      isOver: monitor.isOver({
+        shallow: true
+      }),
       dragItem: monitor.getItem()
     };
   })(connectedBlankContent);

package/module/manifest.json

@@ -8,7 +8,7 @@
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "8.5.1"
+      "version": "8.5.2"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@5.5.2/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@8.5.1/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@8.5.2/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -149237,6 +149237,9 @@ const require$$16$3 = _dll_classnames;
       (0, _classCallCheck2["default"])(this, BlankContent);
       _this = _super.call(this, props);
       _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2["default"])(_this));
+      _this.state = {
+        hoveredElementSize: null
+      };
       return _this;
     }
     (0, _createClass2["default"])(BlankContent, [{
@@ -149257,21 +149260,46 @@ const require$$16$3 = _dll_classnames;
           this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
         }
       }
+    }, {
+      key: "getSnapshotBeforeUpdate",
+      value: function getSnapshotBeforeUpdate(prevProps) {
+        if (!prevProps.isOver && this.props.isOver && this.elementRef) {
+          var node = this.elementRef;
+          return {
+            width: node.offsetWidth,
+            height: node.offsetHeight
+          };
+        }
+        return null;
+      }
     }, {
       key: "componentDidUpdate",
-      value: function componentDidUpdate() {
-        if (this.elementRef) {
+      value: function componentDidUpdate(prevProps, prevState, snapshot) {
+        if (this.elementRef && typeof _mathRendering.renderMath === 'function') {
           (0, _mathRendering.renderMath)(this.elementRef);
         }
+        if (snapshot && (!this.state.hoveredElementSize || this.state.hoveredElementSize.width !== snapshot.width || this.state.hoveredElementSize.height !== snapshot.height)) {
+          this.setState({
+            hoveredElementSize: snapshot
+          });
+          return;
+        }
+        if (prevProps.isOver && !this.props.isOver && this.state.hoveredElementSize) {
+          this.setState({
+            hoveredElementSize: null
+          });
+        }
       }
     }, {
       key: "render",
       value: function render() {
         var _this2 = this;
         var _this$props = this.props, n = _this$props.n, children = _this$props.children, isDragging = _this$props.isDragging, dragItem = _this$props.dragItem, isOver = _this$props.isOver, value = _this$props.value;
+        var hoveredElementSize = this.state.hoveredElementSize;
         var label = dragItem && isOver ? dragItem.value.value : value.value || "\xA0";
         var finalLabel = isDragging ? "\xA0" : label;
         var hasGrip = finalLabel !== "\xA0";
+        var isPreview = dragItem && isOver;
         return _react["default"].createElement("div", {
           ref: function ref(_ref) {
             return _this2.elementRef = _ref;
@@ -149280,13 +149308,15 @@ const require$$16$3 = _dll_classnames;
             display: 'inline-flex',
             minWidth: '178px',
             minHeight: '36px',
-            background: '#FFF',
-            border: '1px solid #C0C3CF',
+            background: isPreview ? ("").concat(_renderUi.color.defaults.BORDER_LIGHT) : ("").concat(_renderUi.color.defaults.WHITE),
+            border: isPreview ? ("1px solid  ").concat(_renderUi.color.defaults.BORDER_DARK) : ("1px solid  ").concat(_renderUi.color.defaults.BORDER_LIGHT),
             boxSizing: 'border-box',
             borderRadius: '3px',
             overflow: 'hidden',
             position: 'relative',
-            padding: '8px 8px 8px 35px'
+            padding: '8px 8px 8px 35px',
+            width: hoveredElementSize ? hoveredElementSize.width : undefined,
+            height: hoveredElementSize ? hoveredElementSize.height : undefined
           },
           "data-key": n.key,
           contentEditable: false
@@ -149348,7 +149378,9 @@ const require$$16$3 = _dll_classnames;
   var DropTile = (0, _drag.DropTarget)('drag-in-the-blank-choice', tileTarget, function (connect, monitor) {
     return {
       connectDropTarget: connect.dropTarget(),
-      isOver: monitor.isOver(),
+      isOver: monitor.isOver({
+        shallow: true
+      }),
       dragItem: monitor.getItem()
     };
   })(connectedBlankContent);

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pie-element/complex-rubric",
   "repository": "pie-framework/pie-elements",
-  "version": "3.7.6-next.12+0b31f66ae",
+  "version": "3.7.6-next.17+fe5bbd145",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^4.6.6-next.12+0b31f66ae",
-    "@pie-element/rubric": "^4.9.6-next.12+0b31f66ae",
+    "@pie-element/multi-trait-rubric": "^4.6.6-next.17+fe5bbd145",
+    "@pie-element/rubric": "^4.9.6-next.17+fe5bbd145",
     "@pie-framework/pie-player-events": "^0.1.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "0b31f66aef7c7bb051b32eb96bf0c20999be943b",
+  "gitHead": "fe5bbd1455a83f8d2a97029ec86ffce85e8a5e59",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },