yyd-flow-designer 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yyd-flow-designer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "description": "YYD Flow designer (process orchestration UI)",
   "keywords": [
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "@ant-design/icons": ">=5",
     "@heroicons/react": ">=2",
-    "@xyflow/react": ">=12",
+    "@xyflow/react": ">=12.9",
     "ahooks": ">=3",
     "antd": ">=5",
     "lodash": ">=4",

package/src/designer/flow/Edges/ConnectionLine.tsx

@@ -1,5 +1,37 @@
-import type { ConnectionLineComponentProps } from "@xyflow/react";
-import { getSmoothStepPath, Position } from "@xyflow/react";
+import type { ConnectionLineComponentProps } from '@xyflow/react';
+import { getSmoothStepPath, Position } from '@xyflow/react';
+
+const BACK_RAIL_GAP = 64;
+const STUB = 28;
+const CORNER = 10;
+
+const round = (n: number) => Math.round(n * 10) / 10;
+
+const orthoPath = (points: Array<[number, number]>, radius = CORNER): string => {
+  if (points.length < 2) return '';
+  const pts = points.map(([x, y]) => [round(x), round(y)] as [number, number]);
+  let d = `M ${pts[0][0]} ${pts[0][1]}`;
+  for (let i = 1; i < pts.length - 1; i += 1) {
+    const [x0, y0] = pts[i - 1];
+    const [x1, y1] = pts[i];
+    const [x2, y2] = pts[i + 1];
+    const dx1 = x1 - x0;
+    const dy1 = y1 - y0;
+    const dx2 = x2 - x1;
+    const dy2 = y2 - y1;
+    const len1 = Math.hypot(dx1, dy1) || 1;
+    const len2 = Math.hypot(dx2, dy2) || 1;
+    const r = Math.min(radius, len1 / 2, len2 / 2);
+    const sx = x1 - (dx1 / len1) * r;
+    const sy = y1 - (dy1 / len1) * r;
+    const ex = x1 + (dx2 / len2) * r;
+    const ey = y1 + (dy2 / len2) * r;
+    d += ` L ${round(sx)} ${round(sy)} Q ${x1} ${y1} ${round(ex)} ${round(ey)}`;
+  }
+  const last = pts[pts.length - 1];
+  d += ` L ${last[0]} ${last[1]}`;
+  return d;
+};
 
 const ConnectionLine = ({
   fromX,
@@ -9,34 +41,41 @@ const ConnectionLine = ({
   fromPosition = Position.Right,
   toPosition = Position.Left,
 }: ConnectionLineComponentProps) => {
-  const [edgePath] = getSmoothStepPath({
-    sourceX: fromX,
-    sourceY: fromY,
-    sourcePosition: fromPosition,
-    targetX: toX,
-    targetY: toY,
-    targetPosition: toPosition,
-    borderRadius: 14,
-    offset: 18,
-  });
+  const back = fromX > toX + 20;
+  let edgePath: string;
+  if (back) {
+    const railY = Math.max(fromY, toY) + BACK_RAIL_GAP;
+    edgePath = orthoPath([
+      [fromX, fromY],
+      [fromX + STUB, fromY],
+      [fromX + STUB, railY],
+      [toX - STUB, railY],
+      [toX - STUB, toY],
+      [toX, toY],
+    ]);
+  } else {
+    [edgePath] = getSmoothStepPath({
+      sourceX: fromX,
+      sourceY: fromY,
+      sourcePosition: fromPosition,
+      targetX: toX,
+      targetY: toY,
+      targetPosition: toPosition,
+      borderRadius: 12,
+      offset: 18,
+    });
+  }
 
   return (
     <g>
       <path
         fill="none"
-        stroke={"#009688"}
+        stroke="#64748b"
         strokeWidth={2}
-        className="animated"
+        strokeDasharray="6 4"
         d={edgePath}
       />
-      <circle
-        cx={toX}
-        cy={toY}
-        fill="#fff"
-        r={2}
-        stroke={"#009688"}
-        strokeWidth={10}
-      />
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#64748b" strokeWidth={2} />
     </g>
   );
 };

package/src/designer/flow/Edges/CustomEdge.tsx

@@ -2,7 +2,7 @@
 
 import {
     BaseEdge,
-    getBezierPath,
+    getSmoothStepPath,
     type EdgeProps,
 } from '@xyflow/react';
 import { useMemo } from 'react';
@@ -19,13 +19,15 @@ export default function CustomEdge({
     selected,
     markerEnd,
 }: EdgeProps) {
-    const [edgePath] = getBezierPath({
+    const [edgePath] = getSmoothStepPath({
         sourceX,
         sourceY,
         sourcePosition,
         targetX,
         targetY,
         targetPosition,
+        borderRadius: 10,
+        offset: 16,
     });
 
     // 计算路径长度用于动画

package/src/designer/flow/Edges/DefaultEdge.tsx

@@ -1,62 +1,246 @@
 'use client';
 
-import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react';
-import { useMemo } from 'react';
+import {
+    BaseEdge,
+    EdgeLabelRenderer,
+    EdgeToolbar,
+    useReactFlow,
+    useStore,
+    type EdgeProps,
+} from '@xyflow/react';
+import { useCallback, useMemo, useRef } from 'react';
+import { useFlowStore } from '../../../shared/flow/stores/useFlowStore';
+import {
+    computeAutoWaypoints,
+    isBackEdgeXY,
+    waypointsToPath,
+    type EdgeRouteData,
+    type Waypoint,
+} from './edgeRoute';
 
 const EDGE_STROKE = '#94a3b8';
 const EDGE_STROKE_SELECTED = '#6366f1';
-const BACK_RAIL_GAP = 28;
-const BACK_RAIL_STEP = 16;
-
-const round = (n: number) => Math.round(n * 10) / 10;
-
-const isBackEdge = (sourceX: number, targetX: number) => sourceX > targetX + 16;
-
-const getBackArcPath = (sx: number, sy: number, tx: number, ty: number, railY: number) => {
-    const x1 = round(sx);
-    const y1 = round(sy);
-    const x2 = round(tx);
-    const y2 = round(ty);
-    const yRail = round(railY);
-    const span = Math.max(80, x1 - x2);
-    const c1x = round(x1 - span * 0.08);
-    const c2x = round(x2 + span * 0.22);
-    return `M ${x1} ${y1} C ${c1x} ${yRail}, ${c2x} ${yRail}, ${x2} ${y2}`;
+
+const COLOR_PRESETS = [
+    '#94a3b8',
+    '#6366f1',
+    '#0ea5e9',
+    '#22c55e',
+    '#f59e0b',
+    '#ef4444',
+    '#a855f7',
+    '#0f172a',
+] as const;
+
+/** 路径中点（按折线累计长度），label 贴在线中央 */
+const pathMidpoint = (points: Waypoint[]): Waypoint => {
+    if (points.length < 2) {
+        return points[0] ?? { x: 0, y: 0 };
+    }
+    let total = 0;
+    const segs: number[] = [];
+    for (let i = 1; i < points.length; i += 1) {
+        const d = Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+        segs.push(d);
+        total += d;
+    }
+    if (total <= 0) {
+        return points[0];
+    }
+    let remain = total / 2;
+    for (let i = 0; i < segs.length; i += 1) {
+        if (remain > segs[i]) {
+            remain -= segs[i];
+            continue;
+        }
+        const a = points[i];
+        const b = points[i + 1];
+        const t = segs[i] === 0 ? 0 : remain / segs[i];
+        return {
+            x: a.x + (b.x - a.x) * t,
+            y: a.y + (b.y - a.y) * t,
+        };
+    }
+    return points[points.length - 1];
 };
 
 export default function DefaultEdge({
     id,
+    target,
     sourceX,
     sourceY,
     targetX,
     targetY,
-    sourcePosition,
-    targetPosition,
     style = {},
     selected,
     data,
+    label,
 }: EdgeProps) {
-    const back = isBackEdge(sourceX, targetX);
-    const lane = back ? (id.charCodeAt(Math.max(0, id.length - 1)) % 4) : 0;
-    const railY = Math.min(sourceY, targetY) - BACK_RAIL_GAP - lane * BACK_RAIL_STEP;
+    const { setEdges, screenToFlowPosition } = useReactFlow();
+    const lock = useFlowStore((s) => s.lock);
+    const dragging = useRef<number | null>(null);
+    const route = (data ?? {}) as EdgeRouteData;
+
+    const lane = useStore((state) => {
+        const ids = state.edges
+            .filter((e) => e.target === target)
+            .map((e) => e.id)
+            .sort((a, b) => a.localeCompare(b));
+        const idx = ids.indexOf(id);
+        return idx < 0 ? 0 : idx;
+    });
 
-    const edgePath = useMemo(() => {
-        if (back) {
-            return getBackArcPath(sourceX, sourceY, targetX, targetY, railY);
+    const displayMids: Waypoint[] = useMemo(() => {
+        if (route.manual && Array.isArray(route.waypoints) && route.waypoints.length) {
+            return route.waypoints;
         }
-        const [path] = getBezierPath({
-            sourceX,
-            sourceY,
-            sourcePosition,
-            targetX,
-            targetY,
-            targetPosition,
-        });
-        return path;
-    }, [back, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, railY]);
+        return computeAutoWaypoints(sourceX, sourceY, targetX, targetY, lane);
+    }, [route.manual, route.waypoints, sourceX, sourceY, targetX, targetY, lane]);
+
+    const polyPoints = useMemo(
+        () => [{ x: sourceX, y: sourceY }, ...displayMids, { x: targetX, y: targetY }],
+        [sourceX, sourceY, targetX, targetY, displayMids],
+    );
+
+    const edgePath = useMemo(() => waypointsToPath(polyPoints), [polyPoints]);
+    const labelPos = useMemo(() => pathMidpoint(polyPoints), [polyPoints]);
+    const labelText = typeof label === 'string' ? label : '';
+    const customStroke = typeof style?.stroke === 'string' ? style.stroke : undefined;
+
+    const setEdgeLabel = useCallback(
+        (next: string) => {
+            setEdges((eds) =>
+                eds.map((e) => (e.id === id ? { ...e, label: next || undefined } : e)),
+            );
+        },
+        [id, setEdges],
+    );
+
+    const setEdgeStroke = useCallback(
+        (next: string | undefined) => {
+            setEdges((eds) =>
+                eds.map((e) => {
+                    if (e.id !== id) return e;
+                    const prevStyle = (e.style ?? {}) as Record<string, unknown>;
+                    if (!next) {
+                        const { stroke: _omit, ...rest } = prevStyle;
+                        return { ...e, style: Object.keys(rest).length ? rest : undefined };
+                    }
+                    return { ...e, style: { ...prevStyle, stroke: next } };
+                }),
+            );
+        },
+        [id, setEdges],
+    );
+
+    const patchEdgeData = useCallback(
+        (patch: Partial<EdgeRouteData>) => {
+            setEdges((eds) =>
+                eds.map((e) =>
+                    e.id === id
+                        ? { ...e, data: { ...(e.data as object), ...patch } }
+                        : e,
+                ),
+            );
+        },
+        [id, setEdges],
+    );
+
+    const commitWaypoints = useCallback(
+        (next: Waypoint[], manual = true) => {
+            patchEdgeData({ waypoints: next, manual });
+        },
+        [patchEdgeData],
+    );
+
+    const onHandlePointerDown = useCallback(
+        (index: number, e: React.PointerEvent) => {
+            if (lock) return;
+            e.preventDefault();
+            e.stopPropagation();
+            dragging.current = index;
+
+            const onMove = (ev: PointerEvent) => {
+                if (dragging.current !== index) return;
+                const p = screenToFlowPosition({ x: ev.clientX, y: ev.clientY });
+                const snapOrtho = ev.shiftKey;
+                setEdges((eds) =>
+                    eds.map((edge) => {
+                        if (edge.id !== id) return edge;
+                        const prev = ((edge.data as EdgeRouteData)?.waypoints
+                            ?? displayMids).map((w) => ({ ...w }));
+                        if (!prev[index]) return edge;
+                        let x = p.x;
+                        let y = p.y;
+                        if (snapOrtho) {
+                            const left = index === 0
+                                ? { x: sourceX, y: sourceY }
+                                : prev[index - 1];
+                            if (Math.abs(p.x - left.x) < Math.abs(p.y - left.y)) {
+                                x = left.x;
+                            } else {
+                                y = left.y;
+                            }
+                        }
+                        prev[index] = { x, y };
+                        return {
+                            ...edge,
+                            data: { ...(edge.data as object), waypoints: prev, manual: true },
+                        };
+                    }),
+                );
+            };
+            const onUp = () => {
+                dragging.current = null;
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onUp);
+            };
+            window.addEventListener('pointermove', onMove);
+            window.addEventListener('pointerup', onUp);
+        },
+        [displayMids, id, lock, screenToFlowPosition, setEdges, sourceX, sourceY],
+    );
+
+    const onEdgeDoubleClick = useCallback(
+        (e: React.MouseEvent) => {
+            if (lock) return;
+            e.stopPropagation();
+            const p = screenToFlowPosition({ x: e.clientX, y: e.clientY });
+            const full = polyPoints;
+            let best = 0;
+            let bestDist = Infinity;
+            for (let i = 0; i < full.length - 1; i += 1) {
+                const a = full[i];
+                const b = full[i + 1];
+                const mx = (a.x + b.x) / 2;
+                const my = (a.y + b.y) / 2;
+                const d = Math.hypot(p.x - mx, p.y - my);
+                if (d < bestDist) {
+                    bestDist = d;
+                    best = i;
+                }
+            }
+            const next = [...displayMids];
+            next.splice(best, 0, { x: p.x, y: p.y });
+            commitWaypoints(next, true);
+        },
+        [commitWaypoints, displayMids, lock, polyPoints, screenToFlowPosition],
+    );
+
+    const onHandleContextMenu = useCallback(
+        (index: number, e: React.MouseEvent) => {
+            if (lock) return;
+            e.preventDefault();
+            e.stopPropagation();
+            commitWaypoints(displayMids.filter((_, i) => i !== index), true);
+        },
+        [commitWaypoints, displayMids, lock],
+    );
 
     const trailOn = Boolean((data as any)?.trailOn);
-    const stroke = trailOn ? '#22c55e' : selected ? EDGE_STROKE_SELECTED : EDGE_STROKE;
+    const stroke = trailOn
+        ? '#22c55e'
+        : (customStroke ?? (selected ? EDGE_STROKE_SELECTED : EDGE_STROKE));
     const markerId = `bpmn-edge-arrow-${id}-${trailOn ? 'trail' : selected ? 'selected' : 'default'}`;
 
     return (
@@ -82,6 +266,14 @@ export default function DefaultEdge({
                     />
                 </marker>
             </defs>
+            <path
+                d={edgePath}
+                fill="none"
+                stroke="transparent"
+                strokeWidth={18}
+                style={{ cursor: 'pointer' }}
+                onDoubleClick={onEdgeDoubleClick}
+            />
             <BaseEdge
                 id={id}
                 path={edgePath}
@@ -91,7 +283,141 @@ export default function DefaultEdge({
                     strokeWidth: trailOn || selected ? 2.5 : 2,
                 }}
                 markerEnd={`url(#${markerId})`}
+                {...(labelText
+                    ? {
+                        label: labelText,
+                        labelX: labelPos.x,
+                        labelY: labelPos.y,
+                    }
+                    : {})}
             />
+
+            {selected && !lock && (
+                <EdgeToolbar
+                    edgeId={id}
+                    x={labelPos.x}
+                    y={labelPos.y}
+                    alignX="center"
+                    alignY="top"
+                    className="nodrag nopan"
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                            padding: '6px 8px',
+                            borderRadius: 8,
+                            background: '#fff',
+                            border: '1px solid #e2e8f0',
+                            boxShadow: '0 4px 14px rgba(15,23,42,0.12)',
+                            pointerEvents: 'all',
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                        onMouseDown={(e) => e.stopPropagation()}
+                    >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                            {COLOR_PRESETS.map((c) => {
+                                const active = (customStroke ?? EDGE_STROKE) === c;
+                                return (
+                                    <button
+                                        key={c}
+                                        type="button"
+                                        title={c}
+                                        onClick={() => setEdgeStroke(c === EDGE_STROKE ? undefined : c)}
+                                        style={{
+                                            width: 16,
+                                            height: 16,
+                                            borderRadius: 999,
+                                            border: active ? '2px solid #0f172a' : '1px solid #cbd5e1',
+                                            background: c,
+                                            padding: 0,
+                                            cursor: 'pointer',
+                                        }}
+                                    />
+                                );
+                            })}
+                            <label
+                                title="自定义颜色"
+                                style={{
+                                    width: 16,
+                                    height: 16,
+                                    borderRadius: 999,
+                                    border: '1px solid #cbd5e1',
+                                    overflow: 'hidden',
+                                    cursor: 'pointer',
+                                    position: 'relative',
+                                    display: 'inline-block',
+                                }}
+                            >
+                                <input
+                                    type="color"
+                                    value={customStroke ?? EDGE_STROKE}
+                                    onChange={(e) => setEdgeStroke(e.target.value)}
+                                    style={{
+                                        position: 'absolute',
+                                        inset: 0,
+                                        opacity: 0,
+                                        cursor: 'pointer',
+                                        border: 0,
+                                        padding: 0,
+                                    }}
+                                />
+                                <span
+                                    style={{
+                                        display: 'block',
+                                        width: '100%',
+                                        height: '100%',
+                                        background:
+                                            'conic-gradient(#ef4444, #f59e0b, #22c55e, #0ea5e9, #6366f1, #a855f7, #ef4444)',
+                                    }}
+                                />
+                            </label>
+                        </div>
+                        <input
+                            value={labelText}
+                            maxLength={64}
+                            placeholder="label"
+                            onChange={(e) => setEdgeLabel(e.target.value)}
+                            onKeyDown={(e) => e.stopPropagation()}
+                            className="xy-edge__label"
+                            style={{
+                                width: 96,
+                                padding: '2px 6px',
+                                fontSize: 12,
+                                border: '1px solid #e2e8f0',
+                                borderRadius: 4,
+                                outline: 'none',
+                            }}
+                        />
+                    </div>
+                </EdgeToolbar>
+            )}
+
+            <EdgeLabelRenderer>
+                {selected && !lock && displayMids.map((wp, index) => (
+                    <div
+                        key={`${id}-wp-${index}`}
+                        className="nodrag nopan"
+                        style={{
+                            position: 'absolute',
+                            transform: `translate(-50%, -50%) translate(${wp.x}px, ${wp.y}px)`,
+                            width: 10,
+                            height: 10,
+                            borderRadius: 999,
+                            background: '#fff',
+                            border: `2px solid ${EDGE_STROKE_SELECTED}`,
+                            boxShadow: '0 0 0 1px rgba(99,102,241,0.25)',
+                            cursor: 'move',
+                            pointerEvents: 'all',
+                            zIndex: 5,
+                        }}
+                        onPointerDown={(e) => onHandlePointerDown(index, e)}
+                        onContextMenu={(e) => onHandleContextMenu(index, e)}
+                        title="拖动调整折点（Shift 正交吸附）；右键删除"
+                    />
+                ))}
+            </EdgeLabelRenderer>
         </>
     );
 }