How to clean up Google Blockly?

Asked

Viewed 79 times

0

I am using in my project Google Blockly and need that when I click a button, empty the mounted structure that is in memory.
How can I do?

https://developers.google.com/blockly/reference/overview

My example: I need to insert a button to delete everything in Workspace

	<!DOCTYPE html>
	<html>
	<head>
	  <meta charset="utf-8">
	  <title>Blockly Demo: Fixed Blockly</title>
	  <script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
		ga('create', 'UA-102948379-1', 'auto');
		ga('send', 'pageview');
	  </script>
	  <script src="https://blockly-demo.appspot.com/static/blockly_compressed.js"></script>
	  <script src="https://blockly-demo.appspot.com/static/blocks_compressed.js"></script>
	  <script src="https://blockly-demo.appspot.com/static/msg/js/en.js"></script>
	  <style>
		body {
		  background-color: #fff;
		  font-family: sans-serif;
		}
		h1 {
		  font-weight: normal;
		  font-size: 140%;
		}
	  </style>
	</head>
	<body>
	  <h1><a href="https://developers.google.com/blockly/">Blockly</a> &gt;

	  <p>This is a simple demo of injecting Blockly into a fixed-sized 'div' element.</p>

	  <p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/fixed-size">injecting fixed-sized Blockly</a>&hellip;</p>

	  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

	  <xml id="toolbox" style="display: none">
		<block type="controls_if"></block>
		<block type="logic_compare"></block>
		<block type="controls_repeat_ext"></block>
		<block type="math_number"></block>
		<block type="math_arithmetic"></block>
		<block type="text"></block>
		<block type="text_print"></block>
	  </xml>

	  <script>
		var workspace = Blockly.inject('blocklyDiv',
			{media: '../../media/',
			 toolbox: document.getElementById('toolbox')});
	  </script>

	</body>
	</html>

Step 2

Can you assign the ID to each separate code block ?

inserir a descrição da imagem aqui

Thank you

php javascript jquery

  • Wouldn’t be the Workspace.clear()? You even searched the documentation?

  • Yes I did, but I don’t understand how this Workspace works.()

  • This is the code you need ? And not to confuse the minds of people who want to use this post to learn, I deleted some answers, to simplify and leave the post focused.

1 answer

0

As I commented, just use the Worspace.clear. The object of workspace you already have in Javascript, just call the method clear by pressing the button. See:

var workspace = Blockly.inject('blocklyDiv', {
  media: '../../media/',
  toolbox: document.getElementById('toolbox')
});

var button = document.getElementById("clear");

button.addEventListener("click", event => {
   workspace.clear();
});
<script src="https://blockly-demo.appspot.com/static/blockly_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/blocks_compressed.js"></script>
<script src="https://blockly-demo.appspot.com/static/msg/js/en.js"></script>

<button id="clear">Limpar</button>

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="logic_compare"></block>
  <block type="controls_repeat_ext"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>

  • Wow dahora. Thank you. Can we detect separate different blocks ? I will post the image in my post

  • @abduzeedo did not make much sense what he asked and the image he put in the question was not clear. Can you explain, in words, exactly what you need? And try not to change the initial purpose of the question. If you have a different question than the one that was answered, you should open a new question.

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.