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",
       "concept":    "code",
       "python":     "code"
     },
     "modes": [
       { "name": "concept-tiles", "elements": ["title", "concept"] },
       { "name": "python-tiles",  "elements": ["title", "python"] }
     ],
     "categories": [
       { "name": "Output", "color": "#5C81A6" }
     ],
     "blocks": [
       {
         "identifier": "text_print",
         "category": "Output",
         "elements": {
           "title":      "Print",
           "concept":    "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() erbt deren modes / presets / code-Einstellungen / categories, sodass der
   // Aufruf nur Laufzeit-Belange trägt.
   const engine = new MorphicBlocks(definitions, behaviors);
   
   // Ein Aufruf richtet jede View ein, für die er einen Container bekommt.
   engine.mount({
   workspaceContainer: document.getElementById("workspace")!,
   toolboxContainer: document.getElementById("toolbox")!,
   // Hier gibt es keine Presets, also wird der erste Mode („concept-tiles“) genutzt.
   });

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

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

   engine.show({ toolbox: "python-tiles", views: { workspace: "python" } });

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

   const js = engine.generateJavaScript();

   Blocklys eigene Optionen stehen unter blockly und werden durchgereicht, etwa das Aussehen der Blöcke: mount({ blockly: { renderer: "zelos" } }) (Standard geras).

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.