@khanacademy/perseus 20.4.0 → 20.5.0

package/dist/es/index.js

@@ -32,6 +32,7 @@ import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
 import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Coordinates, Mafs } from 'mafs';
+import { color } from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -28125,6 +28126,17 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+/**
+ * Takes a style object with color names and converts them to actual
+ * Wonder Blocks color values. This way, we can use colors and their
+ * names in the editor UI without having to convert them back and forth.
+ */
+function convertStyle(style) {
+  return _extends({}, style, {
+    stroke: color[(style == null ? void 0 : style.stroke) || "blue"],
+    fill: color[(style == null ? void 0 : style.fill) || "blue"]
+  });
+}
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -28138,7 +28150,7 @@ const GraphLockedLayer = props => {
           x: x,
           y: y,
           svgCircleProps: {
-            style: figure.style
+            style: convertStyle(figure.style)
           }
         });
     }
@@ -28418,7 +28430,8 @@ const LinearGraph = props => {
 };
 const LineView = props => {
   const {
-    onMoveLine: onMoveSegment,
+    onMoveLine,
+    onMovePoint,
     collinearPair: [start, end],
     range,
     stroke
@@ -28426,7 +28439,7 @@ const LineView = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
     start: start,
     end: end,
-    onMove: onMoveSegment,
+    onMove: onMoveLine,
     extend: {
       start: true,
       end: true,
@@ -28436,18 +28449,49 @@ const LineView = props => {
   }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
     point: start,
     onMove: newPoint => {
-      props.onMovePoint(0, newPoint);
+      onMovePoint(0, newPoint);
     },
     color: stroke
   }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
     point: end,
     onMove: newPoint => {
-      props.onMovePoint(1, newPoint);
+      onMovePoint(1, newPoint);
     },
     color: stroke
   }));
 };
 
+const RayGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: lines,
+    range
+  } = props.graphState;
+
+  // a ray only has one line
+  const [start, end] = lines[0];
+  const handleMoveLine = delta => dispatch(moveSegment(0, delta));
+  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(0, pointIndex, newPoint));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: handleMoveLine,
+    extend: {
+      end: true,
+      start: false,
+      range
+    }
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: start,
+    onMove: newPoint => handleMovePoint(newPoint, 0)
+  }), /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    point: end,
+    onMove: newPoint => handleMovePoint(newPoint, 1)
+  }));
+};
+
 const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
 const axisOptions = (props, index) => ({
   axis: props.markings === "graph",
@@ -28565,11 +28609,11 @@ function updateAtIndex(args) {
 }
 function setAtIndex(args) {
   const {
-    array,
+    array = [],
     index,
     newValue
   } = args;
-  const copy = [...(array || [])];
+  const copy = [...array];
   copy[index] = newValue;
   // restoring readonly to array
   return copy;
@@ -28615,16 +28659,16 @@ function initializeGraphState(params) {
           range
         })
       };
-    // Ray can also fall through into this case-- same type, same default coords
     case "linear":
     case "linear-system":
+    case "ray":
       return {
         type: graph.type,
         hasBeenInteractedWith: false,
         range,
         snapStep,
-        // A linear graph has a single tuple of points, while a linear
-        // system has two tuples of points.
+        // Linear and ray graphs have a single tuple of points, while a
+        // linear system has two tuples of points.
         coords: getLineCoords(graph, range, step)
       };
   }
@@ -28669,9 +28713,9 @@ function getGradableGraph(state, initialGraph) {
       return _extends({}, initialGraph, {
         coords: state.coords
       });
-    // RAY has the same type as below; can fall through
     // coords: CollinearTuple
     case state.type === "linear" && initialGraph.type === "linear":
+    case state.type === "ray" && initialGraph.type === "ray":
       return _extends({}, initialGraph, {
         coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
       });
@@ -29399,6 +29443,11 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "ray":
+      return /*#__PURE__*/React.createElement(RayGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new UnreachableCaseError(type);
   }
@@ -41444,7 +41493,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.4.0";
+const libVersion = "20.5.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {