@khanacademy/perseus 19.1.8 → 19.1.9

package/dist/index.js

@@ -8692,6 +8692,11 @@ function polar(r, th) {
 class Graphie$1 {
   #bounds;
   #drawingTransform;
+
+  // The primary drawing layer
+
+  // The layer that all visuals with mouse handlers are drawn into
+
   isMobile = false;
   // Set up some reasonable defaults
   currentStyle = {
@@ -9537,13 +9542,125 @@ class Graphie$1 {
     return processed;
   }
 
-  // This is a stub that's overridden in interactive.ts
-  getMouseCoord(event) {
-    throw new Error("getMouseCoord is a stub, and is not implemented");
+  // Graphie puts text spans on top of the SVG, which looks good, but gets
+  // in the way of mouse events. This adds another SVG element on top
+  // of everything else where we can add invisible shapes with mouse
+  // handlers wherever we want.
+  addMouseLayer(options) {
+    const localOptions = {
+      allowScratchpad: false,
+      setDrawingAreaAvailable: function () {},
+      ...options
+    };
+    const mouselayerZIndex = 2;
+    this.mouselayer = Raphael$1(this.el, this.xpixels, this.ypixels);
+    $__default["default"](this.mouselayer.canvas).css("z-index", mouselayerZIndex);
+    if (localOptions.onClick || localOptions.onMouseDown || localOptions.onMouseMove || localOptions.onMouseOver || localOptions.onMouseOut) {
+      const canvasClickTarget = this.mouselayer.rect(0, 0, this.xpixels, this.ypixels).attr({
+        fill: "#000",
+        opacity: 0
+      });
+      let isClickingCanvas = false;
+      $__default["default"](this.mouselayer.canvas).on("vmousedown", e => {
+        if (e.target === canvasClickTarget[0]) {
+          if (localOptions.onMouseDown) {
+            localOptions.onMouseDown(this.getMouseCoord(e));
+          }
+          isClickingCanvas = true;
+          if (localOptions.onMouseMove) {
+            const handler = localOptions.onMouseMove;
+            $__default["default"](document).bind("vmousemove.mouseLayer", e => {
+              if (isClickingCanvas) {
+                e.preventDefault();
+                handler(this.getMouseCoord(e));
+              }
+            });
+          }
+          $__default["default"](document).bind("vmouseup.mouseLayer", e => {
+            $__default["default"](document).unbind(".mouseLayer");
+
+            // Only register clicks that started on the canvas,
+            // and not on another mouseLayer target
+            if (isClickingCanvas && localOptions.onClick) {
+              localOptions.onClick(this.getMouseCoord(e));
+            }
+            isClickingCanvas = false;
+          });
+        }
+      });
+      if (localOptions.onMouseOver) {
+        const handler = localOptions.onMouseOver;
+        $__default["default"](this.mouselayer.canvas).on("vmouseover", e => {
+          handler(this.getMouseCoord(e));
+        });
+      }
+      if (localOptions.onMouseOut) {
+        const handler = localOptions.onMouseOut;
+        $__default["default"](this.mouselayer.canvas).on("vmouseout", e => {
+          handler(this.getMouseCoord(e));
+        });
+      }
+    }
+    if (!localOptions.allowScratchpad) {
+      localOptions.setDrawingAreaAvailable?.(false);
+    }
+
+    // Add mouse and visible wrapper layers for DOM-node-wrapped movables
+    this._mouselayerWrapper = document.createElement("div");
+    $__default["default"](this._mouselayerWrapper).css({
+      position: "absolute",
+      left: 0,
+      top: 0,
+      zIndex: mouselayerZIndex
+    });
+    this._visiblelayerWrapper = document.createElement("div");
+    $__default["default"](this._visiblelayerWrapper).css({
+      position: "absolute",
+      left: 0,
+      top: 0
+    });
+    const el = this.el;
+    el.appendChild(this._visiblelayerWrapper);
+    el.appendChild(this._mouselayerWrapper);
+
+    // Add functions for adding to wrappers
+    this.addToMouseLayerWrapper = el => {
+      this._mouselayerWrapper?.appendChild(el);
+    };
+    this.addToVisibleLayerWrapper = el => {
+      this._visiblelayerWrapper?.appendChild(el);
+    };
+  }
+  addToMouseLayerWrapper(el) {
+    throw new Error("addToMouseLayerWrapper is not ready. Call addMouseLayer() first.");
+  }
+  addToVisibleLayerWrapper(el) {
+    throw new Error("addToVisibleLayerWrapper is not ready. Call addMouseLayer() first.");
+  }
+  /**
+   * Get mouse coordinates in pixels
+   */
+  getMousePx(event) {
+    const offset = $__default["default"](this.el).offset();
+    const mouseX =
+    // @ts-expect-error - TS18048 - 'event.pageX' is possibly 'undefined'.
+    event.pageX -
+    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
+    offset.left;
+    const mouseY =
+    // @ts-expect-error - TS18048 - 'event.pageY' is possibly 'undefined'.
+    event.pageY -
+    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
+    offset.top;
+    return [mouseX, mouseY];
   }
 
-  // This is a stub that's overridden in interactive.ts
-  addMouseLayer(options) {}
+  /**
+   * Get mouse coordinates in graph coordinates
+   */
+  getMouseCoord(event) {
+    return this.unscalePoint(this.getMousePx(event));
+  }
 }
 const labelDirections = {
   center: [-0.5, -0.5],
@@ -10644,114 +10761,6 @@ const InteractiveUtils = {
   }
 };
 ___default["default"].extend(GraphUtils.Graphie.prototype, {
-  // graphie puts text spans on top of the SVG, which looks good, but gets
-  // in the way of mouse events. This adds another SVG element on top
-  // of everything else where we can add invisible shapes with mouse
-  // handlers wherever we want.
-  addMouseLayer: function (options) {
-    const graph = this;
-    options = ___default["default"].extend({
-      allowScratchpad: false,
-      setDrawingAreaAvailable: function () {}
-    }, options);
-    const mouselayerZIndex = 2;
-    graph.mouselayer = Raphael$1(graph.raphael.canvas.parentNode, graph.xpixels, graph.ypixels);
-    $__default["default"](graph.mouselayer.canvas).css("z-index", mouselayerZIndex);
-    if (options.onClick || options.onMouseDown || options.onMouseMove || options.onMouseOver || options.onMouseOut) {
-      const canvasClickTarget = graph.mouselayer.rect(0, 0, graph.xpixels, graph.ypixels).attr({
-        fill: "#000",
-        opacity: 0
-      });
-      let isClickingCanvas = false;
-      $__default["default"](graph.mouselayer.canvas).on("vmousedown", function (e) {
-        if (e.target === canvasClickTarget[0]) {
-          if (options.onMouseDown) {
-            options.onMouseDown(graph.getMouseCoord(e));
-          }
-          isClickingCanvas = true;
-          if (options.onMouseMove) {
-            const handler = options.onMouseMove;
-            $__default["default"](document).bind("vmousemove.mouseLayer", function (e) {
-              if (isClickingCanvas) {
-                e.preventDefault();
-                handler(graph.getMouseCoord(e));
-              }
-            });
-          }
-          $__default["default"](document).bind("vmouseup.mouseLayer", function (e) {
-            $__default["default"](document).unbind(".mouseLayer");
-
-            // Only register clicks that started on the canvas,
-            // and not on another mouseLayer target
-            if (isClickingCanvas && options.onClick) {
-              options.onClick(graph.getMouseCoord(e));
-            }
-            isClickingCanvas = false;
-          });
-        }
-      });
-      if (options.onMouseOver) {
-        const handler = options.onMouseOver;
-        $__default["default"](graph.mouselayer.canvas).on("vmouseover", function (e) {
-          handler(graph.getMouseCoord(e));
-        });
-      }
-      if (options.onMouseOut) {
-        const handler = options.onMouseOut;
-        $__default["default"](graph.mouselayer.canvas).on("vmouseout", function (e) {
-          handler(graph.getMouseCoord(e));
-        });
-      }
-    }
-    if (!options.allowScratchpad) {
-      options.setDrawingAreaAvailable?.(false);
-    }
-
-    // Add mouse and visible wrapper layers for DOM-node-wrapped movables
-    graph._mouselayerWrapper = document.createElement("div");
-    $__default["default"](graph._mouselayerWrapper).css({
-      position: "absolute",
-      left: 0,
-      top: 0,
-      zIndex: mouselayerZIndex
-    });
-    graph._visiblelayerWrapper = document.createElement("div");
-    $__default["default"](graph._visiblelayerWrapper).css({
-      position: "absolute",
-      left: 0,
-      top: 0
-    });
-    const el = graph.raphael.canvas.parentNode;
-    el.appendChild(graph._visiblelayerWrapper);
-    el.appendChild(graph._mouselayerWrapper);
-
-    // Add functions for adding to wrappers
-    graph.addToMouseLayerWrapper = function (el) {
-      this._mouselayerWrapper.appendChild(el);
-    };
-    graph.addToVisibleLayerWrapper = function (el) {
-      this._visiblelayerWrapper.appendChild(el);
-    };
-  },
-  /**
-   * Get mouse coordinates in pixels
-   */
-  getMousePx: function (event) {
-    const graphie = this;
-    const mouseX =
-    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-    event.pageX - $__default["default"](graphie.raphael.canvas.parentNode).offset().left;
-    const mouseY =
-    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-    event.pageY - $__default["default"](graphie.raphael.canvas.parentNode).offset().top;
-    return [mouseX, mouseY];
-  },
-  /**
-   * Get mouse coordinates in graph coordinates
-   */
-  getMouseCoord: function (event) {
-    return this.unscalePoint(this.getMousePx(event));
-  },
   /**
    * Unlike all other Graphie-related code, the following three functions use
    * a lot of scaled coordinates (so that labels appear the same size
@@ -23343,14 +23352,16 @@ const Choice = function (props) {
         close
       } = _ref2;
       return /*#__PURE__*/React__namespace.createElement(wonderBlocksPopover.PopoverContent, {
-        title: "Cross out",
-        content: "Cross out option",
+        title: i18n__namespace._("Cross out"),
+        content: i18n__namespace._("Cross out option"),
         closeButtonVisible: true,
         actions: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksLayout.Strut, {
           size: Spacing__default["default"].medium_16
         }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
           kind: "primary",
-          "aria-label": `Cross out Choice ${getChoiceLetter(pos)}`,
+          "aria-label": i18n__namespace._("Cross out Choice %(letter)s", {
+            letter: getChoiceLetter(pos)
+          }),
           disabled: apiOptions.readOnly || reviewMode,
           onClick: () => {
             if (!crossedOut) {
@@ -23369,7 +23380,7 @@ const Choice = function (props) {
             }
             close();
           }
-        }, crossedOut ? "Bring back" : "Cross out"))
+        }, crossedOut ? i18n__namespace._("Bring back") : i18n__namespace._("Cross out")))
       });
     }
   }, _ref3 => {
@@ -23378,7 +23389,9 @@ const Choice = function (props) {
     } = _ref3;
     return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
       onClick: open,
-      "aria-label": `Open menu for Choice ${getChoiceLetter(pos)}`,
+      "aria-label": i18n__namespace._(`Open menu for Choice %(letter)s`, {
+        letter: getChoiceLetter(pos)
+      }),
       style: {
         alignSelf: "center",
         padding: "5px",
@@ -41709,7 +41722,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.1.8";
+const libVersion = "19.1.9";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {