@khanacademy/perseus 20.4.0 → 20.5.0

package/dist/index.js

@@ -33,6 +33,7 @@ var caretDown = require('@phosphor-icons/core/assets/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/assets/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -28278,6 +28279,18 @@ class Graph extends React__namespace.Component {
   }
 }
 
+/**
+ * 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 {
+    ...style,
+    stroke: wonderBlocksTokens.color[style?.stroke || "blue"],
+    fill: wonderBlocksTokens.color[style?.fill || "blue"]
+  };
+}
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -28291,7 +28304,7 @@ const GraphLockedLayer = props => {
           x: x,
           y: y,
           svgCircleProps: {
-            style: figure.style
+            style: convertStyle(figure.style)
           }
         });
     }
@@ -28571,7 +28584,8 @@ const LinearGraph = props => {
 };
 const LineView = props => {
   const {
-    onMoveLine: onMoveSegment,
+    onMoveLine,
+    onMovePoint,
     collinearPair: [start, end],
     range,
     stroke
@@ -28579,7 +28593,7 @@ const LineView = props => {
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
     start: start,
     end: end,
-    onMove: onMoveSegment,
+    onMove: onMoveLine,
     extend: {
       start: true,
       end: true,
@@ -28589,18 +28603,49 @@ const LineView = props => {
   }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
     point: start,
     onMove: newPoint => {
-      props.onMovePoint(0, newPoint);
+      onMovePoint(0, newPoint);
     },
     color: stroke
   }), /*#__PURE__*/React__namespace.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    start: start,
+    end: end,
+    onMove: handleMoveLine,
+    extend: {
+      end: true,
+      start: false,
+      range
+    }
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: start,
+    onMove: newPoint => handleMovePoint(newPoint, 0)
+  }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    point: end,
+    onMove: newPoint => handleMovePoint(newPoint, 1)
+  }));
+};
+
 const renderLineLabel = (n, _ref) => {
   let [min, max] = _ref;
   return n !== -1 && n !== min && n !== max;
@@ -28725,11 +28770,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;
@@ -28775,16 +28820,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)
       };
   }
@@ -28829,9 +28874,9 @@ function getGradableGraph(state, initialGraph) {
         ...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 {
         ...initialGraph,
         coords: state.coords?.[0]
@@ -29556,6 +29601,11 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "ray":
+      return /*#__PURE__*/React__namespace.createElement(RayGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new wonderStuffCore.UnreachableCaseError(type);
   }
@@ -41568,7 +41618,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {