@arronqzy/react-blueprint 1.0.0

package/src/fetch-config-task-store.ts

@@ -0,0 +1,197 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+import type {
+  FetchRequestConfig,
+  FetchResultValue,
+  ParsedSwaggerDocument,
+} from "@arronqzy/blueprint-dsl";
+import { executeFetch } from "@arronqzy/blueprint-dsl";
+
+import { loadSwaggerDocument } from "./library/swagger-docs";
+
+export type SwaggerLoadTaskStatus = "idle" | "loading" | "error";
+
+export type SwaggerLoadTaskRecord = {
+  status: SwaggerLoadTaskStatus;
+  error?: string | null;
+};
+
+type TaskEntry = {
+  record: SwaggerLoadTaskRecord;
+  abortController: AbortController;
+};
+
+const IDLE_SWAGGER_LOAD_TASK: SwaggerLoadTaskRecord = { status: "idle" };
+const LOADING_SWAGGER_LOAD_TASK: SwaggerLoadTaskRecord = { status: "loading" };
+
+const swaggerTasks = new Map<string, TaskEntry>();
+const fetchDebugTasks = new Map<string, FetchDebugTaskEntry>();
+const listeners = new Set<() => void>();
+
+export type FetchDebugTaskStatus = "idle" | "loading" | "success" | "error";
+
+export type FetchDebugTaskRecord = {
+  status: FetchDebugTaskStatus;
+  result?: FetchResultValue;
+  error?: string | null;
+};
+
+type FetchDebugTaskEntry = {
+  record: FetchDebugTaskRecord;
+  abortController: AbortController;
+};
+
+const IDLE_FETCH_DEBUG_TASK: FetchDebugTaskRecord = { status: "idle" };
+const LOADING_FETCH_DEBUG_TASK: FetchDebugTaskRecord = { status: "loading" };
+
+function emit() {
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeFetchConfigTasks(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function getSwaggerLoadTask(nodeId: string): SwaggerLoadTaskRecord {
+  return swaggerTasks.get(nodeId)?.record ?? IDLE_SWAGGER_LOAD_TASK;
+}
+
+export function getFetchDebugTask(nodeId: string): FetchDebugTaskRecord {
+  return fetchDebugTasks.get(nodeId)?.record ?? IDLE_FETCH_DEBUG_TASK;
+}
+
+export function findActiveSwaggerLoadTaskNodeId(): string | null {
+  for (const [nodeId, task] of swaggerTasks) {
+    if (task.record.status === "loading") return nodeId;
+  }
+  return null;
+}
+
+export function findActiveFetchDebugTaskNodeId(): string | null {
+  for (const [nodeId, task] of fetchDebugTasks) {
+    if (task.record.status === "loading") return nodeId;
+  }
+  return null;
+}
+
+export function findActiveFetchConfigTaskNodeId(): string | null {
+  return findActiveSwaggerLoadTaskNodeId() ?? findActiveFetchDebugTaskNodeId();
+}
+
+export function isSwaggerLoadTaskActive(nodeId: string): boolean {
+  return getSwaggerLoadTask(nodeId).status === "loading";
+}
+
+export function isFetchDebugTaskActive(nodeId: string): boolean {
+  return getFetchDebugTask(nodeId).status === "loading";
+}
+
+export function cancelSwaggerLoadTask(nodeId: string) {
+  const task = swaggerTasks.get(nodeId);
+  if (!task) return;
+  task.abortController.abort();
+  swaggerTasks.delete(nodeId);
+  emit();
+}
+
+export function cancelFetchDebugTask(nodeId: string) {
+  const task = fetchDebugTasks.get(nodeId);
+  if (!task) return;
+  task.abortController.abort();
+  fetchDebugTasks.delete(nodeId);
+  emit();
+}
+
+export function useSwaggerLoadTask(nodeId: string): SwaggerLoadTaskRecord {
+  const getSnapshot = useCallback(() => getSwaggerLoadTask(nodeId), [nodeId]);
+  return useSyncExternalStore(subscribeFetchConfigTasks, getSnapshot, getSnapshot);
+}
+
+export function useFetchDebugTask(nodeId: string): FetchDebugTaskRecord {
+  const getSnapshot = useCallback(() => getFetchDebugTask(nodeId), [nodeId]);
+  return useSyncExternalStore(subscribeFetchConfigTasks, getSnapshot, getSnapshot);
+}
+
+export function startSwaggerLoadTask(params: {
+  nodeId: string;
+  docsUrl: string;
+  onSuccess: (parsed: ParsedSwaggerDocument, docsUrl: string) => void;
+}) {
+  cancelSwaggerLoadTask(params.nodeId);
+
+  const abortController = new AbortController();
+  swaggerTasks.set(params.nodeId, {
+    record: LOADING_SWAGGER_LOAD_TASK,
+    abortController,
+  });
+  emit();
+
+  void (async () => {
+    try {
+      const parsed = await loadSwaggerDocument(params.docsUrl, abortController.signal);
+      if (abortController.signal.aborted) return;
+
+      swaggerTasks.delete(params.nodeId);
+      emit();
+      params.onSuccess(parsed, params.docsUrl);
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        swaggerTasks.delete(params.nodeId);
+        emit();
+        return;
+      }
+
+      const message =
+        error instanceof Error ? error.message : "Swagger 文档解析失败";
+      swaggerTasks.set(params.nodeId, {
+        record: { status: "error", error: message },
+        abortController,
+      });
+      emit();
+    }
+  })();
+}
+
+export function startFetchDebugTask(params: {
+  nodeId: string;
+  config: FetchRequestConfig;
+}) {
+  cancelFetchDebugTask(params.nodeId);
+
+  const abortController = new AbortController();
+  fetchDebugTasks.set(params.nodeId, {
+    record: LOADING_FETCH_DEBUG_TASK,
+    abortController,
+  });
+  emit();
+
+  void (async () => {
+    try {
+      const result = await executeFetch(params.config, {
+        signal: abortController.signal,
+        allowHttpError: true,
+      });
+      if (abortController.signal.aborted) return;
+
+      fetchDebugTasks.set(params.nodeId, {
+        record: { status: "success", result },
+        abortController,
+      });
+      emit();
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        fetchDebugTasks.delete(params.nodeId);
+        emit();
+        return;
+      }
+
+      const message = error instanceof Error ? error.message : "请求失败";
+      fetchDebugTasks.set(params.nodeId, {
+        record: { status: "error", error: message },
+        abortController,
+      });
+      emit();
+    }
+  })();
+}

package/src/flowCoordinates.ts

@@ -0,0 +1,19 @@
+import type { XYPosition } from "@xyflow/react";
+
+import {
+  BP_FLOW_NODE_HEIGHT,
+  BP_FLOW_NODE_WIDTH,
+} from "./graph/react-flow-adapter";
+
+/** 屏幕坐标 → 流程坐标，落点以节点中心对齐光标 */
+export function clientToFlowNodePosition(
+  screenToFlowPosition: (position: XYPosition) => XYPosition,
+  clientX: number,
+  clientY: number
+): XYPosition {
+  const flow = screenToFlowPosition({ x: clientX, y: clientY });
+  return {
+    x: flow.x - BP_FLOW_NODE_WIDTH / 2,
+    y: flow.y - BP_FLOW_NODE_HEIGHT / 2,
+  };
+}

package/src/flowDefaults.ts

@@ -0,0 +1,9 @@
+import type { DefaultEdgeOptions } from "@xyflow/react";
+
+import { BP_EDGE_STYLE, BP_FLOW_EDGE_TYPE } from "./graph/sync-edges";
+
+export const BLUEPRINT_DEFAULT_EDGE_OPTIONS = {
+  type: BP_FLOW_EDGE_TYPE,
+  zIndex: 1000,
+  style: { ...BP_EDGE_STYLE },
+} satisfies DefaultEdgeOptions;

package/src/graph/blueprint-graph.ts

@@ -0,0 +1,261 @@
+import {
+  createBlueprintDocument,
+  createNodeId,
+  defaultBlueprintNodeLabel,
+  filterInvalidBlueprintEdges,
+  patchNodeConfigSource,
+  resolveNodeClockConfig,
+  resolveNodeFetchConfig,
+  resolveNodeJsonConfig,
+  resolveNodeLogicConfig,
+  sanitizeBlueprintDocument,
+  type BlueprintDocument,
+  type BlueprintGraphEdge,
+  type BlueprintGraphNode,
+} from "./document";
+import {
+  BLUEPRINT_NODE_TYPE,
+  DEFAULT_LOGIC_NODE_TYPE,
+  LIFECYCLE_NODE_TYPE,
+} from "./node-types";
+import type { PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
+
+export class BlueprintGraph {
+  readonly document: BlueprintDocument;
+
+  constructor(document: BlueprintDocument = createBlueprintDocument()) {
+    this.document = sanitizeBlueprintDocument(document);
+  }
+
+  static empty(id?: string) {
+    return new BlueprintGraph(sanitizeBlueprintDocument(createBlueprintDocument(id)));
+  }
+
+  static fromDocument(document: BlueprintDocument) {
+    return new BlueprintGraph(document);
+  }
+
+  getNode(nodeId: string): BlueprintGraphNode | undefined {
+    return this.document.nodes.find((n) => n.id === nodeId);
+  }
+
+  addBlueprintNode(position: { x: number; y: number }, label?: string) {
+    const node: BlueprintGraphNode = {
+      id: createNodeId("bp"),
+      role: "blueprint",
+      nodeType: BLUEPRINT_NODE_TYPE,
+      label: label ?? defaultBlueprintNodeLabel("blueprint"),
+      position: { ...position },
+      nestedBlueprintId: createNodeId("nested_bp"),
+    };
+    return this.withDocument({
+      ...this.document,
+      nodes: [...this.document.nodes, node],
+    });
+  }
+
+  addLogicNode(
+    parentBlueprintId: string,
+    position: { x: number; y: number },
+    label?: string
+  ) {
+    const parent = this.getNode(parentBlueprintId);
+    if (!parent || parent.role !== "blueprint") {
+      throw new Error(`Parent blueprint node not found: ${parentBlueprintId}`);
+    }
+
+    const node: BlueprintGraphNode = {
+      id: createNodeId("logic"),
+      role: "logic",
+      nodeType: DEFAULT_LOGIC_NODE_TYPE,
+      label: label ?? defaultBlueprintNodeLabel("logic"),
+      position: { ...position },
+      parentId: parentBlueprintId,
+    };
+
+    return this.withDocument({
+      ...this.document,
+      nodes: [...this.document.nodes, node],
+    });
+  }
+
+  addLifecycleNode(
+    parentBlueprintId: string,
+    position: { x: number; y: number },
+    lifecyclePhase: PageLifecyclePhase = "mounted",
+    label?: string
+  ) {
+    const parent = this.getNode(parentBlueprintId);
+    if (!parent || parent.role !== "blueprint") {
+      throw new Error(`Parent blueprint node not found: ${parentBlueprintId}`);
+    }
+
+    const node: BlueprintGraphNode = {
+      id: createNodeId("lifecycle"),
+      role: "lifecycle",
+      nodeType: LIFECYCLE_NODE_TYPE,
+      label: label ?? defaultBlueprintNodeLabel("lifecycle"),
+      position: { ...position },
+      parentId: parentBlueprintId,
+      lifecyclePhase,
+      configSource: "lifecycle",
+    };
+
+    return this.withDocument({
+      ...this.document,
+      nodes: [...this.document.nodes, node],
+    });
+  }
+
+  removeNode(nodeId: string) {
+    const target = this.getNode(nodeId);
+    if (!target) return this;
+
+    const removeIds = new Set<string>([nodeId]);
+    if (target.role === "blueprint") {
+      for (const n of this.document.nodes) {
+        if (n.parentId === nodeId) removeIds.add(n.id);
+      }
+    }
+
+    return this.withDocument({
+      ...this.document,
+      nodes: this.document.nodes.filter((n) => !removeIds.has(n.id)),
+      edges: this.document.edges.filter(
+        (e) => !removeIds.has(e.source) && !removeIds.has(e.target)
+      ),
+    });
+  }
+
+  updateNodePosition(nodeId: string, position: { x: number; y: number }) {
+    return this.withDocument({
+      ...this.document,
+      nodes: this.document.nodes.map((n) =>
+        n.id === nodeId ? { ...n, position: { ...position } } : n
+      ),
+    });
+  }
+
+  applyNodePositions(
+    updates: Array<{ id: string; position: { x: number; y: number } }>
+  ) {
+    if (updates.length === 0) return this;
+    const positionById = new Map(updates.map((u) => [u.id, u.position]));
+    return this.withDocument({
+      ...this.document,
+      nodes: this.document.nodes.map((n) => {
+        const position = positionById.get(n.id);
+        return position ? { ...n, position: { ...position } } : n;
+      }),
+    });
+  }
+
+  addEdge(edge: Omit<BlueprintGraphEdge, "id"> & { id?: string }) {
+    const nextEdge: BlueprintGraphEdge = {
+      id: edge.id ?? createNodeId("edge"),
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle,
+    };
+    return this.withDocument({
+      ...this.document,
+      edges: [...this.document.edges, nextEdge],
+    });
+  }
+
+  removeEdge(edgeId: string) {
+    if (!this.document.edges.some((e) => e.id === edgeId)) return this;
+    return this.withDocument({
+      ...this.document,
+      edges: this.document.edges.filter((e) => e.id !== edgeId),
+    });
+  }
+
+  replaceEdges(edges: BlueprintGraphEdge[]) {
+    return this.withDocument({
+      ...this.document,
+      edges: filterInvalidBlueprintEdges(this.document, edges),
+    });
+  }
+
+  updateNode(
+    nodeId: string,
+    patch: Partial<
+      Pick<
+        BlueprintGraphNode,
+        | "label"
+        | "role"
+        | "nodeType"
+        | "configSource"
+        | "viewElementId"
+        | "viewElementIds"
+        | "nestedBlueprintId"
+        | "libraryBlueprintId"
+        | "lifecyclePhase"
+        | "fetchConfig"
+        | "jsonConfig"
+        | "logicConfig"
+        | "clockConfig"
+      >
+    >
+  ) {
+    const exists = this.getNode(nodeId);
+    if (!exists) return this;
+
+    const configPatch =
+      patch.configSource && patch.configSource !== exists.configSource
+        ? patchNodeConfigSource(exists, patch.configSource)
+        : {};
+
+    return this.withDocument({
+      ...this.document,
+      nodes: this.document.nodes.map((n) => {
+        if (n.id !== nodeId) return n;
+        const nextNode = { ...n, ...configPatch, ...patch };
+        if (
+          patch.viewElementIds !== undefined ||
+          patch.viewElementId !== undefined
+        ) {
+          const ids =
+            patch.viewElementIds !== undefined
+              ? [...new Set(patch.viewElementIds.filter(Boolean))]
+              : patch.viewElementId
+                ? [patch.viewElementId]
+                : [];
+          nextNode.viewElementIds = ids.length > 0 ? ids : undefined;
+          nextNode.viewElementId = undefined;
+        }
+        if (patch.fetchConfig) {
+          nextNode.fetchConfig = {
+            ...resolveNodeFetchConfig(n),
+            ...patch.fetchConfig,
+          };
+        }
+        if (patch.jsonConfig) {
+          nextNode.jsonConfig = {
+            ...resolveNodeJsonConfig(n),
+            ...patch.jsonConfig,
+          };
+        }
+        if (patch.logicConfig) {
+          nextNode.logicConfig = {
+            ...resolveNodeLogicConfig(n),
+            ...patch.logicConfig,
+          };
+        }
+        if (patch.clockConfig) {
+          nextNode.clockConfig = {
+            ...resolveNodeClockConfig(n),
+            ...patch.clockConfig,
+          };
+        }
+        return nextNode;
+      }),
+    });
+  }
+
+  withDocument(document: BlueprintDocument) {
+    return new BlueprintGraph(document);
+  }
+}