@pie-element/number-line 0.1.0

package/src/delivery/number-line/index.tsx

@@ -0,0 +1,385 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/index.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 Toggle from '@pie-lib/correct-answer-toggle';
+import { cloneDeep, isArray, isEqual, isNumber } from 'lodash-es';
+import Translator from '@pie-lib/translator';
+import { Collapsible as CollapsibleImport, color, hasMedia, hasText, PreviewPrompt as PreviewPromptImport, UiLayout as UiLayoutImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const UiLayout = unwrapReactInteropSymbol(UiLayoutImport, 'UiLayout') || unwrapReactInteropSymbol(renderUi.UiLayout, 'UiLayout');
+const PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');
+const Collapsible = unwrapReactInteropSymbol(CollapsibleImport, 'Collapsible') || unwrapReactInteropSymbol(renderUi.Collapsible, 'Collapsible');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import { styled } from '@mui/material/styles';
+
+import Feedback from './feedback.js';
+import Graph from './graph/index.js';
+import PropTypes from 'prop-types';
+import PointChooser from './point-chooser/index.js';
+import { buildElementModel } from './graph/elements/builder.js';
+
+const { translator } = Translator;
+
+export { Graph };
+
+const StyledUiLayout: any = styled(UiLayout)(({ $colorContrast }) => ({
+  color: color.text(),
+  backgroundColor: color.background(),
+  ...($colorContrast === 'black_on_rose' && {
+    backgroundColor: 'mistyrose',
+  }),
+  ...($colorContrast === 'white_on_black' && {
+    backgroundColor: 'black',
+    '--correct-answer-toggle-label-color': 'white',
+    '--tick-color': 'white',
+    '--line-stroke': 'white',
+    '--arrow-color': 'white',
+    '--point-stroke': 'white',
+    '--point-fill': 'black',
+  }),
+}));
+
+const NumberLineContainer: any = styled('div')(({ $colorContrast }) => ({
+  boxSizing: 'unset',
+  color: color.text(),
+  backgroundColor: color.background(),
+  ...($colorContrast === 'black_on_rose' && {
+    backgroundColor: 'mistyrose',
+  }),
+  ...($colorContrast === 'white_on_black' && {
+    backgroundColor: 'black',
+    '--correct-answer-toggle-label-color': 'white',
+    '--tick-color': 'white',
+    '--line-stroke': 'white',
+    '--arrow-color': 'white',
+    '--point-stroke': 'white',
+    '--point-fill': 'black',
+  }),
+}));
+
+const GraphTitle: any = styled('div')({
+  textAlign: 'center',
+  pointerEvents: 'none',
+  userSelect: 'none',
+});
+
+const ToggleContainer: any = styled('div')({
+  marginBottom: '16px',
+});
+
+const PromptContainer: any = styled('div')({
+  verticalAlign: 'middle',
+  marginBottom: '16px',
+});
+
+const StyledCollapsible: any = styled(Collapsible)(({ theme }) => ({
+  paddingBottom: theme.spacing(2),
+}));
+
+export class NumberLine extends React.Component {
+  static propTypes = {
+    onMoveElement: PropTypes.func.isRequired,
+    onDeleteElements: PropTypes.func.isRequired,
+    onAddElement: PropTypes.func.isRequired,
+    onUndoElement: PropTypes.func.isRequired,
+    onClearElements: PropTypes.func.isRequired,
+    model: PropTypes.object.isRequired,
+    answer: PropTypes.array,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+
+    let initialType = props.model.graph ? props.model.graph.initialType : null;
+    initialType = initialType ? initialType.toLowerCase() : PointChooser.DEFAULT_TYPE;
+
+    this.state = {
+      selectedElements: [],
+      elementType: initialType,
+      answers: props.answer,
+    };
+  }
+
+  toggleElement(index) {
+    let selected = [];
+    if (this.state.selectedElements.indexOf(index) === -1) {
+      selected = this.state.selectedElements.concat([index]);
+    } else {
+      selected = this.state.selectedElements.filter((e) => e !== index);
+    }
+    this.setState({ selectedElements: selected });
+  }
+
+  elementTypeSelected(t) {
+    this.setState({ elementType: t });
+  }
+
+  addElement(x) {
+    if (this.hasMaxNoOfPoints()) {
+      this.setState({ showMaxPointsWarning: true });
+      setTimeout(() => {
+        this.setState({ showMaxPointsWarning: false });
+      }, 2000);
+      return;
+    }
+
+    const { ticks, domain, availableTypes } = this.props.model.graph;
+
+    // check if the element type is enabled in availableTypes
+    if (availableTypes && !availableTypes[this.state.elementType.toUpperCase()]) {
+      return;
+    }
+
+    let elementData = buildElementModel(x, this.state.elementType, domain, ticks.minor);
+
+    if (elementData) {
+      const { answers } = this.state;
+
+      const contains = answers.some((element) => {
+        return isEqual(element, elementData);
+      });
+
+      if (!contains) {
+        answers.push(elementData);
+        this.setState({ answers });
+        this.props.onAddElement(elementData);
+      }
+    }
+  }
+
+  hasMaxNoOfPoints() {
+    let {
+      answer,
+      model: {
+        graph: { maxNumberOfPoints },
+      },
+    } = this.props;
+
+    return isNumber(maxNumberOfPoints) && maxNumberOfPoints > 0 && (answer || []).length >= maxNumberOfPoints;
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { answer } = nextProps;
+
+    if (!isEqual(this.state.answers, answer)) {
+      this.setState({ showCorrectAnswer: false, answers: answer });
+    }
+  }
+
+  deselectElements() {
+    this.setState({ selectedElements: [] });
+  }
+
+  getSize(type, min, max, defaultValue) {
+    const {
+      model: { graph },
+    } = this.props;
+
+    if (graph && graph[type]) {
+      return Math.max(min, Math.min(max, graph[type]));
+    } else {
+      return defaultValue;
+    }
+  }
+
+  undo() {
+    const { answers } = this.state;
+    const { onUndoElement } = this.props;
+
+    answers.pop();
+    this.setState({ answers });
+    onUndoElement();
+  }
+
+  clearAll() {
+    const { onClearElements } = this.props;
+
+    this.setState({ answers: [] });
+    onClearElements();
+  }
+
+  render() {
+    let { model, onDeleteElements, onMoveElement, minWidth = 400, maxWidth = 1600, maxHeight } = this.props;
+    let { showCorrectAnswer, answers, selectedElements, showMaxPointsWarning, elementType } = this.state;
+    let {
+      corrected = { correct: [], incorrect: [] },
+      disabled,
+      extraCSSRules,
+      graph,
+      correctResponse,
+      prompt,
+      emptyAnswer,
+      feedback,
+      colorContrast,
+      language,
+      teacherInstructions,
+    } = model;
+    let addElement = this.addElement.bind(this);
+    let elementsSelected = !disabled && selectedElements && selectedElements.length > 0;
+    const { ticks, domain, arrows, maxNumberOfPoints, height = 100, availableTypes, title, fraction } = graph;
+    const width = this.getSize('width', minWidth, maxWidth, 600);
+    const showTeacherInstructions =
+      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
+
+    const graphProps = {
+      disabled,
+      domain,
+      ticks,
+      width,
+      height: (height > maxHeight ? maxHeight : height) || 100,
+      arrows,
+      fraction,
+    };
+
+    let getAnswerElements = () => {
+      return (answers || []).map((e, index) => {
+        let out = cloneDeep(e);
+        out.selected = selectedElements.indexOf(index) !== -1;
+
+        if (corrected.correct.includes(index)) {
+          out.correct = true;
+        } else if (corrected.incorrect.includes(index)) {
+          out.correct = false;
+        } else {
+          out.correct = undefined;
+        }
+
+        return out;
+      });
+    };
+
+    let getCorrectAnswerElements = () => {
+      return (correctResponse || []).map((r) => {
+        r.correct = true;
+        return r;
+      });
+    };
+
+    // Determine which elements to show on the chart
+    let elements = showCorrectAnswer && correctResponse ? getCorrectAnswerElements() : getAnswerElements();
+
+    let maxPointsMessage = () =>
+      maxNumberOfPoints == 1
+        ? translator.t('numberLine.addElementLimit_one', { lng: language, count: 1 })
+        : translator.t('numberLine.addElementLimit_other', { lng: language, count: maxNumberOfPoints });
+
+    let deleteElements = () => {
+      onDeleteElements(selectedElements);
+
+      answers = answers.filter((v, index) => {
+        return !selectedElements.some((d) => d === index);
+      });
+
+      this.setState({ selectedElements: [], answers });
+    };
+
+    let getIcons = () => {
+      if (availableTypes) {
+        return Object.keys(availableTypes)
+          .filter((k) => availableTypes[k])
+          .map((k) => k.toLowerCase());
+      }
+    };
+
+    let onShowCorrectAnswer = (show) => {
+      this.setState({ showCorrectAnswer: show });
+    };
+
+    let adjustedWidth = graphProps.width - 20;
+
+    return (
+      <StyledUiLayout extraCSSRules={extraCSSRules} $colorContrast={colorContrast}>
+        {showTeacherInstructions && (
+          <StyledCollapsible
+            labels={{
+              hidden: 'Show Teacher Instructions',
+              visible: 'Hide Teacher Instructions',
+            }}
+          >
+            <PreviewPrompt prompt={teacherInstructions} />
+          </StyledCollapsible>
+        )}
+
+        {prompt && (
+          <PromptContainer>
+            <PreviewPrompt prompt={prompt} />
+          </PromptContainer>
+        )}
+
+        <NumberLineContainer $colorContrast={colorContrast} style={{ width }}>
+          <ToggleContainer style={{ width: adjustedWidth }}>
+            <Toggle
+              show={isArray(correctResponse) && correctResponse.length && !emptyAnswer}
+              toggled={showCorrectAnswer}
+              onToggle={onShowCorrectAnswer}
+              initialValue={false}
+              language={language}
+            />
+          </ToggleContainer>
+
+          {!disabled && (
+            <PointChooser
+              elementType={elementType}
+              showDeleteButton={elementsSelected}
+              onDeleteClick={deleteElements}
+              onElementType={this.elementTypeSelected.bind(this)}
+              onClearElements={this.clearAll.bind(this)}
+              onUndoElement={this.undo.bind(this)}
+              icons={getIcons()}
+              language={language}
+            />
+          )}
+
+          <Graph
+            {...graphProps}
+            elements={elements}
+            onAddElement={addElement}
+            onMoveElement={onMoveElement}
+            onToggleElement={this.toggleElement.bind(this)}
+            onDeselectElements={this.deselectElements.bind(this)}
+            debug={false}
+          />
+          {title && <GraphTitle dangerouslySetInnerHTML={{ __html: title }} />}
+
+          {showMaxPointsWarning && <Feedback type="info" width={adjustedWidth} message={maxPointsMessage()} />}
+          {feedback && !showCorrectAnswer && <Feedback {...feedback} width={adjustedWidth} />}
+        </NumberLineContainer>
+      </StyledUiLayout>
+    );
+  }
+}
+
+export default NumberLine;

package/src/delivery/number-line/point-chooser/button.tsx

@@ -0,0 +1,54 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/point-chooser/button.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 Button from '@mui/material/Button';
+
+const StyledButton: any = styled(Button)({
+  fontSize: '0.9em',
+  marginLeft: 8,
+  minWidth: 32,
+  height: 32,
+  '& span': {
+    '& svg': {
+      width: '1.3em !important',
+      height: '1.3em !important',
+    },
+  },
+});
+
+const RawButton = ({ label, onClick, disabled, title }) => (
+  <StyledButton
+    title={title}
+    onClick={onClick}
+    disabled={disabled}
+    size="small"
+    variant="contained">
+    {label}
+  </StyledButton>
+);
+
+RawButton.propTypes = {
+  disabled: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onClick: PropTypes.func,
+  title: PropTypes.string,
+};
+
+RawButton.defaultProps = {
+  disabled: false,
+  label: 'Add',
+  onClick: () => {},
+  title: '',
+};
+
+export default RawButton;

package/src/delivery/number-line/point-chooser/img.ts

@@ -0,0 +1,11 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/point-chooser/img.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 default 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaIAAAB6CAYAAAD9EVeZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyQzdFRkQ1NzFFMjA2ODExOTRGRkRERDNFOEEwRDAxQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0M0FGNEM3RUQwRDkxMUU0OTU5RUVDMkZDN0NCQzRBRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0M0FGNEM3REQwRDkxMUU0OTU5RUVDMkZDN0NCQzRBRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY1QUZDN0I3MEUyMDY4MTE4MDgzOUE0REM2MTYyOUQyIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NjFjZTg0NmMtMTg3ZS0xMTc4LWE4YmItZWNkODU4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';

package/src/delivery/number-line/point-chooser/index.tsx

@@ -0,0 +1,200 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/point-chooser/index.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 { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import Button from './button.js';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const iconHeight = 41;
+const iconWidth = 42;
+import img from './img.js';
+
+const StyledDeleteIcon: any = styled('svg')({
+  fill: 'black',
+  cursor: 'pointer',
+  transition: 'opacity 100ms linear',
+  '&:hover': {
+    opacity: '0.5',
+  },
+});
+
+const DeleteIcon = () => {
+  return (
+    <StyledDeleteIcon
+      fill="#000000"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+      <path d="M0 0h24v24H0z" fill="none" />
+    </StyledDeleteIcon>
+  );
+};
+
+const iconIndexMap = {
+  pf: 0,
+  lff: 1,
+  lef: 2,
+  lfe: 3,
+  lee: 4,
+  rfn: 5,
+  rfp: 6,
+  ren: 7,
+  rep: 8,
+};
+
+const StyledPointLink: any = styled('a')(({ $iconIndex, $active }) => ({
+  display: 'inline-block',
+  width: iconWidth,
+  height: iconHeight,
+  position: 'relative',
+  top: '1px',
+  cursor: 'pointer',
+  background: `url(${img}) -${$iconIndex * iconWidth}px 0px`,
+  ...($active && {
+    backgroundPosition: `-${$iconIndex * iconWidth}px -${2 * iconHeight}px`,
+  }),
+  '&:hover': {
+    textDecoration: 'none',
+    backgroundPosition: `-${$iconIndex * iconWidth}px -${iconHeight}px`,
+  },
+  ...($active && {
+    '&:hover': {
+      backgroundPosition: `-${$iconIndex * iconWidth}px -${2 * iconHeight}px`,
+    },
+  }),
+}));
+
+const RawPoint = (props) => {
+  const { iconKey, active, onClick } = props;
+  const iconIndex = iconIndexMap[iconKey.toLowerCase()] ?? 0;
+  return (
+    <span role="presentation" key={iconKey} onClick={onClick}>
+      <StyledPointLink $iconIndex={iconIndex} $active={active}>&nbsp;</StyledPointLink>
+    </span>
+  );
+};
+
+RawPoint.propTypes = {
+  iconKey: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export const Point = RawPoint;
+
+const ElementSelector: any = styled('div')({
+  width: '55%',
+  padding: '1px',
+  '-webkit-touch-callout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none',
+});
+
+const Points = ({ selectPoint, selected, icons }) => {
+  const iconTags = icons.map((key) => {
+    let active = key === selected;
+    let onClick = active ? () => {} : selectPoint.bind(null, key);
+    return <Point key={key.toLowerCase()} iconKey={key.toLowerCase()} active={active} onClick={onClick} />;
+  });
+
+  return <ElementSelector>{iconTags}</ElementSelector>;
+};
+
+Points.propTypes = {
+  selectPoint: PropTypes.func.isRequired,
+  selected: PropTypes.string,
+  icons: PropTypes.array,
+};
+
+const PointChooserContainer: any = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  borderRadius: '4px',
+  padding: '1px',
+});
+
+const Controls: any = styled('div')({
+  display: 'flex',
+  paddingTop: '7px',
+});
+
+const DeleteIconHolder: any = styled('span')({
+  position: 'relative',
+  top: '3px',
+  width: '30px',
+});
+
+export class PointChooser extends React.Component {
+  static defaultProps = {
+    showDeleteButton: false,
+    elementType: PointChooser.DEFAULT_TYPE,
+    icons: ['pf', 'lff', 'lef', 'lfe', 'lee', 'rfn', 'rfp', 'ren', 'rep'],
+  };
+
+  static propTypes = {
+    elementType: PropTypes.string,
+    showDeleteButton: PropTypes.bool,
+    onDeleteClick: PropTypes.func.isRequired,
+    onElementType: PropTypes.func.isRequired,
+    onUndoElement: PropTypes.func.isRequired,
+    onClearElements: PropTypes.func.isRequired,
+    icons: PropTypes.array,
+    language: PropTypes.string,
+  };
+
+  render() {
+    const {
+      elementType,
+      showDeleteButton,
+      onDeleteClick,
+      onUndoElement,
+      onClearElements,
+      icons,
+      onElementType,
+      language,
+    } = this.props;
+
+    return (
+      <PointChooserContainer>
+        <Points selected={elementType} selectPoint={onElementType} icons={icons} />
+        <Controls>
+          {showDeleteButton && (
+            <DeleteIconHolder onClick={onDeleteClick}>
+              <DeleteIcon />
+            </DeleteIconHolder>
+          )}
+          <Button
+            onClick={onUndoElement}
+            label={translator.t('common:undo', { lng: language })}
+          />
+          <Button
+            onClick={onClearElements}
+            label={translator.t('numberLine.clearAll', { lng: language })}
+          />
+        </Controls>
+      </PointChooserContainer>
+    );
+  }
+}
+
+export default PointChooser;
+
+PointChooser.DEFAULT_TYPE = 'pf';