@pie-element/rubric 8.1.2-next.5 → 8.1.3

package/configure/src/index.js

@@ -0,0 +1,139 @@
+import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent } from '@pie-framework/pie-configure-events';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+
+import Main from './main';
+import defaults from './defaults';
+
+const modelWithDefaults = (m) => ({ ...defaults.model, ...m });
+
+const configurationWithDefaults = (c) => ({ ...defaults.configuration, ...c });
+
+export default class RubricElement extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+    debug.log('constructor called');
+    this._model = modelWithDefaults();
+    this._configuration = configurationWithDefaults();
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  updateModelAccordingToReceivedProps = (nextModel) => {
+    const currentModel = { ...this._model };
+
+    if (!nextModel) {
+      return currentModel;
+    }
+
+    const validatedModel = { ...nextModel };
+
+    // excludeZero should be false and disabled when maxPoints is 1
+    if (validatedModel.maxPoints === 1) {
+      validatedModel.excludeZero = false;
+    }
+
+    const { maxPoints, excludeZero } = validatedModel || {};
+
+    validatedModel.points = validatedModel.points ? [...validatedModel.points] : [];
+    validatedModel.sampleAnswers = validatedModel.sampleAnswers ? [...validatedModel.sampleAnswers] : [];
+
+    const howManyPointsShouldHave = excludeZero ? maxPoints : maxPoints + 1;
+    const howManyPointsDoesItHave = validatedModel.points.length;
+
+    const excludeZeroChanged = currentModel?.excludeZero !== nextModel?.excludeZero;
+    const maxPointsChanged = currentModel?.maxPoints !== nextModel?.maxPoints;
+
+    if (howManyPointsDoesItHave < howManyPointsShouldHave) {
+      if (excludeZeroChanged && !excludeZero) {
+        validatedModel.points = ['', ...validatedModel.points];
+        validatedModel.sampleAnswers = [null, ...validatedModel.sampleAnswers];
+      }
+
+      if (maxPointsChanged) {
+        for (let i = 0; i < howManyPointsShouldHave - howManyPointsDoesItHave; i++) {
+          validatedModel.points.push('');
+          validatedModel.sampleAnswers.push(null);
+        }
+      }
+    } else if (howManyPointsDoesItHave > howManyPointsShouldHave) {
+      if (excludeZeroChanged && excludeZero) {
+        validatedModel.points = validatedModel.points.slice(1);
+        validatedModel.sampleAnswers = validatedModel.sampleAnswers.slice(1);
+      }
+
+      if (maxPointsChanged) {
+        validatedModel.points = validatedModel.points.slice(0, howManyPointsShouldHave);
+        validatedModel.sampleAnswers = validatedModel.sampleAnswers.slice(0, howManyPointsShouldHave);
+      }
+    }
+
+    return validatedModel;
+  };
+
+  set model(m) {
+    this._model = this.updateModelAccordingToReceivedProps(modelWithDefaults(m));
+    this._render();
+  }
+
+  set configuration(c) {
+    this._configuration = configurationWithDefaults(c);
+    this._render();
+  }
+
+  onModelChanged(m) {
+    this._model = this.updateModelAccordingToReceivedProps(m);
+    this._render();
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
+  }
+
+  onConfigurationChanged = (c) => {
+    this._configuration = configurationWithDefaults(c);
+
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+
+    this._render();
+  };
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    if (this._model) {
+      let element = React.createElement(Main, {
+        model: this._model,
+        configuration: this._configuration,
+        onModelChanged: this.onModelChanged,
+        onConfigurationChanged: this.onConfigurationChanged,
+        imageSupport: {
+          add: this.insertImage.bind(this),
+          delete: this.onDeleteImage.bind(this),
+        },
+      });
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(element);
+    }
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/configure/src/main.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Authoring } from '@pie-lib/rubric';
+import { styled } from '@mui/material/styles';
+import { layout, settings } from '@pie-lib/config-ui';
+
+const { Panel, toggle } = settings;
+
+const StyledDiv = styled('div')(({ theme, width }) => ({
+  maxWidth: width,
+  fontFamily: 'Cerebri Sans',
+  fontSize: theme.typography.fontSize,
+}));
+
+class Main extends React.Component {
+  verifyRubriclessModel = (m, config) => {
+    const { rubricless = false } = config || {};
+    return rubricless ? (({ points, sampleAnswers, ...rest }) => rest)(m) : m;
+  };
+
+  render() {
+    const { model, configuration, onConfigurationChanged, onModelChanged, imageSupport } = this.props || {};
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      settingsPanelDisabled,
+      showExcludeZero = {},
+      showMaxPoint = {},
+      mathMlOptions = {},
+      rubricless = false,
+      rubriclessInstruction,
+      width,
+    } = configuration || {};
+
+    // ensure to eliminate points and sampleAnswers in case of rubricless
+    const value = this.verifyRubriclessModel(model, configuration);
+    const { extraCSSRules } = model;
+
+    const panelProperties = {
+      excludeZeroEnabled: showExcludeZero.settings && toggle(showExcludeZero.label),
+      maxPointsEnabled: showMaxPoint.settings && toggle(showMaxPoint.label),
+      rubriclessInstructionEnabled: rubricless && rubriclessInstruction.settings && toggle(rubriclessInstruction.label),
+    };
+
+    const getPluginProps = (props) => {
+      return Object.assign(
+        {
+          ...baseInputConfiguration,
+        },
+        props || {},
+      );
+    };
+
+    return (
+      <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
+        dimensions={contentDimensions}
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            onChangeModel={onModelChanged}
+            configuration={configuration}
+            onChangeConfiguration={onConfigurationChanged}
+            pluginOpts={getPluginProps(rubriclessInstruction?.inputConfiguration)}
+            groups={{
+              Properties: panelProperties,
+            }}
+            imageSupport={imageSupport}
+          />
+        }        >
+        <StyledDiv width={width}>
+          <Authoring
+            value={value}
+            config={configuration}
+            onChange={onModelChanged}
+            mathMlOptions={mathMlOptions}
+            rubricless={rubricless}
+            pluginOpts={baseInputConfiguration}
+            imageSupport={imageSupport}
+          />
+        </StyledDiv>
+      </layout.ConfigLayout>
+    );
+  }
+}
+
+export default Main;

package/controller/CHANGELOG.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "bump all packages to avoid tag conflict",
+    "merge": null,
+    "header": "fix: bump all packages to avoid tag conflict",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "d9ec9a8689f0a391594b5e2f4ea958c6dc9f6d7b",
+    "gitTags": " (develop)",
+    "committerDate": "2020-04-10 20:01:37 +0100",
+    "isTagged": true,
+    "tag": "@pie-element/rubric-controller@1.1.1"
+  }
+]