[3851] - Implement the functionality to send changes of add-block

dockerfile

@@ -1,14 +1,17 @@
-
-FROM python:latest
-
+# First stage: Build stage
+FROM python:latest AS build
 
 WORKDIR /app
 
+COPY . .
 
-COPY .  .
+# Second stage: Final stage
+FROM python:latest
 
+WORKDIR /app
 
-EXPOSE 3000
+COPY --from=build /app /app
 
+EXPOSE 3000
 
 CMD ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"]

guide/README.md

@@ -1475,7 +1475,7 @@ While a bit fanciful, this example, which can be run by clicking on
 the link below, takes musical paint in a novel direction.
 
 [RUN
-LIVE](https://walterbender.github.io/musicblocks/index.html?id=1523896294964170&run=True&run=True)
+LIVE](https://sugarlabs.github.io/musicblocks/index.html?id=1523896294964170&run=True&run=True)
 
 ## <a name="ENSEMBLE">3.8 Ensemble</a>
 

guide/guide.html

@@ -215,6 +215,7 @@ <h2 id="2-making-sounds"><a name="NOTES">2. Making Sounds</a></h2>
           <a href="#3-programming-with-music">Next Section (3. Programming with Music)</a>
         </p>
         <p>
+
           Music Blocks incorporates many common elements of music, such as
           <a href="#22-pitch-blocks">pitch</a>, <a href="#21-note-value-blocks">rhythm</a>,
           <a href="#341-set-volume-and-crescendo">volume</a>, and, to some degree,
@@ -2406,7 +2407,7 @@ <h3 id="37-interactions"><a name="INTERACTIONS">3.7 Interactions</a></h3>
         </p>
         <p>
           <a
-            href="https://walterbender.github.io/musicblocks/index.html?id=1523896294964170&amp;run=True&amp;run=True"
+            href="https://sugarlabs.github.io/musicblocks/index.html?id=1523896294964170&run=True&run=True"
             >RUN LIVE</a
           >
         </p>

index.html

@@ -796,6 +796,16 @@
                                 >
                                     <a style="color: transparent;">space&nbsp;&nbsp;&nbsp;</a>
                                 </li>
+                                <li>
+                                    <a
+                                        id="collaborateIcon"
+                                        class="tooltipped"
+                                        data-position="bottom"
+                                        ><i class="material-icons md-48"
+                                            >groups</i
+                                        ></a
+                                    >
+                                </li>
                                 <li>
                                     <a
                                         id="restoreIcon"

js/activity.js

@@ -551,6 +551,39 @@ class Activity {
             })
         }
 
+        // Initialize the collaboration
+        this._initiateCollaboration = () => {
+            this.collaboration.startCollaboration();
+            this.blocks.isLocalUpdate = true;
+        };
+
+        // Render the project from received data
+        this.renderProjectFromData = (update) => {
+            const data = JSON.parse(update);
+            document.body.style.cursor = "wait";
+            // this.doLoadAnimation();
+            this.blocks.isLocalUpdate = false;
+
+            // Render the blocks
+            for (const name in this.palettes.dict) {
+                this.palettes.dict[name].hideMenu(true);
+            }
+
+            this.stage.removeAllEventListeners("trashsignal");
+
+            // Wait for the old blocks to be removed.
+            // eslint-disable-next-line no-unused-vars
+            const __listener = (event) => {
+                this.blocks.loadNewBlocks(data);
+                this.stage.removeAllEventListeners("trashsignal");
+            };
+
+            this.stage.addEventListener("trashsignal", __listener, false);
+            this.sendAllToTrash(false, false);
+            this._allClear(false);
+            this.refreshCanvas();
+        };
+
         /**
         * Sets up plugin and palette boilerplate.
         * This function initializes various properties related to the plugin objects,
@@ -3347,6 +3380,11 @@ class Activity {
             this.refreshCanvas();
         };
 
+        // Start the collaboration
+        const initiateCollaboration = (activity) => {
+            activity._initiateCollaboration();
+        }
+
         this.handleKeyDown = (event) => {
 
             if (event.ctrlKey && event.key === "z") {
@@ -5141,7 +5179,7 @@ class Activity {
             })
 
             document.addEventListener("mouseup", (event) => {
-                event.preventDefault();
+               // event.preventDefault();
                 this.isDragging = false;
                 this.selectionArea.style.display = "none";
                 this.startX = 0;
@@ -5377,6 +5415,7 @@ class Activity {
 
             this.pasteBox = new PasteBox(this);
             this.languageBox = new LanguageBox(this);
+            this.collaboration = new Collaboration(this);
 
             // Show help on startup if first-time user.
             if (this.firstTimeUser) {
@@ -5425,6 +5464,7 @@ class Activity {
             if (_THIS_IS_MUSIC_BLOCKS_) {
                 this.toolbar.renderChooseKeyIcon(chooseKeyMenu);
             }
+            this.toolbar.renderCollaborateIcon(initiateCollaboration);
             this.toolbar.renderJavaScriptIcon(toggleJSWindow);
             this.toolbar.renderLanguageSelectIcon(this.languageBox);
             this.toolbar.renderWrapIcon();

js/block.js

@@ -681,7 +681,9 @@ class Block {
     unhighlightSelectedBlocks(blk, selection) {
         if (selection) {
             this.blocks.unhighlight(blk, true);
-            this.disconnectedBitmap.visible = true;
+            if (!this.collapsed) {
+                this.disconnectedBitmap.visible = true;
+            }
             this.container.updateCache();
         };
     }
@@ -3381,23 +3383,23 @@ class Block {
 
         const labelElem = docById("labelDiv");
 
-	var safetext = function(text){
+        var safetext = function(text){
             // Best to avoid using these special characters in text strings
             // without first converting them to their "safe" form.
-	    var table = {
-		'<': 'lt',
-		'>': 'gt',
-		'"': 'quot',
-		'\'': 'apos',
-		'&': 'amp',
-		'\r': '#10',
-		'\n': '#13'
-	    };
-	
-	    return text.toString().replace(/[<>"'\r\n&]/g, function(chr){
-		return '&' + table[chr] + ';';
-	    });
-	};
+            var table = {
+                '<': 'lt',
+                '>': 'gt',
+                '"': 'quot',
+                '\'': 'apos',
+                '&': 'amp',
+                '\r': '#10',
+                '\n': '#13'
+            };
+        
+            return text.toString().replace(/[<>"'\r\n&]/g, function(chr){
+                return '&' + table[chr] + ';';
+            });
+        };
 
         if (this.name === "text") {
             labelElem.innerHTML =

js/blocks.js

@@ -168,6 +168,8 @@ class Blocks {
 
         this.selectedBlocks = [];
 
+        this.isLocalUpdate = false;
+
         /**
          * We stage deletion of prototype action blocks on the palette so
          * as to avoid palette refresh race conditions.
@@ -3066,6 +3068,14 @@ 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);
+            }
+        };
+
         /**
          * Make a new block with connections
          * @param - name - new variable
@@ -3168,6 +3178,15 @@ class Blocks {
 
             /** and we need to load the images into the container. */
             myBlock.imageLoad();
+
+            /** Signal that a new block is created  */
+            if (this.activity.collaboration.hasCollaborationStarted) {
+                if (this.isLocalUpdate) {
+                    setTimeout(() => {
+                        this.emitAddedBlock();
+                    }, 200);
+                };
+            };
             return myBlock;
         };
 
@@ -6525,6 +6544,10 @@ class Blocks {
                     }
                 }
             }
+
+            if (this.activity.collaboration.hasCollaborationStarted) {
+                this.isLocalUpdate = true;
+            }
         };
 
         /**

js/collaboration/collaboration.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // Copyright (c) 2024 Ajeet Pratap Singh
 //
 // This program is free software; you can redistribute it and/or
@@ -14,42 +15,64 @@
 
 /* eslint-disable no-undef */
 
-const RETRIES = 5;
-const DELAY_DURATION = 2000;
-let attempts = 0;
 
-function stopConnection(socket) {
-    if(attempts >= RETRIES){
-        console.log("Maximum calls to make connection exceeded. Stopped making calls");
-        socket.disconnect();
+class Collaboration {
+    constructor(activity) {
+        this.activity = activity;
+        this.RETRIES = 5;
+        this.DELAY_DURATION = 2000;
+        this.attempts = 0;
+        this.socket = null;
+        this.blockList = this.activity.blocks.blockList;
+        this.PORT = "http://localhost:8080/";
+        this.hasCollaborationStarted = false;
+        this.updatedProjectHtml = null;
     }
-}
 
-function makeConnection(){
+    // Convert the blockList into html
+    convertBlockListToHtml = () => {
+        this.updatedProjectHtml = this.activity.prepareExport();
+        return this.updatedProjectHtml;
+    };
 
-    // connect to the local server
-    const socket = io("http://localhost:8080/");
-    socket.on("connect", () => {
-        try{
-            console.log("connected to the server");
-        } catch(error){
-            console.log("Connection failed", error);
+    // Stop making calls to the socket server
+    stopConnection = (socket) => {
+        if (this.attempts >= this.RETRIES) {
+            console.log("Maximum calls to make connection exceeded. Stopped making calls");
+            socket.disconnect();
         }
-    });
+    };
 
-    socket.on("connect_error", (error) => {
-        attempts++;
-        console.log("Failed to connect to the socket server. Retrying in few seconds...");
-        setTimeout(stopConnection(socket), DELAY_DURATION);
-    });
-}
+    // Make calls to the socket server
+    makeConnection = () => {
+        // connect to the local server
+        const socket = io(this.PORT);
+        socket.on("connect", () => {
+            this.socket = socket;
+            try {
+                console.log("connected to the server");
+                this.hasCollaborationStarted = true;
+            } catch (error) {
+                console.log("Connection failed", error);
+            }
+        });
 
-function startCollaboration(){
-    document.addEventListener("DOMContentLoaded", () => {
-        makeConnection();
-        // initialiseDoc();
-    });
-}
+        socket.on("connect_error", () => {
+            this.attempts++;
+            console.log("Failed to connect to the socket server. Retrying in few seconds...");
+            setTimeout(this.stopConnection(socket), this.DELAY_DURATION);
+        });
 
-startCollaboration();
+        socket.on("new-block-added", (update) => {
+            this.activity.textMsg("New block added. rendering...");
+            setTimeout(this.activity.hideMsgs, 10000);
+            this.activity.renderProjectFromData(update);
+        });
+    };
+
+    // Start the collaboration
+    startCollaboration = () => {
+        this.makeConnection();
+    };
+}