@pie-element/number-line 0.1.0

package/src/author/arrows.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/arrows.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { InputCheckbox } from '@pie-lib/config-ui';
+
+const FlexRow: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+});
+
+const ArrowsContainer: any = styled('div')(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+  display: 'flex',
+  gap: theme.spacing(2),
+  alignItems: 'center',
+  '& > *': {
+    flexShrink: 0,
+  },
+  '& label': {
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+    textOverflow: 'clip',
+  },
+  '& .MuiFormControlLabel-root': {
+    margin: 0,
+    marginRight: 0,
+  },
+  '& .MuiFormControlLabel-label': {
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+    textOverflow: 'clip',
+    maxWidth: 'none',
+    width: 'auto',
+    flexShrink: 0,
+  },
+}));
+
+export class Arrows extends React.Component {
+  static propTypes = {
+    arrows: PropTypes.shape({ left: PropTypes.bool, right: PropTypes.bool }).isRequired,
+    onChange: PropTypes.func,
+  };
+  static defaultProps = {
+    arrows: { left: true, right: true },
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.change = (key, event, value) => {
+      const update = { ...this.props.arrows, [key]: value };
+      this.props.onChange(update);
+    };
+    this.changeLeft = this.change.bind(this, 'left');
+    this.changeRight = this.change.bind(this, 'right');
+  }
+
+  render() {
+    const { arrows } = this.props;
+    return (
+      <FlexRow>
+        <label>Arrows</label>
+        <ArrowsContainer>
+          <InputCheckbox label={'Left'} checked={arrows.left} onChange={this.changeLeft} />
+          <InputCheckbox
+            label={'Right'}
+            checked={arrows.right}
+            onChange={this.changeRight}
+          />
+        </ArrowsContainer>
+      </FlexRow>
+    );
+  }
+}
+
+export default Arrows;

package/src/author/card-bar.tsx

@@ -0,0 +1,70 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/card-bar.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import HelpIcon from '@mui/icons-material/HelpOutline';
+import IconButton from '@mui/material/IconButton';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Typography from '@mui/material/Typography';
+
+const CardBarContainer: any = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+const FlexContainer: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const StyledIconButton: any = styled(IconButton)({
+  margin: 0,
+  padding: 0,
+});
+
+const CardBar = (props) => {
+  const { header, children, mini, info } = props;
+
+  return (
+    <CardBarContainer>
+      <FlexContainer>
+        <Typography variant={mini ? 'subheading' : 'h5'}>{header}</Typography>
+        {info}
+      </FlexContainer>
+      {children && (
+        <Tooltip
+          title={children}
+          slotProps={{
+            tooltip: {
+              sx: (theme) => ({
+                fontSize: theme.typography.fontSize - 2,
+              }),
+            },
+          }}
+        >
+          <StyledIconButton aria-label="Delete" size="large">
+            <HelpIcon />
+          </StyledIconButton>
+        </Tooltip>
+      )}
+    </CardBarContainer>
+  );
+};
+
+CardBar.propTypes = {
+  mini: PropTypes.bool,
+  header: PropTypes.string,
+  children: PropTypes.node,
+  info: PropTypes.any,
+};
+
+export default CardBar;

package/src/author/defaults.ts

@@ -0,0 +1,127 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export const model = {
+  correctResponse: [],
+  feedback: {
+    correct: { default: 'Correct', type: 'none' },
+    incorrect: { default: 'Incorrect', type: 'none' },
+    partial: { default: 'Nearly', type: 'none' },
+  },
+  graph: {
+    arrows: { left: true, right: true },
+    availableTypes: {
+      PF: true,
+    },
+    domain: { min: -1, max: 1 },
+    exhibitOnly: false,
+    initialElements: [],
+    initialType: 'PF',
+    maxNumberOfPoints: 1,
+    ticks: { minor: 0.125, major: 0.5, tickIntervalType: 'Decimal' },
+    title: '',
+    width: 500,
+  },
+  prompt: '',
+  promptEnabled: true,
+  rationale: '',
+  rationaleEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+  widthEnabled: true,
+};
+
+export const configuration = {
+  baseInputConfiguration: {
+    h3: { disabled: true },
+    audio: { disabled: false },
+    video: { disabled: false },
+    image: { disabled: false },
+    textAlign: { disabled: true },
+    showParagraphs: { disabled: false },
+  },
+  instruction: {
+    settings: false,
+    enabled: true,
+    label:
+      'Number line questions involve plotting points or other objects. To create one, first set up the number line, then select the plotting tools students will be offered and use them to define the correct answer.',
+  },
+  prompt: {
+    settings: true,
+    label: 'Item Stem',
+    required: false,
+    inputConfiguration: {
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+    },
+  },
+  rationale: {
+    settings: true,
+    label: 'Rationale',
+    required: false,
+    inputConfiguration: {
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+    },
+  },
+  teacherInstructions: {
+    settings: true,
+    label: 'Teacher Instructions',
+    required: false,
+    inputConfiguration: {
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+    },
+  },
+  title: {
+    label: 'Title',
+    settings: true,
+    enabled: true,
+    inputConfiguration: {
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+    },
+  },
+  numberLineDimensions: {
+    settings: true,
+    label: 'Width',
+    enabled: true,
+    min: 200,
+    max: 800,
+    step: 20,
+  },
+  mathMlOptions: {
+    mmlOutput: false,
+    mmlEditing: false,
+  },
+  language: {
+    settings: false,
+    label: 'Specify Language',
+    enabled: false,
+  },
+  languageChoices: {
+    label: 'Language Choices',
+    options: [],
+  },
+  spellCheck: {
+    label: 'Spellcheck',
+    settings: false,
+    enabled: true,
+  },
+  maxMaxElements: 20,
+  hidePointConfigButtons: false,
+  availableTools: ['PF', 'LFF', 'LEF', 'LFE', 'LEE', 'RFN', 'RFP', 'REN', 'REP'],
+  settingsPanelDisabled: false,
+};

package/src/author/domain.tsx

@@ -0,0 +1,79 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/domain.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { MiniField } from './number-text-field.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { styled } from '@mui/material/styles';
+
+const DOMAIN_BEGIN = 'domainBegin';
+const DOMAIN_END = 'domainEnd';
+
+const DisplayFlex: any = styled('div')({
+  display: 'flex',
+  gap: '20px',
+});
+
+const FlexRow: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '10px',
+});
+
+const sort = (domain) => {
+  if (domain.min <= domain.max) {
+    return domain;
+  }
+  return { min: domain.max, max: domain.min };
+};
+
+export class Domain extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.changeMin = this.change.bind(this, 'min');
+    this.changeMax = this.change.bind(this, 'max');
+  }
+
+  change(key, event, value) {
+    const { onChange } = this.props;
+    let update;
+    //Added condition when min and max is same, then it should not update the value
+    if ((key === 'min' && value === this.props.domain.max) || (key === 'max' && value === this.props.domain.min)) {
+      update = { ...this.props.domain };
+    } else {
+      update = { ...this.props.domain, [key]: value };
+    }
+    onChange(sort(update));
+  }
+
+  render() {
+    const { domain } = this.props;
+
+    return (
+      <DisplayFlex>
+        <FlexRow>
+          <label>Min Value</label>
+          <MiniField min={-100000} max={99999} value={domain.min} name={DOMAIN_BEGIN} onChange={this.changeMin} />
+        </FlexRow>
+        <FlexRow>
+          <label>Max Value</label>
+          <MiniField min={-99999} max={100000} value={domain.max} name={DOMAIN_END} onChange={this.changeMax} />
+        </FlexRow>
+      </DisplayFlex>
+    );
+  }
+}
+Domain.propTypes = {
+  domain: PropTypes.shape({ min: PropTypes.number, max: PropTypes.number }),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Domain;

package/src/author/index.ts

@@ -0,0 +1,199 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import Main from './main.js';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  ModelUpdatedEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+  InsertImageEvent,
+  DeleteImageEvent,
+} from '@pie-element/shared-configure-events';
+import * as defaults from './defaults.js';
+import * as math from 'mathjs';
+import { cloneDeep } from 'lodash-es';
+
+// this function is duplicated in controller; at some point, use the same shared function
+const updateTicks = (model) => {
+  const { graph: { domain, labelStep, ticks = {} } = {} } = model;
+  const { minor, major } = ticks;
+
+  if (domain) {
+    domain.min = Number((domain.min || 0).toFixed(2));
+    domain.max = Number((domain.max || 0).toFixed(2));
+  }
+
+  if (labelStep && typeof labelStep === 'string' && labelStep.match(/^[1-9][0-9]*\/[1-9][0-9]*$/g)) {
+    model.graph.fraction = true;
+    ticks.tickIntervalType = 'Fraction';
+
+    // update the ticks frequency and label value to match the label step if needed
+    const step = math.evaluate(labelStep);
+
+    if (step !== major) {
+      ticks.major = step;
+      ticks.minor = step / (major / minor);
+    }
+  }
+
+  return model;
+};
+
+export default class NumberLine extends HTMLElement {
+  static createDefaultModel = (model = {}) => {
+    const c = defaults.configuration;
+    let language = model.language || '';
+
+    if (!language && c.language && c.language.enabled) {
+      if (c.languageChoices?.options?.length) {
+        language = c.languageChoices.options[0].value;
+      }
+    }
+
+    const normalizedModel = {
+      ...defaults.model,
+      ...model,
+      language,
+    };
+
+    return updateTicks(normalizedModel);
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = NumberLine.createDefaultModel();
+    this._configuration = defaults.configuration;
+  }
+
+  set model(m) {
+    this._model = NumberLine.createDefaultModel(m);
+    this._modelCopy = cloneDeep(this._model);
+
+    this._rerender();
+  }
+
+  resetModelAfterConfigurationIsSet: any = () => {
+    // In environments that use pie-player-components, model is set before configuration.
+    // This is the reason why sometimes the model gets altered non-reversible
+    // (altered using default configuration instead of client configuration, because at that point client configuration was not set yet)
+    // Therefore, in such environments, we will make sure to keep a modelCopy (initialised in set model) and use it to reset
+    // the model in set configuration (resetModelAfterConfigurationIsSet) if set configuration is ever called
+    const pieAuthors = document.querySelectorAll('pie-author');
+    this.hasPlayerAsParent = Array.from(pieAuthors).some((author) => author.contains(this));
+
+    if (this.hasPlayerAsParent) {
+      if (this._modelCopy) {
+        this._model = this._modelCopy;
+      } else {
+        delete this._modelCopy;
+      }
+    }
+  };
+
+  set configuration(c) {
+    const newConfiguration = {
+      ...defaults.configuration,
+      ...c,
+    };
+
+    this._configuration = newConfiguration;
+
+    this.resetModelAfterConfigurationIsSet();
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (newConfiguration?.language?.enabled) {
+      if (newConfiguration?.languageChoices?.options?.length) {
+        this._model.language = newConfiguration?.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language,
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this._rerender();
+  }
+
+  onChange: any = (o) => {
+    this._model = { ...this._model, ...o };
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model));
+
+    this._rerender();
+  };
+
+  onConfigurationChanged: any = (config) => {
+    this._configuration = config;
+    this._render();
+  };
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _rerender() {
+    let element = React.createElement(Main, {
+      model: this._model,
+      configuration: this._configuration,
+      onChange: this.onChange,
+      onConfigurationChanged: this.onConfigurationChanged,
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this),
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}