@khanacademy/perseus 23.1.0 → 23.3.0

package/dist/index.d.ts

@@ -51,7 +51,7 @@ export { default as KhanMath } from "./util/math";
 export { default as LoadingContext } from "./loading-context";
 export { default as mediaQueries } from "./styles/media-queries";
 export { default as PerseusMarkdown } from "./perseus-markdown";
-export { PerseusExpressionAnswerFormConsidered, plotterPlotTypes, ItemExtras, lockedFigureColors, } from "./perseus-types";
+export { PerseusExpressionAnswerFormConsidered, plotterPlotTypes, ItemExtras, lockedFigureColors, lockedEllipseFillStyles, } from "./perseus-types";
 export { traverse } from "./traversal";
 export { isItemRenderableByVersion } from "./renderability";
 export { violatingWidgets } from "./a11y";
@@ -87,7 +87,7 @@ export type { ILogger, LogErrorOptions, ErrorKind } from "./logging/log";
 export type { ServerItemRenderer as ServerItemRendererComponent } from "./server-item-renderer";
 export type { Alignment, APIOptions, APIOptionsWithDefaults, ChangeHandler, DeviceType, DomInsertCheckFn, EditorMode, FocusPath, Hint, ImageDict, ImageUploader, JiptLabelStore, JiptRenderer, PerseusDependencies, PerseusScore, Version, VideoData, VideoKind, WidgetDict, WidgetExports, } from "./types";
 export type { ParsedValue } from "./util";
-export type { LockedFigure, LockedFigureColor, LockedFigureType, LockedPointType, LockedLineType, LockedCircleType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureColor, LockedFigureType, LockedPointType, LockedLineType, LockedEllipseType, LockedEllipseFillType, LockedVectorType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
 PerseusImageBackground, PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, PerseusExampleWidgetOptions, PerseusExampleGraphieWidgetOptions, PerseusSimpleMarkdownTesterWidgetOptions, PerseusRenderer, PerseusWidget, PerseusWidgetsMap, } from "./perseus-types";
 export type { Coord } from "./interactive2/types";
 export type { MarkerType } from "./widgets/label-image/types";

package/dist/index.js

@@ -10928,6 +10928,33 @@ function intersects(ab, cd) {
   }
   return false;
 }
+
+// Whether any two sides of a polygon intersect each other
+function polygonSidesIntersect(vertices) {
+  for (let i = 0; i < vertices.length; i++) {
+    for (let k = i + 1; k < vertices.length; k++) {
+      // If any two vertices are the same point, sides overlap
+      if (kmath.point.equal(vertices[i], vertices[k])) {
+        return true;
+      }
+
+      // Find the other end of the sides starting at vertices i and k
+      const iNext = (i + 1) % vertices.length;
+      const kNext = (k + 1) % vertices.length;
+
+      // Adjacent sides always intersect (at the vertex); skip those
+      if (iNext === k || kNext === i) {
+        continue;
+      }
+      const side1 = [vertices[i], vertices[iNext]];
+      const side2 = [vertices[k], vertices[kNext]];
+      if (intersects(side1, side2)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 function vector(a, b) {
   return ___default["default"].map(___default["default"].zip(a, b), function (pair) {
     return pair[0] - pair[1];
@@ -28922,25 +28949,27 @@ const lockedFigureColors = {
   pink: "#B25071",
   red: "#D92916"
 };
+const lockedEllipseFillStyles = {
+  none: 0,
+  solid: 1,
+  translucent: 0.4
+};
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
-const LockedCircle = props => {
+const LockedEllipse = props => {
   const {
     center,
     radius,
+    angle,
     color,
     fillStyle,
     strokeStyle
   } = props;
-  const fill = {
-    none: 0,
-    solid: 1,
-    translucent: 0.4
-  };
-  return /*#__PURE__*/React__namespace.createElement(mafs.Circle, {
+  return /*#__PURE__*/React__namespace.createElement(mafs.Ellipse, {
     center: center,
     radius: radius,
-    fillOpacity: fill[fillStyle],
+    angle: angle,
+    fillOpacity: lockedEllipseFillStyles[fillStyle],
     strokeStyle: strokeStyle,
     color: lockedFigureColors[color]
   });
@@ -29199,6 +29228,21 @@ const LockedPoint = props => {
   });
 };
 
+const LockedVector = props => {
+  const {
+    color,
+    points
+  } = props;
+  const [tail, tip] = points;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "locked-vector"
+  }, /*#__PURE__*/React__namespace.createElement(Vector, {
+    tail: tail,
+    tip: tip,
+    color: lockedFigureColors[color]
+  }));
+};
+
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -29214,9 +29258,13 @@ const GraphLockedLayer = props => {
           key: `line-${index}`,
           range: props.range
         }, figure));
-      case "circle":
-        return /*#__PURE__*/React__namespace.createElement(LockedCircle, _extends({
-          key: `circle-${index}`
+      case "ellipse":
+        return /*#__PURE__*/React__namespace.createElement(LockedEllipse, _extends({
+          key: `ellipse-${index}`
+        }, figure));
+      case "vector":
+        return /*#__PURE__*/React__namespace.createElement(LockedVector, _extends({
+          key: `vector-${index}`
         }, figure));
       default:
         /**
@@ -29345,7 +29393,8 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     point,
     color = wonderBlocksTokens.color.blue,
     dragging,
-    focusBehavior
+    focusBehavior,
+    cursor
   } = props;
 
   // WB Tooltip requires a color name for the background color.
@@ -29380,7 +29429,8 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     ref: hitboxRef,
     className: pointClasses,
     style: {
-      "--movable-point-color": color
+      "--movable-point-color": color,
+      cursor
     },
     "data-testid": "movable-point",
     tabIndex: tabIndex(focusBehavior)
@@ -29628,7 +29678,33 @@ const SegmentGraph = props => {
   })));
 };
 
-const LinearGraph = props => {
+const LinearGraph = (props, key) => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: line
+  } = props.graphState;
+
+  // Linear graphs only have one line
+  // (LEMS-2050): Update the reducer so that we have a separate action for moving one line
+  // and another action for moving multiple lines
+  return /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    key: 0,
+    points: line,
+    onMoveLine: delta => {
+      dispatch(moveLine(0, delta));
+    },
+    extend: {
+      start: true,
+      end: true
+    },
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, 0)),
+    color: "var(--movable-line-stroke-color)"
+  });
+};
+
+const LinearSystemGraph = props => {
   const {
     dispatch
   } = props;
@@ -29648,7 +29724,7 @@ const LinearGraph = props => {
     },
     onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
     color: colors[i]
-  })));
+  })), ";");
 };
 
 const RayGraph = props => {
@@ -29656,14 +29732,14 @@ const RayGraph = props => {
     dispatch
   } = props;
   const {
-    coords: lines
+    coords: line
   } = props.graphState;
   const handleMoveLine = delta => dispatch(moveLine(0, delta));
   const handleMovePoint = (pointIndex, newPoint) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
-  return /*#__PURE__*/React__namespace.createElement(MovableLine
-  // a ray only has one line
-  , {
-    points: lines[0],
+
+  // Ray graphs only have one line
+  return /*#__PURE__*/React__namespace.createElement(MovableLine, {
+    points: line,
     onMoveLine: handleMoveLine,
     onMovePoint: handleMovePoint,
     extend: {
@@ -29850,6 +29926,7 @@ const StyledMovablePoint = props => {
   const {
     point,
     onMove,
+    cursor,
     color = wonderBlocksTokens.color.blue
   } = props;
   const {
@@ -29868,7 +29945,8 @@ const StyledMovablePoint = props => {
     focusBehavior: {
       type: "uncontrolled",
       tabIndex: 0
-    }
+    },
+    cursor: cursor
   });
 };
 
@@ -29974,26 +30052,42 @@ function initializeGraphState(params) {
       return {
         ...shared,
         type: "segment",
-        coords: getDefaultSegments({
+        coords: getSegmentCoords({
           graph,
           step,
           range
         })
       };
     case "linear":
-    case "linear-system":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getLineCoords({
+          graph,
+          range,
+          step
+        })
+      };
     case "ray":
       return {
         ...shared,
         type: graph.type,
-        // Linear and ray graphs have a single tuple of points, while a
-        // linear system has two tuples of points.
         coords: getLineCoords({
           graph,
           range,
           step
         })
       };
+    case "linear-system":
+      return {
+        ...shared,
+        type: graph.type,
+        coords: getLinearSystemCoords({
+          graph,
+          range,
+          step
+        })
+      };
     case "polygon":
       return {
         ...shared,
@@ -30020,8 +30114,7 @@ function initializeGraphState(params) {
       return {
         ...shared,
         type: graph.type,
-        center: [0, 0],
-        radiusPoint: [1, 0]
+        ...getCircleCoords(graph)
       };
     case "quadratic":
       return {
@@ -30105,13 +30198,13 @@ function getGradableGraph(state, initialGraph) {
   if (state.type === "linear" && initialGraph.type === "linear") {
     return {
       ...initialGraph,
-      coords: state.coords[0]
+      coords: state.coords
     };
   }
   if (state.type === "ray" && initialGraph.type === "ray") {
     return {
       ...initialGraph,
-      coords: state.coords[0]
+      coords: state.coords
     };
   }
   if (state.type === "polygon" && initialGraph.type === "polygon") {
@@ -30147,12 +30240,15 @@ function getGradableGraph(state, initialGraph) {
   }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
-const getDefaultSegments = _ref2 => {
+const getSegmentCoords = _ref2 => {
   let {
     graph,
     range,
     step
   } = _ref2;
+  if (graph.coords) {
+    return graph.coords;
+  }
   const ys = n => {
     switch (n) {
       case 2:
@@ -30184,23 +30280,28 @@ const getLineCoords = _ref3 => {
     range,
     step
   } = _ref3;
-  //  Return two lines for a linear system, one for a ray or linear
-  switch (graph.type) {
-    case "linear-system":
-      return defaultLinearCoords.map(points => normalizePoints(range, step, points));
-    case "linear":
-    case "ray":
-      return [normalizePoints(range, step, defaultLinearCoords[0])];
-    default:
-      throw new wonderStuffCore.UnreachableCaseError(graph);
+  if (graph.coords) {
+    return graph.coords;
   }
+  return normalizePoints(range, step, defaultLinearCoords[0]);
 };
-const getPolygonCoords = _ref4 => {
+const getLinearSystemCoords = _ref4 => {
   let {
     graph,
     range,
     step
   } = _ref4;
+  if (graph.coords) {
+    return graph.coords;
+  }
+  return defaultLinearCoords.map(points => normalizePoints(range, step, points));
+};
+const getPolygonCoords = _ref5 => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref5;
   let coords = graph.coords?.slice();
   if (coords) {
     return coords;
@@ -30225,14 +30326,31 @@ const getPolygonCoords = _ref4 => {
   return coords;
 };
 const getSinusoidCoords = (graph, range, step) => {
+  if (graph.coords) {
+    return [graph.coords[0], graph.coords[1]];
+  }
   let coords = [[0.5, 0.5], [0.65, 0.6]];
   coords = normalizePoints(range, step, coords, true);
   return coords;
 };
 const getQuadraticCoords = (graph, range, step) => {
-  let coords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
-  coords = normalizePoints(range, step, coords, true);
-  return coords;
+  if (graph.coords) {
+    return graph.coords;
+  }
+  const defaultCoords = [[0.25, 0.75], [0.5, 0.25], [0.75, 0.75]];
+  return normalizePoints(range, step, defaultCoords, true);
+};
+const getCircleCoords = (graph, range, step) => {
+  if (graph.center != null && graph.radius != null) {
+    return {
+      center: graph.center,
+      radiusPoint: mafs.vec.add(graph.center, [graph.radius, 0])
+    };
+  }
+  return {
+    center: [0, 0],
+    radiusPoint: [1, 0]
+  };
 };
 
 /**
@@ -30262,6 +30380,7 @@ function CircleGraph(props) {
     onMove: newCenter => dispatch(moveCenter(newCenter))
   }), /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
     point: radiusPoint,
+    cursor: "ew-resize",
     onMove: newRadiusPoint => {
       dispatch(moveRadiusPoint(newRadiusPoint));
     }
@@ -31570,15 +31689,9 @@ function interactiveGraphReducer(state, action) {
   }
 }
 function doMoveControlPoint(state, action) {
-  const {
-    snapStep,
-    range
-  } = state;
   switch (state.type) {
     case "segment":
-    case "linear":
     case "linear-system":
-    case "ray":
       {
         const newCoords = updateAtIndex({
           array: state.coords,
@@ -31586,11 +31699,7 @@ function doMoveControlPoint(state, action) {
           update: tuple => setAtIndex({
             array: tuple,
             index: action.pointIndex,
-            newValue: snap(snapStep, bound$1({
-              snapStep,
-              range,
-              point: action.destination
-            }))
+            newValue: boundAndSnapToGrid(action.destination, state)
           })
         });
         const coordsToCheck = newCoords[action.itemIndex];
@@ -31603,6 +31712,20 @@ function doMoveControlPoint(state, action) {
           coords: newCoords
         };
       }
+    case "linear":
+    case "ray":
+      {
+        const newCoords = setAtIndex({
+          array: state.coords,
+          index: action.pointIndex,
+          newValue: boundAndSnapToGrid(action.destination, state)
+        });
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        };
+      }
     case "circle":
       throw new Error("FIXME implement circle reducer");
     case "point":
@@ -31614,6 +31737,9 @@ function doMoveControlPoint(state, action) {
       throw new wonderStuffCore.UnreachableCaseError(state);
   }
 }
+
+// (LEMS-2050): Update the reducer so that we have a separate action for moving one line
+// and another action for moving multiple lines
 function doMoveLine(state, action) {
   const {
     snapStep,
@@ -31621,9 +31747,7 @@ function doMoveLine(state, action) {
   } = state;
   switch (state.type) {
     case "segment":
-    case "linear":
     case "linear-system":
-    case "ray":
       {
         if (action.itemIndex === undefined) {
           throw new Error("Please provide index of line to move");
@@ -31649,6 +31773,22 @@ function doMoveLine(state, action) {
           coords: newCoords
         };
       }
+    case "linear":
+    case "ray":
+      {
+        const currentLine = state.coords;
+        const change = getChange(currentLine, action.delta, {
+          snapStep,
+          range
+        });
+        const newLine = [snap(snapStep, mafs.vec.add(currentLine[0], change)), snap(snapStep, mafs.vec.add(currentLine[1], change))];
+        return {
+          ...state,
+          type: state.type,
+          hasBeenInteractedWith: true,
+          coords: newLine
+        };
+      }
     default:
       // The MoveLine action doesn't make sense for other graph types;
       // ignore it if it somehow happens
@@ -31682,6 +31822,21 @@ function doMoveAll(state, action) {
 function doMovePoint(state, action) {
   switch (state.type) {
     case "polygon":
+      const newCoords = setAtIndex({
+        array: state.coords,
+        index: action.index,
+        newValue: boundAndSnapToGrid(action.destination, state)
+      });
+
+      // Reject the move if it would cause the sides of the polygon to cross
+      if (polygonSidesIntersect(newCoords)) {
+        return state;
+      }
+      return {
+        ...state,
+        hasBeenInteractedWith: true,
+        coords: newCoords
+      };
     case "point":
       {
         return {
@@ -31690,11 +31845,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap(state.snapStep, bound$1({
-              snapStep: state.snapStep,
-              range: state.range,
-              point: action.destination
-            }))
+            newValue: boundAndSnapToGrid(action.destination, state)
           })
         };
       }
@@ -31714,11 +31865,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap(state.snapStep, bound$1({
-              snapStep: state.snapStep,
-              range: state.range,
-              point: destination
-            }))
+            newValue: boundAndSnapToGrid(destination, state)
           })
         };
       }
@@ -31730,11 +31877,7 @@ function doMovePoint(state, action) {
           coords: setAtIndex({
             array: state.coords,
             index: action.index,
-            newValue: snap(state.snapStep, bound$1({
-              snapStep: state.snapStep,
-              range: state.range,
-              point: action.destination
-            }))
+            newValue: boundAndSnapToGrid(action.destination, state)
           })
         };
       }
@@ -31843,14 +31986,26 @@ const getChange = (coords, delta, constraintOpts) => {
   const dy = clamp(deltaY, minYMove, maxYMove);
   return [dx, dy];
 };
+function boundAndSnapToGrid(point, _ref) {
+  let {
+    snapStep,
+    range
+  } = _ref;
+  return snap(snapStep, bound$1({
+    snapStep,
+    range,
+    point
+  }));
+}
+
 // Returns the closest point to the given `point` that is within the graph
 // bounds given in `state`.
-function bound$1(_ref) {
+function bound$1(_ref2) {
   let {
     snapStep,
     range,
     point
-  } = _ref;
+  } = _ref2;
   const [requestedX, requestedY] = point;
   const [snapX, snapY] = snapStep;
   const [[minX, maxX], [minY, maxY]] = range;
@@ -31858,12 +32013,12 @@ function bound$1(_ref) {
 }
 
 // Returns the vector from the given point to the top-right corner of the graph
-function maxMove(_ref2) {
+function maxMove(_ref3) {
   let {
     snapStep,
     range,
     point
-  } = _ref2;
+  } = _ref3;
   const topRight = bound$1({
     snapStep,
     range,
@@ -31874,12 +32029,12 @@ function maxMove(_ref2) {
 
 // Returns the vector from the given point to the bottom-left corner of the
 // graph
-function minMove(_ref3) {
+function minMove(_ref4) {
   let {
     snapStep,
     range,
     point
-  } = _ref3;
+  } = _ref4;
   const bottomLeft = bound$1({
     snapStep,
     range,
@@ -31935,8 +32090,12 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
-    case "linear":
     case "linear-system":
+      return /*#__PURE__*/React__namespace.createElement(LinearSystemGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "linear":
       return /*#__PURE__*/React__namespace.createElement(LinearGraph, {
         graphState: state,
         dispatch: dispatch
@@ -44184,7 +44343,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "23.1.0";
+const libVersion = "23.3.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -47284,6 +47443,7 @@ exports.itemDataVersion = itemDataVersion;
 exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
+exports.lockedEllipseFillStyles = lockedEllipseFillStyles;
 exports.lockedFigureColors = lockedFigureColors;
 exports.mediaQueries = mediaQueries;
 exports.parsePerseusItem = parsePerseusItem;