Prevent initial rendering of DoenetML when it is hidden (#279)

Author: dqnykamp

package-lock.json

@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml-iframe",
     "type": "module",
     "description": "A renderer for DoenetML contained in an iframe",
-    "version": "0.7.0-alpha25",
+    "version": "0.7.0-alpha26",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,

packages/doenetml-iframe/package.json

@@ -2,7 +2,7 @@
     "name": "@doenet/doenetml",
     "type": "module",
     "description": "Semantic markup for building interactive web activities",
-    "version": "0.7.0-alpha25",
+    "version": "0.7.0-alpha26",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,

packages/doenetml/package.json

@@ -1,7 +1,7 @@
 import "./DoenetML.css";
 // @ts-ignore
 import { prng_alea } from "esm-seedrandom";
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DocViewer } from "./Viewer/DocViewer";
 import { RecoilRoot } from "recoil";
 import { MathJaxContext } from "better-react-mathjax";
@@ -12,6 +12,7 @@ import { Box, ChakraProvider, extendTheme } from "@chakra-ui/react";
 import "@doenet/virtual-keyboard/style.css";
 import { EditorViewer } from "./EditorViewer/EditorViewer.js";
 import VariantSelect from "./EditorViewer/VariantSelect";
+import { useIsOnPage } from "./utils/isVisible";
 
 export const version: string = DOENETML_VERSION;
 
@@ -101,7 +102,6 @@ export function DoenetViewer({
     userId,
     attemptNumber = 1,
     render = true,
-    hidden = false,
     requestedVariantIndex,
     updateCreditAchievedCallback,
     setIsInErrorState,
@@ -129,7 +129,6 @@ export function DoenetViewer({
     userId?: string;
     attemptNumber?: number;
     render?: boolean;
-    hidden?: boolean;
     requestedVariantIndex?: number;
     updateCreditAchievedCallback?: Function;
     setIsInErrorState?: Function;
@@ -160,6 +159,20 @@ export function DoenetViewer({
 
     const variantIndex = useRef(1);
 
+    // Start off hidden and then unhide once the viewer is visible.
+    // This is needed to delay the initialization of JSXgraph
+    // until it is no longer hidden.
+    // Otherwise, the graphs are often displayed in a garbled fashion
+    // with the bounded calculated incorrectly
+    const ref = useRef<HTMLDivElement>(null);
+    const isOnPage = useIsOnPage(ref);
+    const [hidden, setHidden] = useState(true);
+    useEffect(() => {
+        if (isOnPage) {
+            setHidden(false);
+        }
+    }, [isOnPage]);
+
     const flags: DoenetMLFlags = { ...defaultFlags, ...specifiedFlags };
 
     if (userId) {
@@ -270,10 +283,12 @@ export function DoenetViewer({
         >
             <RecoilRoot>
                 <MathJaxContext version={3} config={mathjaxConfig}>
-                    {variantSelector}
-                    {viewer}
-                    <div className="before-keyboard" />
-                    {keyboard}
+                    <div ref={ref}>
+                        {variantSelector}
+                        {viewer}
+                        <div className="before-keyboard" />
+                        {keyboard}
+                    </div>
                 </MathJaxContext>
             </RecoilRoot>
         </ChakraProvider>

packages/doenetml/src/doenetml.tsx

@@ -0,0 +1,52 @@
+import { RefObject, useEffect, useState } from "react";
+
+/**
+ * Returns `true` if the any portion of the element referenced by `ref`
+ * is visible in the browser's viewport
+ *
+ * From: https://dev.to/jmalvarez/check-if-an-element-is-visible-with-react-hooks-27h8
+ */
+export function useIsVisible(ref: RefObject<HTMLElement>) {
+    const [isIntersecting, setIntersecting] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) =>
+            setIntersecting(entry.isIntersecting),
+        );
+
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref]);
+
+    return isIntersecting;
+}
+
+/**
+ * Returns true if the element referenced by `ref` is anywhere on the page
+ * (more precisely, within 1000000px of the browser's viewport).
+ *
+ * Used to approximately detect if the element is not hidden.
+ */
+export function useIsOnPage(ref: RefObject<HTMLElement>) {
+    const [isIntersecting, setIntersecting] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => setIntersecting(entry.isIntersecting),
+            { rootMargin: "1000000px" },
+        );
+
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref]);
+
+    return isIntersecting;
+}

packages/doenetml/src/utils/isVisible.ts

@@ -2,7 +2,7 @@
     "name": "@doenet/standalone",
     "type": "module",
     "description": "Standalone renderer for DoenetML suitable for being included in a web page",
-    "version": "0.7.0-alpha25",
+    "version": "0.7.0-alpha26",
     "license": "AGPL-3.0-or-later",
     "homepage": "https://github.com/Doenet/DoenetML#readme",
     "private": true,