@pie-element/rubric 3.5.1-next.13 → 3.5.1

package/configure/src/pie-toolbox-rubric/authoring.jsx

@@ -0,0 +1,412 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
+import times from 'lodash/times';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import grey from '@material-ui/core/colors/grey';
+import Typography from '@material-ui/core/Typography';
+import DragIndicator from '@material-ui/icons/DragIndicator';
+import EditableHtml from '@pie-lib/pie-toolbox/editable-html';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import debug from 'debug';
+import takeRight from 'lodash/takeRight';
+import PointMenu from './point-menu';
+
+import range from 'lodash/range';
+import { InputContainer } from '@pie-lib/pie-toolbox/config-ui';
+
+const log = debug('pie-lib:rubric:authoring');
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  maxPoints: PropTypes.number,
+  rubriclessInstruction: PropTypes.string,
+});
+
+const MaxPoints = withStyles((theme) => ({
+  formControl: {
+    minWidth: '120px',
+    margin: theme.spacing.unit,
+  },
+}))((props) => {
+  const { value, onChange, max, classes } = props;
+
+  return (
+    <FormControl className={classes.formControl} variant="outlined">
+      <InputLabel width={100} htmlFor="...">
+        Max Points
+      </InputLabel>
+      <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
+        {range(1, max + 1).map((v) => (
+          <MenuItem key={`${v}`} value={v}>
+            {v}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+});
+
+// if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
+// if the value is '', the Sample Answer input field will be empty
+const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
+
+export const PointConfig = withStyles((theme) => ({
+  pointConfig: {},
+  row: {
+    display: 'flex',
+    width: '100%',
+    position: 'relative',
+  },
+  editor: {
+    width: '100%',
+    backgroundColor: `${theme.palette.common.white} !important`,
+  },
+  dragIndicator: {
+    paddingTop: theme.spacing.unit,
+    color: grey[500],
+  },
+  pointsLabel: {
+    color: grey[500],
+    paddingBottom: theme.spacing.unit,
+    textTransform: 'uppercase',
+  },
+  sampleAnswersEditor: {
+    paddingLeft: theme.spacing.unit * 3,
+  },
+  pointMenu: {
+    position: 'absolute',
+    right: 0,
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingLeft: theme.spacing.unit * 3,
+    paddingTop: theme.spacing.unit,
+  },
+}))((props) => {
+  const { points, content, classes, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {}, excludeZero } = props;
+  const pointsCount = excludeZero ? points + 1 : points;
+  const pointsLabel = `${pointsCount} ${pointsCount <= 1 ? 'pt' : 'pts'}`;
+  const showSampleAnswer = checkSampleAnswer(sampleAnswer);
+
+  return (
+    <div className={classes.pointConfig}>
+      <Typography variant="overline" className={classes.pointsLabel}>
+        {pointsLabel}
+      </Typography>
+
+      <div className={classes.row}>
+        <DragIndicator className={classes.dragIndicator} />
+        <EditableHtml
+          className={classes.editor}
+          error={error}
+          pluginProps={pluginOpts}
+          markup={content}
+          onChange={props.onChange}
+          mathMlOptions={mathMlOptions}
+        />
+        <PointMenu
+          classes={{
+            icon: classes.pointMenu,
+          }}
+          showSampleAnswer={showSampleAnswer}
+          onChange={props.onMenuChange}
+        />
+      </div>
+      {error && <div className={classes.errorText}>{error}</div>}
+      {!showSampleAnswer && (
+        <div className={classes.sampleAnswersEditor}>
+          <Typography variant="overline" className={classes.dragIndicator}>
+            Sample Response
+          </Typography>
+          <EditableHtml
+            className={classes.editor}
+            markup={sampleAnswer}
+            pluginProps={pluginOpts}
+            onChange={props.onSampleChange}
+            mathMlOptions={mathMlOptions}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export class RawAuthoring extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    value: RubricType,
+    config: PropTypes.object,
+    pluginOpts: PropTypes.object,
+    rubricless: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+
+  static defaultProps = {};
+
+  dragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+
+    const { value, onChange } = this.props;
+
+    const points = reorder(value.points, result.source.index, result.destination.index);
+    const sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
+
+    onChange({ ...value, points, sampleAnswers });
+  };
+
+  changeRubriclessInstruction = (input) => {
+    const { value, onChange } = this.props;
+    onChange({ ...value, rubriclessInstruction: input });
+  };
+
+  changeMaxPoints = (maxPoints) => {
+    const { value, onChange } = this.props;
+
+    onChange({ ...value, maxPoints });
+  };
+
+  changeContent = (index, content, type) => {
+    // type could be 'points' or 'sampleAnswers'
+    log(`changeModel[${type}]:`, index, content);
+
+    if (type !== 'points' && type !== 'sampleAnswers') {
+      return;
+    }
+
+    const { value, onChange } = this.props;
+    const items = value[type] && Array.from(value[type]);
+
+    items.splice(index, 1, content);
+    log(`changeModel[${type}]:`, items);
+
+    onChange({ ...value, [type]: items });
+  };
+
+  excludeZeros = () => {
+    const { value, onChange } = this.props;
+
+    onChange({ ...value, excludeZero: !value.excludeZero });
+  };
+
+  onPointMenuChange = (index, clickedItem) => {
+    if (clickedItem === 'sample') {
+      const { value } = this.props;
+      const sampleAnswers = Array.from(value.sampleAnswers || []);
+
+      if (checkSampleAnswer(sampleAnswers[index])) {
+        // an empty string will display an empty Sample Answer input field
+        this.changeContent(index, '', 'sampleAnswers');
+      } else {
+        // when the content is null or 'null', the Sample Answer input field will not be displayed
+        this.changeContent(index, null, 'sampleAnswers');
+      }
+    }
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      value,
+      mathMlOptions = {},
+      config = {},
+      rubricless = false,
+      pluginOpts = {},
+    } = this.props;
+    let {
+      excludeZeroEnabled = true,
+      maxPointsEnabled = true,
+      errors = {},
+      rubriclessInstructionEnabled = false,
+      maxPoints = 10,
+    } = value || {};
+    // rubric will contain a max value for maxPoints
+    const { rubriclessInstruction = {}, maxMaxPoints = 10 } = config || {};
+    const { pointsDescriptorsErrors } = errors || {};
+    if (value && Number.isFinite(value.maxPoints)) {
+      // eslint-disable-next-line no-console
+      console.warn('maxPoints is deprecated - remove from model');
+    }
+
+    // for rubric value is computed based on points
+    const maxPointsValue = maxPoints;
+
+    return (
+      <div className={classNames(classes.class, className)}>
+        <Typography variant="h5" className={classes.rubricTitle}>
+          Rubric
+        </Typography>
+        <FormGroup row>
+          {maxPointsEnabled && (
+            <MaxPoints
+              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
+              value={maxPointsValue}
+              onChange={this.changeMaxPoints}
+              pluginOpts={pluginOpts}
+            />
+          )}
+          {excludeZeroEnabled && (
+            <FormControlLabel
+              label="Exclude zeros"
+              control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
+            />
+          )}
+        </FormGroup>
+
+        {rubriclessInstructionEnabled && rubricless && (
+          <InputContainer label={rubriclessInstruction.label} className={classes.inputContainer}>
+            <EditableHtml
+              className={classes.input}
+              markup={value.rubriclessInstruction || ''}
+              onChange={this.changeRubriclessInstruction}
+              pluginProps={pluginOpts}
+              nonEmpty={false}
+              disableUnderline
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+          </InputContainer>
+        )}
+
+        <div className={rubricless ? classes.rubricless : classes.container}>
+          <DragDropContext onDragEnd={this.dragEnd}>
+            <Droppable droppableId="droppable">
+              {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                  {value.points.map(
+                    (p, index) => {
+                      return                         (
+                          <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
+                            {(provided) => (
+                                <div
+                                    className={classes.configHolder}
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
+                                >
+                                  <PointConfig
+                                      points={value.points.length - 1 - index}
+                                      content={p}
+                                      error={
+                                          pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index]
+                                      }
+                                      sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
+                                      onChange={(content) => this.changeContent(index, content, 'points')}
+                                      onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
+                                      onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
+                                      mathMlOptions={mathMlOptions}
+                                      pluginOpts={pluginOpts}
+                                      excludeZero={value.excludeZero}
+                                  />
+                                </div>
+                            )}
+                          </Draggable>
+                      );
+                    },
+                  )}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  container: {
+    backgroundColor: grey[200],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: grey[300],
+    padding: theme.spacing.unit * 2,
+    margin: theme.spacing.unit,
+  },
+  inputContainer: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+  },
+  rubricless: {
+    display: 'none',
+  },
+  configHolder: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+  },
+  rubricTitle: {
+    paddingLeft: theme.spacing.unit,
+    margin: theme.spacing.unit,
+  },
+});
+
+const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
+
+const Reverse = (props) => {
+  const { rubricless = false, config = {}, pluginOpts = {} } = props || {};
+  const points = Array.from(props.value.points || []).reverse();
+  let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
+
+  if (points.length > sampleAnswers.length) {
+    sampleAnswers = times(points.length - sampleAnswers.length)
+      .map(() => null)
+      .concat(sampleAnswers);
+  }
+
+  const value = { ...props.value, points, sampleAnswers };
+
+  const onChange = (value) => {
+    props.onChange({
+      ...value,
+      points: Array.from(value.points || []).reverse(),
+      sampleAnswers: Array.from(value.sampleAnswers || []).reverse(),
+    });
+  };
+
+  return (
+    <StyledRawAuthoring
+      value={value}
+      config={config}
+      onChange={onChange}
+      rubricless={rubricless}
+      pluginOpts={pluginOpts}
+    />
+  );
+};
+
+Reverse.propTypes = {
+  value: RubricType,
+  config: PropTypes.object,
+  pluginOpts: PropTypes.object,
+  rubricless: PropTypes.bool,
+  getIndex: PropTypes.func,
+  onChange: PropTypes.func,
+};
+
+export default Reverse;

package/configure/src/pie-toolbox-rubric/index.js

@@ -0,0 +1,9 @@
+import Authoring from './authoring';
+
+const RUBRIC_TYPES = {
+  SIMPLE_RUBRIC: 'simpleRubric',
+  MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
+  RUBRICLESS: 'rubricless',
+};
+
+export { Authoring, RUBRIC_TYPES };

package/configure/src/pie-toolbox-rubric/point-menu.jsx

@@ -0,0 +1,94 @@
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import IconButton from '@material-ui/core/IconButton';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export class IconMenu extends React.Component {
+  static propTypes = {
+    opts: PropTypes.object,
+    onClick: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: undefined,
+      open: false,
+    };
+  }
+
+  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
+
+  handleRequestClose = () => this.setState({ open: false });
+
+  render() {
+    const { opts, onClick, classes } = this.props;
+    const { open, anchorEl } = this.state;
+    const keys = Object.keys(opts) || [];
+
+    const handleMenuClick = (key) => () => {
+      onClick(key);
+      this.handleRequestClose();
+    };
+
+    const iconColor = open ? 'inherit' : 'disabled';
+
+    return (
+      <div>
+        <div onClick={this.handleClick}>
+          <IconButton className={classes.icon}>
+            {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}
+          </IconButton>
+        </div>
+        <Menu
+          id="point-menu"
+          anchorEl={anchorEl}
+          open={open}
+          onClose={this.handleRequestClose}
+          style={{ transform: 'translate(-15px, -15px)' }}
+          transformOrigin={{
+            vertical: 'center',
+            horizontal: 'right',
+          }}
+        >
+          {keys.map((k, index) => (
+            <MenuItem key={index} onClick={handleMenuClick(k)}>
+              {opts[k]}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default class PointMenu extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    showSampleAnswer: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    classes: {},
+  };
+
+  render() {
+    const { onChange, classes, showSampleAnswer } = this.props;
+    const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
+
+    return (
+      <IconMenu
+        onClick={(key) => onChange(key)}
+        opts={{
+          sample: sampleText,
+        }}
+        classes={classes}
+      />
+    );
+  }
+}

package/controller/package.json

@@ -7,7 +7,7 @@
     "test": "./node_modules/.bin/jest"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.12.0",
+    "@pie-lib/pie-toolbox": "1.11.1",
     "lodash": "^4.17.15"
   }
 }

package/lib/print.js

@@ -31,7 +31,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 
 var _main = _interopRequireDefault(require("./main"));
 
-var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
+var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
 
 var _debug = _interopRequireDefault(require("debug"));
 
@@ -79,7 +79,7 @@ var RubricPrint = /*#__PURE__*/function (_HTMLElement) {
 
         _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
           log('render complete - render math');
-          (0, _mathRenderingAccessible.renderMath)((0, _assertThisInitialized2["default"])(_this));
+          (0, _mathRendering.renderMath)((0, _assertThisInitialized2["default"])(_this));
         });
       } else {
         log('skip');

package/lib/print.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/print.js"],"names":["log","preparePrintModel","model","opts","instr","role","value","mode","animationsDisabled","RubricPrint","_options","_model","_session","_rerender","printModel","element","React","createElement","Main","ReactDOM","render","leading","trailing","o","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0BAAN,CAAZ;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAQC,IAAR,EAAiB;AACzC,MAAMC,KAAK,GAAGD,IAAI,CAACE,IAAL,KAAc,YAA5B;;AAEA,MAAI,CAACD,KAAL,EAAY;AACV,WAAO,EAAP;AACD;;AAEDF,EAAAA,KAAK,CAACI,KAAN,qBAAmBJ,KAAnB;AACAA,EAAAA,KAAK,CAACK,IAAN,GAAa,UAAb;AACAL,EAAAA,KAAK,CAACM,kBAAN,GAA2B,IAA3B;AAEA,SAAON,KAAP;AACD,CAZD;;IAcqBO,W;;;;;AACnB,yBAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,QAAL,GAAgB,IAAhB;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,EAAhB;AACA,UAAKC,SAAL,GAAiB,0BACf,YAAM;AACJ,UAAI,MAAKF,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAME,UAAU,GAAGb,iBAAiB,CAAC,MAAKU,MAAN,EAAc,MAAKD,QAAnB,CAApC;;AAEA,YAAMK,OAAO,GACX,MAAKL,QAAL,iBACAM,kBAAMC,aAAN,CAAoBC,gBAApB,oBACKJ,UADL,EAFF;;AAMAK,6BAASC,MAAT,CAAgBL,OAAhB,kDAA+B,YAAM;AACnCf,UAAAA,GAAG,CAAC,+BAAD,CAAH;AACA;AACD,SAHD;AAID,OAbD,MAaO;AACLA,QAAAA,GAAG,CAAC,MAAD,CAAH;AACD;AACF,KAlBc,EAmBf,EAnBe,EAoBf;AAAEqB,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KApBe,CAAjB;AALY;AA2Bb;;;;SACD,aAAYC,CAAZ,EAAe;AACb,WAAKb,QAAL,GAAgBa,CAAhB;AACD;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKb,MAAL,GAAca,CAAd;;AACA,WAAKX,SAAL;AACD;;;WAED,6BAAoB,CAAE;;;kDAtCiBY,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport debug from 'debug';\n\nconst log = debug('pie-element:rubric:print');\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  if (!instr) {\n    return {};\n  }\n\n  model.value = { ...model };\n  model.mode = 'evaluate';\n  model.animationsDisabled = true;\n\n  return model;\n};\n\nexport default class RubricPrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              ...printModel,\n            });\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n}\n"],"file":"print.js"}
+{"version":3,"sources":["../src/print.js"],"names":["log","preparePrintModel","model","opts","instr","role","value","mode","animationsDisabled","RubricPrint","_options","_model","_session","_rerender","printModel","element","React","createElement","Main","ReactDOM","render","leading","trailing","o","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0BAAN,CAAZ;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAQC,IAAR,EAAiB;AACzC,MAAMC,KAAK,GAAGD,IAAI,CAACE,IAAL,KAAc,YAA5B;;AAEA,MAAI,CAACD,KAAL,EAAY;AACV,WAAO,EAAP;AACD;;AAEDF,EAAAA,KAAK,CAACI,KAAN,qBAAmBJ,KAAnB;AACAA,EAAAA,KAAK,CAACK,IAAN,GAAa,UAAb;AACAL,EAAAA,KAAK,CAACM,kBAAN,GAA2B,IAA3B;AAEA,SAAON,KAAP;AACD,CAZD;;IAcqBO,W;;;;;AACnB,yBAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,QAAL,GAAgB,IAAhB;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,EAAhB;AACA,UAAKC,SAAL,GAAiB,0BACf,YAAM;AACJ,UAAI,MAAKF,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAME,UAAU,GAAGb,iBAAiB,CAAC,MAAKU,MAAN,EAAc,MAAKD,QAAnB,CAApC;;AAEA,YAAMK,OAAO,GACX,MAAKL,QAAL,iBACAM,kBAAMC,aAAN,CAAoBC,gBAApB,oBACKJ,UADL,EAFF;;AAMAK,6BAASC,MAAT,CAAgBL,OAAhB,kDAA+B,YAAM;AACnCf,UAAAA,GAAG,CAAC,+BAAD,CAAH;AACA;AACD,SAHD;AAID,OAbD,MAaO;AACLA,QAAAA,GAAG,CAAC,MAAD,CAAH;AACD;AACF,KAlBc,EAmBf,EAnBe,EAoBf;AAAEqB,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KApBe,CAAjB;AALY;AA2Bb;;;;SACD,aAAYC,CAAZ,EAAe;AACb,WAAKb,QAAL,GAAgBa,CAAhB;AACD;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKb,MAAL,GAAca,CAAd;;AACA,WAAKX,SAAL;AACD;;;WAED,6BAAoB,CAAE;;;kDAtCiBY,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:rubric:print');\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  if (!instr) {\n    return {};\n  }\n\n  model.value = { ...model };\n  model.mode = 'evaluate';\n  model.animationsDisabled = true;\n\n  return model;\n};\n\nexport default class RubricPrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              ...printModel,\n            });\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n}\n"],"file":"print.js"}