@khanacademy/perseus 23.6.0 → 24.1.0

package/dist/es/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/es/index.js

@@ -29,7 +29,8 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Ellipse, Line as Line$4, Point as Point$2, Polygon, useMovable, Text as Text$1, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
+import { vec, Ellipse, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Plot as Plot$3, Coordinates, Mafs } from 'mafs';
+import { useDrag } from '@use-gesture/react';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { Body, LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
@@ -520,8 +521,7 @@ class InnerMathInput extends React.Component {
       active: false
     }) : /*#__PURE__*/React.createElement(Clickable, {
       "aria-label": this.state.keypadOpen ? this.context.strings.closeKeypad : this.context.strings.openKeypad,
-      "aria-checked": this.state.keypadOpen,
-      role: "switch",
+      role: "button",
       onClick: () => this.state.keypadOpen ? this.closeKeypad() : this.openKeypad()
     }, props => /*#__PURE__*/React.createElement(MathInputIcon, _extends({
       active: this.state.keypadOpen
@@ -13086,7 +13086,7 @@ _.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.
@@ -13094,7 +13094,7 @@ _.extend(GraphUtils.Graphie.prototype, {
   },
   addPoints: vector$1.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();
 
@@ -28558,7 +28558,24 @@ 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, {
+    sweep = false,
+    largeArc = false
+  } = {}) {
+    this.path.push({
+      action: "A",
+      args: [radius, radius, 0 /* rotation */, largeArc ? 1 : 0, sweep ? 1 : 0, toX, toY]
     });
     return this;
   }
@@ -28567,7 +28584,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;
   }
@@ -28579,12 +28596,38 @@ class PathBuilder {
   }
 }
 function commandToString(command) {
-  return `${command.action}${command.coords.join(" ")}`;
+  return `${command.action}${command.args.join(" ")}`;
 }
 function scaleCommandBy(scaleFactor) {
-  return command => _extends({}, 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 _extends({}, 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 _extends({}, command, {
+          args: command.args.map(c => c * scaleFactor)
+        });
+    }
+  };
 }
 
 // We use the pathBuilder here to scale up the SVG path coordinates used
@@ -28972,8 +29015,169 @@ function snap(snapStep, point) {
   return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
 }
 
-function useDraggable(params) {
-  return useMovable(params);
+// Returns the closest point to the given `point` that is within the graph
+// bounds given in `state`.
+function bound$1({
+  snapStep,
+  range,
+  point
+}) {
+  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.useState(false);
+  const {
+    xSpan,
+    ySpan
+  } = useSpanContext();
+  const {
+    viewTransform,
+    userTransform
+  } = useTransformContext();
+  const inverseViewTransform = vec.matrixInvert(viewTransform);
+  invariant(inverseViewTransform, "The view transform must be invertible.");
+  const inverseTransform = React.useMemo(() => getInverseTransform(userTransform), [userTransform]);
+  const pickup = React.useRef([0, 0]);
+  useDrag(state => {
+    const {
+      type,
+      event
+    } = state;
+    event == null || event.stopPropagation();
+    const isKeyboard = type.includes("key");
+    if (isKeyboard) {
+      event == null || 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 = vec.scale(direction, dx);
+        const testPoint = constrain(vec.transform(vec.add(vec.transform(point, userTransform), testMovement), inverseTransform));
+        if (vec.dist(testPoint, point) > min) {
+          onMove(testPoint);
+          break;
+        }
+      }
+    } else {
+      const {
+        last,
+        movement: pixelMovement,
+        first
+      } = state;
+      setDragging(!last);
+      if (first) {
+        pickup.current = vec.transform(point, userTransform);
+      }
+      if (vec.mag(pixelMovement) === 0) {
+        return;
+      }
+      const movement = vec.transform(pixelMovement, inverseViewTransform);
+      onMove(constrain(vec.transform(vec.add(pickup.current, movement), inverseTransform)));
+    }
+  }, {
+    target,
+    eventOptions: {
+      passive: false
+    }
+  });
+  return {
+    dragging
+  };
+}
+function getInverseTransform(transform) {
+  const invert = 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, step = 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
@@ -30996,6 +31200,154 @@ const LegacyGrid = ({
   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] = useState(initialCenter);
+  const [rotationHandleOffset, setRotationHandleOffset] = useState(centerToRotationHandle);
+  const draggableRef = useRef(null);
+  useDraggable({
+    gestureTarget: draggableRef,
+    onMove: setCenter,
+    point: center,
+    constrain: point => bound$1({
+      snapStep,
+      range,
+      point
+    })
+  });
+  const rotationHandleRef = useRef(null);
+  useDraggablePx({
+    gestureTarget: rotationHandleRef,
+    onMove: setRotationHandleOffset,
+    point: rotationHandleOffset,
+    constrain: constrainToCircle
+  });
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const topLeftPx = vec.add(centerPx, centerToTopLeft);
+  const angle = calculateAngleInDegrees(rotationHandleOffset) - calculateAngleInDegrees(centerToRotationHandle);
+  return /*#__PURE__*/React.createElement("g", {
+    ref: draggableRef,
+    transform: `translate(${topLeftPx[0]}, ${topLeftPx[1]}), rotate(${angle})`,
+    style: {
+      transformOrigin: `${-centerToTopLeft[0]}px ${-centerToTopLeft[1]}px`
+    }
+  }, /*#__PURE__*/React.createElement("image", {
+    href: protractorImage
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: `translate(5, ${-centerToTopLeft[1]})`,
+    ref: rotationHandleRef
+  }, /*#__PURE__*/React.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.createElement("g", {
+    className: "protractor-rotation-handle"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "protractor-rotation-handle-arrow-arc",
+    d: rotationArrow
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "protractor-rotation-handle-arrowhead",
+    d: arrowhead
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "protractor-rotation-handle-arrowhead",
+    d: arrowhead,
+    transform: `translate(${endX}, ${endY}), rotate(${180 + angleDeg})`
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: "0px",
+    cy: "-15px",
+    rx: targetRadius,
+    ry: targetRadius,
+    fill: "none"
+  }));
+}
+const protractorRadius = vec.mag(centerToRotationHandle);
+function constrainToCircle(edgePoint) {
+  return 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.useRef([0, 0]);
+  useDrag(state => {
+    const {
+      event,
+      first,
+      movement: pixelMovement
+    } = state;
+    event == null || event.stopPropagation();
+    if (first) {
+      pickupPx.current = point;
+    }
+    if (vec.mag(pixelMovement) === 0) {
+      return;
+    }
+    onMove == null || onMove(constrain(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) {
   var _graph$snapTo;
   const {
@@ -31678,19 +32030,6 @@ function boundAndSnapToSides(destinationPoint, {
   return vector$1.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({
-  snapStep,
-  range,
-  point
-}) {
-  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({
   snapStep,
@@ -31718,15 +32057,6 @@ function minMove({
   });
   return 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 && vector$1.equal(coord, c)));
 function updateAtIndex(args) {
   const {
@@ -31856,6 +32186,10 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
   }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
   const numSegments = graph.type === "segment" ? graph.numSegments : null;
+  const numSides = graph.type === "polygon" ? graph.numSides : null;
+  const snapTo = graph.type === "polygon" ? graph.snapTo : null;
+  const showAngles = graph.type === "polygon" ? graph.showAngles : null;
+  const showSides = graph.type === "polygon" ? graph.showSides : null;
   const originalPropsRef = useRef(props);
   const latestPropsRef = useLatestRef(props);
   useEffect(() => {
@@ -31866,7 +32200,7 @@ const StatefulMafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (latestPropsRef.current !== originalPropsRef.current) {
       dispatch(reinitialize(latestPropsRef.current));
     }
-  }, [graph.type, numSegments, latestPropsRef]);
+  }, [graph.type, numSegments, numSides, snapTo, showAngles, showSides, latestPropsRef]);
   return /*#__PURE__*/React.createElement(MafsGraph, _extends({}, props, {
     state: state,
     dispatch: dispatch
@@ -31933,7 +32267,7 @@ const MafsGraph = props => {
   }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), renderGraph({
+  }), "/* Protractor */", props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
     state,
     dispatch
   })))));
@@ -33241,14 +33575,9 @@ class InteractiveGraph extends React.Component {
   }
   render() {
     var _this$props$apiOption;
-    if (this.props.graph.type === "polygon" && this.props.graph.numSides === "unlimited") {
-      return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
-        ref: this.legacyGraphRef
-      }, this.props));
-    }
-
     // Mafs shim
-    if ((_this$props$apiOption = this.props.apiOptions) != null && (_this$props$apiOption = _this$props$apiOption.flags) != null && (_this$props$apiOption = _this$props$apiOption["mafs"]) != null && _this$props$apiOption[this.props.graph.type]) {
+    const mafsFlags = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null ? void 0 : _this$props$apiOption["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);
@@ -33809,6 +34138,8 @@ class InteractiveGraph extends React.Component {
     return props.graph;
   }
 }
+
+// exported for testing
 InteractiveGraph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -33824,6 +34155,31 @@ InteractiveGraph.defaultProps = {
     type: "linear"
   }
 };
+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",
@@ -44039,7 +44395,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 = "23.6.0";
+const libVersion = "24.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {