1261: fix for turtle target reference error (#1442)

Author: DNR500

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -75,6 +75,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const projectIdentifier = useSelector(
     (state) => state.editor.project.identifier,
   );
+  const projectImages = useSelector((state) => state.editor.project.image_list);
   const user = useSelector((state) => state.auth.user);
   const isSplitView = useSelector((state) => state.editor.isSplitView);
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
@@ -89,6 +90,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   );
   const reactAppApiEndpoint = useSelector((s) => s.editor.reactAppApiEndpoint);
   const output = useRef();
+  const visualOutputPaneRef = useRef(null);
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const settings = useContext(SettingsContext);
@@ -128,6 +130,39 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     return pageInput || webComponentInput;
   };
 
+  const getTurtleOutputTarget = () => {
+    return visualOutputPaneRef.current?.getTurtleTarget?.() || null;
+  };
+
+  const bindTurtleGraphics = () => {
+    const target = getTurtleOutputTarget();
+    if (!target) {
+      return;
+    }
+
+    configureTurtleGraphics({
+      targetEl: target,
+      projectImages,
+    });
+  };
+
+  const installTurtleDomTargetFallback = () => {
+    const originalGetElementById = document.getElementById;
+
+    document.getElementById = (id) => {
+      if (id === "turtle") {
+        const turtleTarget = getTurtleOutputTarget();
+        if (turtleTarget) {
+          return turtleTarget;
+        }
+      }
+      return originalGetElementById.call(document, id);
+    };
+    return () => {
+      document.getElementById = originalGetElementById;
+    };
+  };
+
   useEffect(() => {
     if (!codeRunTriggered) {
       setCodeHasVisualOutput(
@@ -410,18 +445,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     }
     dispatch(setSenseHatEnabled(false));
 
-    // runCode runs from the current runner's useEffect before VisualOutputPane’s useEffect
-    // so Sk.TurtleGraphics.target / assets are set here so they exist before import
-    const host = document.querySelector("editor-wc");
-    const turtleOutputElement =
-      host?.shadowRoot?.getElementById("turtleOutput") ||
-      document.getElementById("turtleOutput");
-
-    configureTurtleGraphics({
-      targetEl: turtleOutputElement,
-      projectImages: project.image_list || [],
-    });
-
     var prog = mainComponent?.content || "";
 
     if (prog.includes(`# ${t("input.comment.py5")}`)) {
@@ -435,6 +458,14 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       }
     }
 
+    if (Sk.TurtleGraphics?.reset) {
+      Sk.TurtleGraphics.reset();
+    } else if (Sk.TurtleGraphics?.stop) {
+      Sk.TurtleGraphics.stop();
+    }
+
+    Sk.TurtleGraphics = {};
+
     Sk.configure({
       inputfun: inf,
       output: outf,
@@ -444,6 +475,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       uncaughtException: handleError,
     });
 
+    bindTurtleGraphics();
+
+    const uninstallTurtleDomTargetFallback = installTurtleDomTargetFallback();
+
     var myPromise = Sk.misceval
       .asyncToPromise(() => Sk.importMainWithBody("main", false, prog, true), {
         "*": () => {
@@ -456,6 +491,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
         handleError(err);
       })
       .finally(() => {
+        uninstallTurtleDomTargetFallback();
         dispatch(codeRunHandled());
       });
     myPromise.then(function (_mod) {});
@@ -535,7 +571,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                   {!isEmbedded && isMobile && <RunnerControls skinny />}
                 </div>
                 <TabPanel key={0}>
-                  <VisualOutputPane />
+                  <VisualOutputPane ref={visualOutputPaneRef} />
                 </TabPanel>
               </Tabs>
             </div>
@@ -598,7 +634,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
           </div>
           {!isOutputOnly && <ErrorMessage />}
           <TabPanel key={0}>
-            <VisualOutputPane />
+            <VisualOutputPane ref={visualOutputPaneRef} />
           </TabPanel>
           <TabPanel key={1}>
             <pre

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js

@@ -1330,58 +1330,108 @@ describe("When not active and a code run has been triggered", () => {
   });
 });
 
-describe("Turtle graphics is wired before Skulpt import", () => {
-  const asyncToPromise = Sk.misceval.asyncToPromise;
+describe("When turtle run setup is applied", () => {
+  let originalAsyncToPromise;
+  let originalImportMainWithBody;
+  let originalConfigure;
+  let originalGetElementById;
+
+  beforeEach(() => {
+    originalAsyncToPromise = Sk.misceval.asyncToPromise;
+    originalImportMainWithBody = Sk.importMainWithBody;
+    originalConfigure = Sk.configure;
+    originalGetElementById = document.getElementById;
+
+    Sk.configure = jest.fn();
+  });
 
   afterEach(() => {
-    Sk.misceval.asyncToPromise = asyncToPromise;
-  });
-
-  test("sets Sk.TurtleGraphics.target and assets before asyncToPromise runs", () => {
-    Sk.misceval.asyncToPromise = jest.fn((_computeFn) => {
-      const turtleElement = document.getElementById("turtleOutput");
-      expect(turtleElement).not.toBeNull();
-      expect(Sk.TurtleGraphics.target).toBe(turtleElement);
-      expect(Sk.TurtleGraphics.assets["pic.png"]).toBe(
-        "https://example.com/img.png",
-      );
-      return Promise.resolve();
-    });
+    Sk.misceval.asyncToPromise = originalAsyncToPromise;
+    Sk.importMainWithBody = originalImportMainWithBody;
+    Sk.configure = originalConfigure;
+    document.getElementById = originalGetElementById;
+  });
+
+  test("binds turtle target from VisualOutputPane ref before execution", () => {
+    Sk.importMainWithBody = jest.fn();
+    Sk.misceval.asyncToPromise = jest.fn(() => Promise.resolve());
 
     const middlewares = [];
     const mockStore = configureStore(middlewares);
-    const initialState = {
+    const store = mockStore({
       editor: {
         project: {
           components: [
             {
               name: "main",
               extension: "py",
-              content: "print('hello')",
+              content: "from turtle import *",
             },
           ],
-          image_list: [
+          image_list: [],
+        },
+        codeRunTriggered: true,
+      },
+      auth: { user },
+    });
+
+    render(
+      <Provider store={store}>
+        <SkulptRunner active={true} />
+      </Provider>,
+    );
+
+    expect(Sk.TurtleGraphics.target).not.toBeNull();
+    expect(Sk.TurtleGraphics.target.id).toBe("turtleOutput");
+  });
+
+  test("temporarily maps getElementById('turtle') during execution", async () => {
+    let turtleLookupTarget;
+    let resolveRun;
+    const runPromise = new Promise((resolve) => {
+      resolveRun = resolve;
+    });
+
+    Sk.importMainWithBody = jest.fn(() => {
+      turtleLookupTarget = document.getElementById("turtle");
+      return {};
+    });
+    Sk.misceval.asyncToPromise = jest.fn((runner) => {
+      runner();
+      return runPromise;
+    });
+
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore({
+      editor: {
+        project: {
+          components: [
             {
-              name: "pic",
-              extension: "png",
-              url: "https://example.com/img.png",
+              name: "main",
+              extension: "py",
+              content: "from turtle import *",
             },
           ],
+          image_list: [],
         },
         codeRunTriggered: true,
-        isEmbedded: false,
-      },
-      auth: {
-        user,
       },
-    };
-    const store = mockStore(initialState);
+      auth: { user },
+    });
+
     render(
       <Provider store={store}>
         <SkulptRunner active={true} />
       </Provider>,
     );
 
-    expect(Sk.misceval.asyncToPromise).toHaveBeenCalled();
+    expect(turtleLookupTarget).not.toBeNull();
+    expect(turtleLookupTarget.id).toBe("turtleOutput");
+
+    resolveRun();
+    await runPromise;
+    await Promise.resolve();
+    expect(document.getElementById("turtle")).toBeNull();
   });
 });

src/components/Editor/Runners/PythonRunner/VisualOutputPane.jsx

@@ -1,13 +1,12 @@
-import React, { useEffect } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle } from "react";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import Sk from "skulpt";
 import AstroPiModel from "../../../AstroPiModel/AstroPiModel";
 import { codeRunHandled, setError } from "../../../../redux/EditorSlice";
-import { configureTurtleGraphics } from "../../../../utils/configureTurtleGraphics";
 
-const VisualOutputPane = () => {
+const VisualOutputPane = forwardRef((_props, ref) => {
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
   );
@@ -25,11 +24,25 @@ const VisualOutputPane = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      getTurtleTarget: () => turtleOutput.current || null,
+    }),
+    [],
+  );
+
   useEffect(() => {
     if (codeRunTriggered) {
-      turtleOutput.current.innerHTML = "";
-      pygalOutput.current.innerHTML = "";
-      p5Output.current.innerHTML = "";
+      if (turtleOutput.current) {
+        turtleOutput.current.innerHTML = "";
+      }
+      if (pygalOutput.current) {
+        pygalOutput.current.innerHTML = "";
+      }
+      if (p5Output.current) {
+        p5Output.current.innerHTML = "";
+      }
 
       if (!window.py5) {
         window.py5 = {};
@@ -43,11 +56,6 @@ const VisualOutputPane = () => {
       window.assets = projectImages;
 
       (Sk.pygal || (Sk.pygal = {})).outputCanvas = pygalOutput.current;
-
-      configureTurtleGraphics({
-        targetEl: turtleOutput.current,
-        projectImages,
-      });
     }
   }, [codeRunTriggered, projectImages]);
 
@@ -84,6 +92,6 @@ const VisualOutputPane = () => {
       {senseHatEnabled || senseHatAlwaysEnabled ? <AstroPiModel /> : null}
     </div>
   );
-};
+});
 
 export default VisualOutputPane;

src/components/Editor/Runners/PythonRunner/VisualOutputPane.test.js

@@ -77,6 +77,7 @@ describe("When Sense Hat library not used", () => {
 describe("When code run is triggered", () => {
   let store;
   let container;
+  let turtleOutputRef;
 
   beforeEach(() => {
     const middlewares = [];
@@ -91,9 +92,10 @@ describe("When code run is triggered", () => {
       },
     };
     store = mockStore(initialState);
+    turtleOutputRef = React.createRef();
     const renderResult = render(
       <Provider store={store}>
-        <VisualOutputPane />
+        <VisualOutputPane ref={turtleOutputRef} />
       </Provider>,
     );
     container = renderResult.container;
@@ -108,7 +110,7 @@ describe("When code run is triggered", () => {
     expect(Sk.pygal.outputCanvas).not.toBeNull();
   });
 
-  test("Sets up turtle canvas", () => {
-    expect(Sk.TurtleGraphics.target).not.toBeNull();
+  test("Exposes turtle target via ref", () => {
+    expect(turtleOutputRef.current.getTurtleTarget()).not.toBeNull();
   });
 });