[3851] - Implement move, connect, disconnect, value-update, delete changes

js/block.js

@@ -208,6 +208,9 @@ const PIEMENUS = [
     "wrapmode"
 ];
 
+// Event for updating the value of a block
+const EMIT_BLOCK_VALUE_UPDATED = "block-value-updated";
+
 /**
  * Async function to create bitmap from SVG data.
  * @param {string} data - SVG data.
@@ -4070,6 +4073,13 @@ class Block {
                 focused = true;
             }, 100);
         }
+        setTimeout(() => {
+            if (this.activity.collaboration.hasCollaborationStarted) {
+                if (this.blocks.isLocalUpdate) {
+                    this.blocks.emitChanges(EMIT_BLOCK_VALUE_UPDATED);
+                };
+            };
+        }, 3000);
     }
 
     /**

js/blocks.js

@@ -168,8 +168,21 @@ class Blocks {
 
         this.selectedBlocks = [];
 
+        // Flag to know if the block added is local 
         this.isLocalUpdate = false;
 
+        // Event for adding a new block
+        const EMIT_NEW_BLOCK_ADDED = "new-block-added";
+
+        // Event for moving connecting and disconnecting a block
+        const EMIT_BLOCK_MOVED_CONNECTED_DISCONNECTED = "block-moved/connected/disconnected";
+
+        // Event for deleting a new block
+        const EMIT_NEW_BLOCK_DELETED = "new-block-deleted";
+
+        // Flag to avoid emitting move changes if a block is added
+        this.hasEmittedBlockAddition = false;
+
         /**
          * We stage deletion of prototype action blocks on the palette so
          * as to avoid palette refresh race conditions.
@@ -2146,6 +2159,12 @@ class Blocks {
             this.isBlockMoving = false;
             this.adjustExpandableClampBlock();
             this.activity.refreshCanvas();
+
+            if (this.activity.collaboration.hasCollaborationStarted) {
+                if (!this.hasEmittedBlockAddition) {
+                    this.emitChanges(EMIT_BLOCK_MOVED_CONNECTED_DISCONNECTED);
+                }
+            }
         };
 
         /**
@@ -3068,12 +3087,13 @@ class Blocks {
             this.visible = true;
         };
 
-        // Emit a message when a new block is created
-        this.emitAddedBlock = () => {
-            if (this.activity.collaboration.hasCollaborationStarted) {
-                const update = this.activity.collaboration.convertBlockListToHtml();
-                this.activity.collaboration.socket.emit("new-block-added", update);
+        // Emit a message when there is a change in the blocks of the project
+        this.emitChanges = (emitMsg) => {
+            if (emitMsg == EMIT_NEW_BLOCK_ADDED) {
+                this.hasEmittedBlockAddition = true;
             }
+            const update = this.activity.collaboration.convertBlockListToHtml();
+            this.activity.collaboration.socket.emit(emitMsg, update);
         };
 
         /**
@@ -3183,7 +3203,8 @@ class Blocks {
             if (this.activity.collaboration.hasCollaborationStarted) {
                 if (this.isLocalUpdate) {
                     setTimeout(() => {
-                        this.emitAddedBlock();
+                        this.emitChanges(EMIT_NEW_BLOCK_ADDED);
+                        this.hasEmittedBlockAddition = false;
                     }, 200);
                 };
             };
@@ -6938,6 +6959,11 @@ class Blocks {
             this.activity.refreshCanvas();
             this.activity.trashcan.stopHighlightAnimation();
             document.getElementById("hideContents").click();
+
+            // Emit an event indicating a block a deleted
+            if (this.activity.collaboration.hasCollaborationStarted) {
+                this.emitChanges(EMIT_NEW_BLOCK_DELETED);
+            };
         };
 
         /***

js/collaboration/collaboration.js

@@ -68,6 +68,20 @@ class Collaboration {
             setTimeout(this.activity.hideMsgs, 10000);
             this.activity.renderProjectFromData(update);
         });
+
+        socket.on("new-block-deleted", (update) => {
+            this.activity.textMsg("New block deleted. rendering...");
+            setTimeout(this.activity.hideMsgs, 10000);
+            this.activity.renderProjectFromData(update);
+        });
+
+        socket.on("block-moved/connected/disconnected", (update) => {
+            this.activity.renderProjectFromData(update);
+        });
+
+        socket.on("block-value-updated", (update) => {
+            this.activity.renderProjectFromData(update);
+        });
     };
 
     // Start the collaboration

js/protoblocks.js

@@ -133,7 +133,7 @@ class ProtoBlock {
         if (this.fontsize) {
             svg.setFontSize(this.fontsize);
         }
-        svg.setExpand(30 + this.extraWidth, 0, 0, 0);
+        svg.setExpand(10 + this.extraWidth, 0, 0, 0);
         return [
             svg.basicBlock(),
             svg.docks,