Fix turtle canvas bug (#1203)

This PR is very much WIP
Although these changes fix the original bug, they introduce an issue
with the `p5` canvas that needs investigating before this can go out.

Steps to reproduce:
1. Run a basic `p5` program
2. Delete that code and run `print("hello world")`
3. Run the basic `p5` program again

Expected behaviour: Output from the `p5` program is displayed in the
visual output tab
Actual behaviour: The visual output tab is rendered, but no output is
visible

closes
RaspberryPiFoundation/digital-editor-issues#137

Author: loiswells97

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Fixed
 
 - Bugs in append mode for writing to files in python (#1200)
+- `turtle` bug that did not display output on first code run (#1203)
 
 ## [0.29.1] - 2025-02-21
 

cypress/e2e/spec-wc-skulpt.cy.js

@@ -38,7 +38,7 @@ describe("Running the code with skulpt", () => {
       .shadow()
       .find(".skulptrunner")
       .contains(".react-tabs__tab", "Visual output")
-      .should("not.exist");
+      .should("not.be.visible");
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")

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

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 
 import { loadingRunner } from "../../../../redux/EditorSlice";
+import { getPythonImports } from "../../../../utils/getPythonImports";
 
 const SKULPT_ONLY_MODULES = [
   "p5",
@@ -45,33 +46,11 @@ const PythonRunner = ({ outputPanels = ["text", "visual"] }) => {
       setSkulptFallback(true);
       return;
     }
-    const getImports = (code) => {
-      const codeWithoutMultilineStrings = code.replace(
-        /'''[\s\S]*?'''|"""[\s\S]*?"""/gm,
-        "",
-      );
-      const importRegex =
-        /(?<=^\s*)(from\s+([a-zA-Z0-9_.]+)(\s+import\s+([a-zA-Z0-9_.]+))?)|(?<=^\s*)(import\s+([a-zA-Z0-9_.]+))/gm;
-      const matches = codeWithoutMultilineStrings.match(importRegex);
-      const imports = matches
-        ? matches.map(
-            (match) =>
-              match
-                .split(/from|import/)
-                .filter(Boolean)
-                .map((s) => s.trim())[0],
-          )
-        : [];
-      if (code.includes(`# ${t("input.comment.py5")}`)) {
-        imports.push("py5_imported");
-      }
-      return imports;
-    };
 
     for (const component of project.components || []) {
       if (component.extension === "py" && !codeRunTriggered) {
         try {
-          const imports = getImports(component.content);
+          const imports = getPythonImports(component.content, t);
           const hasSkulptOnlyModules = imports.some((name) =>
             SKULPT_ONLY_MODULES.includes(name),
           );

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

@@ -24,6 +24,7 @@ import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
 import RunnerControls from "../../../../RunButton/RunnerControls";
 import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
+import { getPythonImports } from "../../../../../utils/getPythonImports";
 
 const externalLibraries = {
   "./pygal/__init__.js": {
@@ -55,6 +56,15 @@ const externalLibraries = {
   },
 };
 
+const VISUAL_LIBRARIES = [
+  "pygal",
+  "py5",
+  "py5_imported",
+  "p5",
+  "sense_hat",
+  "turtle",
+];
+
 const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const loadedRunner = useSelector((state) => state.editor.loadedRunner);
   const projectCode = useSelector((state) => state.editor.project.components);
@@ -83,10 +93,31 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
+  const project = useSelector((state) => state.editor.project);
+
+  const testForVisualImports = (project) => {
+    for (const component of project.components || []) {
+      if (component.extension === "py") {
+        try {
+          const imports = getPythonImports(component.content, t);
+          const hasVisualImports = imports.some((name) =>
+            VISUAL_LIBRARIES.includes(name),
+          );
+          if (hasVisualImports) {
+            return true;
+          }
+        } catch (error) {
+          console.error("Error occurred while getting imports:", error);
+        }
+      }
+    }
+    return false;
+  };
+
   const [codeHasVisualOutput, setCodeHasVisualOutput] = useState(
-    senseHatAlwaysEnabled,
+    !!senseHatAlwaysEnabled || testForVisualImports(project),
   );
-  const [showVisualOutput, setShowVisualOutput] = useState(true);
+  const [showVisualOutput, setShowVisualOutput] = useState(codeHasVisualOutput);
 
   const getInput = () => {
     const pageInput = document.getElementById("input");
@@ -96,6 +127,14 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     return pageInput || webComponentInput;
   };
 
+  useEffect(() => {
+    if (!codeRunTriggered) {
+      setCodeHasVisualOutput(
+        !!senseHatAlwaysEnabled || testForVisualImports(project),
+      );
+    }
+  }, [project, codeRunTriggered, senseHatAlwaysEnabled, t]);
+
   useEffect(() => {
     if (active && loadedRunner !== "skulpt") {
       dispatch(setLoadedRunner("skulpt"));
@@ -136,15 +175,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     }
   }, [drawTriggered, codeRunTriggered]);
 
-  const visualLibraries = [
-    "./pygal/__init__.js",
-    "./py5/__init__.js",
-    "./py5_imported/__init__.js",
-    "./p5/__init__.js",
-    "./_internal_sense_hat/__init__.js",
-    "src/builtin/turtle/__init__.js",
-  ];
-
   const outf = (text) => {
     if (text !== "") {
       const node = output.current;
@@ -169,10 +199,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
 
     // TODO: Handle pre-importing py5_imported when refactored py5 shim imported
 
-    if (visualLibraries.includes(library)) {
-      setCodeHasVisualOutput(true);
-    }
-
     let localProjectFiles = projectCode
       .filter((component) => component.name !== "main")
       .map((component) => `./${component.name}.py`);
@@ -436,6 +462,18 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     });
   };
 
+  const [tabbedViewSelectedIndex, setTabbedViewSelectedIndex] = useState(
+    showVisualOutput ? 0 : 1,
+  );
+
+  useEffect(() => {
+    if (showVisualOutput) {
+      setTabbedViewSelectedIndex(0);
+    } else {
+      setTabbedViewSelectedIndex(1);
+    }
+  }, [showVisualOutput]);
+
   return (
     <div
       className={classNames("pythonrunner-container", "skulptrunner", {
@@ -444,8 +482,11 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     >
       {isSplitView || singleOutputPanel ? (
         <>
-          {showVisualOutput && showVisualOutputPanel && (
-            <div className={outputPanelClasses("visual")}>
+          {showVisualOutputPanel && (
+            <div
+              className={outputPanelClasses("visual")}
+              style={{ blockSize: showVisualOutput ? "auto" : 0 }}
+            >
               <Tabs forceRenderTabPanel={true}>
                 <div
                   className={classNames("react-tabs__tab-container", {
@@ -503,16 +544,16 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
         <Tabs
           forceRenderTabPanel={true}
           defaultIndex={showVisualOutput ? 0 : 1}
+          selectedIndex={tabbedViewSelectedIndex}
+          onSelect={setTabbedViewSelectedIndex}
         >
           <div className="react-tabs__tab-container">
             <TabList>
-              {showVisualOutput ? (
-                <Tab key={0}>
-                  <span className="react-tabs__tab-text">
-                    {t("output.visualOutput")}
-                  </span>
-                </Tab>
-              ) : null}
+              <Tab key={0} style={{ blockSize: showVisualOutput ? "auto" : 0 }}>
+                <span className="react-tabs__tab-text">
+                  {t("output.visualOutput")}
+                </span>
+              </Tab>
               <Tab key={1}>
                 <span className="react-tabs__tab-text">
                   {t("output.textOutput")}
@@ -523,11 +564,9 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
             {!isEmbedded && isMobile && <RunnerControls skinny />}
           </div>
           {!isOutputOnly && <ErrorMessage />}
-          {showVisualOutput ? (
-            <TabPanel key={0}>
-              <VisualOutputPane />
-            </TabPanel>
-          ) : null}
+          <TabPanel key={0}>
+            <VisualOutputPane />
+          </TabPanel>
           <TabPanel key={1}>
             <pre
               className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}

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

@@ -428,7 +428,7 @@ describe("When in split view, py5_imported imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import py5_imported",
+              content: "# input.comment.py5",
             },
           ],
           image_list: [],
@@ -563,7 +563,7 @@ describe("When in split view, sense_hat imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import _internal_sense_hat",
+              content: "import sense_hat",
             },
           ],
           image_list: [],
@@ -675,7 +675,7 @@ describe("When in tabbed view, py5 imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -704,7 +704,7 @@ describe("When in tabbed view, py5_imported imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import py5_imported",
+              content: "# input.comment.py5",
             },
           ],
           image_list: [],
@@ -724,7 +724,7 @@ describe("When in tabbed view, py5_imported imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -769,7 +769,7 @@ describe("When in tabbed view, pygal imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -814,7 +814,8 @@ describe("When in tabbed view, turtle imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
+    screen.debug();
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();
@@ -839,7 +840,7 @@ describe("When in tabbed view, sense_hat imported and code run", () => {
             {
               name: "main",
               extension: "py",
-              content: "import _internal_sense_hat",
+              content: "import sense_hat",
             },
           ],
           image_list: [],
@@ -859,7 +860,7 @@ describe("When in tabbed view, sense_hat imported and code run", () => {
     ));
   });
 
-  test("Output view toggle not shown", () => {
+  test("Output view toggle is shown", () => {
     expect(
       screen.queryByText("outputViewToggle.buttonSplitLabel"),
     ).toBeInTheDocument();

src/utils/getPythonImports.js

@@ -0,0 +1,22 @@
+export const getPythonImports = (code, t) => {
+  const codeWithoutMultilineStrings = code.replace(
+    /'''[\s\S]*?'''|"""[\s\S]*?"""/gm,
+    "",
+  );
+  const importRegex =
+    /(?<=^\s*)(from\s+([a-zA-Z0-9_.]+)(\s+import\s+([a-zA-Z0-9_.]+))?)|(?<=^\s*)(import\s+([a-zA-Z0-9_.]+))/gm;
+  const matches = codeWithoutMultilineStrings.match(importRegex);
+  const imports = matches
+    ? matches.map(
+        (match) =>
+          match
+            .split(/from|import/)
+            .filter(Boolean)
+            .map((s) => s.trim())[0],
+      )
+    : [];
+  if (code.includes(`# ${t("input.comment.py5")}`)) {
+    imports.push("py5_imported");
+  }
+  return imports;
+};