Feat: add app blockly version

cypress/e2e/embedded.cy.js

@@ -0,0 +1,94 @@
+/// <reference types="cypress" />
+
+describe("Embedded Blockly Page Tests", () => {
+  it("[Embedded] visits the embedded page", () => {
+    cy.visit("/embedded");
+    cy.url().should("include", "/embedded");
+  });
+
+  it("[Embedded] displays Blockly workspace", () => {
+    cy.visit("/embedded");
+    cy.get(".blocklySvg", { timeout: 10000 }).should("exist");
+  });
+
+  it("[Embedded] displays iPad toolbar", () => {
+    cy.visit("/embedded");
+    cy.get(".embedded-toolbar", { timeout: 10000 }).should("exist");
+    // Share, Reset icons exist
+    cy.get(".embedded-toolbar svg.fa-share-nodes").should("exist");
+    cy.get(".embedded-toolbar svg.fa-share").should("exist");
+
+    // Select a board so Compile button becomes available
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 10000 }).click();
+    cy.get(".embedded-toolbar svg.fa-clipboard-check").should("exist");
+  });
+
+  it("[Embedded] displays workspace name component", () => {
+    cy.visit("/embedded");
+    cy.get(".embedded-toolbar").find("div").should("exist");
+  });
+
+  it("[Embedded] displays device selection", () => {
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 10000 }).should("exist");
+    cy.get('img[alt="Sensebox MCU"]').should("exist");
+    cy.get('img[alt="Sensebox Mini"]').should("exist");
+  });
+
+  it("[Embedded] compiles code", () => {
+    cy.intercept({ method: "POST", pathname: "/compile" }).as("compile");
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 8000 }).click();
+    cy.get(".embedded-toolbar svg.fa-clipboard-check").parents("button").click();
+    cy.wait("@compile", { responseTimeout: 30000, requestTimeout: 30000 })
+      .its("response.statusCode").should("eq", 200);
+  });
+
+  it("[Embedded] opens reset dialog", () => {
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 8000 }).click();
+    cy.get(".embedded-toolbar svg.fa-share").parents("button").click();
+    cy.get('[role="dialog"]', { timeout: 5000 }).should("exist");
+  });
+
+  // Search box is currently disabled in embedded mode
+  // it("[Embedded] displays toolbox with search", () => {
+  //   cy.visit("/embedded");
+  //   cy.get(".blocklyToolbox", { timeout: 10000 }).should("exist");
+  //   cy.get('input[type="search"]').should("exist");
+  // });
+
+  it("[Embedded] marks toolbox xml as embedded mode", () => {
+    cy.visit("/embedded");
+    cy.get('xml#blockly').should("have.class", "embedded-mode");
+  });
+
+  it("[Embedded] uses tablet mode for compilation with embedded-specific text", () => {
+    cy.intercept({ method: "POST", pathname: "/compile" }).as("compile");
+
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 10000 }).click();
+    cy.get(".embedded-toolbar svg.fa-clipboard-check").parents("button").click();
+
+    cy.wait("@compile", { responseTimeout: 30000, requestTimeout: 30000 })
+      .its("response.statusCode").should("eq", 200);
+
+    cy.get('[role="dialog"]', { timeout: 10000 }).should("exist");
+
+    // Verify embedded mode specific elements
+    cy.get('[role="dialog"]').should("contain.text", "Gehe zum Übertragungs-Tab");
+    cy.get('[role="dialog"]').should("contain.text", "Over-The-Air Übertragung");
+    cy.get('[role="dialog"]').should("contain.text", "Der Code wurde erfolgreich kompiliert");
+    cy.get('[role="dialog"]').should("contain.text", "Klicke den unteren Button um zum Übertragungs-Tab zu gelangen");
+
+    // Verify stepper configuration
+    cy.get('[role="dialog"]').within(() => {
+      cy.get('.MuiStep-root').should("have.length", 2);
+      cy.get('.MuiStep-root').first().should("contain.text", "Kompilieren");
+      cy.get('.MuiStep-root').last().should("contain.text", "Übertragen");
+      cy.get('.MuiStepLabel-label').should("not.contain.text", "Herunterladen");
+      cy.get('a[href*="blocklyconnect-app://"]').should("exist");
+    });
+  });
+
+});

src/App.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Provider } from "react-redux";
 import store from "./store";
 import { loadUser } from "./actions/authActions";
@@ -12,6 +12,8 @@ import {
 } from "@mui/material/styles";
 
 import Content from "./components/Content";
+import EmbeddedBlockly from "./components/EmbeddedBlockly";
+import RouteHandler from "./components/RouteHandler";
 import { setCompiler } from "./actions/generalActions";
 
 const theme = createTheme({
@@ -61,8 +63,12 @@ class App extends Component {
         <ThemeProvider theme={theme}>
           <Provider store={store}>
             <BrowserRouter>
+              <RouteHandler />
               <ErrorBoundary>
-                <Content />
+                <Routes>
+                  <Route path="/embedded" element={<EmbeddedBlockly />} />
+                  <Route path="/*" element={<Content />} />
+                </Routes>
               </ErrorBoundary>
             </BrowserRouter>
           </Provider>

src/actions/generalActions.js

@@ -6,6 +6,7 @@ import {
   STATISTICS,
   PLATFORM,
   COMPILER,
+  EMBEDDED_MODE,
 } from "./types";
 
 export const visitPage = () => (dispatch) => {
@@ -58,3 +59,10 @@ export const setCompiler = (compiler) => (dispatch) => {
     payload: compiler,
   });
 };
+
+export const setEmbeddedMode = (isEmbedded) => (dispatch) => {
+  dispatch({
+    type: EMBEDDED_MODE,
+    payload: isEmbedded,
+  });
+};

src/actions/types.js

@@ -58,6 +58,7 @@ export const RENDERER = "RENDERER";
 export const SOUNDS = "SOUNDS";
 export const STATISTICS = "STATISTICS";
 export const COMPILER = "COMPILER";
+export const EMBEDDED_MODE = "EMBEDDED_MODE";
 
 // messages
 export const GET_ERRORS = "GET_ERRORS";

src/actions/workspaceActions.js

@@ -48,6 +48,7 @@ export const onChangeCode = () => (dispatch, getState) => {
 export const onChangeWorkspace = (event) => (dispatch, getState) => {
   dispatch(workspaceChange());
   var code = dispatch(onChangeCode());
+
   dispatch(storeTutorialXml(code.xml));
   var stats = getState().workspace.stats;
   if (event.type === Blockly.Events.BLOCK_CREATE) {

src/components/Blockly/BlocklyComponent.jsx

@@ -1,13 +1,17 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
 
 import * as Blockly from "blockly/core";
 import "./blocks/index";
 import "@/components/Blockly/generator/index";
 
 import Toolbox from "./toolbox/Toolbox";
+import EmbeddedToolbox from "./toolbox/EmbeddedToolbox";
 import { reservedWords } from "./helpers/reservedWords";
 import Snackbar from "../Snackbar";
+import { EMBEDDED_CONFIG } from "../../config/embeddedConfig";
 
 import "blockly/blocks";
 import {
@@ -25,6 +29,10 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
   const blocklyDivRef = useRef(null);
   const toolboxRef = useRef(null);
   const [workspace, setWorkspace] = useState(undefined);
+  const location = useLocation();
+  const isEmbeddedRedux = useSelector((state) => state.general.embeddedMode);
+  const isEmbedded = isEmbeddedRedux || location.pathname === EMBEDDED_CONFIG.ROUTE;
+
   const [snackbar, setSnackbar] = useState({
     open: false,
     message: "",
@@ -34,14 +42,56 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
 
   // Inject Blockly once on mount
   useEffect(() => {
-    const ws = Blockly.inject(blocklyDivRef.current, {
+    const blocklyOptions = {
       toolbox: toolboxRef.current,
       plugins: {
         blockDragger: ScrollBlockDragger,
         metricsManager: ScrollMetricsManager,
       },
       ...rest,
-    });
+    };
+
+    // Only apply mobile layout options when in embedded mode
+    // These must override any options from ...rest, so set them after
+    if (isEmbedded) {
+      blocklyOptions.horizontalLayout = true;
+      blocklyOptions.toolboxPosition = 'end';
+      // Ensure toolbox icon sprites and other assets load correctly in embedded view
+      if (!blocklyOptions.media) {
+        blocklyOptions.media = '/media/blockly/';
+      }
+    }
+
+    const ws = Blockly.inject(blocklyDivRef.current, blocklyOptions);
+
+    if (isEmbedded && ws.trashcan) {
+      const originalGetClientRect = ws.trashcan.getClientRect.bind(ws.trashcan);
+      const originalGetBoundingRectangle = ws.trashcan.getBoundingRectangle.bind(ws.trashcan);
+
+      ws.trashcan.getClientRect = function() {
+        const originalRect = originalGetClientRect();
+        if (!originalRect) return null;
+
+        return new Blockly.utils.Rect(
+          originalRect.top - 80,
+          originalRect.bottom + 80,
+          originalRect.left - 80,
+          originalRect.right + 80
+        );
+      };
+
+      ws.trashcan.getBoundingRectangle = function() {
+        const originalRect = originalGetBoundingRectangle();
+        if (!originalRect) return null;
+
+        return new Blockly.utils.Rect(
+          originalRect.top - 80,
+          originalRect.bottom + 80,
+          originalRect.left - 80,
+          originalRect.right + 80
+        );
+      };
+    }
 
     setWorkspace(ws);
 
@@ -95,12 +145,28 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
       ws?.dispose();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isEmbedded, location.pathname]);
+
+  const cardStyle = useMemo(() => {
+    return isEmbedded ?{
+      height: "100%",
+      width: "100%",
+    } : {};
+  }, [isEmbedded]);
 
   return (
     <>
-      <Card ref={blocklyDivRef} id="blocklyDiv" style={style ? style : {}} />
-      <Toolbox toolbox={toolboxRef} workspace={workspace} />
+      <Card
+        ref={blocklyDivRef}
+        id="blocklyDiv"
+        style={style ? style : cardStyle}
+        className={isEmbedded ? "embedded-mode" : ""}
+      />
+      {isEmbedded ? (
+        <EmbeddedToolbox toolbox={toolboxRef} workspace={workspace} />
+      ) : (
+        <Toolbox toolbox={toolboxRef} workspace={workspace} />
+      )}
       <Snackbar
         open={snackbar.open}
         message={snackbar.message}

src/components/Blockly/BlocklyWindow.jsx

@@ -11,6 +11,7 @@ import { ZoomToFitControl } from "@blockly/zoom-to-fit";
 import { Backpack } from "@blockly/workspace-backpack";
 import { initialXml } from "./initialXml.js";
 import { getMaxInstances } from "./helpers/maxInstances";
+import { EMBEDDED_BLOCKLY_CONFIG, DEFAULT_BLOCKLY_CONFIG } from "../../config/embeddedConfig";
 
 import BlocklySvg from "./BlocklySvg";
 
@@ -24,12 +25,15 @@ export default function BlocklyWindow(props) {
   const sounds = useSelector((state) => state.general.sounds);
   const language = useSelector((state) => state.general.language);
   const selectedBoard = useSelector((state) => state.board.board);
+  const isEmbedded = useSelector((state) => state.general.embeddedMode);
+
   const {
     svg,
     blockDisabled,
     blocklyCSS,
     initialXml: initialXmlProp,
     zoomControls,
+    zoom,
     grid,
     move,
     readOnly,
@@ -154,39 +158,49 @@ export default function BlocklyWindow(props) {
 
   // Compute zoom/grid/move config with sensible defaults
   const zoomConfig = useMemo(
-    () => ({
-      controls: zoomControls !== undefined ? zoomControls : true,
-      wheel: false,
-      startScale: 1,
-      maxScale: 3,
-      minScale: 0.3,
-      scaleSpeed: 1.2,
-    }),
-    [zoomControls],
+    () => {
+      if (zoom !== undefined) return zoom;
+
+      // Use embedded config for embedded mode, default config otherwise
+      const baseConfig = isEmbedded ? EMBEDDED_BLOCKLY_CONFIG.zoom : DEFAULT_BLOCKLY_CONFIG.zoom;
+
+      return {
+        ...baseConfig,
+        controls: zoomControls !== undefined ? zoomControls : baseConfig.controls,
+      };
+    },
+    [zoom, zoomControls, isEmbedded],
   );
 
   const gridConfig = useMemo(
-    () =>
-      grid !== undefined && !grid
-        ? {}
-        : {
-            spacing: 20,
-            length: 1,
-            colour: "#4EAF47", // senseBox-green
-            snap: false,
-          },
-    [grid],
+    () => {
+      if (grid === undefined || grid === false) return {};
+
+      if (typeof grid === "object") return grid;
+
+      return isEmbedded ? EMBEDDED_BLOCKLY_CONFIG.grid : DEFAULT_BLOCKLY_CONFIG.grid;
+    },
+    [grid, isEmbedded],
   );
 
   const moveConfig = useMemo(
-    () =>
-      move !== undefined && !move
-        ? {}
-        : { scrollbars: true, drag: true, wheel: true },
-    [move],
+    () => {
+      if (move === undefined || move === false) return {};
+
+      if (typeof move === "object") return move;
+
+      return isEmbedded ? EMBEDDED_BLOCKLY_CONFIG.move : DEFAULT_BLOCKLY_CONFIG.move;
+    },
+    [move, isEmbedded],
   );
 
+  const containerStyles =isEmbedded ? {
+    height: "100%",
+    width: "100%"
+  } : {};
+
   return (
+
     <div
       style={
         tutorial
@@ -197,7 +211,7 @@ export default function BlocklyWindow(props) {
               width: "100%",
               height: "100%",
             }
-          : {}
+          : {containerStyles}
       }
     >
       <BlocklyComponent
@@ -225,6 +239,7 @@ BlocklyWindow.propTypes = {
   blocklyCSS: PropTypes.object,
   initialXml: PropTypes.string,
   zoomControls: PropTypes.bool,
+  zoom: PropTypes.object,
   grid: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   move: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   readOnly: PropTypes.bool,