How winola-whu/geoscratch works
GeoScratch lets learners compose geometric and linear-algebra concepts as Blockly programs and view the resulting 3D objects. The main flow runs from the workspace and block toolbox through registered block definitions and generated execution, then synchronizes objects to the Three.js scene; users can also load examples, manage object variables, and export/import workspaces. The graph preserves documented capability areas. Relationships are limited to visible imports/calls and explicit README claims; unsampled block implementations are represented by their exact directories.
Main entry points: BlocksCanvas.jsx Blockly canvas · Layout.jsx Application layout · Header.jsx Header controls · useWorkspaceStore.js Workspace state
Components 24
Workspace authoring
- Blockly canvas
src/components/BlocksCanvas/BlocksCanvas.jsx - Workspace setup
src/components/BlocksCanvas/core/Workspace.jsx - Block toolbox
src/components/BlocksCanvas/toolbox/BlocksToolboxDefinition.jsx - Block registry
src/components/BlocksCanvas/state/BlockRegistry.js - Object variable dialog
src/components/CreateObj3DDiaglog.jsx - Workspace import/export
src/utils/serialization.js - Example workspace loader
src/utils/applyExampleXml.js
Geometry and math
- Geometric constructions
src/components/BlocksCanvas/blocks/geometric - 3D object variables
src/components/BlocksCanvas/blocks/geometricVariables - Linear algebra primitives
src/components/BlocksCanvas/blocks/linalgPrimitives - Linear algebra operators
src/components/BlocksCanvas/blocks/linalgOperators - Measurements and debug
src/components/BlocksCanvas/blocks/measurements
Execution and state
- Blockly callbacks
src/utils/callbacks.js - Run and synchronize
src/utils/runAndSync.js - Code generation
src/utils/generateAndRun.js - Workspace state
src/store/useWorkspaceStore.js - Three.js object state
src/store/useThreeStore.js - Scene render state
src/store/useSceneStore.js
3D visualization
- Interactive 3D scene
src/components/Scene3D/Scene3D.jsx
User controls
- Application layout
src/layout/Layout.jsx - Header controls
src/components/Header/Header.jsx - Guides
src/components/GuidePopup.jsx - Workspace title
src/components/Title.jsx
Other components
- Learner
Connections 34
- Learner → Header controls: uses controls
- Learner → Blockly canvas: edits blocks
- Application layout → Header controls: renders
src/layout/Layout.jsx - Application layout → Blockly canvas: renders
src/layout/Layout.jsx - Application layout → Interactive 3D scene: renders
src/layout/Layout.jsx - Application layout → Scene render state: commits objects
src/layout/Layout.jsx - Application layout → Workspace state: sets example XML
src/layout/Layout.jsx - Header controls → Guides: renders
src/components/Header/Header.jsx - Header controls → Workspace title: renders
src/components/Header/Header.jsx - Header controls → Workspace import/export: imports and exports
src/components/Header/Header.jsx - Header controls → Workspace state: reads workspace
src/components/Header/Header.jsx - Blockly canvas → Workspace setup: initializes
src/components/BlocksCanvas/BlocksCanvas.jsx - Workspace setup → Block toolbox: configures
src/components/BlocksCanvas/core/Workspace.jsx - Blockly canvas → Block registry: creates
src/components/BlocksCanvas/BlocksCanvas.jsx - Blockly canvas → Geometric constructions: registers definitions
- Blockly canvas → 3D object variables: registers definitions
- Blockly canvas → Linear algebra primitives: registers definitions
- Blockly canvas → Linear algebra operators: registers definitions
- Blockly canvas → Measurements and debug: registers definitions
- Blockly canvas → Blockly callbacks: registers callbacks
src/components/BlocksCanvas/BlocksCanvas.jsx - Blockly canvas → Object variable dialog: renders
src/components/BlocksCanvas/BlocksCanvas.jsx - Object variable dialog → Workspace state: uses workspace
- Blockly canvas → Workspace state: sets workspace
src/components/BlocksCanvas/BlocksCanvas.jsx - Blockly canvas → Run and synchronize: runs workspace
src/components/BlocksCanvas/BlocksCanvas.jsx - Run and synchronize → Code generation: invokes
src/utils/runAndSync.js - Code generation → Three.js object state: updates objects
src/utils/generateAndRun.js - Run and synchronize → Three.js object state: reads objects
src/utils/runAndSync.js - Blockly canvas → Example workspace loader: applies XML
src/components/BlocksCanvas/BlocksCanvas.jsx - Workspace import/export → Workspace state: reads workspace
src/utils/serialization.js - Application layout → Interactive 3D scene: passes rendered objects
src/layout/Layout.jsx - Interactive 3D scene → Learner: shows 3D scene
README.md - Blockly canvas → Learner: provides visual coding
README.md - Geometric constructions → Learner: offers constructions
README.md - Linear algebra operators → Learner: offers math concepts
README.md