@khanacademy/perseus 24.0.0 → 24.2.0

package/dist/index.css

@@ -3518,7 +3518,7 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
     font-size: 18px;
   }
 }
-.perseus-widget-editor-content .locked-figure-accordion h2 {
+.perseus-widget-editor-content .perseus-editor-accordion h2 {
   padding-top: 0;
 }
 .keypad-input {
@@ -4143,6 +4143,34 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
 }
 
 
+.MafsView .protractor-rotation-handle {
+    cursor: grab;
+    /* `pointer-events: all` is needed to make the hit target the size of the
+     * entire <g> element and not just its visible subelements */
+    pointer-events: all;
+    transition: transform 0.1s ease-out;
+}
+
+.MafsView .protractor-rotation-handle:hover {
+    transform: scale(1.3);
+}
+
+.MafsView .protractor-rotation-handle-arrow-arc {
+    fill: none;
+    stroke: var(--mafs-blue);
+    stroke-width: 8;
+    /* `strokeLinecap: square` prevents a hairline crack from appearing
+     * between the arc and the arrowheads, by making the arc extend a bit
+     * beyond its start and end coordinates.
+     */
+    stroke-linecap: square;
+}
+
+.MafsView .protractor-rotation-handle-arrowhead {
+    fill: var(--mafs-blue);
+    stroke: none;
+}
+
 .MafsView {
   display: block;
   background: var(--mafs-bg);

package/dist/index.d.ts

@@ -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, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, MathFormat, InputNumberWidget, // TODO(jeremy): remove?
+export type { LockedFigure, LockedFigureColor, LockedFigureFillType, LockedFigureType, LockedPointType, LockedLineType, LockedVectorType, LockedEllipseType, LockedPolygonType, PerseusGraphType, PerseusAnswerArea, PerseusExpressionWidgetOptions, Range, Size, CollinearTuple, 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

@@ -31,6 +31,7 @@ var caretDown = require('@phosphor-icons/core/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/regular/caret-up.svg');
 var debounce$1 = require('lodash.debounce');
 var mafs = require('mafs');
+var react = require('@use-gesture/react');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
@@ -13187,7 +13188,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
   }(),
   protractor: function (center) {
     // @ts-expect-error - TS2350 - Only a void function can be called with the 'new' keyword.
-    return new Protractor(this, center);
+    return new Protractor$1(this, center);
   },
   ruler: function (options) {
     // @ts-expect-error - TS2350 - Only a void function can be called with the 'new' keyword.
@@ -13195,7 +13196,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
   },
   addPoints: kmath.vector.add
 });
-function Protractor(graph, center) {
+function Protractor$1(graph, center) {
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   this.set = graph.raphael.set();
 
@@ -28849,7 +28850,25 @@ class PathBuilder {
   move(x, y) {
     this.path.push({
       action: "M",
-      coords: [x, y]
+      args: [x, y]
+    });
+    return this;
+  }
+  line(x, y) {
+    this.path.push({
+      action: "L",
+      args: [x, y]
+    });
+    return this;
+  }
+  circularArc(radius, toX, toY) {
+    let {
+      sweep = false,
+      largeArc = false
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    this.path.push({
+      action: "A",
+      args: [radius, radius, 0 /* rotation */, largeArc ? 1 : 0, sweep ? 1 : 0, toX, toY]
     });
     return this;
   }
@@ -28858,7 +28877,7 @@ class PathBuilder {
   curve(control1X, control1Y, control2X, control2Y, endX, endY) {
     this.path.push({
       action: "C",
-      coords: [control1X, control1Y, control2X, control2Y, endX, endY]
+      args: [control1X, control1Y, control2X, control2Y, endX, endY]
     });
     return this;
   }
@@ -28870,13 +28889,40 @@ class PathBuilder {
   }
 }
 function commandToString(command) {
-  return `${command.action}${command.coords.join(" ")}`;
+  return `${command.action}${command.args.join(" ")}`;
 }
 function scaleCommandBy(scaleFactor) {
-  return command => ({
-    ...command,
-    coords: command.coords.map(c => c * scaleFactor)
-  });
+  return command => {
+    switch (command.action) {
+      case "A":
+        // TODO(benchristel): do we want to refactor this switch to
+        // use polymorphism?
+        // Arc command
+        return {
+          ...command,
+          args: [command.args[0] * scaleFactor,
+          // x radius
+          command.args[1] * scaleFactor,
+          // y radius
+          command.args[2],
+          // rotation
+          command.args[3],
+          // largeArc flag
+          command.args[4],
+          // sweep flag
+          command.args[5] * scaleFactor,
+          // end x
+          command.args[6] * scaleFactor // end y
+          ]
+        };
+
+      default:
+        return {
+          ...command,
+          args: command.args.map(c => c * scaleFactor)
+        };
+    }
+  };
 }
 
 // We use the pathBuilder here to scale up the SVG path coordinates used
@@ -29264,8 +29310,171 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
-function useDraggable(params) {
-  return mafs.useMovable(params);
+// Returns the closest point to the given `point` that is within the graph
+// bounds given in `state`.
+function bound$1(_ref) {
+  let {
+    snapStep,
+    range,
+    point
+  } = _ref;
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  const [[minX, maxX], [minY, maxY]] = range;
+  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
+}
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
+    throw new Error(value);
+}
+
+/**
+ * Code in this file is derived from
+ * https://github.com/stevenpetryk/mafs/blob/4520319379a2cc2df8148d8baaef1f85db117103/src/interaction/useMovable.tsx#L20-L83
+ * and copied here under the terms of the MIT license.
+ *
+ * Copyright 2021 Steven Petryk
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ */
+
+function useDraggable(args) {
+  const {
+    gestureTarget: target,
+    onMove,
+    point,
+    constrain
+  } = args;
+  const [dragging, setDragging] = React__namespace.useState(false);
+  const {
+    xSpan,
+    ySpan
+  } = useSpanContext();
+  const {
+    viewTransform,
+    userTransform
+  } = mafs.useTransformContext();
+  const inverseViewTransform = mafs.vec.matrixInvert(viewTransform);
+  invariant(inverseViewTransform, "The view transform must be invertible.");
+  const inverseTransform = React__namespace.useMemo(() => getInverseTransform(userTransform), [userTransform]);
+  const pickup = React__namespace.useRef([0, 0]);
+  react.useDrag(state => {
+    const {
+      type,
+      event
+    } = state;
+    event?.stopPropagation();
+    const isKeyboard = type.includes("key");
+    if (isKeyboard) {
+      event?.preventDefault();
+      const {
+        direction: yDownDirection,
+        altKey,
+        metaKey,
+        shiftKey
+      } = state;
+      const direction = [yDownDirection[0], -yDownDirection[1]];
+      const span = Math.abs(direction[0]) ? xSpan : ySpan;
+      let divisions = 50;
+      if (altKey || metaKey) {
+        divisions = 200;
+      }
+      if (shiftKey) {
+        divisions = 10;
+      }
+      const min = span / (divisions * 2);
+      const tests = range(span / divisions, span / 2, span / divisions);
+      for (const dx of tests) {
+        // Transform the test back into the point's coordinate system
+        const testMovement = mafs.vec.scale(direction, dx);
+        const testPoint = constrain(mafs.vec.transform(mafs.vec.add(mafs.vec.transform(point, userTransform), testMovement), inverseTransform));
+        if (mafs.vec.dist(testPoint, point) > min) {
+          onMove(testPoint);
+          break;
+        }
+      }
+    } else {
+      const {
+        last,
+        movement: pixelMovement,
+        first
+      } = state;
+      setDragging(!last);
+      if (first) {
+        pickup.current = mafs.vec.transform(point, userTransform);
+      }
+      if (mafs.vec.mag(pixelMovement) === 0) {
+        return;
+      }
+      const movement = mafs.vec.transform(pixelMovement, inverseViewTransform);
+      onMove(constrain(mafs.vec.transform(mafs.vec.add(pickup.current, movement), inverseTransform)));
+    }
+  }, {
+    target,
+    eventOptions: {
+      passive: false
+    }
+  });
+  return {
+    dragging
+  };
+}
+function getInverseTransform(transform) {
+  const invert = mafs.vec.matrixInvert(transform);
+  invariant(invert !== null, "Could not invert transform matrix. A parent transformation matrix might be degenerative (mapping 2D space to a line).");
+  return invert;
+}
+function useSpanContext() {
+  const {
+    range: [[xMin, xMax], [yMin, yMax]]
+  } = useGraphConfig();
+  const xSpan = xMax - xMin;
+  const ySpan = yMax - yMin;
+  return {
+    xSpan,
+    ySpan
+  };
+}
+function range(min, max) {
+  let step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  const result = [];
+  for (let i = min; i < max - step / 2; i += step) {
+    result.push(i);
+  }
+  const computedMax = result[result.length - 1] + step;
+  if (Math.abs(max - computedMax) < step / 1e-6) {
+    result.push(max);
+  } else {
+    result.push(computedMax);
+  }
+  return result;
 }
 
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
@@ -30099,6 +30308,7 @@ function DragHandle(props) {
   }), dragHandleDotPositions.map(offsetPx => {
     const [xPx, yPx] = mafs.vec.add(offsetPx, centerPx);
     return /*#__PURE__*/React__namespace.createElement("circle", {
+      key: `circle-${xPx}-${yPx}`,
       className: "movable-circle-handle-dot",
       cx: xPx,
       cy: yPx
@@ -31316,6 +31526,154 @@ const LegacyGrid = _ref => {
   return null;
 };
 
+const protractorImage = "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png";
+
+// The vector from the center of the protractor to the top left corner of the
+// protractor image, in pixels. Used for positioning.
+const centerToTopLeft = [-180, -170];
+
+// The vector from the center of the protractor to the center of the rotation
+// handle.
+const centerToRotationHandle = [-176, -15];
+function Protractor() {
+  const {
+    range,
+    snapStep
+  } = useGraphConfig();
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  // Position the protractor in the center of the graph (horizontally), and
+  // 95% of the way to the bottom of the graph (vertically).
+  const initialCenter = [lerp(xMin, xMax, 0.5), lerp(yMin, yMax, 0.05)];
+  const [center, setCenter] = React.useState(initialCenter);
+  const [rotationHandleOffset, setRotationHandleOffset] = React.useState(centerToRotationHandle);
+  const draggableRef = React.useRef(null);
+  useDraggable({
+    gestureTarget: draggableRef,
+    onMove: setCenter,
+    point: center,
+    constrain: point => bound$1({
+      snapStep,
+      range,
+      point
+    })
+  });
+  const rotationHandleRef = React.useRef(null);
+  useDraggablePx({
+    gestureTarget: rotationHandleRef,
+    onMove: setRotationHandleOffset,
+    point: rotationHandleOffset,
+    constrain: constrainToCircle
+  });
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const topLeftPx = mafs.vec.add(centerPx, centerToTopLeft);
+  const angle = calculateAngleInDegrees(rotationHandleOffset) - calculateAngleInDegrees(centerToRotationHandle);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    ref: draggableRef,
+    transform: `translate(${topLeftPx[0]}, ${topLeftPx[1]}), rotate(${angle})`,
+    style: {
+      transformOrigin: `${-centerToTopLeft[0]}px ${-centerToTopLeft[1]}px`
+    }
+  }, /*#__PURE__*/React__namespace.createElement("image", {
+    href: protractorImage
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    transform: `translate(5, ${-centerToTopLeft[1]})`,
+    ref: rotationHandleRef
+  }, /*#__PURE__*/React__namespace.createElement(RotationArrow, null)));
+}
+function RotationArrow() {
+  const radius = 175;
+  const angleDeg = 10;
+  const angleRad = degreesToRadians(angleDeg);
+  const endX = radius * (1 - Math.cos(angleRad));
+  const endY = radius * -Math.sin(angleRad);
+  const rotationArrow = pathBuilder().move(0, 0).circularArc(radius, endX, endY, {
+    sweep: true
+  }).build();
+  const arrowhead = pathBuilder().move(-8, 0).line(0, 10).line(8, 0).build();
+  const targetRadius = TARGET_SIZE / 2;
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    className: "protractor-rotation-handle"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    className: "protractor-rotation-handle-arrow-arc",
+    d: rotationArrow
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    className: "protractor-rotation-handle-arrowhead",
+    d: arrowhead
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    className: "protractor-rotation-handle-arrowhead",
+    d: arrowhead,
+    transform: `translate(${endX}, ${endY}), rotate(${180 + angleDeg})`
+  }), /*#__PURE__*/React__namespace.createElement("ellipse", {
+    cx: "0px",
+    cy: "-15px",
+    rx: targetRadius,
+    ry: targetRadius,
+    fill: "none"
+  }));
+}
+const protractorRadius = mafs.vec.mag(centerToRotationHandle);
+function constrainToCircle(edgePoint) {
+  return mafs.vec.withMag(edgePoint, protractorRadius);
+}
+
+/* The implementation of useDraggablePx is derived from
+ * https://github.com/stevenpetryk/mafs/blob/4520319379a2cc2df8148d8baaef1f85db117103/src/interaction/useMovable.tsx#L20-L83
+ * and copied here under the terms of the MIT license.
+ *
+ * Copyright 2021 Steven Petryk
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ */
+function useDraggablePx(args) {
+  const {
+    gestureTarget: target,
+    onMove,
+    point,
+    constrain = p => p
+  } = args;
+  const pickupPx = React__namespace.useRef([0, 0]);
+  react.useDrag(state => {
+    const {
+      event,
+      first,
+      movement: pixelMovement
+    } = state;
+    event?.stopPropagation();
+    if (first) {
+      pickupPx.current = point;
+    }
+    if (mafs.vec.mag(pixelMovement) === 0) {
+      return;
+    }
+    onMove?.(constrain(mafs.vec.add(pickupPx.current, pixelMovement)));
+  }, {
+    target,
+    eventOptions: {
+      passive: false
+    }
+  });
+}
+
+// [L]inear Int[erp]olation: gets the weighted average of two values `a` and
+// `b`, with the given `fraction` specifying how much weight `a` and `b` get:
+// - if `fraction` is 0, `lerp` returns `a`.
+// - if `fraction` is 0.5, `lerp` returns the average of `a` and `b`.
+// - if `fraction` is 1, `lerp` returns `b`.
+function lerp(a, b, fraction) {
+  return (b - a) * fraction + a;
+}
+function degreesToRadians(degrees) {
+  return degrees / 180 * Math.PI;
+}
+
 function initializeGraphState(params) {
   const {
     graph,
@@ -32023,27 +32381,13 @@ function boundAndSnapToSides(destinationPoint, _ref3, index) {
   return kmath.vector.add(coordsCopy[rel(-1)], offset);
 }
 
-// Returns the closest point to the given `point` that is within the graph
-// bounds given in `state`.
-function bound$1(_ref4) {
-  let {
-    snapStep,
-    range,
-    point
-  } = _ref4;
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = snapStep;
-  const [[minX, maxX], [minY, maxY]] = range;
-  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
-}
-
 // Returns the vector from the given point to the top-right corner of the graph when snapped to the grid
-function maxMove(_ref5) {
+function maxMove(_ref4) {
   let {
     snapStep,
     range,
     point
-  } = _ref5;
+  } = _ref4;
   const topRight = bound$1({
     snapStep,
     range,
@@ -32053,12 +32397,12 @@ function maxMove(_ref5) {
 }
 
 // Returns the vector from the given point to the bottom-left corner of the graph when snapped to the grid
-function minMove(_ref6) {
+function minMove(_ref5) {
   let {
     snapStep,
     range,
     point
-  } = _ref6;
+  } = _ref5;
   const bottomLeft = bound$1({
     snapStep,
     range,
@@ -32066,15 +32410,6 @@ function minMove(_ref6) {
   });
   return mafs.vec.sub(bottomLeft, point);
 }
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
 const coordsOverlap = coords => coords.some((coord, i) => coords.some((c, j) => i !== j && kmath.vector.equal(coord, c)));
 function updateAtIndex(args) {
   const {
@@ -32289,7 +32624,7 @@ const MafsGraph = props => {
   }), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), renderGraph({
+  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
     state,
     dispatch
   })))));
@@ -33585,14 +33920,9 @@ class InteractiveGraph extends React__namespace.Component {
     return InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
   }
   render() {
-    if (this.props.graph.type === "polygon" && this.props.graph.numSides === "unlimited") {
-      return /*#__PURE__*/React__namespace.createElement(LegacyInteractiveGraph, _extends({
-        ref: this.legacyGraphRef
-      }, this.props));
-    }
-
     // Mafs shim
-    if (this.props.apiOptions?.flags?.["mafs"]?.[this.props.graph.type]) {
+    const mafsFlags = this.props.apiOptions?.flags?.["mafs"];
+    if (shouldUseMafs(mafsFlags, this.props.graph)) {
       const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
       const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
       const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
@@ -34151,6 +34481,33 @@ class InteractiveGraph extends React__namespace.Component {
     return props.graph;
   }
 }
+
+// exported for testing
+function shouldUseMafs(mafsFlags, graph) {
+  if (typeof mafsFlags === "boolean" || typeof mafsFlags === "undefined") {
+    return false;
+  }
+  switch (graph.type) {
+    case "point":
+      if (graph.numPoints === UNLIMITED) {
+        // TODO(benchristel): add a feature flag for the "unlimited"
+        // case once we've implemented point graphs with unlimited
+        // points
+        return false;
+      }
+      return Boolean(mafsFlags["point"]);
+    case "polygon":
+      if (graph.numSides === UNLIMITED) {
+        // TODO(benchristel): add a feature flag for the "unlimited"
+        // case once we've implemented polygon graphs with unlimited
+        // sides
+        return false;
+      }
+      return Boolean(mafsFlags["polygon"]);
+    default:
+      return Boolean(mafsFlags[graph.type]);
+  }
+}
 var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph",
@@ -44390,7 +44747,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "24.0.0";
+const libVersion = "24.2.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {