@khanacademy/perseus 33.2.0 → 33.2.1

package/dist/es/index.js

@@ -29666,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));
 }
@@ -31855,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,
@@ -31934,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",
@@ -31965,7 +31975,24 @@ 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({
@@ -43098,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;
@@ -43110,8 +43137,7 @@ class PhetSimulation extends React.Component {
         marginTop: 5,
         marginBottom: 5,
         alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
+      }
     }));
   }
 }
@@ -44666,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.2.0";
+const libVersion = "33.2.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {