JX-BPOS/apps/web/src/shared/gov/flow/FlowFigure.tsx

/**
 * 编排画布 —— diagram-js 画布件的宿主(编码规范 §6.1「PRD 画布件 1:1 平移」)。
 *
 * `FlowFigureBlock` 自原型 `HostExample` 平移:区块小标题右侧「编辑」芯片进手绘编辑器
 * (FlowEditor,画布内工具栏含 取消/保存绘图);展示态 hero/cap 框 + FlowDiagram
 * (单击节点下钻/选中、双击活动就地改文字);图例贴在流程图正下方。
 * 必须包在 `.process-desk > .process-doc` 纸面容器内(flow-canvas.css 规则 scoped 到它)。
 *
 * `FlowFigure` 保留为只读便捷壳(任务页的流程图用它)。
 */
import { useState } from 'react';
import type { ProcessPackage } from '@contracts';
import { Ico } from '@ui';
import { FlowDiagram } from './FlowDiagram.tsx';
import { FlowEditor } from './FlowEditor.tsx';
import type { FlowEdge, FlowGraph } from './flow-layout.ts';
import type { SpPosition } from './support.tsx';
import { packageToGraph } from './pkg-to-graph.ts';
import type { InstanceMark } from './pkg-to-graph.ts';
import './flow-canvas.css';

export function FlowFigureBlock({
  title,
  oneLiner,
  graph,
  drilledIds,
  positions,
  canEdit,
  onNodeClick,
  onEdgeClick,
  onEditNodeText,
  onSaveFlowGraph,
}: {
  title: string;
  oneLiner?: string | undefined;
  graph: FlowGraph | null;
  /** 已建立下钻内容的节点 id(删除这些节点时编辑器会二次确认) */
  drilledIds: string[];
  positions?: SpPosition[] | undefined;
  canEdit: boolean;
  onNodeClick: (nodeId: string) => void;
  /** 点击连线选中边(属性卡随之切到该边);不传则边不可点 */
  onEdgeClick?: ((edge: FlowEdge) => void) | undefined;
  /** 双击流程图活动就地改文字(标题 / 主办) */
  onEditNodeText?: ((nodeId: string, patch: { label: string; owner?: string }) => Promise<void>) | undefined;
  /** 手工绘图:整图保存(idMap = 本次编辑会话 原id→现id,宿主用它重键下钻内容) */
  onSaveFlowGraph?: ((graph: FlowGraph, idMap: Record<string, string>) => Promise<void>) | undefined;
}) {
  const [editing, setEditing] = useState(false);
  return (
    <>
      <div className="view-lbl">
        流程图 · 顺序
        {canEdit && onSaveFlowGraph !== undefined && !editing && (
          <button
            type="button"
            className="dc2-addbtn"
            title="手工绘图(珊格正交:活动点/审批点/起止,拖拽连线);画布内工具栏有 取消/保存绘图"
            onClick={() => setEditing(true)}
          >
            <Ico name="pen-line" s={11} /> 编辑
          </button>
        )}
      </div>
      {editing && onSaveFlowGraph !== undefined ? (
        <div className="hero">
          <div className="cap">
            <span>FIG — {title}流程 · 手工绘图</span>
            <span>珊格 10px · 直线与直角折线</span>
          </div>
          <FlowEditor
            initial={graph}
            drilledIds={drilledIds}
            positions={positions}
            onSave={async (next, idMap) => {
              await onSaveFlowGraph(next, idMap);
              setEditing(false);
            }}
            onCancel={() => setEditing(false)}
          />
        </div>
      ) : (
        <div className="hero">
          <div className="cap">
            <span>FIG — {title}流程</span>
            <span>{oneLiner ?? '活动 · 网关 · 顺序流'}</span>
          </div>
          <div className="fig-body">
            <FlowDiagram
              graph={graph}
              variant="business"
              onNodeClick={onNodeClick}
              onEdgeClick={onEdgeClick}
              onEditNode={canEdit ? onEditNodeText : undefined}
              ownerOptions={positions}
              ariaLabel={`${title}业务流程图`}
            />
          </div>
        </div>
      )}

      {/* 图例贴在流程图正下方,图标与绘图工具(元素盘)同款 SVG */}
      <div className="legend">
        <span>
          <b>图例</b>
        </span>
        <span><i className="lg-i fe-pi-start" aria-hidden /> 起始</span>
        <span><i className="lg-i fe-pi-end" aria-hidden /> 结束</span>
        {/* 节点只分活动点/审批点 —— 标准/案例是实现方式,不进编排面的词汇表 */}
        <span><i className="lg-i fe-pi-sop" aria-hidden /> 活动点</span>
        <span><i className="lg-i fe-pi-approval" aria-hidden /> 审批点</span>
        <span><i className="lg-i lg-flow" aria-hidden /> 顺序流</span>
        <span className="sep">|</span>
        <span>
          <b>责任</b>
        </span>
        <span>右上角标 责任人</span>
      </div>
    </>
  );
}

/** 只读壳:流程包 → 图 → 画(任务页 / 工作流实例页用) */
export function FlowFigure({
  pkg,
  instances,
  onNodeClick,
}: {
  pkg: ProcessPackage;
  instances: readonly InstanceMark[];
  onNodeClick?: (nodeId: string) => void;
}) {
  const graph = packageToGraph(pkg, instances);
  return (
    <div className="process-desk">
      <div className="process-doc">
        <FlowDiagram
          graph={graph}
          variant="business"
          ariaLabel={`流程图 · ${pkg.name}`}
          {...(onNodeClick === undefined ? {} : { onNodeClick })}
        />
      </div>
    </div>
  );
}