Canvas: Edit/Deploy mode
Change-Id: I51e5b6c2a1f06009433b0d0824ffcf3dfe39d34e
diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index 715f878..fbb1be7 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -1,15 +1,14 @@
import { Button } from "@/components/ui/button";
-import { ReactFlowInstance, useReactFlow } from "@xyflow/react";
import { v4 as uuidv4 } from "uuid";
import { useCallback, useState } from "react";
import { Accordion, AccordionTrigger } from "./ui/accordion";
import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
-import { NodeType, useCategories } from "@/lib/state";
+import { AppNode, AppState, NodeType, useCategories, useStateStore } from "@/lib/state";
import { CategoryItem } from "@/lib/categories";
import { Icon } from "./icon";
-function addResource(i: CategoryItem<NodeType>, flow: ReactFlowInstance) {
- flow.addNodes({
+function addResource(i: CategoryItem<NodeType>, store: AppState) {
+ const node = {
id: uuidv4(),
position: {
x: 0,
@@ -18,17 +17,24 @@
type: i.type,
connectable: true,
data: i.init,
- });
+ selected: true,
+ };
+ const nodes = store.nodes.map((n) => ({
+ ...n,
+ selected: false,
+ }));
+ nodes.push(node as AppNode);
+ store.setNodes(nodes);
}
export function Resources() {
- const flow = useReactFlow();
+ const store = useStateStore();
const categories = useCategories();
const onResourceAdd = useCallback(
(item: CategoryItem<NodeType>) => {
- return () => addResource(item, flow);
+ return () => addResource(item, store);
},
- [flow],
+ [store],
);
const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
return (
@@ -39,7 +45,7 @@
<AccordionTrigger>{c.title}</AccordionTrigger>
<AccordionContent>
<div className="flex flex-col space-y-1">
- {c.items.map((item) => (
+ {c.items.map((item: CategoryItem<NodeType>) => (
<Button
key={item.title}
onClick={onResourceAdd(item)}