Schnellstart

Diese Anleitung baut das kleinste sinnvolle Setup: ein Block, zwei Modes, eine Toolbox und ein Workspace — mit einem Mode-Wechsel zur Laufzeit am Ende.

1. Definiere deine Blöcke in einer Definitions-JSON. Ein Block deklariert benannte Elements (seine visuellen Bestandteile); die globale elementTypes-Registry legt fest, was jeder Element-Name ist; Modes wählen aus, welche Elements gezeigt werden.

   definitions.json

   {
     "elementTypes": {
       "title":      "text",
       "conceptual": "code",
       "python":     "code"
     },
     "modes": [
       { "name": "conceptual", "elements": ["title", "conceptual"] },
       { "name": "python",     "elements": ["title", "python"] }
     ],
     "categories": [
       { "name": "Output", "color": "#5C81A6" }
     ],
     "blocks": [
       {
         "identifier": "text_print",
         "category": "Output",
         "elements": {
           "title":      "Print",
           "conceptual": "Output %1",
           "python":     "print(%1)"
         },
         "inputSlots": {
           "1": { "kind": "value", "name": "TEXT" }
         }
       }
     ]
   }

   %1 ist ein Input-Slot — er wird zu einem Blockly-Input am Block und zu einer Einsetzstelle in Textdarstellungen.

2. Schreibe ein Behavior für den Block. Behaviors erzeugen das ausführbare JavaScript, eine Funktion pro Block-Identifier:

   behaviors.ts

   import type { MorphicBehaviorMap } from "morphic-blocks";
   
   export const behaviors: MorphicBehaviorMap = {
     text_print(proxy) {
       return `console.log(${proxy.inputs.TEXT ?? "undefined"});\n`;
     },
   };

3. Füge Container zu deiner Seite hinzu:

   <div id="toolbox"></div>
   <div id="workspace"></div>

4. Binde die Engine ein:

   main.ts

   import { MorphicBlocks } from "morphic-blocks";
   import definitions from "./definitions.json";
   import { behaviors } from "./behaviors";
   
   // Der Konstruktor nimmt die ganze Definitionsdatei plus deine Behaviors.
   // mount() und mountToolbox() erben deren modes / presets / highlighting /
   // categories, sodass ein Aufruf nur Laufzeit-Belange trägt.
   const engine = new MorphicBlocks(definitions, behaviors);
   
   engine.mount({
   workspaceContainer: document.getElementById("workspace")!,
   workspaceMode: "conceptual",
   toolboxMode: "conceptual",
   });
   
   engine.mountToolbox(document.getElementById("toolbox")!);

   Ziehe die Print-Kachel aus der Toolbox in den Workspace — dabei entsteht ein echter Blockly-Block.

5. Wechsle den Mode zur Laufzeit. Dieselben Blöcke werden mit dem python-Element als Template neu gerendert:

   engine.setModes({ workspaceMode: "python", toolboxMode: "python" });

6. Erzeuge Code aus dem Workspace über deine Behaviors:

   const js = engine.generateJavaScript();

Wie es weitergeht

• Blocks & Elements — das Modell hinter dem, was du gerade geschrieben hast.
• Presets & Views — Mode-Kombinationen benennen und ganze Layouts steuern.
• Das Definitions-Format — jedes Feld erklärt.
• Gestalte deine Modes mit CSS — siehe Modes mit CSS gestalten.