handlers for updates in the example side

examples/canvas/src/handlers.ts

@@ -0,0 +1,43 @@
+import { toString as uint8ArrayToString } from "uint8arrays/to-string";
+import { ICanvas } from "./objects/canvas";
+
+// TODO: this should be superseded by wasm and main ts-topology library
+export const handleCanvasMessages = (canvas: ICanvas, e: any) => {
+  if (e.detail.msg.topic === "_peer-discovery._p2p._pubsub") return;
+  const input = uint8ArrayToString(e.detail.msg.data);
+  const message = JSON.parse(input);
+  switch (message["type"]) {
+    case "object_update": {
+      const fn = uint8ArrayToString(new Uint8Array(message["data"]));
+      handleObjectUpdate(canvas, fn);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+function handleObjectUpdate(canvas: ICanvas, fn: string) {
+  // In this case we only have paint
+  // `paint(${node.getPeerId()}, [${[x, y]}], [${painting}])`
+  let args = fn.replace("paint(", "").replace(")", "").split(", ");
+  let offset_p = args[1]
+    .replace("[", "")
+    .replace("]", "")
+    .split(",")
+    .map((s) => parseInt(s, 10));
+  const offset: [number, number] = [offset_p[0], offset_p[1]];
+  let rgb_p = args[2]
+    .replace("[", "")
+    .replace("]", "")
+    .split(",")
+    .map((s) => parseInt(s, 10));
+  const rgb: [number, number, number] = [rgb_p[0], rgb_p[1], rgb_p[2]];
+
+  try {
+    canvas.paint(args[0], offset, rgb);
+  } catch (e) {
+    console.error(e);
+  }
+}

examples/canvas/src/index.ts

@@ -2,6 +2,7 @@ import { TopologyNode } from "@topology-foundation/node";
 import { Canvas, ICanvas } from "./objects/canvas";
 import { Pixel } from "./objects/pixel";
 import { GCounter } from "@topology-foundation/crdt";
+import { handleCanvasMessages } from "./handlers";
 
 const node = new TopologyNode();
 let canvasCRO: ICanvas;
@@ -45,13 +46,18 @@ async function paint_pixel(pixel: HTMLDivElement) {
 
   node.updateObject(
     canvasCRO,
-    `paint(${node.getPeerId()}, ${[x, y]}, ${painting})`,
+    `paint(${node.getPeerId()}, [${[x, y]}], [${painting}])`,
   );
 }
 
 async function init() {
   await node.start();
 
+  node.addCustomGroupMessageHandler((e) => {
+    handleCanvasMessages(canvasCRO, e);
+    if (canvasCRO) render();
+  });
+
   let create_button = <HTMLButtonElement>document.getElementById("create");
   create_button.addEventListener("click", () => {
     canvasCRO = new Canvas(node.getPeerId(), 5, 10);

packages/node/src/index.ts

@@ -30,8 +30,7 @@ export class TopologyNode {
 
     this._networkNode.addGroupMessageHandler((e) => {
       if (e.detail.msg.topic === "_peer-discovery._p2p._pubsub") return;
-      console.log(e, e.detail);
-
+      // TODO: add base handler here after July demo
       // send the events to the app handler
       // const message = JSON.parse(new TextDecoder().decode(e.detail.data));
     });