Blockly Changes [REFERENCE]

package.json

@@ -105,7 +105,7 @@
     "jsdoc": "3.6.11",
     "json": "^9.0.4",
     "pngjs": "3.4.0",
-    "scratch-blocks": "1.1.114",
+    "scratch-blocks": "workspace:*",
     "scratch-l10n": "3.18.142",
     "scratch-render-fonts": "1.0.47",
     "scratch-semantic-release-config": "1.0.14",

src/engine/blocks.js

@@ -324,6 +324,12 @@ class Blocks {
                 }
                 break;
             }
+            case 'click':
+                // UI event: clicked scripts toggle in the runtime.
+                if (e.targetType === 'block') {
+                    this.runtime.toggleScript(this.getTopLevelScript(e.blockId), {stackClick: true});
+                }
+                break;
             case 'change':
                 this.changeBlock({
                     id: e.blockId,
@@ -422,11 +428,12 @@ class Blocks {
                 this.emitProjectChanged();
                 break;
             }
+            case 'block_comment_create':
             case 'comment_create':
                 if (this.runtime.getEditingTarget()) {
                     const currTarget = this.runtime.getEditingTarget();
-                    currTarget.createComment(e.commentId, e.blockId, e.text,
-                        e.xy.x, e.xy.y, e.width, e.height, e.minimized);
+                    currTarget.createComment(e.commentId, e.blockId, '',
+                        e.json.x, e.json.y, e.json.width, e.json.height, false);
 
                     if (currTarget.comments[e.commentId].x === null &&
                         currTarget.comments[e.commentId].y === null) {
@@ -436,12 +443,13 @@ class Blocks {
                         // comments, then the auto positioning should have taken place.
                         // Update the x and y position of these comments to match the
                         // one from the event.
-                        currTarget.comments[e.commentId].x = e.xy.x;
-                        currTarget.comments[e.commentId].y = e.xy.y;
+                        currTarget.comments[e.commentId].x = e.json.x;
+                        currTarget.comments[e.commentId].y = e.json.y;
                     }
                 }
                 this.emitProjectChanged();
                 break;
+            case 'block_comment_change':
             case 'comment_change':
                 if (this.runtime.getEditingTarget()) {
                     const currTarget = this.runtime.getEditingTarget();
@@ -450,26 +458,16 @@ class Blocks {
                         return;
                     }
                     const comment = currTarget.comments[e.commentId];
-                    const change = e.newContents_;
-                    if (Object.prototype.hasOwnProperty.call(change, 'minimized')) {
-                        comment.minimized = change.minimized;
-                    }
-                    if (Object.prototype.hasOwnProperty.call(change, 'width') &&
-                        Object.prototype.hasOwnProperty.call(change, 'height')) {
-                        comment.width = change.width;
-                        comment.height = change.height;
-                    }
-                    if (Object.prototype.hasOwnProperty.call(change, 'text')) {
-                        comment.text = change.text;
-                    }
+                    comment.text = e.newContents_;
                     this.emitProjectChanged();
                 }
                 break;
+            case 'block_comment_move':
             case 'comment_move':
                 if (this.runtime.getEditingTarget()) {
                     const currTarget = this.runtime.getEditingTarget();
                     if (currTarget && !Object.prototype.hasOwnProperty.call(currTarget.comments, e.commentId)) {
-                        log.warn(`Cannot change comment with id ${e.commentId} because it does not exist.`);
+                        log.warn(`Cannot move comment with id ${e.commentId} because it does not exist.`);
                         return;
                     }
                     const comment = currTarget.comments[e.commentId];
@@ -480,6 +478,34 @@ class Blocks {
                     this.emitProjectChanged();
                 }
                 break;
+            case 'block_comment_collapse':
+            case 'comment_collapse':
+                if (this.runtime.getEditingTarget()) {
+                    const currTarget = this.runtime.getEditingTarget();
+                    if (currTarget && !Object.prototype.hasOwnProperty.call(currTarget.comments, e.commentId)) {
+                        log.warn(`Cannot collapse comment with id ${e.commentId} because it does not exist.`);
+                        return;
+                    }
+                    const comment = currTarget.comments[e.commentId];
+                    comment.minimized = e.newCollapsed;
+                    this.emitProjectChanged();
+                }
+                break;
+            case 'block_comment_resize':
+            case 'comment_resize':
+                if (this.runtime.getEditingTarget()) {
+                    const currTarget = this.runtime.getEditingTarget();
+                    if (currTarget && !Object.prototype.hasOwnProperty.call(currTarget.comments, e.commentId)) {
+                        log.warn(`Cannot resize comment with id ${e.commentId} because it does not exist.`);
+                        return;
+                    }
+                    const comment = currTarget.comments[e.commentId];
+                    comment.width = e.newSize.width;
+                    comment.height = e.newSize.height;
+                    this.emitProjectChanged();
+                }
+                break;
+            case 'block_comment_delete':
             case 'comment_delete':
                 if (this.runtime.getEditingTarget()) {
                     const currTarget = this.runtime.getEditingTarget();
@@ -717,8 +743,11 @@ class Blocks {
             const oldParent = this._blocks[e.oldParent];
             if (typeof e.oldInput !== 'undefined' &&
                 oldParent.inputs[e.oldInput].block === e.id) {
-                // This block was connected to the old parent's input.
-                oldParent.inputs[e.oldInput].block = null;
+                // This block was connected to the old parent's input. We either
+                // want to restore the shadow block that previously occupied
+                // this input, or set it to null (which `.shadow` will be if
+                // there was no shadow previously)
+                oldParent.inputs[e.oldInput].block = oldParent.inputs[e.oldInput].shadow;
             } else if (oldParent.next === e.id) {
                 // This block was connected to the old parent's next connection.
                 oldParent.next = null;

src/engine/comment.js

@@ -31,7 +31,7 @@ class Comment {
     toXML () {
         return `<comment id="${this.id}" x="${this.x}" y="${
             this.y}" w="${this.width}" h="${this.height}" pinned="${
-            this.blockId !== null}" minimized="${this.minimized}">${xmlEscape(this.text)}</comment>`;
+                !this.minimized}" collapsed="${this.minimized}">${xmlEscape(this.text)}</comment>`;
     }
 
     // TODO choose min and defaults for width and height

src/engine/runtime.js

@@ -986,9 +986,7 @@ class Runtime extends EventEmitter {
                 type: menuId,
                 inputsInline: true,
                 output: 'String',
-                colour: categoryInfo.color1,
-                colourSecondary: categoryInfo.color2,
-                colourTertiary: categoryInfo.color3,
+                style: categoryInfo.id,
                 outputShape: menuInfo.acceptReporters ?
                     ScratchBlocksConstants.OUTPUT_SHAPE_ROUND : ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE,
                 args0: [
@@ -1039,9 +1037,7 @@ class Runtime extends EventEmitter {
                 message0: '%1',
                 inputsInline: true,
                 output: output,
-                colour: categoryInfo.color1,
-                colourSecondary: categoryInfo.color2,
-                colourTertiary: categoryInfo.color3,
+                style: categoryInfo.id,
                 outputShape: outputShape,
                 args0: [
                     {
@@ -1086,9 +1082,8 @@ class Runtime extends EventEmitter {
             type: extendedOpcode,
             inputsInline: true,
             category: categoryInfo.name,
-            colour: categoryInfo.color1,
-            colourSecondary: categoryInfo.color2,
-            colourTertiary: categoryInfo.color3
+            style: categoryInfo.id,
+            extensions: [],
         };
         const context = {
             // TODO: store this somewhere so that we can map args appropriately after translation.
@@ -1108,7 +1103,7 @@ class Runtime extends EventEmitter {
         const iconURI = blockInfo.blockIconURI || categoryInfo.blockIconURI;
 
         if (iconURI) {
-            blockJSON.extensions = ['scratch_extension'];
+            blockJSON.extensions.push("scratch_extension");
             blockJSON.message0 = '%1 %2';
             const iconJSON = {
                 type: 'field_image',
@@ -1149,6 +1144,8 @@ class Runtime extends EventEmitter {
                 }
                 blockJSON.outputShape = ScratchBlocksConstants.OUTPUT_SHAPE_SQUARE;
                 blockJSON.nextStatement = null; // null = available connection; undefined = terminal
+                blockJSON.extensions.push("shape_hat");
+
                 break;
             case BlockType.CONDITIONAL:
             case BlockType.LOOP:
@@ -1195,7 +1192,7 @@ class Runtime extends EventEmitter {
 
         if (blockInfo.blockType === BlockType.REPORTER) {
             if (!blockInfo.disableMonitor && context.inputList.length === 0) {
-                blockJSON.checkboxInFlyout = true;
+                blockJSON.extensions.push("monitor_block");
             }
         } else if (blockInfo.blockType === BlockType.LOOP) {
             // Add icon to the bottom right of a loop block
@@ -1434,7 +1431,7 @@ class Runtime extends EventEmitter {
 
             return {
                 id: categoryInfo.id,
-                xml: `<category name="${name}" id="${categoryInfo.id}" ${statusButtonXML} ${colorXML} ${menuIconXML}>${paletteBlocks.map(block => block.xml).join('')}</category>`
+                xml: `<category name="${name}" toolboxitemid="${categoryInfo.id}" ${statusButtonXML} ${colorXML} ${menuIconXML}>${paletteBlocks.map(block => block.xml).join('')}</category>`
             };
         });
     }

src/extension-support/extension-manager.js

@@ -130,6 +130,7 @@ class ExtensionManager {
      * @param {string} extensionId - the ID of an internal extension
      */
     async loadExtensionIdSync(extensionId) {
+
         const extension = await tryRetrieveExtensionConstructor(extensionId);
 
         if (!extension) return log.warn(`Could not find extension ${extensionId} in the built in extensions.`);
@@ -153,6 +154,8 @@ class ExtensionManager {
      * @returns {Promise} resolved once the extension is loaded and initialized or rejected on failure
      */
     async loadExtensionURL(extensionURL) {
+        console.log("LOADING???");
+        console.log(extensionURL);
         const extension = await tryRetrieveExtensionConstructor(extensionURL);
 
         if (extension) {
@@ -249,6 +252,7 @@ class ExtensionManager {
      * @returns {string} The name of the registered extension service
      */
     _registerInternalExtension(extensionObject) {
+        console.log("HEKO")
         const extensionInfo = extensionObject.getInfo();
         const fakeWorkerId = this.nextExtensionWorker++;
         const serviceName = `extension_${fakeWorkerId}_${extensionInfo.id}`;
@@ -265,6 +269,7 @@ class ExtensionManager {
      */
     _registerExtensionInfo(serviceName, extensionInfo) {
         extensionInfo = this._prepareExtensionInfo(serviceName, extensionInfo);
+        console.log("REGISTER 1");
         dispatch.call('runtime', '_registerExtensionPrimitives', extensionInfo).catch(e => {
             log.error(`Failed to register primitives for extension on service ${serviceName}:`, e);
         });

src/extension-support/extension-worker.js

@@ -33,6 +33,7 @@ class ExtensionWorker {
     }
 
     register (extensionObject) {
+        console.log("REGISTERING??");
         const extensionId = this.nextExtensionId++;
         this.extensions.push(extensionObject);
         const serviceName = `extension.${this.workerId}.${extensionId}`;

src/extension-support/prg/bundle-loader.js

@@ -51,6 +51,11 @@ const constructors = new Map();
 const auxiliarObjects = new Map();
 
 const untilScriptLoaded = (endpoint, { onLoad, onError }) => {
+  console.log(endpoint);
+  if (endpoint.includes("simpleprg95grpexample")) {
+    console.log("HERE", window["simpleprg95grpexample"]);
+    console.log(window[AuxiliaryExtensionInfo]["simpleprg95grpexample"])
+  }
   var scriptTag = document.createElement('script');
   var host = location.href.split("?")[0];
   host = host.endsWith("/") ? host.slice(0, -1) : host;
@@ -59,6 +64,11 @@ const untilScriptLoaded = (endpoint, { onLoad, onError }) => {
     scriptTag.onload = () => resolve(onLoad());
     scriptTag.onerror = () => reject(onError())
     document.body.appendChild(scriptTag);
+    setTimeout(() => {
+      console.log("HERE 2", window["simpleprg95grpexample"]);
+      console.log(window[AuxiliaryExtensionInfo]["simpleprg95grpexample"])
+    }, 1000)
+
   });
 }
 
@@ -82,6 +92,8 @@ const untilCommonObjects = (...IDs) => Promise.all(
 );
 
 const tryImportExtensionBundle = async (id, callbacks) => {
+  console.log("IMPORTING");
+  console.log(id);
   try {
     await untilCommonObjects(FrameworkID, AuxiliaryExtensionInfo);
     await untilScriptLoaded(getEndPoint(id), callbacks);