tutorial.js

import * as Blockly from "blockly";
import { CrossTabCopyPaste } from "@blockly/plugin-cross-tab-copy-paste";
import * as BlockDynamicConnection from "@blockly/block-dynamic-connection";
import { defineBlocks, CustomZelosRenderer } from "./blocks.js";
import { defineBaseBlocks } from "./blocks/base";
import { defineShapeBlocks } from "./blocks/shapes";
import { registerFieldColour } from "@blockly/field-colour";

defineBaseBlocks();
defineBlocks();
defineShapeBlocks();

console.log(Blockly.Blocks['wait']);

// Register the custom renderer
Blockly.registry.register(
	Blockly.registry.Type.RENDERER,
	"custom_zelos_renderer",
	CustomZelosRenderer,
);

// Initialize Blockly workspace
const workspace = Blockly.inject("blocklyDiv", {
	theme: Blockly.Themes.Modern,
	renderer: "custom_zelos_renderer",
	readOnly: true,
	toolbox: null,
	zoom: {
		controls: false,   
		wheel: false,  
		startScale: 0.75,         // 
	  },
	plugins: {
		connectionPreviewer: BlockDynamicConnection.decoratePreviewer(),
	},
});

const originalShowContextMenu = workspace.showContextMenu_;

workspace.showContextMenu_ = function(e) {
  console.log('Blockly context menu triggered');
  originalShowContextMenu.call(this, e);
};
workspace.configureContextMenu = function(menuOptions, e) {
  // Add custom menu options or modify existing ones
  // For example, to add a "Copy" option:
  menuOptions.push({
	text: 'Copy',
	enabled: true,
	callback: function() {
	  // Implement the copy functionality here
	},
  });
};






// Initialize the CrossTabCopyPaste plugin
const crossTabCopyPaste = new CrossTabCopyPaste();
crossTabCopyPaste.init({ contextMenu: true, shortcut: true });

document.getElementById('copyButton').addEventListener('click', () => {
  try {
	const topBlock = workspace.getTopBlocks(false)[0]; // Get the first top-level block
	if (topBlock) {
	  // Use the plugin's storage mechanism to copy the block
	  localStorage.setItem('blocklyStash', JSON.stringify(topBlock.toCopyData()));
	  alert('Blocks copied to local storage!');
	} else {
	  alert('No blocks available to copy.');
	}
  } catch (err) {
	console.error('Error copying blocks:', err);
	alert('Failed to copy blocks.');
  }
});
let blocklyJson = {
	  "type": "wait",
	  "id": "5CTD]keF.g82U/~Oci~b",
	  "inputs": {
		"DURATION": {
		  "shadow": {
			"type": "math_number",
			"id": "rm9RN(41w%N[=3?4[#~N",
			"fields": {
			  "NUM": 1000
			}
		  }
		}
	  }
	};


blocklyJson = {
  "blocks": {
	"languageVersion": 0,
	"blocks": [
	  {
		"type": "controls_repeat_ext",
		"id": "test-block",
		"inputs": {
		  "TIMES": {
			"shadow": {
			  "type": "math_number",
			  "fields": {
				"NUM": 10
			  }
			}
		  }
		}
	  }
	]
  }
};

blocklyJson = {
	  "blocks": {
		"languageVersion": 0,
		"blocks": [
		  {
			"type": "wait",
			"id": "test-block",
			"inputs": {
			  "DURATION": {
				"shadow": {
				  "type": "math_number",
				  "fields": {
					"NUM": 1000
				  }
				}
			  }
			}
		  }
		]
	  }
	};

/*blocklyJson = {
		kind: "block",
		type: "start",
		inputs: {
			DO: {
				block: {
					type: "load_character",
					fields: {
						MODELS: "Character1.glb",
						ID_VAR: {
							name: "player",
							type: "",
						},
					},
					inputs: {
						SCALE: {
							shadow: {
								type: "math_number",
								fields: {
									NUM: 1,
								},
							},
						},
						X: {
							shadow: {
								type: "math_number",
								fields: {
									NUM: 0,
								},
							},
						},
						Y: {
							shadow: {
								type: "math_number",
								fields: {
									NUM: 0,
								},
							},
						},
						Z: {
							shadow: {
								type: "math_number",
								fields: {
									NUM: 0,
								},
							},
						},
						HAIR_COLOR: {
							shadow: {
								type: "colour",
								fields: {
									COLOR: "#000000",
								},
							},
						},
						SKIN_COLOR: {
							shadow: {
								type: "skin_colour",
								fields: {
									COLOR: "#a15c33",
								},
							},
						},
						EYES_COLOR: {
							shadow: {
								type: "colour",
								fields: {
									COLOR: "#000000",
								},
							},
						},
						SLEEVES_COLOR: {
							shadow: {
								type: "colour",
								fields: {
									COLOR: "#008b8b",
								},
							},
						},
						SHORTS_COLOR: {
							shadow: {
								type: "colour",
								fields: {
									COLOR: "#00008b",
								},
							},
						},
						TSHIRT_COLOR: {
							shadow: {
								type: "colour",
								fields: {
									COLOR: "#ff8f60",
								},
							},
						},
					},
					next: {
						block: {
							type: "add_physics",
							fields: {
								MODEL_VAR: {
									name: "player",
									type: "",
								},
								PHYSICS_TYPE: "DYNAMIC",
							},
							next: {
								block: {
									type: "camera_follow",
									fields: {
										MESH_VAR: {
											name: "player",
											type: "",
										},
									},
									inputs: {
										RADIUS: {
											block: {
												type: "math_number",
												fields: {
													NUM: 7,
												},
											},
										},
									},
								},
							},
						},
					},
				},
			},
		},
	};*/

blocklyJson = {
  "blocks": {
	"languageVersion": 0,
	"blocks": [
	  {
		"type": "wait",
		"id": "test-block",
		"inputs": {
		  "DURATION": {
			"shadow": {
			  "type": "math_number",
			  "fields": {
				"NUM": 1000
			  }
			},
			"block": {
			  "type": "math_number",
			  "fields": {
				"NUM": 2000
			  }
			}
		  }
		}
	  }
	]
  }
};

blocklyJson ={
	  "blocks": {
		"languageVersion": 0,
		"blocks": [
		  {
			"type": "start",
			"id": "hP1(8=@A.+kG[L4(yPaZ",
			"inputs": {
			  "DO": {
				"block": {
				  "type": "set_sky_color",
				  "id": "LvX7C$m$;68`G_Qvq=pL",
				  "inputs": {
					"COLOR": {
					  "shadow": {
						"type": "colour",
						"id": "Mlh8zzfY)p3!M2.q:a(8",
						"fields": {
						  "COLOR": "#6495ed"
						}
					  }
					}
				  },
				  "next": {
					"block": {
					  "type": "create_ground",
					  "id": "S%:d.e-l98E_Phu`CHx?",
					  "inputs": {
						"COLOR": {
						  "shadow": {
							"type": "colour",
							"id": "Pe/-b7d5B1Qr*:EvoPsA",
							"fields": {
							  "COLOR": "#71bc78"
							}
						  }
						}
					  },
					  "next": {
						"block": {
						  "type": "print_text",
						  "id": "dVTxJPUi_sO!AuNY#oor",
						  "inputs": {
							"TEXT": {
							  "shadow": {
								"type": "text",
								"id": "=L-/-1HT`]edbp63Mo8Q",
								"fields": {
								  "TEXT": "Hold left mouse button down to look around"
								}
							  }
							},
							"DURATION": {
							  "shadow": {
								"type": "math_number",
								"id": "PAPV5~p4xMSO]ZA,_=pN",
								"fields": {
								  "NUM": 30
								}
							  }
							},
							"COLOR": {
							  "shadow": {
								"type": "colour",
								"id": "w+iegX|E(VYe9KaiAi;Q",
								"fields": {
								  "COLOR": "#000080"
								}
							  }
							}
						  },
						  "next": {
							"block": {
							  "type": "print_text",
							  "id": "C2d:3-H=Y=ZcI:RlzSA+",
							  "inputs": {
								"TEXT": {
								  "shadow": {
									"type": "text",
									"id": "rDKLD?S[.4^HZ(g*vX^y",
									"fields": {
									  "TEXT": "W - forward; S backward; Space - Jump"
									}
								  }
								},
								"DURATION": {
								  "shadow": {
									"type": "math_number",
									"id": "V.~W]u#$|n]}Z.DA(vN3",
									"fields": {
									  "NUM": 30
									}
								  }
								},
								"COLOR": {
								  "shadow": {
									"type": "colour",
									"id": "T=:hhU7UFGsFu|G!a8J!",
									"fields": {
									  "COLOR": "#000080"
									}
								  }
								}
							  }
							}
						  }
						}
					  }
					}
				  }
				}
			  }
			}
		  }
		]
	  }
	};


Blockly.serialization.workspaces.load(blocklyJson, workspace);

function fitWorkspaceToBlocks(workspace) {
  const blocksBoundingBox = workspace.getBlocksBoundingBox();

  if (blocksBoundingBox) {
	console.log("Blocks bounding box:", blocksBoundingBox);

	// Account for workspace scale (zoom level)
	const scale = workspace.scale; // Typically 0.75, 1, etc.
	console.log("Workspace scale (zoom):", scale);

	const width = (blocksBoundingBox.right - blocksBoundingBox.left) * scale;
	const height = (blocksBoundingBox.bottom - blocksBoundingBox.top) * scale;

	console.log("Calculated width (scaled):", width, "Calculated height (scaled):", height);

	// Optional padding for better visual spacing
	const padding = 20;
	const totalWidth = Math.ceil(width + padding);
	const totalHeight = Math.ceil(height + padding);

	console.log("Total width with padding:", totalWidth, "Total height with padding:", totalHeight);

	// Resize the parent container (blocklyDiv)
	const blocklyDiv = document.getElementById('blocklyDiv');
	if (blocklyDiv) {
	  console.log("Resizing blocklyDiv...");
	  blocklyDiv.style.width = `${totalWidth}px`;
	  blocklyDiv.style.height = `${totalHeight}px`;
	} else {
	  console.warn("blocklyDiv not found. Ensure the container element exists.");
	}

	// Trigger Blockly to resize
	console.log("Triggering Blockly SVG resize...");
	Blockly.svgResize(workspace);
  } else {
	console.warn("No blocks bounding box found. Ensure the workspace contains blocks.");
  }
}

// Call this function after workspace changes
fitWorkspaceToBlocks(workspace);