Global Procedures (scratch-gui)

src/components/custom-procedures/custom-procedures.jsx

@@ -228,6 +228,19 @@ const CustomProcedures = props => {
                         />
                     </label>
                 </div>
+                <div className={styles.checkboxRow}>
+                    <label>
+                        <FancyCheckbox
+                            checked={props.global}
+                            onChange={props.onToggleGlobal}
+                        />
+                        <FormattedMessage
+                            defaultMessage="For all sprites"
+                            description="Label for checkbox to toggle availability for all sprites"
+                            id="gui.customProcedures.forAllSprites"
+                        />
+                    </label>
+                </div>
                 <Box className={styles.buttonRow}>
                     <button
                         className={styles.cancelButton}
@@ -265,7 +278,9 @@ CustomProcedures.propTypes = {
     onCancel: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired,
     onToggleWarp: PropTypes.func.isRequired,
-    warp: PropTypes.bool.isRequired
+    warp: PropTypes.bool.isRequired,
+    onToggleGlobal: PropTypes.func.isRequired,
+    global: PropTypes.bool.isRequired
 };
 
 export default injectIntl(CustomProcedures);

src/containers/blocks.jsx

@@ -168,6 +168,36 @@ class Blocks extends React.Component {
             Blocks.defaultOptions
         );
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
+
+        if (this.ScratchBlocks.Procedures &&
+            this.ScratchBlocks.Procedures.setProcedureBlocksAcrossTargetsCallback) {
+            this.ScratchBlocks.Procedures.setProcedureBlocksAcrossTargetsCallback(() => {
+                const runtime = this.props.vm && this.props.vm.runtime;
+                if (!runtime || !runtime.targets) {
+                    return [];
+                }
+
+                const procedureBlocks = [];
+                for (let i = 0; i < runtime.targets.length; i++) {
+                    const target = runtime.targets[i];
+                    const blocks = target && target.blocks && target.blocks._blocks;
+                    if (!blocks) continue;
+
+                    for (const blockId in blocks) {
+                        if (!Object.prototype.hasOwnProperty.call(blocks, blockId)) continue;
+                        const block = blocks[blockId];
+                        if (!block) continue;
+                        if (
+                            block.opcode === 'procedures_prototype' ||
+                            block.opcode === this.ScratchBlocks.PROCEDURES_CALL_BLOCK_TYPE
+                        ) {
+                            procedureBlocks.push(block);
+                        }
+                    }
+                }
+                return procedureBlocks;
+            });
+        }
         AddonHooks.blocklyWorkspace = this.workspace;
 
         // Register buttons under new callback keys for creating variables,
@@ -298,6 +328,12 @@ class Blocks extends React.Component {
     componentWillUnmount () {
         this.detachVM();
         this.unmounted = true;
+
+        if (this.ScratchBlocks && this.ScratchBlocks.Procedures &&
+            this.ScratchBlocks.Procedures.setProcedureBlocksAcrossTargetsCallback) {
+            this.ScratchBlocks.Procedures.setProcedureBlocksAcrossTargetsCallback(() => []);
+        }
+
         this.workspace.dispose();
         clearTimeout(this.toolboxUpdateTimeout);
 
@@ -515,6 +551,29 @@ class Blocks extends React.Component {
             }
             log.error(error);
         }
+
+        const allBlocks = this.workspace.getAllBlocks(false);
+        for (let i = 0; i < allBlocks.length; i++) {
+            const block = allBlocks[i];
+            if (block.type === this.ScratchBlocks.PROCEDURES_CALL_BLOCK_TYPE && block.getProcCode) {
+                const procCode = block.getProcCode();
+                if (procCode) {
+                    // Get the latest global procedure mutation from the provider
+                    const globalMutations = this.ScratchBlocks.Procedures.allGlobalProcedureMutations(this.workspace);
+                    for (let j = 0; j < globalMutations.length; j++) {
+                        const mutation = globalMutations[j];
+                        if (this.ScratchBlocks.Names.equals(mutation.getAttribute('proccode'), procCode)) {
+                            // Found the matching procedure, update the call block with the latest mutation
+                            if (block.domToMutation) {
+                                block.domToMutation(mutation);
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+
         this.workspace.addChangeListener(this.props.vm.blockListener);
 
         if (this.props.vm.editingTarget && this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id]) {

src/containers/custom-procedures.jsx

@@ -14,6 +14,7 @@ class CustomProcedures extends React.Component {
             'handleAddInput',
             'handleAddColor',
             'handleToggleWarp',
+            'handleToggleGlobal',
             'handlePropagation',
             'handleInputMenuChange',
             'handleCancel',
@@ -23,8 +24,9 @@ class CustomProcedures extends React.Component {
         this.state = {
             rtlOffset: 0,
             warp: false,
-            colour: '#000000',
-            menuInput: 'stringornumber'
+            global: false,
+            colour: "#000000",
+            menuInput: "stringornumber"
         };
     }
     componentWillUnmount () {
@@ -108,7 +110,11 @@ class CustomProcedures extends React.Component {
         this.mutationRoot.domToMutation(this.props.mutator);
         this.mutationRoot.initSvg();
         this.mutationRoot.render();
-        this.setState({warp: this.mutationRoot.getWarp(), colour: this.mutationRoot.colour_});
+        this.setState({
+            warp: this.mutationRoot.getWarp(),
+            global: this.mutationRoot.getGlobal(),
+            colour: this.mutationRoot.colour_
+        });
         // Allow the initial events to run to position this block, then focus.
         setTimeout(() => {
             this.mutationRoot.focusLastEditor_();
@@ -158,6 +164,13 @@ class CustomProcedures extends React.Component {
             this.setState({warp: newWarp});
         }
     }
+    handleToggleGlobal () {
+        if (this.mutationRoot) {
+            const newGlobal = !this.mutationRoot.getGlobal();
+            this.mutationRoot.setGlobal(newGlobal);
+            this.setState({global: newGlobal});
+        }
+    }
     handlePropagation (e) {
         e.stopPropagation();
     }
@@ -168,6 +181,7 @@ class CustomProcedures extends React.Component {
         return (
             <CustomProceduresComponent
                 componentRef={this.setBlocks}
+                global={this.state.global}
                 warp={this.state.warp}
                 colour={this.state.colour}
                 onAddInput={this.handleAddInput}
@@ -179,6 +193,7 @@ class CustomProcedures extends React.Component {
                 onCancel={this.handleCancel}
                 onOk={this.handleOk}
                 onToggleWarp={this.handleToggleWarp}
+                onToggleGlobal={this.handleToggleGlobal}
             />
         );
     }