@khanacademy/perseus 7.1.1 → 7.2.0

package/dist/util.d.ts

@@ -1,3 +1,4 @@
+import * as GraphieUtil from "./util.graphie";
 import type { Range } from "./perseus-types";
 import type { Widget, PerseusScore } from "./types";
 import type { KEScore } from "@khanacademy/perseus-core";
@@ -171,13 +172,7 @@ declare function extractPointerLocation(event: any): Position | null | undefined
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
-declare function getImageSizeModern(url: string): Promise<[number, number]>;
 declare function getImageSize(url: string, callback: (width: number, height: number) => void): void;
-declare function getRealImageUrl(url: string): string;
-declare function isLabeledSVG(url: string): boolean;
-declare function getBaseUrl(url: string): string;
-declare function getSvgUrl(url: string): string;
-declare function getDataUrl(url: string): string;
 /**
  * Gets the word right before where the textarea cursor is
  *
@@ -234,12 +229,12 @@ declare const Util: {
     readonly supportsPassiveEvents: () => boolean;
     readonly captureScratchpadTouchStart: typeof captureScratchpadTouchStart;
     readonly getImageSize: typeof getImageSize;
-    readonly getImageSizeModern: typeof getImageSizeModern;
-    readonly getRealImageUrl: typeof getRealImageUrl;
-    readonly isLabeledSVG: typeof isLabeledSVG;
-    readonly getBaseUrl: typeof getBaseUrl;
-    readonly getSvgUrl: typeof getSvgUrl;
-    readonly getDataUrl: typeof getDataUrl;
+    readonly getImageSizeModern: typeof GraphieUtil.getImageSizeModern;
+    readonly getRealImageUrl: typeof GraphieUtil.getRealImageUrl;
+    readonly isLabeledSVG: typeof GraphieUtil.isLabeledSVG;
+    readonly getBaseUrl: typeof GraphieUtil.getBaseUrl;
+    readonly getSvgUrl: typeof GraphieUtil.getSvgUrl;
+    readonly getDataUrl: typeof GraphieUtil.getDataUrl;
     readonly textarea: {
         readonly getWordBeforeCursor: typeof getWordBeforeCursor;
         readonly moveCursor: typeof moveCursor;

package/dist/util.graphie.d.ts

@@ -0,0 +1,6 @@
+export declare function getRealImageUrl(graphieUrl: string): string;
+export declare function isLabeledSVG(graphieUrl: string): boolean;
+export declare function getBaseUrl(graphieUrl: string): string;
+export declare function getSvgUrl(graphieUrl: string): string;
+export declare function getDataUrl(graphieUrl: string): string;
+export declare function getImageSizeModern(url: string): Promise<[number, number]>;

package/dist/util.graphie.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare export function getRealImageUrl(graphieUrl: string): string;
+declare export function isLabeledSVG(graphieUrl: string): boolean;
+declare export function getBaseUrl(graphieUrl: string): string;
+declare export function getSvgUrl(graphieUrl: string): string;
+declare export function getDataUrl(graphieUrl: string): string;
+declare export function getImageSizeModern(
+  url: string
+): Promise<[number, number]>;

package/dist/util.js.flow

@@ -4,6 +4,7 @@
  * Flowgen v1.21.0
  * @flow
  */
+import * as GraphieUtil from "./util.graphie";
 import type { Range } from "./perseus-types";
 import type { Widget, PerseusScore } from "./types";
 import type { KEScore } from "@khanacademy/perseus-core";
@@ -236,16 +237,10 @@ declare function extractPointerLocation(event: any): Position | null | void;
  * avoid sending the touch to the mobile scratchpad
  */
 declare function captureScratchpadTouchStart(e: TouchEvent): void;
-declare function getImageSizeModern(url: string): Promise<[number, number]>;
 declare function getImageSize(
   url: string,
   callback: (width: number, height: number) => void
 ): void;
-declare function getRealImageUrl(url: string): string;
-declare function isLabeledSVG(url: string): boolean;
-declare function getBaseUrl(url: string): string;
-declare function getSvgUrl(url: string): string;
-declare function getDataUrl(url: string): string;
 
 /**
  * Gets the word right before where the textarea cursor is
@@ -308,12 +303,12 @@ declare var Util: {|
   +supportsPassiveEvents: () => boolean,
   +captureScratchpadTouchStart: typeof captureScratchpadTouchStart,
   +getImageSize: typeof getImageSize,
-  +getImageSizeModern: typeof getImageSizeModern,
-  +getRealImageUrl: typeof getRealImageUrl,
-  +isLabeledSVG: typeof isLabeledSVG,
-  +getBaseUrl: typeof getBaseUrl,
-  +getSvgUrl: typeof getSvgUrl,
-  +getDataUrl: typeof getDataUrl,
+  +getImageSizeModern: typeof GraphieUtil.getImageSizeModern,
+  +getRealImageUrl: typeof GraphieUtil.getRealImageUrl,
+  +isLabeledSVG: typeof GraphieUtil.isLabeledSVG,
+  +getBaseUrl: typeof GraphieUtil.getBaseUrl,
+  +getSvgUrl: typeof GraphieUtil.getSvgUrl,
+  +getDataUrl: typeof GraphieUtil.getDataUrl,
   +textarea: {|
     +getWordBeforeCursor: typeof getWordBeforeCursor,
     +moveCursor: typeof moveCursor,

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "7.1.1",
+    "version": "7.2.0",
     "publishConfig": {
         "access": "public"
     },

package/src/util.graphie.test.ts

@@ -0,0 +1,45 @@
+import {describe, it} from "@jest/globals";
+
+import {getRealImageUrl, isLabeledSVG} from "./util.graphie";
+
+describe(".getRealImageUrl", () => {
+    it("when passed a graphie URL, it transforms the URL to an http url", () => {
+        const input =
+            "web+graphie://ka-perseus-graphie.s3.amazonaws.com/b4a76d480e49f89fddb973c88c53fc301ba0d927";
+        const result =
+            "https://ka-perseus-graphie.s3.amazonaws.com/b4a76d480e49f89fddb973c88c53fc301ba0d927.svg";
+        expect(getRealImageUrl(input)).toBe(result);
+    });
+
+    it("when it's passed an HTTP URL, it returns the URL", () => {
+        const input =
+            "https://cdn.kastatic.org/ka-perseus-images/c633a1d04970211586b413985a7959876ca6c909.png";
+        expect(getRealImageUrl(input)).toBe(input);
+    });
+});
+
+describe(".isLabeledSVG", () => {
+    it("returns true for web+graphie", () => {
+        expect(
+            isLabeledSVG(
+                "web+graphie://ka-perseus-graphie.s3.amazonaws.com/b4a76d480e49f89fddb973c88c53fc301ba0d927",
+            ),
+        ).toBeTruthy();
+    });
+
+    it("returns true for file+graphie", () => {
+        expect(
+            isLabeledSVG(
+                "file+graphie://b4a76d480e49f89fddb973c88c53fc301ba0d927",
+            ),
+        ).toBeTruthy();
+    });
+
+    it("returns false for all other protocols", () => {
+        expect(
+            isLabeledSVG(
+                "https://cdn.kastatic.org/ka-perseus-images/c633a1d04970211586b413985a7959876ca6c909.png",
+            ),
+        ).toBeFalsy();
+    });
+});

package/src/util.graphie.ts

@@ -0,0 +1,59 @@
+const svgLabelsRegex = /^web\+graphie:/;
+// For offline exercises in the mobile app, we download the graphie data
+// (svgs and localized data files) and serve them from the local file
+// system (with file://). We replace urls that start with `web+graphie`
+// in the perseus json with this `file+graphie` prefix to indicate that
+// they should have the `file://` protocol instead of `https://`.
+const svgLocalLabelsRegex = /^file\+graphie:/;
+
+// Sometimes other components want to download the actual image e.g. to
+// determine its size. Here, we transform an .svg-labels url into the
+// correct image url, and leave normal image urls alone
+export function getRealImageUrl(graphieUrl: string): string {
+    if (isLabeledSVG(graphieUrl)) {
+        return getSvgUrl(graphieUrl);
+    }
+    return graphieUrl;
+}
+
+export function isLabeledSVG(graphieUrl: string): boolean {
+    return (
+        svgLabelsRegex.test(graphieUrl) || svgLocalLabelsRegex.test(graphieUrl)
+    );
+}
+
+// For each graphie, there are two urls we need to download from. This gets
+// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
+// appropriate suffixes to get the image and other data
+export function getBaseUrl(graphieUrl: string): string {
+    return graphieUrl
+        .replace(svgLabelsRegex, "https:")
+        .replace(svgLocalLabelsRegex, "file:");
+}
+
+export function getSvgUrl(graphieUrl: string): string {
+    return getBaseUrl(graphieUrl) + ".svg";
+}
+
+export function getDataUrl(graphieUrl: string): string {
+    return getBaseUrl(graphieUrl) + "-data.json";
+}
+
+export async function getImageSizeModern(
+    url: string,
+): Promise<[number, number]> {
+    const image = new Image();
+
+    return new Promise((resolve, reject) => {
+        // Handle the success case
+        image.onload = () => {
+            resolve([image.naturalWidth, image.naturalHeight]);
+        };
+
+        // Handle the error case
+        image.onerror = reject;
+
+        // Kick off the loading
+        image.src = getRealImageUrl(url);
+    });
+}

package/src/util.ts

@@ -3,6 +3,7 @@ import _ from "underscore";
 
 import {Errors} from "./logging/log";
 import {PerseusError} from "./perseus-error";
+import * as GraphieUtil from "./util.graphie";
 import KhanAnswerTypes from "./util/answer-types";
 
 import type {Range} from "./perseus-types";
@@ -51,14 +52,6 @@ type TouchHandlers = {
 
 let supportsPassive = false;
 
-const svgLabelsRegex = /^web\+graphie:/;
-// For offline exercises in the mobile app, we download the graphie data
-// (svgs and localized data files) and serve them from the local file
-// system (with file://). We replace urls that start with `web+graphie`
-// in the perseus json with this `file+graphie` prefix to indicate that
-// they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie:/;
-
 const nestedMap = function <T, M>(
     children: T | ReadonlyArray<T>,
     func: (arg1: T) => M,
@@ -839,23 +832,6 @@ function captureScratchpadTouchStart(e: TouchEvent) {
     e.stopPropagation();
 }
 
-async function getImageSizeModern(url: string): Promise<[number, number]> {
-    const image = new Image();
-
-    return new Promise((resolve, reject) => {
-        // Handle the success case
-        image.onload = () => {
-            resolve([image.naturalWidth, image.naturalHeight]);
-        };
-
-        // Handle the error case
-        image.onerror = reject;
-
-        // Kick off the loading
-        image.src = url;
-    });
-}
-
 function getImageSize(
     url: string,
     callback: (width: number, height: number) => void,
@@ -884,38 +860,7 @@ function getImageSize(
         }
     };
 
-    img.src = getRealImageUrl(url);
-}
-
-// Sometimes other components want to download the actual image e.g. to
-// determine its size. Here, we transform an .svg-labels url into the
-// correct image url, and leave normal image urls alone
-function getRealImageUrl(url: string): string {
-    if (isLabeledSVG(url)) {
-        return getSvgUrl(url);
-    }
-    return url;
-}
-
-function isLabeledSVG(url: string): boolean {
-    return svgLabelsRegex.test(url) || svgLocalLabelsRegex.test(url);
-}
-
-// For each svg+labels, there are two urls we need to download from. This gets
-// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
-// appropriate suffixes to get the image and other data
-function getBaseUrl(url: string): string {
-    return url
-        .replace(svgLabelsRegex, "https:")
-        .replace(svgLocalLabelsRegex, "file:");
-}
-
-function getSvgUrl(url: string): string {
-    return getBaseUrl(url) + ".svg";
-}
-
-function getDataUrl(url: string): string {
-    return getBaseUrl(url) + "-data.json";
+    img.src = GraphieUtil.getRealImageUrl(url);
 }
 
 /**
@@ -1007,12 +952,12 @@ const Util = {
     supportsPassiveEvents,
     captureScratchpadTouchStart,
     getImageSize,
-    getImageSizeModern,
-    getRealImageUrl,
-    isLabeledSVG,
-    getBaseUrl,
-    getSvgUrl,
-    getDataUrl,
+    getImageSizeModern: GraphieUtil.getImageSizeModern,
+    getRealImageUrl: GraphieUtil.getRealImageUrl,
+    isLabeledSVG: GraphieUtil.isLabeledSVG,
+    getBaseUrl: GraphieUtil.getBaseUrl,
+    getSvgUrl: GraphieUtil.getSvgUrl,
+    getDataUrl: GraphieUtil.getDataUrl,
     textarea,
     unescapeMathMode,
     random,