@arronqzy/react-blueprint 1.0.0

package/src/blueprint.css

@@ -0,0 +1,321 @@
+/* 画布：与 panel / next-themes 主题一致 */
+.bp-canvas,
+[data-workspace-region="blueprint"] .bp-canvas {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.bp-canvas .react-flow__pane,
+.bp-flow.react-flow__pane {
+  cursor: default;
+}
+
+.bp-canvas .react-flow,
+.bp-flow.react-flow,
+[data-workspace-region="blueprint"] .react-flow {
+  --xy-background-color: transparent;
+  --xy-edge-stroke: #2563eb;
+  --xy-edge-stroke-width: 2.5;
+  --xy-edge-stroke-selected: #1d4ed8;
+  --xy-connectionline-stroke: #2563eb;
+  --xy-connectionline-stroke-width: 2.5;
+  background-color: transparent;
+}
+
+/*
+ * 全局 reset（apps/web style.css、Tailwind preflight）会给 svg 设 max-width:100%，
+ * 导致 React Flow 边线 SVG 坐标系被压扁；连线预览单独有 z-index:1001 所以能看见。
+ */
+.bp-canvas svg.react-flow__connectionline,
+.bp-canvas .react-flow__edges svg,
+.bp-flow svg.react-flow__connectionline,
+.bp-flow .react-flow__edges svg,
+[data-workspace-region="blueprint"] svg.react-flow__connectionline,
+[data-workspace-region="blueprint"] .react-flow__edges svg {
+  display: block;
+  max-width: none !important;
+  max-height: none !important;
+  width: auto !important;
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/*
+ * 边层必须在节点之上：.react-flow__edges 与 .react-flow__nodes 为兄弟节点，
+ * 默认 DOM 顺序下节点后渲染会盖住边；连接线因有 z-index:1001 不受影响。
+ */
+.bp-canvas .react-flow__edges,
+.bp-flow .react-flow__edges,
+[data-workspace-region="blueprint"] .react-flow__edges {
+  z-index: 1000 !important;
+  pointer-events: none;
+}
+
+.bp-canvas .react-flow__nodes,
+.bp-flow .react-flow__nodes,
+[data-workspace-region="blueprint"] .react-flow__nodes {
+  z-index: 0 !important;
+}
+
+.bp-canvas .react-flow__edge,
+.bp-flow .react-flow__edge,
+[data-workspace-region="blueprint"] .react-flow__edge {
+  pointer-events: visibleStroke;
+}
+
+/* 持久边 path：强制描边（覆盖 currentColor / 主题色） */
+.bp-canvas .react-flow__edges path.react-flow__edge-path,
+.bp-canvas .react-flow__edges path.bp-edge-visible,
+.bp-flow .react-flow__edges path.react-flow__edge-path,
+.bp-flow .react-flow__edges path.bp-edge-visible,
+[data-workspace-region="blueprint"] .react-flow__edges path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edges path.bp-edge-visible {
+  fill: none !important;
+  stroke: #2563eb !important;
+  stroke-width: 2.5px !important;
+  opacity: 1 !important;
+}
+
+.bp-canvas .react-flow__edge.selected path.react-flow__edge-path,
+.bp-flow .react-flow__edge.selected path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.selected path.react-flow__edge-path {
+  stroke: #1d4ed8 !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-true path.react-flow__edge-path {
+  stroke: #16a34a !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-false path.react-flow__edge-path {
+  stroke: #dc2626 !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-true .react-flow__arrowhead polyline {
+  stroke: #16a34a;
+  fill: #16a34a;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-false .react-flow__arrowhead polyline {
+  stroke: #dc2626;
+  fill: #dc2626;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path,
+.bp-flow .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-clock-blue path.react-flow__edge-path {
+  stroke: #2563eb !important;
+  stroke-width: 3px !important;
+}
+
+.bp-canvas .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline,
+.bp-flow .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__edge.bp-edge--signal-clock-blue .react-flow__arrowhead polyline {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+.bp-canvas .react-flow__arrowhead polyline,
+.bp-flow .react-flow__arrowhead polyline,
+[data-workspace-region="blueprint"] .react-flow__arrowhead polyline {
+  stroke: #2563eb;
+  fill: #2563eb;
+}
+
+.bp-canvas .react-flow__connection-path,
+.bp-flow .react-flow__connection-path,
+[data-workspace-region="blueprint"] .react-flow__connection-path {
+  fill: none !important;
+  stroke: #2563eb !important;
+  stroke-width: 2.5px !important;
+}
+
+.bp-canvas .react-flow__edge-interaction,
+.bp-flow .react-flow__edge-interaction,
+[data-workspace-region="blueprint"] .react-flow__edge-interaction {
+  pointer-events: stroke;
+  stroke: transparent !important;
+  stroke-opacity: 0 !important;
+  stroke-width: 18px !important;
+}
+
+.bp-canvas .react-flow__edge.selected .react-flow__edge-interaction,
+.bp-flow .react-flow__edge.selected .react-flow__edge-interaction,
+[data-workspace-region="blueprint"] .react-flow__edge.selected .react-flow__edge-interaction {
+  pointer-events: stroke;
+}
+
+/* 节点容器：去掉默认包裹样式 */
+.bp-canvas .react-flow__node,
+.bp-flow .react-flow__node,
+[data-workspace-region="blueprint"] .react-flow__node {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+
+/* 连接点：禁止 transform，避免覆盖 React Flow 的 translate(-50%, -50%) 定位 */
+.bp-canvas .react-flow__handle.bp-flow-handle,
+.bp-flow .react-flow__handle.bp-flow-handle,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle {
+  z-index: 3;
+  width: 10px;
+  height: 10px;
+  min-width: 10px;
+  min-height: 10px;
+  border: 2px solid hsl(var(--background));
+  border-radius: 9999px;
+  background: hsl(var(--muted-foreground) / 0.45);
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle:hover,
+.bp-flow .react-flow__handle.bp-flow-handle:hover,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle:hover {
+  background: hsl(var(--primary));
+  border-color: hsl(var(--background));
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.28);
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--target,
+.bp-flow .react-flow__handle.bp-flow-handle--target,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--target {
+  background: hsl(var(--muted-foreground) / 0.35);
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--source,
+.bp-flow .react-flow__handle.bp-flow-handle--source,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--source {
+  background: hsl(var(--primary) / 0.55);
+}
+
+.bp-node--selected .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.35);
+}
+
+.bp-node--selected .bp-flow-handle--source {
+  background: hsl(var(--primary));
+}
+
+.bp-node--execution-true .bp-node-card {
+  border-color: rgb(22 163 74 / 0.65);
+  box-shadow:
+    0 0 0 1px rgb(22 163 74 / 0.35),
+    0 4px 14px rgb(22 163 74 / 0.18);
+}
+
+.bp-node--execution-true .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.45);
+}
+
+.bp-node--execution-true .bp-flow-handle--source {
+  background: #16a34a;
+}
+
+.bp-node--execution-true .bp-flow-handle--target {
+  background: rgb(22 163 74 / 0.55);
+}
+
+.bp-node--execution-false .bp-node-card {
+  border-color: hsl(var(--destructive) / 0.65);
+  box-shadow:
+    0 0 0 1px hsl(var(--destructive) / 0.4),
+    0 4px 14px hsl(var(--destructive) / 0.16);
+}
+
+.bp-node--execution-false .bp-flow-handle {
+  border-color: hsl(var(--card));
+  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.4);
+}
+
+.bp-node--execution-false .bp-flow-handle--source {
+  background: hsl(var(--destructive));
+}
+
+.bp-node--execution-false .bp-flow-handle--target {
+  background: hsl(var(--destructive) / 0.55);
+}
+
+/* 生命周期节点无输入口：隐藏任何左侧/目标连接点（含旧数据产生的幽灵 handle） */
+.bp-node--lifecycle .react-flow__handle.bp-flow-handle--target,
+.bp-node--lifecycle .react-flow__handle-left,
+.bp-node--lifecycle .react-flow__handle[data-handlepos="left"] {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  opacity: 0 !important;
+}
+
+.bp-canvas .react-flow__handle.bp-flow-handle--signal,
+.bp-flow .react-flow__handle.bp-flow-handle--signal,
+[data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--signal {
+  background: hsl(38 92% 50% / 0.75);
+  width: 8px;
+  height: 8px;
+}
+
+.bp-node--selected .bp-flow-handle--signal {
+  background: hsl(38 92% 50%);
+}
+
+/* 右键菜单 */
+.bp-context-menu {
+  position: fixed;
+  z-index: 10050;
+  min-width: 148px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
+}
+
+.bp-context-menu__item {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  text-align: left;
+  font-size: 12px;
+  color: inherit;
+  cursor: pointer;
+}
+
+.bp-context-menu__item:hover {
+  background: hsl(var(--accent));
+}
+
+.bp-context-menu__item--danger {
+  color: hsl(var(--destructive));
+}
+
+.bp-context-menu__item--danger:hover {
+  background: hsl(var(--destructive) / 0.1);
+}
+
+.bp-context-menu__separator {
+  height: 1px;
+  margin: 4px 0;
+  background: hsl(var(--border));
+}

package/src/blueprintNodeTypes.ts

@@ -0,0 +1,20 @@
+import type { NodeTypes } from "@xyflow/react";
+
+import { BlueprintFlowNode } from "./nodes/BlueprintFlowNode";
+import { AndFlowNode } from "./nodes/AndFlowNode";
+import { ClockFlowNode } from "./nodes/ClockFlowNode";
+import { FetchFlowNode } from "./nodes/FetchFlowNode";
+import { JsonFlowNode } from "./nodes/JsonFlowNode";
+import { LifecycleFlowNode } from "./nodes/LifecycleFlowNode";
+import { LogicFlowNode } from "./nodes/LogicFlowNode";
+
+/** 稳定引用，避免 React Flow 因 nodeTypes 变化反复卸载节点 */
+export const blueprintNodeTypes = {
+  and: AndFlowNode,
+  blueprint: BlueprintFlowNode,
+  clock: ClockFlowNode,
+  fetch: FetchFlowNode,
+  json: JsonFlowNode,
+  logic: LogicFlowNode,
+  lifecycle: LifecycleFlowNode,
+} satisfies NodeTypes;