fix: enable dragging arguments out of procedure blocks (scratchfounda…

…tion#119)

blocks_vertical/procedures.js

@@ -26,6 +26,40 @@ import * as Blockly from "blockly/core";
 import { Colours } from "../core/colours.js";
 import { FieldTextInputRemovable } from "../core/field_textinput_removable.js";
 
+class DuplicateOnDragDraggable {
+  constructor(block) {
+    this.block = block;
+  }
+
+  isMovable() {
+    return true;
+  }
+
+  startDrag(e) {
+    const data = this.block.toCopyData();
+    this.copy = Blockly.clipboard.paste(data, this.block.workspace);
+    this.baseStrat = new Blockly.dragging.BlockDragStrategy(this.copy);
+    this.copy.setDragStrategy(this.baseStrat);
+    this.baseStrat.startDrag(e);
+  }
+
+  drag(e) {
+    this.block.workspace
+      .getGesture(e)
+      .getCurrentDragger()
+      .setDraggable(this.copy);
+    this.baseStrat.drag(e);
+  }
+
+  endDrag(e) {
+    this.baseStrat?.endDrag(e);
+  }
+
+  revertDrag(e) {
+    this.copy?.dispose();
+  }
+}
+
 // Serialization and deserialization.
 
 /**
@@ -918,6 +952,7 @@ Blockly.Blocks["argument_reporter_boolean"] = {
       ],
       extensions: ["colours_more", "output_boolean"],
     });
+    this.setDragStrategy(new DuplicateOnDragDraggable(this));
   },
 };
 
@@ -934,6 +969,7 @@ Blockly.Blocks["argument_reporter_string_number"] = {
       ],
       extensions: ["colours_more", "output_number", "output_string"],
     });
+    this.setDragStrategy(new DuplicateOnDragDraggable(this));
   },
 };
 

src/index.js

@@ -37,6 +37,7 @@ import { buildGlowFilter, glowStack } from "./glows.js";
 import { ScratchContinuousToolbox } from "./scratch_continuous_toolbox.js";
 import "./scratch_continuous_category.js";
 import "./scratch_comment_icon.js";
+import "./scratch_dragger.js";
 import "./scratch_variable_model.js";
 import "./scratch_connection_checker.js";
 import "./events_block_comment_change.js";

src/scratch_dragger.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+class ScratchDragger extends Blockly.dragging.Dragger {
+  setDraggable(draggable) {
+    this.draggable = draggable;
+  }
+}
+
+Blockly.registry.register(
+  Blockly.registry.Type.BLOCK_DRAGGER,
+  Blockly.registry.DEFAULT,
+  ScratchDragger,
+  true
+);