feat: canvas core

near-everything · Nov 9, 2023 · ad9684e · ad9684e
1 parent cb92170
commit ad9684e
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 83 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,67 +30,22 @@ 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
       persistenceKey={props.persistenceKey}
       autoFocus={props.autoFocus}
       hideUi={props.hideUi}
       onMount={setAppToState}
-      onUiEvent={handleUiEvent}
     >
       <Canvas />
-      <CustomUi />
     </Tldraw>
   );
 }