@arronqzy/vue-blueprint 0.1.0

package/src/composables/useBlueprintPageLifecycle.ts

@@ -0,0 +1,244 @@
+import { onUnmounted, ref, shallowRef, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue";
+import {
+  BlueprintGraphRunner,
+  detectBlueprintReferenceCycle,
+  type LibraryBlueprintResolver,
+  type PageLifecyclePhase,
+} from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraph } from "../graph/blueprint-graph";
+import { documentToRunnableGraph } from "../runtime/document-to-runnable-graph";
+
+const PAGE_BOOT_PHASES: PageLifecyclePhase[] = [
+  "created",
+  "beforeMount",
+  "mounted",
+];
+
+const PAGE_TEARDOWN_PHASES: PageLifecyclePhase[] = [
+  "beforeDestroy",
+  "destroy",
+];
+
+async function waitForPagePaint() {
+  if (document.readyState !== "complete") {
+    await new Promise<void>((resolve) => {
+      window.addEventListener("load", () => resolve(), { once: true });
+    });
+  }
+  await new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+export type UseBlueprintPageLifecycleOptions = {
+  graph: Ref<BlueprintGraph> | BlueprintGraph;
+  active?: Ref<boolean> | boolean;
+  enabled?: Ref<boolean> | boolean;
+  bootPhases?: PageLifecyclePhase[];
+  bootKey?: Ref<unknown> | unknown;
+  waitForPageReady?: boolean;
+  onUpdated?: Ref<unknown> | unknown;
+  resolveLibraryBlueprint?: LibraryBlueprintResolver;
+  libraryNameById?: MaybeRefOrGetter<ReadonlyMap<string, string>>;
+  rootLibraryBlueprintId?: MaybeRefOrGetter<string | null>;
+  onExecutionBlocked?: (message: string) => void;
+  onViewScopeUpdate?: (viewElementIds: string[], scope: unknown) => void;
+};
+
+type RunnerOptions = Pick<
+  UseBlueprintPageLifecycleOptions,
+  | "resolveLibraryBlueprint"
+  | "libraryNameById"
+  | "rootLibraryBlueprintId"
+  | "onExecutionBlocked"
+  | "onViewScopeUpdate"
+>;
+
+function resolveValue<T>(value: Ref<T> | T): T {
+  return value && typeof value === "object" && "value" in value
+    ? (value as Ref<T>).value
+    : (value as T);
+}
+
+function resolveBlueprintName(
+  libraryNameById: ReadonlyMap<string, string> | undefined,
+  id: string
+) {
+  return libraryNameById?.get(id) ?? id;
+}
+
+function createRunner(graph: BlueprintGraph, options: RunnerOptions) {
+  const rootLibraryBlueprintId = toValue(options.rootLibraryBlueprintId ?? null);
+  const libraryNameById = toValue(options.libraryNameById);
+  return new BlueprintGraphRunner(
+    documentToRunnableGraph(graph.document, {
+      libraryNameById,
+    }),
+    {
+      resolveLibraryBlueprint: options.resolveLibraryBlueprint,
+      rootLibraryBlueprintId,
+      resolveBlueprintName: (id) =>
+        resolveBlueprintName(libraryNameById, id),
+      onViewScopeUpdate: options.onViewScopeUpdate,
+    }
+  );
+}
+
+async function emitPhases(
+  graph: BlueprintGraph,
+  phases: PageLifecyclePhase[],
+  options: RunnerOptions
+) {
+  if (!phases.length) return;
+
+  const rootLibraryBlueprintId = toValue(options.rootLibraryBlueprintId ?? null);
+  const libraryNameById = toValue(options.libraryNameById);
+
+  if (options.resolveLibraryBlueprint) {
+    const result = await detectBlueprintReferenceCycle({
+      rootGraph: documentToRunnableGraph(graph.document, {
+        libraryNameById,
+      }),
+      rootLibraryBlueprintId,
+      resolveLibraryBlueprint: options.resolveLibraryBlueprint,
+      resolveBlueprintName: (id) =>
+        resolveBlueprintName(libraryNameById, id),
+    });
+    if (!result.ok) {
+      options.onExecutionBlocked?.(result.message);
+      return;
+    }
+  }
+
+  const runner = createRunner(graph, options);
+  for (const phase of phases) {
+    await runner.emitLifecycle(phase);
+  }
+}
+
+export function useBlueprintPageLifecycle(options: UseBlueprintPageLifecycleOptions) {
+  const graphRef = shallowRef(resolveValue(options.graph));
+  const runnerOptionsRef = shallowRef<RunnerOptions>({
+    resolveLibraryBlueprint: options.resolveLibraryBlueprint,
+    libraryNameById: options.libraryNameById,
+    rootLibraryBlueprintId: options.rootLibraryBlueprintId,
+    onExecutionBlocked: options.onExecutionBlocked,
+    onViewScopeUpdate: options.onViewScopeUpdate,
+  });
+
+  const bootPhases = options.bootPhases ?? PAGE_BOOT_PHASES;
+  const bootPhasesKey = bootPhases.join("|");
+  const bootTrigger = options.bootKey ?? "__initial__";
+  const bootCompleted = ref(false);
+  const hadBoot = ref(false);
+  const prevActive = ref<boolean | undefined>(undefined);
+  let bootCancelled = false;
+
+  watch(
+    () => resolveValue(options.graph),
+    (next) => {
+      graphRef.value = next;
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => ({
+      resolveLibraryBlueprint: options.resolveLibraryBlueprint,
+      libraryNameById: options.libraryNameById,
+      rootLibraryBlueprintId: options.rootLibraryBlueprintId,
+      onExecutionBlocked: options.onExecutionBlocked,
+      onViewScopeUpdate: options.onViewScopeUpdate,
+    }),
+    (next) => {
+      runnerOptionsRef.value = next;
+    },
+    { deep: true }
+  );
+
+  const runBootCycle = async () => {
+    const enabled = resolveValue(options.enabled ?? true);
+    if (!enabled) {
+      bootCompleted.value = false;
+      return;
+    }
+
+    bootCancelled = false;
+    const waitForPageReady = options.waitForPageReady ?? false;
+
+    if (waitForPageReady) {
+      await waitForPagePaint();
+    }
+    if (bootCancelled) return;
+
+    await emitPhases(graphRef.value, bootPhases, runnerOptionsRef.value);
+    if (bootCancelled) return;
+
+    const active = resolveValue(options.active ?? true);
+    if (active) {
+      await emitPhases(graphRef.value, ["activated"], runnerOptionsRef.value);
+    }
+    if (bootCancelled) return;
+
+    hadBoot.value = true;
+    prevActive.value = active;
+    bootCompleted.value = true;
+  };
+
+  const teardownBoot = () => {
+    bootCancelled = true;
+    bootCompleted.value = false;
+    prevActive.value = undefined;
+    if (hadBoot.value) {
+      hadBoot.value = false;
+      void emitPhases(graphRef.value, PAGE_TEARDOWN_PHASES, runnerOptionsRef.value);
+    }
+  };
+
+  watch(
+    () => [
+      bootPhasesKey,
+      resolveValue(bootTrigger),
+      resolveValue(options.enabled ?? true),
+      options.waitForPageReady ?? false,
+    ],
+    () => {
+      teardownBoot();
+      void runBootCycle();
+    },
+    { immediate: true }
+  );
+
+  watch(
+    () => [resolveValue(options.active ?? true), bootCompleted.value, resolveValue(options.enabled ?? true)],
+    ([active, completed, enabled]) => {
+      if (!enabled || !completed) return;
+      const prev = prevActive.value;
+      if (prev === undefined || prev === active) {
+        prevActive.value = active;
+        return;
+      }
+      prevActive.value = active;
+      void emitPhases(
+        graphRef.value,
+        [active ? "activated" : "deactivated"],
+        runnerOptionsRef.value
+      );
+    }
+  );
+
+  watch(
+    () => [bootCompleted.value, resolveValue(options.enabled ?? true), resolveValue(options.onUpdated)],
+    ([completed, enabled]) => {
+      if (!enabled || !completed) return;
+      void emitPhases(graphRef.value, ["updated"], runnerOptionsRef.value);
+    }
+  );
+
+  onUnmounted(() => {
+    teardownBoot();
+  });
+}

package/src/createBlueprintEdgeTypes.ts

@@ -0,0 +1,10 @@
+import { markRaw, type Component } from "vue";
+
+import BlueprintSmoothEdge from "./edges/BlueprintSmoothEdge.vue";
+import { BP_FLOW_EDGE_TYPE } from "./graph/sync-edges";
+
+export function createBlueprintEdgeTypes(): Record<string, Component> {
+  return {
+    [BP_FLOW_EDGE_TYPE]: markRaw(BlueprintSmoothEdge),
+  };
+}

package/src/edges/BlueprintSmoothEdge.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { BaseEdge, getSmoothStepPath, type EdgeProps } from "@vue-flow/core";
+import { computed } from "vue";
+
+const EDGE_STROKE = "#2563eb";
+const EDGE_WIDTH = 2.5;
+
+const props = defineProps<EdgeProps>();
+
+const path = computed(() => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  });
+  return edgePath;
+});
+
+const edgeStyle = computed(() => ({
+  stroke: EDGE_STROKE,
+  strokeWidth: EDGE_WIDTH,
+  ...(props.style as Record<string, unknown> | undefined),
+}));
+</script>
+
+<template>
+  <BaseEdge :path="path" class="bp-edge-visible" :style="edgeStyle" />
+</template>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

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

@@ -0,0 +1,206 @@
+import { onUnmounted, ref, type Ref } from "vue";
+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();
+}
+
+function useFetchConfigTaskSnapshot<T>(
+  getSnapshot: () => T
+): Ref<T> {
+  const snapshot = ref(getSnapshot()) as Ref<T>;
+  const update = () => {
+    snapshot.value = getSnapshot();
+  };
+  const unsubscribe = subscribeFetchConfigTasks(update);
+  onUnmounted(unsubscribe);
+  return snapshot;
+}
+
+export function useSwaggerLoadTask(nodeId: string) {
+  return useFetchConfigTaskSnapshot(() => getSwaggerLoadTask(nodeId));
+}
+
+export function useFetchDebugTask(nodeId: string) {
+  return useFetchConfigTaskSnapshot(() => getFetchDebugTask(nodeId));
+}
+
+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 "@vue-flow/core";
+
+import {
+  BP_FLOW_NODE_HEIGHT,
+  BP_FLOW_NODE_WIDTH,
+} from "./graph/vue-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 "@vue-flow/core";
+
+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;