@khanacademy/perseus 33.1.0 → 33.2.1

package/dist/index.js

@@ -8780,10 +8780,10 @@ var Raphael$1 = (function () {
  * provided on KhanUtil.
  */
 const KhanColors = {
-  BLUE: "#6495ED",
+  BLUE: wonderBlocksTokens.color.blue,
   ORANGE: "#FFA500",
   PINK: "#FF00AF",
-  GREEN: "#28AE7B",
+  GREEN: wonderBlocksTokens.color.green,
   PURPLE: "#9D38BD",
   RED: "#DF0030",
   GRAY: "gray",
@@ -8859,11 +8859,9 @@ const KhanColors = {
   // of any redesigns.
   _BACKGROUND: "#FDFDFD",
   // TODO(eater): Get rid of this altogether.
-  INTERACTING: "#71B307",
-  // KA_GREEN
-  INTERACTIVE: "#71B307",
-  // KA_GREEN
-  DYNAMIC: "#6495ED" // BLUE
+  INTERACTING: wonderBlocksTokens.color.green,
+  INTERACTIVE: wonderBlocksTokens.color.green,
+  DYNAMIC: wonderBlocksTokens.color.blue
 };
 
 // DrawingTransform is responsible for transforming from "math coordinates"
@@ -10147,21 +10145,50 @@ const setLabelMargins = function (span, size) {
       marginTop: -height / 2 - y * scale
     });
   } else {
-    const $container = $span.closest(".svg-image");
+    // We are using jQuery to collect information and calculate a scale
+    //     since we don't have a way to pass it to this function.
+    // We need the width of the container in order to calculate the scale to apply to the label.
+    // Unfortunately, the DOM tree leading to the label is not consistent.
+    // Therefore, we need to check different elements and different style properties to get the width of the container.
+    // Some graphie labels exist within an ".svg-image" container, and others do not.
+    // All graphie labels have a ".graphie" container.
+    // When a label has an ".svg-image" container,
+    //     the width information in the ".graphie" element is expressed as a percentage instead of pixels,
+    //     so we can't use it.
+    // Instead, the ".svg-image" container can be used to get the width information.
+    // The following lines determine which container element to use for the width measurement.
+    const $svgImage = $span.closest(".svg-image");
+    const $graphie = $span.closest(".graphie");
+    // If an ".svg-image" container exists in the DOM tree, then use it, otherwise use the ".graphie" container.
+    const $container = $svgImage.length > 0 ? $svgImage : $graphie;
+
     // Ensuring that the line-height of the text doesn't throw off placement of the text element.
     // Inherited line-height values can really mess up placement.
     $container.css("line-height", "normal");
 
-    // The 'max-width' value is the same as the expected (100% scale) width of the graphie.
-    // We are using jQuery to get this information since we don't have a way to pass it to this function.
-    const expectedWidth = $container.css("max-width") ?? "0px";
+    // The expected width of the graphie is found in the "max-width" property on ".svg-image" containers,
+    //     and is found in the "width" property on ".graphie" containers.
+    const widthValues = $container.css(["max-width", "width"]) ?? {
+      // The browser will always return a value, but tests won't, so ensuring something is returned.
+      "max-width": "0px"
+    };
+    const expectedWidth =
+    // Verified in Chrome, Firefox, and Safari - all return the same "none" value if the property does not exist.
+    widthValues["max-width"] !== "none" ? widthValues["max-width"] : widthValues["width"];
     // We can calculate the true scale of the graphie by taking actual width and dividing by the expected width.
-    // NOTE: Using 'slice' to remove the "px" unit from the end of the expected width value.
-    const scale = ($container.width() ?? 0) / parseInt(expectedWidth.replace(/px$/, "")) * 100;
+    // NOTE: Using 'replace' to remove the "px" unit from the end of the expected width value.
+    let scale = ($container.width() ?? 0) / parseInt(expectedWidth.replace(/px$/, "")) * 100;
+    // If something failed in the calculation, then default to 100% scale.
+    if (isNaN(scale)) {
+      scale = 100;
+    } else if (scale === 0) {
+      scale = 100;
+    }
 
     // Any padding needs to be scaled accordingly.
-    const currentPadding = $span.css("padding") ?? "0px";
-    const newPadding = Math.round(parseInt(currentPadding.slice(0, -2)) * scale) / 100;
+    const padding = $span.css("padding") ?? "0px";
+    const currentPadding = padding !== "none" ? padding : "0px";
+    const newPadding = Math.round(parseInt(currentPadding.replace(/px$/, "")) * scale) / 100;
 
     // "multipliers" basically move the position of the text by using 1, 0, -1
     // 'margin-left' and 'margin-top' are used to position the text.
@@ -29953,7 +29980,8 @@ function LockedLabel(props) {
       left: x,
       top: y,
       color: lockedFigureColors[color],
-      fontSize: wonderBlocksTokens.font.size[size]
+      fontSize: wonderBlocksTokens.font.size[size],
+      backgroundColor: "rgba(255, 255, 255, 0.8)"
     }
   }, /*#__PURE__*/React__namespace.createElement(TeX, null, text));
 }
@@ -31990,7 +32018,8 @@ function UnlimitedPointGraph(props) {
   const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
     style: {
-      fill: "rgba(0,0,0,0)"
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
     },
     width: widthPx,
     height: heightPx,
@@ -32160,6 +32189,17 @@ function useDraggablePx(args) {
   });
 }
 
+/**
+ * Render the Mafs graph with the specified background and graph elements.
+ *
+ * Render order (back to front):
+ * - Grid
+ * - Axis Ticks, Axis Arrows, and Axis Labels
+ * - Locked Figures
+ * - Locked Labels
+ * - Protractor
+ * - Interactive Graph Elements
+ */
 const MafsGraph = props => {
   const {
     state,
@@ -32238,8 +32278,6 @@ const MafsGraph = props => {
   }, fullGraphAriaDescription), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
-  }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
-    lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       position: "absolute",
@@ -32269,28 +32307,64 @@ const MafsGraph = props => {
   props.markings === "graph" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
+  }))), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
+    lockedFigures: props.lockedFigures
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      position: "absolute"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+    preserveAspectRatio: false,
+    viewBox: {
+      x: state.range[X],
+      y: state.range[Y],
+      padding: 0
+    },
+    pan: false,
+    zoom: false,
+    width: width,
+    height: height
+  }, props.showProtractor && /*#__PURE__*/React__namespace.createElement(Protractor, null), renderGraph({
     state,
     dispatch
   }))))), renderGraphControls({
     state,
-    dispatch
+    dispatch,
+    width
   })));
 };
-const renderPointGraphControls = props => /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+const renderPointGraphControls = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  style: {
+    flexDirection: "row",
+    width: props.width
+  }
+}, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
   kind: "secondary",
   style: {
     width: "100%",
     marginLeft: "20px"
   },
+  tabIndex: 0,
   onClick: () => {
     props.dispatch(actions.pointGraph.addPoint([0, 0]));
   }
-}, "Add Point");
+}, "Add Point"), (props.state.focusedPointIndex !== null || props.state.previouslyFocusedPointIndex !== null) && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+  kind: "secondary",
+  color: "destructive",
+  tabIndex: 0,
+  style: {
+    width: "100%",
+    marginLeft: "20px"
+  },
+  onClick: event => {
+    props.dispatch(actions.pointGraph.removePoint(props.state.previouslyFocusedPointIndex));
+  }
+}, "Remove Point"));
 const renderGraphControls = props => {
   const {
     state,
-    dispatch
+    dispatch,
+    width
   } = props;
   const {
     type
@@ -32300,7 +32374,8 @@ const renderGraphControls = props => {
       if (state.numPoints === "unlimited") {
         return renderPointGraphControls({
           state,
-          dispatch
+          dispatch,
+          width
         });
       }
       return null;
@@ -32474,7 +32549,8 @@ function initializeGraphState(params) {
         type: graph.type,
         coords: getPointCoords(graph, range, step),
         numPoints: graph.numPoints || 0,
-        focusedPointIndex: null
+        focusedPointIndex: null,
+        previouslyFocusedPointIndex: null
       };
     case "circle":
       return {
@@ -32771,6 +32847,7 @@ function doBlurPoint(state, action) {
     case "point":
       return {
         ...state,
+        previouslyFocusedPointIndex: state.focusedPointIndex,
         focusedPointIndex: null
       };
     default:
@@ -32817,7 +32894,6 @@ function doMovePointInFigure(state, action) {
       }
     case "angle":
     case "circle":
-      throw new Error("FIXME implement circle reducer");
     case "point":
     case "polygon":
     case "quadratic":
@@ -33143,7 +33219,8 @@ function doRemovePoint(state, action) {
   return {
     ...state,
     coords: state.coords.filter((_, i) => i !== action.index),
-    focusedPointIndex: null
+    focusedPointIndex: null,
+    previouslyFocusedPointIndex: null
   };
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -39967,15 +40044,15 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
 
   // Render the text labels
   results.push(graphie.style(props.isMobile ? {
-    color: KhanColors.BLUE_D
+    color: KhanColors.BLUE
   } : {}, () => _label(graphie, props.labelStyle, leftLabel, leftLabel, base)));
   results.push(graphie.style(props.isMobile ? {
-    color: KhanColors.BLUE_D
+    color: KhanColors.BLUE
   } : {}, () => _label(graphie, props.labelStyle, rightLabel, rightLabel, base)));
 
   // Render the labels' lines
   graphie.style({
-    stroke: props.isMobile ? KhanColors.BLUE_D : KhanColors.DYNAMIC,
+    stroke: KhanColors.BLUE,
     strokeWidth: 3.5
   }, () => {
     results.push(graphie.line([leftLabel, -0.2], [leftLabel, 0.2]));
@@ -40162,21 +40239,21 @@ class NumberLine extends React__namespace.Component {
     if (isOpen) {
       fill = KhanColors._BACKGROUND;
     } else if (props.static) {
-      fill = KhanColors.DYNAMIC;
+      fill = KhanColors.BLUE;
     } else {
-      fill = KhanColors.INTERACTIVE;
+      fill = KhanColors.GREEN;
     }
     const normalStyle = {
       fill: fill,
-      stroke: props.static ? KhanColors.DYNAMIC : KhanColors.INTERACTIVE,
+      stroke: props.static ? KhanColors.BLUE : KhanColors.GREEN,
       "stroke-width": isOpen ? 3 : 1
     };
     const highlightStyle = {
-      fill: isOpen ? KhanColors._BACKGROUND : KhanColors.INTERACTING,
+      fill: isOpen ? KhanColors._BACKGROUND : KhanColors.GREEN,
       "stroke-width": isOpen ? 3 : 1
     };
     const mobileDotStyle = props.isInequality ? {
-      stroke: KhanColors.INTERACTIVE,
+      stroke: KhanColors.GREEN,
       "fill-opacity": isOpen ? 0 : 1
     } : {};
     return /*#__PURE__*/React__namespace.createElement(MovablePoint
@@ -40236,7 +40313,7 @@ class NumberLine extends React__namespace.Component {
       const end = this._getInequalityEndpoint(props);
       const style = {
         arrows: "->",
-        stroke: this.props.apiOptions.isMobile ? KhanColors.INTERACTIVE : KhanColors.DYNAMIC,
+        stroke: this.props.apiOptions.isMobile ? KhanColors.GREEN : KhanColors.BLUE,
         strokeWidth: 3.5
       };
       const isGreater = ["ge", "gt"].includes(props.rel);
@@ -43409,7 +43486,7 @@ class PhetSimulation extends React__namespace.Component {
       className: aphrodite.css(styles$6.iframeResponsive),
       src: this.state.url?.toString(),
       allow: "fullscreen"
-    })), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    })), this.state.url !== null && /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
       icon: cornersOutIcon__default["default"],
       onClick: () => {
         this.iframeRef.current?.requestFullscreen();
@@ -43420,8 +43497,7 @@ class PhetSimulation extends React__namespace.Component {
         marginTop: 5,
         marginBottom: 5,
         alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
+      }
     }));
   }
 }
@@ -44972,7 +45048,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "33.1.0";
+const libVersion = "33.2.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {