@khanacademy/perseus 33.1.0 → 33.2.1

package/dist/es/index.js

@@ -8673,10 +8673,10 @@ var Raphael$1 = (function () {
  * provided on KhanUtil.
  */
 const KhanColors = {
-  BLUE: "#6495ED",
+  BLUE: color.blue,
   ORANGE: "#FFA500",
   PINK: "#FF00AF",
-  GREEN: "#28AE7B",
+  GREEN: color.green,
   PURPLE: "#9D38BD",
   RED: "#DF0030",
   GRAY: "gray",
@@ -8752,11 +8752,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: color.green,
+  INTERACTIVE: color.green,
+  DYNAMIC: color.blue
 };
 
 // DrawingTransform is responsible for transforming from "math coordinates"
@@ -10036,21 +10034,50 @@ const setLabelMargins = function setLabelMargins(span, size) {
     });
   } else {
     var _$container$css, _$container$width, _$span$css;
-    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 = $container.css("max-width")) != null ? _$container$css : "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 = $container.css(["max-width", "width"])) != null ? _$container$css : {
+      // 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 = $container.width()) != null ? _$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 = $container.width()) != null ? _$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 = $span.css("padding")) != null ? _$span$css : "0px";
-    const newPadding = Math.round(parseInt(currentPadding.slice(0, -2)) * scale) / 100;
+    const padding = (_$span$css = $span.css("padding")) != null ? _$span$css : "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.
@@ -29639,7 +29666,8 @@ function LockedLabel(props) {
       left: x,
       top: y,
       color: lockedFigureColors[color],
-      fontSize: font.size[size]
+      fontSize: font.size[size],
+      backgroundColor: "rgba(255, 255, 255, 0.8)"
     }
   }, /*#__PURE__*/React.createElement(TeX, null, text));
 }
@@ -31657,7 +31685,8 @@ function UnlimitedPointGraph(props) {
   const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
     style: {
-      fill: "rgba(0,0,0,0)"
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
     },
     width: widthPx,
     height: heightPx,
@@ -31827,6 +31856,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,
@@ -31906,8 +31946,6 @@ const MafsGraph = props => {
   }, fullGraphAriaDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
-  }), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
-    lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React.createElement(View, {
     style: {
       position: "absolute",
@@ -31937,28 +31975,64 @@ const MafsGraph = props => {
   props.markings === "graph" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }), props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
+  }))), props.showLabelsFlag && props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
+    lockedFigures: props.lockedFigures
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: "absolute"
+    }
+  }, /*#__PURE__*/React.createElement(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.createElement(Protractor, null), renderGraph({
     state,
     dispatch
   }))))), renderGraphControls({
     state,
-    dispatch
+    dispatch,
+    width
   })));
 };
-const renderPointGraphControls = props => /*#__PURE__*/React.createElement(Button, {
+const renderPointGraphControls = props => /*#__PURE__*/React.createElement(View, {
+  style: {
+    flexDirection: "row",
+    width: props.width
+  }
+}, /*#__PURE__*/React.createElement(Button, {
   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.createElement(Button, {
+  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
@@ -31968,7 +32042,8 @@ const renderGraphControls = props => {
       if (state.numPoints === "unlimited") {
         return renderPointGraphControls({
           state,
-          dispatch
+          dispatch,
+          width
         });
       }
       return null;
@@ -32137,7 +32212,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 _extends({}, shared, {
@@ -32430,6 +32506,7 @@ function doBlurPoint(state, action) {
   switch (state.type) {
     case "point":
       return _extends({}, state, {
+        previouslyFocusedPointIndex: state.focusedPointIndex,
         focusedPointIndex: null
       });
     default:
@@ -32474,7 +32551,6 @@ function doMovePointInFigure(state, action) {
       }
     case "angle":
     case "circle":
-      throw new Error("FIXME implement circle reducer");
     case "point":
     case "polygon":
     case "quadratic":
@@ -32785,7 +32861,8 @@ function doRemovePoint(state, action) {
   }
   return _extends({}, state, {
     coords: state.coords.filter((_, i) => i !== action.index),
-    focusedPointIndex: null
+    focusedPointIndex: null,
+    previouslyFocusedPointIndex: null
   });
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -39612,15 +39689,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]));
@@ -39787,21 +39864,21 @@ class NumberLine extends React.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.createElement(MovablePoint
@@ -39859,7 +39936,7 @@ class NumberLine extends React.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);
@@ -43048,7 +43125,7 @@ class PhetSimulation extends React.Component {
       className: css(styles$6.iframeResponsive),
       src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
       allow: "fullscreen"
-    })), /*#__PURE__*/React.createElement(IconButton, {
+    })), this.state.url !== null && /*#__PURE__*/React.createElement(IconButton, {
       icon: cornersOutIcon,
       onClick: () => {
         var _this$iframeRef$curre;
@@ -43060,8 +43137,7 @@ class PhetSimulation extends React.Component {
         marginTop: 5,
         marginBottom: 5,
         alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
+      }
     }));
   }
 }
@@ -44616,7 +44692,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 = "33.1.0";
+const libVersion = "33.2.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {