Merge pull request #66 from ClayPulse/add-canvas

Add edge and stylize canvas node

Author: Shellishack

web/components/interface/navigation/nav-side-menu.tsx

@@ -113,6 +113,11 @@ function PanelContent({
     useState(false);
 
   const tabItems: TabItem[] = [
+    {
+      name: "Projects",
+      description: "List of projects",
+      icon: "folder",
+    },
     {
       name: "Apps",
       description: "List of apps",
@@ -145,27 +150,6 @@ function PanelContent({
       </div>
     );
   }
-  // Pick project if no project is opened
-  else if (!editorContext?.editorStates.project) {
-    return (
-      <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto px-4">
-        <p className="text-center text-lg font-medium">View Projects</p>
-        <Button
-          className="w-full"
-          onPress={() => {
-            setIsProjectSettingsModalOpen(true);
-          }}
-        >
-          New Project
-        </Button>
-        <ProjectExplorer />
-        <ProjectSettingsModal
-          isOpen={isProjectSettingsModalOpen}
-          setIsOpen={setIsProjectSettingsModalOpen}
-        />
-      </div>
-    );
-  }
 
   return (
     <div className="relative h-full w-full grid grid-rows-[max-content_auto] overflow-y-hidden">
@@ -187,10 +171,27 @@ function PanelContent({
       <div className="h-full w-full overflow-y-hidden">
         {tabItems[selectedTabIndex]?.name === "Apps" ? (
           <AppExplorer />
-        ) : (
+        ) : tabItems[selectedTabIndex]?.name === "Workspace" ? (
           <FileSystemExplorer setIsMenuOpen={setIsMenuOpen} />
+        ) : (
+          <div className="bg-content2 h-full w-full space-y-2 overflow-y-auto px-4">
+            <p className="text-center text-lg font-medium">View Projects</p>
+            <Button
+              className="w-full"
+              onPress={() => {
+                setIsProjectSettingsModalOpen(true);
+              }}
+            >
+              New Project
+            </Button>
+            <ProjectExplorer />
+          </div>
         )}
       </div>
+      <ProjectSettingsModal
+        isOpen={isProjectSettingsModalOpen}
+        setIsOpen={setIsProjectSettingsModalOpen}
+      />
     </div>
   );
 }

web/components/views/canvas/canvas-node-control.tsx

@@ -6,35 +6,23 @@ import {
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
+  Background,
+  BackgroundVariant,
+  Connection,
   EdgeChange,
   NodeChange,
   ReactFlow,
   Edge as ReactFlowEdge,
   Node as ReactFlowNode,
+  reconnectEdge,
   useReactFlow,
   useViewport,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Icon from "../../misc/icon";
-import AppNode from "./nodes/app-node";
-
-// const initialNodes = [
-//   {
-//     id: "n1",
-//     position: { x: 200, y: 0 },
-//     data: {
-//       label: "Node 1",
-//       config: {
-//         viewId: v4(),
-//         app: "https://cdn.pulse-editor.com/extension/spin_wheel/0.0.1/",
-//       },
-//     },
-//     type: "appNode",
-//   },
-//   { id: "n2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
-// ];
-// const initialEdges = [{ id: "n1-n2", source: "n1", target: "n2" }];
+import AppNode from "./nodes/app-node/app-node";
+import "./theme.css";
 
 const appInfo: AppInfoModalContent = {
   name: "Pulse Editor",
@@ -71,16 +59,24 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
     setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot));
   }, []);
   const onEdgesChange = useCallback(
-    (changes: EdgeChange<{ id: string; source: string; target: string }>[]) =>
-      setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
+    (changes: EdgeChange<{ id: string; source: string; target: string }>[]) => {
+      console.log("Edge changes:", changes);
+      setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot));
+    },
     [],
   );
   const onConnect = useCallback(
     (params: any) =>
       setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
     [],
   );
+  const onReconnect = useCallback(
+    (oldEdge: ReactFlowEdge, newConnection: Connection) =>
+      setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
+    [],
+  );
 
+  /* Node creator functions */
   const createAppNode = useCallback((props: any) => {
     return <AppNode {...props} />;
   }, []);
@@ -221,7 +217,7 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
   return (
     <div
       ref={containerRef}
-      className="bg-default text-default-foreground relative h-full w-full"
+      className="bg-content3 text-content3-foreground relative h-full w-full"
       id={`canvas-${config?.viewId}`}
     >
       <ReactFlow
@@ -237,7 +233,18 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
         nodeTypes={{
           appNode: createAppNode,
         }}
-      />
+        deleteKeyCode={["Delete", "Backspace"]}
+        onReconnect={onReconnect}
+        defaultEdgeOptions={{
+          markerEnd: {
+            type: "arrowclosed",
+            width: 20,
+            height: 20,
+          },
+        }}
+      >
+        <Background variant={BackgroundVariant.Dots} />
+      </ReactFlow>
       <Button
         isIconOnly
         className="absolute right-2 bottom-2"

web/components/views/canvas/canvas-node-view-layout.tsx

@@ -4,8 +4,8 @@ import { ViewModeEnum } from "@pulse-editor/shared-utils";
 import { Node } from "@xyflow/react";
 import { memo } from "react";
 import { v4 } from "uuid";
-import BaseAppView from "../../base/base-app-view";
-import CanvasNodeViewLayout from "../canvas-node-view-layout";
+import BaseAppView from "../../../base/base-app-view";
+import CanvasNodeViewLayout from "./layout";
 
 const AppNode = memo((props: any) => {
   const nodeProps = props as Node<{ config: AppViewConfig }>;
@@ -24,6 +24,7 @@ const AppNode = memo((props: any) => {
 
   return (
     <CanvasNodeViewLayout
+      viewId={viewId}
       controlActions={{
         fullscreen: () => {
           openViewInFullScreen();