@pie-element/number-line 0.1.0

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

@@ -0,0 +1,219 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/point.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';
+
+import { Draggable } from '../../../draggable/index.js';
+
+const duration = '150ms';
+
+const StyledCircle: any = styled('circle')(({ $selected, $disabled, $correct, $empty }) => ({
+  cursor: 'pointer',
+  transition: `r ${duration} linear,  
+  opacity ${duration} linear, 
+  fill ${duration} linear,
+  stroke ${duration} linear`,
+  stroke: color.primary(),
+  fill: color.primary(),
+  // was ".react-draggable-dragging"
+  '&.dnd-kit-dragging': {
+    opacity: 0.25,
+    r: '10px',
+  },
+  '&:hover': {
+    stroke: color.primaryDark(),
+  },
+  ...($selected && {
+    stroke: color.primaryDark(),
+  }),
+  ...($disabled && {
+    cursor: 'not-allowed',
+    opacity: 0.8,
+  }),
+  ...($correct === true && {
+    cursor: 'inherit',
+    stroke: color.correct(),
+    fill: color.correct(),
+  }),
+  ...($correct === false && {
+    cursor: 'inherit',
+    stroke: color.incorrect(),
+    fill: color.incorrect(),
+  }),
+  ...($empty && {
+    fill: 'white',
+  }),
+}));
+
+export class Point extends React.Component {
+  static defaultProps = {
+    y: 0,
+    selected: false,
+    empty: false,
+    disabled: false,
+    correct: undefined,
+  };
+
+  static propTypes = {
+    interval: PropTypes.number.isRequired,
+    position: PropTypes.number.isRequired,
+    bounds: PropTypes.shape({
+      left: PropTypes.number.isRequired,
+      right: PropTypes.number.isRequired,
+    }),
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    correct: PropTypes.bool,
+    empty: PropTypes.bool,
+    y: PropTypes.number,
+    onMove: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
+    onDrag: PropTypes.func,
+    onDragStop: PropTypes.func,
+    onDragStart: PropTypes.func,
+  };
+
+  static contextTypes = {
+    xScale: PropTypes.func.isRequired,
+    snapValue: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const {
+      onDragStop,
+      onDragStart,
+      onDrag: onDragCallback,
+      onClick,
+      onMove,
+      interval,
+      y,
+      bounds,
+      selected,
+      position,
+      disabled,
+      correct,
+      empty,
+    } = this.props;
+
+    const { snapValue, xScale } = this.context;
+
+    // same as old `is`
+    const step = xScale(interval) - xScale(0);
+
+    const dragPosition = (deltaX) => {
+      const normalized = deltaX + xScale(0);
+      const inverted = xScale.invert(normalized);
+      return snapValue(position + inverted);
+    };
+
+    // bounds in px (same as old scaledBounds)
+    const scaledBounds = bounds
+      ? {
+          left: (bounds.left / interval) * step,
+          right: (bounds.right / interval) * step,
+        }
+      : null;
+
+    const handleMouseDown = (e) => e.nativeEvent.preventDefault();
+
+    // called when drag starts (via LocalDraggableDndKit)
+    const handleDragStart = () => {
+      if (onDragStart) {
+        onDragStart();
+      }
+    };
+
+    // called continuously while dragging (snapped+clamped deltaX in px)
+    const handleDragMove = (deltaX) => {
+      const p = dragPosition(deltaX);
+      if (onDragCallback) {
+        onDragCallback(p);
+      }
+    };
+
+    // called when drag ends (snapped+clamped deltaX in px)
+    const handleDragEnd = (deltaX) => {
+      if (onDragStop) {
+        onDragStop();
+      }
+
+      const deltaAbs = Math.abs(deltaX);
+
+      // click vs drag, same threshold as before: is / 10
+      if (deltaAbs < step / 10) {
+        if (onClick) {
+          onClick();
+        }
+        return;
+      }
+
+      const newPosition = dragPosition(deltaX);
+      onMove(newPosition);
+    };
+
+    const id = `point-${position}-${y}`;
+
+    return (
+      <Draggable  
+        id={id}
+        disabled={disabled}
+        grid={[step]}
+        bounds={scaledBounds}
+        onMouseDown={handleMouseDown}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        onDragEnd={handleDragEnd}
+      >
+        {({
+          setNodeRef,
+          attributes,
+          listeners,
+          translateX,
+          isDragging,
+          onMouseDown,
+        }) => (
+          <g
+            ref={setNodeRef}
+            onMouseDown={onMouseDown}
+            // axis="x": only horizontal translate
+            transform={`translate(${translateX}, 0)`}
+            {...attributes}
+            {...listeners}
+          >
+            <circle
+              r="20"
+              strokeWidth="3"
+              style={{ fill: 'transparent', pointerEvents: 'visibleStroke' }}
+              cx={xScale(position)}
+              cy={y}
+              stroke={selected ? color.primaryDark() : 'none'}
+            />
+            <StyledCircle
+              r="5"
+              strokeWidth="3"
+              cx={xScale(position)}
+              cy={y}
+              $selected={selected}
+              $disabled={disabled}
+              $correct={correct}
+              $empty={empty}
+              className={isDragging ? 'dnd-kit-dragging' : undefined}
+            />
+          </g>
+        )}
+      </ Draggable>
+    );
+  }
+}
+
+export default Point;

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

@@ -0,0 +1,168 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/elements/ray.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 * as colors from '../../colors.js';
+import { color } from '@pie-lib/render-ui';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Arrow from '../arrow.js';
+import Point from './point.js';
+import { basePropTypes } from './base.js';
+import { isNumber } from 'lodash-es';
+
+const StyledRayGroup: any = styled('g')(({ $selected, $correct }) => ({
+  '& line': {
+    cursor: 'pointer',
+    strokeWidth: '5px',
+    stroke: color.primary(),
+  },
+  '& line, & .arrow': {
+    transition: 'stroke 150ms linear, fill 150ms linear',
+  },
+  ...($selected && {
+    '& line': {
+      stroke: colors.selected,
+    },
+    '& .arrow': {
+      fill: colors.selected,
+      strokeWidth: '1px',
+      stroke: colors.selected,
+    },
+  }),
+  ...($correct === true && {
+    '& line': {
+      stroke: colors.correct,
+    },
+    '& .arrow': {
+      fill: colors.correct,
+      strokeWidth: '1px',
+      stroke: colors.correct,
+    },
+  }),
+  ...($correct === false && {
+    '& line': {
+      stroke: colors.incorrect,
+    },
+    '& .arrow': {
+      fill: colors.incorrect,
+      strokeWidth: '1px',
+      stroke: colors.incorrect,
+    },
+  }),
+}));
+
+const StyledArrow: any = styled(Arrow)(({ $correct, $selected }) => ({
+  fill: color.primary(),
+  ...($correct === true && {
+    fill: colors.correct,
+    '--arrow-color': colors.correct,
+  }),
+  ...($correct === false && {
+    fill: colors.incorrect,
+    '--arrow-color': colors.incorrect,
+  }),
+  ...($selected && {
+    fill: colors.selected,
+    '--arrow-color': colors.selected,
+  }),
+}));
+
+export class Ray extends React.Component {
+  static propTypes = {
+    ...basePropTypes(),
+    width: PropTypes.number.isRequired,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    empty: PropTypes.bool,
+    direction: PropTypes.oneOf(['positive', 'negative']),
+    y: PropTypes.number,
+    position: PropTypes.number.isRequired,
+    onMove: PropTypes.func.isRequired,
+    onToggleSelect: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    selected: false,
+    direction: 'positive',
+    y: 0,
+    disabled: false,
+  };
+
+  static contextTypes = {
+    xScale: PropTypes.func.isRequired,
+    snapValue: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dragPosition: null,
+    };
+  }
+
+  drag(p) {
+    const { domain } = this.props;
+    if (p >= domain.min && p <= domain.max) {
+      this.setState({ dragPosition: p });
+    }
+  }
+
+  stopDrag() {
+    this.setState({ dragPosition: null });
+  }
+
+  render() {
+    /* eslint-disable */
+    const { interval, empty, position, direction, domain, y, selected, disabled, width, correct } = this.props;
+    /* eslint-enable */
+    const { xScale } = this.context;
+
+    const drag = this.drag.bind(this);
+    const stopDrag = this.stopDrag.bind(this);
+
+    const finalPosition = isNumber(this.state.dragPosition) ? this.state.dragPosition : position;
+
+    const positive = direction === 'positive';
+    const left = positive ? finalPosition : domain.min;
+    const right = positive ? domain.max : finalPosition;
+    // const triangleX = positive ? xScale(right) : xScale(left);
+
+    //const et the line run all the way to 0 or width.
+    const x1 = positive ? xScale(left) : 8;
+    const x2 = positive ? width - 8 : xScale(right);
+    const arrowX = positive ? width : 0;
+    const arrowDirection = positive ? 'right' : 'left';
+
+    const noop = () => {};
+
+    return (
+      <StyledRayGroup $selected={selected} $correct={correct} transform={`translate(0, ${y})`}>
+        <line onClick={disabled ? noop : this.props.onToggleSelect} className="line-handle" x1={x1} x2={x2} />
+        <Point
+          disabled={disabled}
+          correct={correct}
+          selected={selected}
+          empty={empty}
+          interval={interval}
+          bounds={{ left: domain.min - position, right: domain.max - position }}
+          position={position}
+          onDrag={drag}
+          onDragStop={stopDrag}
+          onMove={this.props.onMove}
+          onClick={this.props.onToggleSelect}
+        />
+        <StyledArrow x={arrowX} $correct={correct} $selected={selected} direction={arrowDirection} />
+      </StyledRayGroup>
+    );
+  }
+}
+
+export default Ray;

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

@@ -0,0 +1,258 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/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 { scaleLinear } from 'd3-scale';
+import { select, pointer } from 'd3-selection';
+import { color } from '@pie-lib/render-ui';
+import { DndContext } from '@dnd-kit/core';
+import Point from './elements/point.js';
+import Line from './elements/line.js';
+import Ray from './elements/ray.js';
+import BaseLine from './line.js';
+import Arrow from './arrow.js';
+import Ticks from './ticks.js';
+import { snapTo } from './tick-utils.js';
+import Stacks from './stacks.js';
+import { TransitionGroup } from 'react-transition-group';
+import PropTypes from 'prop-types';
+import { Fade } from '../transitions/index.js';
+
+const getXScale = (min, max, width, padding) => {
+  if (min === undefined || max === undefined || width === undefined) {
+    throw new Error('missing min/max/width');
+  }
+
+  return scaleLinear()
+    .domain([min, max])
+    .range([padding, width - padding]);
+};
+
+const Debug = (props) => (
+  <g>
+    <text x="00" y="20">
+      {JSON.stringify(props)}
+    </text>
+  </g>
+);
+
+export class NumberLineGraph extends React.Component {
+  static childContextTypes = {
+    xScale: PropTypes.func.isRequired,
+    snapValue: PropTypes.func.isRequired,
+  };
+
+  static propTypes = {
+    domain: PropTypes.shape({
+      min: PropTypes.number.isRequired,
+      max: PropTypes.number.isRequired,
+    }).isRequired,
+    ticks: PropTypes.shape({ minor: PropTypes.number, major: PropTypes.number }).isRequired,
+    fraction: PropTypes.bool,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    onToggleElement: PropTypes.func.isRequired,
+    onMoveElement: PropTypes.func.isRequired,
+    onAddElement: PropTypes.func.isRequired,
+    debug: PropTypes.bool,
+    elements: PropTypes.array,
+    disabled: PropTypes.bool,
+    onDeselectElements: PropTypes.func,
+    arrows: PropTypes.shape({ left: PropTypes.bool, right: PropTypes.bool }),
+  };
+
+  static defaultProps = {
+    debug: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  xScaleFn() {
+    const { domain, width } = this.props;
+    const { max, min } = domain || {};
+
+    let padding = 20;
+
+    if (max) {
+      padding = max.toString().length * 4 + 15;
+    }
+
+    return getXScale(min, max, width, padding);
+  }
+
+  snapValueFn() {
+    const { domain, ticks } = this.props;
+    return snapTo.bind(null, domain.min, domain.max, ticks.minor);
+  }
+
+  getChildContext() {
+    return {
+      xScale: this.xScaleFn(),
+      snapValue: this.snapValueFn(),
+    };
+  }
+
+  /**
+   * Note: we use d3 click + pointer to give us domain values directly.
+   * Saves us having to calculate them ourselves from a MouseEvent.
+   */
+  onRectClick(event) {
+    const { elements, disabled } = this.props;
+
+    if (disabled) {
+      return;
+    }
+
+    const anyElementSelected = elements.some((e) => e.selected);
+
+    if (anyElementSelected) {
+      this.props.onDeselectElements();
+    } else {
+      const coords = pointer(event, this.rect);
+      const x = this.xScaleFn().invert(coords[0]);
+      this.addElement(x);
+    }
+  }
+
+  componentDidMount() {
+    const rect = select(this.rect);
+    rect.on('click', this.onRectClick.bind(this));
+  }
+
+  addElement(x) {
+    const snapFn = this.snapValueFn();
+    const v = snapFn(x);
+    this.props.onAddElement(v);
+  }
+
+  render() {
+    const { domain, width, ticks, height, onToggleElement, onMoveElement, disabled, fraction } = this.props;
+    let { arrows } = this.props;
+
+    arrows = arrows || { left: true, right: true };
+    const { min, max } = domain;
+
+    if (domain.max <= domain.min) {
+      return (
+        <div>
+          {domain.max} is less than or equal to {domain.min}
+        </div>
+      );
+    } else {
+      const lineY = height - 30;
+
+      const stacks = new Stacks(domain);
+
+      const elements = this.props.elements.map((el, index) => {
+        const stackIndex = stacks.add(el);
+
+        if (stackIndex === -1) {
+          throw new Error('stack index is -1, cant add element');
+        }
+
+        const y = lineY - stackIndex * 25;
+
+        const commonProps = {
+          key: index,
+          y,
+          selected: el.selected && !disabled,
+          interval: ticks.minor,
+          disabled,
+          correct: el.correct,
+        };
+
+        const toggleElement = onToggleElement.bind(null, index, el);
+        const moveElement = onMoveElement.bind(null, index, el);
+
+        if (el.type === 'line') {
+          const empty = {
+            left: el.leftPoint === 'empty',
+            right: el.rightPoint === 'empty',
+          };
+
+          return (
+            <Line
+              {...commonProps}
+              domain={{ min: min, max: max }}
+              onMoveLine={moveElement}
+              onToggleSelect={toggleElement}
+              position={el.position}
+              empty={empty}
+              key={index}
+            />
+          );
+        } else if (el.type === 'point') {
+          const bounds = {
+            left: min - el.position,
+            right: max - el.position,
+          };
+
+          return (
+            <Point
+              {...commonProps}
+              empty={el.pointType === 'empty'}
+              position={el.position}
+              bounds={bounds}
+              onClick={toggleElement}
+              onMove={moveElement}
+              key={index}
+            />
+          );
+        } else if (el.type === 'ray') {
+          return (
+            <Ray
+              {...commonProps}
+              domain={{ min: min, max: max }}
+              direction={el.direction}
+              position={el.position}
+              onMove={moveElement}
+              onToggleSelect={toggleElement}
+              width={width}
+              empty={el.pointType === 'empty'}
+              key={index}
+            />
+          );
+        }
+      });
+
+      return (
+        <DndContext>
+          <div style={{ display: 'inline-block' }}>
+            <svg width={width} height={fraction ? height + 20 : height}>
+              {false && <Debug domain={domain} ticks={ticks} />}
+              <BaseLine y={lineY} width={width} />
+              {arrows.left && <Arrow y={lineY} />}
+              {arrows.right && <Arrow x={width} y={lineY} direction="right" />}
+              <Ticks y={lineY} domain={domain} width={width} ticks={ticks} fraction={fraction} />
+              <rect
+                ref={(rect) => (this.rect = rect)}
+                //need to have a fill for it to be clickable
+                fill={color.primary()}
+                fillOpacity="0.0"
+                width={width}
+                height={height}
+              />
+              <TransitionGroup component="g">
+                {elements.map((c, index) => (
+                  <Fade key={index}>{c}</Fade>
+                ))}
+              </TransitionGroup>
+            </svg>
+          </div>
+        </DndContext>
+      );
+    }
+  }
+}
+
+export default NumberLineGraph;

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

@@ -0,0 +1,33 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/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 injectSheet from 'react-jss';
+import PropTypes from 'prop-types';
+import { color } from '@pie-lib/render-ui';
+
+const style = {
+  root: {
+    strokeWidth: 2,
+    stroke: color.primary(),
+  },
+};
+
+export function Line({ y, width, classes }) {
+  return <line x1={0} y1={y} x2={width} y2={y} className={classes.root} />;
+}
+
+Line.propTypes = {
+  y: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+export default injectSheet(style)(Line);