Canvas: Add new nodes at random positions
Change-Id: I17ba195065bf8c2f7d1eea2091793766f0e0ac65
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index b7fe986..d64f81f 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -2,7 +2,15 @@
import { CreateValidators, Validator } from "./config";
import { GitHubService, GitHubServiceImpl } from "./github";
import type { Edge, Node, OnConnect, OnEdgesChange, OnNodesChange } from "@xyflow/react";
-import { addEdge, applyEdgeChanges, applyNodeChanges, Connection, EdgeChange, useNodes } from "@xyflow/react";
+import {
+ addEdge,
+ applyEdgeChanges,
+ applyNodeChanges,
+ Connection,
+ EdgeChange,
+ useNodes,
+ XYPosition,
+} from "@xyflow/react";
import type { DeepPartial } from "react-hook-form";
import { v4 as uuidv4 } from "uuid";
import { z } from "zod";
@@ -355,6 +363,14 @@
type NodeUpdate<T extends NodeType> = DeepPartial<Extract<AppNode, { type: T }>>;
type NodeDataUpdate<T extends NodeType> = DeepPartial<Extract<AppNode, { type: T }>["data"]>;
+type Viewport = {
+ transformX: number;
+ transformY: number;
+ transformZoom: number;
+ width: number;
+ height: number;
+};
+
export type AppState = {
projectId: string | undefined;
mode: "edit" | "deploy";
@@ -364,11 +380,14 @@
categories: Category[];
messages: Message[];
env: Env;
+ viewport: Viewport;
+ setViewport: (viewport: Viewport) => void;
githubService: GitHubService | null;
setHighlightCategory: (name: string, active: boolean) => void;
onNodesChange: OnNodesChange<AppNode>;
onEdgesChange: OnEdgesChange;
onConnect: OnConnect;
+ addNode: (node: Omit<AppNode, "position">) => void;
setNodes: (nodes: AppNode[]) => void;
setEdges: (edges: Edge[]) => void;
setProject: (projectId: string | undefined) => Promise<void>;
@@ -384,6 +403,11 @@
const messagesSelector = (state: AppState) => state.messages;
const githubServiceSelector = (state: AppState) => state.githubService;
const envSelector = (state: AppState) => state.env;
+const dimensionsSelector = (state: AppState) => state.dimensions;
+
+export function useDimensions(): Dimensions {
+ return useStateStore(dimensionsSelector);
+}
export function useProjectId(): string | undefined {
return useStateStore(projectIdSelector);
@@ -419,6 +443,18 @@
const v: Validator = CreateValidators();
+function getRandomPosition({ width, height, transformX, transformY, transformZoom }: Viewport): XYPosition {
+ const zoomMultiplier = 1 / transformZoom;
+ const realWidth = width * zoomMultiplier;
+ const realHeight = height * zoomMultiplier;
+ const paddingMultiplier = 0.8;
+ const ret = {
+ x: -transformX * zoomMultiplier + Math.random() * realWidth * paddingMultiplier,
+ y: -transformY * zoomMultiplier + Math.random() * realHeight * paddingMultiplier,
+ };
+ return ret;
+}
+
export const useStateStore = create<AppState>((set, get): AppState => {
const setN = (nodes: AppNode[]) => {
if (nodes.length == 0) {
@@ -626,7 +662,26 @@
categories: defaultCategories,
messages: v([]),
env: defaultEnv,
+ viewport: {
+ transformX: 0,
+ transformY: 0,
+ transformZoom: 1,
+ width: 800,
+ height: 600,
+ },
githubService: null,
+ setViewport: (viewport) => {
+ const { viewport: vp } = get();
+ if (
+ viewport.transformX !== vp.transformX ||
+ viewport.transformY !== vp.transformY ||
+ viewport.transformZoom !== vp.transformZoom ||
+ viewport.width !== vp.width ||
+ viewport.height !== vp.height
+ ) {
+ set({ viewport });
+ }
+ },
setHighlightCategory: (name, active) => {
set({
categories: get().categories.map((c) => {
@@ -650,6 +705,15 @@
edges: applyEdgeChanges(changes, get().edges),
});
},
+ addNode: (node) => {
+ const { viewport, nodes } = get();
+ setN(
+ nodes.concat({
+ ...node,
+ position: getRandomPosition(viewport),
+ }),
+ );
+ },
setNodes: (nodes) => {
setN(nodes);
},
@@ -705,7 +769,25 @@
console.error("Failed to fetch integrations:", error);
} finally {
if (JSON.stringify(get().env) !== JSON.stringify(env)) {
+ console.log(env);
set({ env });
+ const newNetworks = env.networks.filter(
+ (x) => !get().nodes.some((n) => n.type === "network" && n.data.domain === x.domain),
+ );
+ newNetworks.forEach((n) => {
+ get().addNode({
+ id: n.domain,
+ type: "network",
+ connectable: true,
+ data: {
+ domain: n.domain,
+ label: n.domain,
+ envVars: [],
+ ports: [],
+ state: "success", // TODO(gio): monitor network health
+ },
+ });
+ });
if (env.integrations.github) {
set({ githubService: new GitHubServiceImpl(projectId!) });