@khanacademy/perseus 19.1.8 → 19.1.9

package/dist/es/index.js

@@ -8685,7 +8685,12 @@ class Graphie$1 {
       writable: true,
       value: void 0
     });
+    // The primary drawing layer
     this.raphael = void 0;
+    // The layer that all visuals with mouse handlers are drawn into
+    this.mouselayer = void 0;
+    this._mouselayerWrapper = void 0;
+    this._visiblelayerWrapper = void 0;
     this.isMobile = false;
     // Set up some reasonable defaults
     this.currentStyle = {
@@ -9526,13 +9531,126 @@ 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 = _extends({
+      allowScratchpad: false,
+      setDrawingAreaAvailable: function () {}
+    }, options);
+    const mouselayerZIndex = 2;
+    this.mouselayer = Raphael$1(this.el, this.xpixels, this.ypixels);
+    $(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;
+      $(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;
+            $(document).bind("vmousemove.mouseLayer", e => {
+              if (isClickingCanvas) {
+                e.preventDefault();
+                handler(this.getMouseCoord(e));
+              }
+            });
+          }
+          $(document).bind("vmouseup.mouseLayer", e => {
+            $(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;
+        $(this.mouselayer.canvas).on("vmouseover", e => {
+          handler(this.getMouseCoord(e));
+        });
+      }
+      if (localOptions.onMouseOut) {
+        const handler = localOptions.onMouseOut;
+        $(this.mouselayer.canvas).on("vmouseout", e => {
+          handler(this.getMouseCoord(e));
+        });
+      }
+    }
+    if (!localOptions.allowScratchpad) {
+      localOptions.setDrawingAreaAvailable == null || localOptions.setDrawingAreaAvailable(false);
+    }
+
+    // Add mouse and visible wrapper layers for DOM-node-wrapped movables
+    this._mouselayerWrapper = document.createElement("div");
+    $(this._mouselayerWrapper).css({
+      position: "absolute",
+      left: 0,
+      top: 0,
+      zIndex: mouselayerZIndex
+    });
+    this._visiblelayerWrapper = document.createElement("div");
+    $(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 => {
+      var _this$_mouselayerWrap;
+      (_this$_mouselayerWrap = this._mouselayerWrapper) == null || _this$_mouselayerWrap.appendChild(el);
+    };
+    this.addToVisibleLayerWrapper = el => {
+      var _this$_visiblelayerWr;
+      (_this$_visiblelayerWr = this._visiblelayerWrapper) == null || _this$_visiblelayerWr.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 = $(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],
@@ -10632,114 +10750,6 @@ const InteractiveUtils = {
   }
 };
 _.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 = _.extend({
-      allowScratchpad: false,
-      setDrawingAreaAvailable: function () {}
-    }, options);
-    const mouselayerZIndex = 2;
-    graph.mouselayer = Raphael$1(graph.raphael.canvas.parentNode, graph.xpixels, graph.ypixels);
-    $(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;
-      $(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;
-            $(document).bind("vmousemove.mouseLayer", function (e) {
-              if (isClickingCanvas) {
-                e.preventDefault();
-                handler(graph.getMouseCoord(e));
-              }
-            });
-          }
-          $(document).bind("vmouseup.mouseLayer", function (e) {
-            $(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;
-        $(graph.mouselayer.canvas).on("vmouseover", function (e) {
-          handler(graph.getMouseCoord(e));
-        });
-      }
-      if (options.onMouseOut) {
-        const handler = options.onMouseOut;
-        $(graph.mouselayer.canvas).on("vmouseout", function (e) {
-          handler(graph.getMouseCoord(e));
-        });
-      }
-    }
-    if (!options.allowScratchpad) {
-      options.setDrawingAreaAvailable == null || options.setDrawingAreaAvailable(false);
-    }
-
-    // Add mouse and visible wrapper layers for DOM-node-wrapped movables
-    graph._mouselayerWrapper = document.createElement("div");
-    $(graph._mouselayerWrapper).css({
-      position: "absolute",
-      left: 0,
-      top: 0,
-      zIndex: mouselayerZIndex
-    });
-    graph._visiblelayerWrapper = document.createElement("div");
-    $(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 - $(graphie.raphael.canvas.parentNode).offset().left;
-    const mouseY =
-    // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-    event.pageY - $(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
@@ -23226,14 +23236,16 @@ const Choice = function Choice(props) {
     content: ({
       close
     }) => /*#__PURE__*/React.createElement(PopoverContent, {
-      title: "Cross out",
-      content: "Cross out option",
+      title: i18n._("Cross out"),
+      content: i18n._("Cross out option"),
       closeButtonVisible: true,
       actions: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Strut, {
         size: Spacing.medium_16
       }), /*#__PURE__*/React.createElement(Button, {
         kind: "primary",
-        "aria-label": `Cross out Choice ${getChoiceLetter(pos)}`,
+        "aria-label": i18n._("Cross out Choice %(letter)s", {
+          letter: getChoiceLetter(pos)
+        }),
         disabled: apiOptions.readOnly || reviewMode,
         onClick: () => {
           if (!crossedOut) {
@@ -23252,13 +23264,15 @@ const Choice = function Choice(props) {
           }
           close();
         }
-      }, crossedOut ? "Bring back" : "Cross out"))
+      }, crossedOut ? i18n._("Bring back") : i18n._("Cross out")))
     })
   }, ({
     open
   }) => /*#__PURE__*/React.createElement(Clickable, {
     onClick: open,
-    "aria-label": `Open menu for Choice ${getChoiceLetter(pos)}`,
+    "aria-label": i18n._(`Open menu for Choice %(letter)s`, {
+      letter: getChoiceLetter(pos)
+    }),
     style: {
       alignSelf: "center",
       padding: "5px",
@@ -41554,7 +41568,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 = "19.1.8";
+const libVersion = "19.1.9";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {