feat: canvas end

near-everything · Nov 9, 2023 · 26726b7 · 26726b7
1 parent 1448610
commit 26726b7
Show file tree

Hide file tree

Showing 17 changed files with 608 additions and 844 deletions.
diff --git a/apps/canvas/widget/app.jsx b/apps/canvas/widget/app.jsx
@@ -0,0 +1,145 @@
+const Container = styled.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+`;
+
+const Panel = styled.div`
+  flex: 1;
+  border: 1px solid black;
+  overflow: hidden;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid black;
+`;
+
+const Select = styled.select``;
+
+const Option = styled.option``;
+
+const Button = styled.button``;
+
+function PanelHeader({ options, onChange }) {
+  return (
+    <Header>
+      <Select onChange={(e) => onChange(e.target.value)}>
+        {options &&
+          options.map((it) => <Option value={it.value}>{it.label}</Option>)}
+      </Select>
+      <Button
+        onClick={() =>
+          Social.set({
+            index: {
+              every: JSON.stringify({
+                key: "thing", // type
+                value: {
+                  src: "efiz.near/widget/Tree",
+                },
+              }),
+            },
+          })
+        }
+      >
+        Publish
+      </Button>
+    </Header>
+  );
+}
+
+const [editorValue, setEditorValue] = useState("");
+const [editorSrc, setEditorSrc] = useState(
+  "/*__@appAccount__*//widget/markdown.edit"
+);
+const [viewerSrc, setViewerSrc] = useState(
+  "/*__@appAccount__*//widget/markdown.view"
+);
+const [selectedItem, setSelectedItem] = useState(null);
+
+function handleEditorSrcChange(value) {
+  setEditorSrc(value);
+}
+
+function handleViewerSrcChange(value) {
+  setViewerSrc(value);
+}
+
+function Editor({ value, setEditorValue }) {
+  return (
+    <Widget
+      src={"/*__@appAccount__*//widget/provider"}
+      props={{
+        path: value,
+        editorValue,
+        blockHeight: "final",
+        setEditorValue,
+        Children: (p) => <Widget src={editorSrc} props={p} />,
+      }}
+    />
+  );
+}
+
+function Viewer({ value }) {
+  return <Widget src={viewerSrc} props={{ value }} />;
+}
+
+function Sidebar() {
+  return (
+    <Widget
+      src="/*__@appAccount__*//widget/sidebar"
+      props={{ handleItemClick: (v) => setSelectedItem(v) }}
+    />
+  );
+}
+
+return (
+  <Container>
+    <Panel style={{ maxWidth: "200px" }}>
+      <Wrapper key={editorSrc}>
+        <Sidebar />
+      </Wrapper>
+    </Panel>
+    <Panel>
+      <PanelHeader
+        options={[
+          {
+            value: "/*__@appAccount__*//widget/markdown.edit",
+            label: "Markdown",
+          },
+          { value: "/*__@appAccount__*//widget/code.edit", label: "Code" },
+          { value: "/*__@appAccount__*//widget/canvas.edit", label: "Canvas" },
+        ]}
+        onChange={handleEditorSrcChange}
+      />
+      <Wrapper key={editorSrc}>
+        <Editor value={selectedItem} setEditorValue={setEditorValue} />
+      </Wrapper>
+    </Panel>
+    <Panel>
+      <PanelHeader
+        options={[
+          {
+            value: "/*__@appAccount__*//widget/markdown.view",
+            label: "Markdown",
+          },
+          { value: "/*__@appAccount__*//widget/code.view", label: "Code" },
+          { value: "/*__@appAccount__*//widget/canvas.view", label: "Canvas" },
+        ]}
+        onChange={handleViewerSrcChange}
+      />
+      <Wrapper key={viewerSrc}>
+        <Viewer value={editorValue} />
+      </Wrapper>
+    </Panel>
+  </Container>
+);
diff --git a/apps/canvas/widget/canvas/app.jsx b/apps/canvas/widget/canvas/app.jsx
@@ -23,10 +23,22 @@ const Content = styled.div`
   align-items: center;
 `;
 
+const [selectedSource, setSelectedSource] = useState("canvas");
+
 return (
   <Container>
-    <Content>
-      <Widget src="/*__@appAccount__*//widget/canvas.view" />
+    <select
+      value={selectedSource}
+      onChange={(e) => setSelectedSource(e.target.value)}
+    >
+      <option value="canvas">canvas</option>
+      <option value="feed">feed</option>
+    </select>
+    <Content key={selectedSource}>
+      <Widget
+        src="/*__@appAccount__*//widget/canvas.view"
+        props={{ selectedSource }}
+      />
     </Content>
   </Container>
 );
diff --git a/apps/canvas/widget/canvas/edit.jsx b/apps/canvas/widget/canvas/edit.jsx
@@ -1,36 +1,32 @@
-const { value, onChange, onSubmit, onCancel } = props;
+const { value, onChange, onSubmit, onCancel, path } = 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 [initialShapes, setInitialShapes] = useState([]);
 
-if (!indices) {
-  return <p>Loading...</p>;
-}
-
-const drawings = indices
-  .map((it) => {
-    const path = `${it.accountId}/post/main`;
-    const blockHeight = it.blockHeight;
+useEffect(() => {
+  if (typeof value === "string") {
+    setInitialShapes([
+      {
+        id: `shape:editor`,
+        type: "text",
+        props: { text: value, align: "start", size: "s" },
+      },
+    ]);
+  }
+}, [value, setInitialShapes]);
 
-    const val = JSON.parse(Social.get(path, blockHeight) || "null");
-    return val.content.shapes ? val.content.shapes : [];
-  })
-  .flat();
+// <button onClick={getDataFromChild}>Get Data From Child</button>;
+// {
+//   canvasData && <p>Data from child: {canvasData}</p>;
+// }
 
 return (
-  <Widget
-    src="/*__@appAccount__*//widget/canvas.core"
-    props={{ initialShapes: drawings }}
-  />
+  <div style={{ display: "flex" }}>
+    <div style={{ width: "60vw", height: "80vh" }}>
+      <Canvas
+        initialShapes={initialShapes}
+        persistanceKey={path}
+        // onSave={handleSave}
+      />
+    </div>
+  </div>
 );
diff --git a/apps/canvas/widget/canvas/view.jsx b/apps/canvas/widget/canvas/view.jsx
@@ -1,47 +1,97 @@
-const { value } = props;
+const { value, onChange, onSubmit, onCancel, selectedSource } = props;
 
-const indices = Social.index("post", "main", {
-  order: "desc",
-  limit: 100, // this needs to adjust based on slider
-  // accountId: props.accounts, // undefined
-});
+let drawings = [];
 
-if (!indices) {
-  return <p>Loading...</p>;
-}
+let indices = [];
+
+if (selectedSource) {
+  switch (selectedSource) {
+    case "canvas":
+      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
+        }
+      );
+
+      if (!indices) {
+        return <p>Loading...</p>;
+      }
+
+      drawings = indices
+        .map((it) => {
+          const path = `${it.accountId}/post/main`;
+          const blockHeight = it.blockHeight;
+
+          const val = JSON.parse(Social.get(path, blockHeight) || "null");
+          return val.content.shapes ? val.content.shapes : [];
+        })
+        .flat();
+      break;
+    case "feed":
+      indices = Social.index("post", "main", {
+        order: "desc",
+        limit: 100, // this needs to adjust based on slider
+        // accountId: props.accounts, // undefined
+      });
 
-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
+      if (!indices) {
+        return <p>Loading...</p>;
+      }
 
-const drawings = indices.map((it, index) => {
-  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
 
-  x += offsetX;
-  y += offsetY;
+      drawings = indices.map((it, index) => {
+        const path = `${it.accountId}/post/main`;
+        const blockHeight = it.blockHeight;
 
-  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" },
-  };
-});
+        x += offsetX;
+        y += offsetY;
+
+        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" },
+        };
+      });
+      break;
+  }
+}
 
 if (drawings.length === 0) {
   return <p>No drawings yet!</p>;
 }
 
-// return <p>{JSON.stringify(drawings)}</p>
+// const [initialShapes, setInitialShapes] = useState([]);
+
+// useEffect(() => {
+//   if (typeof value === "string") {
+//     setInitialShapes([
+//       {
+//         id: `shape:editor`,
+//         type: "text",
+//         props: { text: value, align: "start", size: "s" },
+//       },
+//     ]);
+//   }
+// }, [value, setInitialShapes]);
+
 return (
-  <div style={{ width: "100%", height: "100%" }}>
-    <Widget
-      src="/*__@appAccount__*//widget/canvas.core"
-      props={{ initialShapes: drawings }}
-    />
-  </div>
+  <Widget
+    src="/*__@appAccount__*//widget/canvas.core"
+    props={{ initialShapes: drawings }}
+  />
 );