Canvas: build application infrastructure with drag and drop
Change-Id: I5cfd12e67794f3376c5c025af29470d52d77cf16
diff --git a/apps/canvas/src/Config.tsx b/apps/canvas/src/Config.tsx
new file mode 100644
index 0000000..23a3254
--- /dev/null
+++ b/apps/canvas/src/Config.tsx
@@ -0,0 +1,23 @@
+import { useNodes } from "@xyflow/react";
+import { AppNode, useEnv } from "./lib/state";
+import { generateDodoConfig } from "./lib/config";
+import { useEffect, useMemo, useState } from "react";
+
+export function Config() {
+ const env = useEnv();
+ const [nodes, setNodes] = useState<AppNode[]>([]);
+ const n = useNodes<AppNode>();
+ useEffect(() => {
+ console.log(n);
+ if (n && n.length > 0) {
+ setNodes(n);
+ }
+ }, [n, setNodes]);
+ const config = useMemo(() => generateDodoConfig(nodes, env), [nodes, env]);
+ const configS = useMemo(() => JSON.stringify(config, undefined, 4), [config]);
+ return (
+ <div className="px-5">
+ <pre>{configS}</pre>
+ </div>
+ )
+}
\ No newline at end of file