fix: add request queue to handle concurrent zoom & offset requests

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -51,6 +51,7 @@ import { BlockPorts } from "@/types/visual-editor.types";
 import BlockDialog from "../BlockDialog";
 import { ZOOM_LEVEL } from "../constants";
 import { useVisualEditor } from "../hooks/useVisualEditor";
+import { RequestQueue } from "@/utils/requestQueue";
 
 const Diagrams = () => {
   const { t } = useTranslation();
@@ -108,25 +109,23 @@ const Diagrams = () => {
   const { mutateAsync: updateBlock } = useUpdate(EntityType.BLOCK, {
     invalidate: false,
   });
+
+  const requestQueue = useRef(new RequestQueue<ICategory>());
+  const enqueueUpdate = (id: string, params: any) => {
+    requestQueue.current.enqueue(() => updateCategory({ id, params }));
+  };
+
   const debouncedZoomEvent = debounce((event) => {
     if (selectedCategoryId) {
       engine?.repaintCanvas();
-      updateCategory({
-        id: selectedCategoryId,
-        params: {
-          zoom: event.zoom,
-        },
-      });
+      enqueueUpdate(selectedCategoryId, { zoom: event.zoom });
     }
     event.stopPropagation();
   }, 200);
   const debouncedOffsetEvent = debounce((event) => {
     if (selectedCategoryId) {
-      updateCategory({
-        id: selectedCategoryId,
-        params: {
-          offset: [event.offsetX, event.offsetY],
-        },
+      enqueueUpdate(selectedCategoryId, {
+        offset: [event.offsetX, event.offsetY],
       });
     }
     event.stopPropagation();

frontend/src/utils/requestQueue.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ * 3. SaaS Restriction: This software, or any derivative of it, may not be used to offer a competing product or service (SaaS) without prior written consent from Hexastack. Offering the software as a service or using it in a commercial cloud environment without express permission is strictly prohibited.
+ */
+
+export class RequestQueue<T> {
+  private queue: Array<() => Promise<T>> = [];
+  private isProcessing = false;
+
+  enqueue(request: () => Promise<T>) {
+    this.queue.push(request);
+    this.processQueue();
+  }
+
+  private async processQueue() {
+    if (this.isProcessing) return;
+
+    this.isProcessing = true;
+
+    while (this.queue.length > 0) {
+      const request = this.queue.shift();
+      if (request) {
+        await request();
+      }
+    }
+
+    this.isProcessing = false;
+  }
+}