feat: add fancy collapsing stacks (#2109)

google · Dec 13, 2023 · 33e1d1e · 33e1d1e
1 parent 5719de3
commit 33e1d1e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/examples/sample-p5-app/src/blocks/p5.js b/examples/sample-p5-app/src/blocks/p5.js
@@ -1,5 +1,21 @@
 import * as Blockly from 'blockly/core';
 
+// Dummy collapse block
+
+const collapse = {
+  'type': 'collapse',
+  'message0': '%1',
+  'args0': [
+    {
+      'type': 'input_statement',
+      'name': 'COLLAPSE',
+    },
+  ],
+  'nextStatement': null,
+  'previousStatement': null,
+  'colour': '#ccc',
+}
+
 // p5 Basic Setup Blocks
 
 const p5SetupJson = {
@@ -387,7 +403,7 @@ const print = {
 // Create the block definitions for all the JSON-only blocks.
 // This does not register their definitions with Blockly.
 const jsonBlocks = Blockly.common.createBlockDefinitionsFromJsonArray(
-    [background, stroke, fill, point, line, triangle, rect, ellipse, arc, print]);
+    [collapse, background, stroke, fill, point, line, triangle, rect, ellipse, arc, print]);
 
 export const blocks = {
   'p5_setup': p5Setup, 'p5_draw': p5Draw, 'p5_canvas': p5Canvas, ...jsonBlocks,

diff --git a/examples/sample-p5-app/src/generators/javascript.js b/examples/sample-p5-app/src/generators/javascript.js
@@ -11,6 +11,10 @@ import {Order} from 'blockly/javascript';
 // This file has no side effects!
 export const forBlock = Object.create(null);
 
+forBlock['collapse'] = function(block, generator) {
+  return generator.statementToCode(block, 'COLLAPSE');
+}
+
 forBlock['p5_print'] = function(block, generator) {
   const msg = generator.valueToCode(block, 'TEXT',
       Order.NONE) || '\'\'';

diff --git a/examples/sample-p5-app/src/index.js b/examples/sample-p5-app/src/index.js
@@ -143,17 +143,31 @@ const getStringification = {
 }
 Blockly.ContextMenuRegistry.registry.register(getStringification);
 
-/* const fancyCollapse = {
+const fancyCollapse = {
   callback: function(scope) {
     const ws = scope.block.workspace;
-    combineBlocks(ws, block.blockSelectionWeakMap.get(ws));
+    const stacks = combineBlocks(ws, blockSelectionWeakMap.get(ws));
+    for (const stack of stacks) {
+      const prevParentConn = stack.first.previousConnection?.targetConnection;
+      const prevDanglerConn = stack.last.nextConnection?.targetConnection;
+      stack.first.previousConnection?.disconnect();
+      stack.last.nextConnection?.disconnect();
+      const newBlock =
+        Blockly.serialization.blocks.append({'type': 'collapse'}, ws);
+      newBlock.getInput('COLLAPSE').connection.connect(
+          stack.first.previousConnection);
+      prevParentConn?.connect(newBlock.previousConnection);
+      prevDanglerConn?.connect(newBlock.nextConnection);
+      newBlock.setCollapsed(true);
+    }
   },
   scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
-  displayText: "Get lists of contiguous blocks",
+  displayText: "Summarize ✨Fancily✨",
   preconditionFn: () => {return 'enabled'},
   weight: 100,
-  id: 'getContiguous'
-} */
+  id: 'FancyCollapse'
+}
+Blockly.ContextMenuRegistry.registry.register(fancyCollapse);
 
 // Load the initial state from storage and run the code.
 load(ws);