@arronqzy/react-blueprint 1.0.7 → 1.0.9

package/src/hooks/useBlueprintPageLifecycle.ts

@@ -1,12 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   BlueprintGraphRunner,
+  collectArmedViewEventNodeIds,
   detectBlueprintReferenceCycle,
+  EVENT_NODE_TYPE,
+  LIFECYCLE_NODE_TYPE,
   type LibraryBlueprintResolver,
   type PageLifecyclePhase,
+  type ViewEventSignal,
 } from "@arronqzy/blueprint-dsl";
 
 import type { BlueprintGraph } from "../graph/blueprint-graph";
+import { resolveRunnableNodeType } from "../graph/document";
 import { documentToRunnableGraph } from "../runtime/document-to-runnable-graph";
 
 const PAGE_BOOT_PHASES: PageLifecyclePhase[] = [
@@ -96,12 +101,30 @@ function createRunner(graph: BlueprintGraph, options: RunnerOptions) {
   );
 }
 
+function collectArmedIds(
+  graph: BlueprintGraph,
+  firedPhases: ReadonlySet<string>
+) {
+  return collectArmedViewEventNodeIds(
+    graph.document.nodes.map((node) => ({
+      id: node.id,
+      nodeType: resolveRunnableNodeType(node),
+      lifecyclePhase: node.lifecyclePhase,
+    })),
+    graph.document.edges,
+    EVENT_NODE_TYPE,
+    LIFECYCLE_NODE_TYPE,
+    firedPhases
+  );
+}
+
 async function emitPhases(
   graph: BlueprintGraph,
   phases: PageLifecyclePhase[],
-  options: RunnerOptions
-) {
-  if (!phases.length) return;
+  options: RunnerOptions,
+  onPhaseFired?: (phase: PageLifecyclePhase) => void
+): Promise<boolean> {
+  if (!phases.length) return true;
 
   if (options.resolveLibraryBlueprint) {
     const result = await detectBlueprintReferenceCycle({
@@ -115,14 +138,16 @@ async function emitPhases(
     });
     if (!result.ok) {
       options.onExecutionBlocked?.(result.message);
-      return;
+      return false;
     }
   }
 
   const runner = createRunner(graph, options);
   for (const phase of phases) {
     await runner.emitLifecycle(phase);
+    onPhaseFired?.(phase);
   }
+  return true;
 }
 
 /**
@@ -164,37 +189,64 @@ export function useBlueprintPageLifecycle({
   const bootPhasesKey = bootPhases.join("|");
   const bootTrigger = bootKey ?? "__initial__";
   const [bootCompleted, setBootCompleted] = useState(false);
+  const [firedLifecyclePhases, setFiredLifecyclePhases] = useState<
+    ReadonlySet<PageLifecyclePhase>
+  >(() => new Set());
+  const firedLifecyclePhasesRef = useRef(firedLifecyclePhases);
+  firedLifecyclePhasesRef.current = firedLifecyclePhases;
   const hadBootRef = useRef(false);
   const activeRef = useRef(active);
   activeRef.current = active;
   const prevActiveRef = useRef<boolean | undefined>(undefined);
 
+  const resetFiredPhases = useCallback(() => {
+    setFiredLifecyclePhases(new Set());
+  }, []);
+
+  const markPhaseFired = useCallback((phase: PageLifecyclePhase) => {
+    setFiredLifecyclePhases((prev) => {
+      if (prev.has(phase)) return prev;
+      const next = new Set(prev);
+      next.add(phase);
+      return next;
+    });
+  }, []);
+
   useEffect(() => {
     if (!enabled) {
       setBootCompleted(false);
+      resetFiredPhases();
       return;
     }
 
     let cancelled = false;
 
     const runBoot = async () => {
+      resetFiredPhases();
       if (waitForPageReady) {
         await waitForPagePaint();
       }
       if (cancelled) return;
 
-      await emitPhases(
+      const bootOk = await emitPhases(
         graphRef.current,
         bootPhases,
-        runnerOptionsRef.current
+        runnerOptionsRef.current,
+        (phase) => {
+          if (!cancelled) markPhaseFired(phase);
+        }
       );
       if (cancelled) return;
+      if (!bootOk) return;
 
       if (activeRef.current) {
         await emitPhases(
           graphRef.current,
           ["activated"],
-          runnerOptionsRef.current
+          runnerOptionsRef.current,
+          (phase) => {
+            if (!cancelled) markPhaseFired(phase);
+          }
         );
       }
       if (cancelled) return;
@@ -209,6 +261,7 @@ export function useBlueprintPageLifecycle({
     return () => {
       cancelled = true;
       setBootCompleted(false);
+      resetFiredPhases();
       prevActiveRef.current = undefined;
       if (hadBootRef.current) {
         hadBootRef.current = false;
@@ -219,7 +272,14 @@ export function useBlueprintPageLifecycle({
         );
       }
     };
-  }, [bootPhasesKey, bootTrigger, enabled, waitForPageReady]);
+  }, [
+    bootPhasesKey,
+    bootTrigger,
+    enabled,
+    waitForPageReady,
+    markPhaseFired,
+    resetFiredPhases,
+  ]);
 
   useEffect(() => {
     if (!enabled || !bootCompleted) return;
@@ -231,17 +291,24 @@ export function useBlueprintPageLifecycle({
     }
     prevActiveRef.current = active;
 
+    const phase: PageLifecyclePhase = active ? "activated" : "deactivated";
     void emitPhases(
       graphRef.current,
-      [active ? "activated" : "deactivated"],
-      runnerOptionsRef.current
+      [phase],
+      runnerOptionsRef.current,
+      markPhaseFired
     );
-  }, [active, bootCompleted, enabled]);
+  }, [active, bootCompleted, enabled, markPhaseFired]);
 
   useEffect(() => {
     if (!enabled || !bootCompleted) return;
-    void emitPhases(graphRef.current, ["updated"], runnerOptionsRef.current);
-  }, [bootCompleted, enabled, onUpdated]);
+    void emitPhases(
+      graphRef.current,
+      ["updated"],
+      runnerOptionsRef.current,
+      markPhaseFired
+    );
+  }, [bootCompleted, enabled, onUpdated, markPhaseFired]);
 
   const triggerBlueprintNode = useCallback(
     async (nodeId: string, inputValue?: unknown) => {
@@ -269,5 +336,30 @@ export function useBlueprintPageLifecycle({
     []
   );
 
-  return { triggerBlueprintNode };
+  const emitViewEvent = useCallback(async (payload: ViewEventSignal) => {
+    if (!payload?.node?.id || !payload.eventType) return;
+    const opts = runnerOptionsRef.current;
+    if (opts.resolveLibraryBlueprint) {
+      const result = await detectBlueprintReferenceCycle({
+        rootGraph: documentToRunnableGraph(graphRef.current.document, {
+          libraryNameById: opts.libraryNameById,
+        }),
+        rootLibraryBlueprintId: opts.rootLibraryBlueprintId,
+        resolveLibraryBlueprint: opts.resolveLibraryBlueprint,
+        resolveBlueprintName: (libId) =>
+          resolveBlueprintName(opts.libraryNameById, libId),
+      });
+      if (!result.ok) {
+        opts.onExecutionBlocked?.(result.message);
+        return;
+      }
+    }
+    const runner = createRunner(graphRef.current, opts);
+    await runner.emitViewEvent(
+      payload,
+      collectArmedIds(graphRef.current, firedLifecyclePhasesRef.current)
+    );
+  }, []);
+
+  return { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases };
 }

package/src/index.tsx

@@ -84,6 +84,7 @@ function BlueprintCanvas({
     onEdgesChange,
     onNodeDragStop,
     onConnect,
+    onConnectEnd,
     isValidConnection,
   } = useBlueprintFlowState({
     graph,
@@ -198,6 +199,7 @@ function BlueprintCanvas({
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
+        onConnectEnd={onConnectEnd}
         isValidConnection={isValidConnection}
         onPaneContextMenu={onPaneContextMenu}
         onNodeContextMenu={onNodeContextMenu}

package/src/nodes/BlueprintNodeCard.tsx

@@ -9,7 +9,7 @@ export type BlueprintNodeCardProps = {
   subtitle?: string;
   /** 调试执行进度（如时钟 2/3） */
   progressLabel?: string;
-  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "clock";
   selected?: boolean;
   hideLeadingDot?: boolean;
   onSelect?: (nodeId: string) => void;
@@ -36,6 +36,11 @@ const variantStyle = {
     badge: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
     dot: "bg-amber-500",
   },
+  event: {
+    accent: "border-l-fuchsia-500 dark:border-l-fuchsia-400",
+    badge: "bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300",
+    dot: "bg-fuchsia-500",
+  },
   fetch: {
     accent: "border-l-violet-500 dark:border-l-violet-400",
     badge: "bg-violet-500/10 text-violet-700 dark:text-violet-300",
@@ -92,7 +97,12 @@ export function BlueprintNodeCard({
         "bp-node-card w-[168px] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm",
         "transition-[box-shadow,border-color] duration-150",
         hideLeadingDot
-          ? "border-t-[3px] border-t-amber-500 dark:border-t-amber-400"
+          ? cn(
+              "border-t-[3px]",
+              variant === "event"
+                ? "border-t-fuchsia-500 dark:border-t-fuchsia-400"
+                : "border-t-amber-500 dark:border-t-amber-400"
+            )
           : cn("border-l-[3px]", v.accent),
         selected &&
           "border-primary/50 shadow-[0_0_0_1px_hsl(var(--primary)/0.35),0_4px_12px_hsl(var(--primary)/0.12)]"

package/src/nodes/BlueprintNodeShell.tsx

@@ -10,12 +10,16 @@ export type BlueprintNodeShellProps = BlueprintNodeCardProps & {
   selected?: boolean;
   /** 调试执行中当前节点的信号高亮（与用户选中独立） */
   executionTone?: BlueprintNodeExecutionTone | null;
+  targetTitle?: string;
+  sourceTitle?: string;
 };
 
 /** 左进右出的标准节点连线布局 */
 export function BlueprintNodeShell({
   selected = false,
   executionTone = null,
+  targetTitle,
+  sourceTitle,
   ...cardProps
 }: BlueprintNodeShellProps) {
   const { t } = useI18n();
@@ -32,7 +36,7 @@ export function BlueprintNodeShell({
         position={Position.Left}
         id="in"
         className="bp-flow-handle bp-flow-handle--target"
-        title={t("blueprint.node.signalIn")}
+        title={targetTitle ?? t("blueprint.node.signalIn")}
       />
       <BlueprintNodeCard {...cardProps} selected={selected} />
       <Handle
@@ -40,7 +44,7 @@ export function BlueprintNodeShell({
         position={Position.Right}
         id="out"
         className="bp-flow-handle bp-flow-handle--source"
-        title={t("blueprint.node.signalOut")}
+        title={sourceTitle ?? t("blueprint.node.signalOut")}
       />
     </div>
   );

package/src/nodes/EventFlowNode.tsx

@@ -0,0 +1,31 @@
+import { useI18n } from "@arronqzy/i18n/react";
+import type { NodeProps } from "@xyflow/react";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeShell } from "./BlueprintNodeShell";
+
+/** 视图事件节点：输入必须来自生命周期节点，对应阶段触发后注册事件 */
+export function EventFlowNode({ id, data }: NodeProps) {
+  const { t } = useI18n();
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+
+  return (
+    <BlueprintNodeShell
+      nodeId={id}
+      label={nodeData.label}
+      meta={resolveBlueprintNodeTypeLabel(nodeData, t)}
+      subtitle={resolveBlueprintNodeSummary(nodeData, t)}
+      variant="event"
+      selected={Boolean(nodeData.isSelected)}
+      executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+      targetTitle={t("blueprint.node.eventIn")}
+      sourceTitle={t("blueprint.node.eventOut")}
+      onSelect={onSelect}
+    />
+  );
+}

package/src/runtime/document-to-runnable-graph.ts

@@ -36,6 +36,7 @@ export function documentToRunnableGraph(
         jsonConfig: node.jsonConfig,
         logicConfig: node.logicConfig,
         clockConfig: node.clockConfig,
+        eventConfig: node.eventConfig,
         blueprintName: node.libraryBlueprintId
           ? (options?.libraryNameById?.get(node.libraryBlueprintId) ??
             node.label)