From ad9684e0c750579d35a5b868343bcd4e2e240a5c Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:51:04 +0000
Subject: [PATCH] feat: canvas core

---
 apps/canvas/widget/canvas/core.jsx          | 23 +++++++-
 apps/canvas/widget/canvas/view.jsx          | 47 ++++++++-------
 functions/[[accountId]]/widget/[[index]].js |  2 +-
 public/index.html                           |  6 +-
 public/manifest.json                        |  4 +-
 public/site.webmanifest                     |  4 +-
 src/components/custom/Canvas.js             | 63 ++++-----------------
 7 files changed, 66 insertions(+), 83 deletions(-)

diff --git a/apps/canvas/widget/canvas/core.jsx b/apps/canvas/widget/canvas/core.jsx
index 8ad9b860..c1402072 100644
--- a/apps/canvas/widget/canvas/core.jsx
+++ b/apps/canvas/widget/canvas/core.jsx
@@ -2,9 +2,28 @@ const { initialShapes, hideUi } = props;
 
 const [hide, setHide] = useState(false);
 
+const [trigger, setTrigger] = useState(false);
+const [canvasData, setCanvasData] = useState(null);
+
+const getDataFromChild = () => {
+  setTrigger(true); // Triggers the effect in the child
+};
+
+const handleGetData = (data) => {
+  setCanvasData(data);
+  setTrigger(false); // Reset the trigger
+};
+
 return (
   <>
-    <button onClick={() => setHide(!hide)}>Toggle UI</button>
-    <Canvas initialShapes={initialShapes} hideUi={hide} />
+    <button onClick={getDataFromChild}>Get Data From Child</button>
+    {canvasData && <p>Data from child: {canvasData}</p>}
+    <Canvas
+      initialShapes={initialShapes}
+      hideUi={hide}
+      handleChangeEvent={onChange}
+      trigger={trigger}
+      onGetData={handleGetData}
+    />
   </>
 );
diff --git a/apps/canvas/widget/canvas/view.jsx b/apps/canvas/widget/canvas/view.jsx
index be0ad806..6ae3ef7f 100644
--- a/apps/canvas/widget/canvas/view.jsx
+++ b/apps/canvas/widget/canvas/view.jsx
@@ -1,37 +1,42 @@
 const { value } = props;
 
-const indices = Social.index(
-  "post",
-  {
-    // thing
-    type: "thing",
-    path: "efiz.near/thing/draw", // this is the page??
-  },
-  {
-    order: "desc",
-    limit: 100, // this needs to adjust based on slider
-    // accountId: props.accounts, // undefined
-  }
-);
+const indices = Social.index("post", "main", {
+  order: "desc",
+  limit: 100, // this needs to adjust based on slider
+  // accountId: props.accounts, // undefined
+});
 
 if (!indices) {
   return <p>Loading...</p>;
 }
 
-const drawings = indices
-  .map((it) => {
-    const path = `${it.accountId}/post/main`;
-    const blockHeight = it.blockHeight;
+const offsetX = 100; // Horizontal offset for each text shape
+const offsetY = 100; // Vertical offset for each text shape
+let x = 0; // Initial X position
+let y = 0; // Initial Y position
+
+const drawings = indices.map((it, index) => {
+  const path = `${it.accountId}/post/main`;
+  const blockHeight = it.blockHeight;
+
+  x += offsetX;
+  y += offsetY;
 
-    const val = JSON.parse(Social.get(path, blockHeight) || "null");
-    return val.content.shapes ? val.content.shapes : [];
-  })
-  .flat();
+  const val = JSON.parse(Social.get(path, blockHeight) || "null");
+  return {
+    id: `shape:${path}${blockHeight}`,
+    type: "text",
+    x,
+    y,
+    props: { text: val.text, align: "start", size: "s" },
+  };
+});
 
 if (drawings.length === 0) {
   return <p>No drawings yet!</p>;
 }
 
+// return <p>{JSON.stringify(drawings)}</p>
 return (
   <div style={{ width: "100%", height: "100%" }}>
     <Widget
diff --git a/functions/[[accountId]]/widget/[[index]].js b/functions/[[accountId]]/widget/[[index]].js
index 1ab0ded5..a3768288 100644
--- a/functions/[[accountId]]/widget/[[index]].js
+++ b/functions/[[accountId]]/widget/[[index]].js
@@ -77,7 +77,7 @@ class NoscriptDescriptionInjector {
 
 function defaultData() {
   const image = "https://nearbuilders.org/assets/logo.png";
-  const title = "Build DAO";
+  const title = "Canvas";
   const description =
     "Support Systems for Open Web Developers";
   return {
diff --git a/public/index.html b/public/index.html
index b0d4af7c..d4381c2c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,9 +19,9 @@
     <meta name="twitter:site" content="@NearBuilders">
     <meta property="og:image" content="https://nearbuilders.org/app.png">
     <meta property="og:type" content="website">
-    <meta property="og:title" content="Build DAO" />
-    <meta property="og:description" content="Support Systems for Open Web Developers" />
-    <title>Build DAO</title>
+    <meta property="og:title" content="Canvas" />
+    <meta property="og:description" content="Collaborate on anything and everything" />
+    <title>Canvas</title>
   </head>
   <body>
     <noscript style="white-space: pre; font-family: monospace">
diff --git a/public/manifest.json b/public/manifest.json
index e8c81d47..cf35f6c0 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "BDAO",
-  "name": "Build DAO",
+  "short_name": "CANVAS",
+  "name": "Canvas",
   "icons": [
     {
       "src": "app.png",
diff --git a/public/site.webmanifest b/public/site.webmanifest
index e8c81d47..cf35f6c0 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -1,6 +1,6 @@
 {
-  "short_name": "BDAO",
-  "name": "Build DAO",
+  "short_name": "CANVAS",
+  "name": "Canvas",
   "icons": [
     {
       "src": "app.png",
diff --git a/src/components/custom/Canvas.js b/src/components/custom/Canvas.js
index 4dd8338f..d9a568d3 100644
--- a/src/components/custom/Canvas.js
+++ b/src/components/custom/Canvas.js
@@ -1,4 +1,4 @@
-import { Tldraw, track, Canvas, useEditor } from "@tldraw/tldraw";
+import { Canvas, Tldraw } from "@tldraw/tldraw";
 import React, { useCallback, useEffect, useState } from "react";
 
 function EverythingCanvas(props) {
@@ -15,6 +15,10 @@ function EverythingCanvas(props) {
       editor.on("change", (change) => props.handleChangeEvent(change));
     }
 
+    if (props.initialSnapshot) {
+      editor.store.loadSnapshot(props.initialSnapshot);
+    }
+
     if (props.initialShapes) {
       editor.createShapes(props.initialShapes);
     }
@@ -26,56 +30,13 @@ function EverythingCanvas(props) {
     };
   }, [editor]);
 
-  const handleUiEvent = useCallback((name, data) => {
-    if (props.handleUiEvent) {
-      props.handleUiEvent(name, data);
-    }
-  }, []);
-
-  const CustomUi = track(() => {
-    const editor = useEditor();
-
-    if (props.Custom) {
-      const Custom = props.Custom;
-      return (
-        <div className="custom-layout">
-          <div className="custom-toolbar">
-            <Custom
-              selectedShapeIds={editor.selectedShapeIds}
-              selectedShapes={editor.getContentFromCurrentPage(
-                editor.selectedShapeIds
-              )}
-              deleteShapes={(v) => editor.deleteShapes(v)}
-              createShapes={(v) => editor.createShapes(v)}
-              setReadOnly={(isReadonly) => editor.updateInstanceState({ isReadonly })}
-            />
-          </div>
-        </div>
-      );
+  useEffect(() => {
+    if (props.trigger) {
+      const snapshot = editor.store.getSnapshot();
+      const stringified = JSON.stringify(snapshot);
+      props.onGetData(stringified);
     }
-
-    return (
-      <div className="custom-layout">
-        <div className="custom-toolbar">
-          <button
-            className="custom-button"
-            data-isactive={editor.currentToolId === "select"}
-            onClick={() => {
-              if (props.handlePublish) {
-                props.handlePublish(
-                  // Do something with the selection of shapes
-                  editor.getContentFromCurrentPage(editor.selectedShapeIds)
-                );
-              }
-              // editor.setCurrentTool('select')
-            }}
-          >
-            Publish
-          </button>
-        </div>
-      </div>
-    );
-  });
+  }, [props.trigger, props.onGetData]);
 
   return (
     <Tldraw
@@ -83,10 +44,8 @@ function EverythingCanvas(props) {
       autoFocus={props.autoFocus}
       hideUi={props.hideUi}
       onMount={setAppToState}
-      onUiEvent={handleUiEvent}
     >
       <Canvas />
-      <CustomUi />
     </Tldraw>
   );
 }