@pie-element/math-templated 3.4.7-next.20 → 3.4.7-next.27

package/configure/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.10.0",
+    "@pie-lib/pie-toolbox": "2.10.1",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/package.json

@@ -7,7 +7,7 @@
   "module": "src/index.js",
   "dependencies": {
     "@pie-framework/math-validation": "^1.2.3",
-    "@pie-lib/pie-toolbox": "2.10.0",
+    "@pie-lib/pie-toolbox": "2.10.1",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   },

package/module/configure.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
-import {_dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html} from "../../../@pie-lib/pie-toolbox-module@5.11.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -125523,10 +125523,15 @@ const {omit: require$$13$1} = _dll_lodash;
     (0, _createClass2["default"])(UiLayout, [{
       key: "computeStyle",
       value: function computeStyle(fontSizeFactor) {
-        var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        return {
-          fontSize: ("").concat(rootFontSize * fontSizeFactor, "px")
+        var getFontSize = function getFontSize(element) {
+          return parseFloat(getComputedStyle(element).fontSize);
         };
+        var rootFontSize = getFontSize(document.documentElement);
+        var bodyFontSize = getFontSize(document.body);
+        var effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
+        return fontSizeFactor !== 1 ? {
+          fontSize: ("").concat(effectiveFontSize * fontSizeFactor, "px")
+        } : null;
       }
     }, {
       key: "render",
@@ -125534,11 +125539,12 @@ const {omit: require$$13$1} = _dll_lodash;
         var _this$props = this.props, children = _this$props.children, className = _this$props.className, classes = _this$props.classes, fontSizeFactor = _this$props.fontSizeFactor, rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
         var finalClass = (0, _classnames["default"])(className, classes.extraCSSRules, classes.uiLayoutContainer);
         var restProps = (0, _omit["default"])(rest, 'extraCSSRules');
+        var style = this.computeStyle(fontSizeFactor);
         return _react["default"].createElement("div", (0, _extends2["default"])({
           className: finalClass
-        }, restProps, {
-          style: this.computeStyle(fontSizeFactor)
-        }), children);
+        }, restProps, style && ({
+          style: style
+        })), children);
       }
     }]);
     return UiLayout;

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.0/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -21862,7 +21862,7 @@ const require$$14$5 = _dll_classnames;
     return {
       spacer: {
         display: 'inline-block',
-        width: '1.5em'
+        width: '.75em'
       }
     };
   })(function (props) {
@@ -21889,7 +21889,7 @@ const require$$14$5 = _dll_classnames;
     }
     return null;
   };
-  var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode) {
+  var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode, elementType) {
     if (!value) {
       return null;
     }
@@ -21908,7 +21908,7 @@ const require$$14$5 = _dll_classnames;
         var c = rootRenderChildren(n, value, onChange);
         if (c) {
           children.push(c);
-          if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td') {
+          if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
             children.push(_react["default"].createElement(Spacer, {
               key: ("spacer-").concat(index)
             }));
@@ -21936,9 +21936,14 @@ const require$$14$5 = _dll_classnames;
           }
         } else if (content.length > 0) {
           children.push(content);
+          if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+            children.push(_react["default"].createElement(Spacer, {
+              key: ("spacer-").concat(index)
+            }));
+          }
         }
       } else {
-        var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+        var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
         if (n.type === 'p' || n.type === 'paragraph') {
           children.push(_react["default"].createElement(Paragraph, {
             key: key
@@ -21999,8 +22004,8 @@ const require$$14$5 = _dll_classnames;
     (0, _createClass2["default"])(Mask, [{
       key: "render",
       value: function render() {
-        var _this$props = this.props, value = _this$props.value, layout = _this$props.layout;
-        var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+        var _this$props = this.props, value = _this$props.value, layout = _this$props.layout, elementType = _this$props.elementType;
+        var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
         return _react["default"].createElement(MaskContainer, null, children);
       }
     }]);
@@ -22011,7 +22016,8 @@ const require$$14$5 = _dll_classnames;
     renderChildren: _propTypes["default"].func,
     layout: _propTypes["default"].object,
     value: _propTypes["default"].object,
-    onChange: _propTypes["default"].func
+    onChange: _propTypes["default"].func,
+    elementType: _propTypes["default"].string
   });
 })(mask);
 getDefaultExportFromCjs(mask);
@@ -22117,9 +22123,10 @@ var withMask = function withMask(type, renderChildren) {
     }, {
       key: "render",
       value: function render() {
-        var _this$props = this.props, markup = _this$props.markup, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange;
+        var _this$props = this.props, markup = _this$props.markup, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange, elementType = _this$props.elementType;
         var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
         return _react$2F["default"].createElement(_mask["default"], {
+          elementType: elementType,
           layout: maskLayout,
           value: value,
           onChange: onChange,
@@ -141328,10 +141335,15 @@ const {omit: require$$13$7} = _dll_lodash;
     (0, _createClass2["default"])(UiLayout, [{
       key: "computeStyle",
       value: function computeStyle(fontSizeFactor) {
-        var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        return {
-          fontSize: ("").concat(rootFontSize * fontSizeFactor, "px")
+        var getFontSize = function getFontSize(element) {
+          return parseFloat(getComputedStyle(element).fontSize);
         };
+        var rootFontSize = getFontSize(document.documentElement);
+        var bodyFontSize = getFontSize(document.body);
+        var effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
+        return fontSizeFactor !== 1 ? {
+          fontSize: ("").concat(effectiveFontSize * fontSizeFactor, "px")
+        } : null;
       }
     }, {
       key: "render",
@@ -141339,11 +141351,12 @@ const {omit: require$$13$7} = _dll_lodash;
         var _this$props = this.props, children = _this$props.children, className = _this$props.className, classes = _this$props.classes, fontSizeFactor = _this$props.fontSizeFactor, rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
         var finalClass = (0, _classnames["default"])(className, classes.extraCSSRules, classes.uiLayoutContainer);
         var restProps = (0, _omit["default"])(rest, 'extraCSSRules');
+        var style = this.computeStyle(fontSizeFactor);
         return _react["default"].createElement("div", (0, _extends2["default"])({
           className: finalClass
-        }, restProps, {
-          style: this.computeStyle(fontSizeFactor)
-        }), children);
+        }, restProps, style && ({
+          style: style
+        })), children);
       }
     }]);
     return UiLayout;
@@ -147149,6 +147162,7 @@ const require$$9$A = _dll_prop_types;
           value: value,
           disabled: disabled
         }), _react["default"].createElement(Masked, {
+          elementType: 'drag-in-the-blank',
           markup: markup,
           layout: layout,
           value: value,
@@ -175509,6 +175523,7 @@ const require$$3$6 = _dll_prop_types;
     return _react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
       style: {
         display: 'inline-flex',
+        visibility: props.isFocused ? 'hidden' : 'visible',
         minHeight: '55px',
         minWidth: '178px',
         position: 'relative',
@@ -175536,7 +175551,8 @@ const require$$3$6 = _dll_prop_types;
   ExplicitConstructedResponse.propTypes = {
     attributes: _propTypes["default"].object,
     error: _propTypes["default"].any,
-    value: _propTypes["default"].string
+    value: _propTypes["default"].string,
+    isFocused: _propTypes["default"].bool
   };
   var _default = ExplicitConstructedResponse;
   exports["default"] = _default;
@@ -175862,7 +175878,7 @@ const {isUndefined: require$$3$4} = _dll_lodash;
         onChange(change);
       },
       renderNode: function renderNode(props) {
-        var attributes = props.attributes, n = props.node;
+        var attributes = props.attributes, n = props.node, isFocused = props.isFocused;
         if (n.type === 'explicit_constructed_response') {
           var data = n.data.toJSON();
           var error;
@@ -175871,6 +175887,7 @@ const {isUndefined: require$$3$4} = _dll_lodash;
           }
           return _react["default"].createElement(_explicitConstructedResponse["default"], {
             attributes: attributes,
+            isFocused: isFocused,
             value: data.value,
             error: error && error[data.index] && error[data.index][0]
           });
@@ -180292,6 +180309,11 @@ const require$$21 = _dll_debug;
       },
       '& table:not([border="1"]) td, th': {
         border: '1px solid #dfe2e5'
+      },
+      '& > div::after': {
+        display: 'block',
+        content: '"¶"',
+        color: '#146EB3'
       }
     },
     toolbarOnTop: {

package/module/manifest.json

@@ -4,11 +4,11 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "3.3.5"
+      "version": "3.4.0"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.10.5"
+      "version": "5.11.0"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.4.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.11.0/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -21825,7 +21825,7 @@ const require$$14$5 = _dll_classnames;
     return {
       spacer: {
         display: 'inline-block',
-        width: '1.5em'
+        width: '.75em'
       }
     };
   })(function (props) {
@@ -21852,7 +21852,7 @@ const require$$14$5 = _dll_classnames;
     }
     return null;
   };
-  var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode) {
+  var renderChildren = function renderChildren(layout, value, onChange, rootRenderChildren, parentNode, elementType) {
     if (!value) {
       return null;
     }
@@ -21871,7 +21871,7 @@ const require$$14$5 = _dll_classnames;
         var c = rootRenderChildren(n, value, onChange);
         if (c) {
           children.push(c);
-          if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td') {
+          if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
             children.push(_react["default"].createElement(Spacer, {
               key: ("spacer-").concat(index)
             }));
@@ -21899,9 +21899,14 @@ const require$$14$5 = _dll_classnames;
           }
         } else if (content.length > 0) {
           children.push(content);
+          if ((parentNode === null || parentNode === void 0 ? void 0 : parentNode.type) !== 'td' && elementType === 'drag-in-the-blank') {
+            children.push(_react["default"].createElement(Spacer, {
+              key: ("spacer-").concat(index)
+            }));
+          }
         }
       } else {
-        var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n);
+        var subNodes = renderChildren(n, value, onChange, rootRenderChildren, n, elementType);
         if (n.type === 'p' || n.type === 'paragraph') {
           children.push(_react["default"].createElement(Paragraph, {
             key: key
@@ -21962,8 +21967,8 @@ const require$$14$5 = _dll_classnames;
     (0, _createClass2["default"])(Mask, [{
       key: "render",
       value: function render() {
-        var _this$props = this.props, value = _this$props.value, layout = _this$props.layout;
-        var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren);
+        var _this$props = this.props, value = _this$props.value, layout = _this$props.layout, elementType = _this$props.elementType;
+        var children = renderChildren(layout, value, this.handleChange, this.props.renderChildren, null, elementType);
         return _react["default"].createElement(MaskContainer, null, children);
       }
     }]);
@@ -21974,7 +21979,8 @@ const require$$14$5 = _dll_classnames;
     renderChildren: _propTypes["default"].func,
     layout: _propTypes["default"].object,
     value: _propTypes["default"].object,
-    onChange: _propTypes["default"].func
+    onChange: _propTypes["default"].func,
+    elementType: _propTypes["default"].string
   });
 })(mask);
 getDefaultExportFromCjs(mask);
@@ -22080,9 +22086,10 @@ var withMask = function withMask(type, renderChildren) {
     }, {
       key: "render",
       value: function render() {
-        var _this$props = this.props, markup = _this$props.markup, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange;
+        var _this$props = this.props, markup = _this$props.markup, layout = _this$props.layout, value = _this$props.value, onChange = _this$props.onChange, elementType = _this$props.elementType;
         var maskLayout = layout ? layout : buildLayoutFromMarkup(markup, type);
         return _react$2F["default"].createElement(_mask["default"], {
+          elementType: elementType,
           layout: maskLayout,
           value: value,
           onChange: onChange,
@@ -141291,10 +141298,15 @@ const {omit: require$$13$7} = _dll_lodash;
     (0, _createClass2["default"])(UiLayout, [{
       key: "computeStyle",
       value: function computeStyle(fontSizeFactor) {
-        var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        return {
-          fontSize: ("").concat(rootFontSize * fontSizeFactor, "px")
+        var getFontSize = function getFontSize(element) {
+          return parseFloat(getComputedStyle(element).fontSize);
         };
+        var rootFontSize = getFontSize(document.documentElement);
+        var bodyFontSize = getFontSize(document.body);
+        var effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
+        return fontSizeFactor !== 1 ? {
+          fontSize: ("").concat(effectiveFontSize * fontSizeFactor, "px")
+        } : null;
       }
     }, {
       key: "render",
@@ -141302,11 +141314,12 @@ const {omit: require$$13$7} = _dll_lodash;
         var _this$props = this.props, children = _this$props.children, className = _this$props.className, classes = _this$props.classes, fontSizeFactor = _this$props.fontSizeFactor, rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
         var finalClass = (0, _classnames["default"])(className, classes.extraCSSRules, classes.uiLayoutContainer);
         var restProps = (0, _omit["default"])(rest, 'extraCSSRules');
+        var style = this.computeStyle(fontSizeFactor);
         return _react["default"].createElement("div", (0, _extends2["default"])({
           className: finalClass
-        }, restProps, {
-          style: this.computeStyle(fontSizeFactor)
-        }), children);
+        }, restProps, style && ({
+          style: style
+        })), children);
       }
     }]);
     return UiLayout;
@@ -147112,6 +147125,7 @@ const require$$9$A = _dll_prop_types;
           value: value,
           disabled: disabled
         }), _react["default"].createElement(Masked, {
+          elementType: 'drag-in-the-blank',
           markup: markup,
           layout: layout,
           value: value,
@@ -175472,6 +175486,7 @@ const require$$3$6 = _dll_prop_types;
     return _react["default"].createElement("span", (0, _extends2["default"])({}, attributes, {
       style: {
         display: 'inline-flex',
+        visibility: props.isFocused ? 'hidden' : 'visible',
         minHeight: '55px',
         minWidth: '178px',
         position: 'relative',
@@ -175499,7 +175514,8 @@ const require$$3$6 = _dll_prop_types;
   ExplicitConstructedResponse.propTypes = {
     attributes: _propTypes["default"].object,
     error: _propTypes["default"].any,
-    value: _propTypes["default"].string
+    value: _propTypes["default"].string,
+    isFocused: _propTypes["default"].bool
   };
   var _default = ExplicitConstructedResponse;
   exports["default"] = _default;
@@ -175825,7 +175841,7 @@ const {isUndefined: require$$3$4} = _dll_lodash;
         onChange(change);
       },
       renderNode: function renderNode(props) {
-        var attributes = props.attributes, n = props.node;
+        var attributes = props.attributes, n = props.node, isFocused = props.isFocused;
         if (n.type === 'explicit_constructed_response') {
           var data = n.data.toJSON();
           var error;
@@ -175834,6 +175850,7 @@ const {isUndefined: require$$3$4} = _dll_lodash;
           }
           return _react["default"].createElement(_explicitConstructedResponse["default"], {
             attributes: attributes,
+            isFocused: isFocused,
             value: data.value,
             error: error && error[data.index] && error[data.index][0]
           });
@@ -180255,6 +180272,11 @@ const require$$21 = _dll_debug;
       },
       '& table:not([border="1"]) td, th': {
         border: '1px solid #dfe2e5'
+      },
+      '& > div::after': {
+        display: 'block',
+        content: '"¶"',
+        color: '#146EB3'
       }
     },
     toolbarOnTop: {

package/package.json

@@ -4,19 +4,19 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "3.4.7-next.20+7bbd8efd3",
+  "version": "3.4.7-next.27+622eab7fb",
   "description": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.10.0",
+    "@pie-lib/pie-toolbox": "2.10.1",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "7bbd8efd3949373ca6f7e92d8d21bf38f9fe5128",
+  "gitHead": "622eab7fb4903086040bebc83387e8628da1846e",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },