@pie-element/number-line 0.1.0

package/src/delivery/index.ts

@@ -0,0 +1,225 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/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 * as dataConverter from './data-converter.js';
+import * as pointChooser from './number-line/point-chooser/index.js';
+import * as tickUtils from './number-line/graph/tick-utils.js';
+
+import { lineIsSwitched, switchGraphLine, toGraphFormat, toSessionFormat } from './data-converter.js';
+
+import Graph from './number-line/graph/index.js';
+import NumberLineComponent from './number-line/index.js';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import RootComponent from './number-line/index.js';
+import { cloneDeep } from 'lodash-es';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+
+//Expose some additional modules for configuration
+export { Graph, NumberLineComponent, tickUtils, dataConverter, pointChooser };
+export default class NumberLine extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
+  }
+
+  _scheduleMathRender: any = () => {
+    if (this._mathRenderPending) return;
+    this._mathRenderPending = true;
+
+    requestAnimationFrame(() => {
+      if (this._mathObserver) {
+        this._mathObserver.disconnect();
+      }
+
+      renderMath(this);
+      this._mathRenderPending = false;
+
+      setTimeout(() => {
+        if (this._mathObserver) {
+          this._mathObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: false,
+          });
+        }
+      }, 50);
+    });
+  };
+
+  _initMathObserver() {
+    if (this._mathObserver) return;
+
+    this._mathObserver = new MutationObserver(() => {
+      this._scheduleMathRender();
+    });
+
+    this._mathObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: false,
+    });
+  }
+
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
+    }
+  }
+
+  set model(m) {
+    this._model = m;
+    this._applyInitialElements();
+    this._render();
+    this.dispatch('model-set');
+  }
+
+  set session(s) {
+    this._session = s;
+    this._applyInitialElements();
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  connectedCallback() {
+    this._initMathObserver();
+    this._render();
+  }
+
+  isComplete() {
+    return this._session ? (this._session.answer || []).length > 0 : false;
+  }
+
+  dispatch(type) {
+    this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        detail: {
+          complete: this.isComplete(),
+        },
+      }),
+    );
+  }
+
+  dispatchSessionChanged() {
+    this.dispatch('session-changed');
+  }
+
+  addElement(data) {
+    if (!this._session) {
+      return;
+    }
+
+    this._session.answer = this._session.answer || [];
+    this._session.answer.push(toSessionFormat(data));
+    this.dispatchSessionChanged();
+    this._render();
+  }
+
+  moveElement(index, el, position) {
+    let answer = this._session.answer[index];
+
+    if (!answer) {
+      throw new Error('cant find element at index: ', index);
+    }
+
+    if (el.type === 'line' && position.left === position.right) {
+      this._render();
+      return;
+    }
+
+    //set the new position
+    el.position = position;
+
+    let update = el.type === 'line' && lineIsSwitched(el) ? switchGraphLine(el) : el;
+
+    this._session.answer.splice(index, 1, toSessionFormat(update));
+
+    this.dispatchSessionChanged();
+    this._render();
+  }
+
+  deleteElements(indices) {
+    this._session.answer = this._session.answer.filter((v, index) => {
+      return !indices.some((d) => d === index);
+    });
+    this.dispatchSessionChanged();
+    this._render();
+  }
+
+  undoElement() {
+    this._session.answer.pop();
+    this.dispatchSessionChanged();
+    this._render();
+  }
+
+  clearElements() {
+    this._session.answer = [];
+    this.dispatchSessionChanged();
+    this._render();
+  }
+
+  _applyInitialElements() {
+    if (
+      this._model &&
+      this._model.graph &&
+      this._model.graph.initialElements &&
+      this._session &&
+      (!this._session.answer || !this._session.answer.length)
+    ) {
+      this._session.answer = cloneDeep(this._model.graph.initialElements);
+    }
+  }
+
+  _render() {
+    if (this._model && this._session) {
+      if (!this._session.answer) {
+        this._applyInitialElements();
+      }
+
+      let answer = (this._session.answer || []).map(toGraphFormat);
+      let model = cloneDeep(this._model);
+      model.correctResponse = model.correctResponse && model.correctResponse.map(toGraphFormat);
+
+      let props = {
+        model,
+        answer,
+        onAddElement: this.addElement.bind(this),
+        onMoveElement: this.moveElement.bind(this),
+        onDeleteElements: this.deleteElements.bind(this),
+        onUndoElement: this.undoElement.bind(this),
+        onClearElements: this.clearElements.bind(this),
+      };
+
+      let el = React.createElement(RootComponent, props);
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+
+      // schedule math rendering via observer pipeline (for initial render as well)
+      this._scheduleMathRender();
+    }
+  }
+
+  disconnectedCallback() {
+    this._disconnectMathObserver();
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/delivery/number-line/colors.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/colors.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 { color } from '@pie-lib/render-ui';
+
+export const selected = color.primaryDark();
+export const correct = color.correct();
+export const incorrect = color.incorrect();

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

@@ -0,0 +1,85 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/feedback.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 { Correct, Incorrect, NothingSubmitted, PartiallyCorrect, ShowRationale } from '@pie-lib/icons';
+import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
+
+import React, { useRef } from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { styled } from '@mui/material/styles';
+
+let getIcon = (t) => {
+  switch (t) {
+    case 'unanswered':
+      return NothingSubmitted;
+    case 'correct':
+      return Correct;
+    case 'incorrect':
+      return Incorrect;
+    case 'partial':
+      return PartiallyCorrect;
+    case 'info':
+      return ShowRationale;
+    default:
+      return undefined;
+  }
+};
+
+const FeedbackContainer: any = styled('div')(({ $type }) => ({
+  marginTop: '10px',
+  backgroundColor: '#dddddd',
+  padding: '10px',
+  display: 'flex',
+  alignItems: 'center',
+  ...($type === 'correct' && {
+    backgroundColor: color.correct(),
+  }),
+  ...($type === 'incorrect' && {
+    backgroundColor: color.incorrect(),
+  }),
+  '& svg': {
+    height: '30px',
+  },
+  '& h1': {
+    padding: '0px',
+    margin: '0px',
+  },
+}));
+
+const Message: any = styled('span')({
+  paddingLeft: '5px',
+  userSelect: 'none',
+});
+
+const Feedback = (props) => {
+  const { type, width, message } = props;
+  let Icon = getIcon(type);
+  const nodeRef = useRef(null);
+
+  return (
+    <TransitionGroup>
+      <CSSTransition classNames={'fb'} key="fb" timeout={300} nodeRef={nodeRef}>
+        <FeedbackContainer ref={nodeRef} key="panel" $type={type} style={{ width }}>
+          <Icon iconSet="emoji" shape="square" />
+          <Message dangerouslySetInnerHTML={{ __html: message }} />
+        </FeedbackContainer>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+};
+
+Feedback.propTypes = {
+  width: PropTypes.number,
+  message: PropTypes.string,
+  type: PropTypes.string,
+};
+
+export default Feedback;

package/src/delivery/number-line/graph/arrow.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/arrow.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 { color } from '@pie-lib/render-ui';
+
+const StyledPath: any = styled('path')({
+  fill: color.primary(),
+});
+
+export function Arrow({ x, y, direction, className }) {
+  let transform = `translate(${x || 0},${y})`;
+
+  if (direction && direction === 'right') {
+    transform += ' rotate(180)';
+  }
+
+  return <StyledPath d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={className} />;
+}
+
+Arrow.propTypes = {
+  y: PropTypes.number,
+  x: PropTypes.number,
+  direction: PropTypes.oneOf(['left', 'right']),
+  className: PropTypes.string,
+};
+
+Arrow.defaultProps = {
+  y: 0,
+  x: 0,
+  direction: 'left',
+};
+
+export default Arrow;

package/src/delivery/number-line/graph/elements/base.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/base.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 React from 'react'; //eslint-disable-line
+import PropTypes from 'prop-types';
+
+export const basePropTypes = () => ({
+  interval: PropTypes.number.isRequired,
+  domain: PropTypes.shape({
+    min: PropTypes.number.isRequired,
+    max: PropTypes.number.isRequired,
+  }),
+});

package/src/delivery/number-line/graph/elements/builder.ts

@@ -0,0 +1,37 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/builder.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 function buildElementModel(position, elementType, domain, interval) {
+  if (elementType.startsWith('p')) {
+    return {
+      position: position,
+      type: 'point',
+      pointType: elementType.endsWith('e') ? 'empty' : 'full',
+    };
+  } else if (elementType.startsWith('l')) {
+    let left = position + interval <= domain.max ? position : position - interval;
+    let right = left + interval;
+    return {
+      type: 'line',
+      leftPoint: elementType.charAt(1) === 'e' ? 'empty' : 'full',
+      rightPoint: elementType.charAt(2) === 'e' ? 'empty' : 'full',
+      position: { left, right },
+    };
+  } else if (elementType.startsWith('r')) {
+    let full = elementType.charAt(1) === 'f';
+    let positive = elementType.charAt(2) === 'p';
+    return {
+      type: 'ray',
+      direction: positive ? 'positive' : 'negative',
+      pointType: full ? 'full' : 'empty',
+      position: position,
+    };
+  }
+}

package/src/delivery/number-line/graph/elements/line.tsx

@@ -0,0 +1,259 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/line.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 { isEqual, isNumber } from 'lodash-es';
+import { color } from '@pie-lib/render-ui';
+import { Draggable } from '../../../draggable/index.js';
+
+import Point from './point.js';
+import { basePropTypes } from './base.js';
+
+const duration = '150ms';
+
+const StyledLineGroup: any = styled('g')(({ $disabled, $selected, $correct }) => ({
+  '& .line-handle': {
+    stroke: color.primary(),
+    cursor: 'pointer',
+    strokeWidth: '5px',
+    transition: `opacity ${duration} linear, 
+    stroke-width ${duration} linear,
+    stroke ${duration} linear`,
+  },
+  // was ".react-draggable-dragging" in the old version
+  '&.dnd-kit-dragging': {
+    opacity: 0.6,
+    '& .line-handle': {
+      opacity: 1.0,
+      strokeWidth: '12px',
+    },
+  },
+  ...($disabled && {
+    cursor: 'not-allowed',
+    opacity: 0.8,
+  }),
+  ...($selected && {
+    '& .line-handle': {
+      stroke: color.primaryDark(),
+    },
+  }),
+  ...($correct === true && {
+    '& .line-handle': {
+      cursor: 'inherit',
+      stroke: color.correct(),
+    },
+  }),
+  ...($correct === false && {
+    '& .line-handle': {
+      cursor: 'inherit',
+      stroke: color.incorrect(),
+    },
+  }),
+}));
+
+export class Line extends React.Component {
+  static propTypes = {
+    ...basePropTypes(),
+    empty: PropTypes.shape({
+      left: PropTypes.bool.isRequired,
+      right: PropTypes.bool.isRequired,
+    }).isRequired,
+    position: PropTypes.shape({
+      left: PropTypes.number.isRequired,
+      right: PropTypes.number.isRequired,
+    }).isRequired,
+    y: PropTypes.number,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    correct: PropTypes.bool,
+    onMoveLine: PropTypes.func.isRequired,
+    onToggleSelect: PropTypes.func.isRequired,
+    onDragStart: PropTypes.func,
+    onDragStop: PropTypes.func,
+  };
+
+  static defaultProps = {
+    selected: false,
+    y: 0,
+    disabled: false,
+    correct: undefined,
+  };
+
+  static contextTypes = {
+    xScale: PropTypes.func.isRequired,
+    snapValue: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      left: null,
+      right: null,
+    };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps) {
+      const { position } = nextProps;
+      this.setState({ left: position.left, right: position.right });
+    }
+  }
+
+  onDrag(side, p) {
+    const { domain } = this.props;
+    if (p >= domain.min && p <= domain.max) {
+      const newState = {};
+      newState[side] = p;
+      this.setState(newState);
+    }
+  }
+
+  onMove(side, d) {
+    const { position: p } = this.props;
+    const newPosition = { left: p.left, right: p.right };
+    newPosition[side] = d;
+    this.props.onMoveLine(newPosition);
+  }
+
+  render() {
+    const { interval, empty, position, domain, y, selected, disabled, correct } = this.props;
+
+    const { xScale } = this.context;
+
+    const { onDrag, onMove } = this;
+    const onMoveLeft = onMove.bind(this, 'left');
+    const onMoveRight = onMove.bind(this, 'right');
+    const onDragLeft = onDrag.bind(this, 'left');
+    const onDragRight = onDrag.bind(this, 'right');
+
+    const left = isNumber(this.state.left) ? this.state.left : position.left;
+    const right = isNumber(this.state.right) ? this.state.right : position.right;
+
+    const is = xScale(interval) - xScale(0);
+
+    const onMouseDown = (e) => e.nativeEvent.preventDefault();
+
+    const onLineClick = () => {
+      // click on the line toggles selection
+      this.props.onToggleSelect();
+    };
+
+    const onRectClick = () => {
+      this.props.onToggleSelect();
+    };
+
+    // dnd-kit drag stop handler (receives pixel deltaX from LocalDraggableDndKit)
+    const onLineDragStop = (deltaX) => {
+      // small movement -> treat as click (same threshold as before: is / 10)
+      const deltaAbs = Math.abs(deltaX);
+      if (deltaAbs < is / 10) {
+        this.props.onToggleSelect();
+        return;
+      }
+
+      // convert pixel delta to domain delta (same math as before)
+      const invertedX = xScale.invert(deltaX + xScale(0));
+      const newPosition = {
+        left: position.left + invertedX,
+        right: position.right + invertedX,
+      };
+
+      if (!isEqual(newPosition, this.props.position)) {
+        this.props.onMoveLine(newPosition);
+      }
+    };
+
+    const scaledLineBounds = {
+      left: ((domain.min - position.left) / interval) * is,
+      right: ((domain.max - position.right) / interval) * is,
+    };
+
+    const common = {
+      interval,
+      selected,
+      disabled,
+      correct,
+    };
+
+    // unique-ish id for this line; if you already have an id prop, use that instead
+    const draggableId = `line-${position.left}-${position.right}-${y}`;
+
+    return (
+      <Draggable
+        id={draggableId}
+        disabled={disabled}
+        grid={[is]}
+        bounds={scaledLineBounds}
+        onMouseDown={onMouseDown}
+        onDragEnd={onLineDragStop}
+      >
+        {({ setNodeRef, attributes, listeners, translateX, isDragging, onMouseDown: handleMouseDown }) => (
+          <StyledLineGroup
+            ref={setNodeRef}
+            $disabled={disabled}
+            $selected={selected}
+            $correct={correct}
+            className={isDragging ? 'dnd-kit-dragging' : undefined}
+            onMouseDown={handleMouseDown}
+            {...attributes}
+          >
+            <g transform={`translate(${translateX}, ${y})`}>
+              <rect
+                x={xScale(left)}
+                width={Math.abs(xScale(right) - xScale(left))}
+                fill="red"
+                fillOpacity="0.0"
+                y="-8"
+                height={16}
+                onClick={onRectClick}
+              />
+              <line
+                className="line-handle"
+                x1={xScale(left)}
+                x2={xScale(right)}
+                onClick={onLineClick}
+                // this is your "handle": only dragging when grabbing this line
+                {...listeners}
+              />
+              <Point
+                {...common}
+                empty={empty.left}
+                bounds={{
+                  left: domain.min - position.left,
+                  right: domain.max - position.left,
+                }}
+                position={position.left}
+                onDrag={onDragLeft}
+                onMove={onMoveLeft}
+                onClick={onRectClick}
+              />
+              <Point
+                {...common}
+                empty={empty.right}
+                bounds={{
+                  left: domain.min - position.right,
+                  right: domain.max - position.right,
+                }}
+                position={position.right}
+                onDrag={onDragRight}
+                onMove={onMoveRight}
+                onClick={onRectClick}
+              />
+            </g>
+          </StyledLineGroup>
+        )}
+      </Draggable>
+    );
+  }
+}
+
+export default Line;